@extends('app')
@section('content')
    <div class="app-content">
        <div class="content-wrapper">

            {{-- Page Heading --}}
            <div class="page-heading">
                <div>
                    <h1 class="page-title">{{ $title }}</h1>
                    <p class="page-subtitle">Selamat datang, <strong>{{ auth()->user()->name }}</strong> —
                        <i class="fa-regular fa-calendar me-1"></i>{{ \Carbon\Carbon::now()->isoFormat('dddd, D MMMM Y') }}
                    </p>
                </div>
                <a href="{{ route('perawat.permintaan.create') }}" class="btn-app-primary">
                    <i class="fa-solid fa-plus me-2"></i>Buat Permintaan
                </a>
            </div>

            {{-- Stat Cards --}}
            <div class="stats-grid">

                <div class="stat-card stat-total">
                    <div class="stat-icon-wrap">
                        <i class="fa-solid fa-file-medical"></i>
                    </div>
                    <div class="stat-body">
                        <div class="stat-label">Total Permintaan</div>
                        <div class="stat-value">{{ $total }}</div>
                        <div class="stat-sub">Semua waktu</div>
                    </div>
                </div>

                <div class="stat-card stat-pending">
                    <div class="stat-icon-wrap">
                        <i class="fa-solid fa-calendar-day"></i>
                    </div>
                    <div class="stat-body">
                        <div class="stat-label">Hari Ini</div>
                        <div class="stat-value">{{ $hariIni }}</div>
                        <div class="stat-sub">{{ \Carbon\Carbon::now()->format('d M Y') }}</div>
                    </div>
                </div>

                <div class="stat-card stat-approved">
                    <div class="stat-icon-wrap">
                        <i class="fa-solid fa-circle-check"></i>
                    </div>
                    <div class="stat-body">
                        <div class="stat-label">Selesai Diproses</div>
                        <div class="stat-value">{{ $disetujuiLogistik }}</div>
                        <div class="stat-sub">Diterima logistik</div>
                    </div>
                </div>

                <div class="stat-card stat-rejected">
                    <div class="stat-icon-wrap">
                        <i class="fa-solid fa-hourglass-half"></i>
                    </div>
                    <div class="stat-body">
                        <div class="stat-label">Menunggu</div>
                        <div class="stat-value">{{ $diajukan }}</div>
                        <div class="stat-sub">Belum diproses</div>
                    </div>
                </div>

            </div>

            <div class="row g-4">

                {{-- Status Breakdown --}}
                <div class="col-12 col-xl-4">
                    <div class="app-card h-100">
                        <div class="app-card-header">
                            <span class="app-card-title">
                                <i class="fa-solid fa-chart-pie me-2"></i>Rincian Status
                            </span>
                        </div>
                        <div class="app-card-body d-flex flex-column gap-3">

                            <div class="d-flex align-items-center justify-content-between">
                                <div class="d-flex align-items-center gap-2">
                                    <span class="status-pill status-pending">
                                        <i class="fa-solid fa-hourglass-half me-1"></i>Diajukan
                                    </span>
                                </div>
                                <span
                                    style="font-size:18px; font-weight:800; color:var(--text-base)">{{ $diajukan }}</span>
                            </div>

                            <hr class="m-0" style="border-color:var(--surface-border)">

                            <div class="d-flex align-items-center justify-content-between">
                                <span class="status-pill status-approved">
                                    <i class="fa-solid fa-circle-check me-1"></i>Disetujui Karu
                                </span>
                                <span
                                    style="font-size:18px; font-weight:800; color:var(--text-base)">{{ $disetujuiKaru }}</span>
                            </div>

                            <hr class="m-0" style="border-color:var(--surface-border)">

                            <div class="d-flex align-items-center justify-content-between">
                                <span class="status-pill status-rejected">
                                    <i class="fa-solid fa-circle-xmark me-1"></i>Ditolak Karu
                                </span>
                                <span
                                    style="font-size:18px; font-weight:800; color:var(--text-base)">{{ $ditolakKaru }}</span>
                            </div>

                            <hr class="m-0" style="border-color:var(--surface-border)">

                            <div class="d-flex align-items-center justify-content-between">
                                <span class="status-pill status-approved">
                                    <i class="fa-solid fa-circle-check me-1"></i>Diterima Logistik
                                </span>
                                <span
                                    style="font-size:18px; font-weight:800; color:var(--text-base)">{{ $disetujuiLogistik }}</span>
                            </div>

                            <hr class="m-0" style="border-color:var(--surface-border)">

                            <div class="d-flex align-items-center justify-content-between">
                                <span class="status-pill status-rejected">
                                    <i class="fa-solid fa-circle-xmark me-1"></i>Ditolak Logistik
                                </span>
                                <span
                                    style="font-size:18px; font-weight:800; color:var(--text-base)">{{ $ditolakLogistik }}</span>
                            </div>

                        </div>
                    </div>
                </div>

                {{-- Permintaan Terbaru --}}
                <div class="col-12 col-xl-8">
                    <div class="app-card h-100">
                        <div class="app-card-header">
                            <span class="app-card-title">
                                <i class="fa-solid fa-clock-rotate-left me-2"></i>5 Permintaan Terbaru
                            </span>
                            <a href="{{ route('perawat.permintaan.index') }}" class="btn-app-ghost"
                                style="padding:5px 12px; font-size:12px">
                                Lihat Semua <i class="fa-solid fa-arrow-right ms-1"></i>
                            </a>
                        </div>
                        <div class="app-card-body p-0">
                            <div class="table-responsive">
                                <table class="app-table">
                                    <thead>
                                        <tr>
                                            <th>Kode</th>
                                            <th>Ruangan</th>
                                            <th>Tanggal</th>
                                            <th>Status</th>
                                            <th>Aksi</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($latest as $p)
                                            @php
                                                $statusClass = match ($p->status) {
                                                    'DIAJUKAN' => 'status-pending',
                                                    'DISETUJUI_KARU', 'DISETUJUI_LOGISTIK' => 'status-approved',
                                                    'DITOLAK_KARU', 'DITOLAK_LOGISTIK' => 'status-rejected',
                                                    default => 'status-pending',
                                                };
                                                $statusIcon = match ($p->status) {
                                                    'DIAJUKAN' => 'fa-hourglass-half',
                                                    'DISETUJUI_KARU' => 'fa-circle-check',
                                                    'DITOLAK_KARU' => 'fa-circle-xmark',
                                                    'DISETUJUI_LOGISTIK' => 'fa-circle-check',
                                                    'DITOLAK_LOGISTIK' => 'fa-circle-xmark',
                                                    default => 'fa-circle-question',
                                                };
                                                $statusLabel = match ($p->status) {
                                                    'DIAJUKAN' => 'Diajukan',
                                                    'DISETUJUI_KARU' => 'Disetujui Karu',
                                                    'DITOLAK_KARU' => 'Ditolak Karu',
                                                    'DISETUJUI_LOGISTIK' => 'Diterima Logistik',
                                                    'DITOLAK_LOGISTIK' => 'Ditolak Logistik',
                                                    default => $p->status,
                                                };
                                            @endphp
                                            <tr>
                                                <td><span class="code-badge">{{ $p->kode_permintaan }}</span></td>
                                                <td><span class="room-tag">{{ $p->ruangan->nama_ruangan ?? '-' }}</span>
                                                </td>
                                                <td class="td-muted">
                                                    <i class="fa-regular fa-calendar me-1"></i>
                                                    {{ \Carbon\Carbon::parse($p->tanggal_permintaan)->format('d M Y') }}
                                                </td>
                                                <td>
                                                    <span class="status-pill {{ $statusClass }}">
                                                        <i
                                                            class="fa-solid {{ $statusIcon }} me-1"></i>{{ $statusLabel }}
                                                    </span>
                                                </td>
                                                <td>
                                                    <div class="action-btns">
                                                        <a href="{{ route('perawat.permintaan.show', $p->id) }}"
                                                            class="action-btn action-btn-view" title="Detail">
                                                            <i class="fa-solid fa-eye"></i>
                                                        </a>
                                                        @if ($p->status == 'DIAJUKAN')
                                                            <a href="{{ route('perawat.permintaan.edit', $p->id) }}"
                                                                class="action-btn action-btn-edit" title="Edit">
                                                                <i class="fa-solid fa-pen-to-square"></i>
                                                            </a>
                                                        @endif
                                                    </div>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="5" class="text-center py-4 td-muted">
                                                    <i class="fa-regular fa-folder-open d-block mb-1 fs-5"></i>
                                                    Belum ada permintaan
                                                </td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </div>
@endsection