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

            <div class="page-heading">
                <div>
                    <h1 class="page-title">{{ $title }}</h1>
                    <p class="page-subtitle">Verifikasi stok dan proses permintaan
                        <strong>{{ $data->kode_permintaan }}</strong>
                    </p>
                </div>
                <a href="{{ route('logistik.permintaan.index') }}" class="btn-app-ghost">
                    <i class="fa-solid fa-arrow-left me-2"></i> Kembali
                </a>
            </div>

            @if (session('success'))
                <div class="alert alert-success">
                    <i class="fa-solid fa-circle-check me-2"></i>{{ session('success') }}
                </div>
            @endif
            @if (session('error'))
                <div class="alert alert-danger">
                    <i class="fa-solid fa-circle-exclamation me-2"></i>{{ session('error') }}
                </div>
            @endif

            @php
                $stokKurangList = $data->details->filter(fn($d) => $d->alatMedis->stok < $d->jumlah);
                $stokCukup = $stokKurangList->isEmpty();
            @endphp

            <div class="row g-4 align-items-start">

                {{-- ===================== KOLOM KIRI ===================== --}}
                <div class="col-12 col-xl-8 d-flex flex-column gap-4">

                    {{-- Info Permintaan --}}
                    <div class="app-card">
                        <div class="app-card-header">
                            <span class="app-card-title">
                                <i class="fa-solid fa-circle-info me-2"></i>Informasi Permintaan
                            </span>
                            <span
                                class="status-pill
                                {{ $data->status == 'DISETUJUI_LOGISTIK' ? 'status-approved' : '' }}
                                {{ $data->status == 'DITOLAK_LOGISTIK' ? 'status-rejected' : '' }}
                                {{ $data->status == 'DISETUJUI_KARU' ? 'status-warning' : '' }}">

                                @if ($data->status == 'DISETUJUI_KARU')
                                    <i class="fa-solid fa-hourglass-half me-1"></i>Menunggu Logistik
                                @elseif($data->status == 'DISETUJUI_LOGISTIK')
                                    <i class="fa-solid fa-circle-check me-1"></i>Disetujui Logistik
                                @elseif($data->status == 'DITOLAK_LOGISTIK')
                                    <i class="fa-solid fa-circle-xmark me-1"></i>Ditolak Logistik
                                @endif
                            </span>
                        </div>
                        <div class="app-card-body">
                            <div class="row g-3">
                                <div class="col-6 col-md-3">
                                    <div class="app-label">Kode Permintaan</div>
                                    <span class="code-badge" style="font-size:13px">{{ $data->kode_permintaan }}</span>
                                </div>
                                <div class="col-6 col-md-3">
                                    <div class="app-label">Tanggal</div>
                                    <span style="font-size:13.5px; font-weight:600; color:var(--text-base)">
                                        <i class="fa-regular fa-calendar me-1" style="color:var(--green-500)"></i>
                                        {{ \Carbon\Carbon::parse($data->tanggal_permintaan)->format('d M Y') }}
                                    </span>
                                </div>
                                <div class="col-6 col-md-3">
                                    <div class="app-label">Perawat Pengaju</div>
                                    <div class="d-flex align-items-center gap-2 mt-1">
                                        <div
                                            style="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)">
                                            {{ strtoupper(substr($data->perawat->name, 0, 2)) }}
                                        </div>
                                        <span
                                            style="font-size:13px; font-weight:600; color:var(--text-base)">{{ $data->perawat->name }}</span>
                                    </div>
                                </div>
                                <div class="col-6 col-md-3">
                                    <div class="app-label">Total Item</div>
                                    <span style="font-size:13.5px; font-weight:700; color:var(--green-600)">
                                        <i class="fa-solid fa-kit-medical me-1"></i>{{ $data->details->count() }} item
                                    </span>
                                </div>
                                @if ($data->catatan_perawat)
                                    <div class="col-12">
                                        <div class="app-label">
                                            <i class="fa-regular fa-note-sticky me-1"></i>Catatan Perawat
                                        </div>
                                        <p class="mb-0"
                                            style="font-size:13.5px; color:var(--text-muted); line-height:1.6; padding:10px 14px; background:var(--surface-subtle); border-radius:var(--radius-sm); border:1px solid var(--surface-border)">
                                            {{ $data->catatan_perawat }}
                                        </p>
                                    </div>
                                @endif
                                @if ($data->catatan_karu)
                                    <div class="col-12">
                                        <div class="app-label">
                                            <i class="fa-regular fa-comment-dots me-1"></i>Catatan Kepala Ruangan
                                        </div>
                                        <p class="mb-0"
                                            style="font-size:13.5px; color:var(--text-muted); line-height:1.6; padding:10px 14px; background:var(--surface-subtle); border-radius:var(--radius-sm); border:1px solid var(--surface-border)">
                                            {{ $data->catatan_karu }}
                                        </p>
                                    </div>
                                @endif
                                @if ($data->catatan_logistik)
                                    <div class="col-12">
                                        <div class="app-label">
                                            <i class="fa-regular fa-comment-dots me-1"></i>Catatan Logistik
                                        </div>
                                        <p class="mb-0"
                                            style="font-size:13.5px; color:var(--text-muted); line-height:1.6; padding:10px 14px; background:var(--surface-subtle); border-radius:var(--radius-sm); border:1px solid var(--surface-border)">
                                            {{ $data->catatan_logistik }}
                                        </p>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>

                    {{-- Peringatan stok kurang --}}
                    @if (!$stokCukup && !in_array($data->status, ['DISETUJUI_LOGISTIK', 'DITOLAK_LOGISTIK']))
                        <div class="alert alert-warning">
                            <div>
                                <i class="fa-solid fa-triangle-exclamation me-2"></i>
                                <strong>Perhatian!</strong> Terdapat <strong>{{ $stokKurangList->count() }} alat
                                    medis</strong> dengan stok tidak mencukupi permintaan. Pastikan stok telah diperbarui
                                sebelum menyetujui.
                            </div>
                        </div>
                    @endif

                    {{-- Tabel Detail Alat + Stok --}}
                    <div class="app-card">
                        <div class="app-card-header">
                            <span class="app-card-title">
                                <i class="fa-solid fa-screwdriver-wrench me-2"></i>Detail Alat Medis & Verifikasi Stok
                            </span>
                            <span
                                style="font-size:12px; font-weight:600; color:var(--text-muted)">{{ $data->details->count() }}
                                item</span>
                        </div>
                        <div class="app-card-body p-0">
                            <div class="table-responsive">
                                <table class="app-table">
                                    <thead>
                                        <tr>
                                            <th>No</th>
                                            <th>Nama Alat Medis</th>
                                            <th>Kode Alat</th>
                                            <th>Jumlah Diminta</th>
                                            <th>Stok Tersedia</th>
                                            <th>Keterangan</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($data->details as $detail)
                                            @php $kurang = $detail->alatMedis->stok < $detail->jumlah; @endphp
                                            <tr style="{{ $kurang ? 'background:#fff9f9' : '' }}">
                                                <td class="td-muted">{{ $loop->iteration }}</td>
                                                <td style="font-weight:600; color:var(--text-base)">
                                                    {{ $detail->alatMedis->nama_alat }}</td>
                                                <td><span
                                                        class="code-badge">{{ $detail->alatMedis->kode_alat ?? '-' }}</span>
                                                </td>
                                                <td>
                                                    <span
                                                        style="font-size:15px; font-weight:800; color:var(--green-600)">{{ $detail->jumlah }}</span>
                                                    <span
                                                        class="td-muted ms-1">{{ $detail->alatMedis->satuan ?? '' }}</span>
                                                </td>
                                                <td>
                                                    <span
                                                        style="font-size:15px; font-weight:800; color:{{ $kurang ? 'var(--color-rejected)' : 'var(--color-success)' }}">
                                                        {{ $detail->alatMedis->stok }}
                                                    </span>
                                                    <span
                                                        class="td-muted ms-1">{{ $detail->alatMedis->satuan ?? '' }}</span>
                                                </td>
                                                <td>
                                                    @if ($kurang)
                                                        <span class="status-pill status-rejected">
                                                            <i class="fa-solid fa-triangle-exclamation me-1"></i>
                                                            Kurang {{ $detail->jumlah - $detail->alatMedis->stok }}
                                                        </span>
                                                    @else
                                                        <span class="status-pill status-approved">
                                                            <i class="fa-solid fa-circle-check me-1"></i>Cukup
                                                        </span>
                                                    @endif
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="6" class="text-center py-4" style="color:var(--text-faint)">
                                                    <i class="fa-regular fa-folder-open d-block mb-2"
                                                        style="font-size:1.5rem"></i>
                                                    Tidak ada detail alat
                                                </td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <th>No</th>
                                            <th>Nama Alat Medis</th>
                                            <th>Kode Alat</th>
                                            <th>Jumlah Diminta</th>
                                            <th>Stok Tersedia</th>
                                            <th>Keterangan</th>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>

                </div>

                {{-- ===================== KOLOM KANAN ===================== --}}
                <div class="col-12 col-xl-4 d-flex flex-column gap-4">

                    @if (!in_array($data->status, ['DISETUJUI_LOGISTIK', 'DITOLAK_LOGISTIK']))
                        {{-- Panel Tindakan --}}
                        <div class="app-card">
                            <div class="app-card-header">
                                <span class="app-card-title">
                                    <i class="fa-solid fa-shield-halved me-2"></i>Tindakan Logistik
                                </span>
                            </div>
                            <div class="app-card-body d-flex flex-column gap-3">

                                {{-- Form Setujui --}}
                                <form action="{{ route('logistik.permintaan.approve', $data->id) }}" method="POST"
                                    onsubmit="return confirm('Yakin ingin menyetujui dan memproses permintaan ini? Stok akan dikurangi secara otomatis.')">
                                    @csrf
                                    @if (!$stokCukup)
                                        <div class="alert alert-warning mb-2" style="font-size:12.5px">
                                            <i class="fa-solid fa-triangle-exclamation me-1"></i>
                                            Beberapa stok tidak mencukupi. Tetap lanjutkan?
                                        </div>
                                    @endif
                                    <div class="mb-2">
                                        <label class="app-label">
                                            <i class="fa-regular fa-message me-1"></i>
                                            Catatan Logistik
                                            <span style="color:var(--text-faint); font-weight:400">(opsional)</span>
                                        </label>
                                        <textarea name="catatan" class="app-textarea" rows="2" placeholder="Tambahkan catatan..."></textarea>
                                    </div>
                                    <button type="submit" class="btn-app-primary w-100 justify-content-center"
                                        {{ !$stokCukup ? 'style=opacity:.7' : '' }}>
                                        <i class="fa-solid fa-circle-check me-2"></i> Setujui & Proses
                                    </button>
                                </form>

                                <div class="d-flex align-items-center gap-2">
                                    <hr class="flex-grow-1 m-0">
                                    <span style="font-size:11px; color:var(--text-faint); font-weight:600">ATAU</span>
                                    <hr class="flex-grow-1 m-0">
                                </div>

                                {{-- Toggle Tolak --}}
                                <div>
                                    <button type="button" id="btn-toggle-reject"
                                        class="w-100 d-flex align-items-center justify-content-center gap-2"
                                        style="padding:9px 18px; background:#fee2e2; color:#991b1b; border:none; border-radius:var(--radius-sm); font-family:'Outfit',sans-serif; font-size:13.5px; font-weight:600; cursor:pointer;">
                                        <i class="fa-solid fa-circle-xmark"></i> Tolak Permintaan
                                    </button>

                                    <div id="reject-panel" class="mt-3" style="display:none">
                                        <form action="{{ route('logistik.permintaan.reject', $data->id) }}"
                                            method="POST">
                                            @csrf
                                            <div class="mb-2">
                                                <label class="app-label">
                                                    <i class="fa-regular fa-comment-dots me-1"></i>
                                                    Alasan Penolakan <span style="color:var(--color-rejected)">*</span>
                                                </label>
                                                <textarea name="catatan" rows="3" class="app-textarea" required></textarea>
                                            </div>
                                            <button type="submit"
                                                class="w-100 d-flex align-items-center justify-content-center gap-2"
                                                style="padding:9px 18px; background:linear-gradient(135deg,#f87171,#dc2626); color:#fff; border:none; border-radius:var(--radius-sm); font-size:13.5px; font-weight:600;">
                                                <i class="fa-solid fa-circle-xmark"></i> Konfirmasi Penolakan
                                            </button>
                                        </form>
                                    </div>
                                </div>

                            </div>
                        </div>

                        {{-- Ringkasan Stok --}}
                        <div class="app-card">
                            <div class="app-card-header">
                                <span class="app-card-title">
                                    <i class="fa-solid fa-warehouse me-2"></i>Ringkasan Stok
                                </span>
                            </div>
                            <div class="app-card-body d-flex flex-column gap-2">

                                {{-- Stat stok cukup vs kurang --}}
                                <div class="row g-2 mb-2">
                                    <div class="col-6">
                                        <div
                                            style="padding:12px; background:#dcfce7; border-radius:var(--radius-sm); border:1px solid #bbf7d0; text-align:center">
                                            <div style="font-size:22px; font-weight:800; color:#15803d; line-height:1">
                                                {{ $data->details->filter(fn($d) => $d->alatMedis->stok >= $d->jumlah)->count() }}
                                            </div>
                                            <div style="font-size:11px; font-weight:600; color:#15803d; margin-top:2px">
                                                Stok
                                                Cukup</div>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div
                                            style="padding:12px; background:#fee2e2; border-radius:var(--radius-sm); border:1px solid #fecaca; text-align:center">
                                            <div style="font-size:22px; font-weight:800; color:#991b1b; line-height:1">
                                                {{ $stokKurangList->count() }}
                                            </div>
                                            <div style="font-size:11px; font-weight:600; color:#991b1b; margin-top:2px">
                                                Stok
                                                Kurang</div>
                                        </div>
                                    </div>
                                </div>

                                {{-- List item stok kurang --}}
                                @if (!$stokCukup)
                                    <div class="app-label mb-1">
                                        <i class="fa-solid fa-list-check me-1"></i>Alat dengan stok kurang:
                                    </div>
                                    @foreach ($stokKurangList as $det)
                                        <div class="d-flex align-items-center justify-content-between gap-2"
                                            style="padding:8px 12px; background:var(--surface-subtle); border-radius:var(--radius-sm); border:1px solid var(--surface-border)">
                                            <span
                                                style="font-size:12.5px; font-weight:600; color:var(--text-base)">{{ $det->alatMedis->nama_alat }}</span>
                                            <div class="d-flex align-items-center gap-1 flex-shrink-0">
                                                <span style="font-size:11px; color:var(--text-muted)">Tersedia:</span>
                                                <span
                                                    style="font-size:12px; font-weight:800; color:var(--color-rejected)">{{ $det->alatMedis->stok }}</span>
                                                <span style="font-size:11px; color:var(--text-faint)">/</span>
                                                <span
                                                    style="font-size:12px; font-weight:800; color:var(--green-600)">{{ $det->jumlah }}</span>
                                            </div>
                                        </div>
                                    @endforeach
                                @else
                                    <div class="alert alert-success mb-0" style="font-size:13px">
                                        <i class="fa-solid fa-circle-check me-2"></i>
                                        Semua stok mencukupi permintaan
                                    </div>
                                @endif

                            </div>
                        </div>
                    @endif

                    {{-- Alur Persetujuan --}}
                    <div class="app-card">
                        <div class="app-card-header">
                            <span class="app-card-title">
                                <i class="fa-solid fa-diagram-project me-2"></i>Alur Persetujuan
                            </span>
                        </div>
                        <div class="app-card-body">
                            <div class="approval-timeline">

                                <div class="at-step at-active">
                                    <div class="at-dot"><i class="fa-solid fa-user-nurse"></i></div>
                                    <div class="at-info">
                                        <strong>Perawat</strong>
                                        <span>{{ \Carbon\Carbon::parse($data->tanggal_permintaan)->format('d M Y') }}</span>
                                    </div>
                                </div>
                                <div class="at-connector"></div>

                                <div class="at-step at-active">
                                    <div class="at-dot"><i class="fa-solid fa-circle-check"></i></div>
                                    <div class="at-info">
                                        <strong>Kepala Ruangan</strong>
                                        <span style="color:var(--color-success)">
                                            <i class="fa-solid fa-circle-check me-1"></i>Disetujui
                                        </span>
                                        @if ($data->tanggal_disetujui_karu)
                                            <span>{{ \Carbon\Carbon::parse($data->tanggal_disetujui_karu)->format('d M Y') }}</span>
                                        @endif
                                    </div>
                                </div>
                                <div class="at-connector"></div>

                                <div class="at-step at-active">
                                    <div class="at-dot" style="box-shadow:0 0 0 3px rgba(245,158,11,.2)">
                                        <i class="fa-solid fa-boxes-stacked"></i>
                                    </div>
                                    <div class="at-info">
                                        <strong>Logistik</strong>
                                        @if ($data->status == 'DISETUJUI_LOGISTIK')
                                            <span style="color:var(--color-success)">
                                                <i class="fa-solid fa-circle-check me-1"></i>Disetujui
                                            </span>
                                        @elseif($data->status == 'DITOLAK_LOGISTIK')
                                            <span style="color:var(--color-rejected)">
                                                <i class="fa-solid fa-circle-xmark me-1"></i>Ditolak
                                            </span>
                                        @else
                                            <span style="color:var(--amber-500); font-weight:600">
                                                <i class="fa-solid fa-hourglass-half me-1"></i>Menunggu tindakan Anda
                                            </span>
                                        @endif

                                        @if ($data->tanggal_disetujui_logistik)
                                            <span>{{ \Carbon\Carbon::parse($data->tanggal_disetujui_logistik)->format('d M Y') }}</span>
                                        @endif
                                    </div>
                                </div>

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

                </div>
            </div>

        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.getElementById('btn-toggle-reject')?.addEventListener('click', function() {
            const panel = document.getElementById('reject-panel');
            const hidden = panel.style.display === 'none';
            panel.style.display = hidden ? 'block' : 'none';
            this.innerHTML = hidden ?
                '<i class="fa-solid fa-chevron-up me-1"></i> Sembunyikan' :
                '<i class="fa-solid fa-circle-xmark me-1"></i> Tolak Permintaan';
        });
    </script>
@endpush