{{-- wrapper --}}
<div>



    {{-- form --}}
    <form wire:submit='update' wire:loading.class='disabled' wire:target='instance.imageFile, update, translate'>
        <div class="row row pt-2 align-items-center mb-3">







            {{-- serial --}}
            <div class="col-3">
                <h6 class="text-center fw-bold badge--theme-light py-1 rounded-1 text-theme px-4 mb-0 d-inline-block"
                    data-bs-toggle="tooltip" data-bss-tooltip="" data-bs-placement="top"
                    title="{{__('Client Serial')}}">
                    {{ $client?->serial }}
                </h6>
            </div>






            {{-- title --}}
            <div class="col-6 text-center">
                <h4 class="mb-0 badge--theme text-white px-4 rounded-1 py-1 d-inline-block fs-5">
                    {{__('Client Information')}}
                </h4>
            </div>







            {{-- creator --}}
            <div class="col-3">
                <input class="form-control form--input readonly
                mb-0 text-center" type="text" readonly="" value="{{ $client?->creator?->{__('name')} }}"
                    data-bs-toggle="tooltip" data-bss-tooltip="" data-bs-placement="top" title="{{__('Created By')}}">
            </div>



        </div>
        {{-- end row --}}








        {{-- ----------------------------------------- --}}
        {{-- ----------------------------------------- --}}









        {{-- row --}}
        <div class="row row pt-2 align-items-center mb-4">




            {{-- 1: date --}}
            <div class="col-3">
                <label class="form-label form--label">{{__('Creation Date')}}</label>
                <input class="form-control form--input readonly mb-5" readonly=""
                    value="{{ date('d / m / Y', strtotime($client->created_at)) }}">
            </div>





            {{-- empty --}}
            <div class="col-5"></div>
            <div class="col-4"></div>








            {{-- name --}}
            <div class="col-3">
                <label class="form-label form--label">{{__('Full Name')}}</label>
                <input wire:model='instance.nameAr' class="form-control form--input mb-4" type="text" required
                    name='nameAr' value='{{ $instance?->nameAr }}'>
            </div>






            <div class="col-3">
                <label class="form-label form--label">{{__('Full Name in English')}}</label>
                <input wire:model='instance.name' class="form-control form--input mb-4" type="text">
            </div>








            {{-- ----------------------------- --}}
            {{-- ----------------------------- --}}









            {{-- nationality --}}
            <div class="col-3">
                <label class="form-label form--label">{{__('Nationality')}}</label>
                <div class="select--single-wrapper mb-4" wire:ignore>
                    <select class="form-select form--select2 init--select init--information-select"
                        value='{{ $instance->nationalityId }}' data-instance='instance.nationalityId'>
                        <option value=""></option>

                        @foreach ($nationalities ?? [] as $nationality)
                        <option value="{{$nationality->id}}">{{ $nationality?->{__('name')} }}</option>
                        @endforeach

                    </select>
                </div>
            </div>







            {{-- clientType --}}
            <div class="col-3">
                <label class="form-label form--label">{{__('Client Type')}}</label>
                <div class="select--single-wrapper mb-4" wire:ignore>
                    <select class="form-select form--select2 init--select init--information-select"
                        data-instance='instance.clientTypeId' value='{{ $instance->clientTypeId }}'>
                        <option value=""></option>

                        @foreach ($clientTypes ?? [] as $clientType)
                        <option value="{{$clientType->id}}">{{ $clientType?->{__('name')} }}</option>
                        @endforeach

                    </select>
                </div>
            </div>








            {{-- identity --}}
            <div class="col-3">
                <label class="form-label form--label">{{__('Identity / License')}}</label>
                <input wire:model='instance.identity' class="form-control form--input mb-4" type="text"
                    value='{{ $instance?->identity }}' required>
            </div>









            {{-- 4: note --}}
            <div class="col-3">
                <label class="form-label form--label">{{__('Note')}}</label>
                <input wire:loading.attr='disabled' wire:change="translate('noteAr', 'note', 'en')"
                    wire:model='instance.noteAr' class="form-control form--input mb-4" type="text"
                    value='{{ $instance?->noteAr }}'>
            </div>



            <div class="col-3">
                <label class="form-label form--label">{{__('Note in English')}}</label>
                <input wire:loading.attr='disabled' wire:change="translate('note', 'noteAr', 'ar')"
                    wire:model='instance.note' class="form-control form--input mb-4" type="text"
                    value='{{ $instance?->note }}'>
            </div>










            {{-- ----------------------------- --}}
            {{-- ----------------------------- --}}








            {{-- col --}}
            <div class="col-12 mt-4 mb-4">


                {{-- section --}}
                <div class="row row--section extra-padding mx-0">


                    {{-- sectionTitle --}}
                    <div class="col-12">
                        <h6 class='row--section-title'>{{ __('Email Addresses') }}</h6>
                    </div>





                    {{-- email --}}
                    <div class="col-3">
                        <div class="input--icon ">
                            <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor"
                                viewBox="0 0 16 16" class="bi bi-envelope">
                                <path fill-rule="evenodd"
                                    d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2Zm13 2.383-4.708 2.825L15 11.105V5.383Zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741ZM1 11.105l4.708-2.897L1 5.383v5.722Z">
                                </path>
                            </svg>
                            <input wire:model='instance.email' class="form-control form--input mb-4 input--bg"
                                type="email" required value='{{ $instance?->email }}'
                                placeholder="{{__('Email — Main')}}">
                        </div>
                    </div>







                    {{-- alternativeEmail --}}
                    <div class="col-3">
                        <div class="input--icon ">
                            <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor"
                                viewBox="0 0 16 16" class="bi bi-envelope">
                                <path fill-rule="evenodd"
                                    d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2Zm13 2.383-4.708 2.825L15 11.105V5.383Zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741ZM1 11.105l4.708-2.897L1 5.383v5.722Z">
                                </path>
                            </svg>
                            <input wire:model='instance.alternativeEmail'
                                class="form-control form--input mb-4 input--bg" type="email"
                                value='{{ $instance?->alternativeEmail }}'>
                        </div>
                    </div>







                    {{-- secondAlternativeEmail --}}
                    <div class="col-3">
                        <div class="input--icon ">
                            <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor"
                                viewBox="0 0 16 16" class="bi bi-envelope">
                                <path fill-rule="evenodd"
                                    d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2Zm13 2.383-4.708 2.825L15 11.105V5.383Zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741ZM1 11.105l4.708-2.897L1 5.383v5.722Z">
                                </path>
                            </svg>
                            <input wire:model='instance.secondAlternativeEmail'
                                class="form-control form--input mb-4 input--bg" type="email"
                                value='{{ $instance?->secondAlternativeEmail }}'>
                        </div>
                    </div>







                    {{-- thirdAlternativeEmail --}}
                    <div class="col-3">
                        <div class="input--icon ">
                            <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor"
                                viewBox="0 0 16 16" class="bi bi-envelope">
                                <path fill-rule="evenodd"
                                    d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2Zm13 2.383-4.708 2.825L15 11.105V5.383Zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741ZM1 11.105l4.708-2.897L1 5.383v5.722Z">
                                </path>
                            </svg>
                            <input wire:model='instance.thirdAlternativeEmail'
                                class="form-control form--input mb-4 input--bg" type="email"
                                value='{{$instance?->thirdAlternativeEmail}}'>
                        </div>
                    </div>







                    {{-- fourthAlternativeEmail --}}
                    <div class="col-3">
                        <div class="input--icon ">
                            <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor"
                                viewBox="0 0 16 16" class="bi bi-envelope">
                                <path fill-rule="evenodd"
                                    d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2Zm13 2.383-4.708 2.825L15 11.105V5.383Zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741ZM1 11.105l4.708-2.897L1 5.383v5.722Z">
                                </path>
                            </svg>
                            <input wire:model='instance.fourthAlternativeEmail'
                                class="form-control form--input mb-4 input--bg" type="email"
                                value='{{$instance?->fourthAlternativeEmail}}'>
                        </div>
                    </div>







                    {{-- fifthAlternativeEmail --}}
                    <div class="col-3">
                        <div class="input--icon ">
                            <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor"
                                viewBox="0 0 16 16" class="bi bi-envelope">
                                <path fill-rule="evenodd"
                                    d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2Zm13 2.383-4.708 2.825L15 11.105V5.383Zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741ZM1 11.105l4.708-2.897L1 5.383v5.722Z">
                                </path>
                            </svg>
                            <input wire:model='instance.fifthAlternativeEmail'
                                class="form-control form--input mb-4 input--bg" type="email"
                                value='{{$instance?->fifthAlternativeEmail}}'>
                        </div>
                    </div>




                </div>
            </div>
            {{-- endSection --}}








            {{-- -------------------------------- --}}
            {{-- -------------------------------- --}}









            {{-- col --}}
            <div class="col-12 mt-4 mb-4">


                {{-- section --}}
                <div class="row row--section extra-padding mx-0">


                    {{-- sectionTitle --}}
                    <div class="col-12">
                        <h6 class='row--section-title'>{{ __('Account Information') }}</h6>
                    </div>











                    {{-- email --}}
                    <div class="col-3">
                        <label class="form-label form--label">{{__('Email — Panel')}}</label>
                        <div class="input--icon ">
                            <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor"
                                viewBox="0 0 16 16" class="bi bi-envelope">
                                <path fill-rule="evenodd"
                                    d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2Zm13 2.383-4.708 2.825L15 11.105V5.383Zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741ZM1 11.105l4.708-2.897L1 5.383v5.722Z">
                                </path>
                            </svg>
                            <input wire:model='instance.accessEmail' class="form-control form--input mb-4 input--bg"
                                type="email" value='{{$instance->accessEmail}}' required>
                        </div>
                    </div>











                    {{-- ---------------------------------- --}}
                    {{-- ---------------------------------- --}}







                    {{-- 1: landlineNumber --}}
                    <div class="col-3">
                        <label class="form-label form--label">{{__('Landline Number')}}</label>
                        <div class="input--icon ">
                            <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor"
                                viewBox="0 0 16 16" class="bi bi-telephone">
                                <path
                                    d="M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.568 17.568 0 0 0 4.168 6.608 17.569 17.569 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.678.678 0 0 0-.58-.122l-2.19.547a1.745 1.745 0 0 1-1.657-.459L5.482 8.062a1.745 1.745 0 0 1-.46-1.657l.548-2.19a.678.678 0 0 0-.122-.58L3.654 1.328zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z">
                                </path>
                            </svg>

                            <input wire:model='instance.landline' class="form-control form--input mb-4 input--bg"
                                type="text" value='{{$instance?->landline}}' pattern="[0-9]+">
                        </div>
                    </div>









                    {{-- 2: phoneNumber --}}
                    <div class="col-3">
                        <label class="form-label form--label">{{__('Phone Number')}}</label>

                        <div class="input--icon ">
                            <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor"
                                viewBox="0 0 16 16" class="bi bi-telephone">
                                <path
                                    d="M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.568 17.568 0 0 0 4.168 6.608 17.569 17.569 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.678.678 0 0 0-.58-.122l-2.19.547a1.745 1.745 0 0 1-1.657-.459L5.482 8.062a1.745 1.745 0 0 1-.46-1.657l.548-2.19a.678.678 0 0 0-.122-.58L3.654 1.328zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z">
                                </path>
                            </svg>
                            <input wire:model='instance.phone' class="form-control form--input mb-4 input--bg"
                                type="text" required value='{{$instance?->phone}}' pattern="[0-9]+">
                        </div>
                    </div>










                    {{-- 3: faxNumber --}}
                    <div class="col-3">
                        <label class="form-label form--label">{{__('Fax Number')}}</label>
                        <div class="input--icon "><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
                                fill="currentColor" viewBox="0 0 16 16" class="bi bi-telephone">
                                <path
                                    d="M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.568 17.568 0 0 0 4.168 6.608 17.569 17.569 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.678.678 0 0 0-.58-.122l-2.19.547a1.745 1.745 0 0 1-1.657-.459L5.482 8.062a1.745 1.745 0 0 1-.46-1.657l.548-2.19a.678.678 0 0 0-.122-.58L3.654 1.328zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z">
                                </path>
                            </svg>
                            <input wire:model='instance.fax' class="form-control form--input mb-4 input--bg" type="text"
                                value='{{ $instance?->fax }}' pattern="[0-9]+">
                        </div>
                    </div>
















                    {{-- ----------------------------- --}}
                    {{-- ----------------------------- --}}









                    {{-- imageFile --}}
                    <div class="col-6">
                        <label class="form-label form--label">{{__('Logo Picture')}}</label>
                        <input wire:model='instance.imageFile' id='client--file-1'
                            class="form-control form--file-input mb-4" type="file" accept="image/*">
                    </div>






                    {{-- ----------------------------- --}}
                    {{-- ----------------------------- --}}







                    {{-- resetPassword --}}
                    <div class="col-3">
                        <label class="form-label form--label">{{__('Reset Password')}}</label>
                        <div class="input--icon "><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
                                fill="currentColor" viewBox="0 0 16 16" class="bi bi-lock">
                                <path
                                    d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z">
                                </path>
                            </svg>
                            <input wire:model='instance.password' class="form-control form--input mb-4 input--bg"
                                type="password">
                        </div>
                    </div>






                </div>
            </div>
            {{-- endSection --}}








            {{-- ---------------------------------- --}}
            {{-- ---------------------------------- --}}









            {{-- update / cancel --}}
            <div class="col-12 text-center mt-2 position-relative">

                {{-- loading spinner --}}
                <span wire:loading wire:target='imageFile, update, translate'
                    class="spinner-border spinner-border-sm text-success spinner--float-right" role="status"></span>


                <button wire:loading.attr='disabled' wire:target='instance.imageFile, update, translate'
                    class="btn btn--scheme btn--scheme-3 px-5 scalemix--3 py-1 d-inline-flex align-items-center mx-1 scale--self-05"
                    type="submit">{{__('Update')}}</button>
            </div>




        </div>
    </form>
    {{-- endForm --}}











    {{-- ----------------------------------------------------- --}}
    {{-- ----------------------------------------------------- --}}







    {{-- selectHandle --}}
    <script>
        $(".init--information-select").on("change", function (event) {


            // 1.1: getValue - instance
            selectValue = $(this).select2('val');
            instance = $(this).attr('data-instance');

            @this.set(instance, selectValue);

        }); //end function

    </script>








    {{-- ----------------------------------------------------- --}}
    {{-- ----------------------------------------------------- --}}









</div>
{{-- endForm --}}