@extends('layouts.app')

@section('title', 'Detail Laporan - KITA AKADEMIK')
@section('page-title')
    <div class="d-flex align-items-center justify-content-between w-100">
        <div class="d-flex align-items-center gap-3">
            <span class="badge bg-dark text-white fw-bold">#K-{{ str_pad($laporan->id, 4, '0', STR_PAD_LEFT) }}</span>
            <span>Detail Kasus</span>
        </div>
        @if(auth()->user()->isAdmin())
            <div class="d-flex gap-2">
                <form action="{{ route('laporan.toggle_pantau', $laporan->id) }}" method="POST" class="m-0 p-0">
                    @csrf
                    <button type="submit" class="btn {{ $laporan->dipantau_lldikti ? 'btn-secondary' : 'btn-info' }} fw-bold rounded-3 px-3 shadow-sm text-dark">
                        <i class="fa-solid {{ $laporan->dipantau_lldikti ? 'fa-eye-slash' : 'fa-eye' }} me-1"></i> 
                        {{ $laporan->dipantau_lldikti ? 'Berhenti Pantau' : 'Pantau Kasus' }}
                    </button>
                </form>
                <a href="{{ route('laporan.edit', $laporan->id) }}" class="btn btn-warning fw-bold rounded-3 px-3 shadow-sm text-dark border-dark border-2" style="font-size: 1.1rem; padding: 0.5rem 1rem;">
                    <i class="fa-solid fa-gavel me-1"></i> PANEL KEPUTUSAN (TERIMA / TOLAK / JADWAL)
                </a>
            </div>
        @endif
    </div>
@endsection

@section('content')
@push('styles')
<style>
    /* Premium Animations & Hover Effects */
    .card-custom {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        border-radius: 16px;
        border: 1px solid rgba(0,0,0,0.05);
    }
    .card-custom:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 30px rgba(0,0,0,0.08) !important;
    }
    
    /* Stepper Pulse Animation */
    .stepper-item.active .step-counter {
        box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.2);
        animation: pulseShadow 2s infinite;
    }
    
    @keyframes pulseShadow {
        0% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4); }
        70% { box-shadow: 0 0 0 10px rgba(79, 70, 229, 0); }
        100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); }
    }

    /* Button Micro-interactions */
    .btn {
        transition: all 0.2s ease-in-out;
    }
    .btn:hover {
        transform: translateY(-2px);
    }
    .btn:active {
        transform: scale(0.97) translateY(0);
    }

    /* Action Card Specific Enhancements */
    .card-role-panel {
        background: linear-gradient(145deg, #ffffff, #f8fafc);
        position: relative;
        overflow: hidden;
    }
    .card-role-panel::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        border-radius: 4px 0 0 4px;
    }
    
    /* Subtle Data Box */
    .data-box {
        background-color: #f8fafc;
        border: 1px solid #e2e8f0;
        transition: background-color 0.2s ease;
    }
    .data-box:hover {
        background-color: #f1f5f9;
    }
</style>
@endpush

<div class="container-fluid">
    @if($laporan->status === 'ditolak')
        <div class="alert alert-danger p-3 mb-4 rounded-3 border-start border-4 border-danger shadow-sm">
            <h5 class="fw-bold mb-1"><i class="fa-solid fa-circle-xmark me-1"></i> Kasus Ditolak oleh Admin</h5>
            <p class="mb-0"><strong>Alasan Penolakan:</strong> {{ $laporan->alasan_penolakan ?? 'Tidak ada alasan penolakan yang dicantumkan.' }}</p>
        </div>
    @endif
    
    @if($laporan->dipantau_lldikti)
        <div class="alert alert-info p-3 mb-4 rounded-3 border-start border-4 border-info shadow-sm bg-info bg-opacity-10">
            <h5 class="fw-bold mb-1 text-info-emphasis"><i class="fa-solid fa-eye me-1"></i> Pemantauan Khusus LLDIKTI Wilayah III</h5>
            <p class="mb-0 text-info-emphasis">Laporan ini sedang dalam pemantauan khusus secara real-time oleh LLDIKTI Wilayah III. Segala tindakan akan dievaluasi ketat.</p>
        </div>
    @endif
    <!-- 1. INTERACTIVE WORKFLOW STEPPER -->
    <div class="card card-custom p-4 mb-4">
        <h6 class="fw-bold text-muted mb-4 text-center">ALUR PROSES KASUS: {{ strtoupper(str_replace('_', ' ', $laporan->tipe_laporan)) }}</h6>
        
        <!-- Workflow Stepper for Bullying -->
        @if($laporan->tipe_laporan === 'kekerasan_bullying')
            @php
                $steps = [
                    'diajukan' => ['name' => 'Laporan Diajukan', 'num' => 1],
                    'menunggu_satgas' => ['name' => 'Satgas Kampus', 'num' => 2],
                    'menunggu_psikolog' => ['name' => 'Psikolog', 'num' => 3],
                    'menunggu_rektor' => ['name' => 'Pimpinan PTS', 'num' => 4],
                    'selesai' => ['name' => 'Selesai', 'num' => 5]
                ];
                
                $currentNum = 1;
                if ($laporan->status === 'menunggu_satgas') $currentNum = 2;
                elseif ($laporan->status === 'menunggu_psikolog') $currentNum = 3;
                elseif ($laporan->status === 'menunggu_rektor') $currentNum = 4;
                elseif ($laporan->status === 'selesai') $currentNum = 5;
                
                $widthPct = (($currentNum - 1) / 4) * 90;
            @endphp
            <div class="stepper-wrapper">
                <div class="stepper-line-progress" style="width: {{ $widthPct }}%;"></div>
                
                <div class="stepper-item completed">
                    <div class="step-counter"><i class="fa-solid fa-check"></i></div>
                    <div class="step-name">Diajukan</div>
                </div>
                <div class="stepper-item {{ $currentNum >= 2 ? ($currentNum > 2 ? 'completed' : 'active') : '' }}">
                    <div class="step-counter">{{ $currentNum > 2 ? '✓' : '2' }}</div>
                    <div class="step-name">Satgas Kampus</div>
                </div>
                <div class="stepper-item {{ $currentNum >= 3 ? ($currentNum > 3 ? 'completed' : 'active') : '' }}">
                    <div class="step-counter">{{ $currentNum > 3 ? '✓' : '3' }}</div>
                    <div class="step-name">Psikolog</div>
                </div>
                <div class="stepper-item {{ $currentNum >= 4 ? ($currentNum > 4 ? 'completed' : 'active') : '' }}">
                    <div class="step-counter">{{ $currentNum > 4 ? '✓' : '4' }}</div>
                    <div class="step-name">Rektor PTS</div>
                </div>
                <div class="stepper-item {{ $currentNum >= 5 ? 'completed' : '' }}">
                    <div class="step-counter">5</div>
                    <div class="step-name">Selesai</div>
                </div>
            </div>

        <!-- Workflow Stepper for Academic Integrity -->
        @elseif($laporan->tipe_laporan === 'integritas_akademik')
            @php
                $currentNum = 1;
                if ($laporan->status === 'menunggu_penilai') $currentNum = 2;
                elseif ($laporan->status === 'menunggu_rektor') $currentNum = 3;
                elseif ($laporan->status === 'selesai') $currentNum = 4;
                
                $widthPct = (($currentNum - 1) / 3) * 90;
            @endphp
            <div class="stepper-wrapper">
                <div class="stepper-line-progress" style="width: {{ $widthPct }}%;"></div>
                
                <div class="stepper-item completed">
                    <div class="step-counter"><i class="fa-solid fa-check"></i></div>
                    <div class="step-name">Diajukan</div>
                </div>
                <div class="stepper-item {{ $currentNum >= 2 ? ($currentNum > 2 ? 'completed' : 'active') : '' }}">
                    <div class="step-counter">{{ $currentNum > 2 ? '✓' : '2' }}</div>
                    <div class="step-name">Tim Penilai</div>
                </div>
                <div class="stepper-item {{ $currentNum >= 3 ? ($currentNum > 3 ? 'completed' : 'active') : '' }}">
                    <div class="step-counter">{{ $currentNum > 3 ? '✓' : '3' }}</div>
                    <div class="step-name">Rektor PTS</div>
                </div>
                <div class="stepper-item {{ $currentNum >= 4 ? 'completed' : '' }}">
                    <div class="step-counter">4</div>
                    <div class="step-name">Selesai</div>
                </div>
            </div>

        <!-- Workflow Stepper for Preventif Counseling -->
        @elseif($laporan->tipe_laporan === 'preventif_konseling')
            @php
                $currentNum = 1;
                if ($laporan->status === 'menunggu_psikolog') $currentNum = 2;
                elseif ($laporan->status === 'menunggu_rektor') $currentNum = 3;
                elseif ($laporan->status === 'selesai') $currentNum = 4;
                
                $widthPct = (($currentNum - 1) / 3) * 90;
            @endphp
            <div class="stepper-wrapper">
                <div class="stepper-line-progress" style="width: {{ $widthPct }}%;"></div>
                
                <div class="stepper-item completed">
                    <div class="step-counter"><i class="fa-solid fa-check"></i></div>
                    <div class="step-name">Diajukan</div>
                </div>
                <div class="stepper-item {{ $currentNum >= 2 ? ($currentNum > 2 ? 'completed' : 'active') : '' }}">
                    <div class="step-counter">{{ $currentNum > 2 ? '✓' : '2' }}</div>
                    <div class="step-name">Psikolog</div>
                </div>
                <div class="stepper-item {{ $currentNum >= 3 ? ($currentNum > 3 ? 'completed' : 'active') : '' }}">
                    <div class="step-counter">{{ $currentNum > 3 ? '✓' : '3' }}</div>
                    <div class="step-name">Rektor PTS</div>
                </div>
                <div class="stepper-item {{ $currentNum >= 4 ? 'completed' : '' }}">
                    <div class="step-counter">4</div>
                    <div class="step-name">Selesai</div>
                </div>
            </div>
        @endif
    </div>

    <!-- 2. MAIN DETAILS -->
    <div class="card card-custom p-4 mb-4">
        <div class="d-flex justify-content-between align-items-start mb-3">
            <span class="badge bg-primary text-white py-1.5 px-3 rounded-3" style="font-size: 0.8rem;">
                @if($laporan->tipe_laporan === 'preventif_konseling') Preventif & Konseling
                @elseif($laporan->tipe_laporan === 'kekerasan_bullying') Kekerasan / Bullying
                @elseif($laporan->tipe_laporan === 'integritas_akademik') Integritas Akademik
                @endif
            </span>
            @include('laporan._status_badge', ['status' => $laporan->status])
        </div>

        <h4 class="fw-bold mb-3">{{ $laporan->judul }}</h4>
        <div class="mb-4">
            <h6 class="fw-semibold text-muted small mb-1">DESKRIPSI ADUAN / KELUHAN:</h6>
            <p class="text-dark bg-light p-3 rounded-3 mb-0" style="white-space: pre-wrap; font-size: 0.9rem; line-height: 1.6;">{{ $laporan->deskripsi }}</p>
        </div>

        <div class="row g-3">
            <div class="col-md-4">
                <span class="d-block small text-muted font-bold">NAMA PELAPOR</span>
                <span class="fw-semibold text-dark">{{ $laporan->pelapor_nama }}</span>
            </div>
            <div class="col-md-4">
                <span class="d-block small text-muted font-bold">TIPE PELAPOR</span>
                <span class="fw-semibold text-dark">{{ $laporan->pelapor_tipe ?? '-' }}</span>
            </div>

            <div class="col-md-4 mt-2">
                <span class="d-block small text-muted font-bold">NIK / NIP / NIM</span>
                <span class="fw-semibold text-dark">{{ $laporan->pelapor_nim_nidn }}</span>
            </div>
            <div class="col-md-4 mt-2">
                <span class="d-block small text-muted font-bold">JENIS KELAMIN</span>
                <span class="fw-semibold text-dark">{{ $laporan->jenis_kelamin ?? '-' }}</span>
            </div>
            <div class="col-md-4 mt-2">
                <span class="d-block small text-muted font-bold">EMAIL</span>
                <span class="fw-semibold text-dark">{{ $laporan->pelapor_email }}</span>
            </div>
            <div class="col-md-4 mt-2">
                <span class="d-block small text-muted font-bold">NOMOR TELEPON</span>
                <span class="fw-semibold text-dark">{{ $laporan->no_telepon ?? '-' }}</span>
            </div>
            <div class="col-md-4 mt-2">
                <span class="d-block small text-muted font-bold">UNIVERSITAS / PTS</span>
                <span class="fw-semibold text-dark">{{ $laporan->pts_nama }}</span>
            </div>
            <div class="col-md-4 mt-2">
                <span class="d-block small text-muted font-bold">TANGGAL DIAJUKAN</span>
                <span class="fw-semibold text-dark">{{ $laporan->created_at->format('d M Y H:i') }} WIB</span>
            </div>
            <div class="col-md-4 mt-2">
                <span class="d-block small text-muted font-bold">TANGGAL KEJADIAN</span>
                <span class="fw-semibold text-dark">{{ $laporan->tanggal_kejadian ? \Carbon\Carbon::parse($laporan->tanggal_kejadian)->format('d M Y') : '-' }}</span>
            </div>
            <div class="col-md-4 mt-2">
                <span class="d-block small text-muted font-bold">LOKASI KEJADIAN</span>
                <span class="fw-semibold text-dark">{{ $laporan->lokasi_kejadian ?? '-' }}</span>
            </div>
            @if($laporan->jenis_kekerasan)
            <div class="col-md-4 mt-2">
                <span class="d-block small text-muted font-bold">JENIS KEKERASAN</span>
                <span class="badge bg-danger">{{ $laporan->jenis_kekerasan }}</span>
            </div>
            @endif
            @if($laporan->jalur)
            <div class="col-md-4 mt-2">
                <span class="d-block small text-muted font-bold">JALUR KONSELING</span>
                <span class="badge bg-secondary">{{ ucfirst($laporan->jalur) }}</span>
            </div>
            @endif
        </div>

        <!-- Dokumen Lampiran / Berkas Unggahan -->
        @if($laporan->file_identitas || $laporan->file_bukti)
        <div class="mt-4 pt-3 border-top">
            <h6 class="fw-semibold text-muted small mb-2">BERKAS LAMPIRAN:</h6>
            <div class="d-flex flex-wrap gap-2">
                @if($laporan->file_identitas)
                <button type="button" class="btn btn-sm btn-outline-primary rounded-3 px-3" data-bs-toggle="modal" data-bs-target="#identitasModal">
                    <i class="fa-solid fa-file-invoice me-1"></i> Lihat Kartu Identitas
                </button>
                @endif
                @if($laporan->file_bukti)
                <button type="button" class="btn btn-sm btn-outline-danger rounded-3 px-3" data-bs-toggle="modal" data-bs-target="#buktiModal">
                    <i class="fa-solid fa-file-shield me-1"></i> Lihat Bukti Kejadian
                </button>
                @endif
            </div>
        </div>

        <!-- Export Action -->
        @if($laporan->status === 'selesai')
        <div class="mt-4 pt-3 border-top">
            @if($laporan->eksekusiRektor && $laporan->eksekusiRektor->file_bukti_selesai)
            <div class="d-flex gap-2 mb-2">
                <button type="button" data-bs-toggle="modal" data-bs-target="#buktiSelesaiModal" class="btn btn-success fw-bold py-2 rounded-3 w-100">
                    <i class="fa-solid fa-eye me-1"></i> Buka Dokumen Selesai
                </button>
                <a href="{{ asset('storage/' . $laporan->eksekusiRektor->file_bukti_selesai) }}" download class="btn btn-primary fw-bold py-2 rounded-3 w-100">
                    <i class="fa-solid fa-download me-1"></i> Unduh Dokumen Selesai
                </a>
            </div>
            <a href="{{ route('laporan.export', ['id' => $laporan->id]) }}" target="_blank" class="btn btn-outline-secondary fw-bold py-2 rounded-3 w-100">
                <i class="fa-solid fa-file-pdf me-1"></i> Unduh Ringkasan Kasus (Sistem)
            </a>
            @else
            <div class="d-flex gap-2 mb-2">
                <button type="button" data-bs-toggle="modal" data-bs-target="#exportModal" class="btn btn-success fw-bold py-2 rounded-3 w-100">
                    <i class="fa-solid fa-eye me-1"></i> Buka Dokumen Selesai
                </button>
                <a href="{{ route('laporan.export', ['id' => $laporan->id, 'download' => 1]) }}" class="btn btn-primary fw-bold py-2 rounded-3 w-100">
                    <i class="fa-solid fa-download me-1"></i> Unduh Dokumen Selesai
                </a>
            </div>
            @endif
        </div>
        @endif
    </div>

    <!-- 3. ACTION RECORDS / FORMS (GRID LAYOUT) -->
    <h5 class="fw-bold mb-3 mt-5 border-bottom pb-2"><i class="fa-solid fa-layer-group me-1"></i> Panel Penanganan & Tindakan</h5>
    <div class="row g-4">
            
            <!-- ============================================== -->
            <!-- 0. ADMIN DECISION GATEKEEPER CARD -->
            <!-- ============================================== -->
            <div class="col-lg-6 col-xl-4 d-flex align-items-stretch">
            <div class="card card-custom p-4 border-start border-4 border-warning shadow-sm w-100" style="background-color: #fffaf0; position: relative; overflow: hidden;">
                <!-- Decorative background element -->
                <div style="position: absolute; top: -20px; right: -20px; opacity: 0.05; transform: rotate(15deg); pointer-events: none;">
                    <i class="fa-solid fa-shield-halved" style="font-size: 10rem;"></i>
                </div>
                
                <h5 class="fw-bold mb-4 text-warning" style="letter-spacing: 0.5px; position: relative; z-index: 2;"><i class="fa-solid fa-user-shield me-2"></i> Verifikasi Awal Admin</h5>
                
                @if($laporan->status === 'ditolak')
                    <div class="p-4 rounded-4 h-100 d-flex flex-column justify-content-center" style="background: linear-gradient(145deg, #fff1f2, #ffe4e6); border: 1px solid #fecdd3; box-shadow: 0 4px 15px rgba(225, 29, 72, 0.05); position: relative; z-index: 2;">
                        <div class="d-flex align-items-center mb-3">
                            <div class="bg-danger text-white rounded-circle d-flex align-items-center justify-content-center me-3 shadow-sm" style="width: 48px; height: 48px;">
                                <i class="fa-solid fa-xmark fs-4"></i>
                            </div>
                            <h6 class="fw-bold mb-0 text-danger fs-5">Laporan Ditolak</h6>
                        </div>
                        <span class="d-block small text-danger font-bold mt-2 opacity-75">ALASAN PENOLAKAN:</span>
                        <div class="mt-2 text-dark bg-white p-3 rounded-3 shadow-sm border border-danger-subtle small" style="white-space: pre-wrap; font-weight: 500;">{{ $laporan->alasan_penolakan }}</div>
                    </div>
                @elseif(!str_contains($laporan->deskripsi, '[DIVERIFIKASI ADMIN]'))
                    @if(auth()->user()->isAdmin())
                        <div class="alert alert-warning border-warning-subtle text-dark small fw-medium mb-3 shadow-sm rounded-3" style="position: relative; z-index: 2;">
                            <i class="fa-solid fa-circle-info text-warning me-2"></i> Sebagai Admin, Anda dapat memverifikasi dan memutuskan kelayakan laporan ini sebelum diproses lebih lanjut.
                        </div>
                        
                        <form action="{{ route('laporan.admin_keputusan', $laporan->id) }}" method="POST" style="position: relative; z-index: 2;">
                            @csrf
                            <div class="mb-4">
                                <label class="form-label small fw-bold text-secondary mb-3">KEPUTUSAN ANDA:</label>
                                <div class="form-check p-3 rounded-3 mb-3" style="background: linear-gradient(to right, #ecfdf5, #ffffff); border: 1px solid #a7f3d0; transition: all 0.2s ease;" onmouseover="this.style.boxShadow='0 4px 12px rgba(16, 185, 129, 0.1)'" onmouseout="this.style.boxShadow='none'">
                                    <input class="form-check-input ms-1" type="radio" name="admin_keputusan" id="admin_terima" value="Terima" onchange="toggleAdminDecision()" checked style="transform: scale(1.2); margin-top: 0.3rem;">
                                    <label class="form-check-label fw-bold text-success ms-3" for="admin_terima" style="cursor: pointer;">Terima & Lanjutkan Proses Kasus</label>
                                </div>
                                <div class="form-check p-3 rounded-3" style="background: linear-gradient(to right, #fef2f2, #ffffff); border: 1px solid #fecaca; transition: all 0.2s ease;" onmouseover="this.style.boxShadow='0 4px 12px rgba(239, 68, 68, 0.1)'" onmouseout="this.style.boxShadow='none'">
                                    <input class="form-check-input ms-1" type="radio" name="admin_keputusan" id="admin_tolak" value="Tolak" onchange="toggleAdminDecision()" style="transform: scale(1.2); margin-top: 0.3rem;">
                                    <label class="form-check-label fw-bold text-danger ms-3" for="admin_tolak" style="cursor: pointer;">Tolak Laporan (Kirim Email Penolakan)</label>
                                </div>
                            </div>

                            <div id="admin_sub_tolak" class="d-none mt-3">
                                <div class="mb-3">
                                    <label for="alasan_penolakan" class="form-label small fw-bold text-danger">ALASAN PENOLAKAN</label>
                                    <textarea class="form-control shadow-sm" id="alasan_penolakan" name="alasan_penolakan" rows="3" placeholder="Tulis alasan rinci mengapa laporan ini ditolak. Alasan ini akan dikirim via Email ke pelapor." style="border: 1px solid #fca5a5; resize: none;"></textarea>
                                </div>
                                <button type="submit" class="btn btn-danger w-100 fw-bold py-2 rounded-3 shadow-sm d-flex align-items-center justify-content-center" style="transition: all 0.2s ease;">
                                    <i class="fa-solid fa-paper-plane me-2"></i> Tolak & Kirim Email
                                </button>
                            </div>

                            <div id="admin_sub_terima" class="mt-4">
                                <button type="submit" class="btn w-100 fw-bold py-3 rounded-3 text-white shadow" style="background: linear-gradient(135deg, #10b981, #059669); border: none; letter-spacing: 0.5px; transition: all 0.3s ease;" onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 8px 20px rgba(16, 185, 129, 0.3)';" onmouseout="this.style.transform='none'; this.style.boxShadow='0 4px 6px rgba(0, 0, 0, 0.1)';">
                                    <i class="fa-solid fa-check-circle me-2 fs-5"></i> VERIFIKASI KASUS VALID
                                </button>
                            </div>
                        </form>

                        @push('scripts')
                        <script>
                            function toggleAdminDecision() {
                                const decision = document.querySelector('input[name="admin_keputusan"]:checked').value;
                                const subTolak = document.getElementById('admin_sub_tolak');
                                const subTerima = document.getElementById('admin_sub_terima');
                                const fieldAlasan = document.getElementById('alasan_penolakan');

                                if (decision === 'Tolak') {
                                    subTolak.classList.remove('d-none');
                                    subTerima.classList.add('d-none');
                                    fieldAlasan.setAttribute('required', 'required');
                                } else {
                                    subTolak.classList.add('d-none');
                                    subTerima.classList.remove('d-none');
                                    fieldAlasan.removeAttribute('required');
                                }
                            }
                        </script>
                        @endpush
                    @else
                        <div class="h-100 d-flex flex-column justify-content-center align-items-center p-4 rounded-4" style="background: linear-gradient(145deg, #f8fafc, #f1f5f9); border: 1px dashed #cbd5e1; position: relative; z-index: 2;">
                            <div class="spinner-grow text-warning mb-3" role="status" style="width: 3rem; height: 3rem; opacity: 0.8;">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                            <h6 class="fw-bold text-secondary mb-2">Menunggu Verifikasi Admin</h6>
                            <p class="text-muted small text-center mb-0">Laporan sedang dalam antrean untuk dicek kelayakannya oleh Admin LLDIKTI.</p>
                        </div>
                    @endif
                @else
                    <div class="p-4 rounded-4 h-100 d-flex flex-column justify-content-center align-items-center text-center shadow-sm" style="background: linear-gradient(145deg, #f0fdf4, #dcfce7); border: 1px solid #bbf7d0; position: relative; z-index: 2;">
                        <div class="bg-success text-white rounded-circle d-flex align-items-center justify-content-center mb-3 shadow" style="width: 70px; height: 70px;">
                            <i class="fa-solid fa-check fs-1"></i>
                        </div>
                        <span class="fs-5 fw-bold text-success mb-2" style="letter-spacing: 0.5px;">Laporan Terverifikasi Valid</span>
                        <div class="mx-auto mt-2" style="width: 40px; height: 3px; background-color: #22c55e; border-radius: 2px;"></div>
                        <span class="fw-medium mt-3 text-secondary small px-3">Kasus ini telah disetujui oleh Admin dan diteruskan ke tahap penanganan selanjutnya.</span>
                    </div>
                @endif
            </div>
            </div>

            <!-- ============================================== -->
            <!-- 2.1 SATGAS KAMPUS ACTION CARD (ANTI-BULLYING) -->
            <!-- ============================================== -->
            @if($laporan->tipe_laporan === 'kekerasan_bullying')
            <div class="col-lg-6 col-xl-4 d-flex align-items-stretch">
            <div class="card card-custom p-4 border-start border-4 border-danger w-100" style="position: relative; overflow: hidden; background-color: #fffafb;">
                <!-- Decorative background element -->
                <div style="position: absolute; top: -20px; right: -20px; opacity: 0.03; transform: rotate(15deg); pointer-events: none;">
                    <i class="fa-solid fa-shield-halved" style="font-size: 10rem;"></i>
                </div>
                
                <h5 class="fw-bold mb-4 text-danger" style="letter-spacing: 0.5px; position: relative; z-index: 2;"><i class="fa-solid fa-shield-halved me-2"></i> Peran: Satgas Kampus</h5>
                
                @if(auth()->user()->isAdmin())
                    @if($laporan->tindakanSatgas)
                        @if($laporan->tindakanSatgas->lindungi_korban)
                            <div class="bg-danger-subtle p-3 rounded-3 mb-3 small text-danger fw-bold border border-danger-subtle">
                                <i class="fa-solid fa-heart me-1"></i> Laporan Diterima & Perlindungan Korban Diaktifkan!
                            </div>
                        @else
                            <div class="bg-dark p-3 rounded-3 mb-3 small text-white fw-bold">
                                <i class="fa-solid fa-ban me-1"></i> Laporan Ditolak oleh Satgas!
                            </div>
                        @endif
                    @endif

                    <form action="{{ route('laporan.satgas', $laporan->id) }}" method="POST">
                        @csrf
                        <div class="mb-3">
                            <label class="form-label small fw-bold text-muted">UBAH/BERI KEPUTUSAN SATGAS:</label>
                            <div class="form-check bg-success-subtle p-2 rounded-3 mb-2">
                                <input class="form-check-input ms-1 mt-1" type="radio" name="satgas_keputusan" id="satgas_terima" value="Terima" onchange="toggleDecisionSubFieldsSatgas()" {{ (!$laporan->tindakanSatgas || $laporan->tindakanSatgas->lindungi_korban) ? 'checked' : '' }}>
                                <label class="form-check-label fw-bold text-success ms-2" for="satgas_terima">Terima & Lindungi Korban</label>
                            </div>
                            <div class="form-check bg-danger-subtle p-2 rounded-3">
                                <input class="form-check-input ms-1 mt-1" type="radio" name="satgas_keputusan" id="satgas_tolak" value="Tolak" onchange="toggleDecisionSubFieldsSatgas()" {{ ($laporan->tindakanSatgas && !$laporan->tindakanSatgas->lindungi_korban) ? 'checked' : '' }}>
                                <label class="form-check-label fw-bold text-danger ms-2" for="satgas_tolak">Tolak Laporan</label>
                            </div>
                        </div>
                        
                        <div id="satgas_sub_terima" class="{{ ($laporan->tindakanSatgas && !$laporan->tindakanSatgas->lindungi_korban) ? 'd-none' : '' }}">
                            <div class="mb-3">
                                <label for="bantuan_hukum_rumah_aman" class="form-label small fw-bold text-muted">BANTUAN HUKUM / RUMAH AMAN DETAIL</label>
                                <textarea class="form-control" id="bantuan_hukum_rumah_aman" name="bantuan_hukum_rumah_aman" rows="3" placeholder="Tuliskan bantuan hukum atau relokasi rumah aman yang diberikan kepada korban..." {{ (!$laporan->tindakanSatgas || $laporan->tindakanSatgas->lindungi_korban) ? 'required' : '' }}>{{ $laporan->tindakanSatgas->bantuan_hukum_rumah_aman ?? '' }}</textarea>
                            </div>
                            <div class="mb-3">
                                <label for="catatan_satgas" class="form-label small fw-bold text-muted">CATATAN TAMBAHAN</label>
                                <textarea class="form-control" id="catatan_satgas" name="catatan" rows="2" placeholder="Catatan satgas...">{{ $laporan->tindakanSatgas->catatan ?? '' }}</textarea>
                            </div>
                            <button type="submit" class="btn btn-danger w-100 fw-bold py-2 rounded-3">
                                <i class="fa-solid fa-hand-holding-heart me-1"></i> Simpan Keputusan
                            </button>
                        </div>

                        <div id="satgas_sub_tolak" class="{{ (!$laporan->tindakanSatgas || $laporan->tindakanSatgas->lindungi_korban) ? 'd-none' : '' }}">
                            <div class="mb-3">
                                <label for="alasan_penolakan" class="form-label small fw-bold text-muted">ALASAN PENOLAKAN (Akan dikirim via Email)</label>
                                <textarea class="form-control" id="alasan_penolakan" name="alasan_penolakan" rows="3" placeholder="Tulis alasan laporan ditolak..." {{ ($laporan->tindakanSatgas && !$laporan->tindakanSatgas->lindungi_korban) ? 'required' : '' }}>{{ $laporan->tindakanSatgas->catatan ?? '' }}</textarea>
                            </div>
                            <button type="submit" class="btn btn-dark w-100 fw-bold py-2 rounded-3">
                                <i class="fa-solid fa-ban me-1"></i> Simpan Penolakan
                            </button>
                        </div>
                    </form>

                    @push('scripts')
                    <script>
                        function toggleDecisionSubFieldsSatgas() {
                            const decisionVal = document.querySelector('input[name="satgas_keputusan"]:checked').value;
                            const subTerima = document.getElementById('satgas_sub_terima');
                            const subTolak = document.getElementById('satgas_sub_tolak');
                            const fieldBantuan = document.getElementById('bantuan_hukum_rumah_aman');
                            const fieldAlasan = document.getElementById('alasan_penolakan');

                            if (decisionVal === 'Terima') {
                                subTerima.classList.remove('d-none');
                                subTolak.classList.add('d-none');
                                fieldBantuan.setAttribute('required', 'required');
                                fieldAlasan.removeAttribute('required');
                            } else {
                                subTerima.classList.add('d-none');
                                subTolak.classList.remove('d-none');
                                fieldBantuan.removeAttribute('required');
                                fieldAlasan.setAttribute('required', 'required');
                            }
                        }
                    </script>
                    @endpush

                    @if($laporan->tindakanSatgas)
                        <small class="text-muted d-block text-end mt-3">Terakhir diubah oleh: {{ $laporan->tindakanSatgas->satgas->name }} ({{ $laporan->tindakanSatgas->updated_at->format('d M Y') }})</small>
                    @endif
                @else
                    <!-- View only for non-admin -->
                    @if($laporan->tindakanSatgas)
                        @if($laporan->tindakanSatgas->lindungi_korban)
                            <div class="bg-danger-subtle p-3 rounded-3 mb-2 small text-danger fw-bold">
                                <i class="fa-solid fa-heart me-1"></i> Perlindungan Korban Diaktifkan!
                            </div>
                            <div class="mb-2">
                                <span class="d-block small text-muted font-bold">Bantuan Hukum / Rumah Aman:</span>
                                <p class="mb-0 text-dark bg-light p-2 rounded small" style="white-space: pre-wrap;">{{ $laporan->tindakanSatgas->bantuan_hukum_rumah_aman }}</p>
                            </div>
                        @else
                            <div class="bg-dark p-3 rounded-3 mb-2 small text-white fw-bold">
                                <i class="fa-solid fa-ban me-1"></i> Laporan Ditolak oleh Satgas!
                            </div>
                        @endif
                        <div class="mb-2">
                            <span class="d-block small text-muted font-bold">Catatan Satgas:</span>
                            <p class="mb-0 text-dark bg-light p-2 rounded small" style="white-space: pre-wrap;">{{ $laporan->tindakanSatgas->catatan ?? '-' }}</p>
                        </div>
                        <small class="text-muted d-block text-end mt-2">Oleh: {{ $laporan->tindakanSatgas->satgas->name }} ({{ $laporan->tindakanSatgas->created_at->format('d M Y') }})</small>
                    @else
                        <div class="h-100 d-flex flex-column justify-content-center align-items-center p-4 rounded-4" style="background: linear-gradient(145deg, #f8fafc, #f1f5f9); border: 1px dashed #cbd5e1; position: relative; z-index: 2;">
                            <div class="spinner-grow text-danger mb-3" role="status" style="width: 3rem; height: 3rem; opacity: 0.8;">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                            <h6 class="fw-bold text-secondary mb-2 text-center">Menunggu Tindakan Satgas</h6>
                            <p class="text-muted small text-center mb-0">Menunggu Satgas Kampus mengaktifkan perlindungan korban dan meneruskan kasus ke Psikolog.</p>
                        </div>
                    @endif
                @endif
            </div>
            </div>
            @endif


            <!-- ============================================== -->
            <!-- 2.2 TIM PENILAI ILMIAH ACTION CARD -->
            <!-- ============================================== -->
            @if($laporan->tipe_laporan === 'integritas_akademik')
            <div class="col-lg-6 col-xl-4 d-flex align-items-stretch">
            <div class="card card-custom p-4 border-start border-4 border-warning w-100" style="position: relative; overflow: hidden; background-color: #fffffb;">
                <!-- Decorative background element -->
                <div style="position: absolute; top: -20px; right: -20px; opacity: 0.04; transform: rotate(-10deg); pointer-events: none;">
                    <i class="fa-solid fa-gavel" style="font-size: 10rem;"></i>
                </div>
                
                <h5 class="fw-bold mb-4 text-warning" style="letter-spacing: 0.5px; position: relative; z-index: 2;"><i class="fa-solid fa-gavel me-2"></i> Peran: Tim Penilai Ilmiah</h5>
                
                <!-- Action details if exists -->
                @if($laporan->tindakanPenilai)
                    <div class="row g-2 mb-2">
                        @if($laporan->tindakanPenilai->sidang_etik_hari)
                        <div class="col-12 mb-2">
                            <div class="bg-warning-subtle p-3 rounded-3 border border-warning-subtle text-warning-emphasis small">
                                <h6 class="fw-bold mb-1"><i class="fa-solid fa-calendar-day me-1"></i> Sidang Etik Terjadwal!</h6>
                                <p class="mb-1"><strong>Hari:</strong> {{ $laporan->tindakanPenilai->sidang_etik_hari }}</p>
                                <p class="mb-1"><strong>Tanggal:</strong> {{ \Carbon\Carbon::parse($laporan->tindakanPenilai->sidang_etik_tanggal)->format('d M Y') }}</p>
                                <p class="mb-0"><strong>Waktu:</strong> {{ $laporan->tindakanPenilai->sidang_etik_jam }} WIB</p>
                            </div>
                        </div>
                        @endif
                        <div class="col-12">
                            <span class="d-block small text-muted font-bold">Hasil Cek Plagiarisme:</span>
                            <span class="badge bg-danger fs-6 fw-bold">{{ $laporan->tindakanPenilai->cek_plagiat_score }}% Kemiripan</span>
                        </div>
                        <div class="col-12">
                            <span class="d-block small text-muted font-bold">Detail Sidang Etik:</span>
                            <p class="mb-0 text-dark bg-light p-2 rounded small" style="white-space: pre-wrap;">{{ $laporan->tindakanPenilai->sidang_etik_detail }}</p>
                        </div>
                        <div class="col-12">
                            <span class="d-block small text-muted font-bold">Rekomendasi Sanksi Akademik:</span>
                            <p class="mb-0 text-dark bg-light p-2 rounded small fw-bold text-danger" style="white-space: pre-wrap;">{{ $laporan->tindakanPenilai->rekomendasi_sanksi }}</p>
                        </div>
                    </div>
                    <small class="text-muted d-block text-end mt-2">Oleh: {{ $laporan->tindakanPenilai->penilai->name }} ({{ $laporan->tindakanPenilai->created_at->format('d M Y') }})</small>
                
                <!-- Interactive Input form if role is Penilai or Admin -->
                @elseif(auth()->user()->isAdmin() || (auth()->user()->isPenilaiRole() && auth()->user()->pts_nama === $laporan->pts_nama))
                    <form action="{{ route('laporan.penilai', $laporan->id) }}" method="POST">
                        @csrf
                        <fieldset {{ $laporan->status !== 'menunggu_penilai' ? 'disabled' : '' }}>
                            <div class="mb-3">
                                <label class="form-label small fw-bold text-muted">KEPUTUSAN PENILAI:</label>
                                <div class="form-check bg-success-subtle p-2 rounded-3 mb-2">
                                    <input class="form-check-input ms-1 mt-1" type="radio" name="penilai_keputusan" id="penilai_terima" value="Terima" onchange="toggleDecisionPenilai()" checked>
                                    <label class="form-check-label fw-bold text-success ms-2" for="penilai_terima">Terima & Jadwalkan Sidang Etik</label>
                                </div>
                                <div class="form-check bg-danger-subtle p-2 rounded-3">
                                    <input class="form-check-input ms-1 mt-1" type="radio" name="penilai_keputusan" id="penilai_tolak" value="Tolak" onchange="toggleDecisionPenilai()">
                                    <label class="form-check-label fw-bold text-danger ms-2" for="penilai_tolak">Tolak Laporan</label>
                                </div>
                            </div>
                            
                            <div id="penilai_sub_terima">
                                <div class="row g-2 mb-3">
                                    <div class="col-md-6">
                                        <label for="sidang_etik_tanggal" class="form-label small fw-bold text-muted">TANGGAL SIDANG ETIK</label>
                                        <input type="date" class="form-control" id="sidang_etik_tanggal" name="sidang_etik_tanggal" onchange="setHariPenilai()" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="sidang_etik_hari" class="form-label small fw-bold text-muted">HARI</label>
                                        <input type="text" class="form-control" id="sidang_etik_hari" name="sidang_etik_hari" readonly required>
                                    </div>
                                    <div class="col-md-12">
                                        <label for="sidang_etik_jam" class="form-label small fw-bold text-muted">JAM SIDANG (WIB)</label>
                                        <input type="time" class="form-control" id="sidang_etik_jam" name="sidang_etik_jam" required>
                                    </div>
                                </div>
                                
                                <div class="mb-3">
                                    <label for="pesan_pelapor_penilai" class="form-label small fw-bold text-muted">PESAN KEPADA PELAPOR (Dikirim via WhatsApp)</label>
                                    <textarea class="form-control" id="pesan_pelapor_penilai" name="pesan_pelapor" rows="2" placeholder="Contoh: Harap hadir tepat waktu melalui link Zoom/lokasi berikut..." required></textarea>
                                </div>

                                <div class="mb-3">
                                    <label for="cek_plagiat_score" class="form-label small fw-bold text-muted">SKOR PLAGIARISME (%)</label>
                                    <input type="number" class="form-control" id="cek_plagiat_score" name="cek_plagiat_score" min="0" max="100" placeholder="Misal: 45" required>
                                </div>
                                <div class="mb-3">
                                    <label for="sidang_etik_detail" class="form-label small fw-bold text-muted">DETAIL SIDANG ETIK / CATATAN AWAL</label>
                                    <textarea class="form-control" id="sidang_etik_detail" name="sidang_etik_detail" rows="3" placeholder="Hasil/notulensi jalannya sidang etik..." required></textarea>
                                </div>
                                <div class="mb-3">
                                    <label for="rekomendasi_sanksi" class="form-label small fw-bold text-muted">REKOMENDASI SANKSI AKADEMIK</label>
                                    <textarea class="form-control" id="rekomendasi_sanksi" name="rekomendasi_sanksi" rows="2" placeholder="Sanksi akademik apa yang direkomendasikan..." required></textarea>
                                </div>
                                <button type="submit" class="btn btn-warning text-dark w-100 fw-bold py-2 rounded-3">
                                    <i class="fa-solid fa-paper-plane me-1"></i> Jadwalkan sidang dan kirim
                                </button>
                            </div>
                            
                            <div id="penilai_sub_tolak" class="d-none">
                                <div class="mb-3">
                                    <label for="alasan_penolakan_penilai" class="form-label small fw-bold text-danger">ALASAN PENOLAKAN</label>
                                    <textarea class="form-control border-danger" id="alasan_penolakan_penilai" name="alasan_penolakan" rows="3" placeholder="Tulis alasan mengapa laporan plagiarisme ini ditolak. Pesan WA akan dikirimkan ke pelapor..."></textarea>
                                </div>
                                <button type="submit" class="btn btn-danger w-100 fw-bold py-2 rounded-3">
                                    <i class="fa-solid fa-ban me-1"></i> Tolak Kasus & Kirim via WhatsApp
                                </button>
                            </div>
                        </fieldset>
                        @if($laporan->status !== 'menunggu_penilai')
                            <div class="alert alert-warning mt-2 mb-0 py-2 small fw-bold text-center">
                                <i class="fa-solid fa-lock me-1"></i> Form ini terkunci hingga tahapan sebelumnya diselesaikan.
                            </div>
                        @endif
                    </form>

                    @push('scripts')
                    <script>
                        function setHariPenilai() {
                            const dateVal = document.getElementById('sidang_etik_tanggal').value;
                            if(dateVal) {
                                const date = new Date(dateVal);
                                const days = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'];
                                document.getElementById('sidang_etik_hari').value = days[date.getDay()];
                            }
                        }
                        
                        function toggleDecisionPenilai() {
                            const decision = document.querySelector('input[name="penilai_keputusan"]:checked').value;
                            const subTerima = document.getElementById('penilai_sub_terima');
                            const subTolak = document.getElementById('penilai_sub_tolak');
                            const fieldAlasan = document.getElementById('alasan_penolakan_penilai');
                            
                            const inputsTerima = subTerima.querySelectorAll('input, textarea');

                            if (decision === 'Tolak') {
                                subTolak.classList.remove('d-none');
                                subTerima.classList.add('d-none');
                                fieldAlasan.setAttribute('required', 'required');
                                inputsTerima.forEach(input => input.removeAttribute('required'));
                            } else {
                                subTolak.classList.add('d-none');
                                subTerima.classList.remove('d-none');
                                fieldAlasan.removeAttribute('required');
                                inputsTerima.forEach(input => input.setAttribute('required', 'required'));
                            }
                        }
                    </script>
                    @endpush
                @else
                    <div class="h-100 d-flex flex-column justify-content-center align-items-center p-4 rounded-4 mt-auto" style="background: linear-gradient(145deg, #f8fafc, #f1f5f9); border: 1px dashed #cbd5e1; position: relative; z-index: 2;">
                        <div class="spinner-grow text-warning mb-3" role="status" style="width: 3rem; height: 3rem; opacity: 0.8;">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <h6 class="fw-bold text-secondary mb-2 text-center">Menunggu Tim Penilai</h6>
                        <p class="text-muted small text-center mb-0">Menunggu Tim Penilai Ilmiah melaksanakan sidang etik & cek plagiat lalu merilis rekomendasi sanksi ke Rektor.</p>
                    </div>
                @endif
            </div>
            </div>
            @endif


            <!-- ============================================== -->
            <!-- 2.3 PSIKOLOG ACTION CARD (CONFIDENTIAL) -->
            <!-- ============================================== -->
            @if($laporan->tipe_laporan === 'preventif_konseling' || $laporan->tipe_laporan === 'kekerasan_bullying')
            <div class="col-lg-6 col-xl-4 d-flex align-items-stretch">
            <div class="card card-custom p-4 border-start border-4 border-info w-100" style="position: relative; overflow: hidden; background-color: #f8ffff;">
                <!-- Decorative background element -->
                <div style="position: absolute; top: -20px; right: -20px; opacity: 0.04; transform: rotate(10deg); pointer-events: none;">
                    <i class="fa-solid fa-user-doctor" style="font-size: 10rem;"></i>
                </div>
                
                <h5 class="fw-bold mb-4 text-info" style="letter-spacing: 0.5px; position: relative; z-index: 2;"><i class="fa-solid fa-user-doctor me-2"></i> Peran: Psikolog (Dasbor Rahasia)</h5>
                
                <!-- Action details if exists AND fully complete -->
                @if($laporan->catatanKlinisPsikolog && $laporan->catatanKlinisPsikolog->catatan_klinis)
                    @if($laporan->catatanKlinisPsikolog->jadwal_hari)
                        <div class="bg-success-subtle p-3 rounded-3 mb-3 border border-success-subtle text-success small">
                            <h6 class="fw-bold mb-1"><i class="fa-solid fa-calendar-check me-1"></i> Pertemuan Tatap Muka Terjadwal!</h6>
                            <p class="mb-1"><strong>Hari:</strong> {{ $laporan->catatanKlinisPsikolog->jadwal_hari }}</p>
                            <p class="mb-1"><strong>Tanggal:</strong> {{ \Carbon\Carbon::parse($laporan->catatanKlinisPsikolog->jadwal_tanggal)->format('d M Y') }}</p>
                            <p class="mb-0"><strong>Waktu:</strong> {{ $laporan->catatanKlinisPsikolog->jadwal_jam }} WIB</p>
                        </div>
                    @endif
                    <div class="mb-2">
                        <span class="d-block small text-muted font-bold">Sesi Konseling Online:</span>
                        <p class="mb-0 text-dark bg-light p-2 rounded small">
                            <i class="fa-solid fa-video text-info me-1"></i> {{ $laporan->catatanKlinisPsikolog->sesi_konseling_online }}
                        </p>
                    </div>

                    <!-- Clinical notes is confidential and restricted! -->
                    <div class="mb-2">
                        <span class="d-block small text-muted font-bold">Catatan Klinis Rahasia:</span>
                        @if(auth()->user()->isPsikologRole())
                            <p class="mb-0 text-dark bg-danger-subtle p-2 rounded small text-danger-emphasis border border-danger-subtle" style="white-space: pre-wrap;">
                                <i class="fa-solid fa-lock-open me-1"></i> {{ $laporan->catatanKlinisPsikolog->catatan_klinis }}
                            </p>
                        @else
                            <div class="p-2 rounded bg-light text-muted small d-flex align-items-center gap-2">
                                <i class="fa-solid fa-lock text-danger"></i>
                                <span>[ CONFIDENTIAL: Rahasia Klinis Hanya Untuk Psikolog ]</span>
                            </div>
                        @endif
                    </div>

                    <div class="mb-2">
                        <span class="d-block small text-muted font-bold">Log Pemulihan Korban:</span>
                        <p class="mb-0 text-dark bg-light p-2 rounded small" style="white-space: pre-wrap;">{{ $laporan->catatanKlinisPsikolog->log_pemulihan }}</p>
                    </div>
                    <small class="text-muted d-block text-end mt-2">Oleh: {{ $laporan->catatanKlinisPsikolog->psikolog->name }} ({{ $laporan->catatanKlinisPsikolog->created_at->format('d M Y') }})</small>
                   <!-- Interactive Input form if role is Psikolog or Admin -->
                @elseif(auth()->user()->isAdmin() || (auth()->user()->isPsikologRole() && auth()->user()->pts_nama === $laporan->pts_nama))
                    @if(!$laporan->catatanKlinisPsikolog || !$laporan->catatanKlinisPsikolog->jadwal_tanggal)
                        <form action="{{ route('laporan.psikolog', $laporan->id) }}" method="POST">
                            @csrf
                            <fieldset {{ $laporan->status !== 'menunggu_psikolog' ? 'disabled' : '' }}>
                                <div class="bg-light p-3 rounded mb-3 border">
                                    <h6 class="fw-bold mb-3"><i class="fa-solid fa-calendar-plus me-1"></i> 1. Penjadwalan Konseling</h6>
                                    <div class="row g-2 mb-3">
                                        <div class="col-md-6">
                                            <label for="jadwal_tanggal" class="form-label small fw-bold text-muted">TANGGAL KONSELING</label>
                                            <input type="date" class="form-control" id="jadwal_tanggal" name="jadwal_tanggal" onchange="setHari()" required>
                                        </div>
                                        <div class="col-md-6">
                                            <label for="jadwal_hari" class="form-label small fw-bold text-muted">HARI</label>
                                            <input type="text" class="form-control" id="jadwal_hari" name="jadwal_hari" readonly required>
                                        </div>
                                        <div class="col-md-12">
                                            <label for="jadwal_jam" class="form-label small fw-bold text-muted">JAM KONSELING</label>
                                            <input type="time" class="form-control" id="jadwal_jam" name="jadwal_jam" required>
                                        </div>
                                    </div>
                                    
                                    <div class="mb-3">
                                        <label for="sesi_konseling_online" class="form-label small fw-bold text-muted">LOKASI / LINK KONSELING (Dikirim via WhatsApp)</label>
                                        <input type="text" class="form-control" id="sesi_konseling_online" name="sesi_konseling_online" placeholder="Misal: Ruang Konseling Gd A / Link Zoom" required>
                                    </div>

                                    <div class="mb-3">
                                        <label for="pesan_pelapor" class="form-label small fw-bold text-muted">PESAN KEPADA PELAPOR (Dikirim via WhatsApp)</label>
                                        <textarea class="form-control" id="pesan_pelapor" name="pesan_pelapor" rows="2" placeholder="Tuliskan pesan kepada pelapor (opsional)..." required></textarea>
                                    </div>
                                </div>
                                <div class="d-grid mt-3">
                                    <button type="submit" class="btn btn-info text-white fw-bold py-2 shadow-sm">
                                        <i class="fa-solid fa-paper-plane me-2"></i> Jadwalkan & Beritahu Pelapor
                                    </button>
                                </div>
                            </fieldset>
                        </form>
                    @else
                        <!-- Tampilkan info jadwal yang sudah dibuat -->
                        <div class="bg-success-subtle p-3 rounded-3 mb-3 border border-success-subtle text-success small">
                            <h6 class="fw-bold mb-1"><i class="fa-solid fa-calendar-check me-1"></i> Pertemuan Tatap Muka Terjadwal!</h6>
                            <p class="mb-1"><strong>Hari:</strong> {{ $laporan->catatanKlinisPsikolog->jadwal_hari }}</p>
                            <p class="mb-1"><strong>Tanggal:</strong> {{ \Carbon\Carbon::parse($laporan->catatanKlinisPsikolog->jadwal_tanggal)->format('d M Y') }}</p>
                            <p class="mb-0"><strong>Waktu:</strong> {{ $laporan->catatanKlinisPsikolog->jadwal_jam }} WIB</p>
                            <p class="mb-0 mt-1"><strong>Lokasi/Link:</strong> {{ $laporan->catatanKlinisPsikolog->sesi_konseling_online }}</p>
                        </div>

                        <!-- Form Tahap 2: Hasil Konseling -->
                        <form action="{{ route('laporan.psikolog_selesai', $laporan->id) }}" method="POST">
                            @csrf
                            <fieldset {{ $laporan->status !== 'menunggu_psikolog' ? 'disabled' : '' }}>
                                <div class="bg-danger-subtle p-3 rounded mb-3 border border-danger-subtle">
                                    <h6 class="fw-bold mb-3 text-danger"><i class="fa-solid fa-user-doctor me-1"></i> 2. Hasil Konseling (Diisi Setelah Pelaksanaan)</h6>
                                    <div class="mb-3">
                                        <label for="catatan_klinis" class="form-label small fw-bold text-danger">CATATAN KLINIS (RAHASIA PSIKOLOG)</label>
                                        <textarea class="form-control border-danger" id="catatan_klinis" name="catatan_klinis" rows="3" placeholder="Tulis catatan rahasia hasil konseling di sini..." required></textarea>
                                    </div>

                                    <div class="mb-3">
                                        <label for="log_pemulihan" class="form-label small fw-bold text-info-emphasis">REKOMENDASI / LOG PEMULIHAN (Untuk Rektor)</label>
                                        <textarea class="form-control border-info" id="log_pemulihan" name="log_pemulihan" rows="3" placeholder="Kesimpulan kondisi korban yang boleh dibaca Rektor..." required></textarea>
                                    </div>
                                </div>
                                
                                <div class="d-grid mt-3">
                                    <button type="submit" class="btn btn-danger fw-bold py-2 shadow-sm">
                                        <i class="fa-solid fa-lock me-2"></i> Simpan Catatan & Teruskan ke Rektor
                                    </button>
                                </div>
                            </fieldset>
                        </form>
                    @endif
                        @if($laporan->status !== 'menunggu_psikolog')
                            <div class="alert alert-warning mt-2 mb-0 py-2 small fw-bold text-center">
                                <i class="fa-solid fa-lock me-1"></i> Form ini terkunci hingga tahapan sebelumnya diselesaikan.
                            </div>
                        @endif
                    </form>

                    @push('scripts')
                    <script>
                        function setHari() {
                            const dateVal = document.getElementById('jadwal_tanggal').value;
                            if(dateVal) {
                                const date = new Date(dateVal);
                                const days = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'];
                                document.getElementById('jadwal_hari').value = days[date.getDay()];
                            }
                        }
                    </script>
                    @endpush
                @else
                    <div class="h-100 d-flex flex-column justify-content-center align-items-center p-4 rounded-4 mt-auto" style="background: linear-gradient(145deg, #f8fafc, #f1f5f9); border: 1px dashed #cbd5e1; position: relative; z-index: 2;">
                        <div class="spinner-grow text-info mb-3" role="status" style="width: 3rem; height: 3rem; opacity: 0.8;">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <h6 class="fw-bold text-secondary mb-2 text-center">Menunggu Psikolog</h6>
                        <p class="text-muted small text-center mb-0">Menunggu Psikolog menjadwalkan konseling, membuat catatan klinis, dan merilis log pemulihan ke Rektor.</p>
                    </div>
                @endif
            </div>
            </div>
            @endif


            <!-- ============================================== -->
            <!-- 2.4 REKTOR / PIMPINAN PTS ACTION CARD -->
            <!-- ============================================== -->
            <div class="col-lg-6 col-xl-4 d-flex align-items-stretch">
            <div class="card card-custom p-4 border-start border-4 border-primary w-100" style="position: relative; overflow: hidden; background-color: #f8fbff;">
                <!-- Decorative background element -->
                <div style="position: absolute; top: -20px; right: -20px; opacity: 0.04; transform: rotate(-5deg); pointer-events: none;">
                    <i class="fa-solid fa-building-columns" style="font-size: 10rem;"></i>
                </div>
                
                <h5 class="fw-bold mb-4 text-primary" style="letter-spacing: 0.5px; position: relative; z-index: 2;"><i class="fa-solid fa-building-columns me-2"></i> Peran: Rektor / Pimpinan PTS</h5>
                
                <!-- Action details if exists -->
                @if($laporan->eksekusiRektor)
                    <div class="mb-2">
                        <span class="d-block small text-muted font-bold">Sanksi yang Dieksekusi:</span>
                        <p class="mb-0 text-dark bg-light p-2 rounded small fw-bold text-primary-emphasis border border-primary-subtle" style="white-space: pre-wrap;">{{ $laporan->eksekusiRektor->sanksi_eksekusi }}</p>
                    </div>
                    <div class="mb-2">
                        <span class="d-block small text-muted font-bold">Catatan Rektor:</span>
                        <p class="mb-0 text-dark bg-light p-2 rounded small" style="white-space: pre-wrap;">{{ $laporan->eksekusiRektor->catatan ?? '-' }}</p>
                    </div>
                    @if($laporan->eksekusiRektor->file_bukti_selesai)
                    <div class="mb-2">
                        <span class="d-block small text-muted font-bold">Bukti Penyelesaian:</span>
                        <div class="mt-1 d-flex gap-2">
                            <button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#buktiSelesaiModal">
                                <i class="fa-solid fa-eye me-1"></i> Lihat Dokumen
                            </button>
                            <a href="{{ asset('storage/' . $laporan->eksekusiRektor->file_bukti_selesai) }}" download class="btn btn-sm btn-outline-success">
                                <i class="fa-solid fa-download me-1"></i> Unduh Dokumen
                            </a>
                        </div>
                    </div>
                    @endif
                    <small class="text-muted d-block text-end mt-2">Oleh: {{ $laporan->eksekusiRektor->rektor->name }} ({{ $laporan->eksekusiRektor->created_at->format('d M Y') }})</small>
                
                <!-- Interactive Input form if role is Rektor or Admin -->
                @elseif(auth()->user()->isAdmin() || (auth()->user()->isRektorRole() && auth()->user()->pts_nama === $laporan->pts_nama))
                    @if($laporan->tipe_laporan === 'integritas_akademik' && $laporan->tindakanPenilai)
                        <div class="alert alert-warning small mb-3">
                            <h6 class="fw-bold mb-1"><i class="fa-solid fa-lightbulb text-warning me-1"></i> Rekomendasi Tim Penilai:</h6>
                            <p class="mb-0">{{ $laporan->tindakanPenilai->rekomendasi_sanksi }}</p>
                        </div>
                    @elseif(($laporan->tipe_laporan === 'preventif_konseling' || $laporan->tipe_laporan === 'kekerasan_bullying') && $laporan->catatanKlinisPsikolog)
                        <div class="alert alert-info small mb-3">
                            <h6 class="fw-bold mb-1"><i class="fa-solid fa-heart-pulse text-info me-1"></i> Log Pemulihan / Rekomendasi Psikolog:</h6>
                            <p class="mb-0" style="white-space: pre-wrap;">{{ $laporan->catatanKlinisPsikolog->log_pemulihan }}</p>
                        </div>
                    @endif
                    <form action="{{ route('laporan.rektor', $laporan->id) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="mb-3">
                            <label for="sanksi_eksekusi" class="form-label small fw-bold text-muted">SANKSI / TINDAK LANJUT (Final)</label>
                            <textarea class="form-control" id="sanksi_eksekusi" name="sanksi_eksekusi" rows="3" placeholder="Tuliskan keputusan sanksi final atau alasan pelimpahan ke jalur hukum..." required {{ $laporan->status !== 'menunggu_rektor' ? 'disabled' : '' }}></textarea>
                        </div>
                        <div class="mb-3">
                            <label for="catatan_rektor" class="form-label small fw-bold text-muted">CATATAN TAMBAHAN</label>
                            <textarea class="form-control" id="catatan_rektor" name="catatan" rows="2" placeholder="Catatan tambahan..." {{ $laporan->status !== 'menunggu_rektor' ? 'disabled' : '' }}></textarea>
                        </div>
                        <div class="mb-3">
                            <label for="file_bukti_selesai" class="form-label small fw-bold text-muted">UNGGAH BUKTI SELESAI (PDF/Image)</label>
                            <input class="form-control" type="file" id="file_bukti_selesai" name="file_bukti_selesai" accept=".pdf,.png,.jpg,.jpeg" {{ $laporan->status !== 'menunggu_rektor' ? 'disabled' : '' }}>
                            <div class="form-text small">Maks. 5MB. Dokumen ini akan menjadi dokumen utama Kasus Selesai.</div>
                        </div>
                        <div class="d-flex flex-column flex-md-row gap-2 mt-4">
                            <button type="submit" name="keputusan_rektor" value="selesai" class="btn btn-success fw-bold py-2 rounded-3 shadow flex-grow-1" {{ $laporan->status !== 'menunggu_rektor' ? 'disabled' : '' }}>
                                <i class="fa-solid fa-check-double me-1"></i> Selesai (Sanksi Internal)
                            </button>
                            <button type="submit" name="keputusan_rektor" value="jalur_hukum" class="btn btn-danger fw-bold py-2 rounded-3 shadow flex-grow-1" {{ $laporan->status !== 'menunggu_rektor' ? 'disabled' : '' }}>
                                <i class="fa-solid fa-gavel me-1"></i> Ditindaklanjuti ke Jalur Hukum
                            </button>
                        </div>
                        <p class="small text-muted mt-2 text-center"><i class="fa-solid fa-info-circle me-1"></i> Setelah memilih salah satu tindakan di atas, keterangan kasus akan berubah menjadi <strong>"Kasus telah ditindaklanjuti dan kasus selesai"</strong>.</p>
                        @if($laporan->status !== 'menunggu_rektor')
                            <div class="alert alert-warning mt-2 mb-0 py-2 small fw-bold text-center">
                                <i class="fa-solid fa-lock me-1"></i> Form ini terkunci hingga tahapan sebelumnya diselesaikan.
                            </div>
                        @endif
                    </form>
                @else
                    <div class="h-100 d-flex flex-column justify-content-center align-items-center p-4 rounded-4 mt-auto" style="background: linear-gradient(145deg, #f8fafc, #f1f5f9); border: 1px dashed #cbd5e1; position: relative; z-index: 2;">
                        <div class="spinner-grow text-primary mb-3" role="status" style="width: 3rem; height: 3rem; opacity: 0.8;">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <h6 class="fw-bold text-secondary mb-2 text-center">Menunggu Tindakan Rektor</h6>
                        <p class="text-muted small text-center mb-0">Menunggu Rektor mengeksekusi sanksi akademis final untuk menyelesaikan kasus ini.</p>
                    </div>
                @endif
            </div>
            </div>

        </div>
    </div>
</div>
        <!-- Modal Identitas -->
        @if($laporan->file_identitas)
        <div class="modal fade" id="identitasModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title fw-bold"><i class="fa-solid fa-file-invoice text-primary me-2"></i> Kartu Identitas</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body text-center bg-light">
                        @php
                            $extId = strtolower(pathinfo($laporan->file_identitas, PATHINFO_EXTENSION));
                        @endphp
                        @if(in_array($extId, ['jpg', 'jpeg', 'png', 'webp']))
                            <img src="{{ asset('uploads/' . $laporan->file_identitas) }}" class="img-fluid rounded border shadow-sm" alt="Identitas">
                        @elseif(in_array($extId, ['pdf']))
                            <iframe src="{{ asset('uploads/' . $laporan->file_identitas) }}" width="100%" height="600px" style="border: none;"></iframe>
                        @else
                            <div class="alert alert-warning">
                                File tidak dapat ditampilkan langsung. <a href="{{ asset('uploads/' . $laporan->file_identitas) }}" target="_blank" class="alert-link">Unduh File</a>
                            </div>
                        @endif
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary fw-bold rounded-3 px-4" data-bs-dismiss="modal">
                            <i class="fa-solid fa-arrow-left me-1"></i> Kembali ke Halaman Awal
                        </button>
                    </div>
                </div>
            </div>
        </div>
        @endif

        <!-- Modal Bukti -->
        @if($laporan->file_bukti)
        <div class="modal fade" id="buktiModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title fw-bold"><i class="fa-solid fa-file-shield text-danger me-2"></i> Bukti Kejadian</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body text-center bg-light">
                        @php
                            $extBukti = strtolower(pathinfo($laporan->file_bukti, PATHINFO_EXTENSION));
                        @endphp
                        @if(in_array($extBukti, ['jpg', 'jpeg', 'png', 'webp']))
                            <img src="{{ asset('uploads/' . $laporan->file_bukti) }}" class="img-fluid rounded border shadow-sm" alt="Bukti Kejadian">
                        @elseif(in_array($extBukti, ['pdf']))
                            <iframe src="{{ asset('uploads/' . $laporan->file_bukti) }}" width="100%" height="600px" style="border: none;"></iframe>
                        @else
                            <div class="alert alert-warning">
                                File tidak dapat ditampilkan langsung. <a href="{{ asset('uploads/' . $laporan->file_bukti) }}" target="_blank" class="alert-link">Unduh File</a>
                            </div>
                        @endif
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary fw-bold rounded-3 px-4" data-bs-dismiss="modal">
                            <i class="fa-solid fa-arrow-left me-1"></i> Kembali ke Halaman Awal
                        </button>
                    </div>
                </div>
            </div>
        </div>
        @endif
        @endif <!-- End of file_identitas || file_bukti block -->
        
        <!-- Modal Bukti Selesai -->
        @if($laporan->eksekusiRektor && $laporan->eksekusiRektor->file_bukti_selesai)
        <div class="modal fade" id="buktiSelesaiModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title fw-bold"><i class="fa-solid fa-file-circle-check text-success me-2"></i> Bukti Penyelesaian Rektor</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body text-center bg-light">
                        @php
                            $extSelesai = strtolower(pathinfo($laporan->eksekusiRektor->file_bukti_selesai, PATHINFO_EXTENSION));
                        @endphp
                        @if(in_array($extSelesai, ['jpg', 'jpeg', 'png', 'webp']))
                            <img src="{{ asset('storage/' . $laporan->eksekusiRektor->file_bukti_selesai) }}" class="img-fluid rounded border shadow-sm" alt="Bukti Penyelesaian">
                        @elseif(in_array($extSelesai, ['pdf']))
                            <iframe src="{{ asset('storage/' . $laporan->eksekusiRektor->file_bukti_selesai) }}" width="100%" height="600px" style="border: none;"></iframe>
                        @else
                            <div class="alert alert-warning">
                                File tidak dapat ditampilkan langsung. <a href="{{ asset('storage/' . $laporan->eksekusiRektor->file_bukti_selesai) }}" target="_blank" class="alert-link">Unduh File</a>
                            </div>
                        @endif
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary fw-bold rounded-3 px-4" data-bs-dismiss="modal">
                            <i class="fa-solid fa-arrow-left me-1"></i> Kembali ke Halaman Awal
                        </button>
                    </div>
                </div>
            </div>
        </div>
        @endif
        
        <!-- Modal Export PDF (Sistem) -->
        <div class="modal fade" id="exportModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title fw-bold"><i class="fa-solid fa-file-pdf text-danger me-2"></i> Ringkasan Kasus (PDF Sistem)</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body p-0 bg-light">
                        <iframe src="{{ route('laporan.export', ['id' => $laporan->id]) }}" width="100%" height="650px" style="border: none;"></iframe>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary fw-bold rounded-3 px-4" data-bs-dismiss="modal">
                            <i class="fa-solid fa-arrow-left me-1"></i> Kembali ke Halaman Awal
                        </button>
                    </div>
                </div>
            </div>
        </div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const forms = document.querySelectorAll('form');
    forms.forEach(form => {
        form.addEventListener('submit', function(e) {
            // Only proceed if form HTML5 validation passes
            if (form.checkValidity()) {
                const submitBtn = document.activeElement;
                if (submitBtn && submitBtn.tagName === 'BUTTON' && submitBtn.type === 'submit') {
                    // Preserve button name and value by adding a hidden input
                    // This is crucial for forms with multiple submit buttons (like the Rektor form)
                    if (submitBtn.name) {
                        const hiddenInput = document.createElement('input');
                        hiddenInput.type = 'hidden';
                        hiddenInput.name = submitBtn.name;
                        hiddenInput.value = submitBtn.value;
                        form.appendChild(hiddenInput);
                    }
                    
                    // Update button UI to loading state
                    submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span> Memproses...';
                    
                    // Lock all submit buttons visually and functionally via pointer-events
                    const allSubmitBtns = form.querySelectorAll('button[type="submit"]');
                    allSubmitBtns.forEach(btn => {
                        btn.style.pointerEvents = 'none';
                        btn.classList.add('opacity-75');
                    });
                }
            }
        });
    });
});
</script>
@endpush

@endsection