@extends('layouts.app')
@section('content')

@php
$table = "yes";
@endphp
<style type="text/css">
.dropdown-menu .show{
    inset:none !important;
}
</style>
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-md-flex d-block align-items-center justify-content-between my-4 page-header-breadcrumb">
        <div class="p-2 main-dashboard-header-left mt-2">
            
        </div>
    </div>
    <!-- End Page Header -->

    <div class="row">
        <div class="col-xl-12">
            <div class="card custom-card">
                <div class="card-body">
                    <form id="searchForm">
                        <div class="row">
                            <div class="col-xl-9">
                                <div class="row">
                                    <div class="col-xl-2">
                                        <p class="text-muted">From Date:</p>
                                        <input type="date" name="from_date" class="form-control" id="input">  
                                    </div>

                                    <div class="col-xl-2">
                                        <p class="text-muted">To Date:</p>
                                        <input type="date" name="to_date" class="form-control" id="">  
                                    </div>

                                    <div class="col-xl-2">
                                        <p class="text-muted">User ID:</p>
                                         <input type="text" name="to_date" placeholder="Searchab..." class="form-control" id="">
                                    </div>

                                    <div class="col-xl-2 mt-3"><br>
                                        <button type="submit" class="btn btn-sm btn-primary-gradient waves-light">Search</button>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-3">
                                <div class="btn-list text-end" style="margin-top: 36px;">
                                   
                                    <button class="btn btn-sm btn-orange-gradient waves-light">Export Excel</button>
                                    <button class="btn btn-sm btn-purple-gradient waves-light">Export PDF</button> 
                                </div>

                            </div>
                        </div>
                    </form>    
                </div>
             </div>   
        </div>   
    </div> 

    <div class="col-xl-12">
        <div class="card custom-card">
            <div class="card-header justify-content-between">
               <div class="card-title">
                  <h5>Commssion List Update</h5>
               </div>         
            </div>
            <div class="card-body">
               <div class="table-responsive custom-scroll">
                    <table class="table text-nowrap table-bordered" id="datatable">

                        <thead>
                            <tr>
                                <th>Sr No</th>
                                <th>Create Date</th>
                                <th>Plan Name</th>
                                <th>Created By</th>
                                <th>Service List</th>
                                <th>Update</th>
                                <th>Edit Plan</th>
                            </tr>
                        </thead>

                        <tbody>
                            
                        </tbody>

                    </table>
               </div>
            </div>
        </div>
    </div> 

</div>


<div class="modal fade" id="mobileMarkupModal"
    aria-labelledby="mobileMarkupModalLabel" tabindex="-1" aria-hidden="true"
    style="display: none;">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
              <h6 class="modal-title" id="staticBackdropLabel1">Mobile Commission Modal
              </h6>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form class="commissionForm" action="{{ route('savedata') }}" method="post">
            <div class="modal-body">
              <div class="formerror"></div>
               @csrf
               <input type="hidden" name="posttype" value="commission">
               <input type="hidden" name="scheme_id" value=""> 
               <div class="table-responsive custom-scroll">
                    <table class="table text-nowrap table-bordered" id="datatables">
                        <thead>
                            <tr>
                                <th>Operator Name</th>
                                <th>
                                     <div class="d-flex align-items-center gap-2">
                                        <span class="rounded-circle bg-danger text-white d-inline-flex justify-content-center align-items-center"
                                              style="width:25px;height:25px;">
                                            <i class="bi bi-dash"></i>
                                        </span>
                                        <span class="rounded-circle bg-primary text-white d-inline-flex justify-content-center align-items-center"
                                              style="width:25px;height:25px;">
                                            <i class="bi bi-plus"></i>
                                        </span>

                                    </div>
                                </th>
                                <th>Min Slab</th>
                                <th>Max Slab</th>
                                <th>Default</th>
                                <th>Flat-%</th>
                                <th>WL</th>
                                <th>MDS</th>
                                <th>DS</th>
                                <th>RT</th>
                                <th>Update</th>
                            </tr>
                        </thead>

                        <tbody>
                        @foreach ($mobileOperator as $element)
                            <tr class="slab-row base-row" data-operator="{{ $element->id }}">
                                <td>
                                    <input type="hidden" name="slab[]" value="{{$element->id}}">
                                    {{$element->name}}
                                </td>
                                <td class="text-center">
                                    <div class="d-flex justify-content-center gap-2">
                                        <span class="rounded-circle bg-danger text-white d-inline-flex justify-content-center align-items-center remove-row"
                                              style="width:25px;height:25px;cursor:pointer;">
                                            <i class="bi bi-dash"></i>
                                        </span>

                                        <span class="rounded-circle bg-primary text-white d-inline-flex justify-content-center align-items-center add-row"
                                              data-operator="{{ $element->id }}"
                                              style="width:25px;height:25px;cursor:pointer;">
                                            <i class="bi bi-plus"></i>
                                        </span>
                                    </div>
                                </td>
                                <td class="p-t-0 p-b-0">
                                    <input type="number" step="any" name="min[]" placeholder="Enter Value" class="form-control" style="width: 90px;" required="">
                                </td>

                                <td class="p-t-0 p-b-0">
                                    <input type="number" step="any" name="max[]" placeholder="Enter Value" class="form-control" style="width: 90px;" required="">
                                </td> 

                                <td class="p-t-0 p-b-0">
                                    <input type="number" step="any" name="default[]" placeholder="Enter Value" class="form-control" style="width: 78px;" required="">
                                </td>

                                <td class="p-t-0 p-b-0">
                                    <select class="form-control" name="type[]" required="">
                                        <option value="">Select Type</option>
                                        <option value="percent">%</option>
                                        <option value="flat">Flat</option>
                                    </select>
                                </td>
                                <td class="p-t-0 p-b-0">
                                    <input type="number" step="any" name="whitelable[]" placeholder="Enter Value" class="form-control form-control-sm" style="width: 78px;" required="">
                                </td>
                                <td class="p-t-0 p-b-0">
                                    <input type="number" step="any" name="md[]" placeholder="Enter Value" class="form-control form-control-sm" style="width: 78px;" required="">
                                </td>
                                <td class="p-t-0 p-b-0">
                                    <input type="number" step="any" name="distributor[]" placeholder="Enter Value" class="form-control" style="width: 78px;" required="">
                                </td>
                                <td class="p-t-0 p-b-0">
                                    <input type="number" step="any" name="retailer[]" placeholder="Enter Value" class="form-control" style="width: 78px;" required="">
                                </td>
                                <td class="text-center">
                                    <div class="form-check form-switch d-inline-block">
                                        <input class="form-check-input" type="checkbox" checked>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>        

            
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-sm btn-purple-gradient waves-light">Save Changes</button>
                <button type="button" data-bs-dismiss="modal" class="btn btn-sm btn-danger">Close</button> 
            </div>
            </form> 
        </div>
    </div>
</div>

<div class="modal fade" id="pgcollectionMarkupModal"
    aria-labelledby="pgcollectionMarkupModalLabel" tabindex="-1" aria-hidden="true"
    style="display: none;">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
              <h6 class="modal-title" id="staticBackdropLabel1">PG Collection Commission Modal
              </h6>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form class="commissionForm" action="{{ route('savedata') }}" method="post">
            <div class="modal-body">
              <div class="formerror"></div>
               @csrf
               <input type="hidden" name="posttype" value="commission">
               <input type="hidden" name="scheme_id" value=""> 
               <div class="table-responsive custom-scroll">
                    <table class="table text-nowrap table-bordered" id="datatables">
                        <thead>
                            <tr>
                                <th>Operator Name</th>
                                <th>
                                     <div class="d-flex align-items-center gap-2">
                                        <span class="rounded-circle bg-danger text-white d-inline-flex justify-content-center align-items-center"
                                              style="width:25px;height:25px;">
                                            <i class="bi bi-dash"></i>
                                        </span>
                                        <span class="rounded-circle bg-primary text-white d-inline-flex justify-content-center align-items-center"
                                              style="width:25px;height:25px;">
                                            <i class="bi bi-plus"></i>
                                        </span>

                                    </div>
                                </th>
                                <th>Min Slab</th>
                                <th>Max Slab</th>
                                <th>Default</th>
                                <th>Flat-%</th>
                                <th>WL</th>
                                <th>MDS</th>
                                <th>DS</th>
                                <th>RT</th>
                                <th>Update</th>
                            </tr>
                        </thead>

                        <tbody>
                        @foreach ($pgcollectionOperator as $element)
                            <tr class="slab-row base-row" data-operator="{{ $element->id }}">
                                <td>
                                    <input type="hidden" name="slab[]" value="{{$element->id}}">
                                    {{$element->name}}
                                </td>
                                <td class="text-center">
                                    <div class="d-flex justify-content-center gap-2">
                                        <span class="rounded-circle bg-danger text-white d-inline-flex justify-content-center align-items-center remove-row"
                                              style="width:25px;height:25px;cursor:pointer;">
                                            <i class="bi bi-dash"></i>
                                        </span>

                                        <span class="rounded-circle bg-primary text-white d-inline-flex justify-content-center align-items-center add-row"
                                              data-operator="{{ $element->id }}"
                                              style="width:25px;height:25px;cursor:pointer;">
                                            <i class="bi bi-plus"></i>
                                        </span>
                                    </div>
                                </td>
                                <td class="p-t-0 p-b-0">
                                    <input type="number" step="any" name="min[]" placeholder="Enter Value" class="form-control" style="width: 90px;" required="">
                                </td>

                                <td class="p-t-0 p-b-0">
                                    <input type="number" step="any" name="max[]" placeholder="Enter Value" class="form-control" style="width: 90px;" required="">
                                </td> 

                                <td class="p-t-0 p-b-0">
                                    <input type="number" step="any" name="default[]" placeholder="Enter Value" class="form-control" style="width: 78px;" required="">
                                </td>

                                <td class="p-t-0 p-b-0">
                                    <select class="form-control" name="type[]" required="">
                                        <option value="">Select Type</option>
                                        <option value="percent">%</option>
                                        <option value="flat">Flat</option>
                                    </select>
                                </td>
                                <td class="p-t-0 p-b-0">
                                    <input type="number" step="any" name="whitelable[]" placeholder="Enter Value" class="form-control form-control-sm" style="width: 78px;" required="">
                                </td>
                                <td class="p-t-0 p-b-0">
                                    <input type="number" step="any" name="md[]" placeholder="Enter Value" class="form-control form-control-sm" style="width: 78px;" required="">
                                </td>
                                <td class="p-t-0 p-b-0">
                                    <input type="number" step="any" name="distributor[]" placeholder="Enter Value" class="form-control" style="width: 78px;" required="">
                                </td>
                                <td class="p-t-0 p-b-0">
                                    <input type="number" step="any" name="retailer[]" placeholder="Enter Value" class="form-control" style="width: 78px;" required="">
                                </td>
                                <td class="text-center">
                                    <div class="form-check form-switch d-inline-block">
                                        <input class="form-check-input" type="checkbox" checked>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>        

            
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-sm btn-purple-gradient waves-light">Save Changes</button>
                <button type="button" data-bs-dismiss="modal" class="btn btn-sm btn-danger">Close</button> 
            </div>
            </form> 
        </div>
    </div>
</div>

<div class="modal fade" id="dthMarkupModal"
    aria-labelledby="dthMarkupModalLabel" tabindex="-1" aria-hidden="true"
    style="display: none;">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
              <h6 class="modal-title" id="staticBackdropLabel1">DTH Commission Modal
              </h6>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="commissionForm" action="{{ route('savedata') }}" method="post">
            <div class="modal-body">
              <div class="formerror"></div>
               @csrf
               <input type="hidden" name="posttype" value="commission">
               <input type="hidden" name="scheme_id" value=""> 
               <div class="table-responsive custom-scroll">
                    <table class="table text-nowrap table-bordered" id="datatables">
                        <thead>
                            <tr>
                                <th>Operator Name</th>
                                <th>
                                     <div class="d-flex align-items-center gap-2">
                                        <span class="rounded-circle bg-danger text-white d-inline-flex justify-content-center align-items-center"
                                              style="width:25px;height:25px;">
                                            <i class="bi bi-dash"></i>
                                        </span>
                                        <span class="rounded-circle bg-primary text-white d-inline-flex justify-content-center align-items-center"
                                              style="width:25px;height:25px;">
                                            <i class="bi bi-plus"></i>
                                        </span>

                                    </div>
                                </th>
                                <th>Min Slab</th>
                                <th>Max Slab</th>
                                <th>Default</th>
                                <th>Flat-%</th>
                                <th>WL</th>
                                <th>MDS</th>
                                <th>DS</th>
                                <th>RT</th>
                                <th>Update</th>
                            </tr>
                        </thead>

                        <tbody>
                        @foreach ($dthOperator as $element)
                            <tr class="slab-row base-row" data-operator="{{ $element->id }}">
                                <td>
                                    <input type="hidden" name="slab[]" value="{{$element->id}}">
                                    {{$element->name}}
                                </td>
                                <td class="text-center">
                                    <div class="d-flex justify-content-center gap-2">
                                        <span class="rounded-circle bg-danger text-white d-inline-flex justify-content-center align-items-center remove-row"
                                              style="width:25px;height:25px;cursor:pointer;">
                                            <i class="bi bi-dash"></i>
                                        </span>

                                        <span class="rounded-circle bg-primary text-white d-inline-flex justify-content-center align-items-center add-row"
                                              data-operator="{{ $element->id }}"
                                              style="width:25px;height:25px;cursor:pointer;">
                                            <i class="bi bi-plus"></i>
                                        </span>
                                    </div>
                                </td>
                                <td class="p-t-0 p-b-0">
                                    <input type="number" step="any" name="min[]" placeholder="Enter Value" class="form-control" style="width: 90px;" required="">
                                </td>

                                <td class="p-t-0 p-b-0">
                                    <input type="number" step="any" name="max[]" placeholder="Enter Value" class="form-control" style="width: 90px;" required="">
                                </td> 

                                <td class="p-t-0 p-b-0">
                                    <input type="number" step="any" name="default[]" placeholder="Enter Value" class="form-control" style="width: 78px;" required="">
                                </td>

                                <td class="p-t-0 p-b-0">
                                    <select class="form-control" name="type[]" required="">
                                        <option value="">Select Type</option>
                                        <option value="percent">%</option>
                                        <option value="flat">Flat</option>
                                    </select>
                                </td>
                                <td class="p-t-0 p-b-0">
                                    <input type="number" step="any" name="whitelable[]" placeholder="Enter Value" class="form-control form-control-sm" style="width: 78px;" required="">
                                </td>
                                <td class="p-t-0 p-b-0">
                                    <input type="number" step="any" name="md[]" placeholder="Enter Value" class="form-control form-control-sm" style="width: 78px;" required="">
                                </td>
                                <td class="p-t-0 p-b-0">
                                    <input type="number" step="any" name="distributor[]" placeholder="Enter Value" class="form-control" style="width: 78px;" required="">
                                </td>
                                <td class="p-t-0 p-b-0">
                                    <input type="number" step="any" name="retailer[]" placeholder="Enter Value" class="form-control" style="width: 78px;" required="">
                                </td>
                                <td class="text-center">
                                    <div class="form-check form-switch d-inline-block">
                                        <input class="form-check-input" type="checkbox" checked>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>        

            
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-sm btn-purple-gradient waves-light">Save Changes</button>
                <button type="button" data-bs-dismiss="modal" class="btn btn-sm btn-danger">Close</button> 
            </div>
            </form> 
        </div>
    </div>
</div>

<div class="modal fade" id="bbpsMarkupModal"
    aria-labelledby="bbpsMarkupModalModalLabel" tabindex="-1" aria-hidden="true"
    style="display: none;">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
              <h6 class="modal-title" id="staticBackdropLabel1">BBPS Commission Modal
              </h6>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="commissionForm" action="{{ route('savedata') }}" method="post">
            <div class="modal-body">
              <div class="formerror"></div>
               @csrf
               <input type="hidden" name="posttype" value="commission">
               <input type="hidden" name="scheme_id" value=""> 
               <div class="table-responsive custom-scroll">
                    <table class="table text-nowrap table-bordered" id="datatables">
                        <thead>
                            <tr>
                                <th>Operator Name</th>
                                <th>
                                     <div class="d-flex align-items-center gap-2">
                                        <span class="rounded-circle bg-danger text-white d-inline-flex justify-content-center align-items-center"
                                              style="width:25px;height:25px;">
                                            <i class="bi bi-dash"></i>
                                        </span>
                                        <span class="rounded-circle bg-primary text-white d-inline-flex justify-content-center align-items-center"
                                              style="width:25px;height:25px;">
                                            <i class="bi bi-plus"></i>
                                        </span>

                                    </div>
                                </th>
                                <th>Min Slab</th>
                                <th>Max Slab</th>
                                <th>Default</th>
                                <th>Flat-%</th>
                                <th>WL</th>
                                <th>MDS</th>
                                <th>DS</th>
                                <th>RT</th>
                                <th>Update</th>
                            </tr>
                        </thead>

                        <tbody>
                        @foreach ($bbpsOperator as $element)
                            <tr class="slab-row base-row" data-operator="{{ $element->id }}">
                                <td>
                                    <input type="hidden" name="slab[]" value="{{$element->id}}">
                                    {{$element->name}}
                                </td>
                                <td class="text-center">
                                    <div class="d-flex justify-content-center gap-2">
                                        <span class="rounded-circle bg-danger text-white d-inline-flex justify-content-center align-items-center remove-row"
                                              style="width:25px;height:25px;cursor:pointer;">
                                            <i class="bi bi-dash"></i>
                                        </span>

                                        <span class="rounded-circle bg-primary text-white d-inline-flex justify-content-center align-items-center add-row"
                                              data-operator="{{ $element->id }}"
                                              style="width:25px;height:25px;cursor:pointer;">
                                            <i class="bi bi-plus"></i>
                                        </span>
                                    </div>
                                </td>
                                <td class="p-t-0 p-b-0">
                                    <input type="number" step="any" name="min[]" placeholder="Enter Value" class="form-control" style="width: 90px;" required="">
                                </td>

                                <td class="p-t-0 p-b-0">
                                    <input type="number" step="any" name="max[]" placeholder="Enter Value" class="form-control" style="width: 90px;" required="">
                                </td> 

                                <td class="p-t-0 p-b-0">
                                    <input type="number" step="any" name="default[]" placeholder="Enter Value" class="form-control" style="width: 78px;" required="">
                                </td>

                                <td class="p-t-0 p-b-0">
                                    <select class="form-control" name="type[]" required="">
                                        <option value="">Select Type</option>
                                        <option value="percent">%</option>
                                        <option value="flat">Flat</option>
                                    </select>
                                </td>
                                <td class="p-t-0 p-b-0">
                                    <input type="number" step="any" name="whitelable[]" placeholder="Enter Value" class="form-control form-control-sm" style="width: 78px;" required="">
                                </td>
                                <td class="p-t-0 p-b-0">
                                    <input type="number" step="any" name="md[]" placeholder="Enter Value" class="form-control form-control-sm" style="width: 78px;" required="">
                                </td>
                                <td class="p-t-0 p-b-0">
                                    <input type="number" step="any" name="distributor[]" placeholder="Enter Value" class="form-control" style="width: 78px;" required="">
                                </td>
                                <td class="p-t-0 p-b-0">
                                    <input type="number" step="any" name="retailer[]" placeholder="Enter Value" class="form-control" style="width: 78px;" required="">
                                </td>
                                <td class="text-center">
                                    <div class="form-check form-switch d-inline-block">
                                        <input class="form-check-input" type="checkbox" checked>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>        

            
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-sm btn-purple-gradient waves-light">Save Changes</button>
                <button type="button" data-bs-dismiss="modal" class="btn btn-sm btn-danger">Close</button> 
            </div>
            </form> 
        </div>
    </div>
</div>

<div class="modal fade" id="payoutMarkupModal"
    aria-labelledby="payoutMarkupModalModalLabel" tabindex="-1" aria-hidden="true"
    style="display: none;">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
              <h6 class="modal-title" id="staticBackdropLabel1">Payout Charge Modal
              </h6>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="commissionForm" action="{{ route('savedata') }}" method="post">
            <div class="modal-body">
              <div class="formerror"></div>
               @csrf
               <input type="hidden" name="posttype" value="commission">
               <input type="hidden" name="scheme_id" value=""> 
               <div class="table-responsive custom-scroll">
                    <table class="table text-nowrap table-bordered" id="datatables">
                        <thead>
                            <tr>
                                <th>Operator Name</th>
                                <th>
                                     <div class="d-flex align-items-center gap-2">
                                        <span class="rounded-circle bg-danger text-white d-inline-flex justify-content-center align-items-center"
                                              style="width:25px;height:25px;">
                                            <i class="bi bi-dash"></i>
                                        </span>
                                        <span class="rounded-circle bg-primary text-white d-inline-flex justify-content-center align-items-center"
                                              style="width:25px;height:25px;">
                                            <i class="bi bi-plus"></i>
                                        </span>

                                    </div>
                                </th>
                                <th>Min Slab</th>
                                <th>Max Slab</th>
                                <th>Default</th>
                                <th>Flat-%</th>
                                <th>WL</th>
                                <th>MDS</th>
                                <th>DS</th>
                                <th>RT</th>
                                <th>Update</th>
                            </tr>
                        </thead>

                        <tbody>
                        @foreach ($payoutOperator as $element)
                            <tr class="slab-row base-row" data-operator="{{ $element->id }}">
                                <td>
                                    <input type="hidden" name="slab[]" value="{{$element->id}}">
                                    {{$element->name}}
                                </td>
                                <td class="text-center">
                                    <div class="d-flex justify-content-center gap-2">
                                        <span class="rounded-circle bg-danger text-white d-inline-flex justify-content-center align-items-center remove-row"
                                              style="width:25px;height:25px;cursor:pointer;">
                                            <i class="bi bi-dash"></i>
                                        </span>

                                        <span class="rounded-circle bg-primary text-white d-inline-flex justify-content-center align-items-center add-row"
                                              data-operator="{{ $element->id }}"
                                              style="width:25px;height:25px;cursor:pointer;">
                                            <i class="bi bi-plus"></i>
                                        </span>
                                    </div>
                                </td>
                                <td class="p-t-0 p-b-0">
                                    <input type="number" step="any" name="min[]" placeholder="Enter Value" class="form-control" style="width: 90px;" required="">
                                </td>

                                <td class="p-t-0 p-b-0">
                                    <input type="number" step="any" name="max[]" placeholder="Enter Value" class="form-control" style="width: 90px;" required="">
                                </td> 

                                <td class="p-t-0 p-b-0">
                                    <input type="number" step="any" name="default[]" placeholder="Enter Value" class="form-control" style="width: 78px;" required="">
                                </td>

                                <td class="p-t-0 p-b-0">
                                    <select class="form-control" name="type[]" required="">
                                        <option value="">Select Type</option>
                                        <option value="percent">%</option>
                                        <option value="flat">Flat</option>
                                    </select>
                                </td>
                                <td class="p-t-0 p-b-0">
                                    <input type="number" step="any" name="whitelable[]" placeholder="Enter Value" class="form-control form-control-sm" style="width: 78px;" required="">
                                </td>
                                <td class="p-t-0 p-b-0">
                                    <input type="number" step="any" name="md[]" placeholder="Enter Value" class="form-control form-control-sm" style="width: 78px;" required="">
                                </td>
                                <td class="p-t-0 p-b-0">
                                    <input type="number" step="any" name="distributor[]" placeholder="Enter Value" class="form-control" style="width: 78px;" required="">
                                </td>
                                <td class="p-t-0 p-b-0">
                                    <input type="number" step="any" name="retailer[]" placeholder="Enter Value" class="form-control" style="width: 78px;" required="">
                                </td>
                                <td class="text-center">
                                    <div class="form-check form-switch d-inline-block">
                                        <input class="form-check-input" type="checkbox" checked>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>        

            
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-sm btn-purple-gradient waves-light">Save Changes</button>
                <button type="button" data-bs-dismiss="modal" class="btn btn-sm btn-danger">Close</button> 
            </div>
            </form> 
        </div>
    </div>
</div>

<div class="modal fade" id="dmtMarkupModal"
    aria-labelledby="dmtMarkupModalModalLabel" tabindex="-1" aria-hidden="true"
    style="display: none;">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
              <h6 class="modal-title" id="staticBackdropLabel1">DMT Charge Modal
              </h6>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="commissionForm" action="{{ route('savedata') }}" method="post">
            <div class="modal-body">
              <div class="formerror"></div>
               @csrf
               <input type="hidden" name="posttype" value="commission">
               <input type="hidden" name="scheme_id" value=""> 
               <div class="table-responsive custom-scroll">
                    <table class="table text-nowrap table-bordered" id="datatables">
                        <thead>
                            <tr>
                                <th>Operator Name</th>
                                <th>
                                     <div class="d-flex align-items-center gap-2">
                                        <span class="rounded-circle bg-danger text-white d-inline-flex justify-content-center align-items-center"
                                              style="width:25px;height:25px;">
                                            <i class="bi bi-dash"></i>
                                        </span>
                                        <span class="rounded-circle bg-primary text-white d-inline-flex justify-content-center align-items-center"
                                              style="width:25px;height:25px;">
                                            <i class="bi bi-plus"></i>
                                        </span>

                                    </div>
                                </th>
                                <th>Min Slab</th>
                                <th>Max Slab</th>
                                <th>Default</th>
                                <th>Flat-%</th>
                                <th>WL</th>
                                <th>MDS</th>
                                <th>DS</th>
                                <th>RT</th>
                                <th>Update</th>
                            </tr>
                        </thead>

                        <tbody>
                        @foreach ($dmtOperator as $element)
                            <tr class="slab-row base-row" data-operator="{{ $element->id }}">
                                <td>
                                    <input type="hidden" name="slab[]" value="{{$element->id}}">
                                    {{$element->name}}
                                </td>
                                <td class="text-center">
                                    <div class="d-flex justify-content-center gap-2">
                                        <span class="rounded-circle bg-danger text-white d-inline-flex justify-content-center align-items-center remove-row"
                                              style="width:25px;height:25px;cursor:pointer;">
                                            <i class="bi bi-dash"></i>
                                        </span>

                                        <span class="rounded-circle bg-primary text-white d-inline-flex justify-content-center align-items-center add-row"
                                              data-operator="{{ $element->id }}"
                                              style="width:25px;height:25px;cursor:pointer;">
                                            <i class="bi bi-plus"></i>
                                        </span>
                                    </div>
                                </td>
                                <td class="p-t-0 p-b-0">
                                    <input type="number" step="any" name="min[]" placeholder="Enter Value" class="form-control" style="width: 90px;" required="">
                                </td>

                                <td class="p-t-0 p-b-0">
                                    <input type="number" step="any" name="max[]" placeholder="Enter Value" class="form-control" style="width: 90px;" required="">
                                </td> 

                                <td class="p-t-0 p-b-0">
                                    <input type="number" step="any" name="default[]" placeholder="Enter Value" class="form-control" style="width: 78px;" required="">
                                </td>

                                <td class="p-t-0 p-b-0">
                                    <select class="form-control" name="type[]" required="">
                                        <option value="">Select Type</option>
                                        <option value="percent">%</option>
                                        <option value="flat">Flat</option>
                                    </select>
                                </td>
                                <td class="p-t-0 p-b-0">
                                    <input type="number" step="any" name="whitelable[]" placeholder="Enter Value" class="form-control form-control-sm" style="width: 78px;" required="">
                                </td>
                                <td class="p-t-0 p-b-0">
                                    <input type="number" step="any" name="md[]" placeholder="Enter Value" class="form-control form-control-sm" style="width: 78px;" required="">
                                </td>
                                <td class="p-t-0 p-b-0">
                                    <input type="number" step="any" name="distributor[]" placeholder="Enter Value" class="form-control" style="width: 78px;" required="">
                                </td>
                                <td class="p-t-0 p-b-0">
                                    <input type="number" step="any" name="retailer[]" placeholder="Enter Value" class="form-control" style="width: 78px;" required="">
                                </td>
                                <td class="text-center">
                                    <div class="form-check form-switch d-inline-block">
                                        <input class="form-check-input" type="checkbox" checked>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>        

            
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-sm btn-purple-gradient waves-light">Save Changes</button>
                <button type="button" data-bs-dismiss="modal" class="btn btn-sm btn-danger">Close</button> 
            </div>
            </form> 
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script type="text/javascript">
  $(document).ready(function() {
    var url = "{{url('statement/fetchdata')}}/commisionlist/0";
    var onDraw = function() {

    };
    var options = [
        { "data" : "name",
        'className' : "notClick",
            render:function(data, type, full, meta){
                return `#` + (meta.row + 1);
            }
        },
        { "data" : "created_at" },
        { "data" : "name",
            render:function(data, type, full, meta){
               return `<span class="fw-semibold text-primary">`+full.name+`</span>`;
            }
        },

        { "data" : "username" },
        { "data" : "type",
            render:function(data, type, full, meta){
               return `<span class="badge bg-secondary">`+full.type+`</span>`;
            }
        },
        { "data" : "status",
            render:function(data, type, full, meta){
               if(full.status == '1'){
                   return `<span class="badge bg-success"><i class="fa fa-check-circle"></i> Actived</span>`;
               }else{
                   return `<span class="badge bg-danger text-dark"><i class="fa fa-clock"></i> Deactivated</span>`;

               }
                
            }
        },
        { "data" : "type",
            render:function(data, type, full, meta){
                let types = JSON.parse(full.type);

                let items = '';
                types.forEach(function (val) {
                    items += `<li>
                                    <a class="dropdown-item" href="javascript:void(0)" onclick="commission(`+full.id+`, '${val}','${val}MarkupModal')">
                                    <span class="badge bg-primary">${val}</span>
                                </a>
                            </li>`;
                });
               return `<div class="btn-group my-1">
                            <a href="javascript:void(0);" data-bs-toggle="dropdown" aria-expanded="false">
                                <span  class="btn btn-sm btn-primary-gradient waves-light dropdown-toggle dropdown-toggle-split">
                                <i class="fa fa-edit"></i> Edit
                            </a>

                            <ul class="dropdown-menu" style="top: auto !important; bottom: auto !important; left: auto !important; right: auto !important;">
                                 ${items}
                            </ul>
                        </div>`;
            }
        },
        
    ];

    datatableSetup(url, options, onDraw);

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('input[name="_token"]').val()
        }
    });

    $( "#planForm").validate({
        rules: {
            planname: {
                required: true
            }
        },
        messages: {
            planname: {
                required: "Please enter plan name",
            }
        },
        errorElement: "p",
        errorPlacement: function ( error, element ) {
            if ( element.prop("tagName").toLowerCase() === "select" ) {
                error.insertAfter( element.closest( ".form-group" ).find(".select2") );
            } else {
                error.insertAfter( element );
            }
        },
        submitHandler: function () {
            var form = $('#planForm');
            form.ajaxSubmit({
                dataType:'json',
                beforeSubmit:function(){
                    form.find('button:submit').button('loading');
                },
                complete: function () {
                    form.find('button:submit').button('reset');
                },
                success:function(data){
                    if(data.status == "success"){
                        form.closest('.modal').modal('hide');
                        msgalert('success', data.message);
                        form[0].reset();
                        $('#datatable').dataTable().api().ajax.reload();
                    }else if(data.status == "failed"){
                        msgalert('warning', data.message);
                    }else{
                         msgalert('warning', data.status);
                    }
                },
                error: function(errors) {
                    showError(errors, form);
                }
            });
        }
    });

  });

$(document).off('submit', '.commissionForm'); // 🔥 duplicate binding avoid

$(document).on('submit', '.commissionForm', function (e) {

    e.preventDefault();      // 🔥 reload STOP
    e.stopImmediatePropagation();

    var form = $(this);

    // safety check
    if (typeof form.ajaxSubmit !== 'function') {
        console.error('jquery.form.js missing');
        return false;
    }

    // old icons remove
    form.find('span.pull-right').remove();

    form.ajaxSubmit({
        dataType: 'json',

        beforeSubmit: function () {
            form.find('button[type="submit"]').prop('disabled', true);
        },

        success: function (data) {

            $.each(data.status, function (index, values) {

                let $row = form.find('input[value="' + index + '"]').closest('tr');

                if (values.id) {
                    $row.find('td:first')
                        .append('<span class="pull-right text-success ms-2"><i class="fa fa-check"></i></span>');
                } else {
                    $row.find('td:first')
                        .append('<span class="pull-right text-danger ms-2"><i class="fa fa-times"></i></span>');
                }
            });

            msgalert('success', 'Commission data successfully saved');
        },

        error: function (xhr) {
            showError(xhr, form);
        },

        complete: function () {
            form.find('button[type="submit"]').prop('disabled', false);
        }
    });

    return false; // 🔥 final kill
});

function commission(id, type, modal) {

    let $modal = $('#'+modal);
    let $tbody = $modal.find('tbody');

    // Purane appended rows hata do (base row rehne do)
    $tbody.find('.appended-row').remove();

    $.ajax({
        url: '{{ url("commission/get") }}/'+type+'/commission',
        type: 'POST',
        dataType: 'json',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        data: { scheme_id: id }
    })
    .done(function (response) {

        if (!response || response.length === 0) {
            // default rows hi dikhengi
            return;
        }

        // Operator-wise grouping
        let grouped = {};
        $.each(response, function (_, row) {
            if (!grouped[row.slab]) grouped[row.slab] = [];
            grouped[row.slab].push(row);
        });

        $.each(grouped, function (operatorId, slabs) {

            let $baseRow = $tbody.find('tr.base-row[data-operator="'+operatorId+'"]');

            if ($baseRow.length === 0) return;

            // ===== FIRST SLAB → BASE ROW =====
            fillRow($baseRow, slabs[0]);

            // ===== EXTRA SLABS → APPEND ROW =====
            for (let i = 1; i < slabs.length; i++) {
                let $newRow = $(newRowHtml(operatorId));
                fillRow($newRow, slabs[i]);
                $baseRow.after($newRow);
                $baseRow = $newRow;
            }
        });
    })
    .fail(function (err) {
        msgalert('warning', 'Oops', err.status+' '+err.statusText);
    });

    $modal.find('input[name="scheme_id"]').val(id);
    $modal.modal('show');
}

function fillRow($row, data) {
    $row.find('input[name="min[]"]').val(data.min);
    $row.find('input[name="max[]"]').val(data.max);
    $row.find('input[name="default[]"]').val(data.default ?? 0);
    $row.find('select[name="type[]"]').val(data.type);
    $row.find('input[name="whitelable[]"]').val(data.whitelable);
    $row.find('input[name="md[]"]').val(data.md);
    $row.find('input[name="distributor[]"]').val(data.distributor);
    $row.find('input[name="retailer[]"]').val(data.retailer);
}


$(document).on('click', '.add-row', function () {

    let operatorId = $(this).data('operator');

    // 🔥 current table scope
    let $tbody = $(this).closest('table').find('tbody');

    let $lastRow = $tbody.find('tr[data-operator="' + operatorId + '"]:last');

    if (!$lastRow.length) {
        console.error('Row not found for operator:', operatorId);
        return;
    }

    $lastRow.after(newRowHtml(operatorId));
});


/* REMOVE ROW (minimum 1 row required per operator) */
$(document).on('click', '.remove-row', function () {

    let $row = $(this).closest('tr');
    let operatorId = $row.data('operator');
    let $tbody = $row.closest('tbody');

    let rowCount = $tbody.find('tr[data-operator="' + operatorId + '"]').length;

    if (rowCount > 1) {
        $row.remove();
    }
});


/* NEW ROW HTML */
function newRowHtml(operatorId) {
    return `
    <tr class="slab-row appended-row" data-operator="${operatorId}">
        <td>
            <input type="hidden" name="slab[]" value="${operatorId}">
            <span class="text-muted">--</span>
        </td>

        <td class="text-center">
            <div class="d-flex gap-2 justify-content-center">
                <span class="remove-row rounded-circle bg-danger text-white d-flex align-items-center justify-content-center"
                      style="width:25px;height:25px;cursor:pointer;">
                    <i class="bi bi-dash"></i>
                </span>

                <span class="add-row rounded-circle bg-primary text-white d-flex align-items-center justify-content-center"
                      data-operator="${operatorId}"
                      style="width:25px;height:25px;cursor:pointer;">
                    <i class="bi bi-plus"></i>
                </span>
            </div>
        </td>

        <td><input type="number" name="min[]" class="form-control" required></td>
        <td><input type="number" name="max[]" class="form-control" required></td>
        <td><input type="number" name="default[]" class="form-control" required></td>

        <td>
            <select name="type[]" class="form-control" required>
                <option value="">Type</option>
                <option value="percent">%</option>
                <option value="flat">Flat</option>
            </select>
        </td>

        <td><input type="number" name="whitelable[]" class="form-control" required></td>
        <td><input type="number" name="md[]" class="form-control" required></td>
        <td><input type="number" name="distributor[]" class="form-control" required></td>
        <td><input type="number" name="retailer[]" class="form-control" required></td>

        <td class="text-center">
            <input type="checkbox" class="form-check-input" checked>
        </td>
    </tr>
    `;
}
</script>
@endsection