@extends('layout.appdas')

@section('title', 'Riwayat 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: 155px;
    }
}
@media (max-width: 767.98px) {
    .riwayat-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 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 align-self-start align-self-md-center riwayat-header-icon" style="width: 42px; height: 42px;">
                    <i class="bi bi-clock-history fs-5"></i>
                </div>
                <div>
                    <h5 class="mb-0.5 fw-bold text-dark fs-6 fs-md-5">Riwayat Disposisi</h5>
                    <small class="text-muted d-block" style="font-size: 0.78rem; line-height: 1.35;">Arsip rekapitulasi pekerjaan disposisi dan pemantauan surat yang telah tuntas diproses (diterima atau ditolak).</small>
                </div>
            </div>
            <div class="w-100 w-md-auto d-flex align-items-center gap-2 mt-1 mt-md-0">
                <a href="{{ route('daftar-disposisi.index') }}" class="btn btn-outline-primary btn-sm rounded-pill px-2.5 px-md-3 py-1.5 fw-semibold d-inline-flex align-items-center justify-content-center shadow-xs flex-fill flex-md-grow-0 text-center" style="font-size: 0.82rem;">
                    <i class="bi bi-inboxes me-1.5"></i> <span>Disposisi Aktif</span>
                </a>
                <a href="{{ route('monitoring.index') }}" class="btn btn-outline-secondary btn-sm rounded-pill px-2.5 px-md-3 py-1.5 fw-semibold d-inline-flex align-items-center justify-content-center shadow-xs flex-fill flex-md-grow-0 text-center" style="font-size: 0.82rem;">
                    <i class="bi bi-activity me-1.5"></i> <span>Monitoring Aktif</span>
                </a>
            </div>
        </div>
    </div>

    <!-- Navigasi Tab -->
    <div class="bg-light border-bottom px-3 px-md-4 pt-2.5 pt-md-3">
        <ul class="nav nav-tabs card-header-tabs border-bottom-0 flex-nowrap" id="riwayatTab" role="tablist">
            <li class="nav-item flex-fill flex-md-grow-0" role="presentation">
                <a class="nav-link fw-semibold px-2 px-md-3 py-2 d-flex align-items-center justify-content-center text-truncate {{ $tab === 'masuk' ? 'active text-primary border-bottom-0 bg-white' : 'text-muted' }}" 
                   href="{{ route('riwayat-disposisi.index', ['tab' => 'masuk', 'sort' => request('sort'), 'search' => request('search')]) }}"
                   style="font-size: 0.84rem;">
                    <i class="bi bi-inbox me-1.5 flex-shrink-0"></i> 
                    <span class="text-truncate">
                        <span class="d-none d-sm-inline">Disposisi </span>Masuk<span class="d-none d-md-inline"> Selesai</span>
                    </span>
                    <span class="badge rounded-pill {{ $tab === 'masuk' ? 'bg-primary' : 'bg-secondary' }} ms-1.5 px-2 py-0.5 flex-shrink-0" style="font-size: 0.72rem;">
                        {{ $totalMasuk }}
                    </span>
                </a>
            </li>
            <li class="nav-item flex-fill flex-md-grow-0" role="presentation">
                <a class="nav-link fw-semibold px-2 px-md-3 py-2 d-flex align-items-center justify-content-center text-truncate {{ $tab === 'keluar' ? 'active text-primary border-bottom-0 bg-white' : 'text-muted' }}" 
                   href="{{ route('riwayat-disposisi.index', ['tab' => 'keluar', 'sort' => request('sort'), 'search' => request('search')]) }}"
                   style="font-size: 0.84rem;">
                    <i class="bi bi-send-check me-1.5 flex-shrink-0"></i> 
                    <span class="text-truncate">
                        <span class="d-none d-sm-inline">Disposisi </span>Keluar<span class="d-none d-md-inline"> Selesai (Monitoring)</span>
                    </span>
                    <span class="badge rounded-pill {{ $tab === 'keluar' ? 'bg-primary' : 'bg-secondary' }} ms-1.5 px-2 py-0.5 flex-shrink-0" style="font-size: 0.72rem;">
                        {{ $totalKeluar }}
                    </span>
                </a>
            </li>
        </ul>
    </div>

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

        {{-- REKAP STATISTIK RIWAYAT 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('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 {{ $tab === 'masuk' && !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">Total Riwayat Masuk</small>
                                <h3 class="fw-bold mb-0 text-dark fs-4 fs-md-3">{{ $totalMasuk ?? 0 }}</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('riwayat-disposisi.index', ['tab' => 'masuk', 'status' => 'diterima']) }}" class="text-decoration-none">
                    <div class="border rounded-3 p-2.5 p-sm-3 h-100 bg-light transition-all stat-hover-card {{ $tab === 'masuk' && request('status') === 'diterima' ? 'border-success 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 Diterima</small>
                                <h3 class="fw-bold mb-0 text-success fs-4 fs-md-3">{{ $totalDiterima ?? 0 }}</h3>
                            </div>
                            <div class="stat-icon bg-soft-success p-2 rounded-3 text-success flex-shrink-0">
                                <i class="bi bi-check-circle-fill fs-4"></i>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-6 col-md-3">
                <a href="{{ route('riwayat-disposisi.index', ['tab' => 'masuk', 'status' => 'ditolak']) }}" class="text-decoration-none">
                    <div class="border rounded-3 p-2.5 p-sm-3 h-100 bg-light transition-all stat-hover-card {{ $tab === 'masuk' && request('status') === 'ditolak' ? 'border-danger 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 Ditolak</small>
                                <h3 class="fw-bold mb-0 text-danger fs-4 fs-md-3">{{ $totalDitolak ?? 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-fill fs-4"></i>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-6 col-md-3">
                <a href="{{ route('riwayat-disposisi.index', ['tab' => 'keluar']) }}" class="text-decoration-none">
                    <div class="border rounded-3 p-2.5 p-sm-3 h-100 bg-light transition-all stat-hover-card {{ $tab === 'keluar' ? '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">Monitoring Selesai</small>
                                <h3 class="fw-bold mb-0 text-info fs-4 fs-md-3">{{ $totalKeluar ?? 0 }}</h3>
                            </div>
                            <div class="stat-icon bg-soft-info p-2 rounded-3 text-info flex-shrink-0">
                                <i class="bi bi-send-check-fill 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('riwayat-disposisi.index') }}" method="GET" class="row g-2 align-items-center">
                <input type="hidden" name="tab" value="{{ $tab }}">

                <!-- Badge Total Riwayat (Desktop Only) -->
                <div class="d-none d-md-flex col-xl-auto align-items-center">
                    <span class="badge bg-secondary-subtle text-secondary-emphasis border border-secondary-subtle px-3 py-2 rounded-pill fw-semibold text-nowrap d-inline-flex align-items-center">
                        <i class="bi bi-archive-fill me-1.5"></i> 
                        {{ $tab === 'masuk' ? $data->total() . ' Riwayat Masuk' : $data->total() . ' Riwayat Monitoring' }}
                    </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="{{ $tab === 'masuk' ? 'Cari nomor surat, perihal, pengirim...' : 'Cari nomor surat, perihal, tujuan...' }}" 
                               value="{{ request('search') }}" style="font-size: 0.84rem;">
                        @if(request('search'))
                            <a href="{{ route('riwayat-disposisi.index', array_merge(request()->except('search'), ['tab' => $tab])) }}" 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>

                @if($tab === 'masuk')
                <!-- Field Filter Status Akhir -->
                <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="diterima" {{ request('status') === 'diterima' ? 'selected' : '' }}>Diterima</option>
                            <option value="ditolak" {{ request('status') === 'ditolak' ? 'selected' : '' }}>Ditolak</option>
                        </select>
                    </div>
                </div>
                @endif

                <!-- 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('riwayat-disposisi.index', ['tab' => $tab]) }}" 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 KONTEN SESUAI TAB AKTIF --}}
        @if ($tab === 'masuk')
            {{-- TAB 1: DISPOSISI MASUK SELESAI --}}
            <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="140">Tanggal Selesai</th>
                            <th width="130" class="text-center">Status Akhir</th>
                            <th class="text-center text-nowrap" style="width: 1%;">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($data as $item)
                        <tr>
                            <td class="text-center fw-semibold">
                                {{ $data->firstItem() + $loop->index }}
                            </td>
                            <td class="fw-semibold text-dark">
                                {{ $item->surat->nomor_surat ?? '-' }}
                            </td>
                            <td>
                                {{ $item->surat->perihal ?? '-' }}
                            </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-check me-1 text-success"></i>
                                {{ \Carbon\Carbon::parse($item->updated_at)->translatedFormat('d M Y, H:i') }}
                            </td>
                            <td class="text-center">
                                @if($item->admin_approval_status === 'rejected')
                                    <span class="badge bg-danger text-white rounded-pill px-3 py-1.5" title="Dibatalkan oleh Admin{{ !empty($item->catatan) ? ': ' . $item->catatan : '' }}">
                                        <i class="bi bi-x-circle-fill me-1"></i> Dibatalkan Admin
                                    </span>
                                @elseif(in_array(strtolower($item->status), ['diterima', 'selesai']))
                                    <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>
                                @elseif(strtolower($item->status) === '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>
                                @else
                                    <span class="badge bg-secondary rounded-pill px-3 py-1.5">
                                        {{ ucfirst($item->status) }}
                                    </span>
                                @endif
                            </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-riwayat" data-id="{{ $item->id }}" title="Lihat Detail Riwayat">
                                        <i class="bi bi-eye-fill"></i><span class="d-none d-xxl-inline ms-1">Detail</span>
                                    </button>
                                    @if($item->surat_id)
                                    <a href="{{ route('surat.view', $item->surat_id) }}" target="_blank" class="btn btn-outline-secondary btn-sm" title="Lihat Berkas PDF">
                                        <i class="bi bi-file-earmark-pdf"></i><span class="d-none d-xxl-inline ms-1">Berkas</span>
                                    </a>
                                    @endif

                                    @php
                                        $effectiveDivisiId = auth()->user()->getEffectiveDivisiId();
                                        $canManageThisItem = auth()->user()->canManageDisposisi()
                                            || ($item->user_id === auth()->id())
                                            || ($item->user && $item->user->divisi_id === $effectiveDivisiId);
                                    @endphp

                                    @if($canManageThisItem && $item->admin_approval_status !== 'rejected')
                                        @if(in_array(strtolower($item->status), ['diterima', 'selesai']))
                                            <button type="button" class="btn btn-outline-danger btn-sm btn-action-tolak" data-id="{{ $item->id }}" data-nomor="{{ $item->surat->nomor_surat ?? '' }}" title="Tolak Surat Ini (Koreksi Salah Klik Terima)">
                                                <i class="bi bi-x-circle"></i><span class="d-none d-xxl-inline ms-1">Tolak</span>
                                            </button>
                                        @elseif(strtolower($item->status) === 'ditolak')
                                            <button type="button" class="btn btn-outline-success btn-sm btn-action-terima" data-id="{{ $item->id }}" data-nomor="{{ $item->surat->nomor_surat ?? '' }}" title="Terima Kembali Surat Ini">
                                                <i class="bi bi-check-circle"></i><span class="d-none d-xxl-inline ms-1">Terima</span>
                                            </button>
                                        @endif
                                    @endif
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr class="empty-state-row">
                            <td colspan="7" 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 riwayat disposisi yang ditemukan.</span>
                                </div>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

        @else
            {{-- TAB 2: DISPOSISI KELUAR SELESAI (MONITORING) --}}
            <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 width="130">Tanggal Surat</th>
                            <th>Rekap Hasil Tujuan</th>
                            <th width="140" class="text-center">Status Akhir</th>
                            <th class="text-center text-nowrap" style="width: 1%;">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($data as $item)
                        <tr>
                            <td class="text-center fw-semibold">
                                {{ $data->firstItem() + $loop->index }}
                            </td>
                            <td class="fw-semibold text-dark">
                                {{ $item->nomor_surat }}
                            </td>
                            <td>
                                {{ $item->perihal }}
                            </td>
                            <td class="text-muted small">
                                {{ \Carbon\Carbon::parse($item->tanggal_surat)->translatedFormat('d M Y') }}
                            </td>
                            <td>
                                <div class="d-flex flex-wrap gap-1">
                                    @foreach($item->penerima->where('is_cancelled', false) as $pen)
                                        @php
                                            $divisiName = $pen->user?->divisi?->nama_divisi ?? ($pen->user?->name ?? 'Unit');
                                            $isAdminRejected = ($pen->admin_approval_status === 'rejected');
                                            $isDiterima = in_array(strtolower($pen->status), ['diterima', 'selesai']) && !$isAdminRejected;
                                            $isDitolak = strtolower($pen->status) === 'ditolak' || $isAdminRejected;
                                            $badgeTooltip = '';
                                            if ($isAdminRejected) {
                                                $badgeTooltip = 'Ditolak oleh Admin' . (!empty($pen->catatan) ? ': ' . $pen->catatan : '');
                                            } elseif ($isDitolak) {
                                                $badgeTooltip = 'Ditolak' . (!empty($pen->catatan) ? ' - Alasan: ' . $pen->catatan : '');
                                            } elseif ($isDiterima) {
                                                $badgeTooltip = 'Diterima' . (!empty($pen->diterima_pada) ? ' (' . \Carbon\Carbon::parse($pen->diterima_pada)->translatedFormat('d M Y, H:i') . ')' : '');
                                            }
                                        @endphp
                                        <span class="badge rounded-pill {{ $isDiterima ? 'bg-success-subtle text-success border border-success-subtle' : ($isDitolak ? 'bg-danger-subtle text-danger border border-danger-subtle' : 'bg-secondary-subtle text-secondary border border-secondary-subtle') }} px-2 py-1 small" style="font-size: 0.72rem;" title="{{ $badgeTooltip }}">
                                            @if($isAdminRejected)
                                                {{ $divisiName }}: Ditolak Admin
                                            @else
                                                {{ $divisiName }}: {{ ucfirst($pen->status) }}
                                            @endif
                                        </span>
                                    @endforeach
                                </div>
                            </td>
                            <td class="text-center">
                                @php
                                    $allPenerima = $item->penerima->where('is_cancelled', false);
                                    $countTerima = $allPenerima->filter(fn($p) => in_array(strtolower($p->status), ['diterima', 'selesai']) && $p->admin_approval_status === 'approved')->count();
                                    $countTolak = $allPenerima->filter(fn($p) => strtolower($p->status) === 'ditolak' || $p->admin_approval_status === 'rejected')->count();
                                    $countTotal = $allPenerima->count();
                                    $allAdminRejected = $allPenerima->isNotEmpty() && $allPenerima->every(fn($p) => $p->admin_approval_status === 'rejected');
                                    $hasAdminRejected = $allPenerima->contains(fn($p) => $p->admin_approval_status === 'rejected');
                                    $allTerima = ($countTerima === $countTotal) && ($countTotal > 0);
                                @endphp
                                @if($allTerima)
                                    <span class="badge bg-success rounded-pill px-3 py-1.5">
                                        <i class="bi bi-check2-all me-1"></i> Selesai (Diterima)
                                    </span>
                                @elseif($countTerima > 0 && $countTolak > 0)
                                    <span class="badge bg-warning-subtle text-warning-emphasis border border-warning-subtle rounded-pill px-2.5 py-1.5">
                                        <i class="bi bi-pie-chart-fill me-1"></i> Diterima Sebagian
                                    </span>
                                    <small class="d-block text-muted mt-0.5" style="font-size: 0.7rem; font-weight: 500;">
                                        {{ $countTerima }} Diterima, {{ $countTolak }} Ditolak
                                    </small>
                                @elseif($allAdminRejected)
                                    <span class="badge bg-danger rounded-pill px-3 py-1.5">
                                        <i class="bi bi-x-circle me-1"></i> Ditolak Admin
                                    </span>
                                @elseif($countTolak === $countTotal && $countTotal > 0)
                                    <span class="badge bg-danger rounded-pill px-3 py-1.5">
                                        <i class="bi bi-x-circle me-1"></i> Ditolak Seluruhnya
                                    </span>
                                @elseif($hasAdminRejected)
                                    <span class="badge bg-danger rounded-pill px-3 py-1.5">
                                        <i class="bi bi-info-circle me-1"></i> Ada Ditolak Admin
                                    </span>
                                @elseif($countTolak > 0)
                                    <span class="badge bg-danger rounded-pill px-3 py-1.5">
                                        <i class="bi bi-info-circle me-1"></i> Ada Ditolak
                                    </span>
                                @else
                                    <span class="badge bg-dark rounded-pill px-3 py-1.5">
                                        <i class="bi bi-check-circle me-1"></i> Selesai
                                    </span>
                                @endif
                            </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;">
                                    <a href="{{ route('monitoring.show', $item->id) }}" class="btn btn-outline-primary btn-sm" title="Lihat Detail Progress">
                                        <i class="bi bi-activity"></i><span class="d-none d-xxl-inline ms-1">Progress</span>
                                    </a>
                                    <a href="{{ route('surat.view', $item->id) }}" target="_blank" class="btn btn-outline-secondary btn-sm" title="Lihat Berkas PDF">
                                        <i class="bi bi-file-earmark-pdf"></i><span class="d-none d-xxl-inline ms-1">Berkas</span>
                                    </a>
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr class="empty-state-row">
                            <td colspan="7" 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 riwayat disposisi yang ditemukan.</span>
                                </div>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        @endif

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

    </div>

</div>

<!-- ======================================================= -->
<!-- MODAL DETAIL RIWAYAT DISPOSISI MASUK                   -->
<!-- ======================================================= -->
<div class="modal fade" id="modalDetailRiwayat" 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-light border-bottom py-3 px-4">
                <div class="d-flex align-items-center gap-2">
                    <div class="badge bg-primary-subtle text-primary p-2 rounded-circle">
                        <i class="bi bi-clock-history fs-5"></i>
                    </div>
                    <div>
                        <h5 class="modal-title fw-bold text-dark mb-0">Detail Riwayat Disposisi Masuk</h5>
                        <small class="text-muted" id="modalRiwayatNomorSurat">Nomor 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-4">
                <div class="row g-4">
                    <!-- Kolom Kiri: Rincian Surat & Status Akhir -->
                    <div class="col-lg-5">
                        <div class="card border border-light-subtle rounded-3 shadow-none h-100">
                            <div class="card-body p-3.5 d-flex flex-column gap-3">
                                <div>
                                    <span class="text-muted small text-uppercase fw-semibold letter-spacing-1">Perihal</span>
                                    <h6 class="fw-bold text-dark mt-1 mb-0" id="detailPerihal">-</h6>
                                </div>

                                <div class="row g-2">
                                    <div class="col-6">
                                        <span class="text-muted small text-uppercase fw-semibold">Asal / Pengirim</span>
                                        <div class="fw-semibold text-dark mt-1" id="detailPengirim">-</div>
                                    </div>
                                    <div class="col-6">
                                        <span class="text-muted small text-uppercase fw-semibold">Tanggal Surat</span>
                                        <div class="fw-semibold text-dark mt-1" id="detailTglSurat">-</div>
                                    </div>
                                </div>

                                <div class="p-3 bg-light rounded-3 border">
                                    <span class="text-muted small text-uppercase fw-semibold d-block mb-1">Status Penyelesaian</span>
                                    <div id="detailStatusBadge" class="mb-2">-</div>

                                    <span class="text-muted small text-uppercase fw-semibold d-block mb-1">Waktu Selesai Diproses</span>
                                    <div class="small fw-semibold text-dark mb-2" id="detailWaktuSelesai">-</div>

                                    <span class="text-muted small text-uppercase fw-semibold d-block mb-1">Catatan Tindak Lanjut</span>
                                    <div class="p-2 bg-white rounded border small text-dark" id="detailCatatanTindakLanjut" style="min-height: 48px;">
                                        -
                                    </div>
                                </div>

                                <div class="p-3 bg-light rounded-3 border">
                                    <span class="text-muted small text-uppercase fw-semibold d-block mb-1">Persetujuan Admin</span>
                                    <div id="detailAdminApproval" class="mb-1">-</div>
                                    <small class="text-muted d-block" id="detailTglAdminApproval">-</small>
                                </div>

                                <!-- Riwayat Obrolan / Instruksi Singkat -->
                                <div>
                                    <span class="text-muted small text-uppercase fw-semibold d-block mb-2">
                                        <i class="bi bi-chat-dots text-primary me-1"></i> Riwayat Instruksi / Chat
                                    </span>
                                    <div id="detailRiwayatChat" class="overflow-auto border rounded-3 p-2.5 bg-white" style="max-height: 180px;">
                                        <div class="text-muted small text-center py-2">Memuat obrolan...</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Kolom Kanan: Pratinjau Dokumen PDF -->
                    <div class="col-lg-7">
                        <div class="card border border-light-subtle rounded-3 shadow-none h-100 d-flex flex-column">
                            <div class="card-header bg-white border-bottom py-2.5 px-3 d-flex justify-content-between align-items-center">
                                <span class="fw-semibold text-dark small">
                                    <i class="bi bi-file-earmark-pdf text-danger me-1"></i> Pratinjau Berkas Dokumen
                                </span>
                                <div class="d-flex gap-1.5">
                                    <a href="#" id="btnBukaPdfTabRiwayat" 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 href="#" id="btnUnduhPdfRiwayat" 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: 480px;">
                                <iframe id="detailPdfRiwayat" src="" style="width: 100%; height: 100%; min-height: 480px; border: none;"></iframe>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Modal Footer -->
            <div class="modal-footer bg-light border-top py-2.5 px-4 d-flex justify-content-between align-items-center">
                <div id="modalRiwayatActionButtons"></div>
                <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>
    document.addEventListener('DOMContentLoaded', function() {

        // ============================
        // MODAL DETAIL RIWAYAT DISPOSISI MASUK
        // ============================
        document.querySelectorAll('.btn-detail-riwayat').forEach(function(btn) {
            btn.addEventListener('click', function() {
                const id = this.dataset.id;

                // Tampilkan loader ringan
                document.getElementById('modalRiwayatNomorSurat').innerText = 'Memuat data...';
                document.getElementById('detailPerihal').innerText = 'Memuat...';
                document.getElementById('detailPengirim').innerText = 'Memuat...';
                document.getElementById('detailTglSurat').innerText = '-';
                document.getElementById('detailStatusBadge').innerHTML = '<span class="spinner-border spinner-border-sm text-secondary"></span>';
                document.getElementById('detailWaktuSelesai').innerText = '-';
                document.getElementById('detailCatatanTindakLanjut').innerText = '-';
                document.getElementById('detailAdminApproval').innerHTML = '-';
                document.getElementById('detailTglAdminApproval').innerText = '-';
                document.getElementById('detailRiwayatChat').innerHTML = '<div class="text-muted small text-center py-2">Memuat obrolan...</div>';

                const modalEl = document.getElementById('modalDetailRiwayat');
                const modal = new bootstrap.Modal(modalEl);
                modal.show();

                fetch('/riwayat-disposisi/detail/' + id, {
                    headers: {
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    }
                })
                .then(response => {
                    if (!response.ok) throw new Error('Gagal mengambil detail riwayat disposisi');
                    return response.json();
                })
                .then(data => {
                    const surat = data.surat || {};
                    const disp = data.disposisi || {};
                    const chats = data.chat || [];

                    document.getElementById('modalRiwayatNomorSurat').innerText = surat.nomor_surat || '-';
                    document.getElementById('detailPerihal').innerText = 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 = (surat && surat.divisi) ? surat.divisi.nama_divisi : null;
                        if (asalSurat && data.data_disposisi.dari.divisi_id !== surat.divisi_id) {
                            pengirimModalText = `${dariDivisi} (${dariUser}) — [Asal Dokumen: ${asalSurat}]`;
                        } else {
                            pengirimModalText = `${dariDivisi} (${dariUser})`;
                        }
                    } else {
                        pengirimModalText = (surat.divisi ? surat.divisi.nama_divisi : surat.asal_tujuan) || '-';
                    }
                    document.getElementById('detailPengirim').innerText = pengirimModalText;
                    
                    if (surat.tanggal_surat) {
                        const tgl = new Date(surat.tanggal_surat);
                        document.getElementById('detailTglSurat').innerText = tgl.toLocaleDateString('id-ID', {
                            day: '2-digit', month: 'short', year: 'numeric'
                        });
                    } else {
                        document.getElementById('detailTglSurat').innerText = '-';
                    }

                    // Status Badge
                    let st = (disp.status || '').toLowerCase();
                    let isAdminRejected = (disp.admin_approval_status === 'rejected');
                    if (isAdminRejected) {
                        document.getElementById('detailStatusBadge').innerHTML = '<span class="badge bg-danger rounded-pill px-3 py-1.5"><i class="bi bi-x-circle-fill me-1"></i> Dibatalkan Admin</span>';
                    } else if (st === 'diterima' || st === 'selesai') {
                        document.getElementById('detailStatusBadge').innerHTML = '<span class="badge bg-success rounded-pill px-3 py-1.5"><i class="bi bi-check-circle-fill me-1"></i> Disposisi Diterima</span>';
                    } else if (st === 'ditolak') {
                        document.getElementById('detailStatusBadge').innerHTML = '<span class="badge bg-danger rounded-pill px-3 py-1.5"><i class="bi bi-x-circle-fill me-1"></i> Disposisi Ditolak</span>';
                    } else {
                        document.getElementById('detailStatusBadge').innerHTML = `<span class="badge bg-secondary rounded-pill px-3 py-1.5">${disp.status || '-'}</span>`;
                    }

                    // Waktu Selesai
                    if (disp.updated_at) {
                        const tglDone = new Date(disp.updated_at);
                        document.getElementById('detailWaktuSelesai').innerText = tglDone.toLocaleDateString('id-ID', {
                            day: '2-digit', month: 'long', year: 'numeric', hour: '2-digit', minute: '2-digit'
                        }) + ' WIB';
                    } else {
                        document.getElementById('detailWaktuSelesai').innerText = '-';
                    }

                    // Catatan
                    document.getElementById('detailCatatanTindakLanjut').innerText = disp.catatan || (isAdminRejected ? 'Ditolak/Dibatalkan oleh Admin.' : 'Tidak ada catatan khusus yang dilampirkan.');

                    // Persetujuan Admin
                    if (disp.admin_approval_status === 'approved') {
                        document.getElementById('detailAdminApproval').innerHTML = '<span class="badge bg-success-subtle text-success border border-success-subtle px-2.5 py-1"><i class="bi bi-check-circle me-1"></i> Disetujui Admin</span>';
                    } else if (disp.admin_approval_status === 'rejected') {
                        document.getElementById('detailAdminApproval').innerHTML = '<span class="badge bg-danger-subtle text-danger border border-danger-subtle px-2.5 py-1"><i class="bi bi-x-circle me-1"></i> Ditolak/Dibatalkan Admin</span>';
                    } else {
                        document.getElementById('detailAdminApproval').innerHTML = '<span class="badge bg-secondary px-2.5 py-1">Belum Ada Approval</span>';
                    }

                    if (disp.admin_approved_at) {
                        const tglApp = new Date(disp.admin_approved_at);
                        const labelTgl = isAdminRejected ? 'Dibatalkan pada: ' : 'Disetujui pada: ';
                        document.getElementById('detailTglAdminApproval').innerText = labelTgl + tglApp.toLocaleDateString('id-ID', {
                            day: '2-digit', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit'
                        }) + ' WIB';
                    } else {
                        document.getElementById('detailTglAdminApproval').innerText = '';
                    }

                    // Obrolan
                    if (chats.length === 0) {
                        document.getElementById('detailRiwayatChat').innerHTML = '<div class="text-muted small text-center py-3">Tidak ada riwayat pesan obrolan.</div>';
                    } else {
                        let chatHtml = '';
                        chats.forEach(item => {
                            const sender = item.pengirim ? item.pengirim.name : 'Pengguna';
                            const chatDate = new Date(item.created_at).toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' });
                            chatHtml += `
                                <div class="p-2 mb-1.5 rounded bg-light border-start border-3 border-primary">
                                    <div class="d-flex justify-content-between align-items-center mb-1">
                                        <strong class="small text-dark">${sender}</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-0.5">Catatan: ${item.catatan}</div>` : ''}
                                </div>
                            `;
                        });
                        document.getElementById('detailRiwayatChat').innerHTML = chatHtml;
                    }

                    // Tombol Aksi di Modal (Tolak / Terima Kembali)
                    const actionContainer = document.getElementById('modalRiwayatActionButtons');
                    if (actionContainer) {
                        actionContainer.innerHTML = '';
                        if (data.can_update) {
                            if (st === 'diterima' || st === 'selesai') {
                                actionContainer.innerHTML = `
                                    <button type="button" class="btn btn-outline-danger btn-sm rounded-pill px-3 btn-action-tolak" data-id="${disp.id}" data-nomor="${surat.nomor_surat || ''}">
                                        <i class="bi bi-x-circle me-1"></i> Tolak Surat Ini
                                    </button>
                                `;
                            } else if (st === 'ditolak') {
                                actionContainer.innerHTML = `
                                    <button type="button" class="btn btn-outline-success btn-sm rounded-pill px-3 btn-action-terima" data-id="${disp.id}" data-nomor="${surat.nomor_surat || ''}">
                                        <i class="bi bi-check-circle me-1"></i> Terima Kembali Surat
                                    </button>
                                `;
                            }
                        }
                    }

                    // PDF Preview
                    const viewUrl = '/surat/' + surat.id + '/view';
                    const dlUrl = '/surat/' + surat.id + '/download';
                    document.getElementById('detailPdfRiwayat').src = viewUrl;
                    document.getElementById('btnBukaPdfTabRiwayat').href = viewUrl;
                    document.getElementById('btnUnduhPdfRiwayat').href = dlUrl;
                })
                .catch(err => {
                    console.error(err);
                    Swal.fire({
                        icon: 'error',
                        title: 'Kesalahan',
                        text: err.message || 'Gagal memuat rincian riwayat disposisi.'
                    });
                });
            });
        });

        // ============================
        // EVENT LISTENER DELEGATION: TOLAK & TERIMA
        // ============================
        document.addEventListener('click', function(e) {
            // 1. AKSI TOLAK SURAT (KOREKSI SALAH KLIK TERIMA)
            const tolakBtn = e.target.closest('.btn-action-tolak');
            if (tolakBtn) {
                const id = tolakBtn.dataset.id;
                const nomorSurat = tolakBtn.dataset.nomor || 'ini';

                // Tutup modal detail jika sedang terbuka
                const modalEl = document.getElementById('modalDetailRiwayat');
                const modalInstance = modalEl ? bootstrap.Modal.getInstance(modalEl) : null;

                Swal.fire({
                    title: 'Tolak Surat Disposisi?',
                    html: `
                        <div class="text-start">
                            <p class="mb-2 text-secondary">Surat <strong>${nomorSurat}</strong> sebelumnya telah berstatus <strong>Diterima</strong>. Jika Anda menolaknya:</p>
                            <div class="alert alert-warning py-2 px-3 small mb-3 border-start border-3 border-warning">
                                <ul class="ps-3 mb-0">
                                    <li>Surat akan <strong>otomatis ditarik</strong> dari arsip Manajemen Surat divisi Anda.</li>
                                    <li>Status surat di unit Anda berubah menjadi <span class="text-danger fw-bold">Ditolak</span>.</li>
                                    <li>Pihak pengirim akan menerima notifikasi penolakan beserta alasan yang Anda berikan.</li>
                                </ul>
                            </div>
                            <label class="form-label small fw-bold text-dark mb-1">Alasan Penolakan <span class="text-danger">*</span></label>
                            <textarea id="swalAlasanPenolakan" class="form-control form-control-sm" rows="3" placeholder="Contoh: Salah klik terima, surat bukan wewenang divisi kami, dsb."></textarea>
                        </div>
                    `,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#dc3545',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: '<i class="bi bi-x-circle me-1"></i> Ya, Tolak Surat',
                    cancelButtonText: 'Batal',
                    reverseButtons: true,
                    focusConfirm: false,
                    preConfirm: () => {
                        const catatan = document.getElementById('swalAlasanPenolakan').value.trim();
                        if (!catatan) {
                            Swal.showValidationMessage('Alasan penolakan wajib diisi agar pihak pengirim mengetahuinya.');
                            return false;
                        }
                        return { catatan: catatan };
                    }
                }).then((result) => {
                    if (result.isConfirmed) {
                        if (modalInstance) modalInstance.hide();

                        Swal.fire({
                            title: 'Memproses Penolakan...',
                            text: 'Mohon tunggu sebentar.',
                            allowOutsideClick: false,
                            didOpen: () => {
                                Swal.showLoading();
                            }
                        });

                        fetch('/riwayat-disposisi/tolak/' + id, {
                            method: 'PATCH',
                            headers: {
                                'Content-Type': 'application/json',
                                'Accept': 'application/json',
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                            },
                            body: JSON.stringify({ catatan: result.value.catatan })
                        })
                        .then(response => {
                            if (!response.ok) {
                                return response.json().then(err => { throw new Error(err.message || 'Gagal menolak surat'); });
                            }
                            return response.json();
                        })
                        .then(data => {
                            Swal.fire({
                                icon: 'success',
                                title: 'Surat Berhasil Ditolak',
                                text: data.message || 'Surat telah ditolak dan ditarik dari arsip Manajemen Surat divisi Anda.',
                                confirmButtonColor: '#0d6efd',
                            }).then(() => {
                                window.location.reload();
                            });
                        })
                        .catch(err => {
                            Swal.fire({
                                icon: 'error',
                                title: 'Gagal Menolak Surat',
                                text: err.message || 'Terjadi kesalahan sistem.'
                            });
                        });
                    }
                });
                return;
            }

            // 2. AKSI TERIMA KEMBALI SURAT (KOREKSI SALAH KLIK TOLAK)
            const terimaBtn = e.target.closest('.btn-action-terima');
            if (terimaBtn) {
                const id = terimaBtn.dataset.id;
                const nomorSurat = terimaBtn.dataset.nomor || 'ini';

                // Tutup modal detail jika sedang terbuka
                const modalEl = document.getElementById('modalDetailRiwayat');
                const modalInstance = modalEl ? bootstrap.Modal.getInstance(modalEl) : null;

                Swal.fire({
                    title: 'Terima Kembali Surat?',
                    html: `
                        <div class="text-start">
                            <p class="mb-2 text-secondary">Apakah Anda ingin menerima kembali surat <strong>${nomorSurat}</strong>?</p>
                            <div class="alert alert-success py-2 px-3 small mb-0 border-start border-3 border-success">
                                Surat akan <strong>dimasukkan kembali</strong> ke arsip Manajemen Surat divisi Anda dan statusnya dipulihkan.
                            </div>
                        </div>
                    `,
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonColor: '#198754',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: '<i class="bi bi-check-circle me-1"></i> Ya, Terima Kembali',
                    cancelButtonText: 'Batal',
                    reverseButtons: true,
                }).then((result) => {
                    if (result.isConfirmed) {
                        if (modalInstance) modalInstance.hide();

                        Swal.fire({
                            title: 'Memproses Penerimaan...',
                            text: 'Mohon tunggu sebentar.',
                            allowOutsideClick: false,
                            didOpen: () => {
                                Swal.showLoading();
                            }
                        });

                        fetch('/riwayat-disposisi/terima/' + id, {
                            method: 'PATCH',
                            headers: {
                                'Content-Type': 'application/json',
                                'Accept': 'application/json',
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                            },
                            body: JSON.stringify({})
                        })
                        .then(response => {
                            if (!response.ok) {
                                return response.json().then(err => { throw new Error(err.message || 'Gagal menerima kembali surat'); });
                            }
                            return response.json();
                        })
                        .then(data => {
                            Swal.fire({
                                icon: 'success',
                                title: 'Surat Berhasil Diterima Kembali',
                                text: data.message || 'Surat telah kembali ke arsip Manajemen Surat divisi Anda.',
                                confirmButtonColor: '#0d6efd',
                            }).then(() => {
                                window.location.reload();
                            });
                        })
                        .catch(err => {
                            Swal.fire({
                                icon: 'error',
                                title: 'Gagal Menerima Surat',
                                text: err.message || 'Terjadi kesalahan sistem.'
                            });
                        });
                    }
                });
                return;
            }
        });

    });
</script>
@endpush