@extends('layout.super-admin-app')

@section('title', 'Super Admin - Payment Report')

@push('header_script')
    <link rel="stylesheet" href="{{ asset('theme/assets/vendor/daterange/daterange.css') }}">
    <link rel="stylesheet" href="{{ asset('theme/assets/vendor/datatables/dataTables.bs5.css') }}" />
    <link rel="stylesheet" href="{{ asset('theme/assets/vendor/datatables/dataTables.bs5-custom.css') }}" />
    <link rel="stylesheet" href="{{ asset('theme/assets/vendor/datatables/buttons/dataTables.bs5-custom.css') }}">
    <style>
        .kpi-card {
            border: 1px solid #e9ecef;
            border-radius: 10px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.06);
            transition: transform 0.2s;
        }
        .kpi-card:hover {
            transform: translateY(-2px);
        }
        .kpi-icon {
            width: 46px;
            height: 46px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
        }
        .table td {
            vertical-align: middle;
        }
    </style>
@endpush

@section('content')
<div class="app-hero-header d-flex align-items-center">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="{{ route('super-admin.dashboard') }}"><i class="ri-home-8-line"></i> Dashboard</a>
        </li>
        <li class="breadcrumb-item">
            <a href="javascript:void(0);">Reports</a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">
            Payment Report
        </li>
    </ol>
</div>

<div class="app-body">
    <!-- Top KPI Cards -->
    <div class="row gx-3 mb-3">
        <div class="col-xl-3 col-sm-6 col-12">
            <div class="card kpi-card bg-white p-3">
                <div class="d-flex align-items-center">
                    <div class="kpi-icon bg-primary-subtle text-primary me-3">
                        <i class="ri-receipt-line"></i>
                    </div>
                    <div>
                        <span class="text-muted small text-uppercase fw-semibold">Total Payments</span>
                        <h4 class="mb-0 fw-bold text-dark" id="kpiTxnCount">0</h4>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-sm-6 col-12">
            <div class="card kpi-card bg-white p-3">
                <div class="d-flex align-items-center">
                    <div class="kpi-icon bg-info-subtle text-info me-3">
                        <i class="ri-bill-line"></i>
                    </div>
                    <div>
                        <span class="text-muted small text-uppercase fw-semibold">Total Billed</span>
                        <h4 class="mb-0 fw-bold text-info" id="kpiBilledAmount">₹0.00</h4>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-sm-6 col-12">
            <div class="card kpi-card bg-white p-3">
                <div class="d-flex align-items-center">
                    <div class="kpi-icon bg-success-subtle text-success me-3">
                        <i class="ri-wallet-3-line"></i>
                    </div>
                    <div>
                        <span class="text-muted small text-uppercase fw-semibold">Total Paid Amount</span>
                        <h4 class="mb-0 fw-bold text-success" id="kpiPaidAmount">₹0.00</h4>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-sm-6 col-12">
            <div class="card kpi-card bg-white p-3">
                <div class="d-flex align-items-center">
                    <div class="kpi-icon bg-warning-subtle text-warning me-3">
                        <i class="ri-time-line"></i>
                    </div>
                    <div>
                        <span class="text-muted small text-uppercase fw-semibold">Pending Amount</span>
                        <h4 class="mb-0 fw-bold text-warning" id="kpiPendingAmount">₹0.00</h4>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filter Row (Matching Project Report Pattern) -->
    <div class="row gx-3">
        <div class="col-sm-2">
            <label class="form-label" for="date_period">Period</label>
            <select id="date_period" class="form-select">
                <option value="all" selected>All</option>
                <option value="today">Today</option>
                <option value="yesterday">Yesterday</option>
                <option value="last_7">Last 7 Days</option>
                <option value="last_30">Last 30 Days</option>
                <option value="this_month">This Month</option>
                <option value="last_month">Last Month</option>
                <option value="custom">Custom Range</option>
            </select>
        </div>
        <div class="col-sm-2">
            <label class="form-label" for="from_date">From Date</label>
            <input type="text" id="from_date" class="form-control datepicker" placeholder="DD-MM-YYYY">
        </div>
        <div class="col-sm-2">
            <label class="form-label" for="to_date">To Date</label>
            <input type="text" id="to_date" class="form-control datepicker" placeholder="DD-MM-YYYY">
        </div>
        <div class="col-sm-3">
            <label class="form-label" for="tenant_id">Filter by Customer</label>
            <select id="tenant_id" class="form-control select2">
                <option value="">-- All Customers --</option>
                @foreach($tenants as $tenant)
                    <option value="{{ $tenant->id }}">{{ $tenant->company_name }} ({{ $tenant->company_code }})</option>
                @endforeach
            </select>
        </div>
        <div class="col-sm-1">
            <label class="form-label" for="payment_status">Status</label>
            <select id="payment_status" class="form-select">
                <option value="">All</option>
                <option value="Paid">Paid</option>
                <option value="Pending">Pending</option>
            </select>
        </div>
        <div class="col-sm-2">
            <label class="form-label" for="payment_mode">Mode</label>
            <select id="payment_mode" class="form-select">
                <option value="">-- All Modes --</option>
                <option value="Cash">Cash</option>
                <option value="UPI">UPI</option>
                <option value="Card">Card</option>
                <option value="Net Banking">Net Banking</option>
                <option value="Cheque">Cheque</option>
            </select>
        </div>

        <!-- Data Table Container -->
        <div class="col-sm-12 mt-3">
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="paymentsTable" class="table table-striped table-bordered align-middle m-0" style="width: 100%;">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Payment Date</th>
                                    <th>Invoice #</th>
                                    <th>Customer</th>
                                    <th>Plan Name</th>
                                    <th>Total Billed (₹)</th>
                                    <th>Payment Mode</th>
                                    <th>Transaction Ref</th>
                                    <th>Paid Amount (₹)</th>
                                    <th>Status</th>
                                    <th>Remark</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('footer_script')
    <script src="{{ asset('theme/assets/vendor/daterange/daterange.js') }}"></script>
    <script src="{{ asset('theme/assets/vendor/datatables/dataTables.min.js') }}"></script>
    <script src="{{ asset('theme/assets/vendor/datatables/dataTables.bootstrap.min.js') }}"></script>
    <script src="{{ asset('theme/assets/vendor/datatables/buttons/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('theme/assets/vendor/datatables/buttons/jszip.min.js') }}"></script>
    <script src="{{ asset('theme/assets/vendor/datatables/buttons/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('theme/assets/vendor/datatables/buttons/buttons.print.min.js') }}"></script>

    <script>
        $(document).ready(function() {
            $(".select2").select2();

            $('#from_date, #to_date').daterangepicker({
                singleDatePicker: true,
                showDropdowns: true,
                autoUpdateInput: false,
                locale: {
                    format: 'DD-MM-YYYY'
                }
            });

            $('#from_date, #to_date').on('apply.daterangepicker', function(ev, picker) {
                $(this).val(picker.startDate.format('DD-MM-YYYY'));
                $('#date_period').val('custom');
                table.draw();
            });

            $('#date_period').on('change', function() {
                var val = $(this).val();
                var start, end;
                
                switch(val) {
                    case 'today':
                        start = moment();
                        end = moment();
                        break;
                    case 'yesterday':
                        start = moment().subtract(1, 'days');
                        end = moment().subtract(1, 'days');
                        break;
                    case 'last_7':
                        start = moment().subtract(6, 'days');
                        end = moment();
                        break;
                    case 'last_30':
                        start = moment().subtract(29, 'days');
                        end = moment();
                        break;
                    case 'this_month':
                        start = moment().startOf('month');
                        end = moment().endOf('month');
                        break;
                    case 'last_month':
                        start = moment().subtract(1, 'month').startOf('month');
                        end = moment().subtract(1, 'month').endOf('month');
                        break;
                    case 'all':
                        $('#from_date').val('');
                        $('#to_date').val('');
                        table.draw();
                        return;
                    default:
                        return;
                }
                
                if (start && end) {
                    if ($('#from_date').data('daterangepicker')) {
                        $('#from_date').data('daterangepicker').setStartDate(start);
                        $('#from_date').data('daterangepicker').setEndDate(start);
                    }
                    $('#from_date').val(start.format('DD-MM-YYYY'));

                    if ($('#to_date').data('daterangepicker')) {
                        $('#to_date').data('daterangepicker').setStartDate(end);
                        $('#to_date').data('daterangepicker').setEndDate(end);
                    }
                    $('#to_date').val(end.format('DD-MM-YYYY'));
                }
                
                table.draw();
            });

            $('#tenant_id, #payment_status, #payment_mode').on('change', function() {
                table.draw();
            });

            var table = $('#paymentsTable').DataTable({
                processing: true,
                serverSide: true,
                responsive: true,
                dom: 'Bfrtip',
                buttons: [
                    { extend: 'excel', text: '<i class="ri-file-excel-line me-1"></i> Excel', className: 'btn btn-sm btn-success' },
                    { extend: 'print', text: '<i class="ri-printer-line me-1"></i> Print', className: 'btn btn-sm btn-secondary' }
                ],
                ajax: {
                    url: '{{ route("super-admin.reports.payments.getData") }}',
                    data: function(d) {
                        d.from_date = $('#from_date').val() ? moment($('#from_date').val(), "DD-MM-YYYY").format("YYYY-MM-DD") : '';
                        d.to_date = $('#to_date').val() ? moment($('#to_date').val(), "DD-MM-YYYY").format("YYYY-MM-DD") : '';
                        d.tenant_id = $('#tenant_id').val();
                        d.payment_status = $('#payment_status').val();
                        d.payment_mode = $('#payment_mode').val();
                    }
                },
                columns: [
                    { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
                    { data: 'payment_date', name: 'payment_date' },
                    { data: 'invoice_no', name: 'invoice_no' },
                    { data: 'customer', name: 'tenant.company_name' },
                    { data: 'plan_name', name: 'plan_name' },
                    { data: 'final_amount', name: 'final_amount' },
                    { data: 'payment_mode', name: 'payment_mode' },
                    { data: 'payment_reference', name: 'payment_reference' },
                    { data: 'paid_amount', name: 'paid_amount' },
                    { data: 'payment_status', name: 'payment_status' },
                    { data: 'remark', name: 'remark' }
                ],
                drawCallback: function(settings) {
                    var json = settings.json;
                    if (json) {
                        $('#kpiTxnCount').text(json.totalTransactions || '0');
                        $('#kpiBilledAmount').text(json.totalBilledAmount || '₹0.00');
                        $('#kpiPaidAmount').text(json.totalPaidAmount || '₹0.00');
                        $('#kpiPendingAmount').text(json.totalPendingAmount || '₹0.00');
                    }
                }
            });
        });
    </script>
@endpush