{{-- resources/views/dashboard.blade.php --}}
@extends('layouts.app')

@section('title', 'Dashboard')

@section('content')
    <div>
        {{-- KPIs --}}
        <div class="row g-3">
            <div class="col-12 col-sm-6 col-lg-3">
                <div class="card h-100 bg-primary bg-gradient text-white border-0 shadow-sm">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <div class="small">Total Applications</div>
                                <div class="h4 mb-0">{{ number_format($stats['applications_total']) }}</div>
                                <div class="small mt-1">
                                    <i class="bi bi-arrow-up-right"></i>
                                    <span class="text-white-50">{{ $stats['applications_growth'] }} vs last month</span>
                                </div>
                            </div>
                            <span
                                class="d-inline-flex align-items-center justify-content-center rounded-3 bg-white bg-opacity-25 p-2">
                                <i class="bi bi-ui-checks"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12 col-sm-6 col-lg-3">
                <div class="card h-100 bg-success bg-gradient text-white border-0 shadow-sm">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <div class="small">New (This Week)</div>
                                <div class="h4 mb-0">{{ number_format($stats['applications_new_week']) }}</div>
                                <div class="small mt-1">
                                    <span class="text-white-50">Renewals:</span>
                                    <strong class="text-white">{{ number_format($stats['renewals_week']) }}</strong>
                                </div>
                            </div>
                            <span
                                class="d-inline-flex align-items-center justify-content-center rounded-3 bg-white bg-opacity-25 p-2">
                                <i class="bi bi-plus-circle"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12 col-sm-6 col-lg-3">
                <div class="card h-100 bg-secondary bg-gradient text-white border-0 shadow-sm">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <div class="small">Unbilled Assessments</div>
                                <div class="h4 mb-0">{{ number_format($stats['unbilled_count']) }}</div>
                                <div class="small mt-1">
                                    <span class="text-white-50">Est.</span>
                                    <strong class="text-white">₱{{ number_format($stats['unbilled_amount'], 2) }}</strong>
                                </div>
                            </div>
                            <span
                                class="d-inline-flex align-items-center justify-content-center rounded-3 bg-white bg-opacity-25 p-2">
                                <i class="bi bi-receipt"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12 col-sm-6 col-lg-3">
                <div class="card h-100 bg-danger bg-gradient text-white border-0 shadow-sm">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <div class="small">Collections Today</div>
                                <div class="h4 mb-0">₱{{ number_format($stats['collections_today'], 2) }}</div>
                                <div class="small mt-1">
                                    <span class="text-white-50">ORs:</span>
                                    <strong class="text-white">{{ number_format($stats['ors_today']) }}</strong>
                                </div>
                            </div>
                            <span
                                class="d-inline-flex align-items-center justify-content-center rounded-3 bg-white bg-opacity-25 p-2">
                                <i class="bi bi-cash-stack"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Charts + Lists --}}
        <div class="row mt-3">
            <div class="col-12">
                <div class="card card-compact shadow-sm mb-3">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <div>
                            <strong>Applications by Month</strong>
                            <small class="text-muted">({{ $appsYear }})</small>
                        </div>
                        <form method="GET" action="{{ url()->current() }}" class="d-flex align-items-center gap-2">
                            <input type="number" name="year" value="{{ $appsYear }}"
                                class="form-control form-control-sm" style="width: 110px;" min="2000"
                                max="{{ now()->year }}">
                            <button class="btn btn-sm btn-primary">Go</button>
                        </form>
                    </div>

                    <div class="card-body">
                        {{-- Monthly counts row (horizontal) --}}
                        <div class="tag-row mb-2">
                            @foreach ($appsByMonthLabels as $i => $label)
                                @php
                                    /** @var int $count */
                                    $count = (int) ($appsByMonthData[$i] ?? 0);
                                @endphp

                                <span class="tag-pill {{ $count > 0 ? 'tag-pill--active' : 'tag-pill--zero' }}">
                                    {{ $label }}
                                    {{-- If you use Bootstrap, this becomes a nice pill badge automatically --}}
                                    <span class="n badge rounded-pill {{ $count > 0 ? 'bg-primary' : 'bg-secondary' }}">
                                        {{ $count }}
                                    </span>
                                </span>
                            @endforeach
                        </div>

                        {{-- Compact chart --}}
                        <div class="chart-compact mb-2">
                            <canvas id="appsByMonthChart"></canvas>
                        </div>

                        {{-- Status tags (horizontal) --}}
                        @if (isset($statusBreakdown) && $statusBreakdown->count())
                            <div class="tag-row">
                                @foreach ($statusBreakdown as $row)
                                    @php $cnt = (int) ($row->total ?? 0); @endphp
                                    <span class="tag-pill {{ $cnt > 0 ? 'tag-pill--active' : 'tag-pill--zero' }}">
                                        {{ $row->status ?? '—' }}
                                        <span
                                            class="n badge rounded-pill {{ $cnt > 0 ? 'bg-primary' : 'bg-secondary' }}">{{ $cnt }}</span>
                                    </span>
                                @endforeach
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            <div class="col-6">
                <div class="card h-100">
                    <div class="card-header bg-white d-flex justify-content-between align-items-center">
                        <h2 class="h6 mb-0">Recent Applications</h2>
                        <a href="{{ route('applications.index') }}" class="btn btn-sm btn-outline-secondary">Manage</a>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-sm align-middle">
                                <thead>
                                    <tr>
                                        <th class="bg-success text-white">Tracking #</th>
                                        <th class="bg-success text-white">Business</th>
                                        <th class="bg-success text-white">Type</th>
                                        <th class="bg-success text-white">Status</th>
                                        <th class="bg-success text-white" class="text-end">Updated</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($recentApplications as $app)
                                        <tr>
                                            <td class="text-nowrap">
                                                <a href="{{ route('applications.index') }}">{{ $app['tracking_no'] }}</a>
                                            </td>
                                            <td>{{ $app['business_name'] }}</td>
                                            <td><span class="badge text-bg-light">{{ ucfirst($app['type']) }}</span></td>
                                            <td>
                                                @php
                                                    $statusClass = match ($app['status']) {
                                                        'Pending' => 'warning',
                                                        'Assessed' => 'info',
                                                        'Billed' => 'secondary',
                                                        'Paid' => 'success',
                                                        'Released' => 'primary',
                                                        default => 'light',
                                                    };
                                                @endphp
                                                <span
                                                    class="badge text-bg-{{ $statusClass }}">{{ $app['status'] }}</span>
                                            </td>
                                            <td class="text-end text-muted text-nowrap">
                                                {{ \Carbon\Carbon::parse($app['updated_at'])->diffForHumans() }}
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-6">
                <div class="card h-100">
                    <div class="card-header bg-white">
                        <h2 class="h6 mb-0">Top Lines of Business</h2>
                    </div>
                    <div class="card-body">
                        <div class="list-group list-group-flush">
                            @foreach ($stats['top_lobs'] as $lob)
                                <div class="list-group-item d-flex justify-content-between align-items-center">
                                    <div>
                                        <div class="fw-semibold">{{ $lob['name'] }}</div>
                                        <div class="small text-muted">{{ number_format($lob['count']) }} applications</div>
                                    </div>
                                    <span
                                        class="badge rounded-pill text-bg-light">₱{{ number_format($lob['fees'], 2) }}</span>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>

            {{-- Billing & Recent Applications --}}
            <div class="col-6 mt-3">
                <div class="card h-100">
                    <div class="card-header bg-white d-flex justify-content-between align-items-center">
                        <h2 class="h6 mb-0">Billing (Invoices)</h2>
                        <a href="{{ route('billing.invoices') }}" class="btn btn-sm btn-outline-secondary">Go to
                            Billing</a>
                    </div>
                    <div class="card-body">
                        <canvas id="chartBilling" height="110"></canvas>
                        <div class="mt-3 small text-muted">Unpaid / Aging buckets shown for the last 6 months.</div>
                    </div>
                </div>
            </div>


        </div>
    </div>
@endsection

<style>
    /* tighter card paddings */
    .card-compact .card-header {
        padding: .5rem .75rem;
    }

    .card-compact .card-body {
        padding: .5rem .75rem;
    }

    /* compact chart area */
    .chart-compact {
        height: 150px;
    }

    /* try 130–170px to taste */

    /* horizontal tag rows (wrap on small screens) */
    .tag-row {
        display: flex;
        flex-wrap: wrap;
        gap: .4rem .5rem;
    }

    .tag-pill {
        border: 1px solid var(--bs-border-color, #dee2e6);
        border-radius: 999px;
        padding: .2rem .6rem;
        font-size: .8rem;
        line-height: 1rem;
        background-color: var(--bs-body-bg);
    }

    .tag-pill .n {
        font-weight: 600;
        margin-left: .35rem;
    }
</style>

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            if (typeof window.Chart === 'undefined') {
                console.error('Chart.js not loaded');
                return;
            }

            const el = document.getElementById('appsByMonthChart'); // <-- matches the canvas
            const labels = @json($charts['apps_by_month']['labels'] ?? []);
            const data = @json($charts['apps_by_month']['data'] ?? []);
            if (!el || !labels.length || !data.length) return;

            const ctx = el.getContext('2d');
            new Chart(ctx, {
                type: 'line',
                data: {
                    labels,
                    datasets: [{
                        label: 'Applications',
                        data,
                        borderWidth: 2,
                        tension: 0.25,
                        pointRadius: 3
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                precision: 0
                            }
                        }
                    }
                }
            });
        });
    </script>
@endpush