@extends('front.layouts.master')

@push('css')
<link rel="stylesheet" href="{{asset('front/assets/css/store.css')}}">
@endpush

@section('title', TranslationHelper::translate('Profile Meta Title', 'site'))

@section('meta_description', TranslationHelper::translate('Profile Meta Description', 'site'))

@section('content')
<main class="main">

    <!-- breadcrumb -->
    <div class="site-breadcrumb" style="background: url('{{ asset("end-user/assets/img/breadcrumb/01.png") }}')">
        <div class="container">
            <h2 class="breadcrumb-title">{{TranslationHelper::translate('Profile', 'site') }}</h2>
            <ul class="breadcrumb-menu">
                <li><a href="{{ route('site.index') }}">{{TranslationHelper::translate('Home', 'site') }}</a></li>
                <li class="active">{{TranslationHelper::translate('Profile', 'site') }}</li>
            </ul>
        </div>
    </div>
    <!-- breadcrumb end -->

    <!-- user-profile -->
    <div class="user-profile py-120">
        <div class="container">
            <div class="row">
                <div class="col-lg-3">
                    @include('end-user.layouts.profile_sidebar')
                </div>
                <div class="col-lg-9">
                    <div class="user-profile-wrapper">
                        <div class="row">
                            <div class="col-lg-12">

                                <div class="user-profile-card">
                                    <h4 class="user-profile-card-title">{{TranslationHelper::translate('Profile Info', 'site' )}}</h4>
                                    @if (session()->has('success'))
                                    <div class="alert alert-success">
                                        {{ session()->get('success') }}
                                    </div>

                                    @endif
                                    <div class="user-profile-form">
                                        <form action="{{ route('site.update.profile') }}" method="POST"
                                            enctype="multipart/form-data">
                                            @csrf

                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label>{{TranslationHelper::translate('name' ,'site' )}}</label>
                                                        <input type="text" class="form-control" name="name"
                                                            value="{{ auth('end-user')->user()->name }}" required
                                                            placeholder="Name">
                                                        @error('name')
                                                        <span class="text-danger" role="alert">
                                                            <strong>{{ $message }}</strong>
                                                        </span>
                                                        @enderror
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label>{{TranslationHelper::translate('email' ,'site'
                                                            )}}</label>
                                                        <input type="text" class="form-control" disabled
                                                            value="{{ auth('end-user')->user()->email }}">
                                                        @error('email')
                                                        <span class="text-danger" role="alert">
                                                            <strong>{{ $message }}</strong>
                                                        </span>
                                                        @enderror
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label>{{TranslationHelper::translate('phone' ,'site'
                                                            )}}</label>
                                                        <br>
                                                        <input type="text" class="form-control" name="phone"
                                                            value="{{ auth('end-user')->user()->phone }}" required
                                                            placeholder="Phone" id="profile_phone">
                                                            <div id="digit_count"></div>
                                                        @error('phone')
                                                        <span class="text-danger" role="alert">
                                                            <strong>{{ $message }}</strong>
                                                        </span>
                                                        @enderror
                                                    </div>
                                                </div>
                                                <input type="hidden" name="country_code" id="country_code" >

                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label>{{TranslationHelper::translate('Edit Photo' ,'site'
                                                            )}}</label>
                                                        <input type="file" class="form-control" name="image">
                                                        @error('image')
                                                        <span class="text-danger" role="alert">
                                                            <strong>{{ $message }}</strong>
                                                        </span>
                                                        @enderror
                                                    </div>
                                                </div>

                                                <h6 class="fw-bold mt-4 mb-1">{{TranslationHelper::translate('address', 'site' )}}</h6>
                                                <div class="col-lg-6">
                                                    <div class="form-group">
                                                        <label>{{TranslationHelper::translate('city' ,'site' )}}</label>
                                                        <select name="city_id" class="form-control" id="cityDropdown"
                                                            required>
                                                            <option value="">{{TranslationHelper::translate('Choose City' ,'site' )}}</option>
                                                            @foreach ($cities as $city)
                                                            <option value="{{ $city->id }}" {{ $city->id ==
                                                                auth('end-user')->user()->city_id ? 'selected' : '' }}>
                                                                {{ $city->name }}
                                                            </option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="form-group">
                                                        <label>{{TranslationHelper::translate('reigon' ,'site')}}</label>
                                                        <select name="district_id" id="regionDropdown"
                                                            class="form-control">
                                                            <option value="">{{ auth('end-user')->user()->reigon?->name
                                                                }}</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                            <button class="theme-btn my-3 " type="submit">
                                                <span class="far fa-user"></span> {{TranslationHelper::translate('Save Changes' ,'site' )}}
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- user-profile end -->

</main>
@endsection

@push('js')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    $(document).ready(function() {
          $('#cityDropdown').on('change', function() {
              var cityId = $(this).val();
              var siteLang = '{{ app()->getLocale() }}';
              $.ajax({
                  url: "{{ asset('api/region/') }}"+'/'+cityId,
                  method: 'GET',
                  success: function(data) {
                      $('#regionDropdown').empty();
                      $('#regionDropdown').niceSelect('update');

                      $.each(data.data, function(index, region) {

                          $('#regionDropdown').append('<option value="' + region.id + '">' + region.name + '</option>');
                          $('#regionDropdown').niceSelect('update');
                      });

                  },
                  error: function(error) {
                      console.error('Error fetching regions:', error);
                  }
              });
          });

      });
</script>
<script>
    function confirmDelete(event) {
        event.preventDefault();
        // Display SweetAlert2 confirmation
        Swal.fire({
            title: "{{ TranslationHelper::translate('Are you sure?', 'site') }}",
            text: "{{ TranslationHelper::translate('This action cannot be undone!', 'site') }}",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: "{{ TranslationHelper::translate('Yes, delete it!', 'site') }}",
            cancelButtonText: "{{ TranslationHelper::translate('Cancel', 'site') }}"
        }).then((result) => {
            if (result.isConfirmed) {
                // If the user confirms, submit the form
                document.getElementById('delete-account-form').submit();
            }
        });

        // Prevent the default form submission

    }
</script>
<script>
    $(document).ready(function() {
        const input = document.querySelector("#profile_phone");

        // Retrieve country code from server-side and map it to ISO country code
        const initialCountryCode = "{{ auth('end-user')->user()->country_code }}";
        // Example: Convert numeric country code to ISO code (you need to implement this mapping)
        const countryCodeMap ={
    "+1": "US", // United States
    "+7": "RU", // Russia
    "+20": "EG", // Egypt
    "+27": "ZA", // South Africa
    "+30": "GR", // Greece
    "+31": "NL", // Netherlands
    "+32": "BE", // Belgium
    "+33": "FR", // France
    "+34": "ES", // Spain
    "+36": "HU", // Hungary
    "+39": "IT", // Italy
    "+40": "RO", // Romania
    "+41": "CH", // Switzerland
    "+43": "AT", // Austria
    "+44": "GB", // United Kingdom
    "+45": "DK", // Denmark
    "+46": "SE", // Sweden
    "+47": "NO", // Norway
    "+48": "PL", // Poland
    "+49": "DE", // Germany
    "+51": "PE", // Peru
    "+52": "MX", // Mexico
    "+53": "CU", // Cuba
    "+54": "AR", // Argentina
    "+55": "BR", // Brazil
    "+56": "CL", // Chile
    "+57": "CO", // Colombia
    "+58": "VE", // Venezuela
    "+60": "MY", // Malaysia
    "+61": "AU", // Australia
    "+62": "ID", // Indonesia
    "+63": "PH", // Philippines
    "+64": "NZ", // New Zealand
    "+65": "SG", // Singapore
    "+66": "TH", // Thailand
    "+81": "JP", // Japan
    "+82": "KR", // South Korea
    "+84": "VN", // Vietnam
    "+86": "CN", // China
    "+90": "TR", // Turkey
    "+91": "IN", // India
    "+92": "PK", // Pakistan
    "+93": "AF", // Afghanistan
    "+94": "LK", // Sri Lanka
    "+95": "MM", // Myanmar
    "+98": "IR", // Iran
    "+211": "SS", // South Sudan
    "+212": "MA", // Morocco
    "+213": "DZ", // Algeria
    "+216": "TN", // Tunisia
    "+218": "LY", // Libya
    "+220": "GM", // Gambia
    "+221": "SN", // Senegal
    "+222": "MR", // Mauritania
    "+223": "ML", // Mali
    "+224": "GN", // Guinea
    "+225": "CI", // Ivory Coast
    "+226": "BF", // Burkina Faso
    "+227": "NE", // Niger
    "+228": "TG", // Togo
    "+229": "BJ", // Benin
    "+230": "MU", // Mauritius
    "+231": "LR", // Liberia
    "+232": "SL", // Sierra Leone
    "+233": "GH", // Ghana
    "+234": "NG", // Nigeria
    "+235": "TD", // Chad
    "+236": "CF", // Central African Republic
    "+237": "CM", // Cameroon
    "+238": "CV", // Cape Verde
    "+239": "ST", // Sao Tome and Principe
    "+240": "GQ", // Equatorial Guinea
    "+241": "GA", // Gabon
    "+242": "CG", // Congo
    "+243": "CD", // Democratic Republic of the Congo
    "+244": "AO", // Angola
    "+245": "GW", // Guinea-Bissau
    "+246": "IO", // British Indian Ocean Territory
    "+248": "SC", // Seychelles
    "+249": "SD", // Sudan
    "+250": "RW", // Rwanda
    "+251": "ET", // Ethiopia
    "+252": "SO", // Somalia
    "+253": "DJ", // Djibouti
    "+254": "KE", // Kenya
    "+255": "TZ", // Tanzania
    "+256": "UG", // Uganda
    "+257": "BI", // Burundi
    "+258": "MZ", // Mozambique
    "+260": "ZM", // Zambia
    "+261": "MG", // Madagascar
    "+262": "RE", // Réunion
    "+263": "ZW", // Zimbabwe
    "+264": "NA", // Namibia
    "+265": "MW", // Malawi
    "+266": "LS", // Lesotho
    "+267": "BW", // Botswana
    "+268": "SZ", // Eswatini
    "+269": "KM", // Comoros
    "+290": "SH", // Saint Helena
    "+291": "ER", // Eritrea
    "+297": "AW", // Aruba
    "+298": "FO", // Faroe Islands
    "+299": "GL", // Greenland
    "+350": "GI", // Gibraltar
    "+351": "PT", // Portugal
    "+352": "LU", // Luxembourg
    "+353": "IE", // Ireland
    "+354": "IS", // Iceland
    "+355": "AL", // Albania
    "+356": "MT", // Malta
    "+357": "CY", // Cyprus
    "+358": "FI", // Finland
    "+359": "BG", // Bulgaria
    "+370": "LT", // Lithuania
    "+371": "LV", // Latvia
    "+372": "EE", // Estonia
    "+373": "MD", // Moldova
    "+374": "AM", // Armenia
    "+375": "BY", // Belarus
    "+376": "AD", // Andorra
    "+377": "MC", // Monaco
    "+378": "SM", // San Marino
    "+379": "VA", // Vatican City
    "+380": "UA", // Ukraine
    "+381": "RS", // Serbia
    "+382": "ME", // Montenegro
    "+383": "XK", // Kosovo
    "+385": "HR", // Croatia
    "+386": "SI", // Slovenia
    "+387": "BA", // Bosnia and Herzegovina
    "+389": "MK", // North Macedonia
    "+420": "CZ", // Czech Republic
    "+421": "SK", // Slovakia
    "+423": "LI", // Liechtenstein
    "+500": "FK", // Falkland Islands
    "+501": "BZ", // Belize
    "+502": "GT", // Guatemala
    "+503": "SV", // El Salvador
    "+504": "HN", // Honduras
    "+505": "NI", // Nicaragua
    "+506": "CR", // Costa Rica
    "+507": "PA", // Panama
    "+508": "PM", // Saint Pierre and Miquelon
    "+509": "HT", // Haiti
    "+590": "GP", // Guadeloupe
    "+591": "BO", // Bolivia
    "+592": "GY", // Guyana
    "+593": "EC", // Ecuador
    "+594": "GF", // French Guiana
    "+595": "PY", // Paraguay
    "+596": "MQ", // Martinique
    "+597": "SR", // Suriname
    "+598": "UY", // Uruguay
    "+599": "CW", // Curacao
    "+670": "TL", // Timor-Leste
    "+672": "NF", // Norfolk Island
    "+673": "BN", // Brunei
    "+674": "NR", // Nauru
    "+675": "PG", // Papua New Guinea
    "+676": "TO", // Tonga
    "+677": "SB", // Solomon Islands
    "+678": "VU", // Vanuatu
    "+679": "FJ", // Fiji
    "+680": "PW", // Palau
    "+681": "WF", // Wallis and Futuna
    "+682": "CK", // Cook Islands
    "+683": "NU", // Niue
    "+685": "WS", // Samoa
    "+686": "KI", // Kiribati
    "+687": "NC", // New Caledonia
    "+688": "TV", // Tuvalu
    "+689": "PF", // French Polynesia
    "+690": "TK", // Tokelau
    "+691": "FM", // Micronesia
    "+692": "MH", // Marshall Islands
    "+850": "KP", // North Korea
    "+852": "HK", // Hong Kong
    "+853": "MO", // Macau
    "+855": "KH", // Cambodia
    "+856": "LA", // Laos
    "+880": "BD", // Bangladesh
    "+886": "TW", // Taiwan
    "+960": "MV", // Maldives
    "+961": "LB", // Lebanon
    "+962": "JO", // Jordan
    "+963": "SY", // Syria
    "+964": "IQ", // Iraq
    "+965": "KW", // Kuwait
    "+966": "SA", // Saudi Arabia
    "+967": "YE", // Yemen
    "+968": "OM", // Oman
    "+970": "PS", // Palestine
    "+971": "AE", // United Arab Emirates
    "+972": "IL", // Israel
    "+973": "BH", // Bahrain
    "+974": "QA", // Qatar
    "+975": "BT", // Bhutan
    "+976": "MN", // Mongolia
    "+977": "NP", // Nepal
    "+992": "TJ", // Tajikistan
    "+993": "TM", // Turkmenistan
    "+994": "AZ", // Azerbaijan
    "+995": "GE", // Georgia
    "+996": "KG", // Kyrgyzstan
    "+998": "UZ", // Uzbekistan
}
;
        const initialCountry = countryCodeMap[initialCountryCode] || ''; // Default to empty if not found

        const iti = window.intlTelInput(input, {
            initialCountry: initialCountry,
            separateDialCode: true,
            utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@23.0.8/build/js/utils.js",
        });

        input.addEventListener('blur', function() {
            const number = iti.getNumber();
            const isValid = iti.isValidNumber();
            const countryData = iti.getSelectedCountryData();
            const country_code = `+${countryData.dialCode}`; // Save the country code with +

            if (!isValid) {
                // Using SweetAlert for displaying error message
                Swal.fire({
                    icon: 'error',
                    title: 'Invalid Number!',
                    text: `The number ${number} is not valid for ${countryData.name}`,
                });
            }
        });

        $('form').submit(function(event) {
            event.preventDefault();

            const number = iti.getNumber();
            const isValid = iti.isValidNumber();
            const countryData = iti.getSelectedCountryData();
            const country_code = `+${countryData.dialCode}`; // Save the country code with +

            $('#country_code').val(country_code); // Set the country code with +

            if (isValid) {
                // Proceed with form submission
                this.submit();
            } else {
                // Display validation error with SweetAlert
                Swal.fire({
                    icon: 'error',
                    title: 'Invalid Number!',
                    text: `Please enter a valid phone number.`,
                });
            }
        });
    });
</script>


@endpush