@push('styles')
        <style>
            .img-frame {
                width: 200px;
                height: 200px;
                border: 5px solid #cccccc;
                border-radius: 15px;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
                padding: 5px;
                background-color: #f8f8f8;
            }

            .disabled-link {
                pointer-events: none;
                cursor: not-allowed;
                opacity: 0.5;
            }

            .kbw-signature {
                width: 550px !important;
                height: 200px !important;
                border: 1px solid #ccc;
            }

            .signature {
                width: 550px !important;
                /* Samakan dengan .kbw-signature */
                height: 200px !important;
                /* Samakan dengan .kbw-signature */
                border: 1px solid #ccc;
                /* Tambahkan border agar terlihat konsisten */
                object-fit: contain;
                /* Pastikan gambar tidak terpotong */
            }

            .form-group label[for="signature"] {
                display: block;
                font-weight: bold;
                margin-bottom: 5px;
            }

            .btn-clear-signature {
                display: block;
                /* Membuat tombol berada di bawah field */
                margin-top: 10px;
                /* Beri jarak antara field tanda tangan dan tombol */
                text-align: center;
                /* Pusatkan tombol jika perlu */
            }

            .badge-status {
                font-size: 90%;
                padding: 5px 10px;
                border-radius: 12px;
            }

            .card-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .search-container {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 15px;
            }

            .search-input {
                width: 300px;
            }

            @media (max-width: 576px) {

                .card-header .btn,
                .card-header select {
                    width: 100%;
                    margin-bottom: 10px;
                }
            }

            /* Header card: judul kiri, aksi kanan */
            .card-header {
                display: flex;
                align-items: center;
                gap: .5rem;
            }

            .card-header .header-actions {
                margin-left: auto;
                /* dorong ke kanan */
                display: flex;
                gap: .5rem;
                /* jarak antar tombol */
                flex-wrap: wrap;
            }

            .card-header .header-actions .btn {
                white-space: nowrap;
                /* teks tombol tidak pindah baris */
            }

            @media (max-width:576px) {
                .card-header {
                    flex-wrap: wrap;
                }

                .card-header .header-actions {
                    margin-left: 0;
                    width: 100%;
                    justify-content: flex-start;
                    margin-top: .5rem;
                }
            }
        </style>
    @endpush
    <div>
        {{-- Search Container --}}
        <div class="row mb-3">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            {{-- Search by Name --}}
                            <div class="col-md-4 mb-2">
                                <label for="searchName" class="form-label">Cari Nama Pemohon</label>
                                <div class="input-group">
                                    <input type="text" class="form-control" id="searchName"
                                        placeholder="Masukkan nama pemohon..."
                                        wire:model.live.debounce.500ms="searchName">
                                    <span class="input-group-text">
                                        <i class="fas fa-user"></i>
                                    </span>
                                </div>
                            </div>

                            {{-- Search by Registration Number --}}
                            <div class="col-md-4 mb-2">
                                <label for="searchNoPendaftaran" class="form-label">Cari No Pendaftaran</label>
                                <div class="input-group">
                                    <input type="text" class="form-control" id="searchNoPendaftaran"
                                        placeholder="Masukkan no pendaftaran..."
                                        wire:model.live.debounce.500ms="searchNoPendaftaran">
                                    <span class="input-group-text">
                                        <i class="fas fa-hashtag"></i>
                                    </span>
                                </div>
                            </div>

                            {{-- Filter by Status --}}
                            <div class="col-md-3 mb-2">
                                <label for="filterStatus" class="form-label">Filter Status</label>
                                <select class="form-control" id="filterStatus" wire:model.live="filterStatus">
                                    <option value="">-- Semua Status --</option>
                                    <option value="pending">Pending</option>
                                    <option value="menunggu_petugas">Menunggu Petugas</option>
                                    <option value="menunggu_pelaksana">Menunggu Pelaksana</option>
                                    <option value="menunggu_ppid">Menunggu PPID</option>
                                    <option value="menunggu_dewan">Menunggu Evaluasi Dewan Pertimbangan</option>
                                    <option value="selesai">Selesai</option>
                                </select>
                            </div>

                            {{-- Filter by Start Month --}}
                            <div class="col-md-2 mb-2">
                                <label for="startMonth" class="form-label">Bulan Awal</label>
                                <select class="form-control" id="startMonth" wire:model.live="startMonth">
                                    <option value="">-- Semua Bulan --</option>
                                    <option value="01">Januari</option>
                                    <option value="02">Februari</option>
                                    <option value="03">Maret</option>
                                    <option value="04">April</option>
                                    <option value="05">Mei</option>
                                    <option value="06">Juni</option>
                                    <option value="07">Juli</option>
                                    <option value="08">Agustus</option>
                                    <option value="09">September</option>
                                    <option value="10">Oktober</option>
                                    <option value="11">November</option>
                                    <option value="12">Desember</option>
                                </select>
                            </div>

                            {{-- Filter by End Month --}}
                            <div class="col-md-2 mb-2">
                                <label for="endMonth" class="form-label">Bulan Akhir</label>
                                <select class="form-control" id="endMonth" wire:model.live="endMonth">
                                    <option value="">-- Semua Bulan --</option>
                                    <option value="01">Januari</option>
                                    <option value="02">Februari</option>
                                    <option value="03">Maret</option>
                                    <option value="04">April</option>
                                    <option value="05">Mei</option>
                                    <option value="06">Juni</option>
                                    <option value="07">Juli</option>
                                    <option value="08">Agustus</option>
                                    <option value="09">September</option>
                                    <option value="10">Oktober</option>
                                    <option value="11">November</option>
                                    <option value="12">Desember</option>
                                </select>
                            </div>

                            {{-- Filter by Year --}}
                            <div class="col-md-2 mb-2">
                                <label for="filterYear" class="form-label">Tahun</label>
                                <select class="form-control" id="filterYear" wire:model.live="filterYear">
                                    <option value="">-- Semua Tahun --</option>
                                    @php $currentYear = date('Y'); @endphp
                                    @for($i = $currentYear; $i >= 2020; $i--)
                                        <option value="{{ $i }}">{{ $i }}</option>
                                    @endfor
                                </select>
                            </div>

                            {{-- Reset Button --}}
                            <div class="col-md-1 mb-2">
                                <label class="form-label d-none d-md-block">&nbsp;</label>
                                <button type="button" class="btn btn-secondary w-100" wire:click="resetSearch"
                                    title="Reset Pencarian">
                                    <i class="fas fa-redo"></i>
                                </button>
                            </div>
                        </div>

                        {{-- Search Info --}}
                        @if ($searchName || $searchNoPendaftaran || $filterStatus)
                            <div class="row mt-2">
                                <div class="col-md-12">
                                    <div class="alert alert-info py-2 mb-0">
                                        <i class="fas fa-info-circle"></i>
                                        <small>
                                            Menampilkan hasil pencarian:
                                            @if ($searchName)
                                                <strong>Nama: "{{ $searchName }}"</strong>
                                            @endif
                                            @if ($searchNoPendaftaran)
                                                <strong>No Pendaftaran: "{{ $searchNoPendaftaran }}"</strong>
                                            @endif
                                            @if ($filterStatus)
                                                <strong>Status: "{{ ucfirst($filterStatus) }}"</strong>
                                            @endif
                                            @if ($startMonth)
                                                <strong>Mulai: "{{ \Carbon\Carbon::create()->month($startMonth)->translatedFormat('F') }}"</strong>
                                            @endif
                                            @if ($endMonth)
                                                <strong>Sampai: "{{ \Carbon\Carbon::create()->month($endMonth)->translatedFormat('F') }}"</strong>
                                            @endif
                                            @if ($filterYear)
                                                <strong>Tahun: "{{ $filterYear }}"</strong>
                                            @endif
                                        </small>
                                    </div>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        {{-- Actions Row --}}
        <div class="row mb-2">
            <div class="col-md-12">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#import-tamu">
                            <i class="fas fa-plus"></i> Tambah dari Buku Tamu
                        </button>
                    </div>
                    <div>
                        <span class="badge badge-secondary">
                            Total: {{ $forms->total() }} data
                        </span>
                    </div>
                </div>
            </div>
        </div>

        {{-- Loading Indicator --}}
        <div class="row">
            <div class="col-md-12 mt-2">
                <div class="overlay-wrapper" wire:loading>
                    <div class="overlay dark">
                        <i class="fas fa-3x fa-sync-alt fa-spin"></i>
                        <div class="text-bold pt-2">Loading...</div>
                    </div>
                </div>
                @if ($jumlahBelumLayanan > 0)
                    <div class="alert alert-warning d-flex justify-content-between">
                        <span>
                            ⚠️ <b>{{ $jumlahBelumLayanan }}</b> data belum memiliki layanan
                        </span>
                        <button wire:click="applyFilterBelumLayanan" class="btn btn-sm btn-outline-dark">
                            Lihat Data
                        </button>

                    </div>
                @endif

                {{-- Table Card --}}
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title mb-0">List Permohonan Informasi</h3>

                        <div class="header-actions">
                            <a href="{{ route('log-registrasi-pdf', ['start_month' => $startMonth, 'end_month' => $endMonth, 'year' => $filterYear]) }}" target="_blank" class="btn btn-secondary">
                                <i class="fas fa-print"></i> Cetak Log Register PPID
                            </a>
                            <!-- <a href="{{ route('laporan-tahunan') }}" target="_blank" class="btn btn-secondary">
                            <i class="fas fa-file-pdf"></i> Laporan Tahunan
                        </a> -->
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped mb-0">
                                <thead>
                                    <tr>
                                        <th>No</th>
                                        <th>No Pendaftaran</th>
                                        <th>Tanggal Pendaftaran</th>
                                        <th>Nama</th>
                                        <th>Alamat</th>
                                        <th>No Tlp</th>
                                        <th>Email</th>
                                        <th>Rincian Informasi</th>
                                        <th>Proses Tahapan</th>
                                        <th>Status</th>
                                        <th>Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($forms as $index => $item)
                                        <tr>
                                            <td>{{ $forms->firstItem() + $index }}</td>
                                            <td>
                                                <span
                                                    class="badge badge-primary">{{ $item->no_pendaftaran ?? '-' }}</span>
                                            </td>
                                            <td>{{ $item->tanggal_pendaftaran ? $item->tanggal_pendaftaran->format('d-m-Y') : '-' }}
                                            </td>
                                            <td>{{ $item->nama_pemohon ?? '-' }}</td>
                                            <td>{{ Str::limit($item->alamat_pemohon, 30) }}</td>
                                            <td>{{ $item->no_tlp ?? '-' }}</td>
                                            <td>{{ $item->email ?? '-' }}</td>
                                            <td>{{ Str::limit($item->rincian_informasi, 40) }}</td>
                                            <td class="text-center align-middle">
                                                <span class="{{ $item->status_class }} badge-status shadow-sm">
                                                    {{ $item->status_approval }}
                                                </span>
                                            </td>
                                            <td class="text-center align-middle">
                                                @php
                                                    $finalStatus = $item->detail->status_permohonan ?? 'pending';

                                                    if ($finalStatus === 'dikabulkan') {
                                                        $finalStatusLabel = 'Diterima';
                                                        $statusColor = 'badge-success';
                                                    } elseif ($finalStatus === 'ditolak') {
                                                        $finalStatusLabel = 'Ditolak';
                                                        $statusColor = 'badge-danger';
                                                    } else {
                                                        $finalStatusLabel = 'Pending';
                                                        $statusColor = 'badge-secondary';
                                                    }
                                                @endphp
                                                <span class="badge {{ $statusColor }} badge-status shadow-sm">
                                                    {{ $finalStatusLabel }}
                                                </span>
                                            </td>
                                            <td>
                                                <div class="btn-group btn-group-sm" role="group">
                                                    <a class="btn btn-primary"
                                                        wire:click="showModalProses({{ $item->id }})">
                                                        <i class="fas fa-pencil-alt"></i> Proses
                                                    </a>
                                                    <a href="javascript:void(0)"
                                                        wire:click.prevent="deleteConfirmation({{ $item->id }})"
                                                        class="btn btn-danger">
                                                        <i class="fas fa-trash"></i> Delete
                                                    </a>
                                                    <a class="btn btn-info"
                                                        href="{{ route('detail-ppid', $item->id) }}">
                                                        <i class="fas fa-folder"></i> Detail
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="11" class="text-center text-danger">
                                                @if ($searchName || $searchNoPendaftaran || $filterStatus)
                                                    <i class="fas fa-search"></i> Tidak ada data yang sesuai dengan
                                                    pencarian
                                                @else
                                                    <i class="fas fa-inbox"></i> Tidak ada data
                                                @endif
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="card-footer clearfix">
                        <div class="row">
                            <div class="col-md-6">
                                <p class="text-muted mb-0">
                                    Menampilkan {{ $forms->firstItem() ?? 0 }} sampai {{ $forms->lastItem() ?? 0 }}
                                    dari
                                    {{ $forms->total() }} data
                                </p>
                            </div>
                            <div class="col-md-6">
                                <ul class="pagination pagination-sm m-0 float-right">
                                    {{ $forms->links() }}
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Modal Includes --}}
        @include('livewire.modal-proses-form-khusus')
        @include('livewire.modal-wizard')
        @include('livewire.modal-import-buku-tamu')
        @include('livewire.modal-konfirmasi-form')
    </div>
    @push('scripts')
        <script>
            window.addEventListener('swalSuccess', event => {
                Toast.fire({
                    title: 'Berhasil Menambah Data!',
                    icon: 'success',
                });
            });

            window.addEventListener('showDeleteConfirmation', event => {
                Swal.fire({
                    title: "Are you sure?",
                    text: "You won't be able to revert this!",
                    showCancelButton: true,
                    icon: "warning",
                    confirmButtonColor: "#3085d6",
                    cancelButtonColor: "#d33",
                    confirmButtonText: "Yes, delete it!"
                }).then((result) => {
                    if (result.isConfirmed) {
                        Livewire.dispatch('deleteConfirmed');
                        Swal.fire({
                            title: "Deleted!",
                            text: "Your file has been deleted.",
                            icon: "success"
                        });
                    }
                });
            });
            // window.addEventListener('showApproveConfirmation', event => {
            //     Swal.fire({
            //         title: "Apakah anda menyetuhui dokumen ini?",
            //         text: "Dokumen akan di tanda tangan atas nama anda",
            //         showCancelButton: true,
            //         icon: "warning",
            //         confirmButtonColor: "#3085d6",
            //         cancelButtonColor: "#d33",
            //         confirmButtonText: "Ya, Setuju!"
            //     }).then((result) => {
            //         if (result.isConfirmed) {
            //             @this.dispatch('approveConfirmed');
            //         }
            //     });
            // });
            window.addEventListener('swalSuccess', event => {
                Swal.fire({
                    title: 'Success!',
                    text: 'Berhasil menyimpan Data',
                    icon: 'success',
                    timer: 3000
                });

                setTimeout(function() {
                    window.location.reload();
                }, 1000);
            });

            window.addEventListener('swalApprove', event => {
                Toast.fire({
                    title: 'Berhasil !',
                    icon: 'success',
                });
            });
            window.addEventListener('showAlert', event => {
                Toast.fire({
                    title: 'Gagal !',
                    icon: 'error',
                    text: 'Belum di Apporve Ptugas / Pending',

                });
            });
        </script>

        <!-- modal approve -->
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                // Configuration for all signature pads
                const signaturePads = [
                    'sig-petugas',
                    'sig-pelaksana_ppid',
                    'sig-ppid',
                    'sig-atasan_ppid',
                    'sig-dewan_pertimbangan'
                ];

                let signatures = {};

                function initializeSignature(elementId) {
                    const element = $(`#${elementId}`);
                    if (element.length) {
                        signatures[elementId] = element.signature({
                            syncField: '#signature64',
                            syncFormat: 'PNG'
                        });
                    }
                }

                function handleSignatureUpdate(sig) {
                    if (sig) {
                        const data = sig.signature('toDataURL');
                        console.log('Signature Data:', data);
                        $('#signature64').val(data).trigger('input');
                        Livewire.dispatch('signatureUpdated', {
                            value: data
                        });
                    }
                }

                // Event listener for modal show
                Livewire.on('showModalProses', function() {
                    $('#wizardModal').modal('show');

                    $('#wizardModal').on('shown.bs.modal', function() {
                        // Initialize all signature pads
                        signaturePads.forEach(padId => {
                            if (!signatures[padId]) {
                                initializeSignature(padId);
                            }
                        });

                        // Single clear button handler
                        $('.btn-clear-signature').on('click', function(e) {
                            e.preventDefault();
                            const targetPad = $(this).data('target');
                            if (signatures[targetPad]) {
                                signatures[targetPad].signature('clear');
                                $('#signature64').val('');
                            }
                        });

                        // Single mouseup handler for all signature pads
                        signaturePads.forEach(padId => {
                            $(`#${padId}`).on('mouseup', function() {
                                handleSignatureUpdate(signatures[padId]);
                            });
                        });
                    });
                });
            });

            document.addEventListener('DOMContentLoaded', function() {
                Livewire.on('hiddenModal', function() {
                    $('#confirmationModal').modal('hide'); // Menutup modal
                });
            });
        </script>

        <script>
            $('#activate').click(function(e) {
                e.preventDefault();
                var formData = {
                    campaign_name: $('#campaignName').val(),
                    start_date: $('#start-date').val(),
                    end_date: $('#end-date').val(),
                    days: {
                        sunday: $('#sunday').prop('checked'),
                        monday: $('#monday').prop('checked'),
                        tuesday: $('#tuesday').prop('checked'),
                        wednesday: $('#wednesday').prop('checked'),
                        thurday: $('#thursday').prop('checked'),
                        friday: $('#friday').prop('checked'),
                        saturday: $('#saturday').prop('checked'),
                    },
                    start_time: $('#start-time').val(),
                    end_time: $('#end-time').val()
                }
                alert(JSON.stringify(formData));
            })
        </script>
    @endpush