{{-- client - createModal --}}
<div class="modal fade modal--shadow" id="new-client" role="dialog" tabindex="-1" wire:ignore.self>
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-body px-4">






                {{-- form --}}
                <form wire:submit='store' wire:loading.class='disabled'
                    wire:target='instance.imageFile, store, translate'>





                    {{-- Header --}}
                    <div class="row pt-2 align-items-center mb-3 rtl--direction">



                        {{-- serial --}}
                        <div class="col-3">
                            <input name="serial" type="hidden" value='{{ $nextSerial }}' wire:model='instance.serial'>

                            <h6
                                class="text-center fw-bold badge--theme-light py-1 rounded-1 text-theme px-4 mb-0 d-inline-block">
                                {{ $nextSerial }}
                            </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">
                                {{ __('New Client') }}
                            </h4>
                        </div>



                        {{-- closeButton --}}
                        <div class="col-3 text-end">
                            <button class="btn btn--raw-icon w-auto btn--close" data-bs-toggle="tooltip"
                                data-bss-tooltip="" data-bs-placement="{{__('right')}}" data-bs-dismiss="modal"
                                type="button" title="{{__('Close Modal')}}">
                                <svg class="bi bi-dash-lg fs-2" xmlns="http://www.w3.org/2000/svg" width="1em"
                                    height="1em" fill="currentColor" viewBox="0 0 16 16">
                                    <path fill-rule="evenodd"
                                        d="M2 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11A.5.5 0 0 1 2 8Z">
                                    </path>
                                </svg>
                            </button>
                        </div>
                    </div>
                    {{-- endHeader --}}






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










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


                        {{-- creator fixed --}}
                        <div class="col-4">
                            <label class="form-label form--label">{{__('Created By')}}</label>
                            <input class="form-control form--input readonly mb-5" type="text" value="{{ __(':text', ['text' => session('userName'),
                                'textAr' => session('userNameAr')])  }}" readonly="" />
                        </div>




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





                        {{-- creationDate --}}
                        <div class="col-4">
                            <label class="form-label form--label">{{__('Creation Date')}}</label>
                            <div class="input--icon ">
                                <svg class="bi bi-calendar4-week" xmlns="http://www.w3.org/2000/svg" width="1em"
                                    height="1em" fill="currentColor" viewBox="0 0 16 16">
                                    <path
                                        d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM2 2a1 1 0 0 0-1 1v1h14V3a1 1 0 0 0-1-1H2zm13 3H1v9a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V5z">
                                    </path>
                                    <path
                                        d="M11 7.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm-3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm-2 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm-3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z">
                                    </path>
                                </svg>
                                <input class="form-control form--input mb-5 input--bg readonly" type="text"
                                    value="{{ date('d / m / Y') }}" readonly="" />
                            </div>
                        </div>





                        {{-- fullName --}}
                        <div class="col-6">
                            <label class="form-label form--label">{{__('Full Name')}}</label>
                            <input class="form-control form--input mb-4" name='nameAr' type="text"
                                wire:loading.attr='disabled' required wire:model='instance.nameAr' />
                        </div>



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





                        {{-- nationality --}}
                        <div class="col-4">
                            <label class="form-label form--label">{{__('Nationality')}}</label>


                            <div class="select--single-wrapper mb-4" wire:ignore>
                                <select class="form-select form--select2 init--modal-select"
                                    data-instance='instance.nationalityId' data-modal='#new-client' required>
                                    <option value=""></option>

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

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







                        {{-- clientType --}}
                        <div class="col-4">
                            <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--modal-select"
                                    data-instance='instance.clientTypeId' data-modal='#new-client' required>
                                    <option value=""></option>

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

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





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
















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










                        {{-- col --}}
                        <div class="col-12 mt-3 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-4">
                                    <div class="input--icon ">
                                        <svg class="bi bi-envelope" xmlns="http://www.w3.org/2000/svg" width="1em"
                                            height="1em" fill="currentColor" viewBox="0 0 16 16">
                                            <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 class="form-control form--input mb-4 input--bg" name='email' type="email"
                                            required wire:model='instance.email'
                                            placeholder="{{ __('Email — Main') }}" />
                                    </div>
                                </div>





                                {{-- alternativeEmail --}}
                                <div class="col-4">
                                    <div class="input--icon ">
                                        <svg class="bi bi-envelope" xmlns="http://www.w3.org/2000/svg" width="1em"
                                            height="1em" fill="currentColor" viewBox="0 0 16 16">
                                            <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 class="form-control form--input mb-4 input--bg" name='alternativeEmail'
                                            type="email" wire:model='instance.alternativeEmail' />
                                    </div>
                                </div>






                                {{-- secondAlternativeEmail --}}
                                <div class="col-4">
                                    <div class="input--icon ">
                                        <svg class="bi bi-envelope" xmlns="http://www.w3.org/2000/svg" width="1em"
                                            height="1em" fill="currentColor" viewBox="0 0 16 16">
                                            <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 class="form-control form--input mb-4 input--bg"
                                            name='secondAlternativeEmail' type="email"
                                            wire:model='instance.secondAlternativeEmail' />
                                    </div>
                                </div>







                                {{-- thirdAlternativeEmail --}}
                                <div class="col-4">
                                    <div class="input--icon ">
                                        <svg class="bi bi-envelope" xmlns="http://www.w3.org/2000/svg" width="1em"
                                            height="1em" fill="currentColor" viewBox="0 0 16 16">
                                            <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 class="form-control form--input mb-4 input--bg"
                                            name='thirdAlternativeEmail' type="email"
                                            wire:model='instance.thirdAlternativeEmail' />
                                    </div>
                                </div>







                                {{-- fourthAlternativeEmail --}}
                                <div class="col-4">
                                    <div class="input--icon ">
                                        <svg class="bi bi-envelope" xmlns="http://www.w3.org/2000/svg" width="1em"
                                            height="1em" fill="currentColor" viewBox="0 0 16 16">
                                            <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 class="form-control form--input mb-4 input--bg"
                                            name='fourthAlternativeEmail' type="email"
                                            wire:model='instance.fourthAlternativeEmail' />
                                    </div>
                                </div>





                                {{-- fifthAlternativeEmail --}}
                                <div class="col-4">
                                    <div class="input--icon ">
                                        <svg class="bi bi-envelope" xmlns="http://www.w3.org/2000/svg" width="1em"
                                            height="1em" fill="currentColor" viewBox="0 0 16 16">
                                            <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 class="form-control form--input mb-4 input--bg"
                                            name='fifthAlternativeEmail' type="email"
                                            wire:model='instance.fifthAlternativeEmail' />
                                    </div>
                                </div>




                            </div>

                        </div>
                        {{-- endGroupCol --}}













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







                        {{-- col --}}
                        <div class="col-12 mt-3 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>




                                {{-- landline Number --}}
                                <div class="col-4">
                                    <label class="form-label form--label">{{__('Landline Number')}}</label>
                                    <div class="input--icon ">
                                        <svg class="bi bi-telephone" xmlns="http://www.w3.org/2000/svg" width="1em"
                                            height="1em" fill="currentColor" viewBox="0 0 16 16">
                                            <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 class="form-control form--input mb-4 input--bg" name='landline'
                                            type="text" wire:model='instance.landline' pattern="[0-9]+" />
                                    </div>
                                </div>





                                {{-- phone --}}
                                <div class="col-4">
                                    <label class="form-label form--label">{{__('Phone Number')}}</label>
                                    <div class="input--icon ">
                                        <svg class="bi bi-telephone" xmlns="http://www.w3.org/2000/svg" width="1em"
                                            height="1em" fill="currentColor" viewBox="0 0 16 16">
                                            <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 class="form-control form--input mb-4 input--bg" name='phone' type="text"
                                            required wire:model='instance.phone' pattern="[0-9]+" />
                                    </div>
                                </div>





                                {{-- faxNumber --}}
                                <div class="col-4">
                                    <label class="form-label form--label">{{__('Fax Number')}}</label>
                                    <div class="input--icon ">
                                        <svg class="bi bi-telephone" xmlns="http://www.w3.org/2000/svg" width="1em"
                                            height="1em" fill="currentColor" viewBox="0 0 16 16">
                                            <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 class="form-control form--input mb-4 input--bg" name='fax' type="text"
                                            wire:model='instance.fax' pattern="[0-9]+" />
                                    </div>
                                </div>





                                {{-- accessEmail --}}
                                <div class="col-4">
                                    <label class="form-label form--label">{{__('Email — Panel')}}</label>
                                    <div class="input--icon ">
                                        <svg class="bi bi-envelope" xmlns="http://www.w3.org/2000/svg" width="1em"
                                            height="1em" fill="currentColor" viewBox="0 0 16 16">
                                            <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 class="form-control form--input mb-4 input--bg" name='accessEmail'
                                            type="email" required wire:model='instance.accessEmail' />
                                    </div>
                                </div>







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







                                {{-- password --}}
                                <div class="col-4">
                                    <label class="form-label form--label">{{__('Password')}}</label>
                                    <div class="input--icon ">
                                        <svg class="bi bi-lock" xmlns="http://www.w3.org/2000/svg" width="1em"
                                            height="1em" fill="currentColor" viewBox="0 0 16 16">
                                            <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 class="form-control form--input mb-4 input--bg" name='password'
                                            type="password" required wire:model='instance.password' />
                                    </div>
                                </div>








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












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

                        </div>









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







                        {{-- note - noteAr --}}
                        <div class="col-6">
                            <label class="form-label form--label">{{__('Note')}}</label>
                            <input class="form-control form--input mb-4" name='noteAr' type="text"
                                wire:change="translate('noteAr', 'note', 'en')" wire:model='instance.noteAr' />
                        </div>


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









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







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

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

                            <button
                                class="btn btn--scheme btn--scheme-outline-2 px-4 scalemix--3 py-1 d-inline-flex align-items-center mx-1"
                                data-bs-dismiss="modal" type="button">{{__('Cancel')}}</button>

                            <button
                                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" wire:loading.attr='disabled'
                                wire:target='store, translate, instance.imageFile'>{{__('Save')}}</button>
                        </div>
                        {{-- end div --}}




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




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















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








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


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

            @this.set(instance, selectValue);

        }); //end function
    </script>









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













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