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

@section('content')
    <div class="d-flex align-items-center justify-content-between mb-4">
        <div>
            <h4 class="mb-0"><i class="bi bi-cash-coin me-2"></i>Collection Report</h4>
            <p class="text-muted mb-0 small">Monthly collection summary with trend analysis</p>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ route('reports.export', ['format' => 'pdf', 'report' => 'collection'] + request()->all()) }}"
                class="btn btn-danger btn-sm" target="_blank"><i class="bi bi-file-pdf me-1"></i>PDF</a>
            <a href="{{ route('reports.export', ['format' => 'excel', 'report' => 'collection'] + request()->all()) }}"
                class="btn btn-success btn-sm"><i class="bi bi-file-earmark-excel me-1"></i>Excel</a>
            <a href="{{ route('reports.export', ['format' => 'csv', 'report' => 'collection'] + request()->all()) }}"
                class="btn btn-info text-white btn-sm"><i class="bi bi-filetype-csv me-1"></i>CSV</a>
            <button class="btn btn-secondary btn-sm" onclick="window.print()"><i class="bi bi-printer me-1"></i>Print</button>
        </div>
    </div>

    {{-- Filters --}}
    <div class="card mb-3">
        <div class="card-body py-2">
            <form method="GET" class="row g-2 align-items-end">
                <div class="col-md-3">
                    <label class="form-label small mb-1">Project</label>
                    <select name="project_id" class="form-select form-select-sm">
                        <option value="">All Projects</option>
                        @foreach ($projects as $p)
                            <option value="{{ $p->id }}" {{ $projectId == $p->id ? 'selected' : '' }}>{{ $p->project_name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label small mb-1">From</label>
                    <input type="date" name="from" value="{{ $from }}" class="form-control form-control-sm">
                </div>
                <div class="col-md-2">
                    <label class="form-label small mb-1">To</label>
                    <input type="date" name="to" value="{{ $to }}" class="form-control form-control-sm">
                </div>
                <div class="col-md-2">
                    <button type="submit" class="btn btn-primary btn-sm w-100"><i
                            class="bi bi-funnel me-1"></i>Filter</button>
                </div>
            </form>
        </div>
    </div>

    {{-- Summary --}}
    <div class="row g-3 mb-4">
        <div class="col-sm-4">
            <div class="stat-card stat-success">
                <div class="stat-icon"><i class="bi bi-cash-stack"></i></div>
                <div class="stat-info">
                    <h3>৳{{ number_format($data->sum('total_amount')) }}</h3>
                    <p>Total Collected</p>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="stat-card stat-primary">
                <div class="stat-icon"><i class="bi bi-receipt"></i></div>
                <div class="stat-info">
                    <h3>{{ number_format($data->sum('transaction_count')) }}</h3>
                    <p>Total Transactions</p>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="stat-card stat-info">
                <div class="stat-icon"><i class="bi bi-calendar3"></i></div>
                <div class="stat-info">
                    <h3>{{ $data->count() }}</h3>
                    <p>Months</p>
                </div>
            </div>
        </div>
    </div>

    {{-- Chart --}}
    <div class="card mb-4">
        <div class="card-body">
            <canvas id="collectionDetailChart" height="100"></canvas>
        </div>
    </div>

    {{-- Data Table --}}
    <div class="card">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover table-sm mb-0">
                    <thead>
                        <tr>
                            <th>Month</th>
                            <th class="text-end">Transactions</th>
                            <th class="text-end">Total Amount</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($data as $row)
                            <tr>
                                <td class="fw-semibold">
                                    {{ \Carbon\Carbon::createFromFormat('Y-m', $row->month)->format('F Y') }}</td>
                                <td class="text-end">{{ number_format($row->transaction_count) }}</td>
                                <td class="text-end text-success fw-bold">৳{{ number_format($row->total_amount) }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="3" class="text-center py-4 text-muted">No collection data found.</td>
                            </tr>
                        @endforelse
                    </tbody>
                    @if($data->count())
                        <tfoot class="fw-bold">
                            <tr>
                                <td>Grand Total</td>
                                <td class="text-end">{{ number_format($data->sum('transaction_count')) }}</td>
                                <td class="text-end text-success">৳{{ number_format($data->sum('total_amount')) }}</td>
                            </tr>
                        </tfoot>
                    @endif
                </table>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        new Chart(document.getElementById('collectionDetailChart').getContext('2d'), {
            type: 'bar',
            data: {
                labels: {!! json_encode($data->pluck('month')->map(fn($m) => \Carbon\Carbon::createFromFormat('Y-m', $m)->format('M Y'))->toArray()) !!},
                datasets: [{
                    label: 'Collection (৳)',
                    data: {!! json_encode($data->pluck('total_amount')->toArray()) !!},
                    backgroundColor: 'hsla(160, 84%, 39%, 0.7)',
                    borderRadius: 6,
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: { legend: { display: false }, tooltip: { callbacks: { label: ctx => '৳' + Number(ctx.raw).toLocaleString() } } },
                scales: {
                    y: { beginAtZero: true, ticks: { callback: v => '৳' + (v / 1000).toFixed(0) + 'K' }, grid: { color: 'rgba(0,0,0,0.04)' } },
                    x: { grid: { display: false } }
                }
            }
        });
    </script>
@endpush