@push('page_style')
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css">
@endpush  
   <!-- Start Add Staff Modal -->
    <div class="modal Custom_modal right fade" id="editStaffModal" tabindex="-1" aria-labelledby="StaffModel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="staff_heading">Edit({{@ucWords($staff->full_name)}})</h5>
                    <button type="button" class="btn_close" data-bs-dismiss="modal" aria-label="Close">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="modal-body">
                   
                     <form method="POST" class="updateStaffForm noValidation" id="AddnewForm" action="{{ route('staffs.update',encrypt($staff->id)) }}" autocomplete="off">
                       @csrf
                       @method('PUT')
                        <!-- start step indicators -->
                        <div class="form-header d-flex mb-4">
                            <span class="stepIndicator">Employee Details</span>
                            <span class="stepIndicator">PassWord</span>
                            <span class="stepIndicator">Assign Clients</span>
                        </div>
                        <!-- end step indicators -->
                        <hr />
                        <!-- step one -->
                        <div class="step">
                            <h3 class="form_title mb-4">Employee Details</h3>
                            <div class="form-group">
                               <label class="form_label">First Name</label>
                                <input type="text" id="first_name" placeholder="Enter first name" oninput="this.className = ''"
                                    name="first_name"  class="lettersonly {{ $errors->has('first_name') ? ' is-invalid' : '' }}" value="{{old('first_name',$staff->first_name)}}"/>
                                    
                                    @if ($errors->has('first_name'))
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('first_name') }}</strong>
                                        </span>
                                    @endif
                            </div>
                            
                            <div class="form-group">
                               <label class="form_label">Last Name</label>
                                <input type="text" id="last_name" placeholder="Enter last name" oninput="this.className = ''"
                                    name="last_name"  class="lettersonly {{ $errors->has('last_name') ? ' is-invalid' : '' }}" value="{{old('last_name',$staff->last_name)}}"/>
                                    
                                    @if ($errors->has('last_name'))
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('last_name') }}</strong>
                                        </span>
                                    @endif
                            </div>
                            
                            <div class="form-group">
                                <label class="form_label">Email</label>
                                <input type="email"  placeholder="Enter email"
                                    oninput="this.className = ''" name="email" class="{{ $errors->has('email') ? ' is-invalid' : '' }}" value="{{old('email',@$staff->email)}}"/>
                                     @if ($errors->has('email'))
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('email') }}</strong>
                                        </span>
                                    @endif
                            </div>
                            
                             <div class="form-group">
                                    <div class="mb-1">
                                        <label class="form-label" for="phone_number">Phone Number </label><br>
                                        <input type="hidden" name="phone_code" id="phone_code" value="{{ (old('phone_code')) ? (old('phone_code')) : (@$staff->phone_code) }}"/>
                                        <input type="hidden" name="iso_code" id="iso_code" value="{{ (old('iso_code')) ? (old('iso_code')) : (@$staff->iso_code) }}"/>

                                        <input id="phone_number" type="text" class="number_only form-control {{ $errors->has('phone_number') || $errors->has('phone_code') || $errors->has('iso_code') ? ' is-invalid' : '' }}" name="phone_number" value="{{ (old('phone_number')) ? (old('phone_number')) : (@$staff->phone_number) }}" placeholder="Enter Phone Number">
                                        @if ($errors->has('phone_number'))
                                            <span class="invalid-feedback d-block" role="alert">
                                                <strong>{{ $errors->first('phone_number') }}</strong>
                                            </span>
                                        @elseif($errors->has('phone_code'))
                                            <span class="invalid-feedback d-block" role="alert">
                                                <strong>{{ $errors->first('phone_code') }}</strong>
                                            </span>
                                        @elseif($errors->has('iso_code'))
                                            <span class="invalid-feedback d-block" role="alert">
                                                <strong>{{ $errors->first('iso_code') }}</strong>
                                            </span>
                                        @endif
                                    </div>
                                
                            </div>
                            
                            <div class="form-group">
                                <label class="form_label">Employee Id</label>
                                <input type="text" placeholder="Enter Employee ID" oninput="this.className = ''"
                                    name="employee_id" class="number_only {{ $errors->has('employee_id') ? ' is-invalid' : '' }}" value="{{old('employee_id',@$staff->employee_id)}}"/>
                                      @if ($errors->has('employee_id'))
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('employee_id') }}</strong>
                                        </span>
                                    @endif
                            </div>
                            <div class="form-group">
                                <label class="form_label">Member Since </label>
                                <input type="date" id="start"   value="{{old('member_since',@$staff->member_since)}}" name="member_since" class="date_picker  {{ $errors->has('member_since') ? ' is-invalid' : '' }}"/>
                                 @if ($errors->has('member_since'))
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('member_since') }}</strong>
                                        </span>
                                    @endif
                            </div>
                            <div class="mb-3 form-grop">
                             <label class="form-label" for="target" style="color: rgba(116, 131, 131, 0.7)">Site Id </label>
                                        <select class="form-control {{ $errors->has('target') ? ' is-invalid' : '' }}" id="target" name="site_id">
                                        <option value="" >Select the Site Id</option>
                                           @foreach(getsiteid() as $key=>$siteid)
                                           <option value="{{$key}}" {{old('site_id',$staff->site_id) == $key?"selected":""}}>Site-Id/{{$siteid}}</option>

                                           @endforeach
                                        </select>
                                        @if ($errors->has('site_id'))
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $errors->first('site_id') }}</strong>
                                            </span>
                                        @endif
                        </div>
                        </div>
                      

                        <!-- step two -->
                        <div class="step">
                            <h3 class="form_title mb-4">Password</h3>
                            <div class="form-group">
                                <label class="form_label">Password </label>
                                <input type="text" placeholder="Password" id="idPasswordchange"
                                    oninput="this.className = ''" readonly name="password" value="{{old('password',@$staff->old_password)}}" class="noValidation {{ $errors->has('password') ? ' is-invalid' : '' }}"/>
                                <!-- <span class="toggle_password_">
                                    <span class="show-icon togglePasswordchange"></span>
                                </span> -->
                              <!--   <p>Use minimum 6 characters, and at least one letter and number
                                </p> -->
                                 @if ($errors->has('password'))
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('password') }}</strong>
                                        </span>
                                    @endif
                            </div>
                            
                        </div>

                        <!-- step three -->
                        <div class="step">
                            <h3 class="form_title mb-4">Assign Clients</h3>
                            <div class="searchbox">
                                <input type="text" placeholder="Search.." name="search" id="searchbox"  class='input'/>
                                <button class="searchbtn" type="button"><img src="{{asset('img/search.png')}}"></button>
                            </div>
                            <div class="Editasignclient">
                                 <div class="no_result_found" style="display: none;">
                                <label class="checkbox_">
                                    <div class="priorityLeft" >
                                        <article class="rightshipcontent">
                                            <h3>No result found</h3>
                                        </article>
                                    </div>
                                </label>
                            </div>
                             @foreach($existClients as $client)
                                <div class="Mainprority remove_client box" client_id="{{$client->id}}" employee_id="{{$staff->id}}">
                                    <div class="asignclientleft">
                                        <img class="clinetselect" src="{{asset('img/selectclient.png')}}">
                                        <article class="rightshipcontent">
                                            <h3>{{@$client->first_name}} {{@$client->last_name}} {{!empty($client->code)?'('.$client->code.')':''}}</h3>
                                        </article>
                                    </div>
                                    <span class="closeclient"><i class="fas fa-times"></i></span>
                                </div>
                             @endforeach
                              
                            </div> 
                            <div class="clientHead">
                                <h4>Select Client</h4>
                                <h5><span id="selected_radio_count"></span> Selected</h5>
                            </div>
                            <div class="selectClients">
                            
                            @foreach($clients as $client)
                                 <div class="Mainprority box">
                                    <label class="checkbox_">
                                        <div class="priorityLeft">
                                            <img class="clinetselect" src="{{asset('img/selectclient.png')}}">
                                            <article class="rightshipcontent">
                                                <h3>{{@$client->first_name}} {{@$client->last_name}} {{!empty($client->code)?'('.$client->code.')':''}}</h3>
                                            </article>
                                        </div>
                                        <input type="checkbox" class="check_main d-none" id="priority_{{$client->id}}" name="clients[]"
                                            value="{{$client->id}}" />
                                        <span class="checkmarks"></span>
                                    </label>
                                </div>
                            @endforeach
                            
                             
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer d-flex">
                 <a href="{{route('staffs.index')}}" class="backbtn" id="discard_btn">
                    <i class="fas fa-chevron-left"></i> Discard
                </a>
                    <!-- start previous / next buttons -->
                    <button type="button" id="prevBtn" class="backbtn" onclick="nextPrev(-1)">
                        <i class="fas fa-chevron-left"></i> Back
                    </button>
                    <button type="button" id="nextBtn" class="nextbtn" onclick="nextPrev(1)">
                        Next <i class="fas fa-chevron-right"></i>
                    </button>
                    <!-- end previous / next buttons -->
                </div>
            </div>
        </div>
    </div>
     <script type="text/javascript"  src="{{ asset('js/custom-methods.js') }}"></script>
     <script type="text/javascript"  src="{{ asset('js/scripts.js') }}"></script>
      <script type="text/javascript"  src="{{ asset('js/pages/staffs/form-validation.js') }}"></script>
      <script type="text/javascript">
       $(document).ready(function(){
            $("#editStaffModal").modal({
            show:false,
            backdrop:'static'
            });
        });
       </script>
       
        
       
          @include('include.searchScripts')   
         <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>

    <script>

        var isoCode = ($("#iso_code").val()) ? ($("#iso_code").val()) : ('US');
        var isoCode2 = ($("#iso_code_2").val()) ? ($("#iso_code_2").val()) : ('US');
        //  phone 1 input
        var phoneInput = document.querySelector("#phone_number");
        var phoneInstance = window.intlTelInput(phoneInput, {
            autoPlaceholder: "off",
            separateDialCode: true,
            initialCountry: isoCode
            // utilsScript: '{{URL::asset("frontend/build/js/utils.js")}}',
        });


        $("#phone_code").val(phoneInstance.getSelectedCountryData().dialCode);
        $("#iso_code").val(phoneInstance.getSelectedCountryData().iso2);
        phoneInput.addEventListener("countrychange",function() {
            $("#phone_code").val(phoneInstance.getSelectedCountryData().dialCode);
            $("#iso_code").val(phoneInstance.getSelectedCountryData().iso2);
        });
        
    </script>
      

    <!-- End Staff modal -->