@extends('frontend.layouts.master')
@section('style')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/19.5.5/css/intlTelInput.css"
          integrity="sha512-Hjsts+5q0OWXb6jem9SwlTyJKJpnAXrTtoKIzKeekwUFG6QesBqmr/5+NBXiimtCEUphi7Os72nrefhPbCYqtA=="
          crossorigin="anonymous" referrerpolicy="no-referrer"/>
    <style>
        .iti {
            width: 100% !important;
        }
    </style>
@endsection
@section('content')
    <section class="section border-0 m-0">
        <div class="container-xxl">
            <x-user-panel>
                <div class="card">
                    <div class="card-body py-3">
                        <div class="row align-items-center mb-4">
                            <div class="col">
                                <i class="fa-solid fa-user text-muted text-8"></i>
                                <span class="fw-bold text-5 mx-1 text-dark">{{ __("routes.Account Details") }}</span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <form action="{{route('profile.update')}}" method="POST" enctype="multipart/form-data">
                                    @csrf
                                    @method("PUT")
                                    <div class="form-group row">
                                        <div class="col">
                                            <label for="image">{{ __("routes.image") }}<small
                                                    class="text-info">*</small></label>
                                            <input class="form-control" type="file" name="image" id="image">
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <div class="col">
                                            <label for="first_name">{{ __("routes.First Name") }}<small
                                                    class="text-danger">*</small></label>
                                            <input class="form-control" type="first_name" name="first_name"
                                                   id="first_name" value="{{ $user->first_name }}" required/>
                                        </div>
                                        <div class="col">
                                            <label for="last_name">{{ __("routes.Last Name") }}<small
                                                    class="text-danger">*</small></label>
                                            <input class="form-control" type="last_name" name="last_name" id="last_name"
                                                   value="{{ $user->last_name }}" required/>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <div class="col">
                                            <label for="email">{{ __("routes.Email Address") }}<small
                                                    class="text-danger">*</small></label>
                                            <input class="form-control" type="email" name="email" id="email"
                                                   value="{{ $user->email }}" required/>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <div class="col">
                                            <label class="form-label" for="phone">{{ __("routes.phone") }} <small
                                                    class="text-info">*</small></label>
                                            <input type="hidden" name="country_code" id="country_code"
                                                   value="{{$user->country_code}}" readonly class="form-control w-100">
                                            <input type="tel" name="phone" id="phone" value="{{$user->phone}}"
                                                   class="form-control w-100">
                                        </div>
                                    </div>

                                    @if(!$user->isGuest())
                                        <div class="border border-1 p-3 mb-3">
                                            <h5 class="text-muted text-capitalize">{{ __("routes.leave blank to leave unchanged") }}</h5>
                                            <div class="form-group row">
                                                <div class="col">
                                                    <label for="old_password">{{ __("routes.Old password") }}<small
                                                            class="text-info">*</small></label>
                                                    <input class="form-control" type="password" value="" name="old_password"
                                                           id="old_password"/>
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <div class="col">
                                                    <label for="new_pasword">{{ __("routes.New password") }}<small
                                                            class="text-info">*</small></label>
                                                    <input class="form-control" type="password" value="" name="new_password"
                                                           id="new_password"/>
                                                </div>
                                                <div class="col">
                                                    <label for="password_confirmation">{{ __("routes.Confirm password") }}
                                                        <small class="text-info">*</small></label>
                                                    <input class="form-control" type="password" value=""
                                                           name="new_password_confirmation" id="new_password_confirmation"/>
                                                </div>
                                            </div>
                                        </div>
                                    @endif

                                    <div class="form-group row">
                                        <div class="col">
                                            <button onclick="loadingBtn(this)" type="submit"
                                                    class="btn btn-modern btn-primary btn-effect-3">{{ __("routes.Save Changes") }}</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </x-user-panel>
        </div>
    </section>
@endsection

@section('script')
    <script src="https://cdn.jsdelivr.net/npm/intl-tel-input@19.5.5/build/js/intlTelInput.min.js"></script>
    <script>
        const input = document.querySelector("#phone");
        // initial value
        document.getElementById("country_code").value = "+974";
        var iti = window.intlTelInput(input, {
            customPlaceholder: function (selectedCountryPlaceholder, selectedCountryData) {
                return "e.g. " + selectedCountryPlaceholder;
            }
            , preferredCountries: ['qa', 'ae']
            , showSelectedDialCode: true
            , separateDialCode: true
            , countrySearch: false
            , autoInsertDialCode: true
            , autoPlaceholder: "polite"
            , nationalMode: false
            , fixDropdownWidth: false
            , useFullscreenPopup: false
            , 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>
@endsection