@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);">Users</a></li>
                                 <li class="breadcrumb-item active">Staff</li>
                             </ol>
                         </div>

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

             <div class="row" id="contactList">
                 <div class="col-lg-12">
                     <div class="card">
                         <div class="card-header d-flex align-items-center border-0">
                             <h5 class="card-title mb-0 flex-grow-1">All Staff</h5>
                             <div class="flex-shrink-0">
                                 <div class="flax-shrink-0 hstack gap-2">
                                     <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#addServiceMan"><i class="ri-add-fill me-1 align-bottom"></i> Add Staff</button>
                                 </div>
                             </div>
                         </div>
                         <div class="card-body border border-dashed border-end-0 border-start-0">
                             <div class="row g-2">
                                 <div class="col-xl-6 col-md-6">
                                     <div class="search-box">
                                         <input type="text" class="form-control search" placeholder="Search to Staff...">
                                         <i class="ri-search-line search-icon"></i>
                                     </div>
                                 </div>
                                 <!--end col-->
                                 <div class="col-xl-3 col-md-4">
                                     <select class="form-control" data-choices data-choices-search-false name="choices-single-default2" id="choices-single-default2">
                                         <option value="">Select Status</option>
                                         <option value="Successful">Active</option>
                                         <option value="Cancelled">Blocked</option>
                                     </select>
                                 </div>
                                 <!--end col-->
                                 <div class="col-xl-3 col-md-4">
                                     <button class="btn btn-primary w-100">Filters</button>
                                 </div>
                             </div>
                             <!--end row-->
                         </div>
                         <div class="card-body">
                             <div class="table-responsive table-card">
                                 <table class="table align-middle table-nowrap" id="customerTable">
                                     <thead class="table-light text-muted">
                                         <tr>
                                             <th class="sort" data-sort="currency_name" scope="col">Name</th>
                                             <th class="sort" data-sort="quantity_value" scope="col">Email</th>
                                             <th class="sort" data-sort="order_value" scope="col">Contact Number</th>
                                             <th class="sort" data-sort="price" scope="col">Actions</th>
                                         </tr>
                                     </thead>
                                     <!--end thead-->
                                     <tbody class="list form-check-all">
                                         <tr>
                                             <td class="order_date">Anil Kumar</td>
                                             <td class="quantity_value">anil@yahoo.com</td>
                                             <td class="order_value">91-89765-12345</td>

                                             <td class="status" <ul class="list-inline hstack gap-2 mb-0">
                                                 <li class="list-inline-item" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="View">
                                                     <a href="{{route('seller-details')}}" class="text-primary d-inline-block">
                                                         <i class="ri-eye-fill fs-16"></i>
                                                     </a>
                                                 </li>
                                                 <li class="list-inline-item edit" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Edit">
                                                     <a href="#addVendor" data-bs-toggle="modal" class="text-primary d-inline-block edit-item-btn">
                                                         <i class="ri-pencil-fill fs-16"></i>
                                                     </a>
                                                 </li>
                                                 <li class="list-inline-item" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Remove">
                                                     <a class="text-danger d-inline-block remove-item-btn" data-bs-toggle="modal" href="#deleteOrder">
                                                         <i class="ri-delete-bin-5-fill fs-16"></i>
                                                     </a>
                                                 </li>
                                                 </ul>
                                             </td>
                                         </tr>

                                     </tbody>
                                 </table>
                                 <!--end 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 mb-0">We've searched more than 150+ Staff We did not find any Staff for you search.</p>
                                     </div>
                                 </div>
                             </div>
                             <div class="d-flex justify-content-end mt-3">
                                 <div class="pagination-wrap hstack gap-2">
                                     <a class="page-item pagination-prev disabled" href="#">
                                         Previous
                                     </a>
                                     <ul class="pagination listjs-pagination mb-0"></ul>
                                     <a class="page-item pagination-next" href="#">
                                         Next
                                     </a>
                                 </div>
                             </div>
                         </div>
                     </div>
                     <!--end card-->
                 </div>
                 <!--end col-->
             </div>
             <!--end row-->
             <!-- Modal -->
             <div class="modal fade zoomIn" id="addServiceMan" tabindex="-1" aria-labelledby="addStaffLabel" 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 action="#">
                                         <div class="row">
                                             <div class="col-lg-6">
                                                 <div class="mb-3">
                                                     <label for="firstnameInput" class="form-label">Full Name</label>
                                                     <input type="text" class="form-control" 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="number" class="form-control" 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="number" class="form-control" 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="number" class="form-control" 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" 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" id="birthdayidInput" class="form-control" data-provider="flatpickr" placeholder="Enter your date of birth">
                                                 </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" data-trigger name="choices-single-default" id="choices-single-default">
                                                         <option value="">Select </option>
                                                         <option value=""> Male</option>
                                                         <option value=""> 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" 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" 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" 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" 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" id="exampleFormControlTextarea1" 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" class="form-control" id="companylogoInput">
                                                 </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" class="form-control" id="companylogoInput">
                                                 </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" 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 flip" id="deleteOrder" 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>You are about to delete a Staff ?</h4>
                                 <p class="text-muted fs-15 mb-4">Deleting Staff will remove
                                     all of
                                     your information from our database.</p>
                                 <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 class="btn btn-danger" id="delete-record">Yes,
                                         Delete It</button>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
             <!--end modal-->
         </div>
         <!-- container-fluid -->
     </div>
     <!-- End Page-content -->
     @endsection