@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    {{-- QUEUE WARNING GLOBAL --}}
    <script>
        window.dashboardWarnings = window.dashboardWarnings || [];

        function runDashboardWarnings() {
            if (!window.dashboardWarnings.length) return;

            const nextWarning = window.dashboardWarnings.shift();
            const onConfirmed = nextWarning.onConfirmed;

            delete nextWarning.onConfirmed;

            Swal.fire(nextWarning).then((result) => {
                if (result.isConfirmed && typeof onConfirmed === 'function') {
                    onConfirmed();
                }

                setTimeout(() => {
                    runDashboardWarnings();
                }, 300);
            });
        }

        window.addEventListener('load', function () {
            const broadcastModal = document.getElementById('globalAnnouncementModal');

            setTimeout(() => {
                const isBroadcastShowing = broadcastModal && (
                    broadcastModal.classList.contains('show') ||
                    document.body.classList.contains('modal-open')
                );

                if (isBroadcastShowing) {
                    broadcastModal.addEventListener('hidden.bs.modal', function () {
                        runDashboardWarnings();
                    }, {
                        once: true
                    });
                } else {
                    runDashboardWarnings();
                }
            }, 2000);
        });
    </script>
    {{-- PERINGATAN: Permit yang memiliki PO tapi nomor PO kosong --}}
    @if (isset($permitPoKosong) && $permitPoKosong->count() > 0)
        <style>
            #modalPoKosong .po-expired-highlight td {
                background-color: #ffc2cd !important;
            }
        </style>
        <div class="modal fade" id="modalPoKosong" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
            aria-labelledby="modalPoKosongLabel" aria-hidden="true">
            <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
                <div class="modal-content">
                    <div class="modal-header" style="background-color: #fb8c00; border-radius: 0;">
                        <h6 class="modal-title text-white font-weight-bolder mb-0" id="modalPoKosongLabel">
                            <i class="fas fa-exclamation-triangle me-2"></i>
                            Permit dengan Nomor PO Kosong
                            <span class="badge bg-white text-warning ms-2" style="font-size:11px;">
                                {{ $permitPoKosong->count() }}
                            </span>
                        </h6>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                    </div>

                    <div class="modal-body px-3 py-3">
                        <div class="alert alert-warning alert-dismissible fade show mb-3 py-2" role="alert">
                            <span class="alert-icon me-1"><i class="fas fa-info-circle"></i></span>
                            <span class="alert-text" style="font-size: 13px;">
                                Permit berikut memilih <b>"Memiliki Nomor PO"</b> namun nomor PO belum diisi.
                                Klik tombol <b>Lengkapi</b> untuk mengisi nomor PO agar permit dapat diproses.
                            </span>
                        </div>

                        <div class="table-responsive">
                            <table class="table table-sm table-hover align-middle mb-2" id="tablePoKosongVendor"
                                style="font-size: 13px;">
                                <thead class="bg-light">
                                    <tr>
                                        <th class="text-center text-uppercase text-dark text-sm font-weight-bolder ps-3"
                                            style="width:40px;">No</th>
                                        <th class="text-start text-uppercase text-dark text-sm font-weight-bolder"
                                            style="width:130px;">Action</th>
                                        <th class="text-uppercase text-dark text-sm font-weight-bolder">ID Permit</th>
                                        <th class="text-uppercase text-dark text-sm font-weight-bolder">
                                            Uraian Pekerjaan
                                        </th>
                                        <th class="text-center text-uppercase text-dark text-sm font-weight-bolder">
                                            Status
                                        </th>
                                        <th class="text-center text-uppercase text-dark text-sm font-weight-bolder">
                                            Mulai Kerja
                                        </th>
                                        <th class="text-center text-uppercase text-dark text-sm font-weight-bolder">
                                            Masa Berlaku
                                        </th>
                                        <th class="text-center text-uppercase text-dark text-sm font-weight-bolder">
                                            Keterangan
                                        </th>
                                    </tr>
                                </thead>

                                <tbody>
                                    @foreach ($permitPoKosong as $idx => $po)
                                        @php
                                            $isPoExpired = (bool) ($po->is_masa_berlaku_expired ?? false);
                                        @endphp
                                        <tr class="{{ $isPoExpired ? 'po-expired-highlight' : '' }}">
                                            <td class="text-center ps-3 fw-bold text-secondary">
                                                {{ $idx + 1 }}
                                            </td>

                                            <td class="text-start">
                                                @if ($po->status === 'E')
                                                    <a href="{{ url('/trnewp/edit/' . $po->id_encrypt) }}"
                                                        class="btn btn-sm btn-warning mb-0 py-1 px-2" title="Edit Permit & Lengkapi PO">
                                                        <i class="fas fa-edit me-1"></i>Edit
                                                    </a>
                                                @elseif ($po->status === 'P')
                                                    <a href="{{ url('/trnewp/show/' . $po->id_encrypt) }}"
                                                        class="btn btn-sm btn-info mb-0 py-1 px-2" title="Lihat Permit">
                                                        <i class="fas fa-eye me-1"></i>Lihat
                                                    </a>
                                                @else
                                                    <a href="{{ url('/trperl/ajukan/' . $po->id_encrypt) }}"
                                                        class="btn btn-sm btn-warning mb-0 py-1 px-2" title="Lengkapi Nomor PO">
                                                        <i class="fas fa-edit me-1"></i>Lengkapi
                                                    </a>
                                                @endif
                                            </td>

                                            <td class="fw-bold text-dark">{{ $po->id }}</td>

                                            <td class="text-dark">
                                                {{ Str::limit($po->uraian_pekerjaan, 45) }}
                                            </td>

                                            <td class="text-center">
                                                @php
                                                    $statusClass = $isPoExpired
                                                        ? 'bg-danger'
                                                        : match ($po->status) {
                                                            'B' => 'bg-success',
                                                            'E' => 'bg-secondary',
                                                            default => 'bg-info',
                                                        };
                                                    $statusLabel = $isPoExpired
                                                        ? 'EXPIRED'
                                                        : ($po->status_name ?? $po->status);
                                                @endphp

                                                <span class="badge badge-sm {{ $statusClass }}">
                                                    {{ $statusLabel }}
                                                </span>
                                            </td>

                                            <td class="text-center text-dark fw-bold">
                                                {{ $po->mulai_kerja ?? '-' }}
                                            </td>
                                            <td class="text-center {{ $isPoExpired ? 'text-danger fw-bold' : 'text-dark fw-bold' }}">
                                                {{ $po->masa_berlaku ?? '-' }}
                                            </td>

                                            <td class="text-center">
                                                <span class="badge badge-sm {{ $isPoExpired ? 'bg-danger' : 'bg-danger' }}">
                                                    <i class="fas fa-times-circle me-1"></i>
                                                    {{ $isPoExpired ? 'PO Kosong & Expired' : 'PO Kosong' }}
                                                </span>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        <div class="nav-wrapper mt-2" id="noted">
                            <code>Note : <i aria-hidden="true" style="color: #ffc2cd;" class="fas fa-circle"></i>
                                Permit Expired</code>
                        </div>
                    </div>

                    <div class="modal-footer pt-0">
                        <p class="text-secondary text-xs me-auto mb-0">
                            <i class="fas fa-lightbulb text-warning me-1"></i>
                            Klik <b>Edit</b> atau <b>Lengkapi</b> untuk mengisi nomor PO.
                            Jika status Pending, aksi yang tersedia hanya Lihat.
                        </p>
                        <button type="button" class="btn btn-sm btn-secondary mb-0" data-bs-dismiss="modal">
                            Tutup
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <script>
            let poKosongVendorTable = null;

            function initPoKosongVendorTable() {
                if (!window.jQuery || !$.fn || !$.fn.DataTable || !$('#tablePoKosongVendor').length) {
                    return null;
                }

                if ($.fn.DataTable.isDataTable('#tablePoKosongVendor')) {
                    poKosongVendorTable = $('#tablePoKosongVendor').DataTable();
                    return poKosongVendorTable;
                }

                poKosongVendorTable = $('#tablePoKosongVendor').DataTable({
                    pageLength: 10,
                    lengthMenu: [
                        [5, 10, 25, 50, -1],
                        [5, 10, 25, 50, 'Semua']
                    ],
                    order: [],
                    language: {
                        paginate: {
                            previous: "Previous",
                            next: "Next"
                        },
                        search: "Cari :",
                        lengthMenu: "Tampilkan _MENU_ data",
                        zeroRecords: "Data tidak ditemukan",
                        info: "Data _START_ - _END_ dari _TOTAL_",
                        infoEmpty: "Data 0 - 0 dari 0",
                        infoFiltered: "(difilter dari _MAX_ total data)"
                    },
                    columnDefs: [{
                            orderable: false,
                            targets: [0, 1, 7]
                        },
                        {
                            searchable: false,
                            targets: [0, 1]
                        }
                    ]
                });

                return poKosongVendorTable;
            }

            document.addEventListener('DOMContentLoaded', function() {
                const poModalEl = document.getElementById('modalPoKosong');
                if (!poModalEl) {
                    return;
                }

                poModalEl.addEventListener('shown.bs.modal', function() {
                    const table = initPoKosongVendorTable();
                    if (table) {
                        table.columns.adjust().draw(false);
                    }
                });
            });

            window.dashboardWarnings.push({
                title: 'Nomor PO Belum Diisi!',
                html: '<div style="text-align:left; font-size:14px; line-height:1.8;">' +
                    'Terdapat <b style="color:#e65100;">{{ $permitPoKosong->count() }} permit</b> dengan status ' +
                    '<b>"Memiliki Nomor PO"</b> namun nomor PO masih kosong.<br><br>' +
                    '<span style="color:#c62828;"><i class="fas fa-exclamation-circle me-1"></i>' +
                    'Permit tidak dapat diproses tanpa nomor PO yang valid.</span>' +
                    '</div>',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: '<i class="fas fa-search me-1"></i> Cek Permit',
                cancelButtonText: 'Nanti Saja',
                confirmButtonColor: '#028284',
                cancelButtonColor: '#6c757d',
                allowOutsideClick: false,
                allowEscapeKey: false,
                onConfirmed: function () {
                    const modalElement = document.getElementById('modalPoKosong');

                    if (modalElement) {
                        const modal = new bootstrap.Modal(modalElement);
                        modal.show();
                    }
                }
            });
        </script>
    @endif


    {{-- PERINGATAN GLOBAL: PERMIT EXPIRED --}}
    @if ($show_expired_warning ?? false)
        <script>
            window.dashboardWarnings.push({
                title: 'Permit Expired!',
                text: 'Anda memiliki permit yang sudah melewati masa berlaku dan belum diselesaikan.',
                icon: 'warning',
                confirmButtonText: 'OK',
                confirmButtonColor: '#028284'
            });
        </script>
    @endif


    {{-- PERINGATAN GLOBAL: TTD KOSONG --}}
    @if ($show_ttd_warning ?? false)
        <script>
            window.dashboardWarnings.push({
                title: 'Tanda Tangan Belum Diupload!',
                html: `Anda belum mengunggah tanda tangan digital (format PNG).<br>
                            <a href="{{ url('/profile') }}" class="text-primary text-decoration-underline fw-bold">
                                Klik di sini untuk melengkapinya
                            </a>`,
                icon: 'info',
                confirmButtonText: 'OK',
                confirmButtonColor: '#028284'
            });
        </script>
    @endif

    <div class="container-fluid py-4">

        {{-- Workshop Notification - hanya tampil di halaman dashboard vendor --}}
        @include('components.workshop-notification')

        <div class="col-md-12 mb-4">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h6 class="mb-0">Selamat Datang, {{ $user_login->firstname }} !! </h6>

                    {{-- Broadcast Notification Icon with Flash Animation --}}
                    <div class="d-flex align-items-center gap-2">
                        @if (isset($workshop_broadcasts) && $workshop_broadcasts->count() > 0)
                            {{-- Menambahkan ukuran tetap dan flexbox untuk memusatkan konten --}}
                            <div class="workshop-notification-icon d-flex justify-content-center align-items-center"
                                onclick="openWorkshopModal()" title="Ada {{ $workshop_broadcasts->count() }} tata cara workshop"
                                style="width: 40px; height: 40px;">
                                <div class="workshop-notification-bell">
                                    {{-- Menambahkan fa-fw agar lebar ikon konsisten --}}
                                    <i class="fas fa-tools fa-fw"></i>
                                    <span class="workshop-notification-badge">{{ $workshop_broadcasts->count() }}</span>
                                </div>
                            </div>
                        @endif

                        @if (isset($broadcasts) && $broadcasts->count() > 0)
                            {{-- Menambahkan ukuran tetap dan flexbox untuk memusatkan konten --}}
                            <div class="broadcast-notification-icon d-flex justify-content-center align-items-center"
                                onclick="openBroadcastModal()" title="Ada {{ $broadcasts->count() }} pengumuman aktif"
                                style="width: 40px; height: 40px;">
                                <div class="notification-bell">
                                    {{-- Menambahkan fa-fw agar lebar ikon konsisten --}}
                                    <i class="fas fa-bell fa-fw"></i>
                                    <span class="notification-badge">{{ $broadcasts->count() }}</span>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        {{-- Card 1 --}}
                        <div class="col-md-3 mb-3">
                            <div class="card shadow border-0">
                                <div class="card-body text-center">
                                    <div class="icon-container mb-3"
                                        style="background-color: #f5f5f5; border-radius: 50%; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; margin: 0 auto;">
                                        <i class="fas fa-plus" style="font-size: 24px; color: #5e72e4;"></i>
                                    </div>
                                    <h6 class="text-uppercase text-primary font-weight-bold">Permit Baru</h6>
                                    <p class="text-secondary mb-3" style="font-size: 14px;">Buat permit baru</p>
                                    <a href="{{ url('/trnewp/add/') }}" class="btn btn-primary btn-sm px-4"
                                        style="font-weight: bold;">
                                        Tambah
                                    </a>
                                </div>
                            </div>
                        </div>

                        {{-- Card 2 --}}
                        <div class="col-md-3 mb-3">
                            <div class="card shadow border-0">
                                <div class="card-body text-center">
                                    <div class="icon-container mb-3"
                                        style="background-color: #f5f5f5; border-radius: 50%; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; margin: 0 auto;">
                                        <i class="fas fa-clipboard-list" style="font-size: 24px; color: #5e72e4;"></i>
                                    </div>
                                    <h6 class="text-uppercase text-primary font-weight-bold">Permit Saya</h6>
                                    <p class="text-secondary mb-3" style="font-size: 14px;">List permit Saya</p>
                                    <a href="{{ url('/trperl') }}" class="btn btn-primary btn-sm px-4"
                                        style="font-weight: bold;">
                                        Lihat
                                    </a>
                                </div>
                            </div>
                        </div>

                        {{-- Card 3 --}}
                        <div class="col-md-3 mb-3">
                            <div class="card shadow border-0">
                                <div class="card-body text-center">
                                    <div class="icon-container mb-3"
                                        style="background-color: #f5f5f5; border-radius: 50%; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; margin: 0 auto;">
                                        <i class="fas fa-exclamation-triangle" style="font-size: 24px; color: #e74c3c;"></i>
                                    </div>
                                    <h6 class="text-uppercase text-danger font-weight-bold">Total Insiden Kerja</h6>
                                    @if ($user->idroles === 'veneks')
                                        <p class="text-secondary mb-3" style="font-size: 14px;">
                                            {{ $vendors->firstWhere('idvendor', $user->id_vendor)->nama ?? 'Vendor tidak ditemukan' }}
                                        </p>
                                    @else
                                        <p class="text-secondary mb-3" style="font-size: 14px;">
                                            {{ $departement->firstWhere('id', $user->id_departement)->nama_departement ?? 'Departement tidak ditemukan' }}
                                        </p>
                                    @endif
                                    <a class="btn btn-danger btn-sm px-4" style="font-weight: bold;">
                                        {{ $incidentCount }}
                                    </a>
                                </div>
                            </div>
                        </div>

                        {{-- Card 4 --}}
                        <div class="col-md-3 mb-3">
                            <div class="card shadow border-0">
                                <div class="card-body text-center">
                                    <div class="icon-container mb-3"
                                        style="background-color: #f5f5f5; border-radius: 50%; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; margin: 0 auto;">
                                        <i class="fas fa-ban" style="font-size: 24px; color: #f76d17;"></i>
                                    </div>
                                    <h6 class="text-uppercase text-warning font-weight-bold">Permit batal Kerja</h6>
                                    @if ($user->idroles === 'veneks')
                                        <p class="text-secondary mb-3" style="font-size: 14px;">
                                            {{ $vendors->firstWhere('idvendor', $user->id_vendor)->nama ?? 'Vendor tidak ditemukan' }}
                                        </p>
                                    @else
                                        <p class="text-secondary mb-3" style="font-size: 14px;">
                                            {{ $departement->firstWhere('id', $user->id_departement)->nama_departement ?? 'Departement tidak ditemukan' }}
                                        </p>
                                    @endif
                                    <a class="btn btn-warning btn-sm px-4" style="font-weight: bold;">
                                        {{ $permitBatal }}
                                    </a>
                                </div>
                            </div>
                        </div>

                        @if ($pengajuanSelesaiUlang->isNotEmpty())
                            <div class="row mt-4">
                                <div class="col-12">
                                    <div class="card mb-4 border-warning shadow-sm">
                                        <div class="card-header pb-0 d-flex align-items-center gap-2">
                                            <i class="fas fa-times-circle text-danger" style="font-size:20px;"></i>
                                            <h6 class="mb-0 text-warning fw-bold">
                                                Permohonan Selesai Ditolak (Ajukan Ulang)
                                            </h6>
                                        </div>
                                        <div class="card-body">
                                            <input type="text" class="form-control form-control-s dashboard-card-search mb-3"
                                                placeholder="Cari data..." data-search-target="#vendor-selesai-ulang-list"
                                                data-search-empty="#vendor-selesai-ulang-empty">
                                            <p id="vendor-selesai-ulang-empty" class="search-empty-state d-none mb-3">Data
                                                tidak
                                                ditemukan.</p>
                                            <ul id="vendor-selesai-ulang-list" class="list-group">
                                                @foreach ($pengajuanSelesaiUlang as $selesai)
                                                    <li class="list-group-item p-3 mb-3 border rounded"
                                                        style="background-color:#fadddd;" data-search-item>
                                                        <div
                                                            class="d-flex flex-column flex-md-row justify-content-between align-items-start gap-3">
                                                            <div class="d-flex gap-3 flex-grow-1" style="min-width:0">
                                                                <i class="fas fa-times text-danger mt-1"
                                                                    style="font-size:18px;"></i>
                                                                <div class="text-break">
                                                                    <div class="fw-bold">ID Permit:
                                                                        <strong>{{ $selesai->id }}</strong>
                                                                    </div>
                                                                    <div>Uraian Kerja:
                                                                        <strong>{{ $selesai->uraian_pekerjaan }}</strong>
                                                                    </div>
                                                                    <div>Ditolak oleh:
                                                                        <span
                                                                            class="badge bg-danger">{{ $selesai->rejected_by }}</span>
                                                                    </div>
                                                                    @if (!empty($selesai->last_note))
                                                                        <div class="mt-1 text-muted">
                                                                            <small><strong>Catatan:</strong></small>
                                                                            <em>{{ $selesai->last_note }}</em>
                                                                        </div>
                                                                    @endif
                                                                </div>
                                                            </div>
                                                            <div class="text-md-end w-100 w-md-auto">
                                                                <button
                                                                    onclick="window.location.href='{{ url('/trperl/show/' . encrypt($selesai->id)) }}'"
                                                                    class="btn btn-warning btn-sm w-100 w-md-auto">
                                                                    <i class="fas fa-eye"></i> Lihat
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif

                        @if ($pengajuanEditUlang->isNotEmpty())
                            <div class="row mt-4">
                                <div class="col-12">
                                    <div class="card mb-4 border-primary shadow-sm">
                                        <div class="card-header pb-0 d-flex align-items-center gap-2">
                                            <i class="fas fa-edit text-primary" style="font-size:20px;"></i>
                                            <h6 class="mb-0 text-primary fw-bold">
                                                Permohonan Melengkapi Ditolak (Ajukan Ulang)
                                            </h6>
                                        </div>
                                        <div class="card-body">
                                            <input type="text" class="form-control form-control-sm dashboard-card-search mb-3"
                                                placeholder="Cari data..." data-search-target="#vendor-edit-ulang-list"
                                                data-search-empty="#vendor-edit-ulang-empty">
                                            <p id="vendor-edit-ulang-empty" class="search-empty-state d-none mb-3">Data
                                                tidak
                                                ditemukan.</p>
                                            <ul id="vendor-edit-ulang-list" class="list-group">
                                                @foreach ($pengajuanEditUlang as $permit)
                                                    <li class="list-group-item p-3 mb-3 border rounded"
                                                        style="background-color:#f0f8ff;" data-search-item>
                                                        <div
                                                            class="d-flex flex-column flex-md-row justify-content-between align-items-start gap-3">
                                                            <div class="d-flex gap-3 flex-grow-1" style="min-width:0">
                                                                <i class="fas fa-times text-danger mt-1"
                                                                    style="font-size:18px;"></i>
                                                                <div class="text-break">
                                                                    <div class="fw-bold">ID Permit:
                                                                        <strong>{{ $permit->id }}</strong>
                                                                    </div>
                                                                    <div>Uraian Kerja:
                                                                        <strong>{{ $permit->uraian_pekerjaan }}</strong>
                                                                    </div>
                                                                    @if (!empty($permit->note_melengkapi_reject))
                                                                        <div class="mt-1 text-muted">
                                                                            <small><strong>Catatan:</strong></small>
                                                                            <em>{{ $permit->note_melengkapi_reject }}</em>
                                                                        </div>
                                                                    @endif
                                                                </div>
                                                            </div>
                                                            <div class="text-md-end w-100 w-md-auto">
                                                                <button
                                                                    onclick="window.location.href='{{ url('/trperl/ajukan/' . encrypt($permit->id)) }}'"
                                                                    class="btn btn-primary btn-sm w-100 w-md-auto">
                                                                    <i class="fas fa-eye"></i> Lihat
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif

                        @if ($revisi->isNotEmpty())
                            <div class="row mt-4">
                                <div class="col-12">
                                    <div class="card mb-4 border-primary shadow-sm">
                                        <div class="card-header pb-0 d-flex align-items-center gap-2">
                                            <i class="fas fa-edit text-primary" style="font-size: 20px;"></i>
                                            <h6 class="mb-0 text-primary font-weight-bold">
                                                Daftar Permit Revisi
                                            </h6>
                                        </div>
                                        <div class="card-body">
                                            <input type="text" class="form-control form-control-s dashboard-card-search mb-3"
                                                placeholder="Cari data..." data-search-target="#vendor-revisi-list"
                                                data-search-empty="#vendor-revisi-empty">
                                            <p id="vendor-revisi-empty" class="search-empty-state d-none mb-3">Data tidak
                                                ditemukan.</p>
                                            <ul id="vendor-revisi-list" class="list-group">
                                                @foreach ($revisi as $permit)
                                                    <li class="list-group-item p-3 mb-3 border rounded" data-search-item>
                                                        <div
                                                            class="d-flex flex-column flex-md-row justify-content-between align-items-start gap-3">
                                                            <div class="flex-grow-1 text-wrap">
                                                                <div class="mb-1"><strong>ID Permit:</strong>
                                                                    <span class="d-inline-block text-break">{{ $permit->id }}</span>
                                                                </div>
                                                                <div class="mb-1"><strong>Uraian:</strong>
                                                                    <span
                                                                        class="d-inline-block text-break">{{ $permit->uraian_pekerjaan }}</span>
                                                                </div>
                                                                <div class="mb-1">
                                                                    <strong>Revisi oleh:</strong>
                                                                    {{ $permit->last_revisi_by }}
                                                                </div>
                                                                <div class="mb-1">
                                                                    <strong>Catatan:</strong>
                                                                    <span
                                                                        class="d-inline-block text-break">{{ $permit->last_catatan }}</span>
                                                                </div>
                                                            </div>
                                                            <div class="text-md-end">
                                                                <a href="{{ url('/trnewp/edit/' . encrypt($permit->id)) }}"
                                                                    class="btn btn-sm btn-primary w-100 w-md-auto">
                                                                    <i class="fas fa-eye"></i> Lihat
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif

                        {{-- Permohonan Hari Ini --}}
                        {{-- <div class="row mt-4">
                            <div class="col-12">
                                <div class="card mb-4">
                                    <div class="card-header pb-0">
                                        <h6 class="mb-1">Pengajuan Permit Terakhir: </h6>
                                    </div>
                                    <div class="card-body">
                                        @if ($permohonanHariIni->isEmpty())
                                        <p>Hari ini tidak ada permohonan</p>
                                        @else
                                        <ul class="list-unstyled">
                                            @foreach ($permohonanHariIni as $permohonan)
                                            <li class="permit-item mb-3">
                                                <a href="{{ url('/trnewp/show/' . encrypt($permohonan->id)) }}"
                                                    class="permit-link">
                                                    Nama Kegiatan:
                                                    <strong>{{ $permohonan->uraian_pekerjaan }}</strong><br>
                                                    Status:
                                                    <strong>{{ $permohonan->status }}</strong><br>
                                                    Mulai Bekerja:
                                                    <strong>{{
                                                        \Carbon\Carbon::parse($permohonan->mulai_kerja)->translatedFormat('d
                                                        F Y') }}</strong>
                                                </a>

                                                <button
                                                    onclick="window.location.href='{{ url('/trnewp/show/' . encrypt($permohonan->id)) }}'"
                                                    class="btn btn-primary mt-2 mt-md-0">
                                                    Lihat Detail
                                                </button>
                                            </li>
                                            <hr class="my-2" style="background-color:#1c8c90;">
                                            @endforeach
                                        </ul>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div> --}}
                        {{-- Layout dua kolom khusus veneks --}}
                        @if ($user->idroles === 'veneks')
                            <div class="row mt-4 g-3 row-cols-1 row-cols-lg-2">
                                {{-- Dokumen Belum Lengkap --}}
                                <div class="col">
                                    <div class="card h-100">
                                        <div class="card-header pb-0">
                                            <h6 class="mb-1">Dokumen Permit Menyusul/Tidak Lengkap</h6>
                                            @if ($dokumenMenyusul->isNotEmpty())
                                                <input type="text" class="form-control form-control-s dashboard-card-search mt-2"
                                                    placeholder="Cari data..." data-search-target="#vendor-dokumen-list"
                                                    data-search-empty="#vendor-dokumen-empty">
                                                <p id="vendor-dokumen-empty" class="search-empty-state d-none mb-0 mt-2">
                                                    Data tidak
                                                    ditemukan.</p>
                                            @endif
                                        </div>
                                        <div class="card-body" style="max-height: 600px; overflow-y: auto;">
                                            @if ($dokumenMenyusul->isEmpty())
                                                <p>Dokumen Telah Lengkap Semua</p>
                                            @else
                                                <ul id="vendor-dokumen-list" class="list-clean">
                                                    @foreach ($dokumenMenyusul as $permohonan)
                                                        <li class="permit-item mb-3" data-search-item>
                                                            <a href="{{ url('/trperl/ajukan/' . encrypt($permohonan->id)) }}"
                                                                class="permit-link">
                                                                ID Permit: <strong>{{ $permohonan->id }}</strong><br>
                                                                Nama Kegiatan:
                                                                <strong>{{ $permohonan->uraian_pekerjaan }}</strong><br>
                                                                Status: <strong>{{ $permohonan->status_name }}</strong><br>
                                                                Mulai Bekerja:
                                                                <strong>{{ \Carbon\Carbon::parse($permohonan->mulai_kerja)->translatedFormat('d F Y') }}</strong>
                                                            </a>
                                                            <button
                                                                onclick="window.location.href='{{ url('/trperl/ajukan/' . encrypt($permohonan->id)) }}'"
                                                                class="btn btn-primary mt-2 mt-md-0">Lihat Detail</button>
                                                        </li>
                                                        <hr class="my-2" style="background-color:#1c8c90;">
                                                    @endforeach
                                                </ul>
                                            @endif
                                        </div>
                                    </div>
                                </div>

                                {{-- Permit Expired --}}
                                <div class="col">
                                    <div class="card h-100">
                                        <div class="card-header pb-0 d-flex justify-content-between align-items-center">
                                            <h5 class="mb-0">Permit Expired/Lewat Masa Berlaku</h5>
                                        </div>
                                        @if ($PermitExp->isNotEmpty())
                                            <div class="px-3 pt-2">
                                                <input type="text" class="form-control form-control-s dashboard-card-search"
                                                    placeholder="Cari data..." data-search-target="#vendor-expired-veneks-list"
                                                    data-search-empty="#vendor-expired-veneks-empty">
                                                <p id="vendor-expired-veneks-empty" class="search-empty-state d-none mb-0 mt-2">Data
                                                    tidak ditemukan.</p>
                                            </div>
                                        @endif
                                        <div class="card-body" style="max-height: 600px; overflow-y: auto;">
                                            @if ($PermitExp->isEmpty())
                                                <p class="mb-0">Belum ada permit yang expired</p>
                                            @else
                                                <ul id="vendor-expired-veneks-list" class="list-clean">
                                                    @foreach ($PermitExp as $p)
                                                        @php
                                                            $akhir = \Carbon\Carbon::parse(
                                                                $p->masa_berlaku,
                                                            )->startOfDay();
                                                            $telat = $akhir->diffInDays(now()->startOfDay(), false);
                                                            $badgeCl =
                                                                $telat > 14
                                                                ? 'bg-danger'
                                                                : ($telat > 0
                                                                    ? 'bg-warning'
                                                                    : 'bg-secondary');
                                                        @endphp

                                                        <li class="expired-item mb-3 p-2 border rounded-3" data-search-item>
                                                            <div class="icon text-warning">
                                                                <i class="fas fa-exclamation-triangle"></i>
                                                            </div>

                                                            <div class="content d-flex flex-column justify-content-between min-w-0">
                                                                <div class="min-w-0">
                                                                    <a href="{{ url('/trperl/show/' . encrypt($p->id)) }}"
                                                                        class="fw-semibold text-decoration-none text-primary d-block text-wrap">
                                                                        {{ $p->id }} — {{ $p->uraian_pekerjaan }}
                                                                    </a>
                                                                    <div class="text-muted small mt-1 text-wrap">
                                                                        Vendor: <strong>{{ $p->vendor_name }}</strong>
                                                                        <span class="mx-2">•</span>
                                                                        Mulai:
                                                                        <strong>{{ \Carbon\Carbon::parse($p->mulai_kerja)->translatedFormat('d F Y') }}</strong>
                                                                        <span class="mx-2">•</span>
                                                                        Berakhir:
                                                                        <strong>{{ $akhir->translatedFormat('d F Y') }}</strong>
                                                                    </div>
                                                                </div>

                                                                <div
                                                                    class="d-flex flex-column flex-sm-row justify-content-between align-items-stretch align-items-sm-center gap-2 mt-2">
                                                                    <button class="btn btn-sm btn-outline-primary w-100 w-sm-auto"
                                                                        onclick="window.location.href='{{ url('/trperl/show/' . encrypt($p->id)) }}'">
                                                                        Lihat Detail
                                                                    </button>
                                                                    <span class="badge rounded-pill {{ $badgeCl }} align-self-sm-end">
                                                                        {{ $telat > 0 ? "Terlambat {$telat} hari" : 'Expired' }}
                                                                    </span>
                                                                </div>
                                                            </div>
                                                        </li>
                                                    @endforeach
                                                </ul>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif


                        {{-- Layout dua kolom khusus venint --}}
                        @if ($user->idroles === 'venint')
                            <div class="row mt-4 g-3 row-cols-1 row-cols-lg-2">
                                {{-- Permit Sedang Diproses --}}
                                <div class="col">
                                    <div class="card h-100">
                                        <div class="card-header pb-0">
                                            <h6 class="mb-1">Permit Sedang Diproses</h6>
                                            <small class="text-muted">Menunggu persetujuan: PIC Area / PIC Kerja /
                                                K3</small>
                                            @if ($permohonanProses->isNotEmpty())
                                                <input type="text" class="form-control form-control-sm dashboard-card-search mt-2"
                                                    placeholder="Cari data..." data-search-target="#vendor-proses-list"
                                                    data-search-empty="#vendor-proses-empty">
                                                <p id="vendor-proses-empty" class="search-empty-state d-none mb-0 mt-2">
                                                    Data tidak
                                                    ditemukan.</p>
                                            @endif
                                        </div>
                                        <div class="card-body" style="max-height: 600px; overflow-y: auto;">
                                            @if ($permohonanProses->isEmpty())
                                                <p class="mb-0">Tidak ada permit yang sedang diproses.</p>
                                            @else
                                                <ul id="vendor-proses-list" class="list-clean">
                                                    @foreach ($permohonanProses as $p)
                                                        <li class="permit-item mb-3" data-search-item>
                                                            <a href="{{ url('/trnewp/show/' . encrypt($p->id)) }}" class="permit-link">
                                                                ID Permit: <strong>{{ $p->id }}</strong><br>
                                                                Nama Kegiatan:
                                                                <strong>{{ $p->uraian_pekerjaan }}</strong><br>
                                                                Mulai Kerja:
                                                                <strong>{{ \Carbon\Carbon::parse($p->mulai_kerja)->translatedFormat('d F Y') }}</strong>
                                                            </a>
                                                            <button
                                                                onclick="window.location.href='{{ url('/trnewp/show/' . encrypt($p->id)) }}'"
                                                                class="btn btn-primary mt-2 mt-md-0">Lihat Detail</button>
                                                        </li>
                                                        <hr class="my-2" style="background-color:#1c8c90;">
                                                    @endforeach
                                                </ul>
                                            @endif
                                        </div>
                                    </div>
                                </div>

                                {{-- Permit Expired --}}
                                <div class="col">
                                    <div class="card h-100">
                                        <div class="card-header pb-0 d-flex justify-content-between align-items-center">
                                            <h5 class="mb-0">Permit Expired/Lewat Masa Berlaku</h5>
                                        </div>
                                        @if ($PermitExp->isNotEmpty())
                                            <div class="px-3 pt-2">
                                                <input type="text" class="form-control form-control-sm dashboard-card-search"
                                                    placeholder="Cari data..." data-search-target="#vendor-expired-venint-list"
                                                    data-search-empty="#vendor-expired-venint-empty">
                                                <p id="vendor-expired-venint-empty" class="search-empty-state d-none mb-0 mt-2">Data
                                                    tidak ditemukan.</p>
                                            </div>
                                        @endif
                                        <div class="card-body" style="max-height: 600px; overflow-y: auto;">
                                            @if ($PermitExp->isEmpty())
                                                <p class="mb-0">Belum ada permit yang expired</p>
                                            @else
                                                <ul id="vendor-expired-venint-list" class="list-clean">
                                                    @foreach ($PermitExp as $p)
                                                        @php
                                                            $akhir = \Carbon\Carbon::parse(
                                                                $p->masa_berlaku,
                                                            )->startOfDay();
                                                            $telat = $akhir->diffInDays(now()->startOfDay(), false);
                                                            $badgeCl =
                                                                $telat > 14
                                                                ? 'bg-danger'
                                                                : ($telat > 0
                                                                    ? 'bg-warning'
                                                                    : 'bg-secondary');
                                                        @endphp
                                                        <li class="expired-item mb-3 p-2 border rounded-3" data-search-item>
                                                            <div class="icon text-warning">
                                                                <i class="fas fa-exclamation-triangle"></i>
                                                            </div>
                                                            <div class="content d-flex flex-column justify-content-between min-w-0">
                                                                <div class="min-w-0">
                                                                    <a href="{{ url('/trperl/show/' . encrypt($p->id)) }}"
                                                                        class="fw-semibold text-decoration-none text-primary d-block text-wrap">
                                                                        {{ $p->id }} — {{ $p->uraian_pekerjaan }}
                                                                    </a>
                                                                    <div class="text-muted small mt-1 text-wrap">
                                                                        Departemen: <strong>{{ $p->depart_name }}</strong>
                                                                        <span class="mx-2">•</span>
                                                                        Mulai:
                                                                        <strong>{{ \Carbon\Carbon::parse($p->mulai_kerja)->translatedFormat('d F Y') }}</strong>
                                                                        <span class="mx-2">•</span>
                                                                        Berakhir:
                                                                        <strong>{{ $akhir->translatedFormat('d F Y') }}</strong>
                                                                    </div>
                                                                </div>
                                                                <div
                                                                    class="d-flex flex-column flex-sm-row justify-content-between align-items-stretch align-items-sm-center gap-2 mt-2">
                                                                    <button class="btn btn-sm btn-outline-primary w-100 w-sm-auto"
                                                                        onclick="window.location.href='{{ url('/trperl/show/' . encrypt($p->id)) }}'">
                                                                        Lihat Detail
                                                                    </button>
                                                                    <span class="badge rounded-pill {{ $badgeCl }} align-self-sm-end">
                                                                        {{ $telat > 0 ? "Terlambat {$telat} hari" : 'Expired' }}
                                                                    </span>
                                                                </div>
                                                            </div>
                                                        </li>
                                                    @endforeach
                                                </ul>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif


                        <div class="row mt-4">
                            <div class="col-12">
                                <div class="card shadow border-0" style="height: 600px; width: 100%; overflow: hidden;">
                                    <div class="card-body text-center">
                                        <h5 class="font-weight-bold text-primary">Kesepakatan Kerja Kontraktor</h5>
                                        <p class="text-muted" style="font-size: 12px;">
                                            Direvisi
                                            {{ $contract?->updated_at ? 'tanggal ' . $contract->updated_at : '-' }}
                                        </p>

                                        <!-- Tombol trigger modal -->
                                        <button type="button" class="btn btn-primary mb-0" data-bs-toggle="modal"
                                            data-bs-target="#kontrakModal">
                                            <i class="fas fa-eye"></i>
                                            <span class="font-weight-bold"> Detail</span>
                                        </button>

                                        <!-- Scroll preview (tetap ada seperti biasa) -->
                                        <div class="mt-3"
                                            style="max-height: 450px; overflow-y: auto; text-align: justify; padding: 10px; border: 1px solid #ddd; border-radius: 5px;">
                                            <h5 style="text-align: center;">KESEPAKATAN KERJA KONTRAKTOR</h5>
                                            {!! $kontrak !!}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Modal -->
                        <div class="modal fade" id="kontrakModal" tabindex="-1" aria-labelledby="kontrakModalLabel"
                            aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
                            <div class="modal-dialog modal-xl modal-dialog-scrollable">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="kontrakModalLabel">Kesepakatan Kerja Kontraktor</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                            aria-label="Tutup"></button>
                                    </div>
                                    <div class="modal-body" style="text-align: justify;">
                                        <h5 style="text-align: center;">KESEPAKATAN KERJA KONTRAKTOR</h5>
                                        {!! $kontrak !!}
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal"><i
                                                class="fa fa-times" aria-hidden="true"></i> Close</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('js')
    <script>
        function moveDashboardCardSearchToHeader() {
            const searchInputs = document.querySelectorAll('.dashboard-card-search');

            searchInputs.forEach((input) => {
                const card = input.closest('.card');
                const header = card ? card.querySelector('.card-header') : null;

                if (!card || !header) {
                    return;
                }

                let slot = header.querySelector('.dashboard-search-slot');
                if (!slot) {
                    slot = document.createElement('div');
                    slot.className = 'dashboard-search-slot';
                    header.classList.add('d-flex', 'gap-2', 'flex-wrap');
                    header.classList.remove('justify-content-between');
                    if (!header.classList.contains('align-items-center') && !header.classList.contains(
                        'align-items-end')) {
                        header.classList.add('align-items-start');
                    }
                    header.appendChild(slot);
                }

                let searchWrap = input.closest('.dashboard-search-input-wrap');
                if (!searchWrap) {
                    searchWrap = document.createElement('div');
                    searchWrap.className = 'dashboard-search-input-wrap';

                    const icon = document.createElement('span');
                    icon.className = 'dashboard-search-icon';
                    icon.innerHTML = '<i class="fas fa-search"></i>';

                    input.parentNode.insertBefore(searchWrap, input);
                    searchWrap.appendChild(icon);
                    searchWrap.appendChild(input);
                }

                input.classList.remove('mb-3', 'mt-2');
                slot.appendChild(searchWrap);

                const emptySelector = input.getAttribute('data-search-empty');
                const emptyState = emptySelector ? document.querySelector(emptySelector) : null;
                const body = card.querySelector('.card-body');

                if (emptyState && body && emptyState.closest('.card-header') === header) {
                    body.insertAdjacentElement('afterbegin', emptyState);
                    emptyState.classList.add('mb-2');
                }
            });
        }

        function initializeDashboardCardSearch() {
            const searchInputs = document.querySelectorAll('.dashboard-card-search');

            searchInputs.forEach((input) => {
                const targetSelector = input.getAttribute('data-search-target');
                const emptySelector = input.getAttribute('data-search-empty');

                if (!targetSelector) {
                    return;
                }

                const list = document.querySelector(targetSelector);
                if (!list) {
                    return;
                }

                const items = Array.from(list.querySelectorAll('[data-search-item]'));
                const emptyState = emptySelector ? document.querySelector(emptySelector) : null;

                const applyFilter = () => {
                    const keyword = input.value.trim().toLowerCase();
                    let visibleCount = 0;

                    items.forEach((item) => {
                        const itemText = (item.getAttribute('data-search-text') || item.textContent ||
                            '').toLowerCase();
                        const isMatch = keyword === '' || itemText.includes(keyword);

                        item.classList.toggle('d-none', !isMatch);

                        const divider = item.nextElementSibling;
                        if (divider && divider.tagName === 'HR') {
                            divider.classList.toggle('d-none', !isMatch);
                        }

                        if (isMatch) {
                            visibleCount++;
                        }
                    });

                    if (emptyState) {
                        emptyState.classList.toggle('d-none', visibleCount > 0);
                    }
                };

                input.addEventListener('input', applyFilter);
            });
        }

        // Update calendar based on selected month and year
        function updateCalendar() {
            const monthInput = document.getElementById('bulan');
            const calendarContainer = document.getElementById('calendar');

            if (!monthInput || !calendarContainer || typeof holidays === 'undefined' || !Array.isArray(holidays)) {
                return;
            }

            const selectedMonth = monthInput.value; // Get the selected month

            // Fetch the holidays from the backend

            // Clear existing calendar days
            calendarContainer.innerHTML = '';

            // Filter holidays based on selected month and year
            const filteredHolidays = holidays.filter(holiday => {
                const holidayDate = new Date(holiday.tanggal);
                return holidayDate.getMonth() + 1 == selectedMonth;
            });

            // Generate the new calendar days based on filtered holidays
            filteredHolidays.forEach(holiday => {
                const holidayDate = new Date(holiday.tanggal);
                const day = holidayDate.getDate(); // Get the day of the holiday
                const description = holiday.deskripsi;

                // Create the holiday div element
                const holidayDiv = document.createElement('div');
                holidayDiv.classList.add('calendar-day');
                holidayDiv.style.color = 'red'; // Add style to mark holidays

                // Add the date and description (only the day)
                holidayDiv.innerHTML = `
                                                    <strong>${day < 10 ? '0' + day : day}</strong>
                                                    <div class="calendar-description">${description}</div>
                                                `;

                // Append the holiday to the calendar container
                calendarContainer.appendChild(holidayDiv);
            });
        }

        // Initialize the calendar with current month and year
        document.addEventListener('DOMContentLoaded', function () {
            updateCalendar(); // Call the update function on page load to show the current month's holidays
            moveDashboardCardSearchToHeader();
            initializeDashboardCardSearch();
        });

        // Function to open broadcast modal from notification icon
        function openBroadcastModal() {
            const modalElement = document.getElementById('globalAnnouncementModal');
            if (modalElement) {
                const announcementModal = new bootstrap.Modal(modalElement);
                announcementModal.show();
            }
        }
    </script>

    <style>
        /* ===== Broadcast Notification Icon with Flash Animation ===== */
        .broadcast-notification-icon {
            position: relative;
            cursor: pointer;
            padding: 8px 12px;
            border-radius: 8px;
            background: linear-gradient(135deg, #028284 0%, #00b7bd 100%);
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(2, 130, 132, 0.3);
        }

        .broadcast-notification-icon:hover {
            transform: scale(1.05);
            box-shadow: 0 4px 15px rgba(2, 130, 132, 0.4);
        }

        .notification-bell {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .notification-bell i {
            font-size: 1.5rem;
            color: white;
            animation: bellShake 0.5s ease-in-out infinite alternate, bellGlow 1.5s ease-in-out infinite;
        }

        @keyframes bellShake {
            0% {
                transform: rotate(-10deg);
            }

            100% {
                transform: rotate(10deg);
            }
        }

        @keyframes bellGlow {

            0%,
            100% {
                text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
            }

            50% {
                text-shadow: 0 0 20px rgba(255, 255, 255, 1), 0 0 30px rgba(255, 255, 255, 0.8);
            }
        }

        .notification-badge {
            position: absolute;
            top: -8px;
            right: -8px;
            background: #dc3545;
            color: white;
            font-size: 0.7rem;
            font-weight: bold;
            padding: 2px 6px;
            border-radius: 50%;
            min-width: 18px;
            height: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: badgePulse 1.5s ease-in-out infinite;
            box-shadow: 0 2px 5px rgba(220, 53, 69, 0.5);
        }

        @keyframes badgePulse {

            0%,
            100% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.2);
            }
        }

        /* Flash effect container */
        .broadcast-notification-icon::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 8px;
            background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            animation: flashEffect 2s linear infinite;
        }

        @keyframes flashEffect {
            0% {
                transform: translateX(-100%);
            }

            100% {
                transform: translateX(100%);
            }
        }

        .calendar-container {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            /* Membuat 7 kolom untuk setiap hari dalam seminggu */
            gap: 15px;
            /* Jarak antar elemen */
            justify-items: center;
            /* Menyelaraskan elemen di tengah kolom */
            margin-top: 10px;
            /* Memberikan jarak antara kalender dan elemen lain */
        }

        .calendar-day {
            width: 100%;
            /* Membuat lebar 100% agar lebih fleksibel */
            height: auto;
            /* Menyesuaikan tinggi dengan konten */
            min-height: 90px;
            /* Menetapkan tinggi minimum untuk memberi ruang */
            border: 1px solid #e3e3e3;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            /* Menempatkan elemen di atas */
            align-items: center;
            font-size: 14px;
            border-radius: 5px;
            padding: 8px;
            /* Menambahkan padding untuk memberi ruang */
            transition: background-color 0.3s, transform 0.3s;
            cursor: pointer;
            box-sizing: border-box;
            /* Menghitung padding dan border dalam ukuran elemen */
        }

        .calendar-day:hover {
            background-color: #f8d7da;
            transform: scale(1.05);
        }

        .calendar-day strong {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 5px;
            /* Menambahkan jarak antara tanggal dan deskripsi */
        }

        .calendar-description {
            font-size: 12px;
            color: #555;
            text-align: center;
            line-height: 1.3;
            margin-top: 5px;
            overflow-wrap: break-word;
            /* Membungkus teks jika panjang */
            word-wrap: break-word;
            /* Memastikan kata panjang dibungkus */
            hyphens: auto;
            /* Menambahkan pemisahan kata jika perlu */
            white-space: normal;
            /* Membuat teks bisa terputus */
            padding: 0 5px;
            /* Memberikan ruang kiri dan kanan pada deskripsi */
        }

        @media (max-width: 768px) {
            .calendar-container {
                grid-template-columns: repeat(5, 1fr);
                /* Mengurangi kolom menjadi 5 untuk layar lebih kecil */
            }

            .calendar-day {
                min-height: 80px;
                /* Menyesuaikan tinggi elemen kalender untuk layar lebih kecil */
            }
        }

        .permit-item {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 10px;
            flex-wrap: wrap;
            /* biar bisa turun ke bawah di layar kecil */
        }

        .permit-link {
            flex: 1;
            text-decoration: none;
            color: inherit;
        }

        .dashboard-card-search {
            max-width: 360px;
        }

        .dashboard-search-slot {
            margin-left: auto;
            width: min(230px, 100%);
        }

        .dashboard-search-input-wrap {
            position: relative;
            width: 100%;
        }

        .dashboard-search-icon {
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
            color: #6c757d;
            font-size: 0.8rem;
            pointer-events: none;
            z-index: 2;
        }

        .dashboard-search-slot .dashboard-card-search {
            width: 100%;
            max-width: 100%;
            margin: 0 !important;
            padding-left: 30px;
        }

        .search-empty-state {
            color: #6c757d;
            font-size: 0.85rem;
        }

        @media (max-width: 768px) {
            .dashboard-search-slot {
                width: 100%;
            }
        }

        @media (max-width: 575.98px) {
            .permit-item {
                flex-direction: column;
                align-items: stretch;
            }

            .permit-item .btn {
                align-self: flex-start;
                /* tombol tetap rata kiri di mobile */
            }
        }

        /* permit expired */
        .min-w-0 {
            min-width: 0;
        }

        /* penting agar flex child bisa shrink */
        .text-wrap {
            overflow-wrap: anywhere;
        }

        .expired-item .icon {
            flex: 0 0 auto;
            width: 28px;
            /* tetap beri ruang */
            display: flex;
            align-items: center;
            /* center vertical di dalam kolom ikon */
            justify-content: center;
        }

        .expired-item .icon i {
            font-size: 18px;
            /* opsional: ukuran ikon */
        }

        .expired-item .content {
            flex: 1 1 0;
            min-width: 0;
        }

        .list-clean {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        /* Style dasar untuk kartu expired */
        .expired-item {
            align-items: center;
            /* ini yang bikin icon di tengah secara vertikal */
            flex-wrap: wrap;
            background: #ffffff;
            border-left: 4px solid #ffe100;
            border-radius: 0.5rem;
            padding: 1rem;
            display: flex;
            gap: 1rem;

            /* Animasi halus */
            transition: transform 0.2s ease,
                box-shadow 0.2s ease,
                background-color 0.2s ease;

            /* Shadow awal */
            box-shadow: 0 1px 0 rgba(16, 24, 40, 0.04),
                0 1px 3px rgba(16, 24, 40, 0.10);
        }

        /* Efek hover */
        .expired-item:hover {
            transform: translateY(-2px);
            background-color: #fcfcfc;
            box-shadow: 0 6px 12px rgba(16, 24, 40, 0.12);
            cursor: pointer;
        }

        /* Icon peringatan */
        .expired-item i {
            color: #ffe100;
            font-size: 2rem;
            text-shadow: -1px -1px 0 #000,
                1px -1px 0 #000,
                -1px 1px 0 #000,
                1px 1px 0 #000;
        }

        .text-break {
            word-wrap: break-word !important;
            word-break: break-word !important;
            overflow-wrap: break-word !important;
        }

        /* ===== Announcement Modal Styles ===== */
        .announcement-trigger {
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(2, 130, 132, 0.3);
        }

        .announcement-trigger:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(2, 130, 132, 0.4);
        }

        .pulse-animation {
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
                box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
            }

            70% {
                transform: scale(1.1);
                box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
            }

            100% {
                transform: scale(1);
                box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
            }
        }

        .announcement-modal-content {
            border: none;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        }

        .announcement-modal-header {
            background: linear-gradient(135deg, #028284 0%, #017374 100%);
            color: white;
            padding: 20px 25px;
            border: none;
        }

        .announcement-modal-header .modal-title {
            color: white;
        }

        .announcement-modal-header small {
            color: rgba(255, 255, 255, 0.8) !important;
        }

        .announcement-modal-header .btn-close {
            filter: brightness(0) invert(1);
            opacity: 0.8;
        }

        .announcement-modal-header .btn-close:hover {
            opacity: 1;
        }

        .announcement-icon-wrapper {
            width: 50px;
            height: 50px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .announcement-icon-wrapper i {
            font-size: 24px;
            color: white;
        }

        .announcement-carousel {
            position: relative;
        }

        .announcement-slide {
            display: none;
            animation: slideIn 0.3s ease;
        }

        .announcement-slide.active {
            display: block;
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateX(20px);
            }

            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .announcement-content {
            background: #fff;
        }

        .announcement-date-badge {
            background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
            color: #2e7d32;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 500;
        }

        .announcement-recipient {
            font-size: 15px;
            color: #444;
        }

        /* Scrollable message wrapper */
        .announcement-message-wrapper {
            position: relative;
            max-height: 350px;
            overflow: visible;
        }

        .announcement-message-content {
            background: #f8f9fa;
            border-radius: 12px;
            padding: 20px;
            border-left: 4px solid #028284;
            color: #333;
            font-size: 14px;
            line-height: 1.8;
            max-height: 350px;
            overflow-y: auto;
            overflow-x: auto;
            scroll-behavior: smooth;
        }

        .announcement-message-content::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }

        .announcement-message-content::-webkit-scrollbar-track {
            background: #e9ecef;
            border-radius: 4px;
        }

        .announcement-message-content::-webkit-scrollbar-thumb {
            background: #028284;
            border-radius: 4px;
        }

        .announcement-message-content::-webkit-scrollbar-thumb:hover {
            background: #017374;
        }

        .announcement-message-content::-webkit-scrollbar-corner {
            background: #e9ecef;
        }

        .announcement-message-content p {
            margin-bottom: 10px;
        }

        .announcement-message-content p:last-child {
            margin-bottom: 0;
        }

        /* Allow images to display at original size with scrolling */
        .announcement-message-content img {
            max-width: none;
            height: auto;
            border-radius: 8px;
            margin: 10px 0;
            display: block;
        }

        /* Scroll indicators */
        .scroll-indicator {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 36px;
            height: 36px;
            background: rgba(2, 130, 132, 0.9);
            color: white;
            border-radius: 50%;
            display: none;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 10;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        }

        .scroll-indicator:hover {
            background: #017374;
            transform: translateY(-50%) scale(1.1);
        }

        .scroll-indicator-left {
            left: 5px;
        }

        .scroll-indicator-right {
            right: 5px;
        }

        .announcement-message-wrapper:hover .scroll-indicator.active {
            display: flex;
        }

        .announcement-signature {
            text-align: right;
            padding-top: 15px;
        }

        .signature-line {
            width: 150px;
            height: 2px;
            background: linear-gradient(90deg, transparent, #028284);
            margin-left: auto;
            margin-bottom: 10px;
        }

        .announcement-modal-footer {
            background: #f8f9fa;
            border-top: 1px solid #e9ecef;
            padding: 15px 25px;
        }

        @media (max-width: 768px) {
            .announcement-modal-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 15px;
            }

            .announcement-date-badge {
                font-size: 11px;
                padding: 6px 12px;
            }

            .announcement-signature {
                text-align: center;
            }

            .signature-line {
                margin: 0 auto 10px;
            }
        }
    </style>
@endpush