@extends('layouts.admin')
@section('content')
<div class="card">
    <div class="card-header">
        Payments list
    </div>

    <div class="card-body">
        <div class="row" style="margin-bottom: 10px;">
            <div class="col-md-3">
                <label for="filterStartDate" class="form-label">From date</label>
                <input type="date" id="filterStartDate" class="form-control" />
            </div>
            <div class="col-md-3">
                <label for="filterEndDate" class="form-label">To date</label>
                <input type="date" id="filterEndDate" class="form-control" />
            </div>
            <div class="col-md-3" style="display:flex; align-items:flex-end; gap:8px;">
                <button id="applyDateFilter" class="btn btn-primary">Apply</button>
                <button id="resetDateFilter" class="btn btn-secondary">Reset</button>
            </div>
        </div>
        <table class="table table-bordered table-striped table-hover ajaxTable datatable datatable-Payment">
            <thead>
                <tr>
                    <th width="10">Select</th>
                    <th>User</th>
                    <th>Tower</th>
                    <th>Unit</th>
                    <th>Invoice</th>
                    <th>Amount</th>
                    <th>Type</th>
                    <th>Date</th>
                    <th>Actions</th>
                </tr>
            </thead>
        </table>
    </div>
</div>
@endsection

@section('scripts')
@parent
<script>
$(function () {
    const table = $('.datatable-Payment').DataTable({
        processing: true,
        retrieve: true,
        aaSorting: [],
        ajax: {
            url: "{{ route('admin.payments.index') }}",
            data: function (d) {
                d.start_date = $('#filterStartDate').val();
                d.end_date = $('#filterEndDate').val();
            }
        },
        columns: [
            { data: 'placeholder', name: 'placeholder' },
            { data: 'user_name', name: 'invoice.user.name' },
            { data: 'tower_name', name: 'invoice.unit.property.name' },
            { data: 'unit_name', name: 'invoice.unit.name' },
            { data: 'invoice_id', name: 'invoice_id' },
            { data: 'amount', name: 'amount' },
            { data: 'payment_type', name: 'payment_type' },
            { data: 'payment_date', name: 'payment_date' },
            { data: 'actions', name: 'actions', orderable: false, searchable: false }
        ],
        order: [[7, 'desc']],
        pageLength: 100,
    });

    $('#applyDateFilter').on('click', function () {
        table.ajax.reload();
    });

    $('#resetDateFilter').on('click', function () {
        $('#filterStartDate').val('');
        $('#filterEndDate').val('');
        table.ajax.reload();
    });
});
</script>
@endsection