@extends('template.app')

@section('title')
Booking Report
@endsection

@section('styles')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<style>
  .dataTables_scrollBody {
    max-height: 400px !important;
    overflow-y: scroll !important;
  }
</style>
@endsection

@section('content')
<div class="container-fluid">
  <div class="card p-3">
    <div class="row mb-3">
      <div class="col-md-8">
        <input type="text" id="vinFilter" class="form-control" placeholder="Enter VIN Number">
      </div>
      <div class="col-md-4">
        <button type="button" id="filterBtn" class="btn btn-primary">Submit</button>
      </div>
    </div>

    <div class="table-responsive">
      <table class="table table-bordered" id="cashdata-table" style="width: 100%;">
        <thead>
          <tr>
            <th>Date</th>
            <th>Location</th>
            <th>KEC Name</th>
            <th>Team Name</th>
            <th>Customer Name</th>
            <th>Model Name</th>
            <th>Variant</th>
            <th>Exterior Color</th>
            <th>Mfg Year</th>
            <th>Vin Number</th>
            <th>On Road Price(A)</th>
            <th>Less Discount(B)</th>
            <th>After Disc On Road Price (A-B = C)</th>
            <th>Booking Amount</th>
            <th>DP Amount</th>
            <th>Fin. Disbusement Amt</th>
            <th>Exchange</th>
            <th>Other One</th>
            <th>Other Two</th>
            <th>Total(D)</th>
            <th>Net Receivable Amt. (C-D)</th>
          </tr>
        </thead>
      </table>
    </div>
  </div>
</div>
@endsection

@section('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/scroller/2.1.1/js/dataTables.scroller.min.js"></script>

<script>
  $(document).ready(function () {
    let table = $('#cashdata-table').DataTable({
      processing: true,
      serverSide: true,
      scrollY: 600,
      scrollX: true,
      scrollCollapse: true,
      scroller: true,
      ajax: {
        url: "{{ route('BookingReportFetch') }}",
        data: function (d) {
          d.vin = $('#vinFilter').val();
        }
      },
      columns: [
        { data: 'booking_date', name: 'booking_date' },
        { data: 'branch_name', name: 'branch_name' },
        { data: 'kec_name', name: 'kec_name' },
        { data: 'team_name', name: 'team_name' },
        { data: 'customer_name', name: 'customer_name' },
        { data: 'product', name: 'product' },
        { data: 'car_varient_name', name: 'car_varient_name' },
        { data: 'exteriorcolor', name: 'exteriorcolor' },
        { data: 'manufacturing_year', name: 'manufacturing_year' },
        { data: 'vin_number', name: 'vin_number' },
        { data: 'on_road_price', name: 'on_road_price' },
        { data: 'finance_discount', name: 'finance_discount' },
        { data: 'after_discount_on_road_price', name: 'after_discount_on_road_price'},
        { data: 'booking_amount', name: 'booking_amount'},
        { data: 'dp_amount', name: 'dp_amount'}, 
        { data: 'net_disbusment', name: 'net_disbusment'},
        { data: 'total_exchange_amount', name: 'total_exchange_amount'},
        { data: 'other_details_1', name: 'other_details_1'},
        { data: 'other_details_2', name: 'other_details_2'},
        { data: 'total_received_amount', name: 'total_received_amount'},
        { data: 'balance_amount', name: 'balance_amount' },
      ]
    });

    $('#filterBtn').on('click', function () {
      table.draw();
    });
  });
</script>
@endsection