@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="addroleModal" 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">Add New Sub Admin</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="addroleForm" id="AddnewForm" action="{{ route('roles.store') }}"
                    autocomplete="off">
                    @csrf
                    <!-- start step indicators -->
                    <div class="form-header d-flex mb-4">
                        <span class="stepIndicator">Sub Admin Details</span>
                        <span class="stepIndicator">Set PassWord</span>
                        <span class="stepIndicator">Assign Site Ids</span>
                    </div>
                    <!-- end step indicators -->
                    <hr />
                    <!-- step one -->
                    <div class="step">
                        <h3 class="form_title mb-4">Sub Admin 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')}}" />

                            @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')}}" />

                            @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')}}" />
                            @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')) : (@$admin->phone_code) }}" />
                                <input type="hidden" name="iso_code" id="iso_code"
                                    value="{{ (old('iso_code')) ? (old('iso_code')) : (@$admin->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')) : (@$admin->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>


                    <!-- step two -->
                    <div class="step stepPassword">
                        <h3 class="form_title mb-4">Set Password</h3>
                        <div class="form-group">
                            <label class="form_label">Password </label>
                            <input type="password" placeholder="Enter Password" id="idPasswordchange"
                                oninput="this.className = ''" name="password" value="{{old('password')}}"
                                class="{{ $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> -->

                        </div>
                        @if ($errors->has('password'))
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $errors->first('password') }}</strong>
                        </span>
                        @endif
                        <div class="form-group mt-5">
                            <label class="form_label">Confirm Password </label>
                            <input type="password" id="idPasswordchange1" placeholder="Enter Confirm Password"
                                id="togglePasswordconfirm" oninput="this.className = ''"
                                value="{{old('confirm_password')}}" name="confirm_password"
                                class="{{ $errors->has('confirm_password') ? ' is-invalid' : '' }}" />
                            <span class="toggle_password_">
                                <span class="show-icon togglePasswordchange1"></span>
                            </span>
                            <!--  <p>Use minimum 6 characters, and at least one letter and number
                                </p> -->

                        </div>
                    </div>

                    <!-- step three -->
                    <div class="step">
                        <h3 class="form_title mb-4">Assign Site Ids</h3>
                        <div class="searchbox">
                            <input type="text" placeholder="Search.." name="search" id="searchbox" class='input' />
                            <button class="searchbtn" type="submit"><img src="{{asset('img/search.png')}}"></button>
                        </div>
                        <!--  <div class="Editasignclient">
                                <div class="Mainprority">
                                    <div class="asignclientleft">
                                        <img class="clinetselect" src="{{asset('img/selectclient.png')}}">
                                        <article class="rightshipcontent">
                                            <h3>SwipeWire</h3>
                                        </article>
                                    </div>
                                    <span class="closeclient"><i class="fas fa-times"></i></span>
                                </div>

                                <div class="Mainprority">
                                    <div class="asignclientleft">
                                        <img class="clinetselect" src="{{asset('img/selectclient.png')}}">
                                        <article class="rightshipcontent">
                                            <h3>SecureSmarter</h3>
                                        </article>
                                    </div>
                                    <span class="closeclient"><i class="fas fa-times"></i></span>
                                </div>
                            </div> -->
                        <div class="clientHead">
                            <h4>Select Site Id</h4>
                            <h5><span id="selected_radio_count"></span> Selected</h5>
                        </div>
                        <div class="selectClients">
                            <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(getsiteid() as $key=>$client)
                            <div class="Mainprority box">
                                <label class="checkbox_">
                                    <div class="priorityLeft">
                                        <img class="clinetselect" src="{{asset('img/selectclient.png')}}">
                                        <article class="rightshipcontent">
                                            <h3>site-{{$client}} {{!empty($client)?'(site-'.$client.')':''}}</h3>
                                        </article>
                                    </div>
                                    <input type="checkbox" class="check_main d-none" id="priority_{{$client}}"
                                        name="sites[]" value="{{$client}}" />
                                    <span class="checkmarks"></span>
                                </label>
                            </div>
                            @endforeach


                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer d-flex">
                <!-- start previous / next buttons -->
                <a href="{{route('roles.index')}}" class="backbtn" id="discard_btn">
                    <i class="fas fa-chevron-left"></i> Discard
                </a>
                <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>
<!-- End Staff modal -->

@section('custom_script')

<script type="text/javascript">
$(document).ready(function() {
    $("#addroleModal").modal({
        show: false,
        backdrop: 'static'
    });
});
</script>
@if (count($errors) > 0 && session('open_modal') == '#addroleModal')
<script type="text/javascript">
$(document).ready(function() {
    $("#addroleModal").modal('show');
});
</script>

@endif

@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>



@endsection