@extends('layout.appdas')

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

@section('content')

<style>
.stat-hover-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}
.stat-hover-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
@media (min-width: 768px) {
    .filter-select-col {
        min-width: 150px;
    }
}
@media (max-width: 767.98px) {
    .disposisi-header-icon {
        width: 38px !important;
        height: 38px !important;
    }
    .filter-actions-col .btn {
        height: 38px !important;
    }
}
</style>

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

    <!-- Header Halaman -->
    <div class="card-header bg-white border-bottom py-3 px-3 px-md-4">
        <div class="d-flex justify-content-between align-items-start align-items-md-center flex-column flex-md-row gap-2.5 gap-md-3">
            <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 p-md-2.5 d-flex align-items-center justify-content-center shadow-xs flex-shrink-0 disposisi-header-icon" style="width: 42px; height: 42px;">
                    <i class="bi bi-inboxes-fill fs-5"></i>
                </div>
                <div>
                    <h5 class="mb-0.5 fw-bold text-dark fs-6 fs-md-5">Daftar Disposisi Masuk</h5>
                    <small class="text-muted d-block" style="font-size: 0.78rem; line-height: 1.35;">Kelola dan tindak lanjuti berkas surat disposisi yang ditujukan ke unit Anda.</small>
                </div>
            </div>
            <div class="w-100 w-md-auto mt-1 mt-md-0">
                <a href="{{ route('riwayat-disposisi.index', ['tab' => 'masuk']) }}" class="btn btn-outline-secondary btn-sm rounded-pill px-3 py-1.5 fw-semibold d-inline-flex align-items-center justify-content-center shadow-xs w-100 w-md-auto" style="font-size: 0.82rem;">
                    <i class="bi bi-clock-history me-1.5 text-primary"></i>
                    <span>Buka Riwayat Selesai</span>
                </a>
            </div>
        </div>
    </div>

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

        {{-- REKAP STATISTIK DISPOSISI (SERAGAM DENGAN MANAJEMEN SURAT) --}}
        <div class="row g-2 g-md-3 mb-3 mb-md-4">
            <div class="col-6 col-md-3">
                <a href="{{ route('daftar-disposisi.index') }}" class="text-decoration-none">
                    <div class="border rounded-3 p-2.5 p-sm-3 h-100 bg-light transition-all stat-hover-card {{ !request('status') ? 'border-primary shadow-xs' : '' }}">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <small class="text-muted d-block mb-1 fw-semibold text-truncate">Disposisi Aktif</small>
                                <h3 class="fw-bold mb-0 text-dark fs-4 fs-md-3">{{ $statTotalAktif ?? $disposisi->total() }}</h3>
                            </div>
                            <div class="stat-icon bg-soft-primary p-2 rounded-3 text-primary flex-shrink-0">
                                <i class="bi bi-inboxes-fill fs-4"></i>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-6 col-md-3">
                <a href="{{ route('daftar-disposisi.index', ['status' => 'pending']) }}" class="text-decoration-none">
                    <div class="border rounded-3 p-2.5 p-sm-3 h-100 bg-light transition-all stat-hover-card {{ request('status') === 'pending' ? 'border-warning shadow-xs' : '' }}">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <small class="text-muted d-block mb-1 fw-semibold text-truncate">Menunggu Respon</small>
                                <h3 class="fw-bold mb-0 text-warning fs-4 fs-md-3">{{ $statPending ?? 0 }}</h3>
                            </div>
                            <div class="stat-icon bg-soft-warning p-2 rounded-3 text-warning flex-shrink-0">
                                <i class="bi bi-hourglass-split fs-4"></i>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-6 col-md-3">
                <a href="{{ route('daftar-disposisi.index', ['status' => 'diproses']) }}" class="text-decoration-none">
                    <div class="border rounded-3 p-2.5 p-sm-3 h-100 bg-light transition-all stat-hover-card {{ request('status') === 'diproses' ? 'border-info shadow-xs' : '' }}">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <small class="text-muted d-block mb-1 fw-semibold text-truncate">Sedang Diproses</small>
                                <h3 class="fw-bold mb-0 text-info fs-4 fs-md-3">{{ $statDiproses ?? 0 }}</h3>
                            </div>
                            <div class="stat-icon bg-soft-info p-2 rounded-3 text-info flex-shrink-0">
                                <i class="bi bi-gear-wide-connected fs-4"></i>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-6 col-md-3">
                <a href="{{ route('riwayat-disposisi.index', ['tab' => 'masuk']) }}" class="text-decoration-none">
                    <div class="border rounded-3 p-2.5 p-sm-3 h-100 bg-light transition-all stat-hover-card">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <small class="text-muted d-block mb-1 fw-semibold text-truncate">Riwayat Selesai</small>
                                <h3 class="fw-bold mb-0 text-success fs-4 fs-md-3">{{ $statSelesai ?? 0 }}</h3>
                            </div>
                            <div class="stat-icon bg-soft-success p-2 rounded-3 text-success flex-shrink-0">
                                <i class="bi bi-check2-all fs-4"></i>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
        </div>

        <!-- Toolbar Filter & Pencarian Terpadu (Sejajar Horizontal) -->
        <div class="bg-light p-2.5 p-md-3 rounded-3 border mb-3">
            <form action="{{ route('daftar-disposisi.index') }}" method="GET" class="row g-2 align-items-center">
                <!-- Badge Total Disposisi Aktif (Desktop only) -->
                <div class="d-none d-md-flex col-xl-auto align-items-center">
                    <span class="badge bg-primary-subtle text-primary border border-primary-subtle px-3 py-2 rounded-pill fw-semibold text-nowrap d-inline-flex align-items-center">
                        <i class="bi bi-inbox-fill me-1.5"></i> {{ $disposisi->total() }} Disposisi Aktif
                    </span>
                </div>

                <!-- Input Pencarian -->
                <div class="col-12 col-md flex-grow-1">
                    <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 border-start-0 ps-1" placeholder="Cari nomor surat, pengirim, perihal..." value="{{ request('search') }}" style="font-size: 0.84rem;">
                        @if(request('search'))
                            <a href="{{ route('daftar-disposisi.index', request()->except('search')) }}" class="input-group-text bg-white border-start-0 text-muted text-decoration-none" title="Hapus teks pencarian">
                                <i class="bi bi-x-circle-fill text-secondary" style="font-size: 0.85rem;"></i>
                            </a>
                        @endif
                    </div>
                </div>

                <!-- Field Filter Status -->
                <div class="col-12 col-md-auto filter-select-col">
                    <div class="input-group input-group-sm flex-nowrap">
                        <span class="input-group-text bg-white border-end-0 text-muted">
                            <i class="bi bi-funnel text-primary"></i>
                        </span>
                        <select name="status" class="form-select border-start-0 fw-medium" onchange="this.form.submit()" style="font-size: 0.84rem;">
                            <option value="">Semua Status</option>
                            <option value="pending" {{ request('status') === 'pending' ? 'selected' : '' }}>Pending</option>
                            <option value="dibaca" {{ request('status') === 'dibaca' ? 'selected' : '' }}>Dibaca</option>
                            <option value="diproses" {{ request('status') === 'diproses' ? 'selected' : '' }}>Diproses</option>
                        </select>
                    </div>
                </div>

                <!-- Field Filter Urutkan (Sorting) -->
                <div class="col-12 col-md-auto filter-select-col">
                    <div class="input-group input-group-sm flex-nowrap">
                        <span class="input-group-text bg-white border-end-0 text-muted">
                            <i class="bi bi-sort-alpha-down text-primary"></i>
                        </span>
                        <select name="sort" class="form-select border-start-0 fw-medium" onchange="this.form.submit()" style="font-size: 0.84rem;">
                            <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>
                </div>

                <!-- Tombol Aksi (Cari & Reset) -->
                <div class="col-12 col-md-auto d-flex gap-2 align-items-center justify-content-end filter-actions-col">
                    <button class="btn btn-primary btn-sm px-3 fw-semibold d-inline-flex align-items-center justify-content-center gap-1 shadow-xs flex-fill flex-md-grow-0" type="submit" title="Cari Data">
                        <i class="bi bi-search"></i> <span>Cari</span>
                    </button>
                    @if(request('search') || request('status') || (request('sort') && request('sort') !== 'terbaru'))
                        <a href="{{ route('daftar-disposisi.index') }}" class="btn btn-reset-custom btn-sm d-inline-flex align-items-center justify-content-center gap-1 flex-fill flex-md-grow-0" title="Reset Filter">
                            <i class="bi bi-arrow-counterclockwise"></i> <span>Reset</span>
                        </a>
                    @endif
                </div>
            </form>
        </div>

        <!-- Tabel Disposisi -->
        <div class="table-responsive" style="overflow-x: auto; overflow-y: visible !important;">
            <table class="table table-hover align-middle mb-0 text-nowrap">
                <thead class="table-light">
                    <tr>
                        <th width="60" class="text-center">No</th>
                        <th>Nomor Surat</th>
                        <th>Perihal</th>
                        <th>Pengirim</th>
                        <th width="130">Tanggal</th>
                        <th width="150">Approval Admin</th>
                        <th width="130" class="text-center">Status Penerima</th>
                        <th class="text-center text-nowrap" style="width: 1%;">Aksi</th>
                    </tr>
                </thead>

                <tbody>
                    @forelse($disposisi as $item)
                    <tr>
                        <td class="text-center fw-semibold text-muted">
                            {{ $disposisi->firstItem() + $loop->index }}
                        </td>

                        <td class="fw-bold text-dark font-monospace">
                            <div class="d-flex align-items-center flex-wrap gap-1">
                                <span>{{ $item->surat->nomor_surat ?? '-' }}</span>
                                @if($item->status === 'pending' || ($lastSeenDisposisi && $item->created_at && $item->created_at->gt($lastSeenDisposisi)))
                                <span class="badge bg-danger text-white rounded-pill px-2 py-0.5" style="font-size: 0.68rem;">
                                    <i class="bi bi-bell-fill me-1"></i>Baru
                                </span>
                                @endif
                            </div>
                        </td>

                        <td>
                            <div class="fw-semibold text-dark">{{ $item->surat->perihal ?? '-' }}</div>
                            @if($item->surat && $item->surat->jenisSurat)
                                <small class="text-muted">{{ $item->surat->jenisSurat->nama_jenis_surat }}</small>
                            @endif
                        </td>

                        <td>
                            @if(isset($item->data_disposisi) && $item->data_disposisi && $item->data_disposisi->dari)
                                <div class="fw-semibold text-dark">
                                    {{ $item->data_disposisi->dari->divisi->nama_divisi ?? $item->data_disposisi->dari->name }}
                                </div>
                                <small class="text-muted d-block">
                                    {{ $item->data_disposisi->dari->name ?? '' }}
                                </small>
                                @if($item->surat && $item->surat->divisi && ($item->surat->divisi->id !== ($item->data_disposisi->dari->divisi_id ?? null)))
                                    <span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle rounded-pill mt-1" style="font-size: 0.7rem;">
                                        <i class="bi bi-arrow-return-right me-1"></i>Asal: {{ $item->surat->divisi->nama_divisi }}
                                    </span>
                                @endif
                            @else
                                <div class="fw-semibold text-dark">
                                    {{ $item->surat->divisi->nama_divisi ?? ($item->surat->asal_tujuan ?? '-') }}
                                </div>
                                <small class="text-muted d-block">
                                    {{ $item->surat->user->name ?? '' }}
                                </small>
                            @endif
                        </td>

                        <td class="text-muted small">
                            <i class="bi bi-calendar-event me-1 text-primary"></i>
                            {{ $item->surat && $item->surat->tanggal_surat ? \Carbon\Carbon::parse($item->surat->tanggal_surat)->translatedFormat('d M Y') : '-' }}
                        </td>

                        <td>
                            @if($item->admin_approval_status === 'pending')
                                <span class="badge bg-warning-subtle text-warning-emphasis border border-warning-subtle rounded-pill px-2.5 py-1">
                                    <i class="bi bi-clock me-1"></i> Menunggu Admin
                                </span>
                            @elseif($item->admin_approval_status === 'approved')
                                <span class="badge bg-success-subtle text-success border border-success-subtle rounded-pill px-2.5 py-1 mb-1">
                                    <i class="bi bi-check-circle me-1"></i> Disetujui Admin
                                </span>
                                @if($item->admin_approved_at)
                                    <div class="text-muted small" style="font-size: 0.72rem;">
                                        {{ \Carbon\Carbon::parse($item->admin_approved_at)->translatedFormat('d M Y, H:i') }} WIB
                                    </div>
                                @endif
                            @else
                                <span class="badge bg-danger-subtle text-danger border border-danger-subtle rounded-pill px-2.5 py-1 mb-1">
                                    <i class="bi bi-x-circle me-1"></i> Ditolak Admin
                                </span>
                                @if($item->admin_approved_at)
                                    <div class="text-muted small" style="font-size: 0.72rem;">
                                        {{ \Carbon\Carbon::parse($item->admin_approved_at)->translatedFormat('d M Y, H:i') }} WIB
                                    </div>
                                @endif
                            @endif
                        </td>

                        <td class="text-center">
                            @switch($item->status)
                                @case('pending')
                                    <span class="badge bg-danger-subtle text-danger border border-danger-subtle rounded-pill px-3 py-1.5 fw-semibold">
                                        <i class="bi bi-bell me-1"></i> Belum Dibuka
                                    </span>
                                    @break
                                @case('dibaca')
                                    <span class="badge bg-info-subtle text-info border border-info-subtle rounded-pill px-3 py-1.5">
                                        <i class="bi bi-eye me-1"></i> Dibaca
                                    </span>
                                    @break
                                @case('diterima')
                                    <span class="badge bg-success-subtle text-success border border-success-subtle rounded-pill px-3 py-1.5">
                                        <i class="bi bi-check-circle-fill me-1"></i> Diterima
                                    </span>
                                    @break
                                @case('ditolak')
                                    <span class="badge bg-danger-subtle text-danger border border-danger-subtle rounded-pill px-3 py-1.5">
                                        <i class="bi bi-x-circle-fill me-1"></i> Ditolak
                                    </span>
                                    @break
                                @case('diproses')
                                    <span class="badge bg-primary-subtle text-primary border border-primary-subtle rounded-pill px-3 py-1.5">
                                        <i class="bi bi-gear-fill me-1"></i> Diproses
                                    </span>
                                    @break
                                @case('selesai')
                                    <span class="badge bg-dark rounded-pill px-3 py-1.5">
                                        <i class="bi bi-check-all me-1"></i> Selesai
                                    </span>
                                    @break
                                @default
                                    <span class="badge bg-secondary rounded-pill px-3 py-1.5">
                                        {{ ucfirst($item->status) }}
                                    </span>
                            @endswitch
                        </td>

                        <td class="text-center text-nowrap">
                            <div class="btn-action-group justify-content-center flex-nowrap" style="display: inline-flex; align-items: center; gap: 4px;">
                                <button class="btn btn-outline-primary btn-sm btn-detail-disposisi rounded-2" data-id="{{ $item->id }}" title="Detail & Tindak Lanjut Disposisi">
                                    <i class="bi bi-eye-fill"></i><span class="d-none d-xxl-inline ms-1">Detail</span>
                                </button>
                                <a href="{{ route('surat.view', $item->surat_id) }}" target="_blank" class="btn btn-outline-secondary btn-sm rounded-2" title="Lihat Berkas PDF Langsung">
                                    <i class="bi bi-file-earmark-pdf"></i><span class="d-none d-xxl-inline ms-1">Berkas</span>
                                </a>
                                @php
                                    $effectiveDivisiId = auth()->user()->getEffectiveDivisiId();
                                    $isRecipient = ($item->user_id === auth()->id()) || ($item->user && $item->user->divisi_id === $effectiveDivisiId);
                                    $canTerima = $isRecipient && in_array($item->status, ['pending', 'dibaca', 'diproses']) && ($item->admin_approval_status === 'approved');
                                @endphp
                                @if($canTerima)
                                    <button type="button" class="btn btn-success btn-sm btn-quick-terima rounded-2" data-id="{{ $item->id }}" data-nomor="{{ $item->surat->nomor_surat ?? '' }}" title="Terima Surat Disposisi">
                                        <i class="bi bi-check-circle"></i><span class="d-none d-xxl-inline ms-1">Terima</span>
                                    </button>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr class="empty-state-row">
                        <td colspan="8" 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-2">
                                <i class="bi bi-folder-x fs-2 mb-2 text-muted"></i>
                                <span class="fw-medium">Tidak ada data disposisi yang ditemukan.</span>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <!-- Footer Pagination -->
        @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 DETAIL DISPOSISI (MODERN 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-3 px-4 d-flex justify-content-between align-items-center">
                <div class="d-flex align-items-center gap-2.5">
                    <div class="rounded-3 bg-primary bg-opacity-10 text-primary p-2 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                        <i class="bi bi-inboxes fs-5"></i>
                    </div>
                    <div>
                        <h6 class="modal-title fw-bold text-dark mb-0">Rincian & Tindak Lanjut Disposisi</h6>
                        <small class="text-muted" id="detailModalSubtitle">Periksa instruksi dan perbarui status disposisi</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-4 bg-light bg-opacity-50">
                <!-- Loading State -->
                <div id="dtlLoadingState" class="py-5 text-center">
                    <div class="spinner-border text-primary mb-2" role="status"></div>
                    <p class="text-muted small mb-0">Memuat rincian dan berkas surat disposisi...</p>
                </div>

                <!-- Content State -->
                <div id="dtlContentState" class="row g-3" style="display: none;">
                    <!-- KOLOM KIRI: Info Surat, Form Update Status & Riwayat Chat -->
                    <div class="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">
                                <div class="mb-2 pb-2 border-bottom">
                                    <label class="text-muted small text-uppercase fw-semibold d-block mb-0.5">Nomor Surat</label>
                                    <span class="font-monospace fw-bold text-primary fs-7" id="detailNomorSurat">-</span>
                                </div>
                                <div class="mb-2 pb-2 border-bottom">
                                    <label class="text-muted small text-uppercase fw-semibold d-block mb-0.5">Perihal</label>
                                    <div class="fw-bold text-dark fs-7" id="detailPerihal">-</div>
                                </div>
                                <div class="row g-2 mb-2 pb-2 border-bottom">
                                    <div class="col-6">
                                        <label class="text-muted small text-uppercase fw-semibold d-block mb-0.5">Pengirim</label>
                                        <span class="fw-semibold text-dark" id="detailPengirim">-</span>
                                    </div>
                                    <div class="col-6">
                                        <label class="text-muted small text-uppercase fw-semibold d-block mb-0.5">Tanggal Surat</label>
                                        <span class="fw-semibold text-dark" id="detailTanggal">-</span>
                                    </div>
                                </div>
                                <div class="row g-2">
                                    <div class="col-6">
                                        <label class="text-muted small text-uppercase fw-semibold d-block mb-0.5">Approval Admin</label>
                                        <div id="detailApprovalAdmin">-</div>
                                    </div>
                                    <div class="col-6">
                                        <label class="text-muted small text-uppercase fw-semibold d-block mb-0.5">Waktu Approval</label>
                                        <small class="text-muted d-block" id="detailTglApprovalAdmin">-</small>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Card 2: Form Tindak Lanjut / Update Status -->
                        <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-pencil-square text-success me-1.5"></i> Update Status Disposisi
                                </span>
                            </div>
                            <div class="card-body p-3">
                                <div class="mb-2.5">
                                    <label class="form-label small fw-semibold text-muted text-uppercase mb-1">Status Pilihan</label>
                                    <select id="statusDisposisi" class="form-select form-select-sm fw-medium">
                                        <option value="pending">Pending</option>
                                        <option value="dibaca">Dibaca</option>
                                        <option value="diterima">Diterima</option>
                                        <option value="diproses">Diproses</option>
                                        <option value="ditolak">Ditolak</option>
                                    </select>
                                    <small class="text-muted" style="font-size: 0.72rem;">Jika memilih <strong>Diterima</strong> atau <strong>Ditolak</strong>, surat akan berpindah ke menu Riwayat.</small>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label small fw-semibold text-muted text-uppercase mb-1">Catatan Tindak Lanjut</label>
                                    <textarea id="catatanDisposisi" class="form-control form-control-sm" rows="3" placeholder="Tuliskan catatan respon atau keterangan tambahan..."></textarea>
                                </div>

                                <div class="text-end">
                                    <button id="btnUpdateStatus" class="btn btn-primary btn-sm px-3 rounded-pill fw-semibold shadow-xs">
                                        <i class="bi bi-check-lg me-1"></i> Simpan Perubahan
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- Card 3: Riwayat Obrolan / Instruksi -->
                        <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-dots text-primary me-1.5"></i> Riwayat Instruksi / Chat
                                </span>
                            </div>
                            <div class="card-body p-3">
                                <div id="detailChat" class="overflow-auto border rounded-2 p-2.5 bg-light" style="max-height: 180px;">
                                    Belum ada riwayat.
                                </div>
                            </div>
                        </div>

                    </div>

                    <!-- KOLOM KANAN: Pratinjau Dokumen PDF -->
                    <div class="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">
                            <div class="card-header bg-white border-bottom py-2.5 px-3 d-flex justify-content-between align-items-center">
                                <span class="fw-bold text-dark fs-8">
                                    <i class="bi bi-file-earmark-pdf text-danger me-1.5"></i> Pratinjau Berkas Dokumen
                                </span>
                                <div class="d-flex gap-1.5">
                                    <a id="btnBukaPdfTab" href="#" target="_blank" class="btn btn-xs btn-outline-primary rounded-pill px-2.5 py-1 small" style="font-size: 0.75rem;">
                                        <i class="bi bi-box-arrow-up-right me-1"></i> Buka Penuh
                                    </a>
                                    <a id="btnUnduhPdf" href="#" class="btn btn-xs btn-outline-secondary rounded-pill px-2.5 py-1 small" style="font-size: 0.75rem;">
                                        <i class="bi bi-download me-1"></i> Unduh
                                    </a>
                                </div>
                            </div>
                            <div class="card-body p-0 flex-grow-1 bg-secondary-subtle" style="min-height: 520px;">
                                <iframe id="detailPdf" src="" style="width: 100%; height: 100%; min-height: 520px; border: none;"></iframe>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Modal Footer -->
            <div class="modal-footer bg-light border-top py-2.5 px-4">
                <button type="button" class="btn btn-secondary btn-sm px-4 rounded-pill" data-bs-dismiss="modal">
                    Tutup
                </button>
            </div>
        </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;
}
</style>
@endsection

@push('scripts')
<script>
    let disposisiAktif = null;

    document.addEventListener('DOMContentLoaded', function() {

        // ============================
        // DETAIL DISPOSISI
        // ============================
        document.querySelectorAll('.btn-detail-disposisi').forEach(function(btn) {
            btn.addEventListener('click', function() {
                let id = this.dataset.id;

                // Tampilkan Modal & Loader State
                const modalEl = document.getElementById('modalDetailDisposisi');
                const modal = new bootstrap.Modal(modalEl);
                document.getElementById('dtlLoadingState').style.display = 'block';
                document.getElementById('dtlContentState').style.display = 'none';
                modal.show();

                fetch('/daftar-disposisi/detail/' + id)
                    .then(async response => {
                        if (!response.ok) {
                            const text = await response.text();
                            throw new Error(text);
                        }
                        return response.json();
                    })
                    .then(function(data) {
                        disposisiAktif = data.disposisi.id;

                        // Perbarui Subtitle & Nomor
                        const nomor = data.surat ? (data.surat.nomor_surat || '-') : '-';
                        document.getElementById('detailModalSubtitle').innerText = nomor;
                        document.getElementById('detailNomorSurat').innerText = nomor;
                        document.getElementById('detailPerihal').innerText = data.surat ? (data.surat.perihal || '-') : '-';
                        let pengirimModalText = '-';
                        if (data.data_disposisi && data.data_disposisi.dari) {
                            const dariDivisi = data.data_disposisi.dari.divisi ? data.data_disposisi.dari.divisi.nama_divisi : data.data_disposisi.dari.name;
                            const dariUser = data.data_disposisi.dari.name;
                            const asalSurat = (data.surat && data.surat.divisi) ? data.surat.divisi.nama_divisi : null;
                            if (asalSurat && data.data_disposisi.dari.divisi_id !== data.surat.divisi_id) {
                                pengirimModalText = `${dariDivisi} (${dariUser}) — [Asal Dokumen: ${asalSurat}]`;
                            } else {
                                pengirimModalText = `${dariDivisi} (${dariUser})`;
                            }
                        } else {
                            pengirimModalText = (data.surat && data.surat.divisi) ? (data.surat.divisi.nama_divisi || '-') : (data.surat ? data.surat.asal_tujuan : '-');
                        }
                        document.getElementById('detailPengirim').innerText = pengirimModalText;
                        
                        if (data.surat && data.surat.tanggal_surat) {
                            const tgl = new Date(data.surat.tanggal_surat);
                            document.getElementById('detailTanggal').innerText = tgl.toLocaleDateString('id-ID', {
                                day: '2-digit', month: 'short', year: 'numeric'
                            });
                        } else {
                            document.getElementById('detailTanggal').innerText = '-';
                        }

                        // Perbarui tampilan status baris tabel secara real-time
                        const tr = btn.closest('tr');
                        if (tr && data.disposisi.status === 'dibaca') {
                            const statusTd = tr.querySelector('td:nth-child(7)');
                            if (statusTd) {
                                statusTd.innerHTML = '<span class="badge bg-info-subtle text-info border border-info-subtle rounded-pill px-3 py-1.5"><i class="bi bi-eye me-1"></i> Dibaca</span>';
                            }
                            // Kurangi atau hilangkan counter notifikasi lonceng di navbar
                            const navNotifBadge = document.getElementById('navbarNotifBadge');
                            if (navNotifBadge) {
                                let currentCount = parseInt(navNotifBadge.innerText.trim()) || 0;
                                if (currentCount > 1) {
                                    navNotifBadge.innerText = (currentCount - 1) > 99 ? '99+' : (currentCount - 1);
                                } else {
                                    navNotifBadge.remove();
                                }
                            }
                        }

                        // Status Approval Admin
                        let approvalBadge = '-';
                        if (data.disposisi.admin_approval_status === 'approved') {
                            approvalBadge = '<span class="badge bg-success-subtle text-success border border-success-subtle rounded-pill px-2.5 py-1"><i class="bi bi-check-circle me-1"></i> Disetujui Admin</span>';
                        } else if (data.disposisi.admin_approval_status === 'rejected') {
                            approvalBadge = '<span class="badge bg-danger-subtle text-danger border border-danger-subtle rounded-pill px-2.5 py-1"><i class="bi bi-x-circle me-1"></i> Ditolak Admin</span>';
                        } else {
                            approvalBadge = '<span class="badge bg-warning-subtle text-warning-emphasis border border-warning-subtle rounded-pill px-2.5 py-1"><i class="bi bi-clock me-1"></i> Menunggu Admin</span>';
                        }
                        document.getElementById('detailApprovalAdmin').innerHTML = approvalBadge;

                        if (data.disposisi.admin_approved_at) {
                            let tglApp = new Date(data.disposisi.admin_approved_at).toLocaleString('id-ID', {
                                day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit'
                            });
                            document.getElementById('detailTglApprovalAdmin').innerText = tglApp + ' WIB';
                        } else {
                            document.getElementById('detailTglApprovalAdmin').innerHTML = '<span class="text-muted">Belum diproses</span>';
                        }

                        // Form Pilihan Status & Catatan
                        let currentStatus = data.disposisi.status;
                        let statusSelect = document.getElementById('statusDisposisi');
                        if (statusSelect.querySelector(`option[value="${currentStatus}"]`)) {
                            statusSelect.value = currentStatus;
                        } else {
                            statusSelect.value = 'pending';
                        }
                        document.getElementById('catatanDisposisi').value = data.disposisi.catatan ?? '';

                        // Berkas Dokumen PDF
                        document.getElementById('detailPdf').src = '/surat/' + data.surat.id + '/view';
                        document.getElementById('btnBukaPdfTab').href = '/surat/' + data.surat.id + '/view';
                        document.getElementById('btnUnduhPdf').href = '/surat/' + data.surat.id + '/download';

                        // Riwayat Obrolan / Chat
                        let html = '';
                        if (!data.chat || data.chat.length === 0) {
                            html = '<div class="alert alert-light text-center py-2 mb-0 small text-muted">Belum ada riwayat instruksi atau pesan.</div>';
                        } else {
                            data.chat.forEach(function(item) {
                                const senderName = item.pengirim ? item.pengirim.name : 'Pengguna';
                                const chatDate = new Date(item.created_at).toLocaleString('id-ID', {
                                    day: '2-digit', month: 'short', hour: '2-digit', minute: '2-digit'
                                });
                                html += `
                                    <div class="border rounded-2 p-2 mb-2 bg-white">
                                        <div class="d-flex justify-content-between align-items-center mb-1">
                                            <strong class="text-dark small">${senderName}</strong>
                                            <small class="text-muted" style="font-size: 0.7rem;">${chatDate}</small>
                                        </div>
                                        <div class="small text-secondary">${item.pesan || ''}</div>
                                        ${item.catatan ? `<div class="small text-muted fst-italic mt-1">Catatan: ${item.catatan}</div>` : ''}
                                    </div>
                                `;
                            });
                        }
                        document.getElementById('detailChat').innerHTML = html;

                        // Selesai Memuat: Tampilkan Konten
                        document.getElementById('dtlLoadingState').style.display = 'none';
                        document.getElementById('dtlContentState').style.display = 'flex';
                    })
                    .catch(function(error) {
                        console.error(error);
                        document.getElementById('dtlLoadingState').style.display = 'none';
                        Swal.fire({
                            icon: 'error',
                            title: 'Gagal Memuat Detail',
                            text: error.message || 'Terjadi kesalahan saat memuat rincian disposisi.'
                        });
                    });
            });
        });

        // ============================
        // UPDATE STATUS DISPOSISI
        // ============================
        const btnUpdateStatus = document.getElementById('btnUpdateStatus');
        if (btnUpdateStatus) {
            btnUpdateStatus.addEventListener('click', function() {
                if (disposisiAktif == null) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Perhatian',
                        text: 'Data disposisi belum dipilih.'
                    });
                    return;
                }

                const selectedStatus = document.getElementById('statusDisposisi').value;
                const isFinished = ['diterima', 'ditolak'].includes(selectedStatus);

                btnUpdateStatus.disabled = true;
                btnUpdateStatus.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> Menyimpan...';

                fetch('/daftar-disposisi/update-status/' + disposisiAktif, {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify({
                        status: selectedStatus,
                        catatan: document.getElementById('catatanDisposisi').value
                    })
                })
                .then(async response => {
                    const result = await response.json().catch(() => ({}));
                    if (!response.ok) {
                        let errorMsg = result.message || 'Gagal memperbarui status disposisi';
                        if (result.errors) {
                            errorMsg = Object.values(result.errors).flat().join('<br>');
                        }
                        throw new Error(errorMsg);
                    }
                    return result;
                })
                .then(result => {
                    Swal.fire({
                        icon: 'success',
                        title: 'Berhasil!',
                        text: isFinished 
                            ? 'Status berhasil diperbarui. Pekerjaan telah selesai dan dipindahkan ke menu Riwayat.'
                            : (result.message || 'Status disposisi berhasil diperbarui.'),
                        timer: 1600,
                        showConfirmButton: false
                    });
                    setTimeout(function() {
                        location.reload();
                    }, 1600);
                })
                .catch(function(error) {
                    btnUpdateStatus.disabled = false;
                    btnUpdateStatus.innerHTML = '<i class="bi bi-check-lg me-1"></i> Simpan Perubahan';
                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal',
                        text: error.message
                    });
                });
            });
        }

        // ============================
        // QUICK TERIMA DISPOSISI DARI TABEL
        // ============================
        document.querySelectorAll('.btn-quick-terima').forEach(function(btn) {
            btn.addEventListener('click', function() {
                const id = this.dataset.id;
                const nomorSurat = this.dataset.nomor || '';

                Swal.fire({
                    title: 'Terima Surat Disposisi?',
                    html: `Apakah Anda ingin menerima surat <strong>${nomorSurat}</strong>?<br><small class="text-muted">Surat akan otomatis masuk ke daftar Manajemen Surat divisi Anda, keluar dari daftar disposisi aktif, dan berpindah ke menu Riwayat.</small>`,
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonColor: '#198754',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: '<i class="bi bi-check-circle me-1"></i> Ya, Terima Surat',
                    cancelButtonText: 'Batal',
                    reverseButtons: true
                }).then((res) => {
                    if (res.isConfirmed) {
                        Swal.fire({
                            title: 'Memproses...',
                            text: 'Mohon tunggu sebentar',
                            allowOutsideClick: false,
                            didOpen: () => Swal.showLoading()
                        });

                        fetch('/daftar-disposisi/update-status/' + id, {
                            method: 'PUT',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                                'Accept': 'application/json'
                            },
                            body: JSON.stringify({
                                status: 'diterima',
                                catatan: 'Surat diterima oleh divisi penerima.'
                            })
                        })
                        .then(response => {
                            if (!response.ok) throw new Error('Gagal menerima surat');
                            return response.json();
                        })
                        .then(result => {
                            Swal.fire({
                                icon: 'success',
                                title: 'Surat Diterima!',
                                text: 'Surat berhasil diterima dan dipindahkan ke Riwayat Disposisi.',
                                timer: 1500,
                                showConfirmButton: false
                            });
                            setTimeout(() => location.reload(), 1500);
                        })
                        .catch(err => {
                            Swal.fire({
                                icon: 'error',
                                title: 'Gagal',
                                text: err.message
                            });
                        });
                    }
                });
            });
        });

    });
</script>
@endpush