@extends('admin.admin_dashboard')
@section('admin')

<div class="page-content" data-chm-live-url="{{ route('planning.dashboard.live') }}">
    <x-chm.layout.page title="Planning Dashboard" subtitle="Workplans, requisitions & budget overview" icon="bx bx-line-chart">
        <x-slot:breadcrumb>
            <x-chm.breadcrumb-item :href="route('admin.dashboard')">Home</x-chm.breadcrumb-item>
            <x-chm.breadcrumb-item :active="true">Planning</x-chm.breadcrumb-item>
        </x-slot:breadcrumb>

        <x-slot:actions>
            @can('create', App\Models\Workplan::class)
                <x-chm.button variant="outline-primary" icon="bx bx-list-ul" :href="route('planning.workplans.index')">Workplans</x-chm.button>
            @endcan
            @can('create', App\Models\FundsRequisition::class)
                <x-chm.button variant="primary" icon="bx bx-plus" :href="route('planning.requisitions.create')">New requisition</x-chm.button>
            @endcan
        </x-slot:actions>

        <form method="get" class="row g-2 mb-4">
            <div class="col-md-4">
                <select name="department_id" class="form-select" onchange="this.form.submit()">
                    <option value="">All departments</option>
                    @foreach($departments as $dept)
                        <option value="{{ $dept->id }}" @selected($departmentId == $dept->id)>{{ $dept->name }}</option>
                    @endforeach
                </select>
            </div>
        </form>

        <div class="row row-cols-2 row-cols-md-4 g-3 mb-4">
            <x-chm.stat-card label="Pending approvals" :value="$stats['pending_approvals']" icon="bx bx-time-five" color="warning" live-key="pending_approvals" />
            <x-chm.stat-card label="Draft requisitions" :value="$stats['draft_requisitions']" icon="bx bx-edit" color="info" live-key="draft_requisitions" />
            <x-chm.stat-card label="Pending disbursement" :value="$stats['pending_disbursement']" icon="bx bx-wallet" color="primary" live-key="pending_disbursement" />
            <x-chm.stat-card label="Active workplans" :value="$stats['active_workplans']" icon="bx bx-target-lock" color="success" live-key="active_workplans" />
            <x-chm.stat-card label="Draft workplans" :value="$stats['draft_workplans']" icon="bx bx-file" color="secondary" live-key="draft_workplans" />
            <x-chm.stat-card label="M&E pending" :value="$stats['pending_me_reports']" icon="bx bx-bar-chart" color="warning" live-key="pending_me_reports" />
            <x-chm.stat-card label="Overdue activities" :value="$stats['overdue_activities']" icon="bx bx-error" color="danger" live-key="overdue_activities" />
            <x-chm.stat-card label="Disbursed YTD" :value="number_format($stats['total_disbursed_ytd'])" icon="bx bx-money" color="success" live-key="total_disbursed_ytd" />
        </div>

        <div class="row g-4">
            <div class="col-lg-7">
                <x-chm.card title="Recent requisitions">
                    <div class="table-responsive">
                        <table class="table table-sm align-middle mb-0">
                            <thead><tr><th>Reference</th><th>Department</th><th>Status</th><th>Amount</th></tr></thead>
                            <tbody data-chm-live-region="recent_requisitions">
                                @forelse($stats['recent_requisitions'] as $req)
                                    <tr>
                                        <td><a href="{{ route('planning.requisitions.show', $req) }}">{{ $req->reference }}</a></td>
                                        <td>{{ $req->department->name ?? '—' }}</td>
                                        <td><span class="badge bg-light text-dark border">{{ $req->status->label() }}</span></td>
                                        <td>{{ number_format($req->total_requested, 2) }}</td>
                                    </tr>
                                @empty
                                    <tr><td colspan="4" class="text-muted">No requisitions yet.</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </x-chm.card>
            </div>
            <div class="col-lg-5">
                <x-chm.card title="Budget utilization by department">
                    @forelse($utilization as $row)
                        <div class="mb-3">
                            <div class="d-flex justify-content-between small mb-1">
                                <span>{{ $row['department'] }}</span>
                                <span>{{ $row['pct'] }}%</span>
                            </div>
                            <x-chm.progress :value="$row['pct']" />
                            <div class="small text-muted">{{ number_format($row['actual']) }} / {{ number_format($row['budget']) }}</div>
                        </div>
                    @empty
                        <p class="text-muted mb-0">No budget allocations yet.</p>
                    @endforelse
                </x-chm.card>
            </div>
        </div>
    </x-chm.layout.page>
</div>

@endsection