@extends('layout.appdas')

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

@section('content')

<style>
    /* Card KPI Hover Effect */
    .kpi-card {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .kpi-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06) !important;
    }

    /* Tombol Batalkan Modern */
    .btn-batalkan-modern {
        border-radius: 8px;
        transition: all 0.2s ease;
        font-weight: 500;
        font-size: 0.8rem;
    }
    .btn-batalkan-modern:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(220, 53, 69, 0.2);
    }
</style>

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

    <!-- Header Halaman -->
    <div class="card-header bg-white border-bottom py-3.5 px-4">
        <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
            <div class="d-flex align-items-center gap-3">
                <div class="rounded-3 bg-primary bg-opacity-10 text-primary p-2.5 d-flex align-items-center justify-content-center shadow-xs" style="width: 44px; height: 44px;">
                    <i class="bi bi-activity fs-5"></i>
                </div>
                <div>
                    <h5 class="mb-0 fw-bold text-dark">Detail Progress Surat</h5>
                    <small class="text-muted">Pantau perkembangan dan alur disposisi surat secara menyeluruh.</small>
                </div>
            </div>
            <div class="d-flex align-items-center gap-2">
                @if($surat->file_surat)
                <a href="{{ route('surat.view', $surat->id) }}" target="_blank" class="btn btn-outline-secondary btn-sm rounded-pill px-3 py-1.5 fw-semibold d-inline-flex align-items-center shadow-xs">
                    <i class="bi bi-file-earmark-pdf text-danger me-1.5"></i>
                    <span>Buka Berkas PDF</span>
                </a>
                @endif
                <a href="{{ url()->previous() && url()->previous() !== url()->current() ? url()->previous() : route('monitoring.index') }}" class="btn btn-primary btn-sm rounded-pill px-3.5 py-1.5 fw-semibold d-inline-flex align-items-center shadow-xs">
                    <i class="bi bi-arrow-left me-1.5"></i>
                    <span>Kembali</span>
                </a>
            </div>
        </div>
    </div>

    <div class="card-body p-4 d-flex flex-column gap-4">

        <!-- Banner Informasi Surat -->
        <div class="card border border-light-subtle rounded-3 bg-light bg-opacity-50 shadow-none">
            <div class="card-body p-3.5">
                <div class="row g-3">
                    <div class="col-md-3">
                        <span class="text-muted small text-uppercase fw-semibold d-block mb-1">
                            <i class="bi bi-file-earmark-text text-primary me-1"></i> Nomor Surat
                        </span>
                        <div class="fw-bold text-dark font-monospace fs-7">
                            {{ $surat->nomor_surat }}
                        </div>
                    </div>
                    <div class="col-md-5">
                        <span class="text-muted small text-uppercase fw-semibold d-block mb-1">
                            <i class="bi bi-card-text text-success me-1"></i> Perihal
                        </span>
                        <div class="fw-bold text-dark fs-7">
                            {{ $surat->perihal }}
                        </div>
                    </div>
                    <div class="col-md-2">
                        <span class="text-muted small text-uppercase fw-semibold d-block mb-1">
                            <i class="bi bi-calendar-event text-warning me-1"></i> Tanggal Surat
                        </span>
                        <div class="fw-semibold text-dark small">
                            {{ \Carbon\Carbon::parse($surat->tanggal_surat)->translatedFormat('d F Y') }}
                        </div>
                    </div>
                    <div class="col-md-2">
                        <span class="text-muted small text-uppercase fw-semibold d-block mb-1">
                            <i class="bi bi-tag text-info me-1"></i> Kategori
                        </span>
                        <span class="badge bg-white text-dark border px-2.5 py-1 small">
                            {{ $surat->kategori->nama_kategori ?? 'Umum' }}
                        </span>
                    </div>
                </div>
            </div>
        </div>

        @php
            $activePenerima = $surat->penerima->where('is_cancelled', false);
            $pending = $activePenerima->where('status', 'pending')->count();
            $diterima = $activePenerima->whereIn('status', ['diterima', 'selesai'])->count();
            $diproses = $activePenerima->whereIn('status', ['dibaca', 'diproses'])->count();
            $ditolak = $activePenerima->where('status', 'ditolak')->count();
        @endphp

        <!-- Rekap Statistik KPI Cards -->
        <div class="row g-3">
            <div class="col-6 col-md-3">
                <div class="kpi-card card border border-warning-subtle bg-warning-subtle rounded-3 p-3 shadow-none">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <small class="text-warning-emphasis fw-bold text-uppercase d-block mb-1" style="font-size: 0.72rem; letter-spacing: 0.5px;">Menunggu (Pending)</small>
                            <h3 class="fw-bold mb-0 text-warning-emphasis">{{ $pending }}</h3>
                        </div>
                        <div class="rounded-circle bg-white text-warning p-2.5 d-flex align-items-center justify-content-center shadow-xs" style="width: 44px; height: 44px;">
                            <i class="bi bi-clock-history fs-4"></i>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-6 col-md-3">
                <div class="kpi-card card border border-info-subtle bg-info-subtle rounded-3 p-3 shadow-none">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <small class="text-info-emphasis fw-bold text-uppercase d-block mb-1" style="font-size: 0.72rem; letter-spacing: 0.5px;">Sedang Ditinjau</small>
                            <h3 class="fw-bold mb-0 text-info-emphasis">{{ $diproses }}</h3>
                        </div>
                        <div class="rounded-circle bg-white text-info p-2.5 d-flex align-items-center justify-content-center shadow-xs" style="width: 44px; height: 44px;">
                            <i class="bi bi-eye-fill fs-4"></i>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-6 col-md-3">
                <div class="kpi-card card border border-success-subtle bg-success-subtle rounded-3 p-3 shadow-none">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <small class="text-success-emphasis fw-bold text-uppercase d-block mb-1" style="font-size: 0.72rem; letter-spacing: 0.5px;">Disposisi Diterima</small>
                            <h3 class="fw-bold mb-0 text-success-emphasis">{{ $diterima }}</h3>
                        </div>
                        <div class="rounded-circle bg-white text-success p-2.5 d-flex align-items-center justify-content-center shadow-xs" style="width: 44px; height: 44px;">
                            <i class="bi bi-check-circle-fill fs-4"></i>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-6 col-md-3">
                <div class="kpi-card card border border-danger-subtle bg-danger-subtle rounded-3 p-3 shadow-none">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <small class="text-danger-emphasis fw-bold text-uppercase d-block mb-1" style="font-size: 0.72rem; letter-spacing: 0.5px;">Disposisi Ditolak</small>
                            <h3 class="fw-bold mb-0 text-danger-emphasis">{{ $ditolak }}</h3>
                        </div>
                        <div class="rounded-circle bg-white text-danger p-2.5 d-flex align-items-center justify-content-center shadow-xs" style="width: 44px; height: 44px;">
                            <i class="bi bi-x-circle-fill fs-4"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Tabel Progress Disposisi per Unit Tujuan -->
        <div>
            <div class="d-flex align-items-center justify-content-between mb-3">
                <h6 class="mb-0 fw-bold text-dark d-flex align-items-center">
                    <i class="bi bi-list-check text-primary me-2 fs-5"></i>
                    <span>Progres Disposisi per Unit Tujuan</span>
                </h6>
                <span class="badge bg-light text-secondary border px-2.5 py-1 small">
                    Total {{ $penerimaList->total() }} Unit Tujuan
                </span>
            </div>

            <div class="table-responsive border rounded-3 overflow-hidden">
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            <th>Unit Tujuan</th>
                            <th width="160">Approval Admin</th>
                            <th width="130" class="text-center">Status Penerima</th>
                            <th width="140">Dibaca Pada</th>
                            <th width="140">Diterima Pada</th>
                            <th>Catatan Respon</th>
                            <th class="text-center text-nowrap" style="width: 1%;">Aksi</th>
                        </tr>
                    </thead>

                    <tbody>
                        @forelse($penerimaList as $item)
                        <tr>
                            <td>
                                <div class="fw-bold text-dark">
                                    {{ $item->user->divisi->nama_divisi ?? '-' }}
                                </div>
                                <small class="text-muted">
                                    {{ $item->user->name ?? '' }}
                                </small>
                            </td>

                            <td>
                                @if($item->admin_approval_status === 'pending')
                                    <span class="badge rounded-pill bg-warning-subtle text-warning-emphasis border border-warning-subtle 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 rounded-pill bg-success-subtle text-success border border-success-subtle 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 rounded-pill bg-danger-subtle text-danger border border-danger-subtle 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">
                                @if($item->admin_approval_status === 'rejected')
                                    <span class="badge rounded-pill bg-danger-subtle text-danger border border-danger-subtle px-3 py-1.5" title="Disposisi ditolak oleh Admin">
                                        <i class="bi bi-x-circle me-1"></i>Ditolak Admin
                                    </span>
                                @else
                                    @switch($item->status)
                                        @case('pending')
                                            <span class="badge rounded-pill bg-secondary-subtle text-secondary border border-secondary-subtle px-3 py-1.5">Pending</span>
                                            @break
                                        @case('dibaca')
                                            <span class="badge rounded-pill bg-info-subtle text-info border border-info-subtle px-3 py-1.5">Dibaca</span>
                                            @break
                                        @case('diterima')
                                            <span class="badge rounded-pill bg-success-subtle text-success border border-success-subtle px-3 py-1.5">Diterima</span>
                                            @break
                                        @case('diproses')
                                            <span class="badge rounded-pill bg-primary-subtle text-primary border border-primary-subtle px-3 py-1.5">Diproses</span>
                                            @break
                                        @case('selesai')
                                            <span class="badge rounded-pill bg-dark px-3 py-1.5">Selesai</span>
                                            @break
                                        @case('ditolak')
                                            <span class="badge rounded-pill bg-danger-subtle text-danger border border-danger-subtle px-3 py-1.5">Ditolak</span>
                                            @break
                                        @default
                                            <span class="badge rounded-pill bg-secondary px-3 py-1.5">{{ ucfirst($item->status) }}</span>
                                    @endswitch
                                @endif
                            </td>

                            <td class="small text-muted">
                                @if($item->dibaca_pada)
                                    <i class="bi bi-eye me-1 text-info"></i>
                                    {{ \Carbon\Carbon::parse($item->dibaca_pada)->translatedFormat('d M Y, H:i') }}
                                @else
                                    <span class="text-muted">-</span>
                                @endif
                            </td>

                            <td class="small text-muted">
                                @if($item->diterima_pada)
                                    <i class="bi bi-check-circle me-1 text-success"></i>
                                    {{ \Carbon\Carbon::parse($item->diterima_pada)->translatedFormat('d M Y, H:i') }}
                                @else
                                    <span class="text-muted">-</span>
                                @endif
                            </td>

                            <td>
                                @php
                                    $disposisiAwal = $surat->disposisi->firstWhere('kepada_user_id', $item->user_id);
                                    $initialNote = $disposisiAwal?->catatan;

                                    if ($item->admin_approval_status === 'approved') {
                                        $catatanText = ($item->catatan && !str_contains(strtolower($item->catatan), 'ditolak oleh admin'))
                                            ? $item->catatan
                                            : 'Disetujui oleh Admin';
                                    } elseif ($item->admin_approval_status === 'rejected') {
                                        $catatanText = $item->catatan ?: 'Ditolak oleh Admin';
                                    } else {
                                        $catatanText = $item->catatan ?: ($initialNote ?: '-');
                                    }
                                @endphp
                                <div class="small fw-medium {{ $item->admin_approval_status === 'approved' ? 'text-success' : ($item->admin_approval_status === 'rejected' ? 'text-danger' : 'text-dark') }}">
                                    {{ $catatanText }}
                                </div>
                            </td>

                            <td class="text-center align-middle text-nowrap">
                                <div class="btn-action-group justify-content-center">
                                    @if($item->status == 'pending')
                                        <button type="button" class="btn btn-outline-danger btn-sm btn-batalkan-modern btn-batalkan px-2.5 py-1" data-id="{{ $item->id }}" data-divisi="{{ $item->user->divisi->nama_divisi ?? 'Unit' }}" title="Batalkan Disposisi ke unit ini">
                                            <i class="bi bi-x-circle me-1"></i><span>Batalkan</span>
                                        </button>
                                    @else
                                        <span class="badge bg-light text-muted border px-2.5 py-1 small" title="Disposisi sudah diproses penerima sehingga tidak dapat dibatalkan">
                                            <i class="bi bi-lock-fill me-1"></i> Diproses
                                        </span>
                                    @endif
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <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-3">
                                    <i class="bi bi-info-circle fs-2 mb-2 text-muted"></i>
                                    <span class="fw-medium">Belum ada data unit penerima disposisi.</span>
                                </div>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            @if($penerimaList->hasPages() || $penerimaList->total() > 0)
            <div class="mt-3">
                {{ $penerimaList->links('vendor.pagination.custom') }}
            </div>
            @endif
        </div>



    </div>
</div>

<!-- ======================================================= -->
<!-- MODAL BATALKAN DISPOSISI (MODERN & SAFE)               -->
<!-- ======================================================= -->
<div class="modal fade" id="modalBatalkan" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm" style="max-width: 400px;">
        <div class="modal-content border-0 shadow-lg rounded-4 overflow-hidden">
            <form id="formBatalkan" method="POST">
                @csrf
                @method('PATCH')

                <div class="modal-body text-center p-4">
                    <div class="rounded-circle bg-danger bg-opacity-10 text-danger p-3 mb-3 d-inline-flex align-items-center justify-content-center" style="width: 64px; height: 64px;">
                        <i class="bi bi-exclamation-triangle-fill fs-2"></i>
                    </div>

                    <h5 class="fw-bold text-dark mb-1">Batalkan Disposisi?</h5>
                    <p class="text-muted small mb-3">
                        Anda yakin ingin membatalkan pengiriman disposisi ke unit:
                    </p>

                    <div class="p-2.5 bg-light rounded-2 border fw-bold text-danger fs-6 mb-3" id="namaDivisi">
                        Nama Divisi
                    </div>

                    <p class="text-muted small mb-0" style="font-size: 0.78rem;">
                        Surat dan seluruh riwayat disposisi ke unit tersebut akan dihapus permanen dari sistem.
                    </p>
                </div>

                <div class="modal-footer bg-light border-top py-2.5 px-4 d-flex justify-content-between">
                    <button type="button" class="btn btn-outline-secondary btn-sm px-3 rounded-pill fw-semibold" data-bs-dismiss="modal">
                        Batal
                    </button>
                    <button type="submit" class="btn btn-danger btn-sm px-3 rounded-pill fw-semibold shadow-xs">
                        <i class="bi bi-x-circle me-1"></i> Ya, Batalkan
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const modalEl = document.getElementById('modalBatalkan');
        const modal = new bootstrap.Modal(modalEl);

        document.querySelectorAll('.btn-batalkan').forEach(button => {
            button.addEventListener('click', function() {
                const id = this.dataset.id;
                const divisi = this.dataset.divisi || 'Unit';

                document.getElementById('namaDivisi').innerText = divisi;
                document.getElementById('formBatalkan').action = "/monitoring/penerima/" + id + "/batalkan";

                modal.show();
            });
        });
    });
</script>
@endpush