@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">Review dan tindak lanjuti permintaan <strong>{{ $data->kode_permintaan }}</strong></p>
            </div>
            <a href="{{ route('karu.permintaan.index') }}" class="btn-app-ghost">
                <i class="fa-solid fa-arrow-left me-2"></i> Kembali
            </a>
        </div>

        {{-- Flash --}}
        @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
            $statusClass = match($data->status) {
                'DIAJUKAN'           => 'status-pending',
                'DISETUJUI_KARU',
                'DISETUJUI_LOGISTIK' => 'status-approved',
                'DITOLAK_KARU',
                'DITOLAK_LOGISTIK'   => 'status-rejected',
                default              => 'status-pending',
            };
            $statusIcon = match($data->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($data->status) {
                'DIAJUKAN'           => 'Diajukan',
                'DISETUJUI_KARU'     => 'Disetujui Karu',
                'DITOLAK_KARU'       => 'Ditolak Karu',
                'DISETUJUI_LOGISTIK' => 'Disetujui Logistik',
                'DITOLAK_LOGISTIK'   => 'Ditolak Logistik',
                default              => $data->status,
            };
            $karuDone     = in_array($data->status, ['DISETUJUI_KARU', 'DISETUJUI_LOGISTIK']);
            $karuRejected = $data->status === 'DITOLAK_KARU';
            $logDone      = $data->status === 'DISETUJUI_LOGISTIK';
            $logRejected  = $data->status === 'DITOLAK_LOGISTIK';
        @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 {{ $statusClass }}">
                            <i class="fa-solid {{ $statusIcon }} me-1"></i>{{ $statusLabel }}
                        </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
                        </div>
                    </div>
                </div>

                {{-- Tabel Detail Alat --}}
                <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
                        </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</th>
                                        <th>Satuan</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($data->details as $detail)
                                        <tr>
                                            <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>
                                            </td>
                                            <td class="td-muted">{{ $detail->alatMedis->satuan ?? '-' }}</td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="5" 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</th>
                                        <th>Satuan</th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>

            </div>

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

                {{-- Panel Tindakan --}}
                @if($data->status == 'DIAJUKAN')
                    <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
                            </span>
                        </div>
                        <div class="app-card-body d-flex flex-column gap-3">

                            {{-- Form Setujui --}}
                            <form action="{{ route('karu.permintaan.approve', $data->id) }}" method="POST"
                                  onsubmit="return confirm('Yakin ingin menyetujui permintaan ini?')">
                                @csrf
                                <div class="mb-2">
                                    <label class="app-label">
                                        <i class="fa-regular fa-message me-1"></i>
                                        Catatan Persetujuan
                                        <span style="color:var(--text-faint); font-weight:400">(opsional)</span>
                                    </label>
                                    <textarea name="catatan" class="app-textarea" rows="2"
                                              placeholder="Tambahkan catatan untuk perawat..."></textarea>
                                </div>
                                <button type="submit" class="btn-app-primary w-100 justify-content-center">
                                    <i class="fa-solid fa-circle-check me-2"></i> Setujui Permintaan
                                </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; transition:all var(--dur) var(--ease)"
                                        onmouseover="this.style.background='#fecaca'" onmouseout="this.style.background='#fee2e2'">
                                    <i class="fa-solid fa-circle-xmark"></i> Tolak Permintaan
                                </button>

                                <div id="reject-panel" class="mt-3" style="display:none">
                                    <form action="{{ route('karu.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" class="app-textarea" rows="3"
                                                      placeholder="Tuliskan alasan penolakan permintaan ini..." required></textarea>
                                            @error('catatan')
                                                <div class="mt-1" style="font-size:12px; color:var(--color-rejected)">
                                                    <i class="fa-solid fa-triangle-exclamation me-1"></i>{{ $message }}
                                                </div>
                                            @enderror
                                        </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-family:'Outfit',sans-serif; font-size:13.5px; font-weight:600; cursor:pointer; box-shadow:0 4px 14px rgba(220,38,38,.3)">
                                            <i class="fa-solid fa-circle-xmark"></i> Konfirmasi Penolakan
                                        </button>
                                    </form>
                                </div>
                            </div>

                        </div>
                    </div>

                @else
                    {{-- Sudah diproses --}}
                    <div class="app-card">
                        <div class="app-card-header">
                            <span class="app-card-title">
                                <i class="fa-solid fa-shield-halved me-2"></i>Status Tindakan
                            </span>
                        </div>
                        <div class="app-card-body d-flex flex-column gap-3">

                            @if($karuDone)
                                <div class="alert alert-success mb-0">
                                    <i class="fa-solid fa-circle-check me-2"></i>
                                    Permintaan telah <strong>disetujui</strong>
                                    @if($data->tanggal_disetujui_karu)
                                        pada {{ \Carbon\Carbon::parse($data->tanggal_disetujui_karu)->format('d M Y') }}
                                    @endif
                                </div>
                                @if($data->catatan_karu)
                                    <div>
                                        <div class="app-label">
                                            <i class="fa-regular fa-message me-1"></i>Catatan Karu
                                        </div>
                                        <p class="mb-0" style="font-size:13px; color:var(--text-muted); padding:10px 14px; background:var(--surface-subtle); border-radius:var(--radius-sm); border:1px solid var(--surface-border)">
                                            {{ $data->catatan_karu }}
                                        </p>
                                    </div>
                                @endif

                            @elseif($karuRejected)
                                <div class="alert alert-danger mb-0">
                                    <i class="fa-solid fa-circle-xmark me-2"></i>
                                    Permintaan telah <strong>ditolak</strong>
                                    @if($data->tanggal_disetujui_karu)
                                        pada {{ \Carbon\Carbon::parse($data->tanggal_disetujui_karu)->format('d M Y') }}
                                    @endif
                                </div>
                                @if($data->catatan_karu)
                                    <div>
                                        <div class="app-label">
                                            <i class="fa-regular fa-comment-dots me-1"></i>Alasan Penolakan
                                        </div>
                                        <p class="mb-0 fst-italic" style="font-size:13px; color:var(--text-muted); padding:10px 14px; background:var(--surface-subtle); border-radius:var(--radius-sm); border:1px solid var(--surface-border)">
                                            "{{ $data->catatan_karu }}"
                                        </p>
                                    </div>
                                @endif

                            @else
                                <div class="alert alert-primary mb-0">
                                    <i class="fa-solid fa-box-open me-2"></i>
                                    Permintaan sedang diproses oleh Logistik
                                </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">

                            {{-- Perawat --}}
                            <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>

                            {{-- Kepala Ruangan --}}
                            <div class="at-step {{ $karuDone || $karuRejected || $data->status == 'DIAJUKAN' ? 'at-active' : '' }}">
                                <div class="at-dot"
                                     style="{{ $karuRejected ? 'background:#fee2e2; color:#991b1b; border-color:#fca5a5' : ($data->status == 'DIAJUKAN' ? 'box-shadow:0 0 0 3px rgba(245,158,11,.2)' : '') }}">
                                    @if($karuRejected)
                                        <i class="fa-solid fa-circle-xmark"></i>
                                    @elseif($karuDone)
                                        <i class="fa-solid fa-circle-check"></i>
                                    @else
                                        <i class="fa-solid fa-user-tie"></i>
                                    @endif
                                </div>
                                <div class="at-info">
                                    <strong>Kepala Ruangan</strong>
                                    @if($karuRejected)
                                        <span style="color:var(--color-rejected)">
                                            <i class="fa-solid fa-circle-xmark me-1"></i>Ditolak
                                        </span>
                                    @elseif($karuDone)
                                        <span style="color:var(--color-success)">
                                            <i class="fa-solid fa-circle-check me-1"></i>Disetujui
                                        </span>
                                    @else
                                        <span style="color:var(--amber-500); font-weight:600">
                                            <i class="fa-solid fa-hourglass-half me-1"></i>Menunggu keputusan Anda
                                        </span>
                                    @endif
                                    @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>

                            {{-- Logistik --}}
                            <div class="at-step {{ $logDone || $logRejected ? 'at-active' : '' }}">
                                <div class="at-dot"
                                     style="{{ $logRejected ? 'background:#fee2e2; color:#991b1b; border-color:#fca5a5' : '' }}">
                                    @if($logRejected)
                                        <i class="fa-solid fa-circle-xmark"></i>
                                    @elseif($logDone)
                                        <i class="fa-solid fa-circle-check"></i>
                                    @else
                                        <i class="fa-solid fa-boxes-stacked"></i>
                                    @endif
                                </div>
                                <div class="at-info">
                                    <strong>Logistik</strong>
                                    @if($logRejected)
                                        <span style="color:var(--color-rejected)">
                                            <i class="fa-solid fa-circle-xmark me-1"></i>Ditolak
                                        </span>
                                    @elseif($logDone)
                                        <span style="color:var(--color-success)">
                                            <i class="fa-solid fa-circle-check me-1"></i>Diproses
                                        </span>
                                    @else
                                        <span>Menunggu proses</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