@extends('layouts.dashboard-template')
 @section('page-content')
 <div class="main-content">

     <div class="page-content">
         <div class="container-fluid">

             <!-- start page title -->
             <div class="row">
                 <div class="col-12">
                     <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                         <h4 class="mb-sm-0">Staff</h4>

                         <div class="page-title-right">
                             <ol class="breadcrumb m-0">
                                 <li class="breadcrumb-item"><a href="javascript: void(0);">user</a></li>
                                 <li class="breadcrumb-item active">Staff</li>
                             </ol>
                         </div>

                     </div>
                 </div>
             </div>
             <!-- end page title -->



             <div class="row">
                 <div class="col-lg-12">
                     <div class="card" id="orderList">
                         <div class="card-header  border-0">
                             @if(Session::has('success'))
                             <div class="alert alert-success">{{Session::get('success')}}</div>
                             {{ Session::flash('alert-success', 'success') }}
                             @endif
                             @if(Session::has('fail'))
                             <div class="alert alert-danger">{{Session::get('fail')}}</div>
                             @endif

                             @if ($errors->any())
                             <div class="alert alert-danger">
                                 <ul>
                                     @foreach ($errors->all() as $error)
                                     <li>{{ $error }}</li>
                                     @endforeach
                                 </ul>
                             </div>
                             @endif
                             <div class="d-flex align-items-center">
                                 <h5 class="card-title mb-0 flex-grow-1">Staff</h5>
                                 <div class="flex-shrink-0">
                                     <button type="button" class="btn btn-success add-btn" data-bs-toggle="modal" id="create-btn" data-bs-target="#showModal"><i class="ri-add-line align-bottom me-1"></i> Add
                                         Staff</button>
                                     <button class="btn btn-soft-danger" title="Delete selected rows" data-bs-toggle="modal" href="#deletecategoryAll"><i class="ri-delete-bin-2-line"></i></button>
                                 </div>
                             </div>
                         </div>



                         <div class="card-body pt-0">
                             <div class="py-4 card-body border border-dashed border-end-0 border-start-0">

                                 <div class="table-responsive table-card mb-1">
                                     <table class="table  yajra-datatable table-nowrap align-middle" id="orderTable">
                                         <thead class="text-muted table-light">
                                             <tr class="text-uppercase">
                                                 <th scope="col" style="width: 25px;">
                                                     <div class="form-check">
                                                         <input class="form-check-input" name="datatablecheckbox" type="checkbox" id="checkAll" value="option">
                                                     </div>
                                                 </th>
                                                 <th class="sort" data-sort="serialnumber">SL.NO</th>
                                                 <th class="sort" data-sort="name">staff</th>
                                                 <th class="sort" data-sort="icon">Email</th>
                                                 <th class="sort" data-sort="image">Contact Number</th>
                                                 <th>Status</th>
                                                 <th>Action</th>
                                             </tr>
                                         </thead>
                                         <tbody class="list form-check-all">
                                         </tbody>
                                     </table>
                                     <div class="noresult" style="display: none">
                                         <div class="text-center">
                                             <lord-icon src="https://cdn.lordicon.com/msoeawqm.json" trigger="loop" colors="primary:#405189,secondary:#0ab39c" style="width:75px;height:75px">
                                             </lord-icon>
                                             <h5 class="mt-2">Sorry! No Result Found</h5>
                                             <p class="text-muted">We've searched more than 150+ Orders We did
                                                 not find any
                                                 orders for you search.</p>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                             <div class="modal fade" id="showModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                 <div class="modal-dialog modal-dialog-centered modal-lg">
                                     <div class="modal-content">
                                         <div class="modal-header bg-light p-3">
                                             <h5 class="modal-title" id="addstaffLabel">Add staff</h5>
                                             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                         </div>
                                         <div class="modal-body">
                                             <div class="tab-content">
                                                 <div class="tab-pane active" id="personalDetails" role="tabpanel">
                                                     <form method="post" action="{{ route('admin.add-staff') }}" enctype="multipart/form-data">
                                                         {{ csrf_field() }}
                                                         <div class="row">
                                                             <div class="col-lg-6">
                                                                 <div class="mb-3">
                                                                     <label for="firstnameInput" class="form-label">Full Name</label>
                                                                     <input type="text" name="full_name" class="form-control" required id="firstnameInput" placeholder="Enter your name">
                                                                 </div>
                                                             </div>
                                                             <!--end col-->

                                                             <div class="col-lg-6">
                                                                 <div class="mb-3">
                                                                     <label for="contactnumberInput" class="form-label">Contact Number</label>
                                                                     <input type="tel" maxlength="12" required name="contact_number" class="form-control phone" id="contactnumberInput" placeholder="Enter your number">
                                                                 </div>
                                                             </div>
                                                             <!--end col-->
                                                             <div class="col-lg-6">
                                                                 <div class="mb-3">
                                                                     <label for="phonenumberInput" class="form-label">Phone(whatsapp) Number</label>
                                                                     <input type="tel" maxlength="12" required name="whatsapp_number" class="form-control phone" id="phonenumberInput" placeholder="Enter your number">
                                                                 </div>
                                                             </div>
                                                             <div class="col-lg-6">
                                                                 <div class="mb-3">
                                                                     <label for="phonenumberInput" class="form-label">Alternate mobile number</label>
                                                                     <input type="tel" maxlength="12" required name="alernative_mobile_numebr" class="form-control phone" id="phonenumberInput" placeholder="Enter your number">
                                                                 </div>
                                                             </div>
                                                             <!--end col-->
                                                             <div class="col-lg-6">
                                                                 <div class="mb-3">
                                                                     <label for="emailidInput" class="form-label">Email</label>
                                                                     <input type="email" name="email" required class="form-control" id="emailidInput" placeholder="Enter your email">
                                                                 </div>
                                                             </div>
                                                             <!--end col-->
                                                             <div class="col-lg-6">
                                                                 <div class="mb-3">
                                                                     <label for="birthdayidInput" class="form-label">Date of Birth</label>
                                                                     <input type="text" name="dob" required id="datepicker" class="form-control date" data-provider="flatpickr" placeholder="Enter your date of birth">
                                                                     <input type="hidden" name="user_type" id="birthdayidInput" class="form-control" value="3" readonly>
                                                                 </div>
                                                             </div>

                                                             <!--end col-->
                                                             <div class="col-lg-6">
                                                                 <div class="mb-3">
                                                                     <label for="birthdayidInput" class="form-label">Gender</label>
                                                                     <select class="form-control" required name="gender" data-trigger name="choices-single-default" id="choices-single-default">
                                                                         <option value="">Select </option>
                                                                         <option value="male"> Male</option>
                                                                         <option value="female"> Female</option>
                                                                     </select>
                                                                 </div>
                                                             </div>
                                                             <!--end col-->
                                                             <div class="col-lg-6">
                                                                 <div class="mb-3">
                                                                     <label for="cityidInput" class="form-label">City</label>
                                                                     <input type="text" name="city" required class="form-control" id="cityidInput" placeholder="Enter your city">
                                                                 </div>
                                                             </div>
                                                             <!--end col-->
                                                             <div class="col-lg-6">
                                                                 <div class="mb-3">
                                                                     <label for="countryidInput" class="form-label">Country</label>
                                                                     <input type="text" name="country" required class="form-control" id="countryidInput" placeholder="Enter your country">
                                                                 </div>
                                                             </div>
                                                             <!--end col-->
                                                             <div class="col-lg-6">
                                                                 <div class="mb-3">
                                                                     <label for="zipcodeidInput" class="form-label">Zip Code</label>
                                                                     <input type="text" name="zipcode" required class="form-control" id="zipcodeidInput" placeholder="Enter your zipcode">
                                                                 </div>
                                                             </div>
                                                             <!--end col-->
                                                             <div class="col-lg-12">
                                                                 <div class="mb-3">
                                                                     <label for="exampleFormControlTextarea1" class="form-label">Office address & phone</label>
                                                                     <textarea class="form-control" required name="office_address" id="exampleFormControlTextarea1" rows="3" placeholder="Enter description"></textarea>
                                                                 </div>
                                                             </div>
                                                             <div class="col-lg-12">
                                                                 <div class="mb-3">
                                                                     <label for="exampleFormControlTextarea1" class="form-label">Residence address & phone</label>
                                                                     <textarea class="form-control" required name="residence_address" id="residenceAddress" rows="3" placeholder="Enter description"></textarea>
                                                                 </div>
                                                             </div>
                                                             <!--end col-->
                                                             <div class="col-lg-6">
                                                                 <div class="mb-3">
                                                                     <label for="cityidInput" class="form-label">Upload Photo</label>
                                                                     <input type="file" name="photo" required class="form-control uploadFile" id="logo">
                                                                     <div id="imagePreview"></div>
                                                                 </div>
                                                             </div>
                                                             <!--end col-->
                                                             <div class="col-lg-6">
                                                                 <div class="mb-3">
                                                                     <label for="countryidInput" class="form-label">Upload ID Proof</label>
                                                                     <input type="file" name="idproof" required class="form-control uploadFile2" id="idProof">
                                                                     <div id="imagePreview2"></div>
                                                                 </div>
                                                             </div>
                                                             <!--end col-->

                                                             <div class="col-lg-12">
                                                                 <div class="hstack gap-2 justify-content-end">
                                                                     <button class="btn btn-link link-success text-decoration-none fw-medium" type="button" data-bs-dismiss="modal"><i class="ri-close-line me-1 align-middle"></i> Close</button>
                                                                     <button type="submit" class="btn btn-primary"><i class="ri-save-3-line align-bottom me-1"></i> Save</button>
                                                                 </div>
                                                             </div>
                                                             <!--end col-->
                                                         </div>
                                                         <!--end row-->
                                                     </form>
                                                 </div>
                                             </div>
                                         </div>
                                     </div>
                                 </div>
                             </div>

                             <div class="modal fade" id="editmodal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                 <div class="modal-dialog modal-dialog-centered modal-lg">
                                     <div class="modal-content">
                                         <div class="modal-header bg-light p-3">
                                             <h5 class="modal-title" id="exampleModalLabel">Edit staff Details</h5>
                                             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="close-modal"></button>
                                         </div>
                                         <form method="POST" enctype=" multipart/form-data" id="updatestaff">
                                             {{ csrf_field() }}
                                             <div class="modal-body">
                                                 <input type="hidden" id="id-field" />
                                                 <!-- <div class="row" id="EditArticleModalBody"> -->
                                                 <div class="row">
                                                     <div class="col-lg-6">
                                                         <div class="mb-3">
                                                             <label for="firstnameInput" class="form-label">Full Name</label>
                                                             <input type="text" name="full_name" required class="form-control" id="fullName" placeholder="Enter your name">
                                                             <input name="id" type="hidden" " class=" form-control" id="id" />
                                                         </div>
                                                     </div>
                                                     <!--end col-->

                                                     <div class="col-lg-6">
                                                         <div class="mb-3">
                                                             <label for="contactnumberInput" class="form-label">Contact Number</label>
                                                             <input type="tel" maxlength="12" required name="contact_number" class="form-control phone" id="contactnumber" placeholder="Enter your number">
                                                         </div>
                                                     </div>
                                                     <!--end col-->

                                                     <div class="col-lg-6">
                                                         <div class="mb-3">
                                                             <label for="phonenumberInput" class="form-label">Alternate mobile number</label>
                                                             <input type="tel" maxlength="12" required name="alernative_mobile_numebr" class="form-control phone" id="alternativenumber" placeholder="Enter your number">
                                                         </div>
                                                     </div>
                                                     <!--end col-->
                                                     <div class="col-lg-6">
                                                         <div class="mb-3">
                                                             <label for="emailidInput" class="form-label">Email</label>
                                                             <input type="email" name="email" required class="form-control" id="emailid" placeholder="Enter your email">
                                                         </div>
                                                     </div>
                                                     <!--end col-->
                                                     <div class="col-lg-6">
                                                         <div class="mb-3">
                                                             <label for="birthdayidInput" class="form-label">Date of Birth</label>
                                                             <input type="hidden" name="user_type" required id="userType" class="form-control" value="2">
                                                             <input type="text" name="dob" required id="datepickeredit" class="form-control date" placeholder="Enter your date of birth">
                                                         </div>
                                                     </div>
                                                     <div class="col-lg-6">
                                                         <div class="mb-3">
                                                             <label for="birthdayidInput" class="form-label">user Type</label>
                                                             <input type="text" id="birthdayidInput" class="form-control" value="staff" readonly>
                                                             <input type="hidden" name="user_type" required id="userType" class="form-control" readonly>
                                                         </div>
                                                     </div>
                                                     <!--end col-->
                                                     <div class="col-lg-6">
                                                         <div class="mb-3">
                                                             <label for="birthdayidInput" class="form-label">Gender</label>
                                                             <select class="form-control" name="gender" required data-trigger name="choices-single-default" id="gender">
                                                                 <option value="Male"> Male</option>
                                                                 <option value="Female"> Female</option>
                                                             </select>
                                                         </div>
                                                     </div>
                                                     <!--end col-->
                                                     <div class="col-lg-6">
                                                         <div class="mb-3">
                                                             <label for="cityidInput" class="form-label">City</label>
                                                             <input type="text" name="city" class="form-control" required id="city" placeholder="Enter your city">
                                                         </div>
                                                     </div>
                                                     <!--end col-->
                                                     <div class="col-lg-6">
                                                         <div class="mb-3">
                                                             <label for="countryidInput" class="form-label">Country</label>
                                                             <input type="text" name="country" class="form-control" required id="country" placeholder="Enter your country">
                                                         </div>
                                                     </div>
                                                     <!--end col-->
                                                     <div class="col-lg-6">
                                                         <div class="mb-3">
                                                             <label for="zipcodeidInput" class="form-label">Zip Code</label>
                                                             <input type="text" name="zipcode" class="form-control" required id="zipcode" placeholder="Enter your zipcode">
                                                         </div>
                                                     </div>
                                                     <!--end col-->
                                                     <div class="col-lg-12">
                                                         <div class="mb-3">
                                                             <label for="exampleFormControlTextarea1" class="form-label">Office address & phone</label>
                                                             <textarea class="form-control" name="office_address" required id="officeAddress" rows="3" placeholder="Enter description"></textarea>
                                                         </div>
                                                     </div>
                                                     <div class="col-lg-12">
                                                         <div class="mb-3">
                                                             <label for="exampleFormControlTextarea1" class="form-label">Residence address & phone</label>
                                                             <textarea class="form-control" name="residence_address" required id="residanceAddress" rows="3" placeholder="Enter description"></textarea>
                                                         </div>
                                                     </div>
                                                     <!--end col-->
                                                     <div class="col-lg-6">
                                                         <div class="mb-3">
                                                             <label for="cityidInput" class="form-label">Upload Logo</label>
                                                             <input type="file" name="photo" class="form-control uploadFile" required id="companylogoInput">
                                                             <div id="imagePreview"></div>
                                                         </div>
                                                     </div>
                                                     <!--end col-->
                                                     <div class="col-lg-6">
                                                         <div class="mb-3">
                                                             <label for="countryidInput" class="form-label">Upload ID Proof</label>
                                                             <input type="file" name="idproof" class="form-control uploadFile2" required id="companylogoInput">
                                                             <div id="imagePreview2"></div>
                                                         </div>
                                                     </div>
                                                     <!--end col-->

                                                 </div>
                                                 <!-- </div> -->
                                             </div>

                                             <div class="modal-footer">
                                                 <div class="col-lg-12">
                                                     <div class="hstack gap-2 justify-content-end">
                                                         <button type="button" class="btn btn-link link-success text-decoration-none fw-medium" data-bs-dismiss="modal"><i class="ri-close-line me-1 align-middle"></i> Close</button>
                                                         <button type="submit" class="btn btn-primary" id="edit-staff" data-bs-dismiss="modal"><i class="ri-save-3-line align-bottom me-1"></i> Save</button>
                                                     </div>
                                                 </div>
                                             </div>
                                         </form>
                                     </div>
                                 </div>
                             </div>

                             <!-- Modal -->
                             <div class="modal fade flip" id="deletecategory" tabindex="-1" aria-hidden="true">
                                 <div class="modal-dialog modal-dialog-centered">
                                     <div class="modal-content">
                                         <div class="modal-body p-5 text-center">
                                             <lord-icon src="https://cdn.lordicon.com/gsqxdxog.json" trigger="loop" colors="primary:#405189,secondary:#f06548" style="width:90px;height:90px"></lord-icon>
                                             <div class="mt-4 text-center">
                                                 <h4>Are you sure you want to delete this item ?</h4>
                                                 <div class="hstack gap-2 justify-content-center remove">
                                                     <button class="btn btn-link link-success fw-medium text-decoration-none" data-bs-dismiss="modal"><i class="ri-close-line me-1 align-middle"></i>
                                                         Close</button>
                                                     <button typr="submit" class="btn btn-danger" id="delete-record" data-bs-dismiss="modal">Yes,
                                                         Delete It</button>
                                                 </div>
                                             </div>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                             <!--end modal -->
                             <!-- Modal -->
                             <div class="modal fade flip" id="deletecategoryAll" tabindex="-1" aria-hidden="true">
                                 <div class="modal-dialog modal-dialog-centered">
                                     <div class="modal-content">
                                         <div class="modal-body p-5 text-center">
                                             <lord-icon src="https://cdn.lordicon.com/gsqxdxog.json" trigger="loop" colors="primary:#405189,secondary:#f06548" style="width:90px;height:90px"></lord-icon>
                                             <div class="mt-4 text-center">
                                                 <h4>Are you sure you want to delete this item ?</h4>
                                                 <div class="hstack gap-2 justify-content-center remove">
                                                     <button class="btn btn-link link-success fw-medium text-decoration-none" data-bs-dismiss="modal"><i class="ri-close-line me-1 align-middle"></i>
                                                         Close</button>
                                                     <button typr="submit" class="btn btn-danger" id="deleteMultiple" data-bs-dismiss="modal">Yes,
                                                         Delete It</button>
                                                 </div>
                                             </div>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                             <!--end modal -->
                         </div>
                     </div>

                 </div>
                 <!--end col-->
             </div>
             <!--end row-->

         </div>
         <!-- container-fluid -->
     </div>
     <!-- End Page-content -->

 </div>
 <script type="text/javascript">
     $(document).ready(function() {
         var table = $('.yajra-datatable').DataTable({
             processing: true,
             serverSide: true,
             ajax: "{{ route('admin.list-staff') }}",
             columns: [{

                     data: 'checkbox',
                     name: 'checkbox',
                     orderable: false,
                     searchable: false,
                     'targets': 0,
                     className: 'select-checkbox',
                     'checkboxes': {
                         'selectRow': true
                     }
                 },
                 {
                     data: 'DT_RowIndex',
                     name: 'DT_RowIndex'
                 },
                 {
                     data: 'name',
                     name: 'name',
                 },
                 {
                     data: 'email',
                     name: 'email'
                 },
                 {
                     data: 'contact_number',
                     name: 'contact_number'
                 },
                 {
                     data: 'status',
                     name: 'status'
                 },
                 {
                     data: 'action',
                     name: 'action',
                     orderable: true,
                     searchable: true
                 },

             ],
             "select": {
                 'style': 'multi',
                 'selector': 'td:first-child' //only checkbox can select row
             },
         });

         $("#checkAll").click(function() {
             if ($(this).is(':checked')) {
                 $('.datatablecheckbox').prop('checked', true);
                 $("tr").addClass("selected");
             } else {
                 $('.datatablecheckbox').prop('checked', false);
                 $("tr").removeClass("selected");
             }
         });
         $("#deleteMultiple").click(function() {
             arr = [];
             var arr = $("input[name='datatablecheckbox[]']:checked").map(function() {
                 return this.value;
             }).get();
             $.ajax({
                 type: 'GET',
                 data: {
                     ids: arr
                 },
                 url: "{{ route('admin.staff-deletemultiple') }}",
                 success: function(msg) {
                     $('.yajra-datatable').DataTable().ajax.reload();
                 }
             });
         });
         $('body').on('click', '#getEditId', function(e) {
             // e.preventDefault();
             $('.alert-danger').html('');
             $('.alert-danger').hide();
             var id = $(this).data('id');
             $.ajax({
                 url: "{{ route('admin.staff-edit') }}",
                 method: 'GET',
                 data: {
                     id: id,
                 },
                 success: function(data) {
                     $("#id").val(data.id);
                     $("#fullName").val(data.name);
                     $('#companyName').val(data.company_name);
                     $("#contactnumber").val(data.phone_number);
                     $("#alternativenumber").val(data.alternative_mobile_number);
                     $("#emailid").val(data.email);
                     $("#city").val(data.city);
                     $("#userType").val(data.user_type);
                     $("#datepickeredit").val(data.dob);
                     $("#country").val(data.country);
                     $("#zipcode").val(data.zipcode);
                     $("#officeAddress").val(data.office_address);
                     $("#residanceAddress").val(data.residence_address);
                     $("#logo").val(data.photo);
                     $("#idproof").val(data.id_proof);
                     $("#regisration_certificate").val(data.regisration_certificate);
                 }
             });
         });

         $('#edit-staff').click(function(e) {
             e.preventDefault();
             var str = new FormData($("#updatestaff")[0]);
             str.append('photo', $('input[type=file]')[0].files[0]);
             str.append('idproof', $('input[type=file]')[0].files[0]);
             str.append('photo', $('input[type=file]')[0].files[0]);
             for (var value of str.values()) {
                 console.log(value);
             }
             $.ajaxSetup({
                 headers: {
                     'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                 }
             });
             $.ajax({
                 url: "{{ route('admin.staff-update') }}",
                 contentType: false,
                 processData: false,
                 cache: false,
                 method: 'POST',
                 data: str,
                 success: function(result) {
                     $('.yajra-datatable').DataTable().ajax.reload();
                 }
             });
         });



         var deleteID;
         $('body').on('click', '#getDeleteId', function() {
             deleteID = $(this).data('id');
         })
         $('#delete-record').click(function(e) {
             e.preventDefault();
             var id = deleteID;
             $.ajaxSetup({
                 headers: {
                     'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                 }
             });
             $.ajax({
                 url: "{{ route('admin.staff-delete') }}",
                 method: "GET",
                 data: {
                     'id': id
                 },
                 success: function(result) {
                     $('.yajra-datatable').DataTable().ajax.reload();
                 }
             });
         });


         var stausID;
         $('body').on('click', '#toggle-class', function() {
             statusID = $(this).data('id');
             var status = $(this).prop('checked') == true ? '1' : '0';
             var id = statusID;
             $.ajax({
                 type: "GET",
                 dataType: "json",
                 url: "{{ route('admin.staff-status-change') }}",
                 data: {
                     'status': status,
                     'id': id
                 },
                 success: function(data) {
                     console.log(data.success)
                 }
             });
         })

         $('.date').datepicker({
             format: 'yyyy-mm-dd'
         });
     });

     // Used to format phone number
     function phoneFormatter() {
         $('.phone').on('input', function() {
             var number = $(this).val().replace(/[^\d]/g, '')
             if (number.length == 7) {
                 number = number.replace(/(\d{3})(\d{4})/, "$1-$2");
             } else if (number.length == 10) {
                 number = number.replace(/(\d{3})(\d{3})(\d{4})/, "($1) $2-$3");
             }
             $(this).val(number)
         });
     };

     $(phoneFormatter);
 </script>

 @endsection