@extends('layout.appdas')

@section('title', 'Approve Disposisi')

@section('content')

<div class="card table-card mb-0 shadow-sm border-0 rounded-0 overflow-hidden">

    <!-- 1. Header Halaman (Sesuai Konsep Screenshot 2) -->
    <div class="card-header bg-white border-bottom py-3 px-3 px-md-4">
        <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
            <div>
                <h5 class="mb-1 fw-bold text-dark d-inline-flex align-items-center">
                    <i class="bi bi-shield-check text-primary me-2 fs-5 align-middle"></i>
                    <span>Approve Disposisi</span>
                </h5>
                <p class="text-muted mb-0 small">
                    Pusat verifikasi dan persetujuan disposisi surat antar unit sebelum diteruskan ke tujuan.
                </p>
            </div>

            @if($countPending > 0)
            <div class="d-flex align-items-center">
                <span class="badge bg-warning-subtle text-warning-emphasis border border-warning-subtle rounded-pill px-3 py-1.5 fw-semibold fs-8">
                    <i class="bi bi-clock-history me-1.5"></i> {{ $countPending }} Menunggu Persetujuan
                </span>
            </div>
            @endif
        </div>
    </div>

    <!-- 2. Body Halaman -->
    <div class="card-body p-3 p-md-4 d-flex flex-column">

        <!-- A. 4 Kartu Rekap Statistik (2x2 Grid di Smartphone Sesuai Screenshot 2) -->
        <div class="row g-2 g-md-3 mb-3 mb-md-4">
            {{-- Card 1: Total Disposisi --}}
            <div class="col-6 col-md-3">
                <a href="{{ route('approve-disposisi.index', array_merge(request()->except('page'), ['status' => 'semua'])) }}" class="text-decoration-none">
                    <div class="border rounded-3 p-2.5 p-sm-3 h-100 bg-light transition-all kpi-card {{ $status === 'semua' ? 'border-primary shadow-xs active-card' : '' }}">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <small class="text-muted d-block mb-1 fw-semibold kpi-label">Total Disposisi</small>
                                <h3 class="fw-bold mb-0 text-dark fs-4 fs-md-3">{{ $countTotal ?? 0 }}</h3>
                            </div>
                            <div class="stat-icon bg-soft-primary p-2 rounded-3 text-primary flex-shrink-0">
                                <i class="bi bi-collection fs-4"></i>
                            </div>
                        </div>
                    </div>
                </a>
            </div>

            {{-- Card 2: Menunggu Review --}}
            <div class="col-6 col-md-3">
                <a href="{{ route('approve-disposisi.index', array_merge(request()->except('page'), ['status' => 'pending'])) }}" class="text-decoration-none">
                    <div class="border rounded-3 p-2.5 p-sm-3 h-100 bg-light transition-all kpi-card {{ $status === 'pending' ? 'border-warning shadow-xs active-card' : '' }}">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <small class="text-muted d-block mb-1 fw-semibold kpi-label">Menunggu Review</small>
                                <h3 class="fw-bold mb-0 text-warning fs-4 fs-md-3">{{ $countPending ?? 0 }}</h3>
                            </div>
                            <div class="stat-icon bg-soft-warning p-2 rounded-3 text-warning flex-shrink-0">
                                <i class="bi bi-clock-history fs-4"></i>
                            </div>
                        </div>
                    </div>
                </a>
            </div>

            {{-- Card 3: Telah Disetujui --}}
            <div class="col-6 col-md-3">
                <a href="{{ route('approve-disposisi.index', array_merge(request()->except('page'), ['status' => 'approved'])) }}" class="text-decoration-none">
                    <div class="border rounded-3 p-2.5 p-sm-3 h-100 bg-light transition-all kpi-card {{ $status === 'approved' ? 'border-success shadow-xs active-card' : '' }}">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <small class="text-muted d-block mb-1 fw-semibold kpi-label">Telah Disetujui</small>
                                <h3 class="fw-bold mb-0 text-success fs-4 fs-md-3">{{ $countApproved ?? 0 }}</h3>
                            </div>
                            <div class="stat-icon bg-soft-success p-2 rounded-3 text-success flex-shrink-0">
                                <i class="bi bi-check2-circle fs-4"></i>
                            </div>
                        </div>
                    </div>
                </a>
            </div>

            {{-- Card 4: Ditolak --}}
            <div class="col-6 col-md-3">
                <a href="{{ route('approve-disposisi.index', array_merge(request()->except('page'), ['status' => 'rejected'])) }}" class="text-decoration-none">
                    <div class="border rounded-3 p-2.5 p-sm-3 h-100 bg-light transition-all kpi-card {{ $status === 'rejected' ? 'border-danger shadow-xs active-card' : '' }}">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <small class="text-muted d-block mb-1 fw-semibold kpi-label">Ditolak</small>
                                <h3 class="fw-bold mb-0 text-danger fs-4 fs-md-3">{{ $countRejected ?? 0 }}</h3>
                            </div>
                            <div class="stat-icon bg-soft-danger p-2 rounded-3 text-danger flex-shrink-0">
                                <i class="bi bi-x-circle fs-4"></i>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
        </div>

        <!-- B. Form Filter & Pencarian Terpadu (Sesuai Konsep Screenshot 2) -->
        <form action="{{ route('approve-disposisi.index') }}" method="GET" class="mb-4">
            <div class="row g-2 bg-light p-3 rounded-3 border align-items-center">
                {{-- Input Pencarian --}}
                <div class="col-12 col-md-4">
                    <div class="input-group input-group-sm">
                        <span class="input-group-text bg-white border-end-0 text-muted">
                            <i class="bi bi-search text-primary"></i>
                        </span>
                        <input type="text" name="search" class="form-control form-control-sm border-start-0 ps-1" 
                               placeholder="Cari surat, pengirim, perihal..." value="{{ request('search') }}">
                        @if(request('search'))
                            <a href="{{ route('approve-disposisi.index', ['status' => $status, 'sort' => $sort]) }}" class="input-group-text bg-white border-start-0 text-muted text-decoration-none" title="Hapus pencarian">
                                <i class="bi bi-x-circle-fill text-secondary"></i>
                            </a>
                        @endif
                    </div>
                </div>

                {{-- Filter Status --}}
                <div class="col-12 col-md-3">
                    <select name="status" class="form-select form-select-sm" onchange="this.form.submit()">
                        <option value="pending" {{ $status === 'pending' ? 'selected' : '' }}>Menunggu Review ({{ $countPending }})</option>
                        <option value="approved" {{ $status === 'approved' ? 'selected' : '' }}>Telah Disetujui ({{ $countApproved }})</option>
                        <option value="rejected" {{ $status === 'rejected' ? 'selected' : '' }}>Ditolak ({{ $countRejected }})</option>
                        <option value="semua" {{ $status === 'semua' ? 'selected' : '' }}>-- Semua Status ({{ $countTotal }}) --</option>
                    </select>
                </div>

                {{-- Filter Urutkan --}}
                <div class="col-12 col-md-3">
                    <select name="sort" class="form-select form-select-sm" onchange="this.form.submit()">
                        <option value="terbaru" {{ ($sort ?? 'terbaru') === 'terbaru' ? 'selected' : '' }}>Terbaru (Default)</option>
                        <option value="terlama" {{ ($sort ?? '') === 'terlama' ? 'selected' : '' }}>Terlama</option>
                        <option value="a-z" {{ ($sort ?? '') === 'a-z' ? 'selected' : '' }}>Perihal (A ke Z)</option>
                        <option value="z-a" {{ ($sort ?? '') === 'z-a' ? 'selected' : '' }}>Perihal (Z ke A)</option>
                    </select>
                </div>

                {{-- Tombol Reset --}}
                <div class="col-12 col-md-2 d-grid">
                    <a href="{{ route('approve-disposisi.index') }}" class="btn btn-reset-custom btn-sm d-flex align-items-center justify-content-center gap-1" title="Reset Filter">
                        <i class="bi bi-arrow-counterclockwise"></i> <span>Reset</span>
                    </a>
                </div>
            </div>
        </form>

        <!-- C. Tabel Data Permohonan Disposisi -->
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0 text-nowrap">
                <thead class="table-light text-uppercase fs-7 text-secondary">
                    <tr>
                        <th scope="col" style="width: 4%" class="text-center">No</th>
                        <th scope="col" style="width: 25%">Surat & Dokumen</th>
                        <th scope="col" style="width: 25%">Alur Disposisi</th>
                        <th scope="col" style="width: 15%">Tgl Pengajuan</th>
                        <th scope="col" style="width: 15%" class="text-center">Status Review</th>
                        <th scope="col" style="width: 8%" class="text-center">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($disposisi as $item)
                        @php
                            $surat = $item->surat;
                            $unitPengirim = $surat?->divisi?->nama_divisi ?? ($surat?->asal_tujuan ?? '-');
                            $namaPengirim = $surat?->user?->name ?? '';
                            $unitPenerima = $item->user?->divisi?->nama_divisi ?? ($item->user?->name ?? '-');
                            $namaPenerima = $item->user?->name ?? '';
                        @endphp
                        <tr>
                            <!-- Kolom 1: No -->
                            <td class="text-center fw-semibold text-muted">
                                {{ $disposisi->firstItem() + $loop->index }}
                            </td>

                            <!-- Kolom 2: Surat & Dokumen -->
                            <td>
                                <div class="d-flex align-items-center gap-1.5 mb-1 flex-wrap">
                                    <span class="fw-bold text-dark font-monospace fs-7">
                                        {{ $surat?->nomor_surat ?? '-' }}
                                    </span>
                                    @if($surat?->jenisSurat)
                                        <span class="badge bg-light text-secondary border fs-9 fw-normal">
                                            {{ $surat->jenisSurat->nama_jenis_surat ?? $surat->jenisSurat->nama_jenis }}
                                        </span>
                                    @endif
                                </div>
                                <div class="text-truncate text-secondary small fw-medium" style="max-width: 320px;" title="{{ $surat?->perihal }}">
                                    {{ $surat?->perihal ?? '-' }}
                                </div>
                            </td>

                            <!-- Kolom 3: Alur Disposisi -->
                            <td>
                                <div class="flow-cell-wrapper py-1">
                                    <!-- Pengirim -->
                                    <div class="d-flex align-items-center gap-1.5">
                                        <span class="badge bg-secondary-subtle text-secondary rounded-circle p-1 d-inline-flex align-items-center justify-content-center" style="width: 20px; height: 20px;">
                                            <i class="bi bi-send-fill fs-9"></i>
                                        </span>
                                        <span class="fw-semibold text-dark fs-8 text-truncate" style="max-width: 220px;" title="{{ $unitPengirim }}">
                                            {{ $unitPengirim }}
                                        </span>
                                    </div>
                                    
                                    <!-- Panah Arah -->
                                    <div class="ms-2 ps-1 text-primary opacity-50" style="line-height: 1;">
                                        <i class="bi bi-arrow-down fs-9"></i>
                                    </div>

                                    <!-- Penerima -->
                                    <div class="d-flex align-items-center gap-1.5">
                                        <span class="badge bg-primary-subtle text-primary rounded-circle p-1 d-inline-flex align-items-center justify-content-center" style="width: 20px; height: 20px;">
                                            <i class="bi bi-geo-alt-fill fs-9"></i>
                                        </span>
                                        <span class="fw-semibold text-primary fs-8 text-truncate" style="max-width: 220px;" title="{{ $unitPenerima }}">
                                            {{ $unitPenerima }}
                                        </span>
                                        @if($namaPenerima && $namaPenerima !== $unitPenerima)
                                            <small class="text-muted fs-9 text-truncate" style="max-width: 100px;" title="{{ $namaPenerima }}">({{ $namaPenerima }})</small>
                                        @endif
                                    </div>
                                </div>
                            </td>

                            <!-- Kolom 4: Tanggal Pengajuan -->
                            <td class="text-muted small">
                                <div class="fw-medium text-dark">
                                    <i class="bi bi-calendar3 me-1 text-primary"></i>
                                    {{ $item->created_at ? $item->created_at->translatedFormat('d M Y') : '-' }}
                                </div>
                                <div class="fs-9 text-secondary ms-3">
                                    {{ $item->created_at ? $item->created_at->format('H:i') . ' WIB' : '-' }}
                                </div>
                            </td>

                            <!-- Kolom 5: Status Review -->
                            <td class="text-center">
                                @if($item->admin_approval_status === 'pending')
                                    <span class="badge bg-warning-subtle text-warning-emphasis border border-warning-subtle rounded-pill px-3 py-1.5 fw-semibold">
                                        <i class="bi bi-hourglass-split me-1"></i> Menunggu
                                    </span>
                                @elseif($item->admin_approval_status === 'approved')
                                    <span class="badge bg-success-subtle text-success border border-success-subtle rounded-pill px-3 py-1.5 fw-semibold mb-1">
                                        <i class="bi bi-check-circle me-1"></i> Disetujui
                                    </span>
                                    @if($item->admin_approved_at)
                                        <div class="text-muted fs-9" style="font-size: 0.72rem;">
                                            {{ \Carbon\Carbon::parse($item->admin_approved_at)->translatedFormat('d M Y, H:i') }}
                                        </div>
                                    @endif
                                @else
                                    <span class="badge bg-danger-subtle text-danger border border-danger-subtle rounded-pill px-3 py-1.5 fw-semibold mb-1">
                                        <i class="bi bi-x-circle me-1"></i> Ditolak
                                    </span>
                                    @if($item->admin_approved_at)
                                        <div class="text-muted fs-9" style="font-size: 0.72rem;">
                                            {{ \Carbon\Carbon::parse($item->admin_approved_at)->translatedFormat('d M Y, H:i') }}
                                        </div>
                                    @endif
                                @endif
                            </td>

                            <!-- Kolom 6: Aksi -->
                            <td class="text-center text-nowrap" style="white-space: nowrap;">
                                <button type="button" 
                                        class="btn btn-sm btn-light border rounded-circle d-inline-flex align-items-center justify-content-center shadow-2xs btn-menu-approve"
                                        data-bs-toggle="modal"
                                        data-bs-target="#modalMenuAksiApprove"
                                        data-id="{{ $item->id }}"
                                        data-surat-id="{{ $item->surat_id }}"
                                        data-nomor="{{ $surat?->nomor_surat ?? '-' }}"
                                        data-perihal="{{ $surat?->perihal ?? '-' }}"
                                        data-pengirim="{{ $unitPengirim }}"
                                        data-penerima="{{ $unitPenerima }}"
                                        data-file-url="{{ ($surat && $surat->file_surat) ? route('surat.view', $surat->id) : '' }}"
                                        data-status="{{ $item->admin_approval_status }}"
                                        data-approve-url="{{ route('approve-disposisi.approve', $item->id) }}"
                                        data-reject-url="{{ route('approve-disposisi.reject', $item->id) }}"
                                        style="width: 32px; height: 32px;"
                                        title="Pilihan Aksi">
                                    <i class="bi bi-three-dots-vertical fs-6 text-secondary"></i>
                                </button>
                            </td>
                        </tr>
                    @empty
                        <tr class="empty-state-row">
                            <td colspan="6" class="text-center py-5 text-muted align-middle">
                                <div class="d-flex flex-column align-items-center justify-content-center text-center w-100 py-3">
                                    <i class="bi bi-folder-x fs-1 mb-2 text-secondary opacity-50"></i>
                                    <span class="fw-semibold text-secondary">Tidak ada data permohonan disposisi yang ditemukan.</span>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($disposisi->hasPages() || $disposisi->total() > 0)
            <div id="paginationContainer" class="mt-auto pt-3 border-top">
                {{ $disposisi->links('vendor.pagination.custom') }}
            </div>
        @endif

    </div>
</div>

<!-- ==========================================
     MODAL MENU PILIHAN AKSI APPROVE DISPOSISI
========================================== -->
<div class="modal fade" id="modalMenuAksiApprove" tabindex="-1" aria-labelledby="modalMenuAksiApproveLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" style="max-width: 460px;">
        <div class="modal-content border-0 shadow-lg rounded-4 overflow-hidden">
            <!-- Modal Header -->
            <div class="modal-header bg-white border-bottom py-3.5 px-3 px-md-4 d-flex justify-content-between align-items-center">
                <div class="d-flex align-items-center gap-3 overflow-hidden">
                    <div class="rounded-3 bg-primary bg-opacity-10 text-primary p-2 d-flex align-items-center justify-content-center flex-shrink-0" style="width: 42px; height: 42px;">
                        <i class="bi bi-three-dots-vertical fs-5"></i>
                    </div>
                    <div class="overflow-hidden">
                        <h6 class="modal-title fw-bold text-dark mb-0.5 fs-6" id="modalMenuAksiApproveLabel">Menu Pilihan Aksi</h6>
                        <small class="text-muted d-block text-truncate font-monospace" id="menuAksiNomorSurat" style="max-width: 270px;">-</small>
                    </div>
                </div>
                <button type="button" class="btn-close ms-2" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <!-- Modal Body -->
            <div class="modal-body p-3.5 p-md-4 bg-light bg-opacity-50">
                <!-- Ringkasan Info Disposisi -->
                <div class="p-3 p-md-3.5 bg-white rounded-3 border border-light-subtle mb-3.5 shadow-2xs">
                    <div class="d-flex align-items-center justify-content-between mb-2.5 pb-2 border-bottom border-light-subtle">
                        <span class="text-muted fs-9 fw-bold text-uppercase" style="letter-spacing: 0.5px;">Alur Disposisi</span>
                        <div id="menuAksiBadgeStatus"></div>
                    </div>
                    
                    <div class="d-flex align-items-center justify-content-between gap-2 py-1 mb-2.5">
                        <div class="d-flex align-items-center gap-2 overflow-hidden" style="max-width: 46%;">
                            <span class="badge bg-secondary-subtle text-secondary rounded-circle p-1 d-inline-flex align-items-center justify-content-center flex-shrink-0" style="width: 24px; height: 24px;">
                                <i class="bi bi-send-fill fs-9"></i>
                            </span>
                            <span class="text-truncate text-secondary fw-semibold fs-8" id="menuAksiPengirim" title="">-</span>
                        </div>
                        <div class="px-1 text-primary opacity-50 flex-shrink-0">
                            <i class="bi bi-arrow-right fs-7"></i>
                        </div>
                        <div class="d-flex align-items-center gap-2 overflow-hidden" style="max-width: 46%;">
                            <span class="badge bg-primary-subtle text-primary rounded-circle p-1 d-inline-flex align-items-center justify-content-center flex-shrink-0" style="width: 24px; height: 24px;">
                                <i class="bi bi-geo-alt-fill fs-9"></i>
                            </span>
                            <span class="text-truncate text-primary fw-semibold fs-8" id="menuAksiPenerima" title="">-</span>
                        </div>
                    </div>

                    <div class="pt-2 border-top border-light-subtle">
                        <small class="text-muted text-uppercase fw-semibold d-block mb-1" style="font-size: 0.72rem; letter-spacing: 0.5px;">Perihal Surat</small>
                        <div class="text-truncate text-dark small fw-medium" id="menuAksiPerihal" title="" style="line-height: 1.45;">
                            -
                        </div>
                    </div>
                </div>

                <!-- Daftar Tombol Pilihan Aksi -->
                <div class="d-flex flex-column gap-2.5">
                    <!-- 1. Detail Lengkap & Riwayat -->
                    <button type="button" class="btn btn-white bg-white text-start p-3 rounded-3 border d-flex align-items-center justify-content-between shadow-2xs action-btn-card" id="btnMenuAksiDetail">
                        <div class="d-flex align-items-center gap-3">
                            <div class="rounded-3 bg-primary bg-opacity-10 text-primary d-flex align-items-center justify-content-center flex-shrink-0" style="width: 42px; height: 42px;">
                                <i class="bi bi-eye-fill fs-5"></i>
                            </div>
                            <div>
                                <h6 class="mb-1 fw-bold text-dark fs-7">Rincian & Riwayat</h6>
                                <small class="text-muted fs-8 d-block" style="line-height: 1.35;">Tinjau berkas disposisi & riwayat alur rute</small>
                            </div>
                        </div>
                        <i class="bi bi-chevron-right text-muted fs-7 flex-shrink-0 ms-2"></i>
                    </button>

                    <!-- 2. Buka Dokumen PDF -->
                    <a href="#" target="_blank" class="btn btn-white bg-white text-start p-3 rounded-3 border d-flex align-items-center justify-content-between shadow-2xs action-btn-card text-decoration-none" id="btnMenuAksiPdf">
                        <div class="d-flex align-items-center gap-3">
                            <div class="rounded-3 bg-danger bg-opacity-10 text-danger d-flex align-items-center justify-content-center flex-shrink-0" style="width: 42px; height: 42px;">
                                <i class="bi bi-file-earmark-pdf-fill fs-5"></i>
                            </div>
                            <div>
                                <h6 class="mb-1 fw-bold text-dark fs-7">Buka Dokumen PDF</h6>
                                <small class="text-muted fs-8 d-block" id="menuAksiPdfDesc" style="line-height: 1.35;">Buka berkas fisik surat di tab baru</small>
                            </div>
                        </div>
                        <i class="bi bi-box-arrow-up-right text-muted fs-8 flex-shrink-0 ms-2"></i>
                    </a>

                    <!-- 3. Setujui Disposisi -->
                    <div id="wrapperMenuAksiApprove">
                        <form id="formMenuAksiApprove" method="POST" class="m-0 form-confirm-approve">
                            @csrf
                            @method('PATCH')
                            <button type="submit" class="btn btn-white bg-white text-start p-3 rounded-3 border border-success-subtle d-flex align-items-center justify-content-between shadow-2xs action-btn-card w-100" id="btnMenuAksiApprove">
                                <div class="d-flex align-items-center gap-3">
                                    <div class="rounded-3 bg-success bg-opacity-10 text-success d-flex align-items-center justify-content-center flex-shrink-0" style="width: 42px; height: 42px;">
                                        <i class="bi bi-check-lg fs-4"></i>
                                    </div>
                                    <div>
                                        <h6 class="mb-1 fw-bold text-success fs-7" id="menuAksiApproveTitle">Setujui Disposisi</h6>
                                        <small class="text-muted fs-8 d-block" id="menuAksiApproveDesc" style="line-height: 1.35;">Verifikasi & teruskan surat ke unit tujuan</small>
                                    </div>
                                </div>
                                <i class="bi bi-chevron-right text-success fs-7 flex-shrink-0 ms-2"></i>
                            </button>
                        </form>
                    </div>

                    <!-- 4. Tolak / Batalkan Disposisi -->
                    <div id="wrapperMenuAksiReject">
                        <button type="button" class="btn btn-white bg-white text-start p-3 rounded-3 border border-danger-subtle d-flex align-items-center justify-content-between shadow-2xs action-btn-card w-100" id="btnMenuAksiReject">
                            <div class="d-flex align-items-center gap-3">
                                <div class="rounded-3 bg-danger bg-opacity-10 text-danger d-flex align-items-center justify-content-center flex-shrink-0" style="width: 42px; height: 42px;">
                                    <i class="bi bi-x-lg fs-5"></i>
                                </div>
                                <div>
                                    <h6 class="mb-1 fw-bold text-danger fs-7" id="menuAksiRejectTitle">Tolak Disposisi</h6>
                                    <small class="text-muted fs-8 d-block" id="menuAksiRejectDesc" style="line-height: 1.35;">Tolak permohonan & berikan catatan alasan</small>
                                </div>
                            </div>
                            <i class="bi bi-chevron-right text-danger fs-7 flex-shrink-0 ms-2"></i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- Modal Footer -->
            <div class="modal-footer bg-white border-top py-2.5 px-3 px-md-4 justify-content-end">
                <button type="button" class="btn btn-light btn-sm px-4 py-1.5 rounded-pill fw-medium border fs-8" data-bs-dismiss="modal">
                    Tutup
                </button>
            </div>
        </div>
    </div>
</div>

<!-- ==========================================
     MODAL DETAIL & PRATINJAU DISPOSISI (SPLIT VIEW)
========================================== -->
<div class="modal fade" id="modalDetailDisposisi" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable" style="max-width: 1140px;">
        <div class="modal-content border-0 shadow-lg rounded-4 overflow-hidden">
            
            <!-- Modal Header -->
            <div class="modal-header bg-white border-bottom py-2.5 py-md-3 px-3 px-md-4 d-flex justify-content-between align-items-center">
                <div class="d-flex align-items-center gap-2.5 gap-md-3">
                    <div class="rounded-3 bg-primary bg-opacity-10 text-primary p-2 d-flex align-items-center justify-content-center flex-shrink-0" style="width: 38px; height: 38px;">
                        <i class="bi bi-shield-check fs-5"></i>
                    </div>
                    <div>
                        <h6 class="modal-title fw-bold text-dark mb-0 fs-7 fs-md-6">Rincian Persetujuan Disposisi</h6>
                        <small class="text-muted d-block" style="font-size: 0.75rem;">Periksa alur disposisi, instruksi pengirim, dan berkas fisik surat</small>
                    </div>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <!-- Modal Body -->
            <div class="modal-body p-3 p-md-4 bg-light bg-opacity-50">
                
                <!-- Loading State -->
                <div id="dtlLoadingState" class="py-5 text-center my-4">
                    <div class="spinner-border text-primary mb-3" style="width: 2.5rem; height: 2.5rem;" role="status"></div>
                    <h6 class="fw-semibold text-secondary mb-1">Memuat Data Disposisi...</h6>
                    <p class="text-muted small mb-0">Sedang mengambil rincian surat, riwayat rute, dan berkas PDF pendukung.</p>
                </div>

                <!-- Content State -->
                <div id="dtlContentState" class="row g-3 g-md-4" style="display: none;">
                    
                    <!-- SISI KIRI: Informasi & Alur Disposisi -->
                    <div class="col-12 col-lg-5 d-flex flex-column gap-3">
                        
                        <!-- Card 1: Informasi Surat -->
                        <div class="card border border-light-subtle shadow-none rounded-3 bg-white">
                            <div class="card-header bg-white border-bottom py-2.5 px-3">
                                <span class="fw-bold text-dark fs-8">
                                    <i class="bi bi-envelope-paper text-primary me-1.5"></i> Informasi Surat
                                </span>
                            </div>
                            <div class="card-body p-3 p-md-3.5">
                                <div class="mb-3 pb-2.5 border-bottom">
                                    <label class="text-muted small text-uppercase fw-semibold d-block mb-1">Nomor Surat</label>
                                    <span class="font-monospace fw-bold text-primary fs-7" id="dtlNomorSurat">-</span>
                                </div>
                                <div class="mb-3 pb-2.5 border-bottom">
                                    <label class="text-muted small text-uppercase fw-semibold d-block mb-1">Perihal</label>
                                    <div class="fw-bold text-dark fs-7" id="dtlPerihal" style="line-height: 1.5;">-</div>
                                </div>
                                <div class="row g-3 mb-3 pb-2.5 border-bottom">
                                    <div class="col-6">
                                        <label class="text-muted small text-uppercase fw-semibold d-block mb-1">Jenis Surat</label>
                                        <span class="badge bg-light text-secondary border px-2.5 py-1 small fw-medium text-truncate" style="max-width: 100%;" id="dtlJenisSurat">-</span>
                                    </div>
                                    <div class="col-6">
                                        <label class="text-muted small text-uppercase fw-semibold d-block mb-1">Kategori</label>
                                        <span class="badge bg-light text-secondary border px-2.5 py-1 small fw-medium text-truncate" style="max-width: 100%;" id="dtlKategori">-</span>
                                    </div>
                                </div>
                                <div class="row g-3">
                                    <div class="col-6">
                                        <label class="text-muted small text-uppercase fw-semibold d-block mb-1">Tanggal Surat</label>
                                        <div class="fw-semibold text-dark small" id="dtlTanggalSurat">-</div>
                                    </div>
                                    <div class="col-6">
                                        <label class="text-muted small text-uppercase fw-semibold d-block mb-1">Waktu Pengajuan</label>
                                        <div class="fw-semibold text-dark small" id="dtlTanggalPengajuan">-</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Card 2: Alur Disposisi -->
                        <div class="card border border-light-subtle shadow-none rounded-3 bg-white">
                            <div class="card-header bg-white border-bottom py-2.5 px-3">
                                <span class="fw-bold text-dark fs-8">
                                    <i class="bi bi-arrow-left-right text-primary me-1.5"></i> Alur Disposisi
                                </span>
                            </div>
                            <div class="card-body p-3 p-md-3.5">
                                <div class="row g-3">
                                    <div class="col-6">
                                        <span class="text-muted small text-uppercase fw-semibold d-block mb-1">Pengirim (Asal)</span>
                                        <div class="fw-bold text-dark fs-7 text-truncate" id="dtlPengirimDivisi">-</div>
                                        <div class="text-muted small mt-1">
                                            <i class="bi bi-person me-1"></i><span id="dtlPengirimNama">-</span>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <span class="text-primary small text-uppercase fw-semibold d-block mb-1">Penerima (Tujuan)</span>
                                        <div class="fw-bold text-primary fs-7 text-truncate" id="dtlPenerimaDivisi">-</div>
                                        <div class="text-muted small mt-1">
                                            <i class="bi bi-person me-1"></i><span id="dtlPenerimaNama">-</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Card 3: Instruksi / Catatan Pengirim -->
                        <div class="card border border-light-subtle shadow-none rounded-3 bg-white">
                            <div class="card-header bg-white border-bottom py-2.5 px-3">
                                <span class="fw-bold text-dark fs-8">
                                    <i class="bi bi-chat-quote text-primary me-1.5"></i> Instruksi / Catatan Pengirim
                                </span>
                            </div>
                            <div class="card-body p-3 p-md-3.5">
                                <div class="p-3 bg-light rounded-3 border small text-dark" id="dtlCatatanPengirim" style="min-height: 52px; line-height: 1.55; white-space: pre-wrap;">
                                    -
                                </div>
                            </div>
                        </div>

                        <!-- Card 4: Status Persetujuan Admin -->
                        <div class="card border border-light-subtle shadow-none rounded-3 bg-white">
                            <div class="card-header bg-white border-bottom py-2.5 px-3">
                                <span class="fw-bold text-dark fs-8">
                                    <i class="bi bi-shield-check text-warning me-1.5"></i> Status Persetujuan Admin
                                </span>
                            </div>
                            <div class="card-body p-3 p-md-3.5">
                                <div class="d-flex justify-content-between align-items-center">
                                    <span class="text-muted small text-uppercase fw-semibold">Status Review:</span>
                                    <div id="dtlStatusBadge">-</div>
                                </div>
                                <div id="dtlApproverInfo" class="mt-3 pt-3 border-top" style="display: none;">
                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                        <span class="text-muted small">Ditinjau oleh:</span>
                                        <span class="fw-semibold text-dark small" id="dtlApproverName">-</span>
                                    </div>
                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                        <span class="text-muted small">Waktu Review:</span>
                                        <span class="text-secondary small" id="dtlApprovedAt">-</span>
                                    </div>
                                    <div id="dtlCatatanApprovalWrapper" class="mt-2.5 p-3 bg-danger-subtle text-danger rounded-3 border border-danger-subtle" style="display: none;">
                                        <span class="small fw-semibold d-block mb-1 text-uppercase" style="font-size: 0.75rem;">Alasan Penolakan:</span>
                                        <div id="dtlCatatanApproval" class="small text-danger-emphasis" style="line-height: 1.5;">-</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                    <!-- SISI KANAN: Pratinjau Dokumen Berkas PDF -->
                    <div class="col-12 col-lg-7 d-flex flex-column">
                        <div class="card border border-light-subtle shadow-none rounded-3 bg-white h-100 d-flex flex-column overflow-hidden">
                            <!-- Header Dokumen PDF -->
                            <div class="card-header bg-white border-bottom py-2.5 px-3 px-md-3.5 d-flex justify-content-between align-items-center flex-wrap gap-2">
                                <span class="fw-bold text-dark fs-8">
                                    <i class="bi bi-file-earmark-pdf text-danger me-1.5"></i> Pratinjau Dokumen Berkas
                                </span>
                                <div class="d-flex align-items-center gap-2">
                                    <a id="dtlBtnBukaTab" href="#" target="_blank" class="btn btn-outline-primary btn-sm rounded-pill px-3 py-1 fs-8 fw-semibold d-inline-flex align-items-center gap-1.5 shadow-xs">
                                        <i class="bi bi-box-arrow-up-right"></i>
                                        <span>Buka Tab Baru</span>
                                    </a>
                                </div>
                            </div>

                            <!-- Container Iframe PDF Viewer -->
                            <div class="card-body p-0 flex-grow-1 bg-secondary-subtle position-relative pdf-frame-container">
                                <iframe id="dtlPdfFrame" width="100%" height="100%" style="border:none; display: block;" src="about:blank"></iframe>
                                <div id="dtlPdfEmpty" class="position-absolute top-50 start-50 translate-middle text-center text-muted" style="display: none; width: 80%;">
                                    <i class="bi bi-file-earmark-x fs-1 opacity-50 d-block mb-2"></i>
                                    <span class="small d-block fw-medium">Tidak ada berkas PDF digital yang terlampir pada surat ini.</span>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <!-- Modal Footer -->
            <div class="modal-footer bg-light border-top py-2.5 py-md-3 px-3 px-md-4 d-flex justify-content-between align-items-center flex-wrap gap-2">
                <button type="button" class="btn btn-secondary btn-sm px-3.5 py-1.5 rounded-pill fw-semibold" data-bs-dismiss="modal">
                    Tutup
                </button>
                <div class="d-flex align-items-center gap-2 flex-wrap" id="modalActionButtons">
                    <!-- Tombol Setujui / Tolak Dinamis via JS -->
                </div>
            </div>

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

<!-- ==========================================
     MODAL TOLAK DISPOSISI
========================================= -->
<div class="modal fade" id="modalRejectDisposisi" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content rounded-4 border-0 shadow-lg overflow-hidden">
            <form id="formRejectDisposisi" method="POST">
                @csrf
                @method('PATCH')
                <div class="modal-header bg-danger text-white py-2.5 py-md-3 px-3 px-md-4 d-flex justify-content-between align-items-center">
                    <div class="d-flex align-items-center gap-2">
                        <div class="rounded-circle bg-white bg-opacity-20 d-flex align-items-center justify-content-center flex-shrink-0" style="width: 30px; height: 30px;">
                            <i class="bi bi-x-circle-fill fs-6"></i>
                        </div>
                        <h6 class="modal-title fw-bold mb-0 fs-7 fs-md-6">Tolak / Batalkan Persetujuan</h6>
                    </div>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-3 p-md-4">
                    <div class="alert alert-danger bg-danger-subtle text-danger border-0 rounded-3 p-3 mb-3 small">
                        <div class="d-flex align-items-start gap-2.5">
                            <i class="bi bi-exclamation-triangle-fill fs-5 flex-shrink-0 mt-0.5"></i>
                            <div style="line-height: 1.45;">
                                Anda akan menolak atau membatalkan persetujuan disposisi untuk surat <strong id="rejectModalNomorSurat" class="font-monospace text-dark"></strong>.
                                Jika surat ini sebelumnya telah disetujui atau diterima, surat akan <strong>otomatis ditarik dan dihilangkan dari divisi penerima</strong> (termasuk riwayat penerima), dan dicatat sebagai <strong>ditolak oleh Admin</strong> untuk pengirim.
                            </div>
                        </div>
                    </div>
                    <div class="mb-2">
                        <label class="form-label small fw-semibold text-dark d-flex align-items-center gap-1.5 mb-1.5">
                            <i class="bi bi-chat-left-text text-danger"></i>
                            <span>Alasan Penolakan / Pembatalan</span>
                            <span class="text-danger">*</span>
                        </label>
                        <textarea name="alasan" class="form-control rounded-3" rows="3" placeholder="Masukkan alasan penolakan/pembatalan (misal: surat keliru, dibatalkan admin, dll)..." required style="font-size: 0.85rem;"></textarea>
                    </div>
                </div>
                <div class="modal-footer bg-light py-2.5 px-3 px-md-4 d-flex justify-content-between align-items-center flex-wrap gap-2">
                    <button type="button" class="btn btn-secondary btn-sm rounded-pill px-3 py-1.5 fw-semibold d-inline-flex align-items-center gap-1.5" data-bs-dismiss="modal">
                        <i class="bi bi-x fs-7"></i>
                        <span>Batal</span>
                    </button>
                    <button type="submit" class="btn btn-danger btn-sm rounded-pill px-3.5 py-1.5 fw-semibold shadow-xs d-inline-flex align-items-center gap-2">
                        <i class="bi bi-x-circle fs-6"></i>
                        <span>Konfirmasi Tolak</span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<style>
/* Matikan sorotan hover pada baris data kosong agar tidak terpotong atau berubah warna */
.table tbody tr.empty-state-row:hover,
.table tbody tr.empty-state-row:hover > * {
    background-color: transparent !important;
    background: transparent !important;
    cursor: default !important;
    box-shadow: none !important;
}

/* Styling Kartu Rekap Statistik (KPI Card) */
.kpi-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
}
.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}
.kpi-card.active-card {
    border-width: 1.5px !important;
}

/* Responsiveness KPI Label & Icon */
.kpi-label {
    font-size: 0.78rem;
}
@media (max-width: 575.98px) {
    .kpi-label {
        font-size: 0.72rem;
    }
}

/* Alur Disposisi Cell */
.flow-cell-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* PDF Container Responsive Height */
.pdf-frame-container {
    min-height: 520px;
}
#dtlPdfFrame {
    min-height: 520px;
}
@media (max-width: 991.98px) {
    .pdf-frame-container,
    #dtlPdfFrame {
        min-height: 360px !important;
    }
}

/* Scrollbar halus pada panel dossier kiri */
#modalDetailDisposisi .card-body::-webkit-scrollbar {
    width: 5px;
}
#modalDetailDisposisi .card-body::-webkit-scrollbar-track {
    background: transparent;
}
#modalDetailDisposisi .card-body::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

/* Dark Mode Penyesuaian */
[data-bs-theme="dark"] #modalDetailDisposisi .card-body::-webkit-scrollbar-thumb {
    background: #475569;
}
[data-bs-theme="dark"] .card-header.bg-white,
[data-bs-theme="dark"] .modal-header.bg-white,
[data-bs-theme="dark"] .modal-footer.bg-white {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}
[data-bs-theme="dark"] .modal-body {
    background-color: #0f172a !important;
}
[data-bs-theme="dark"] .modal-body .card {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}
[data-bs-theme="dark"] .modal-body .card-header {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}
[data-bs-theme="dark"] #modalDetailDisposisi .bg-white,
[data-bs-theme="dark"] #modalRejectDisposisi .bg-white {
    background-color: #1e293b !important;
    color: #f8fafc !important;
}
[data-bs-theme="dark"] #modalDetailDisposisi .bg-light,
[data-bs-theme="dark"] #modalRejectDisposisi .bg-light {
    background-color: #0f172a !important;
    color: #cbd5e1 !important;
}
[data-bs-theme="dark"] #modalDetailDisposisi .border-light-subtle,
[data-bs-theme="dark"] #modalRejectDisposisi .border-light-subtle {
    border-color: #334155 !important;
}
[data-bs-theme="dark"] #modalDetailDisposisi .text-dark,
[data-bs-theme="dark"] #modalRejectDisposisi .text-dark {
    color: #f1f5f9 !important;
}
[data-bs-theme="dark"] #modalDetailDisposisi .text-secondary {
    color: #94a3b8 !important;
}
[data-bs-theme="dark"] #modalDetailDisposisi .badge.bg-light {
    background-color: #334155 !important;
    color: #cbd5e1 !important;
    border-color: #475569 !important;
}
[data-bs-theme="dark"] .kpi-card.bg-light {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}
[data-bs-theme="dark"] .kpi-card:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3) !important;
}
[data-bs-theme="dark"] .bg-warning-subtle {
    background-color: rgba(234, 179, 8, 0.15) !important;
}
[data-bs-theme="dark"] .bg-success-subtle {
    background-color: rgba(34, 197, 94, 0.15) !important;
}
[data-bs-theme="dark"] .bg-danger-subtle {
    background-color: rgba(239, 68, 68, 0.15) !important;
}
[data-bs-theme="dark"] .bg-primary-subtle {
    background-color: rgba(59, 130, 246, 0.15) !important;
}

/* Styling Tombol & Modal Menu Aksi Approve */
.btn-menu-approve {
    transition: all 0.2s ease;
}
.btn-menu-approve:hover {
    background-color: #e2e8f0;
    color: var(--bs-primary);
    border-color: #cbd5e1;
    transform: scale(1.05);
}
.action-btn-card {
    transition: all 0.2s ease;
    border-color: #e2e8f0;
}
.action-btn-card:hover {
    transform: translateY(-1px);
    background-color: #f8fafc !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
}
[data-bs-theme="dark"] .btn-menu-approve {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #94a3b8 !important;
}
[data-bs-theme="dark"] .btn-menu-approve:hover {
    background-color: #334155 !important;
    color: #38bdf8 !important;
    border-color: #475569 !important;
}
[data-bs-theme="dark"] #modalMenuAksiApprove .bg-white {
    background-color: #1e293b !important;
    color: #f8fafc !important;
}
[data-bs-theme="dark"] #modalMenuAksiApprove .bg-light {
    background-color: #0f172a !important;
    color: #cbd5e1 !important;
}
[data-bs-theme="dark"] #modalMenuAksiApprove .border-light-subtle {
    border-color: #334155 !important;
}
[data-bs-theme="dark"] #modalMenuAksiApprove .text-dark {
    color: #f1f5f9 !important;
}
[data-bs-theme="dark"] #modalMenuAksiApprove .action-btn-card {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}
[data-bs-theme="dark"] #modalMenuAksiApprove .action-btn-card:hover {
    background-color: #243248 !important;
    border-color: #475569 !important;
}
.swal2-container {
    z-index: 20000 !important;
}
</style>

@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {

    // 1. Inisialisasi Modal Detail
    const modalDetailEl = document.getElementById('modalDetailDisposisi');
    const modalDetail = new bootstrap.Modal(modalDetailEl);

    // 2. Inisialisasi Modal Tolak
    const modalRejectEl = document.getElementById('modalRejectDisposisi');
    const modalReject = new bootstrap.Modal(modalRejectEl);
    const formReject = document.getElementById('formRejectDisposisi');
    const rejectModalNomorSurat = document.getElementById('rejectModalNomorSurat');

    // 3. Inisialisasi Modal Menu Pilihan Aksi
    const modalMenuAksiEl = document.getElementById('modalMenuAksiApprove');
    const modalMenuAksi = new bootstrap.Modal(modalMenuAksiEl);
    let activeDisposisiData = null;
    let pendingModalAction = null;

    // Transisi mulus antar-modal tanpa tumpang tindih backdrop Bootstrap
    modalMenuAksiEl.addEventListener('hidden.bs.modal', function () {
        if (typeof pendingModalAction === 'function') {
            const action = pendingModalAction;
            pendingModalAction = null;
            setTimeout(action, 80);
        }
    });

    // Populate data pada saat modal menu aksi dibuka
    modalMenuAksiEl.addEventListener('show.bs.modal', function(event) {
        const triggerBtn = event.relatedTarget;
        if (!triggerBtn) return;

        activeDisposisiData = {
            id: triggerBtn.dataset.id,
            suratId: triggerBtn.dataset.suratId,
            nomor: triggerBtn.dataset.nomor || '-',
            perihal: triggerBtn.dataset.perihal || '-',
            pengirim: triggerBtn.dataset.pengirim || '-',
            penerima: triggerBtn.dataset.penerima || '-',
            fileUrl: triggerBtn.dataset.fileUrl || '',
            status: triggerBtn.dataset.status || 'pending',
            approveUrl: triggerBtn.dataset.approveUrl || '',
            rejectUrl: triggerBtn.dataset.rejectUrl || ''
        };

        // Header & Ringkasan Alur
        document.getElementById('menuAksiNomorSurat').textContent = activeDisposisiData.nomor;
        document.getElementById('menuAksiPengirim').textContent = activeDisposisiData.pengirim;
        document.getElementById('menuAksiPengirim').title = activeDisposisiData.pengirim;
        document.getElementById('menuAksiPenerima').textContent = activeDisposisiData.penerima;
        document.getElementById('menuAksiPenerima').title = activeDisposisiData.penerima;
        document.getElementById('menuAksiPerihal').textContent = activeDisposisiData.perihal;
        document.getElementById('menuAksiPerihal').title = activeDisposisiData.perihal;

        // Status Review Badge
        const badgeContainer = document.getElementById('menuAksiBadgeStatus');
        if (activeDisposisiData.status === 'approved') {
            badgeContainer.innerHTML = '<span class="badge bg-success-subtle text-success border border-success-subtle rounded-pill px-2 py-0.5 fs-9 fw-semibold"><i class="bi bi-check-circle me-1"></i>Disetujui</span>';
        } else if (activeDisposisiData.status === 'rejected') {
            badgeContainer.innerHTML = '<span class="badge bg-danger-subtle text-danger border border-danger-subtle rounded-pill px-2 py-0.5 fs-9 fw-semibold"><i class="bi bi-x-circle me-1"></i>Ditolak</span>';
        } else {
            badgeContainer.innerHTML = '<span class="badge bg-warning-subtle text-warning-emphasis border border-warning-subtle rounded-pill px-2 py-0.5 fs-9 fw-semibold"><i class="bi bi-hourglass-split me-1"></i>Menunggu</span>';
        }

        // Dokumen PDF
        const btnPdf = document.getElementById('btnMenuAksiPdf');
        const descPdf = document.getElementById('menuAksiPdfDesc');
        if (activeDisposisiData.fileUrl) {
            btnPdf.href = activeDisposisiData.fileUrl;
            btnPdf.classList.remove('disabled', 'opacity-50');
            btnPdf.style.pointerEvents = 'auto';
            descPdf.textContent = 'Buka berkas surat di tab baru';
        } else {
            btnPdf.href = 'javascript:void(0)';
            btnPdf.classList.add('disabled', 'opacity-50');
            btnPdf.style.pointerEvents = 'none';
            descPdf.textContent = 'Tidak ada berkas PDF terlampir';
        }

        // Form Persetujuan
        const wrapperApprove = document.getElementById('wrapperMenuAksiApprove');
        const formApprove = document.getElementById('formMenuAksiApprove');
        const titleApprove = document.getElementById('menuAksiApproveTitle');
        const descApprove = document.getElementById('menuAksiApproveDesc');

        formApprove.action = activeDisposisiData.approveUrl;

        if (activeDisposisiData.status === 'approved') {
            wrapperApprove.style.display = 'none';
        } else if (activeDisposisiData.status === 'rejected') {
            wrapperApprove.style.display = 'block';
            titleApprove.textContent = 'Setujui Kembali Disposisi';
            descApprove.textContent = 'Ubah status penolakan & teruskan ke unit tujuan';
        } else {
            wrapperApprove.style.display = 'block';
            titleApprove.textContent = 'Setujui Disposisi';
            descApprove.textContent = 'Verifikasi & teruskan ke unit tujuan';
        }

        // Tombol Penolakan
        const wrapperReject = document.getElementById('wrapperMenuAksiReject');
        const titleReject = document.getElementById('menuAksiRejectTitle');
        const descReject = document.getElementById('menuAksiRejectDesc');

        if (activeDisposisiData.status === 'rejected') {
            wrapperReject.style.display = 'none';
        } else if (activeDisposisiData.status === 'approved') {
            wrapperReject.style.display = 'block';
            titleReject.textContent = 'Batalkan / Tolak Disposisi';
            descReject.textContent = 'Tarik surat dari penerima & beri catatan alasan';
        } else {
            wrapperReject.style.display = 'block';
            titleReject.textContent = 'Tolak Disposisi';
            descReject.textContent = 'Tolak permohonan dengan catatan alasan';
        }
    });

    // Pemicu Buka Modal Detail dari Modal Aksi
    document.getElementById('btnMenuAksiDetail').addEventListener('click', function() {
        if (!activeDisposisiData) return;
        const targetId = activeDisposisiData.id;
        pendingModalAction = function() {
            fetchDetailDisposisi(targetId);
        };
        modalMenuAksi.hide();
    });

    // Pemicu Buka Modal Tolak dari Modal Aksi
    document.getElementById('btnMenuAksiReject').addEventListener('click', function() {
        if (!activeDisposisiData) return;
        const targetUrl = activeDisposisiData.rejectUrl;
        const targetNomor = activeDisposisiData.nomor;
        pendingModalAction = function() {
            formReject.action = targetUrl;
            rejectModalNomorSurat.textContent = targetNomor;
            modalReject.show();
        };
        modalMenuAksi.hide();
    });

    // Handler Event Delegation untuk Tombol Detail & Tolak (Mendukung Desktop Table & Mobile Card)
    document.addEventListener('click', function(e) {
        const rejectBtn = e.target.closest('.btn-open-reject-modal');
        if (rejectBtn) {
            const url = rejectBtn.dataset.url;
            const nomor = rejectBtn.dataset.nomor;
            formReject.action = url;
            rejectModalNomorSurat.textContent = nomor;
            modalReject.show();
            return;
        }

        const detailBtn = e.target.closest('.btn-detail-modal');
        if (detailBtn) {
            const id = detailBtn.dataset.id;
            fetchDetailDisposisi(id);
            return;
        }
    });

    function fetchDetailDisposisi(id) {
        // Tampilkan modal dan state loading
        modalDetail.show();
        document.getElementById('dtlLoadingState').style.display = 'block';
        document.getElementById('dtlContentState').style.display = 'none';
        document.getElementById('dtlPdfFrame').src = 'about:blank';
        document.getElementById('dtlPdfEmpty').style.display = 'none';
        document.getElementById('modalActionButtons').innerHTML = '';

        fetch(`/approve-disposisi/detail/${id}`)
            .then(res => res.json())
            .then(data => {
                if (!data.success) {
                    if (typeof Swal !== 'undefined') {
                        Swal.fire({
                            icon: 'error',
                            title: 'Gagal Memuat',
                            text: 'Gagal mengambil data rincian disposisi.',
                            confirmButtonColor: '#0d6efd'
                        });
                    } else {
                        alert('Gagal mengambil data rincian disposisi.');
                    }
                    return;
                }

                // Sembunyikan loading, tampilkan konten
                document.getElementById('dtlLoadingState').style.display = 'none';
                document.getElementById('dtlContentState').style.display = 'flex';

                // Pengirim & Penerima
                document.getElementById('dtlPengirimDivisi').textContent = data.pengirim.divisi;
                document.getElementById('dtlPengirimNama').textContent = data.pengirim.nama;
                document.getElementById('dtlPenerimaDivisi').textContent = data.penerima.divisi;
                document.getElementById('dtlPenerimaNama').textContent = data.penerima.nama;

                // Rincian Surat
                document.getElementById('dtlNomorSurat').textContent = data.surat.nomor_surat;
                document.getElementById('dtlPerihal').textContent = data.surat.perihal;
                document.getElementById('dtlJenisSurat').textContent = data.surat.jenis_surat;
                document.getElementById('dtlKategori').textContent = data.surat.kategori;
                document.getElementById('dtlTanggalSurat').textContent = data.surat.tanggal_surat;
                document.getElementById('dtlTanggalPengajuan').textContent = data.item.created_at;
                document.getElementById('dtlCatatanPengirim').textContent = data.catatan_pengirim;

                // Status Approval
                const statusBadgeEl = document.getElementById('dtlStatusBadge');
                const approverInfoEl = document.getElementById('dtlApproverInfo');
                const catatanApprovalWrapper = document.getElementById('dtlCatatanApprovalWrapper');

                if (data.item.admin_approval_status === 'approved') {
                    statusBadgeEl.innerHTML = '<span class="badge bg-success-subtle text-success border border-success-subtle px-3 py-1.5 rounded-pill fw-semibold d-inline-flex align-items-center gap-1.5"><i class="bi bi-check-circle"></i><span>Disetujui</span></span>';
                    approverInfoEl.style.display = 'block';
                    catatanApprovalWrapper.style.display = 'none';
                    document.getElementById('dtlApproverName').textContent = data.item.admin_approver;
                    document.getElementById('dtlApprovedAt').textContent = data.item.admin_approved_at || '-';
                } else if (data.item.admin_approval_status === 'rejected') {
                    statusBadgeEl.innerHTML = '<span class="badge bg-danger-subtle text-danger border border-danger-subtle px-3 py-1.5 rounded-pill fw-semibold d-inline-flex align-items-center gap-1.5"><i class="bi bi-x-circle"></i><span>Ditolak</span></span>';
                    approverInfoEl.style.display = 'block';
                    document.getElementById('dtlApproverName').textContent = data.item.admin_approver;
                    document.getElementById('dtlApprovedAt').textContent = data.item.admin_approved_at || '-';
                    if (data.item.catatan_approval) {
                        catatanApprovalWrapper.style.display = 'block';
                        document.getElementById('dtlCatatanApproval').textContent = data.item.catatan_approval;
                    } else {
                        catatanApprovalWrapper.style.display = 'none';
                    }
                } else {
                    statusBadgeEl.innerHTML = '<span class="badge bg-warning-subtle text-warning-emphasis border border-warning-subtle px-3 py-1.5 rounded-pill fw-semibold d-inline-flex align-items-center gap-1.5"><i class="bi bi-clock-history"></i><span>Menunggu Persetujuan</span></span>';
                    approverInfoEl.style.display = 'none';
                    catatanApprovalWrapper.style.display = 'none';
                }

                // Berkas PDF
                const btnBukaTab = document.getElementById('dtlBtnBukaTab');
                const pdfFrame = document.getElementById('dtlPdfFrame');
                const pdfEmpty = document.getElementById('dtlPdfEmpty');

                if (data.surat.file_url) {
                    btnBukaTab.href = data.surat.file_url;
                    btnBukaTab.style.display = 'inline-flex';
                    pdfFrame.style.display = 'block';
                    pdfEmpty.style.display = 'none';
                    pdfFrame.src = data.surat.file_url;
                } else {
                    btnBukaTab.style.display = 'none';
                    pdfFrame.style.display = 'none';
                    pdfEmpty.style.display = 'block';
                    pdfFrame.src = 'about:blank';
                }

                // Action buttons di footer modal
                const actionContainer = document.getElementById('modalActionButtons');
                actionContainer.innerHTML = '';

                if (data.item.admin_approval_status === 'approved') {
                    const approvedNotice = document.createElement('span');
                    approvedNotice.className = 'badge bg-success-subtle text-success border border-success-subtle px-3 py-2 rounded-pill fw-semibold d-inline-flex align-items-center gap-1.5';
                    approvedNotice.innerHTML = '<i class="bi bi-check-circle-fill"></i><span>Sudah Disetujui</span>';
                    actionContainer.appendChild(approvedNotice);
                } else if (data.item.admin_approval_status === 'rejected') {
                    const rejectedNotice = document.createElement('span');
                    rejectedNotice.className = 'badge bg-danger-subtle text-danger border border-danger-subtle px-3 py-2 rounded-pill fw-semibold d-inline-flex align-items-center gap-1.5';
                    rejectedNotice.innerHTML = '<i class="bi bi-x-circle-fill"></i><span>Sudah Ditolak</span>';
                    actionContainer.appendChild(rejectedNotice);
                }

                if (data.item.admin_approval_status !== 'rejected') {
                    const rejectBtn = document.createElement('button');
                    rejectBtn.type = 'button';
                    rejectBtn.className = 'btn btn-outline-danger btn-sm rounded-pill px-3.5 py-1.5 fw-semibold d-inline-flex align-items-center gap-1.5';
                    const isApproved = data.item.admin_approval_status === 'approved';
                    rejectBtn.innerHTML = '<i class="bi bi-x-lg"></i><span>' + (isApproved ? 'Batalkan / Tolak Disposisi' : 'Tolak Disposisi') + '</span>';
                    rejectBtn.addEventListener('click', function() {
                        modalDetail.hide();
                        formReject.action = `/approve-disposisi/reject/${data.item.id}`;
                        rejectModalNomorSurat.textContent = data.surat.nomor_surat;
                        modalReject.show();
                    });
                    actionContainer.appendChild(rejectBtn);
                }

                if (data.item.admin_approval_status !== 'approved') {
                    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
                    const approveForm = document.createElement('form');
                    approveForm.action = `/approve-disposisi/approve/${data.item.id}`;
                    approveForm.method = 'POST';
                    approveForm.className = 'd-inline m-0 form-confirm-approve';
                    const isRejected = (data.item.admin_approval_status === 'rejected');
                    approveForm.innerHTML = `
                        <input type="hidden" name="_token" value="${csrfToken}">
                        <input type="hidden" name="_method" value="PATCH">
                        <button type="submit" class="btn btn-success btn-sm rounded-pill px-3.5 py-1.5 fw-semibold shadow-xs d-inline-flex align-items-center gap-1.5">
                            <i class="bi bi-check-lg"></i>
                            <span>${isRejected ? 'Setujui Kembali Disposisi' : 'Setujui Disposisi Ini'}</span>
                        </button>
                    `;
                    actionContainer.appendChild(approveForm);
                }
            })
            .catch(err => {
                console.error(err);
                document.getElementById('dtlLoadingState').innerHTML = `
                    <div class="text-danger py-4">
                        <i class="bi bi-exclamation-triangle fs-2 d-block mb-2"></i>
                        <span>Terjadi kesalahan saat memuat rincian disposisi. Silakan coba kembali.</span>
                    </div>
                `;
            });
    }

    // Konfirmasi Persetujuan Modern dengan SweetAlert2
    document.addEventListener('submit', function(e) {
        if (e.target.classList.contains('form-confirm-approve')) {
            e.preventDefault();
            const form = e.target;
            if (typeof Swal !== 'undefined') {
                Swal.fire({
                    title: 'Setujui Disposisi?',
                    text: 'Surat akan langsung diteruskan ke unit tujuan beserta notifikasi lonceng dan ruang obrolan.',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonColor: '#198754',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: '<i class="bi bi-check-lg me-1"></i> Ya, Setujui',
                    cancelButtonText: 'Batal',
                    reverseButtons: true,
                    customClass: {
                        popup: 'rounded-4'
                    }
                }).then((result) => {
                    if (result.isConfirmed) {
                        form.submit();
                    }
                });
            } else {
                if (confirm('Apakah Anda yakin ingin MENYETUJUI disposisi ini? Surat akan langsung diteruskan ke unit tujuan.')) {
                    form.submit();
                }
            }
        }
    });

});
</script>
@endpush