@extends('layouts.master')
@section('title', 'Total Fees Report')

@section('styles')
<style>
.btn-back {
    text-decoration: none;
    color: #1AB9D9;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    padding: 5px 15px;
    border-radius: 6px;
    transition: all 0.3s ease;
}
.btn-back:hover { background-color: rgba(26, 185, 217, 0.1); }
.metric-card {
    padding: 1.25rem;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.metric-title {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: #6b7280;
    letter-spacing: 0.04em;
    font-weight: 700;
}
.metric-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: #111827;
}
.status-badge {
    padding: 0.2rem 0.65rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: capitalize;
}
.status-paid { background: rgba(34,197,94,0.15); color: #15803d; }
.status-partially_paid { background: rgba(250,204,21,0.2); color: #a16207; }
.status-unpaid { background: rgba(239,68,68,0.15); color: #b91c1c; }
@media print {
    .no-print, .btn-back, form { display: none !important; }
    .card, .metric-card { box-shadow: none !important; }
}
</style>
@endsection

@section('content')
<div class="container-fluid py-3" id="totalFeesReport">
    <div class="d-flex justify-content-end mb-3">
        <a href="{{ route('modules.reports') }}" class="btn-back">
            <i class="fas fa-arrow-left me-2"></i> Back to Reports
        </a>
    </div>

    <div class="card shadow-sm mb-4">
        <div class="card-header bg-primary text-white py-3">
            <h5 class="mb-0"><i class="fas fa-receipt me-2"></i> Total Fees Report</h5>
        </div>
        <div class="card-body">
            <div class="row g-3 align-items-end no-print mb-3">
                <div class="col-md-3">
                    <label class="form-label"><strong>Client</strong></label>
                    <select id="filterClient" class="form-control">
                        <option value="all">All Clients</option>
                        @foreach($clients as $client)
                            <option value="{{ $client->id }}" {{ (string)$clientId === (string)$client->id ? 'selected' : '' }}>
                                {{ $client->full_name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label"><strong>From</strong></label>
                    <input id="filterFrom" type="date" class="form-control" value="{{ $dateFrom }}">
                </div>
                <div class="col-md-2">
                    <label class="form-label"><strong>To</strong></label>
                    <input id="filterTo" type="date" class="form-control" value="{{ $dateTo }}">
                </div>

                <div class="col-md-2">
                    <label class="form-label"><strong>Currency</strong></label>
                    <select id="filterCurrency" class="form-control">
                        <option value="">All</option>
                        @foreach($currencies as $currency)
                            <option value="{{ $currency->currency_id }}" {{ (string)$currencyId === (string)$currency->currency_id ? 'selected' : '' }}>
                                {{ $currency->currency_name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-1 d-grid">
                    <button id="applyFilters" class="btn btn-primary">
                        <i class="fas fa-filter me-1"></i>Apply Filters
                    </button>
                </div>
            </div>

            <div class="d-flex justify-content-end gap-2 no-print mb-3">
                <button type="button" class="btn btn-primary" onclick="window.print()">
                    <i class="fas fa-print me-2"></i> Print
                </button>
                <a id="exportExcelBtn" href="#" class="btn btn-outline-primary">
                    <i class="fas fa-file-excel me-2"></i> Export Excel
                </a>
                <a id="downloadPdfBtn" href="#" class="btn btn-success">
                    <i class="fas fa-file-pdf me-2"></i> Download PDF
                </a>
            </div>

            <div class="row g-3 mb-4">
                <div class="col-md-3"><div class="metric-card"><div class="metric-title">Total Fees</div><div class="metric-value" id="metricTotalFees">$0.00</div></div></div>
                <div class="col-md-3"><div class="metric-card"><div class="metric-title">Paid Fees</div><div class="metric-value" id="metricPaidFees">$0.00</div></div></div>
                <div class="col-md-3"><div class="metric-card"><div class="metric-title">Outstanding Fees</div><div class="metric-value" id="metricOutstandingFees">$0.00</div></div></div>
                <div class="col-md-3"><div class="metric-card"><div class="metric-title">Total Invoices</div><div class="metric-value" id="metricTotalInvoices">0</div></div></div>
            </div>

            <div class="table-responsive">
                <table class="table table-bordered table-hover">
                    <thead class="table-light">
                        <tr>
                            <th>Client Name</th>
                            <th>Invoice #</th>
                            <th>Invoice Date</th>
                            <th>Due Date</th>
                            <th>Total Amount</th>
                            <th>Paid Amount</th>
                            <th>Balance Due</th>
                            <th>Status</th>
                            <th>Currency</th>
                        </tr>
                    </thead>
                    <tbody id="feesRows"></tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
(() => {
    const rows = @json($rows);
    const fmt = (n) => '$' + Number(n || 0).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2});
    const filters = {
        client: document.getElementById('filterClient'),
        from: document.getElementById('filterFrom'),
        to: document.getElementById('filterTo'),
        status: document.getElementById('filterStatus'),
        currency: document.getElementById('filterCurrency')
    };

    function filterRows() {
        return rows.filter(r => {
            if (filters.client.value !== 'all') {
                if (String(r.client_id || '') !== String(filters.client.value)) return false;
            }
            if (filters.status.value !== 'all' && r.status !== filters.status.value) return false;
            if (filters.from.value && r.invoice_date < filters.from.value) return false;
            if (filters.to.value && r.invoice_date > filters.to.value) return false;
            if (filters.currency.value && String(r.currency_id || '') !== String(filters.currency.value)) return false;
            return true;
        });
    }

    function render() {
        const data = filterRows();
        const tbody = document.getElementById('feesRows');
        if (!data.length) {
            tbody.innerHTML = '<tr><td colspan="9" class="text-center text-muted">No invoices found.</td></tr>';
        } else {
            tbody.innerHTML = data.map(r => `
                <tr>
                    <td>${r.client_name}</td>
                    <td>${r.invoice_number}</td>
                    <td>${r.invoice_date}</td>
                    <td>${r.due_date}</td>
                    <td>${fmt(r.total)}</td>
                    <td>${fmt(r.paid)}</td>
                    <td class="${r.balance > 0 ? 'text-danger fw-bold' : 'text-success fw-bold'}">${fmt(r.balance)}</td>
                    <td><span class="status-badge status-${r.status}">${r.status.replace('_', ' ')}</span></td>
                    <td>${r.currency}</td>
                </tr>
            `).join('');
        }

        const totalFees = data.reduce((s, r) => s + Number(r.total || 0), 0);
        const paidFees = data.reduce((s, r) => s + Number(r.paid || 0), 0);
        const outstandingFees = data.reduce((s, r) => s + Number(r.balance || 0), 0);
        document.getElementById('metricTotalFees').textContent = fmt(totalFees);
        document.getElementById('metricPaidFees').textContent = fmt(paidFees);
        document.getElementById('metricOutstandingFees').textContent = fmt(outstandingFees);
        document.getElementById('metricTotalInvoices').textContent = data.length.toString();

        const q = new URLSearchParams({
            client_id: filters.client.value,
            status: filters.status.value,
            date_from: filters.from.value,
            date_to: filters.to.value,
            curr: filters.currency.value
        });
        document.getElementById('downloadPdfBtn').href = `{{ route('modules.reports.total-fees.download-pdf') }}?${q.toString()}`;
        document.getElementById('exportExcelBtn').href = `{{ route('modules.reports.total-fees.export-excel') }}?${q.toString()}`;
    }

    document.getElementById('applyFilters').addEventListener('click', render);
    render();
})();
</script>
@endsection