@extends('layouts.seller-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">Commissions</h4>

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

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

             <div class="row">
                 <div class="col-lg-12">
                     <div class="card" id="CommisionsList">
                         <div class="card-header border-bottom-dashed">

                             <div class="row g-4 align-items-center">
                                 <div class="col-sm">
                                     <div>
                                         <h5 class="card-title mb-0">Commissions Report</h5>
                                     </div>
                                 </div>
                                 <div class="col-sm-auto">
                                     <div>
                                         <button class="btn btn-soft-danger" onClick="deleteMultiple()"><i class="ri-delete-bin-2-line"></i></button>
                                         <button type="button" class="btn btn-info"><i class="ri-file-download-line align-bottom me-1"></i>
                                             Export</button>
                                     </div>
                                 </div>
                             </div>
                         </div>
                         <div class="card-body border-bottom-dashed border-bottom">
                             <form>
                                 <div class="row g-3">
                                     <div class="col-xl-6">
                                         <div class="search-box">
                                             <input type="text" class="form-control search" placeholder="Search ...">
                                             <i class="ri-search-line search-icon"></i>
                                         </div>
                                     </div>
                                     <!--end col-->
                                     <div class="col-xl-6">
                                         <div class="row g-3">
                                             <div class="col-sm-6">
                                                 <div class="">
                                                     <input type="text" class="form-control" id="datepicker-range" data-provider="flatpickr" data-date-format="d M, Y" data-range-date="true" placeholder="Select date">
                                                 </div>
                                             </div>
                                             <!--end col-->
                                             <div class="col-sm-6">
                                                 <div>
                                                     <button type="button" class="btn btn-primary w-100" onclick="SearchData();"> <i class="ri-equalizer-fill me-2 align-bottom"></i>Filters</button>
                                                 </div>
                                             </div>
                                             <!--end col-->
                                         </div>
                                     </div>
                                 </div>
                                 <!--end row-->
                             </form>
                         </div>
                         <div class="card-body">
                             <div>
                                 <div class="table-responsive table-card mb-1">
                                     <table class="table align-middle" id="CommisionsTable">
                                         <thead class="table-light text-muted">
                                             <tr>
                                                 <th scope="col" style="width: 50px;">
                                                     <div class="form-check">
                                                         <input class="form-check-input" type="checkbox" id="checkAll" value="option">
                                                     </div>
                                                 </th>

                                                 <th class="sort" data-sort="Commisions_name">SL.NO</th>
                                                 <th class="sort" data-sort="email">Order Id</th>
                                                 <th class="sort" data-sort="phone">Product Name</th>
                                                 <th class="sort" data-sort="email">Product Quantity</th>
                                                 <th class="sort" data-sort="Commisions_name">Product Price</th>

                                                 <th class="sort" data-sort="phone">Commission</th>
                                                 <th class="sort" data-sort="action">Date</th>
                                             </tr>
                                         </thead>
                                         <tbody class="list form-check-all">
                                             <tr>
                                                 <th scope="row">
                                                     <div class="form-check">
                                                         <input class="form-check-input" type="checkbox" name="chk_child" value="option1">
                                                     </div>
                                                 </th>
                                                 <td class="Commisions_name">1</td>
                                                 <td class="id"><a href="{{route('seller.order.details')}}" class="fw-medium link-danger">#VZ2101</a></td>
                                                 <td class="phone"><a href="{{route('seller-products')}}">Bamboo Latex Pillow</a></td>
                                                 <td class="phone">2</td>
                                                 <td class="phone"><i class="mdi mdi-currency-inr"></i>10,224.00</td>
                                                 <td class="phone"><i class="mdi mdi-currency-inr"></i>500</td>
                                                 <td>
                                                     1 Sep 2022
                                                 </td>
                                             </tr>

                                             <tr>
                                                 <th scope="row">
                                                     <div class="form-check">
                                                         <input class="form-check-input" type="checkbox" name="chk_child" value="option1">
                                                     </div>
                                                 </th>
                                                 <td class="Commisions_name">3</td>
                                                 <td class="id"><a href="{{route('seller.order.details')}}" class="fw-medium link-danger">#VZ2104</a></td>
                                                 <td class="phone"><a href="{{route('seller-products')}}">Fluffy Mattress</a></td>
                                                 <td class="phone">1</td>
                                                 <td class="phone"><i class="mdi mdi-currency-inr"></i>1980.00</td>
                                                 <td class="phone"><i class="mdi mdi-currency-inr"></i>500</td>
                                                 <td>
                                                     2 Sep 2022
                                                 </td>
                                             </tr>
                                             <tr>
                                                 <th scope="row">
                                                     <div class="form-check">
                                                         <input class="form-check-input" type="checkbox" name="chk_child" value="option1">
                                                     </div>
                                                 </th>
                                                 <td class="Commisions_name">2</td>
                                                 <td class="id"><a href="{{route('seller.order.details')}}" class="fw-medium link-danger">#VZ2105</a></td>
                                                 <td class="phone"><a href="{{route('seller-products')}}">Capsule Bolster</a></td>
                                                 <td class="phone">5</td>
                                                 <td class="phone"><i class="mdi mdi-currency-inr"></i>8035</td>
                                                 <td class="phone"><i class="mdi mdi-currency-inr"></i>1000</td>
                                                 <td>
                                                     5 Sep 2022
                                                 </td>
                                             </tr>
                                             <tr>
                                                 <th scope="row">
                                                     <div class="form-check">
                                                         <input class="form-check-input" type="checkbox" name="chk_child" value="option1">
                                                     </div>
                                                 </th>
                                                 <td class="Commisions_name">4</td>
                                                 <td class="id"><a href="{{route('seller.order.details')}}" class="fw-medium link-danger">#VZ2103</a></td>
                                                 <td class="phone"><a href="{{route('seller-products')}}">Bamboo Latex Pillow</a></td>
                                                 <td class="phone">2</td>
                                                 <td class="phone"><i class="mdi mdi-currency-inr"></i>10,224.00</td>
                                                 <td class="phone"><i class="mdi mdi-currency-inr"></i>500</td>
                                                 <td>
                                                     10 Sep 2022
                                                 </td>
                                             </tr>
                                         </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:#121331,secondary:#08a88a" 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+ Commisions We
                                                 did not find any
                                                 Commisions for you search.</p>
                                         </div>
                                     </div>
                                 </div>
                                 <div class="d-flex justify-content-end">
                                     <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>

                             <!-- Modal -->
                             <div class="modal fade zoomIn" id="showModal" tabindex="-1" aria-labelledby="addSellerLabel" 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="addSellerLabel">Add Commisions</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 firstname">
                                                                 </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="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="phonenumberInput" class="form-label">Password</label>
                                                                     <input type="password" class="form-control" id="phonenumberInput" placeholder="Enter your password">
                                                                 </div>
                                                             </div>
                                                             <!--end col-->
                                                             <div class="col-lg-6">
                                                                 <div class="mb-3">
                                                                     <label for="phonenumberInput" class="form-label">Confirm Password</label>
                                                                     <input type="password" class="form-control" id="phonenumberInput" placeholder="Enter your confirm password">
                                                                 </div>
                                                             </div>
                                                             <!--end col-->
                                                             <div class="col-lg-4">
                                                                 <div class="mb-3">
                                                                     <label for="cityidInput" class="form-label">Address Line </label>
                                                                     <input type="text" class="form-control" id="cityidInput" placeholder="Enter your Address Line">
                                                                 </div>
                                                             </div>
                                                             <div class="col-lg-4">
                                                                 <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>
                                                             <div class="col-lg-4">
                                                                 <div class="mb-3">
                                                                     <label for="cityidInput" class="form-label">STATE/PROVINCE/REGION</label>
                                                                     <input type="text" class="form-control" id="cityidInput" placeholder="Enter your state">
                                                                 </div>
                                                             </div>
                                                             <!--end col-->
                                                             <div class="col-lg-4">
                                                                 <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-4">
                                                                 <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>
                                                             <div class="col-lg-4">
                                                                 <div class="mb-3">
                                                                     <label for="companylogoInput" class="form-label">Choose Image</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>
                             <!--end modal-->
                             <!-- Modal -->
                             <div class="modal fade zoomIn" id="deleteRecordModal" tabindex="-1" aria-hidden="true">
                                 <div class="modal-dialog modal-dialog-centered">
                                     <div class="modal-content">
                                         <div class="modal-header">
                                             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="btn-close"></button>
                                         </div>
                                         <div class="modal-body">
                                             <div class="mt-2 text-center">
                                                 <lord-icon src="https://cdn.lordicon.com/gsqxdxog.json" trigger="loop" colors="primary:#f7b84b,secondary:#f06548" style="width:100px;height:100px"></lord-icon>
                                                 <div class="mt-4 pt-2 fs-15 mx-4 mx-sm-5">
                                                     <h4>Are you sure ?</h4>
                                                     <p class="text-muted mx-4 mb-0">Are you sure you want to
                                                         remove this record ?</p>
                                                 </div>
                                             </div>
                                             <div class="d-flex gap-2 justify-content-center mt-4 mb-2">
                                                 <button type="button" class="btn w-sm btn-light" data-bs-dismiss="modal">Close</button>
                                                 <button type="button" class="btn w-sm btn-danger " id="delete-record">Yes, Delete It!</button>
                                             </div>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                             <!--end modal -->
                         </div>
                     </div>

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

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