@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>
            </div>

            {{-- Peringatan stok kurang --}}
            @if ($stokKurang > 0)
                <div class="alert alert-warning">
                    <i class="fa-solid fa-triangle-exclamation me-2"></i>
                    Terdapat <strong>{{ $stokKurang }} permintaan</strong> dengan stok alat medis yang tidak mencukupi.
                    <a href="{{ route('logistik.permintaan.index') }}" class="fw-semibold ms-1" style="color:inherit">
                        Tinjau sekarang <i class="fa-solid fa-arrow-right ms-1"></i>
                    </a>
                </div>
            @endif

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

                <div class="stat-card stat-total">
                    <div class="stat-icon-wrap">
                        <i class="fa-solid fa-boxes-stacked"></i>
                    </div>
                    <div class="stat-body">
                        <div class="stat-label">Total Permintaan</div>
                        <div class="stat-value">{{ $total }}</div>
                        <div class="stat-sub">Masuk ke logistik</div>
                    </div>
                </div>

                <div class="stat-card stat-pending">
                    <div class="stat-icon-wrap">
                        <i class="fa-solid fa-hourglass-half"></i>
                    </div>
                    <div class="stat-body">
                        <div class="stat-label">Menunggu Proses</div>
                        <div class="stat-value">{{ $menunggu }}</div>
                        <div class="stat-sub">Perlu ditindaklanjuti</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">Diterima</div>
                        <div class="stat-value">{{ $disetujui }}</div>
                        <div class="stat-sub">Berhasil diproses</div>
                    </div>
                </div>

                <div class="stat-card stat-rejected">
                    <div class="stat-icon-wrap">
                        <i class="fa-solid fa-circle-xmark"></i>
                    </div>
                    <div class="stat-body">
                        <div class="stat-label">Ditolak</div>
                        <div class="stat-value">{{ $ditolak }}</div>
                        <div class="stat-sub">Tidak dapat diproses</div>
                    </div>
                </div>

            </div>

            {{-- Info Bar: Hari Ini & Stok Kurang --}}
            <div class="row g-3 mb-4">

                <div class="col-12 col-md-6">
                    <div class="app-card h-100">
                        <div class="app-card-body d-flex align-items-center gap-3">
                            <div
                                style="width:48px; height:48px; border-radius:var(--radius-sm); background:var(--amber-100); color:var(--amber-500); display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0">
                                <i class="fa-solid fa-calendar-day"></i>
                            </div>
                            <div class="flex-grow-1">
                                <div class="app-label mb-0">Permintaan Masuk Hari Ini</div>
                                <div style="font-size:28px; font-weight:800; color:var(--text-base); line-height:1.2">
                                    {{ $hariIni }}
                                </div>
                                <div class="td-muted" style="font-size:12px">{{ \Carbon\Carbon::now()->format('d M Y') }}
                                </div>
                            </div>
                            @if ($hariIni > 0)
                                <a href="{{ route('logistik.permintaan.index') }}" class="btn-app-primary flex-shrink-0"
                                    style="padding:7px 14px; font-size:12px">
                                    Proses <i class="fa-solid fa-arrow-right ms-1"></i>
                                </a>
                            @endif
                        </div>
                    </div>
                </div>

                <div class="col-12 col-md-6">
                    <div class="app-card h-100">
                        <div class="app-card-body d-flex align-items-center gap-3">
                            <div
                                style="width:48px; height:48px; border-radius:var(--radius-sm); background:{{ $stokKurang > 0 ? '#fee2e2' : '#dcfce7' }}; color:{{ $stokKurang > 0 ? 'var(--color-rejected)' : 'var(--color-success)' }}; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0">
                                <i
                                    class="fa-solid {{ $stokKurang > 0 ? 'fa-triangle-exclamation' : 'fa-circle-check' }}"></i>
                            </div>
                            <div class="flex-grow-1">
                                <div class="app-label mb-0">Stok Tidak Mencukupi</div>
                                <div style="font-size:28px; font-weight:800; color:var(--text-base); line-height:1.2">
                                    {{ $stokKurang }}
                                </div>
                                <div class="td-muted" style="font-size:12px">
                                    {{ $stokKurang > 0 ? 'Permintaan berpotensi masalah' : 'Semua stok mencukupi' }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            {{-- Permintaan Terbaru --}}
            <div class="app-card">
                <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('logistik.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>Perawat</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) {
                                            'DISETUJUI_KARU' => 'status-pending',
                                            'DISETUJUI_LOGISTIK' => 'status-approved',
                                            'DITOLAK_LOGISTIK' => 'status-rejected',
                                            default => 'status-pending',
                                        };
                                        $statusIcon = match ($p->status) {
                                            'DISETUJUI_KARU' => 'fa-hourglass-half',
                                            'DISETUJUI_LOGISTIK' => 'fa-circle-check',
                                            'DITOLAK_LOGISTIK' => 'fa-circle-xmark',
                                            default => 'fa-circle-question',
                                        };
                                        $statusLabel = match ($p->status) {
                                            'DISETUJUI_KARU' => 'Menunggu Proses',
                                            'DISETUJUI_LOGISTIK' => 'Diterima',
                                            'DITOLAK_LOGISTIK' => 'Ditolak',
                                            default => $p->status,
                                        };
                                    @endphp
                                    <tr>
                                        <td><span class="code-badge">{{ $p->kode_permintaan }}</span></td>
                                        <td>
                                            <div class="d-flex align-items-center gap-2">
                                                <div class="avatar-xs">{{ strtoupper(substr($p->perawat->name, 0, 2)) }}
                                                </div>
                                                <span class="fw-semibold">{{ $p->perawat->name }}</span>
                                            </div>
                                        </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('logistik.permintaan.show', $p->id) }}"
                                                    class="action-btn action-btn-view" title="Detail">
                                                    <i class="fa-solid fa-eye"></i>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="6" 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>

    <style>
        .avatar-xs {
            width: 28px;
            height: 28px;
            border-radius: var(--radius-sm);
            background: var(--green-50);
            color: var(--green-600);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            font-weight: 800;
            flex-shrink: 0;
            border: 1px solid var(--green-100);
        }
    </style>
@endsection