@extends('admin.layouts.adminapp')

@section('content')
<div class="page-wrapper">
<div class="page-content">

<div class="card">
<div class="card-header bg-primary text-white">
    <h6 class="mb-0">Property Tax Transactions</h6>
</div>

<div class="card-body">

{{-- SUMMARY --}}
<div class="row mb-3">
    <div class="col-md-4">
        <div class="alert alert-success">
            <b>Total Collection :</b> ₹<span id="totalCollection">0</span>
        </div>
    </div>
    <div class="col-md-4">
        <div class="alert alert-info">
            <b>Total Transactions :</b> <span id="totalCount">0</span>
        </div>
    </div>
</div>

{{-- FILTERS --}}
<div class="row mb-3">
    <div class="col-md-2">
        <select id="no_of_row" class="form-select">
            <option value="15">15</option>
            <option value="50">50</option>
            <option value="100">100</option>
        </select>
    </div>

    <div class="col-md-2">
        <select id="wardNo" class="form-select">
            <option value="">All Ward</option>
            @foreach(wardlists() as $ward)
                <option value="{{ $ward->id }}">{{ $ward->name }}</option>
            @endforeach
        </select>
    </div>

    <div class="col-md-2">
        <input type="date" id="startDate" class="form-control">
    </div>

    <div class="col-md-2">
        <input type="date" id="endDate" class="form-control">
    </div>

    <div class="col-md-2">
        <input type="text" id="searchText" class="form-control"
               placeholder="Receipt / Owner / Txn">
    </div>

    <div class="col-md-2 d-flex gap-1">
        <button class="btn btn-primary" onclick="loadTransactions(1)">Search</button>
        <button class="btn btn-warning" onclick="exportExcel()">Excel</button>
    </div>
</div>

{{-- TABLE --}}
<div class="table-responsive">
<table class="table table-bordered">
<thead class="table-warning">
<tr>
    <th>SN</th>
    <th>Receipt</th>
    <th>Property ID</th>
    <th>Owner</th>
    <th>Ward</th>
    <th>Amount</th>
    <th>Method</th>
    <th>Status</th>
    <th>Paid At</th>
    <th>Action</th>
</tr>
</thead>
<tbody id="transactionTableBody"></tbody>
</table>
</div>

<div id="paginationLinks" class="mt-2"></div>

</div>
</div>

{{-- MODAL --}}
<div class="modal fade" id="paymentModal" tabindex="-1">
<div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">

<div class="modal-header bg-primary text-white">
    <h5 class="modal-title">Payment Details</h5>
    <button class="btn-close" data-bs-dismiss="modal"></button>
</div>

<div class="modal-body">
    <table class="table table-bordered table-sm">
        <tbody id="paymentModalBody"></tbody>
    </table>
</div>

<div class="modal-footer">
    <a id="printReceiptBtn" target="_blank" class="btn btn-success">
        Print Receipt
    </a>
    <button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>

</div>
</div>
</div>

</div>
</div>
@endsection

@section('script')
<script>

loadTransactions(1);

$('#wardNo, #no_of_row').on('change', () => loadTransactions(1));
$('#searchText').on('keyup', () => loadTransactions(1));

function loadTransactions(page) {

    let params = {
        page: page,
        perPage: $('#no_of_row').val(),
        wardNo: $('#wardNo').val(),
        startDate: $('#startDate').val(),
        endDate: $('#endDate').val(),
        search: $('#searchText').val()
    };

    $.get('{{ route("properties.transaction-data") }}', params, function (res) {

        let tbody = $('#transactionTableBody').empty();

        if (!res.status) {
            tbody.append(`<tr><td colspan="10">No data</td></tr>`);
            return;
        }

        $('#totalCollection').text(res.summary.total_collection);
        $('#totalCount').text(res.summary.total_count);

        let i = (res.meta.current_page - 1) * res.meta.per_page + 1;

        $.each(res.data, function (_, row) {

            let badge =
                row.status === 'paid' ? 'success' :
                row.status === 'failed' ? 'danger' : 'warning';

            tbody.append(`
            <tr>
                <td>${i++}</td>
                <td>${row.receipt}</td>
                <td>${row.property?.nagarpalikaId ?? '-'}</td>
                <td>${row.owner_name ?? '-'}</td>
                <td>${row.ward_name ?? '-'}</td>
                <td>₹${row.amount}</td>
                <td>${row.payment_method}</td>
                <td><span class="badge bg-${badge}">${row.status}</span></td>
                <td>${formatDate(row.paid_at)}</td>
                <td>
                    <button class="btn btn-sm btn-primary"
                        onclick='openPaymentModal(${JSON.stringify(row)})'>
                        View
                    </button>
                    <a id="printReceiptBtn" target="_blank" href="/admin/properties/cash-desk-propary-tax-info-and-pay/receipt/${row.id}" class="btn btn-success">
                        Print Receipt
                    </a>
                </td>
            </tr>`);
        });

        renderPagination(res.meta);
    });
}

function renderPagination(meta) {

    let html = `Page ${meta.current_page} of ${meta.last_page} `;

    if (meta.current_page > 1) {
        html += `<button class="btn btn-sm btn-secondary me-1"
            onclick="loadTransactions(${meta.current_page - 1})">Prev</button>`;
    }
    if (meta.current_page < meta.last_page) {
        html += `<button class="btn btn-sm btn-secondary"
            onclick="loadTransactions(${meta.current_page + 1})">Next</button>`;
    }

    $('#paginationLinks').html(html);
}

function openPaymentModal(d) {

    $('#printReceiptBtn').attr('href', '/properties/propary-tax-pay/receipt/' + d.id);

    $('#paymentModalBody').html(`
        <tr><th>Receipt</th><td>${d.receipt}</td></tr>
        <tr><th>Transaction ID</th><td>${d.transaction_id}</td></tr>
        <tr><th>Gateway Txn</th><td>${d.gateway_txn_id ?? '-'}</td></tr>
        <tr><th>Base Amount</th><td>₹${d.base_amount}</td></tr>
        <tr><th>Final Amount</th><td>₹${d.final_amount}</td></tr>
        <tr><th>Penalty</th><td>₹${d.penalty}</td></tr>
        <tr><th>Status</th>
            <td><span class="badge bg-success">${d.status}</span></td></tr>
        <tr><th>Paid At</th><td>${formatDate(d.paid_at)}</td></tr>
    `);

    new bootstrap.Modal('#paymentModal').show();
}

function formatDate(dt) {
    if (!dt) return '-';
    let d = new Date(dt);
    return `${String(d.getDate()).padStart(2,'0')}-${String(d.getMonth()+1).padStart(2,'0')}-${d.getFullYear()}`;
}

function exportExcel() {

    let params = $.param({
        perPage: 5000,
        wardNo: $('#wardNo').val(),
        startDate: $('#startDate').val(),
        endDate: $('#endDate').val(),
        search: $('#searchText').val(),
        export: 1
    });

    window.location = '{{ route("properties.transaction-data") }}?' + params;
}

</script>
@endsection