Untitled

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/css/intlTelInput.css">
<style>
    /*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

    .iti {
        position: relative;
        display: inline-block;
        width: 100%;
    }

    .iti__selected-dial-code {
        display: none;
    }

    .iti--separate-dial-code .iti__selected-flag {
        background-color: rgb(0 0 0 / 0%);
    }


    input.code_id:focus {
        outline: none;
    }

    .iti iti--allow-dropdown iti--show-flags {
        border: none !important;
        border-radius: 0 !important;
        border-bottom: 1px solid blue !important;
    }

    .p-design {
        padding-left: 90px !important;
    }

    iti--allow-dropdown input,
    .iti--allow-dropdown input[type=text],
    .iti--allow-dropdown input[type=tel],
    .iti--separate-dial-code input,
    .iti--separate-dial-code input[type=text],
    .iti--separate-dial-code input[type=tel] {
        margin-left: 12px !important;
    }
</style>
@php
    $phone = $phone ?? '';
    $page = $page ?? '';
    $css = $css ?? '';
    $d_none = $d_none ?? '';
    $readonly = $readonly ?? '';

    if ($device == 'iPhone') {
        $width_css = 'width: 58px';
        $margin_left = '';
    } else {
        $width_css = 'width: 50px';
        $margin_left = 'margin-left:3px !important';
    }

@endphp
<!-- <small>{{ $device }}</small> -->
<div style="position: relative;">
    <input id="phone2" required type="tel" oninput="validatePhoneNumber(this)" value="{{ $phone ? $phone : '+91' }} "
        class="form-control w-10 phone-control p-design" maxlength="20" name="phone" name="iso2"
        style="width: 100%; {{ $margin_left }};  {{ $css }}" {{ $readonly }}>

    <input type="text" name="iso2" class="code_id" readonly
        style="border: solid 2px white; position: absolute; left: 43px; top: 5px; {{ $width_css }};">
</div>



<div id="phone-error" style="color: red;"></div>

<script src="https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/js/intlTelInput.min.js"></script>
<script>
    const input = document.querySelector("#phone2");
    window.intlTelInput(input, {
        separateDialCode: true,
        utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/js/utils.js",
    });

    const iti = intlTelInput(input);
    document.querySelector('input[name="iso2"]').value = "+" + `${iti.getSelectedCountryData().dialCode}`;
    input.addEventListener("countrychange", function() {
        console.log(iti.getSelectedCountryData());
        $("input[name=iso2]").val("+" + `${iti.getSelectedCountryData().dialCode}`);
    });
    const errorElement = document.querySelector("#phone-error");
    input.addEventListener("input", function() {
        const isValid = iti.isValidNumber();
        if (isValid) {
            errorElement.textContent = "";
            var data = $("#phone2").val();
            document.getElementById("phone2").maxLength = data.length;
            document.querySelector('[type = "submit"]').disabled = false;
        } else {
            errorElement.textContent = "Invalid phone number";
            document.querySelector('[type = "submit"]').disabled = true;
        }
    });
</script>

<script>
    function validatePhoneNumber(event) {
        var phoneNumber = event.value.replace(/\D/g, '');
        event.value = phoneNumber;
    }
</script>