@extends("admin.template.layout")
@section('header')
    <style>
    .input_span{
      display: none;
    }
    .input_commission{
      width: 50%;
    }
    </style>
@endsection

@section('content')
                    @php
                    $from = null;
                    $to = null;
                    if(request()->get('from')){
                      $from = request()->get('from');
                    }
                    if(request()->get('to')){
                      $to = request()->get('to');
                    }
                    @endphp
<div class="container-xxl flex-grow-1 container-p-y">
  
              <!-- Ajax Sourced Server-side -->
              <div class="card">
                <div class="card-header justify-content-between">
                    <h5 class="mb-0">{{$mode ?? $page_heading}}</h5>
                    <form class="form-inline float-right">
                      <div class="form-group mb-2">
                        <label>From</label>
                        <input type = "date" class = "form-control-plaintext" name = "from" value = "{{$from ?? ''}}" max = "{{ date('Y-m-d') }}">
                      </div>
                      <div class="form-group mb-2">
                        <label>To</label>
                         <input type = "date" class = "form-control-plaintext" name = "to" value = "{{$to ?? ''}}" max = "{{ date('Y-m-d') }}">
                      </div>
                      <div class="form-group mb-2">   
                         <button type = "button" onclic class = "main-btn btn primary-btn mt-4" id="filterButton">
                          Filter
                         </button>
                         @if(request()->has('from') || request()->has('to'))
                          <a href = "{{ route('earnings.list') }}" class = "btn btn-seondary  mt-4"> Clear </a>
                         @endif
                         
                      </div>    
                    </form>
                </div>
                <div class="card-body">
                  <div class="card-datatable text-nowrap">
                    <div class="table-responsive">
                      @if(request()->get('from') && request()->get('to'))

                      <table class="datatables-ajax1 table table-condensed" id="earning_list" data-role="ui-datatable1" data-src="{{route('bookings/get_earning_list',['from' => $from,'to' => $to])}}" >
                      @else
                        <table class="datatables-ajax1 table table-condensed" id="earning_list" data-role="ui-datatable1" data-src="{{route('getearningList',['from' => $from,'to' => $to])}}" >
                      @endif
                        <thead>
                            <tr>
                                <th class="pt-0" data-colname="id">#</th>
                                <th class="pt-0" data-colname="booking_number"> Request#</th>
                                <th class="pt-0" data-colname="customer_name"> Customer Name</th>
                                <th class="pt-0" data-colname="qouted_amount"> Company Quote</th>
                                <th class="pt-0" data-colname="earned_amount"> Earned Amount</th>
                                <th class="pt-0" data-colname="comission_amount"> Commission %</th>
                                <th class="pt-0" data-colname="booking_status"> Request Status</th>
                                <th class="pt-0" data-colname="created_at"> Created At</th>
                                <th class="pt-0" data-colname="action">Action</th>
                            </tr>
                          </thead>
                          <tbody>
                          </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
              <!--/ Ajax Sourced Server-side -->






            </div>
@stop
@section('script')
<!-- Include jQuery (required by DataTables) -->


<!-- Include the DataTables library -->
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<!-- Include the DataTables CSS file -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">


<script>
    $(document).ready(function () {
         $('#filterButton').click(function() {
             var fromDate = $('[name="from"]').val();
            var toDate = $('[name="to"]').val();
    
            // Check if the input fields are empty
            if (fromDate === '' || toDate === '') {
                alert('Please select both from and to dates.');
            } else {
                // Call the initializeDataTable function
                initializeDataTable();
            }
        });
        
          App.initTreeView();
        // Function to initialize DataTable
        function initializeDataTable() {
            
            $('[data-role="ui-datatable1"]').each(function () {
                var dataTable = $(this);
                var dataTableSrc = dataTable.data('src');
                var csrfToken = $('meta[name="csrf-token"]').attr('content');
                var tableId = dataTable.attr('id');
                var fromDate = $('[name="from"]').val();
                var toDate = $('[name="to"]').val();
                 var requestData = {
                    from: fromDate,
                    to: toDate
                };
                var urlWithParams = dataTableSrc + '?from=' + fromDate + '&to=' + toDate;
                
                 if ($.fn.DataTable.isDataTable(dataTable)) {
                    dataTable.DataTable().destroy();
                }
                
                 dataTable.DataTable().destroy();
               $.ajax({
                    url: urlWithParams,
                    type: 'POST',
                    data: requestData,
                    dataType: 'json', // Assuming the response is JSON
                    headers: {
                        'X-CSRF-TOKEN': csrfToken
                    },
                    success: function(response) {
                        console.log(response);
                        
                         if (response && Array.isArray(response.data)) {
                            var dataTableInstance = $('#earning_list').DataTable();
                                dataTableInstance.clear().rows.add(response.data).draw();
                        } else {
                            console.error('Response data is missing or not an array:', response);
                        }
                        console.log(response);
                    },
                    error: function(xhr, error, thrown) {
                        console.log('Ajax request error:');
                        console.log(xhr);
                        console.log(error);
                        console.log(thrown);
                    }
                });
            });
        }

        // Call the function to initialize DataTable
        initializeDataTable();
    });
</script>

@stop