@extends('webUser.layouts.app')
@section('contents')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/css/intlTelInput.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/js/intlTelInput.min.js"></script>

<!-- Background Top Section -->
    <div class="relative changePasswordBG bg-no-repeat bg-cover bg-center py-48 w-full">
        <!-- Back Button -->
        <a href="{{route('user.profile')}}" class="absolute top-6 left-6 text-white p-2">
            <img src="{{asset('user/images/backIcon.svg')}}" alt="Back Icon" class="w-10 h-10" />
        </a>

    </div>

    <!-- Heading & Form Section -->
    <div class="ProfilePageBottomBG bg-center bg-cover bg-no-repeat">
        <div class="relative z-10 -mt-56 flex flex-col items-center px-4">
            <!-- Heading Outside Card -->
            <h2 class="text-2xl md:text-3xl font-bold text-white mb-3">
                Change Phone Number
            </h2>
            <p class="text-sm md:text-base text-white mb-6">
                Create your new phone number
            </p>

            <!-- Card -->
            <div class="w-full max-w-md bg-white rounded-xl changePasswordCardShadow p-6 md:p-8">
                <!-- New Password -->
                <div class="mb-6 relative">
                    <label class="block text-sm font-medium mb-2" for="phone">Phone Number</label>
                    <div class="flex gap-3 flex-col sm:flex-row">
                        <!-- Flag & Dial Code Selector -->
                        <div class="flex items-center border rounded-2xl w-full sm:w-1/4 h-[49px] mt-[10px]">
                            <input type="tel" id="country_selector_input" class="outline-none bg-transparent text-sm w-full hidden" />
                            <input type="hidden" id="dial_code_picker" value="{{$user->phone_code}}" class="outline-none bg-transparent text-sm w-full hidden" />
                        </div>
                        <input type="hidden" id="phone_iso" name="phone_iso" value="{{ strtolower($user->iso_code) }}" />
                        <!-- Phone Number Field -->
                        <div class="flex items-center border rounded-2xl px-3 py-2 w-full sm:w-[70%] mt-2">
                            <input type="tel" id="phone" name="phone" value="{{ $user->phone_number }}" placeholder="749509457"
                                class="flex-1 outline-none bg-transparent text-sm" />
                        </div>
                    </div>
                    <span class="text-red-500 text-sm mb-4 validations" id="phone-error"></span>
                </div>


                <!-- Confirm Password -->
                <!-- <div class="mb-2 relative">
                    <label class="block text-sm font-medium mb-2" for="Password">Password</label>
                    <div class="flex items-center border rounded-2xl px-3 py-2">
                        <img src="{{asset('user/images/password.svg')}}" alt="Lock Icon" class="w-5 h-5 mr-2" />
                        <input id="Password" type="password" class="flex-1 outline-none bg-transparent"
                            placeholder="***********" />
                        <img src="{{asset('user/images/openeye.svg')}}" alt="Show Icon" class="w-5 h-5 cursor-pointer" />
                    </div>
                </div> -->

            </div>
            <!-- Save Button -->
            <button 
                onclick="updatePhoneNumber(event)"
                id="changePasswordBtn"
                class="w-full max-w-md bg-[#009A94] text-white font-medium py-3 my-6 mt-10 rounded-2xl hover:bg-[#007f7a] transition flex justify-center items-center gap-2">
                Save Changes
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M17 8l4 4m0 0l-4 4m4-4H3" />
                </svg>
            </button>
        </div>

    </div>
<script>
    $(document).ready(function () {
        const $phoneInput = $('#phone');
        const $dialCodeInput = $('#dial_code_picker');
        const $isoInput = $('#phone_iso');
        const $countrySelectorInput = $('#country_selector_input'); // visible input with intl-tel-input

        const iti = window.intlTelInput($countrySelectorInput[0], {
            initialCountry: "{{ strtolower($user->iso_code) ?? 'in' }}",
            separateDialCode: true,
            nationalMode: true,
            utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/js/utils.min.js"
        });

        // Match by saved dial code if iso doesn't align
        const expectedDialCode = "{{ $user->phone_code }}";
        const selected = iti.getSelectedCountryData();
        if (selected.dialCode != expectedDialCode) {
            const match = window.intlTelInputGlobals.getCountryData().find(c => c.dialCode === expectedDialCode);
            if (match) iti.setCountry(match.iso2);
        }

        // On country change, update hidden fields immediately
        $countrySelectorInput.on('countrychange', function () {
            const countryData = iti.getSelectedCountryData();
            $dialCodeInput.val(countryData.dialCode);
            $isoInput.val(countryData.iso2);
            $("#dial_code_picker").val(countryData.dialCode);
            $("#phone_iso").val(countryData.iso2);
        });

        // Optionally: on phone input blur, update to full international number
        // $phoneInput.on('blur', function () {
        //     const countryData = iti.getSelectedCountryData();
        //     const fullPhone = '+' + countryData.dialCode + $phoneInput.val();
        //     $phoneInput.val(fullPhone);
        // });
    });
</script>


    
    <script>
        function updatePhoneNumber(event){
            const phoneInput = $("#phone").val();
            const isoInput = $("#phone_iso").val();
            const dialCodePicker = $("#dial_code_picker").val();
            $.ajax({
                url: '{{ route("user.update-phone") }}', // define this route in Laravel
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    phone_number: phoneInput,
                    iso_code: isoInput,
                    phone_code: dialCodePicker
                },
                beforeSend: function() {
                  $('#changePasswordBtn').prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i>');
                },
                headers: {
                  'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                success: function (response) {
                  $('#changePasswordBtn').prop('disabled', false).html(`Save Changes
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M17 8l4 4m0 0l-4 4m4-4H3" />
                </svg>`);
                  toastr.success(response.message);
                  $('#changePasswordForm')[0].reset();
                },
                error: function (xhr) {
                  $('#changePasswordBtn').prop('disabled', false).html(`Save Changes
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M17 8l4 4m0 0l-4 4m4-4H3" />
                </svg>`);
                  if (xhr.status === 422) {
                    var errors = xhr.responseJSON.error;
                    var errorMessages = '';
                    $.each(errors, function(key, value) {
                        errorMessages = value[0];
                        $('#phone-error').html(errorMessages);
                    });
                    // toastr.warning("Validation error");
                  } else{
                    toastr.error(xhr.responseJSON.message);
                  }
                }
            });
        }
    
    </script>







@endsection