@extends('layouts.admin')

@section('title')Clients @endsection

@section('content')
@php $auth= Auth::user(); @endphp
<div class="table_harder">
    <div class="table_head">
        <h5>List of Clients</h5>
        <p>Total Number of Clients {{$totalRecords}}</p>
    </div>
    <div class="table_details">
        @if($auth->role==ROLE_ADMIN)

            <button type="button" class="add_staff" data-bs-toggle="modal" data-bs-target="#addClientImportModal">
                Upload Client Bulk
            </button>
        <button type="button" class="add_staff" data-bs-toggle="modal" data-bs-target="#addClientModal"
            data-backdrop="static" data-keyboard="false">
            <a href="javascript:viod(0)" data-bs-toggle="modal" data-bs-target="#addClientModal" data-backdrop="static"
                data-keyboard="false"><i class="fa fa-plus"></i>Add Client</a>
        </button>
        @endif
    </div>
</div>
 <!-- Modal -->
 <div class="modal fade Custom_modal" id="addClientImportModal" tabindex="-1" aria-labelledby="exampleModalLabel"
  aria-hidden="true">
    <div class="modal-dialog  modal-dialog-scrollable modal-dialog-centered">
     <div class="modal-content">
         <div class="modal-header">
             <h1 class="modal-title fs-5" id="exampleModalLabel">Upload Client Bulk</h1>
             <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 action="{{route('import-client')}}" id="addClientImport" method="POST" enctype="multipart/form-data">
                 @csrf
                 <div class="form-group">
                     <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}}">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 class="mb-3 form-grop">
                    <label class="form-label" for="target" style="color: rgba(116, 131, 131, 0.7)">Target
                    </label>
                    <select class="form-control {{ $errors->has('target') ? ' is-invalid' : '' }}" id="target"
                        name="target">
                        @foreach(getTarget() as $key=>$target)
                        <option value="{{$key}}" {{old('target') == $key?"selected":""}}>{{$target}}</option>
                        @endforeach
                    </select>
                    @if ($errors->has('target'))
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $errors->first('target') }}</strong>
                    </span>
                    @endif
                </div>
                <div class="form-group">
                    <label class="form_label">Code</label>
                    <input type="text" placeholder="Enter Code" oninput="this.className = ''" name="code"
                        class=" {{ $errors->has('code') ? ' is-invalid' : '' }}" value="{{old('code')}}" />
                    @if ($errors->has('code'))
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $errors->first('code') }}</strong>
                    </span>
                    @endif
                </div>
                 <!-- <div class="mb-3 form-grop">
             <div class="uploadFile">
                      <label class="label">
                      <input type="file" name="file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" class="custom-file-input" id="customFile">

                         <span>Upload File</span>
                     </label>
                     <p class="bottomText">Excel,CSV File accepted</p>

             </div>
             </div> -->
                 <div class="custom-file text-left ">
                     <label class="form-label" for="target" style="color: rgba(116, 131, 131, 0.7)">Upload
                         File </label>
                     <input type="file" name="file" class="custom-file-input" id="customFile">


                 </div>


             </form>
         </div>

         <div class="modal-footer">
             <button type="button" onclick="refresh()" class="nextbtn p-2 cancelBtn" data-bs-dismiss="modal">Cancel</button>
             <button type="submit" id="addImportClientSubmit" class="nextbtn p-2">Upload</button>
         </div>
         <div id="loader-wrapper">
         <div id="loader"></div>

         <div class="loader-section section-left"></div>
         <div class="loader-section section-right"></div>

     </div>
     </div>

 </div>
</div>





<div class="row">
    <div class="col-12">
        <div class="card data-table Tablecommon staffTable">
            <!-- /.card-header -->
            <div class="card-body">
              <div class="">
                <table id="clientsTable" class="table table-hover commonContent">
                    <thead>
                        <tr>
                            <th>Site Id</th>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Address</th>
                            <th>DOB</th>
                            <th>Apt</th>
                            <th>City</th>
                            <th>State</th>
                            <th>Zip</th>
                            <th>Target</th>
                            <th>Code</th>
                            <th>Client ID</th>
                            <th>MID</th>
                            <th>Weekly Service Hours</th>
                            <th>Added Date</th>
                            <th data-orderable="false">Status</th>


                            <th data-orderable="false">Action</th>

                        </tr>
                    </thead>

                </table>
                </div>
            </div>
            <!-- /.card-body -->
        </div>
        <!-- /.card -->
    </div>
</div>


@include('admin.client.add-client')

@if (session('data'))
@include('admin.client.add-error')
@endif

<div id="parent_item_details_modal"> </div>

@push('page_script')

@include('include.dataTableScripts')

<script src="{{ asset('js/pages/clients/index.js') }}"></script>
<script src="{{ asset('js/pages/clients/form-validation.js') }}"></script>
<script src="{{ asset('js/calender-filter.js') }}"></script>

<script type="text/javascript">
    $(document).ready(function() {
$("#addClientImport").validate({

    errorElement: 'span',
    rules: {
        site_id: {
            required: true,
        },
        file: {
            required: true,
            accept: "csv,xls,xlsx" // File extensions without dots
        },
        target: {
            required: true,
             // File extensions without dots
        },
        code: {
            required: true,

        }
    },
    messages: {
        file: {
            required: "The file is required",
            accept: "Please select a valid CSV or Excel file (XLS, XLSX)"
        },
        site_id: {
            required: "The Site Id is required"
        }
    },
    submitHandler: function(form) {
$("#loader-wrapper").show();
 console.log("hrhrh");
// $(".modal-content").hide();
// some other code
// maybe disabling submit button
// then:
form.submit();
}

});
});
</script>

@if (session('test_modal') == '#addErrior')
<script type="text/javascript">
$(document).ready(function() {
    $("#addErrior").modal('show');
});

</script>

@endif
<script>

function refresh(){

window.location.reload();

}
</script>
<script>

    function cancel(){
    session()->forget('test_modal');

    }
    </script>
@endpush


@endsection