@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">Commission Settings</h4>

                         <div class="page-title-right">
                             <ol class="breadcrumb m-0">

                                 <li class="breadcrumb-item active">Commission Settings</li>
                             </ol>
                         </div>

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


             <div class="row justify-content-center">
                 <div class="col-lg-12">
                     <div class="card">
                         <div class="card-body">
                             <div class="d-flex align-items-center mb-4">
                                 <div class="flex-grow-1">
                                     <h5 class="card-title mb-0 text-center">ADD COMMISSION</h5>
                                 </div>
                             </div>
                             @if(\Session::get('success'))
                             <div class="alert alert-success alert-dismissible fade show" role="alert">
                                 <div class="alert-body">
                                     {{ \Session::get('success') }}
                                 </div>
                                 <button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
                             </div>
                             @endif
                             {{ \Session::forget('success') }}
                             @if(\Session::get('error'))
                             <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                 <div class="alert-body">
                                     {{ \Session::get('error') }}
                                 </div>
                                 <button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
                             </div>
                             @endif
                             <form method="post" action="{{ route('admin.add-commission')}}" style="padding: 20px;
    background: #eee;
    border: 1px solid #d6d4d4;">
                                 @csrf

                                 <div class=" col-xl-12">
                                     <div class="row">
                                         <div class="col-xxl-3 col-md-4">
                                             <div>
                                                 <label for="basiInput" class="form-label">Brand</label>
                                                 <select class="form-select mb-3" name="brand" aria-label="Default select example">
                                                     <option>Select Brand</option>
                                                     @foreach(App\Models\Brand::where('status',1)->get() as $item)
                                                     <option value="{{$item->id}}" {{ $item->id == old('brand') ? 'selected' : '' }}>{{$item->name}}</option>
                                                     @endforeach
                                                 </select>
                                                 @if ($errors->has('brand'))
                                                 <span class="alert-danger">
                                                     <strong>{{ $errors->first('brand') }}</strong>
                                                 </span>
                                                 @endif
                                             </div>
                                         </div>
                                         <div class="col-xxl-3 col-md-4">
                                             <div>
                                                 <label for="basiInput" class="form-label">Vendor</label>
                                                 <select class="form-select mb-3" aria-label="Default select example" name="vendor">
                                                     <option>Select Vendor</option>
                                                     @foreach(App\Models\User::where('user_type_id',1)->orderBy('name','ASC')->get() as $item)
                                                     <option value="{{$item->id}}">{{$item->name}}</option>
                                                     @endforeach
                                                 </select>
                                             </div>
                                         </div>
                                         <div class="col-xxl-3 col-md-4">
                                             <div>
                                                 <label for="basiInput" class="form-label">Commision Amount</label>
                                                 <input type="number" placeholder="Enter commission rate" class="form-control" name="commission" id="basiInput">
                                             </div>
                                         </div>

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

                                     <div class="col-xl-12 text-center">
                                         <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
                                             <button type="submit" class="btn btn-primary bg-gradient waves-effect waves-light">SAVE</button>

                                         </div>

                                     </div><!-- end col -->
                                 </div>
                             </form>
                         </div>
                     </div>
                 </div>
                 <!--end card-->
             </div>

             <div class="row justify-content-center">
                 <div class="col-lg-12">
                     <div class="card">
                         <div class="card-header  border-0">
                             <div class="d-flex align-items-center">
                                 <h5 class="card-title mb-0 flex-grow-1 text-center">COMMISSIONS</h5>
                                 <div class="flex-shrink-0">
                                     <button class="btn btn-soft-danger" title="Delete selected rows" data-bs-toggle="modal" href="#deletebrandcategoryAll"><i class="ri-delete-bin-2-line"></i></button>
                                 </div>
                             </div>
                         </div>

                         <div class="card-body">

                             <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="product_name">Vendor</th>
                                             <th class="sort" data-sort="id">Brand Name</th>
                                             <th class="sort" data-sort="id">Commission Rate</th>
                                             <th class="sort" data-sort="city">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>
                 </div>
                 <!--end card-->
             </div>
             <!--end col-->
         </div>
         <!--end row-->

         <!-- Modal -->
         <div class="modal fade flip" id="deletebrandcategory" 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="deletebrandcategoryAll" 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>
     <!-- container-fluid -->
 </div>
 <script type="text/javascript">
     $(document).ready(function() {
         var table = $('.yajra-datatable').DataTable({
             processing: true,
             serverSide: true,
             ajax: "{{ route('admin.commission-list') }}",
             columns: [{

                     data: 'checkbox',
                     name: 'checkbox',
                     orderable: false,
                     searchable: false,
                     'targets': 0,
                     className: 'select-checkbox',
                     'checkboxes': {
                         'selectRow': true
                     }
                 },
                 {
                     data: 'DT_RowIndex',
                     name: 'DT_RowIndex'
                 },
                 {
                     data: 'vendor',
                     name: 'vendor'
                 },
                 {
                     data: 'brand',
                     name: 'brand',
                 },
                 {
                     data: 'amount',
                     name: 'amount'
                 },
                 {
                     data: 'action',
                     name: 'action',
                     orderable: true,
                     searchable: true
                 },

             ],

             //  'select': {
             //      'style': 'multi'
             //  },
             "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.deletemultiple-commission') }}",
                 success: function(msg) {
                     $('.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.delete-commission') }}",
                 method: "GET",
                 data: {
                     'id': id
                 },
                 success: function(result) {
                     $('.yajra-datatable').DataTable().ajax.reload();
                 }
             });
         });
     });
 </script>
 @endsection