<%- include('../../../components/input.ejs', inputAttrs={ type: "hidden" , name:"id", value: r_client.id, classes: "" ,
    ids:"" }) %>
<link href="/webview/assets/flag/css/intlTelInput.css" rel="stylesheet" />


    <div class="card store mainInfo">
    <div class="card-body">
        <div class="row">

        <!-- Name -->
        <%- include('../../../components/input.ejs', inputAttrs={ 
            type: "text" , 
            name:'name', 
            required:true,
            readonly:true, 
            label:i18n.__('common.name'), 
            value:r_client.name, 
            placeholder:i18n.__('common.name'),
            classes:["form-control"], 
            ids:"" 
        }) %>


        
            <input type="hidden" id="country_code" name="countryCode" value="<%= r_client?.countryCode || '' %>">
        <input type="hidden" id="iso" name="iso" value="<%= r_client?.iso || '' %>">

        <%- include('../../../components/input.ejs', inputAttrs = {
            type: "text",
            name:'phone',
            required:true,
            label:i18n.__('common.phone'),
            invalidMsg:i18n.__('common.phoneNoLess'),
            placeholder:i18n.__('common.{{field}}Placeholder',{field:i18n.__('common.phone')}),
            classes:["form-control"],
            ids:["telephone"],
            readonly:true,
            value: r_client?.phone || "",
            oninput: "this.value = this.value.replace(/[^0-9]/g, ''); validateInput(this)"

        }) %>




        <!-- Status -->
        <%- include('../../../components/input.ejs', inputAttrs={ 
            type: "text" , 
            name:'status', 
            required:true, 
            readonly:true, 
            label:i18n.__('common.status') ,
            value: i18n.__('common.'+r_client.status), 
            placeholder:i18n.__('common.status'),
            classes:["form-control"], 
            ids:"" 
        }) %>

        <%- include('../../../components/input.ejs', inputAttrs={ 
            type: "text" , 
            name:'createdAt', 
            required:true,
            readonly:true, 
            value:r_client.createdAt, 
            label:i18n.__('common.createdAt'),
            placeholder:i18n.__('common.createdAt'), 
            classes:["form-control"], 
            ids:"" 
        }) %>

        </div>
    </div>
    </div>

                                    
    <script src="/webview/assets/flag/js/intlTelInput.min.js"></script>

<script>
  (function () {
    var tel = document.getElementById('telephone');
    if (!tel || !window.intlTelInput) return;

    tel.readOnly = true;
    tel.disabled = false;

    if (tel._iti && typeof tel._iti.destroy === 'function') {
      try { tel._iti.destroy(); } catch (e) {}
    }

    var savedDial = '<%= r_client?.countryCode || "" %>';
    var savedIso  = '<%= (r_client?.iso || "").toLowerCase() %>';

    var itiInst = window.intlTelInput(tel, {
      separateDialCode: true,
      initialCountry: savedIso || 'sa',
      preferredCountries: ['eg','sa','ae','kw','qa','bh','om','ma','dz','tn'],
      utilsScript: '/webview/assets/flag/js/utils.js'
    });

    tel._iti = itiInst;

    if (savedDial && !savedIso) {
      var list = (window.intlTelInputGlobals && window.intlTelInputGlobals.getCountryData && window.intlTelInputGlobals.getCountryData()) || [];
      var match = list.find(function (c) { return ('+' + c.dialCode) === savedDial; });
      if (match) itiInst.setCountry(match.iso2);
    }

    var cc = document.getElementById('country_code');
    var iso = document.getElementById('iso');

    function syncHidden() {
      var d = itiInst.getSelectedCountryData() || {};
      if (cc)  cc.value  = d.dialCode ? ('+' + d.dialCode) : '';
      if (iso) iso.value = (d.iso2 || '').toLowerCase();
    }

    syncHidden();
    tel.addEventListener('countrychange', syncHidden);
  })();
</script>



<style>
        .iti {
        display: block;
        width: 100%;
        position: relative;
    }

    #telephone,
    .iti input[type="tel"] {
        width: 100%;
    }

    .iti .iti__country-name {
        display: none !important;
    }

</style>