@extends('admin.layout')

@section('content')

<link rel="stylesheet" href="{{ asset('assets/css/table_filter.css') }}">
<link rel="stylesheet" href="https://cdn.datatables.net/2.0.8/css/dataTables.dataTables.min.css">

<div class="card p-2">
    <h5 class="fw-bold mb-2 text-center">Customer List</h5>

    <div class="row mb-3 align-items-center">
        <div class="col-auto mb-3">
            <select id="pageLength" class="form-select">
                <option value="10">10</option>
                <option value="25">25</option>
                <option value="50">50</option>
                <option value="100">100</option>
                <option value="All">All</option>
            </select>
        </div>
        <div class="col-lg-7 col-12 mb-3">

            <div class="search-cluster w-100">
                <div class="search-field">
                    <i class="ti tabler-hash"></i>
                    <input type="text" id="sheetSearch" placeholder="Name" class="w-100">
                </div>
            </div>
        </div>
        <div class="col-lg-1 col-12 mb-3">

            <button class="btn btn-secondary w-100" id="resetBtn" type="reset">
                <span>Reset</span>
            </button>
        </div>

        <div class="col-lg-1 col-12 mb-3">

            <button class="btn btn-label-secondary w-100">Export</button>

        </div>
    </div>

    <div class="table-responsive pt-0 pb-2">
        <table id="patientsTable" class="table table-bordered">
            <thead>
                <tr>
                    <th>S.No</th>
                    <th>Vehicle ID</th>
                    <th>Customer ID</th>
                    <th>Amount</th>
                    <th>Payment Date</th>
                    <th>Receipt</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.datatables.net/2.0.8/js/dataTables.min.js"></script>

<script>
    $(document).ready(function() {

        var table = $('#patientsTable').DataTable({

            processing: true,
            serverSide: true,

            ajax: {
                url: "{{ route('payment_history_data', [$vehicle, $customer]) }}",

                dataSrc: function(json) {
                    console.log("Response:", json);
                    return json.data;
                },

                error: function(xhr, error, thrown) {
                    console.log("Ajax Error:");
                    console.log(xhr.responseText);
                }
            },
            info:false,
            paging:false,
            searching: false,

            columns: [
    {
        data: 'DT_RowIndex',
        className: 'text-center'
    },
    {
        data: 'vehicle_id',
        className: 'text-center'
    },
    {
        data: 'customer_id',
        className: 'text-center'
    },
    {
        data: 'amount',
        className: 'text-center'
    },
    {
        data: 'payment_date',
        className: 'text-center'
    },
    {
        data: 'receipt',
        className: 'text-center',
        render: function(data) {
            if (data) {
                return `<a href="/receipts/${data}" target="_blank">View Receipt</a>`;
            }
            return 'No Receipt';
        }
    }
]

        });

        $('#pageLength').on('change', function() {
            var value = $(this).val();

            if (value === "All") {
                table.page.len(-1).draw();
            } else {
                table.page.len(parseInt(value)).draw();
            }
        });

    });
</script>


@endsection