@extends('layouts.master')
@section('title', 'Fee Collection Report')

@section('styles')
<style>
/* Button back */
.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);
}

/* Cards */
.card {
    border-radius: 1rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transition: transform 0.3s, box-shadow 0.3s;
}
.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

/* Metric cards */
.metric-card {
    padding: 1.5rem;
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transition: transform 0.3s, box-shadow 0.3s;
}
.metric-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
.metric-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.metric-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #111827;
}

/* Table */
.table-container {
    overflow-x: auto;
    border-radius: 1rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    background: #fff;
    margin-top: 1.5rem;
}
table {
    width: 100%;
    border-collapse: collapse;
}
thead {
    background: #f9fafb;
}
th, td {
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.95rem;
}
tbody tr:hover {
    background-color: #f3f4f6;
}

/* Status badges */
.status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-block;
}
.status-paid { background-color: rgba(34,197,94,0.2); color: #22c55e; }
.status-partially_paid { background-color: rgba(250,202,21,0.2); color: #facc15; }
.status-unpaid { background-color: rgba(239,68,68,0.2); color: #ef4444; }

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fadeIn 0.5s ease-in-out; }

@media print {
    .no-print, .btn-back, form {
        display: none !important;
    }
    .card, .metric-card, .table-container {
        box-shadow: none !important;
    }
}
</style>
@endsection

@section('content')
<div class="container-fluid py-3 animate-fade-in">

    <!-- Back -->
    <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>

    <!-- Metrics Cards -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="metric-card text-center">
                <div class="metric-title">Total Collected</div>
                <div class="metric-value">${{ number_format($metrics['totalCollected'], 2) }}</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="metric-card text-center">
                <div class="metric-title">Total Receipts</div>
                <div class="metric-value">{{ $metrics['totalReceipts'] }}</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="metric-card text-center">
                <div class="metric-title">Processed</div>
                <div class="metric-value">{{ $metrics['processedReceipts'] ?? 0 }}</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="metric-card text-center">
                <div class="metric-title">Draft Receipts</div>
                <div class="metric-value">{{ $metrics['draftReceipts'] ?? 0 }}</div>
            </div>
        </div>
    </div>

    <!-- Filters -->
    <div class="card mb-4 p-3">
        <form method="GET" action="{{ route('modules.reports.fee-collection') }}" class="row g-3">
            <div class="col-md-3">
                <label class="form-label">Client</label>
                <select class="form-select" name="client_id">
                    <option value="all">All Clients</option>
                    @foreach($clients as $client)
                        <option value="{{ $client->id }}" {{ (string)($clientId ?? 'all') === (string)$client->id ? 'selected' : '' }}>
                            {{ $client->full_name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label">From Date</label>
                <input type="date" class="form-control" name="date_from" value="{{ $dateFrom ?? date('Y-m-d', strtotime('first day of this month')) }}">
            </div>
            <div class="col-md-3">
                <label class="form-label">To Date</label>
                <input type="date" class="form-control" name="date_to" value="{{ $dateTo ?? date('Y-m-d') }}">
            </div>
            <div class="col-md-3 d-flex align-items-end">
                <button type="submit" class="btn btn-primary w-100">Apply</button>
            </div>
        </form>
    </div>

    <div class="d-flex justify-content-end gap-2 mb-3 no-print">
        <button type="button" class="btn btn-primary" onclick="window.print()">
            <i class="fas fa-print me-2"></i>Print Report
        </button>
        <a href="{{ route('modules.reports.fee-collection.download-pdf', request()->query()) }}" class="btn btn-success">
            <i class="fas fa-download me-2"></i>Download PDF
        </a>
    </div>

    <!-- Fee Collection Table -->
    <div class="table-container">
        <table class="table table-hover mb-0">
            <thead>
                <tr>
                    <th>Receipt #</th>
                    <th>Client</th>
                    <th>Receipt Date</th>
                    <th>Payment Method</th>
                    <th>Total Amount</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($receipts as $receipt)
                <tr>
                    <td>{{ $receipt->receipt_number }}</td>
                    <td>{{ $receipt->client->full_name ?? 'N/A' }}</td>
                    <td>{{ optional($receipt->receipt_date)->format('Y-m-d') }}</td>
                    <td>{{ $receipt->payment_methods_label ?: ($receipt->payment_method ?? 'N/A') }}</td>
                    <td>${{ number_format($receipt->total_amount, 2) }}</td>
                    <td>
                        <span class="status-badge status-{{ strtolower($receipt->status) }}">
                            {{ ucfirst(str_replace('_',' ', strtolower($receipt->status))) }}
                        </span>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="6" class="text-center text-muted">No fee receipt records found.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection