@extends('admin.layouts.app')
@section('style')
<link rel="stylesheet" href="{{ asset('assets/vendor/css/pages/page-account-settings.css') }}" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/23.0.10/css/intlTelInput.css" integrity="sha512-OkSoWyaoScjXhOm87XO5hDz1E5buvm2aAkq+5zJmaYpylA0OKJ5no5qc4ZRrmApoaXEgXc3n0iyVS1q5FgiJjg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
    .iti {
        position: relative;
        display: inline-block;
        width: 100% !important;
    }

</style>
@endsection
@section('content')
<h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light">Account Settings /</span> Contact</h4>

<div class="row">
    <div class="col-md-12">
        <ul class="nav nav-pills flex-column flex-md-row mb-4">
            <li class="nav-item">
                <a class="nav-link" href="{{ route('promoter.profile.setting') }}"><i class="ti-xs ti ti-users me-1"></i> Account</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{{ route('promoter.profile.security') }}"><i class="ti-xs ti ti-lock me-1"></i> Security</a>
            </li>
            <li class="nav-item">
                <a class="nav-link active" href="{{ route('promoter.profile.contact') }}"><i class="ti-xs ti ti-phone me-1"></i> Contact</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{{ route('promoter.profile.details') }}"><i class="fas fa-info-circle me-1"></i> Details</a>
            </li>
        </ul>
        <!-- Change Password -->
        <div class="card mb-4">
            <h5 class="card-header">Change cotanct details</h5>
            <div class="card-body">
                <form id="formAccountSettings" method="POST" action="{{ route('promoter.profile.save-contact-details') }}">
                    @csrf
                    <div class="form-group row mb-3">
                        <div class="col">
                            <label for="phone_number" class="form-label">Phone Number <small class="text-danger">*</small></label>
                            <input type="tel" class="form-control @error('phone_number') is-invalid @enderror" id="phone_number" name="phone_number" value="{{ old('phone_number') }}">
                            <input type="hidden" id="country_code" name="country_code" value="{{ old('country_code', '+974') }}">
                            <p class="text-success">+{{ $promoter->promoterDetails->country_code.$promoter->promoterDetails->phone_number }}</p>
                            @error('phone_number')
                            <span class="text-danger" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                        <div class="col">
                            <label for="whatsapp_number" class="form-label">WhatsApp Number <small class="text-danger">*</small></label>
                            <input type="tel" class="form-control @error('whatsapp_number') is-invalid @enderror" id="whatsapp_number" name="whatsapp_number" value="{{ old('whatsapp_number') }}">
                            <input type="hidden" id="whatsapp_country_code" name="whatsapp_country_code" value="{{ old('whatsapp_country_code', '+974') }}">
                            <p class="text-success">+{{ $promoter->promoterDetails->country_code.$promoter->promoterDetails->whatsapp_number }}</p>
                            @error('whatsapp_number')
                            <span class="text-danger" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row mb-3">
                        <div class="col">
                            <button type="submit" class="btn btn-primary">Save changes</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <!--/ Change Password -->

    </div>
</div>
@endsection

@section('script')
<script src="{{ asset('dashboard/libs/intl/intlTelInput.min.js') }}"></script>
<script>
    const input = document.querySelector("#phone_number");
    // Initialize country code from database
    document.getElementById("country_code").value = "{{ $promoter->promoterDetails->country_code ?? '+974' }}";
    var iti = window.intlTelInput(input, {
        customPlaceholder: function(selectedCountryPlaceholder, selectedCountryData) {
            return "e.g. " + selectedCountryPlaceholder;
        }
        , initialCountry: "auto"
        , geoIpLookup: callback => {
            fetch("https://ipapi.co/json")
                .then(res => res.json())
                .then(data => callback(data.country_code))
                .catch(() => callback("us"));
        }
        , showSelectedDialCode: true
        , separateDialCode: true
        , countrySearch: false
        , autoInsertDialCode: true
        , autoPlaceholder: "polite"
        , nationalMode: false
        , fixDropdownWidth: false
        , useFullscreenPopup: false
        , initialCountry: "auto"
        , utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@19.5.5/build/js/utils.js"
    });
    input.addEventListener("countrychange", function() {
        const countryData = iti.getSelectedCountryData();
        document.getElementById("country_code").value = countryData.dialCode;
    });

</script>
<script>
    const input2 = document.querySelector("#whatsapp_number");
    // initial value
    document.getElementById("whatsapp_country_code").value = "+974";
    var iti2 = window.intlTelInput(input2, {
        customPlaceholder: function(selectedCountryPlaceholder, selectedCountryData) {
            return "e.g. " + selectedCountryPlaceholder;
        }
        , initialCountry: "auto"
        , geoIpLookup: callback => {
            fetch("https://ipapi.co/json")
                .then(res => res.json())
                .then(data => callback(data.country_code))
                .catch(() => callback("us"));
        }
        , showSelectedDialCode: true
        , separateDialCode: true
        , countrySearch: false
        , autoInsertDialCode: true
        , autoPlaceholder: "polite"
        , nationalMode: false
        , fixDropdownWidth: false
        , useFullscreenPopup: false
        , initialCountry: "auto"
        , utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@19.5.5/build/js/utils.js"
    });
    input2.addEventListener("countrychange", function() {
        const countryData = iti2.getSelectedCountryData();
        document.getElementById("whatsapp_country_code").value = countryData.dialCode;
    });

</script>
@endsection