@extends('layout.appdas')

@section('title', 'Monitoring Surat')

@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) {
    .monitoring-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 monitoring-header-icon" style="width: 42px; height: 42px;">
                    <i class="bi bi-activity fs-5"></i>
                </div>
                <div>
                    <h5 class="mb-0.5 fw-bold text-dark fs-6 fs-md-5">Monitoring Surat Keluar</h5>
                    <small class="text-muted d-block" style="font-size: 0.78rem; line-height: 1.35;">Pantau progres disposisi, status persetujuan admin, dan respon unit tujuan secara real-time.</small>
                </div>
            </div>
            <div class="w-100 w-md-auto mt-1 mt-md-0">
                <a href="{{ route('riwayat-disposisi.index', ['tab' => 'keluar']) }}" 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 MONITORING (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('monitoring.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">Surat Dipantau</small>
                                <h3 class="fw-bold mb-0 text-dark fs-4 fs-md-3">{{ $statTotalMonitoring ?? $surat->total() }}</h3>
                            </div>
                            <div class="stat-icon bg-soft-primary p-2 rounded-3 text-primary flex-shrink-0">
                                <i class="bi bi-activity fs-4"></i>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-6 col-md-3">
                <a href="{{ route('monitoring.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('monitoring.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-arrow-repeat 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">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <small class="text-muted d-block mb-1 fw-semibold text-truncate">Selesai / Ditutup</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-check-circle 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('monitoring.index') }}" method="GET" class="row g-2 align-items-center">
                <!-- Badge Total Monitoring 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-activity me-1.5"></i> {{ $surat->total() }} Monitoring 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, perihal, unit tujuan..." value="{{ request('search') }}" style="font-size: 0.84rem;">
                        @if(request('search'))
                            <a href="{{ route('monitoring.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 Progres Tujuan -->
                <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 Progres</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('monitoring.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 Monitoring Surat -->
        <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</th>
                        <th>Tujuan & Progres Unit</th>
                        <th width="160" class="text-center">Aktivitas Baru</th>
                        <th class="text-center text-nowrap" style="width: 1%;">Aksi</th>
                    </tr>
                </thead>

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

                        <td class="fw-bold text-dark font-monospace">
                            {{ $item->nomor_surat }}
                        </td>

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

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

                        <td>
                            <div class="d-flex flex-wrap gap-1.5 align-items-center">
                                @foreach($item->penerima->where('is_cancelled', false) as $p)
                                    @php
                                        $namaDivisi = $p->user?->divisi?->nama_divisi ?? ($p->user?->name ?? 'Unit');
                                        $st = strtolower($p->status);
                                        $isWaitingAdmin = ($p->admin_approval_status === 'pending');
                                    @endphp
                                    @if($p->admin_approval_status === 'rejected')
                                        <span class="badge bg-danger-subtle text-danger border border-danger-subtle rounded-pill px-2.5 py-1 small" style="font-size: 0.72rem;" title="Ditolak oleh Admin">
                                            <i class="bi bi-x-circle-fill me-1"></i>{{ $namaDivisi }} (Ditolak Admin)
                                        </span>
                                    @elseif($isWaitingAdmin)
                                        <span class="badge bg-warning-subtle text-warning-emphasis border border-warning-subtle rounded-pill px-2.5 py-1 small" style="font-size: 0.72rem;" title="Menunggu Persetujuan Admin">
                                            <i class="bi bi-clock me-1"></i>{{ $namaDivisi }} (Admin)
                                        </span>
                                    @elseif($st === 'diterima' || $st === 'selesai')
                                        <span class="badge bg-success-subtle text-success border border-success-subtle rounded-pill px-2.5 py-1 small" style="font-size: 0.72rem;" title="Telah Diterima">
                                            <i class="bi bi-check-circle-fill me-1"></i>{{ $namaDivisi }}
                                        </span>
                                    @elseif($st === 'dibaca')
                                        <span class="badge bg-info-subtle text-info border border-info-subtle rounded-pill px-2.5 py-1 small" style="font-size: 0.72rem;" title="Sedang Ditinjau / Dibaca">
                                            <i class="bi bi-eye me-1"></i>{{ $namaDivisi }}
                                        </span>
                                    @elseif($st === 'ditolak')
                                        <span class="badge bg-danger-subtle text-danger border border-danger-subtle rounded-pill px-2.5 py-1 small" style="font-size: 0.72rem;" title="Ditolak">
                                            <i class="bi bi-x-circle-fill me-1"></i>{{ $namaDivisi }}
                                        </span>
                                    @else
                                        <span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle rounded-pill px-2.5 py-1 small" style="font-size: 0.72rem;" title="Belum Dibuka">
                                            <i class="bi bi-hourglass-split me-1"></i>{{ $namaDivisi }}
                                        </span>
                                    @endif
                                @endforeach
                            </div>
                        </td>

                        <td class="text-center">
                            @if($item->jumlah_update_baru > 0)
                                <span class="badge bg-danger-subtle text-danger border border-danger-subtle rounded-pill py-1.5 px-3 d-inline-flex align-items-center justify-content-center">
                                    <i class="bi bi-bell-fill me-1.5"></i>{{ $item->jumlah_update_baru }} Update Baru
                                </span>
                            @else
                                <span class="badge bg-success-subtle text-success border border-success-subtle rounded-pill py-1.5 px-3 d-inline-flex align-items-center justify-content-center">
                                    <i class="bi bi-check-circle-fill me-1.5"></i>Terpantau
                                </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 rounded-2 d-inline-flex align-items-center shadow-xs" title="Lihat Detail Progress Surat">
                                    <i class="bi bi-activity me-1"></i><span>Progress</span>
                                </a>
                                <a href="{{ route('surat.view', $item->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>
                            </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 data surat yang ditemukan.</span>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{-- Bottom Single-Number Pagination --}}
        @if($surat->hasPages() || $surat->total() > 0)
        <div id="paginationContainer" class="mt-auto pt-3 border-top">
            {{ $surat->links('vendor.pagination.custom') }}
        </div>
        @endif
    </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