@extends("admin.template.layout")
@section('header')
    <style>
    .input_span{
      display: none;
    }
    .input_commission{
      width: 50%;
    }
    .buttons-excel{
      margin: 5px;
      padding: 10px;
      border-radius: 10px;
      transition: all 0.3s ease-in-out;
      background: #2596be;
      color: white;      
    }

    .buttons-excel:hover {
      filter: brightness(130%);
    }

    div.dataTables_wrapper div.dataTables_filter input {
      width: 100%; 
    }

   
   

    </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">
                    <h5 class="mb-0 mt-3">{{$mode ?? $page_heading}}</h5>
                    <form method="get" action='' class="w-100 mt-3">
                <div id="column-filter_filter" class="dataTables_filter">
                    <div class="row w-100 align-items-center">
                        <div class="col-lg-3 mb-3">
                             <label>From Date:
                                <input type="date" name="from_date" class="form-control form-control-sm" placeholder=""
                                    aria-controls="column-filter" value="{{$from_date}}">
                            </label>

                        </div>
                        <div class="col-lg-3 mb-3">
                             <label>To Date:
                                <input type="date" name="to_date" class="form-control form-control-sm" placeholder=""
                                    aria-controls="column-filter" value="{{$to_date}}">
                            </label>
                        </div>
                        
                       <input type="hidden" name="sender_id" class="form-control form-control-sm"
                            value="{{ request('sender_id') }}">
                        <div class="col-lg-2 mb-3">
                             <button type="submit" class="btn btn-primary primary-btn w-100" style="color:#fff !important">Submit</button>
                        </div>
                        <div class="col-lg-2 mb-3">
                              <button type="submit" name="excel" value="Export XLSX" class="btn btn-primary primary-btn w-100" style="color:#fff !important">Export XLSX</button>
                        </div>
                        <div class="col-lg-2 mb-3">
                             <a href="{{route('reports.jobs_in_transit')}}" class="btn btn-primary primary-btn w-100" style="color:#fff !important">Clear</a>
                        </div>
                    </div>
                    
                    
                   
                    <!-- <input type="submit" name="excel" value="Export Pdf" class="btn btn-primary"> -->
                    
                </div>
            </form>
                </div>
                <div class="card-body">
                  <div class="card-datatable text-nowrap">
                    <div class="table-responsive">
                
                      <table class="table table-condensed" id = "reports"  data-searching = "true">  
                        <thead>
                            <tr>
                                <th >#</th>
                                <th> Booking#</th>
                                <th> Customer Name</th>
                                <th> Driver Name</th>
                                
                                <th> Quoted Amount</th>
                                <!--<th> Total Amount</th>-->
                                <!-- <th> Commission %</th> -->
                                <th> Booking Status</th>
                                <th> Created At</th>
                            </tr>
                          </thead>
                          <tbody>