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

@php
    $activeQueue = request('queue', '');
    $queues = [
        '' => ['label' => 'All', 'count' => $stats['total'] ?? 0],
        'pending' => ['label' => 'Pending approval', 'count' => $stats['pending'] ?? 0],
        'approved' => ['label' => 'Approved', 'count' => $stats['approved'] ?? 0],
        'disbursed' => ['label' => 'Disbursed', 'count' => $stats['disbursed'] ?? 0],
        'draft' => ['label' => 'Drafts', 'count' => $stats['draft'] ?? 0],
    ];
@endphp

<div class="page-content chm-requisitions-index" data-chm-live-url="{{ route('planning.requisitions.live') }}">
    <x-chm.layout.page title="Funds requisitions" subtitle="Submit, approve and track budget disbursements" icon="bx bx-receipt">
        <x-slot:breadcrumb>
            <x-chm.breadcrumb-item :href="route('planning.dashboard')">Planning</x-chm.breadcrumb-item>
            <x-chm.breadcrumb-item :active="true">Requisitions</x-chm.breadcrumb-item>
        </x-slot:breadcrumb>

        <x-slot:actions>
            @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>

        @can('role_permissions.view')
            <div class="alert alert-info border-0 shadow-sm mb-4">
                <div class="d-flex flex-wrap gap-3 align-items-start">
                    <i class="bx bx-shield-quarter fs-4"></i>
                    <div class="flex-grow-1">
                        <strong>Grant requisition access to staff</strong>
                        <p class="small mb-2 mt-1">
                            Go to <strong>Management → All roles in permission</strong>, click <strong>Edit</strong> on a role,
                            then under the <strong>Planning</strong> group enable:
                            <em>Planning module access</em>, <em>View own requisitions</em>, and <em>Create requisitions</em>.
                            Staff must also be assigned to activities on the workplan to see budget lines.
                        </p>
                        <a href="{{ route('all.roles.permission') }}" class="btn btn-sm btn-outline-primary">
                            Open role permissions
                        </a>
                    </div>
                </div>
            </div>
        @endcan

        {{-- Summary --}}
        <div class="row row-cols-2 row-cols-md-4 g-3 mb-4">
            <x-chm.stat-card label="Total requisitions" :value="number_format($stats['total'] ?? 0)" icon="bx bx-receipt" color="primary" live-key="total" />
            <x-chm.stat-card label="Pending approval" :value="number_format($stats['pending'] ?? 0)" icon="bx bx-time-five" color="warning" live-key="pending" />
            <x-chm.stat-card label="Approved / queued" :value="number_format($stats['approved'] ?? 0)" icon="bx bx-check-shield" color="info" live-key="approved" />
            <x-chm.stat-card label="Total requested" :value="number_format($stats['total_requested'] ?? 0, 0)" icon="bx bx-wallet" color="success" sublabel="UGX" live-key="total_requested" />
        </div>

        {{-- Queue tabs --}}
        <div class="chm-queue-tabs d-flex flex-wrap gap-2 mb-3">
            @foreach($queues as $key => $meta)
                @php
                    $params = array_filter(array_merge(request()->except('page', 'queue'), $key !== '' ? ['queue' => $key] : []));
                @endphp
                <a href="{{ route('planning.requisitions.index', $params) }}"
                   class="chm-queue-tab {{ $activeQueue === $key ? 'is-active' : '' }}">
                    {{ $meta['label'] }}
                    <span class="chm-queue-tab__count" data-chm-stat="queue.{{ $key === '' ? 'all' : $key }}">{{ number_format($meta['count']) }}</span>
                </a>
            @endforeach
        </div>

        {{-- Filters --}}
        <x-chm.card class="mb-4">
            <form method="get" class="chm-filter-panel border-0 p-0 shadow-none">
                @if($activeQueue)
                    <input type="hidden" name="queue" value="{{ $activeQueue }}">
                @endif
                <div class="row g-3 align-items-end">
                    <div class="col-lg-4">
                        <label class="form-label">Search</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="bx bx-search"></i></span>
                            <input type="search" name="search" class="form-control" placeholder="Reference, requester or justification…" value="{{ request('search') }}">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Status</label>
                        <select name="status" class="form-select chm-select" data-placeholder="All statuses" data-allow-clear="true">
                            <option value=""></option>
                            @foreach($statuses as $status)
                                <option value="{{ $status->value }}" @selected(request('status') === $status->value)>{{ $status->label() }}</option>
                            @endforeach
                        </select>
                    </div>
                    @if($viewAll)
                        <div class="col-md-3">
                            <label class="form-label">Department</label>
                            <select name="department_id" class="form-select chm-select" data-placeholder="All departments" data-allow-clear="true">
                                <option value=""></option>
                                @foreach($departments as $dept)
                                    <option value="{{ $dept->id }}" @selected(request('department_id') == $dept->id)>{{ $dept->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    @endif
                    <div class="col-auto d-flex gap-2">
                        <button type="submit" class="btn btn-primary">
                            <i class="bx bx-filter-alt me-1"></i> Apply
                        </button>
                        <a href="{{ route('planning.requisitions.index') }}" class="btn btn-outline-secondary">Clear</a>
                    </div>
                </div>
            </form>
        </x-chm.card>

        {{-- Table --}}
        <div class="card chm-card">
            <div class="card-header bg-transparent border-bottom">
                <div>
                    <h6 class="mb-0 fw-semibold">Requisitions</h6>
                    <small class="text-muted" data-chm-stat="list.meta">{{ number_format($requisitions->total()) }} total · showing {{ $requisitions->firstItem() ?? 0 }}–{{ $requisitions->lastItem() ?? 0 }}</small>
                </div>
            </div>

            @if($requisitions->isEmpty())
                <x-chm.table-empty
                    title="No requisitions found"
                    description="Try adjusting your filters or create a new funds requisition."
                    icon="bx bx-receipt"
                    :action-label="auth()->user()->can('create', App\Models\FundsRequisition::class) ? 'Create requisition' : null"
                    :action-href="auth()->user()->can('create', App\Models\FundsRequisition::class) ? route('planning.requisitions.create') : null"
                />
            @else
                <x-chm.table-toolbar
                    :datatable="false"
                    :export="false"
                    :sticky="true"
                    class="border-0 shadow-none rounded-0"
                >
                    <thead>
                        <tr>
                            <th style="width:48px;">#</th>
                            <th>Reference</th>
                            <th>Date</th>
                            <th>Department</th>
                            <th>Requester</th>
                            <th class="text-center">Lines</th>
                            <th>Status</th>
                            <th class="text-end">Requested (UGX)</th>
                            <th class="text-end">Approved (UGX)</th>
                            <th style="min-width:110px;">Disbursement</th>
                            <th class="chm-col-actions text-end">Action</th>
                        </tr>
                    </thead>
                    <tbody data-chm-live-region="table_rows">
                        @foreach($requisitions as $index => $req)
                            @php
                                $progress = $req->disbursementProgress();
                                $dept = $req->department;
                            @endphp
                            <tr>
                                <td class="text-muted">{{ $requisitions->firstItem() + $index }}</td>
                                <td>
                                    <a href="{{ route('planning.requisitions.show', $req) }}" class="fw-semibold text-decoration-none">
                                        {{ $req->reference }}
                                    </a>
                                    @if($req->is_emergency ?? false)
                                        <span class="badge bg-danger-subtle text-danger border ms-1">Emergency</span>
                                    @endif
                                </td>
                                <td class="text-nowrap">
                                    <div>{{ $req->requisition_date?->format('d M Y') ?? $req->created_at?->format('d M Y') }}</div>
                                    <small class="text-muted">{{ $req->created_at?->diffForHumans() }}</small>
                                </td>
                                <td>
                                    <span class="d-inline-block text-truncate" style="max-width:160px;" title="{{ $dept?->name }}">
                                        {{ $dept?->name ?? '—' }}
                                    </span>
                                </td>
                                <td>
                                    <div class="d-flex align-items-center gap-2">
                                        <img src="{{ $req->requester?->avatarUrl() }}" alt="" class="chm-avatar">
                                        <span class="d-inline-block text-truncate" style="max-width:130px;">{{ $req->requester?->name ?? '—' }}</span>
                                    </div>
                                </td>
                                <td class="text-center">
                                    <span class="badge bg-light text-dark border">{{ $req->lines_count ?? 0 }}</span>
                                </td>
                                <td>
                                    <x-chm.status-badge :status="$req->status->badgeVariant()" :label="$req->status->label()" />
                                </td>
                                <td class="text-end font-monospace">{{ number_format($req->total_requested, 0) }}</td>
                                <td class="text-end font-monospace">{{ number_format($req->total_approved, 0) }}</td>
                                <td>
                                    @if($req->total_approved > 0 || $req->isDisbursed())
                                        <x-chm.progress :value="$progress" :max="100" :show-label="false" class="mb-1" />
                                        <small class="text-muted">{{ $progress }}%</small>
                                    @else
                                        <span class="text-muted">—</span>
                                    @endif
                                </td>
                                <td class="text-end chm-col-actions">
                                    <a href="{{ route('planning.requisitions.show', $req) }}" class="btn btn-sm btn-outline-primary">
                                        <i class="bx bx-show"></i>
                                        <span class="d-none d-xl-inline ms-1">View</span>
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </x-chm.table-toolbar>
            @endif

            @if($requisitions->hasPages())
                <div class="card-footer bg-transparent border-top">{{ $requisitions->links() }}</div>
            @endif
        </div>
    </x-chm.layout.page>
</div>

@push('styles')
<style>
    .chm-queue-tab {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        padding: .45rem .85rem;
        border-radius: 999px;
        border: 1px solid var(--chm-border, #e5e7eb);
        background: var(--chm-surface, #fff);
        color: var(--chm-text-muted, #64748b);
        text-decoration: none;
        font-size: .875rem;
        transition: all .15s ease;
    }
    .chm-queue-tab:hover {
        border-color: var(--chm-primary, #1e3a5f);
        color: var(--chm-primary, #1e3a5f);
    }
    .chm-queue-tab.is-active {
        background: var(--chm-primary, #1e3a5f);
        border-color: var(--chm-primary, #1e3a5f);
        color: #fff;
    }
    .chm-queue-tab__count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 1.5rem;
        padding: 0 .35rem;
        border-radius: 999px;
        background: rgba(0,0,0,.08);
        font-size: .75rem;
        font-weight: 600;
    }
    .chm-queue-tab.is-active .chm-queue-tab__count {
        background: rgba(255,255,255,.2);
    }
    .chm-requisitions-index .chm-table-wrap {
        border: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
    .chm-requisitions-index .chm-table-scroll {
        overflow-x: auto;
    }
    .chm-requisitions-index .chm-col-actions {
        white-space: nowrap;
        width: 1%;
    }
</style>
@endpush

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        if (window.ChmForms) {
            window.ChmForms.init();
        }
    });
</script>
@endpush

@endsection