@extends('layouts.app')

@section('title', 'Keamanan')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700">
                <div class="card-header bg-gray-50 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-600">
                    <h3 class="card-title text-gray-900 dark:text-white">
                        <i class="fas fa-shield-alt mr-2"></i>Keamanan
                    </h3>
                </div>
                <div class="card-body bg-white dark:bg-gray-800 p-0">
                    <!-- Tab Navigation -->
                    <div class="border-b border-gray-200 dark:border-gray-600">
                        <nav class="flex space-x-8 px-6" aria-label="Tabs">
                            <button onclick="switchTab('petugas')" id="tab-petugas" class="tab-button active whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm focus:outline-none transition-colors duration-200">
                                <i class="fas fa-users mr-2"></i>Petugas
                            </button>
                            <button onclick="switchTab('jadwal')" id="tab-jadwal" class="tab-button whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm focus:outline-none transition-colors duration-200">
                                <i class="fas fa-calendar-alt mr-2"></i>Jadwal Piket
                            </button>
                            <button onclick="switchTab('absensi')" id="tab-absensi" class="tab-button whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm focus:outline-none transition-colors duration-200">
                                <i class="fas fa-clipboard-check mr-2"></i>Daftar Hadir
                            </button>
                            <button onclick="switchTab('laporan')" id="tab-laporan" class="tab-button whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm focus:outline-none transition-colors duration-200">
                                <i class="fas fa-exclamation-triangle mr-2"></i>Laporan Kejadian
                            </button>
                        </nav>
                    </div>

                    <!-- Tab Content -->
                    <div class="p-6">
                        <!-- Tab Petugas -->
                        <div id="content-petugas" class="tab-content">
                            <div class="mb-4 flex justify-between items-center">
                                <h4 class="text-lg font-semibold text-gray-900 dark:text-white">Data Petugas Keamanan</h4>
                                @if(strtoupper(auth()->user()->entity->name) == 'RT')
                                <button onclick="openTambahPetugasModal()" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200">
                                    <i class="fas fa-plus mr-2"></i>Tambah Petugas
                                </button>
                                @else
                                <div class="text-sm text-gray-500 dark:text-gray-400 italic">
                                    <i class="fas fa-info-circle mr-1"></i>
                                    Hanya pengurus RT yg dpt menambah petugas
                                </div>
                                @endif
                            </div>
                            
                            <div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
                                <div class="overflow-x-auto">
                                    <table id="petugasTable" class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                                        <thead class="bg-gray-50 dark:bg-gray-700">
                                            <tr>
                                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">No</th>
                                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Nama</th>
                                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">NIK</th>
                                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">No. HP</th>
                                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Alamat</th>
                                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Status</th>
                                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Aksi</th>
                                            </tr>
                                        </thead>
                                        <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                                            <tr>
                                                <td colspan="7" class="px-6 py-4 text-center text-gray-500 dark:text-gray-400">
                                                    <i class="fas fa-users fa-3x mb-3 text-gray-300 dark:text-gray-600"></i>
                                                    <p>Belum ada data petugas keamanan</p>
                                                    <p class="text-sm">Klik tombol "Tambah Petugas" untuk menambah data</p>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <!-- Tab Jadwal Piket -->
                        <div id="content-jadwal" class="tab-content hidden">
                            <div class="mb-4 flex justify-between items-center">
                                <h4 class="text-lg font-semibold text-gray-900 dark:text-white">Jadwal Piket Keamanan</h4>
                                <button onclick="openJadwalPiketModal()" class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 transition-colors duration-200">
                                    <i class="fas fa-plus mr-2"></i>Buat Jadwal
                                </button>
                            </div>

                            <!-- Filter Bulan -->
                            <div class="mb-4 flex flex-wrap gap-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Bulan</label>
                                    <select id="filterBulan" onchange="loadJadwalPiket()" class="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                                        <option value="">Pilih Bulan</option>
                                        <option value="1">Januari</option>
                                        <option value="2">Februari</option>
                                        <option value="3">Maret</option>
                                        <option value="4">April</option>
                                        <option value="5">Mei</option>
                                        <option value="6">Juni</option>
                                        <option value="7">Juli</option>
                                        <option value="8">Agustus</option>
                                        <option value="9">September</option>
                                        <option value="10">Oktober</option>
                                        <option value="11">November</option>
                                        <option value="12">Desember</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Tahun</label>
                                    <select id="filterTahun" onchange="loadJadwalPiket()" class="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                                        <option value="">Pilih Tahun</option>
                                        @php
                                            $currentYear = date('Y');
                                            $startYear = $currentYear - 2; // 2 tahun ke belakang
                                            $endYear = $currentYear + 5; // 5 tahun ke depan
                                        @endphp
                                        @for($year = $startYear; $year <= $endYear; $year++)
                                            <option value="{{ $year }}" {{ $year == $currentYear ? 'selected' : '' }}>{{ $year }}</option>
                                        @endfor
                                    </select>
                                </div>
                            </div>
                            
                            <div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
                                <div class="overflow-x-auto">
                                    <table id="jadwalPiketTable" class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                                        <thead class="bg-gray-50 dark:bg-gray-700">
                                            <tr>
                                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Tanggal</th>
                                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Hari</th>
                                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Petugas</th>
                                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Status</th>
                                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Keterangan</th>
                                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Aksi</th>
                                            </tr>
                                        </thead>
                                        <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                                            <tr>
                                                <td colspan="6" class="px-6 py-4 text-center text-gray-500 dark:text-gray-400">
                                                    <i class="fas fa-calendar-alt fa-3x mb-3 text-gray-300 dark:text-gray-600"></i>
                                                    <p>Belum ada jadwal piket</p>
                                                    <p class="text-sm">Pilih bulan dan tahun, lalu klik "Buat Jadwal"</p>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <!-- Tab Daftar Hadir -->
                        <div id="content-absensi" class="tab-content hidden">
                            <div class="mb-4">
                                <h4 class="text-lg font-semibold text-gray-900 dark:text-white">Daftar Hadir Petugas</h4>
                            </div>

                            <!-- Filter Bulan dan Tahun -->
                            <div class="mb-4 flex flex-wrap gap-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Bulan</label>
                                    <select id="filterBulanHadir" onchange="loadDaftarHadir()" class="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                                        <option value="">Pilih Bulan</option>
                                        <option value="1">Januari</option>
                                        <option value="2">Februari</option>
                                        <option value="3">Maret</option>
                                        <option value="4">April</option>
                                        <option value="5">Mei</option>
                                        <option value="6">Juni</option>
                                        <option value="7">Juli</option>
                                        <option value="8">Agustus</option>
                                        <option value="9">September</option>
                                        <option value="10">Oktober</option>
                                        <option value="11">November</option>
                                        <option value="12" selected>Desember</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Tahun</label>
                                    <select id="filterTahunHadir" onchange="loadDaftarHadir()" class="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                                        <option value="">Pilih Tahun</option>
                                        @php
                                            $currentYear = date('Y');
                                            $startYear = $currentYear - 2; // 2 tahun ke belakang
                                            $endYear = $currentYear + 5; // 5 tahun ke depan
                                        @endphp
                                        @for($year = $startYear; $year <= $endYear; $year++)
                                            <option value="{{ $year }}" {{ $year == $currentYear ? 'selected' : '' }}>{{ $year }}</option>
                                        @endfor
                                    </select>
                                </div>
                            </div>
                            
                            <div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
                                <div class="overflow-x-auto">
                                    <table id="daftarHadirTable" class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                                        <thead class="bg-gray-50 dark:bg-gray-700">
                                            <tr>
                                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Tanggal</th>
                                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Hari</th>
                                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Petugas</th>
                                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Kehadiran</th>
                                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Aksi</th>
                                            </tr>
                                        </thead>
                                        <tbody id="daftarHadirTableBody" class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                                            <tr>
                                                <td colspan="5" class="px-6 py-4 text-center text-gray-500 dark:text-gray-400">
                                                    <i class="fas fa-clipboard-check fa-3x mb-3 text-gray-300 dark:text-gray-600"></i>
                                                    <p>Pilih bulan dan tahun untuk melihat daftar hadir</p>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <!-- Tab Laporan Kejadian -->
                        <div id="content-laporan" class="tab-content hidden">
                            <div class="mb-4 flex justify-between items-center">
                                <h4 class="text-lg font-semibold text-gray-900 dark:text-white">Laporan Kejadian Keamanan</h4>
                                <button id="buatLaporanBtn" class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 transition-colors duration-200">
                                    <i class="fas fa-plus mr-2"></i>Buat Laporan
                                </button>
                            </div>

                            <!-- Filter dan Pencarian -->
                            <div class="mb-4 grid grid-cols-1 md:grid-cols-3 gap-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Dari Tanggal</label>
                                    <input type="date" id="tanggalDari" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Sampai Tanggal</label>
                                    <input type="date" id="tanggalSampai" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                                </div>
                                <div class="flex items-end space-x-2">
                                    <button id="filterLaporanBtn" class="flex-1 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200">
                                        <i class="fas fa-search mr-2"></i>Filter
                                    </button>
                                    <button id="resetFilterBtn" class="px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 transition-colors duration-200">
                                        <i class="fas fa-undo mr-2"></i>Reset
                                    </button>
                                </div>
                            </div>

                            <!-- Statistik Singkat -->
                            <div class="mb-6">
                                <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 max-w-sm">
                                    <div class="flex items-center">
                                        <div class="flex-shrink-0">
                                            <i class="fas fa-exclamation-circle text-2xl text-red-600 dark:text-red-400"></i>
                                        </div>
                                        <div class="ml-3">
                                            <p class="text-sm font-medium text-red-800 dark:text-red-200">Total Laporan</p>
                                            <p class="text-2xl font-bold text-red-900 dark:text-red-100">{{ $totalLaporan }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
                                <div class="overflow-x-auto">
                                    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700" id="laporanKejadianTable">
                                        <thead class="bg-gray-50 dark:bg-gray-700">
                                            <tr>
                                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">No</th>
                                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Tanggal</th>
                                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Waktu</th>
                                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Kegiatan</th>
                                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Kejadian</th>
                                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Pelapor</th>
                                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Keterangan</th>
                                            </tr>
                                        </thead>
                                        <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700" id="laporanKejadianTableBody">
                                            @if($laporanKejadian->count() > 0)
                                                @foreach($laporanKejadian as $index => $laporan)
                                                <tr>
                                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{{ $index + 1 }}</td>
                                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{{ \Carbon\Carbon::parse($laporan->tanggal)->format('d/m/Y') }}</td>
                                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{{ \Carbon\Carbon::parse($laporan->waktu)->format('H:i') }}</td>
                                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{{ $laporan->kegiatan }}</td>
                                                    <td class="px-6 py-4 text-sm text-gray-900 dark:text-gray-100">
                                                        <div class="max-w-xs truncate" title="{{ $laporan->kejadian }}">{{ $laporan->kejadian }}</div>
                                                    </td>
                                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{{ $laporan->user->name ?? 'N/A' }}</td>
                                                    <td class="px-6 py-4 text-sm text-gray-900 dark:text-gray-100">
                                                        <div class="max-w-xs truncate" title="{{ $laporan->keterangan }}">{{ $laporan->keterangan ?? '-' }}</div>
                                                    </td>
                                                </tr>
                                                @endforeach
                                            @else
                                            <tr>
                                                <td colspan="7" class="px-6 py-4 text-center text-gray-500 dark:text-gray-400">
                                                    <i class="fas fa-exclamation-triangle fa-3x mb-3 text-gray-300 dark:text-gray-600"></i>
                                                    <p>Belum ada laporan kejadian</p>
                                                    <p class="text-sm">Klik tombol "Buat Laporan" untuk menambah laporan kejadian</p>
                                                </td>
                                            </tr>
                                            @endif
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

    <!-- Modal Edit Kehadiran -->
    <div id="editKehadiranModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden z-50">
        <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-gray-800">
            <div class="mt-3">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-medium text-gray-900 dark:text-white">Edit Daftar Kehadiran</h3>
                    <button onclick="closeEditKehadiranModal()" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                
                <form id="editKehadiranForm">
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Tanggal</label>
                        <input type="text" id="editTanggal" readonly class="w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-100 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                    </div>
                    
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Petugas</label>
                        <input type="text" id="editPetugas" readonly class="w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-100 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                    </div>
                    
                    <div class="mb-6">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Status Kehadiran</label>
                        <select id="editStatusKehadiran" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                            <option value="">Pilih Status</option>
                            <option value="hadir">Hadir</option>
                            <option value="absen">Absen</option>
                        </select>
                    </div>
                    
                    <div class="flex justify-end space-x-3">
                        <button type="button" onclick="closeEditKehadiranModal()" class="px-4 py-2 bg-gray-300 text-gray-700 rounded-md hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-500 transition-colors duration-200">
                            Batal
                        </button>
                        <button type="button" onclick="updateKehadiran()" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200">
                            <i class="fas fa-save mr-2"></i>Update
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Modal Laporan Kejadian -->
    <div id="laporanKejadianModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden z-50">
        <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-3/4 lg:w-1/2 shadow-lg rounded-md bg-white dark:bg-gray-800">
            <div class="mt-3">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-medium text-gray-900 dark:text-white">
                        <i class="fas fa-file-alt mr-2 text-red-600"></i>Buat Laporan Kejadian
                    </h3>
                    <button onclick="closeLaporanKejadianModal()" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                
                <form id="laporanKejadianForm">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Tanggal <span class="text-red-500">*</span></label>
                            <input type="date" id="tanggalKejadian" name="tanggal" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Waktu <span class="text-red-500">*</span></label>
                            <input type="time" id="waktuKejadian" name="waktu" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                        </div>
                    </div>
                    
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Kegiatan <span class="text-red-500">*</span></label>
                        <input type="text" id="kegiatanKejadian" name="kegiatan" required placeholder="Contoh: siskamling" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                        <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Contoh: siskamling, patroli, ronda malam</p>
                    </div>
                    
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Kejadian <span class="text-red-500">*</span></label>
                        <textarea id="kejadianKejadian" name="kejadian" required rows="4" placeholder="Deskripsi kejadian yang terjadi..." class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"></textarea>
                    </div>
                    
                    <div class="mb-6">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Keterangan</label>
                        <textarea id="keteranganKejadian" name="keterangan" rows="3" placeholder="Keterangan tambahan (opsional)..." class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"></textarea>
                    </div>
                    
                    <div class="flex justify-end space-x-3">
                        <button type="button" onclick="closeLaporanKejadianModal()" class="px-4 py-2 bg-gray-300 text-gray-700 rounded-md hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-500 transition-colors duration-200">
                            Batal
                        </button>
                        <button type="submit" class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 transition-colors duration-200">
                            <i class="fas fa-save mr-2"></i>Simpan Laporan
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Modal Tambah Petugas -->
<div id="tambahPetugasModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden z-50">
    <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-3/4 lg:w-1/2 shadow-lg rounded-md bg-white dark:bg-gray-800">
        <div class="mt-3">
            <!-- Modal Header -->
            <div class="flex justify-between items-center pb-4 border-b border-gray-200 dark:border-gray-700">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                    <i class="fas fa-user-plus mr-2 text-blue-600"></i>Tambah Petugas Keamanan
                </h3>
                <button onclick="closeTambahPetugasModal()" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
                    <i class="fas fa-times text-xl"></i>
                </button>
            </div>

            <!-- Modal Body -->
            <div class="py-4">
                <form id="tambahPetugasForm">
                    <!-- Status Petugas -->
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            Status Petugas <span class="text-red-500">*</span>
                        </label>
                        <select id="statusPetugas" onchange="toggleFormFields()" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white" required>
                            <option value="">Pilih Status Petugas</option>
                            <option value="Petugas Khusus">Petugas Khusus/Satpam</option>
                            <option value="Warga">Warga</option>
                        </select>
                    </div>

                    <!-- Form untuk Petugas Khusus -->
                    <div id="formPetugasKhusus" class="hidden">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    Nama Lengkap <span class="text-red-500">*</span>
                                </label>
                                <input type="text" id="namaPetugasKhusus" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Masukkan nama lengkap">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    NIK <span class="text-red-500">*</span>
                                </label>
                                <input type="text" id="nikPetugasKhusus" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Masukkan NIK" maxlength="16">
                            </div>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    No. HP
                                </label>
                                <input type="text" id="hpPetugasKhusus" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Masukkan nomor HP">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    Alamat <span class="text-red-500">*</span>
                                </label>
                                <textarea id="alamatPetugasKhusus" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Masukkan alamat lengkap"></textarea>
                            </div>
                        </div>
                    </div>

                    <!-- Form untuk Warga -->
                    <div id="formWarga" class="hidden">
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Cari Warga
                            </label>
                            <div class="relative">
                                <input type="text" id="searchWarga" onkeyup="searchWargaFunction()" class="w-full px-3 py-2 pl-10 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Ketik nama warga untuk mencari...">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="fas fa-search text-gray-400"></i>
                                </div>
                            </div>
                        </div>

                        <!-- Daftar Warga -->
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Pilih Warga <span class="text-red-500">*</span>
                            </label>
                            <div id="daftarWarga" class="max-h-60 overflow-y-auto border border-gray-300 rounded-md p-3 dark:border-gray-600 dark:bg-gray-700">
                                <!-- Sample data warga -->
                                <div class="warga-item space-y-2">
                                    <label class="flex items-center p-2 hover:bg-gray-50 dark:hover:bg-gray-600 rounded cursor-pointer">
                                        <input type="checkbox" class="warga-checkbox mr-3 h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" value="1" data-nama="Ahmad Suryadi" data-nik="3201234567890001" data-alamat="Jl. Merdeka No. 123">
                                        <div class="flex-1">
                                            <div class="font-medium text-gray-900 dark:text-white">Ahmad Suryadi</div>
                                            <div class="text-sm text-gray-500 dark:text-gray-400">NIK: 3201234567890001</div>
                                            <div class="text-sm text-gray-500 dark:text-gray-400">Jl. Merdeka No. 123</div>
                                        </div>
                                    </label>
                                    <label class="flex items-center p-2 hover:bg-gray-50 dark:hover:bg-gray-600 rounded cursor-pointer">
                                        <input type="checkbox" class="warga-checkbox mr-3 h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" value="2" data-nama="Budi Santoso" data-nik="3201234567890002" data-alamat="Jl. Proklamasi No. 456">
                                        <div class="flex-1">
                                            <div class="font-medium text-gray-900 dark:text-white">Budi Santoso</div>
                                            <div class="text-sm text-gray-500 dark:text-gray-400">NIK: 3201234567890002</div>
                                            <div class="text-sm text-gray-500 dark:text-gray-400">Jl. Proklamasi No. 456</div>
                                        </div>
                                    </label>
                                    <label class="flex items-center p-2 hover:bg-gray-50 dark:hover:bg-gray-600 rounded cursor-pointer">
                                        <input type="checkbox" class="warga-checkbox mr-3 h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" value="3" data-nama="Citra Dewi" data-nik="3201234567890003" data-alamat="Jl. Pahlawan No. 789">
                                        <div class="flex-1">
                                            <div class="font-medium text-gray-900 dark:text-white">Citra Dewi</div>
                                            <div class="text-sm text-gray-500 dark:text-gray-400">NIK: 3201234567890003</div>
                                            <div class="text-sm text-gray-500 dark:text-gray-400">Jl. Pahlawan No. 789</div>
                                        </div>
                                    </label>
                                    <label class="flex items-center p-2 hover:bg-gray-50 dark:hover:bg-gray-600 rounded cursor-pointer">
                                        <input type="checkbox" class="warga-checkbox mr-3 h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" value="4" data-nama="Dedi Kurniawan" data-nik="3201234567890004" data-alamat="Jl. Kemerdekaan No. 321">
                                        <div class="flex-1">
                                            <div class="font-medium text-gray-900 dark:text-white">Dedi Kurniawan</div>
                                            <div class="text-sm text-gray-500 dark:text-gray-400">NIK: 3201234567890004</div>
                                            <div class="text-sm text-gray-500 dark:text-gray-400">Jl. Kemerdekaan No. 321</div>
                                        </div>
                                    </label>
                                    <label class="flex items-center p-2 hover:bg-gray-50 dark:hover:bg-gray-600 rounded cursor-pointer">
                                        <input type="checkbox" class="warga-checkbox mr-3 h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" value="5" data-nama="Eka Pratiwi" data-nik="3201234567890005" data-alamat="Jl. Diponegoro No. 654">
                                        <div class="flex-1">
                                            <div class="font-medium text-gray-900 dark:text-white">Eka Pratiwi</div>
                                            <div class="text-sm text-gray-500 dark:text-gray-400">NIK: 3201234567890005</div>
                                            <div class="text-sm text-gray-500 dark:text-gray-400">Jl. Diponegoro No. 654</div>
                                        </div>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <!-- Selected Warga Display -->
                        <div id="selectedWargaDisplay" class="hidden">
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Warga Terpilih
                            </label>
                            <div id="selectedWargaList" class="space-y-2"></div>
                        </div>
                    </div>
                </form>
            </div>

            <!-- Modal Footer -->
            <div class="flex justify-end space-x-3 pt-4 border-t border-gray-200 dark:border-gray-700">
                <button onclick="closeTambahPetugasModal()" class="px-4 py-2 bg-gray-300 text-gray-700 rounded-md hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-500 transition-colors duration-200">
                    <i class="fas fa-times mr-2"></i>Batal
                </button>
                <button onclick="simpanPetugas()" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200">
                    <i class="fas fa-save mr-2"></i>Simpan
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Jadwal Piket -->
<div id="jadwalPiketModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden z-50">
    <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-3/4 lg:w-1/2 shadow-lg rounded-md bg-white dark:bg-gray-800">
        <div class="mt-3">
            <!-- Modal Header -->
            <div class="flex justify-between items-center pb-4 border-b border-gray-200 dark:border-gray-700">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                    <i class="fas fa-calendar-plus mr-2 text-blue-600"></i>Buat Jadwal Piket
                </h3>
                <button onclick="closeJadwalPiketModal()" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
                    <i class="fas fa-times text-xl"></i>
                </button>
            </div>

            <!-- Modal Body -->
            <div class="py-4">
                <form id="jadwalPiketForm">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <!-- Bulan -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Bulan <span class="text-red-500">*</span>
                            </label>
                            <select id="modalBulan" onchange="generateTanggal()" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white" required>
                                <option value="">Pilih Bulan</option>
                                <option value="1">Januari</option>
                                <option value="2">Februari</option>
                                <option value="3">Maret</option>
                                <option value="4">April</option>
                                <option value="5">Mei</option>
                                <option value="6">Juni</option>
                                <option value="7">Juli</option>
                                <option value="8">Agustus</option>
                                <option value="9">September</option>
                                <option value="10">Oktober</option>
                                <option value="11">November</option>
                                <option value="12">Desember</option>
                            </select>
                        </div>

                        <!-- Tahun -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Tahun <span class="text-red-500">*</span>
                            </label>
                            <select id="modalTahun" onchange="generateTanggal()" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white" required>
                                <option value="">Pilih Tahun</option>
                                @php
                                    $currentYear = date('Y');
                                    $startYear = $currentYear - 2; // 2 tahun ke belakang
                                    $endYear = $currentYear + 5; // 5 tahun ke depan
                                @endphp
                                @for($year = $startYear; $year <= $endYear; $year++)
                                    <option value="{{ $year }}" {{ $year == $currentYear ? 'selected' : '' }}>{{ $year }}</option>
                                @endfor
                            </select>
                        </div>
                    </div>

                    <!-- Petugas -->
                    <div class="mt-4">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            Petugas <span class="text-red-500">*</span>
                        </label>
                        <select id="modalPetugas" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white" required>
                            <option value="">Pilih Petugas</option>
                        </select>
                    </div>

                    <!-- Tanggal -->
                    <div class="mt-4">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            Tanggal Piket <span class="text-red-500">*</span>
                        </label>
                        <div id="tanggalContainer" class="grid grid-cols-7 gap-2 max-h-60 overflow-y-auto border border-gray-300 rounded-md p-3 dark:border-gray-600 dark:bg-gray-700">
                            <div class="text-center text-gray-500 dark:text-gray-400 col-span-7 py-4">
                                Pilih bulan dan tahun terlebih dahulu
                            </div>
                        </div>
                    </div>

                    <!-- Keterangan -->
                    <div class="mt-4">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            Keterangan
                        </label>
                        <textarea id="modalKeterangan" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Masukkan keterangan (opsional)"></textarea>
                    </div>
                </form>
            </div>

            <!-- Modal Footer -->
            <div class="flex justify-end space-x-3 pt-4 border-t border-gray-200 dark:border-gray-700">
                <button onclick="closeJadwalPiketModal()" class="px-4 py-2 bg-gray-300 text-gray-700 rounded-md hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-500 transition-colors duration-200 dark:bg-gray-600 dark:text-gray-300 dark:hover:bg-gray-700">
                    <i class="fas fa-times mr-2"></i>Batal
                </button>
                <button onclick="simpanJadwalPiket()" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200">
                    <i class="fas fa-save mr-2"></i>Simpan
                </button>
            </div>
        </div>
    </div>
</div>

<style>
/* Tab Styling */
.tab-button {
    border-bottom-color: transparent;
    color: #6b7280; /* gray-500 */
}

.tab-button:hover {
    color: #374151; /* gray-700 */
    border-bottom-color: #d1d5db; /* gray-300 */
}

.tab-button.active {
    color: #2563eb; /* blue-600 */
    border-bottom-color: #2563eb; /* blue-600 */
}

/* Dark mode tab styling */
.dark .tab-button {
    color: #9ca3af; /* gray-400 */
}

.dark .tab-button:hover {
    color: #d1d5db; /* gray-300 */
    border-bottom-color: #4b5563; /* gray-600 */
}

.dark .tab-button.active {
    color: #3b82f6; /* blue-500 */
    border-bottom-color: #3b82f6; /* blue-500 */
}

.tab-content {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
</style>

<script>
function switchTab(tabName) {
    // Hide all tab contents
    const tabContents = document.querySelectorAll('.tab-content');
    tabContents.forEach(content => {
        content.classList.add('hidden');
    });
    
    // Remove active class from all tab buttons
    const tabButtons = document.querySelectorAll('.tab-button');
    tabButtons.forEach(button => {
        button.classList.remove('active');
    });
    
    // Show selected tab content
    document.getElementById('content-' + tabName).classList.remove('hidden');
    
    // Add active class to selected tab button
    document.getElementById('tab-' + tabName).classList.add('active');
}

// Modal functions
function openTambahPetugasModal() {
    document.getElementById('tambahPetugasModal').classList.remove('hidden');
    document.body.style.overflow = 'hidden';
}

function closeTambahPetugasModal() {
    document.getElementById('tambahPetugasModal').classList.add('hidden');
    document.body.style.overflow = 'auto';
    resetForm();
}

function resetForm() {
    document.getElementById('tambahPetugasForm').reset();
    document.getElementById('formPetugasKhusus').classList.add('hidden');
    document.getElementById('formWarga').classList.add('hidden');
    document.getElementById('selectedWargaDisplay').classList.add('hidden');
    document.getElementById('selectedWargaList').innerHTML = '';
    selectedWargaMap.clear();
}

function toggleFormFields() {
    const statusPetugas = document.getElementById('statusPetugas').value;
    const formPetugasKhusus = document.getElementById('formPetugasKhusus');
    const formWarga = document.getElementById('formWarga');
    
    // Hide both forms first
    formPetugasKhusus.classList.add('hidden');
    formWarga.classList.add('hidden');
    
    // Show appropriate form based on selection
    if (statusPetugas === 'Petugas Khusus') {
        formPetugasKhusus.classList.remove('hidden');
    } else if (statusPetugas === 'Warga') {
        formWarga.classList.remove('hidden');
        loadWargaData(); // Load real data from API
    }
}

// Global variable to store warga data
let allWargaData = [];
// Persist selected warga across searches
let selectedWargaMap = new Map();

function loadWargaData(search = '') {
    const wargaList = document.getElementById('daftarWarga');
    wargaList.innerHTML = '<div class="text-center py-4 text-gray-500 dark:text-gray-400">Memuat data warga...</div>';
    
    fetch(`/petugas-keamanan/warga?search=${encodeURIComponent(search)}`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                allWargaData = data.data;
                displayWargaList(data.data);
            } else {
                wargaList.innerHTML = '<div class="text-center py-4 text-red-500">Gagal memuat data warga</div>';
            }
        })
        .catch(error => {
            console.error('Error:', error);
            wargaList.innerHTML = '<div class="text-center py-4 text-red-500">Terjadi kesalahan saat memuat data</div>';
        });
}

function displayWargaList(wargaData) {
    const wargaList = document.getElementById('daftarWarga');
    
    if (wargaData.length === 0) {
        wargaList.innerHTML = '<div class="text-center py-4 text-gray-500 dark:text-gray-400">Tidak ada data warga ditemukan</div>';
        return;
    }
    
    wargaList.innerHTML = '';
    
    wargaData.forEach(warga => {
        const wargaItem = document.createElement('label');
        wargaItem.className = 'flex items-center p-3 border border-gray-200 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer';
        wargaItem.innerHTML = `
            <input type="checkbox" value="${warga.id}" class="warga-checkbox mr-3 h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
                   data-nama="${warga.nama_lengkap}" data-nik="${warga.nik}" data-jenis-kelamin="${warga.jenis_kelamin}">
            <div class="flex-1">
                <div class="font-medium text-gray-900 dark:text-white">${warga.nama_lengkap}</div>
                <div class="text-sm text-gray-500 dark:text-gray-400">NIK: ${warga.nik}</div>
                <div class="text-sm text-gray-500 dark:text-gray-400">Jenis Kelamin: ${warga.jenis_kelamin}</div>
            </div>
        `;
        
        // Add event listener for checkbox change
        const checkbox = wargaItem.querySelector('.warga-checkbox');
        checkbox.checked = selectedWargaMap.has(String(warga.id));
        checkbox.addEventListener('change', onWargaCheckboxChange);
        
        wargaList.appendChild(wargaItem);
    });
}

function searchWargaFunction() {
    const searchInput = document.getElementById('searchWarga');
    const searchTerm = searchInput.value.trim();
    
    // Debounce search to avoid too many API calls
    clearTimeout(window.searchTimeout);
    window.searchTimeout = setTimeout(() => {
        loadWargaData(searchTerm);
    }, 300);
}

function onWargaCheckboxChange(e) {
    const checkbox = e.target;
    const id = String(checkbox.value);
    if (checkbox.checked) {
        selectedWargaMap.set(id, {
            id,
            nama: checkbox.getAttribute('data-nama') || '',
            nik: checkbox.getAttribute('data-nik') || '',
            alamat: checkbox.getAttribute('data-alamat') || '',
            jenis_kelamin: checkbox.getAttribute('data-jenis-kelamin') || ''
        });
    } else {
        selectedWargaMap.delete(id);
    }
    updateSelectedWarga();
}

function updateSelectedWarga() {
    const selectedDisplay = document.getElementById('selectedWargaDisplay');
    const selectedList = document.getElementById('selectedWargaList');
    
    selectedList.innerHTML = '';
    
    if (selectedWargaMap.size > 0) {
        selectedDisplay.classList.remove('hidden');
        
        selectedWargaMap.forEach((data, id) => {
            const selectedItem = document.createElement('div');
            selectedItem.className = 'flex items-center justify-between p-2 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded';
            selectedItem.innerHTML = `
                <div>
                    <div class="font-medium text-gray-900 dark:text-white">${data.nama}</div>
                    ${data.nik ? `<div class="text-sm text-gray-500 dark:text-gray-400">NIK: ${data.nik}</div>` : ''}
                    ${data.alamat ? `<div class="text-sm text-gray-500 dark:text-gray-400">${data.alamat}</div>` : ''}
                </div>
                <button onclick="removeSelectedWarga('${id}')" class="text-red-500 hover:text-red-700">
                    <i class="fas fa-times"></i>
                </button>
            `;
            selectedList.appendChild(selectedItem);
        });
    } else {
        selectedDisplay.classList.add('hidden');
    }
}

function removeSelectedWarga(value) {
    const id = String(value);
    selectedWargaMap.delete(id);
    const checkbox = document.querySelector(`.warga-checkbox[value="${id}"]`);
    if (checkbox) {
        checkbox.checked = false;
    }
    updateSelectedWarga();
}

function simpanPetugas() {
    const statusPetugas = document.getElementById('statusPetugas').value;
    
    if (!statusPetugas) {
        alert('Silakan pilih status petugas terlebih dahulu');
        return;
    }
    
    // Show loading state
    const simpanBtn = document.querySelector('#tambahPetugasModal .bg-blue-600');
    const originalText = simpanBtn.textContent;
    simpanBtn.textContent = 'Menyimpan...';
    simpanBtn.disabled = true;
    
    let formData = new FormData();
    formData.append('status_petugas', statusPetugas);
    formData.append('_token', document.querySelector('meta[name="csrf-token"]').getAttribute('content'));
    
    if (statusPetugas === 'Petugas Khusus') {
        // Validasi form petugas khusus
        const nama = document.getElementById('namaPetugasKhusus').value.trim();
        const nik = document.getElementById('nikPetugasKhusus').value.trim();
        const noHp = document.getElementById('hpPetugasKhusus').value.trim();
        const alamat = document.getElementById('alamatPetugasKhusus').value.trim();
        
        if (!nama || !nik || !alamat) {
            alert('Nama, NIK, dan Alamat wajib diisi untuk petugas khusus');
            resetSimpanButton(simpanBtn, originalText);
            return;
        }
        
        // Validasi NIK
        if (nik.length !== 16) {
            alert('NIK harus terdiri dari 16 digit');
            resetSimpanButton(simpanBtn, originalText);
            return;
        }
        
        formData.append('nama_lengkap', nama);
        formData.append('nik', nik);
        formData.append('no_hp', noHp);
        formData.append('alamat', alamat);
        formData.append('jenis_kelamin', 'Laki-laki'); // Default value, bisa ditambah field jika diperlukan
        
    } else if (statusPetugas === 'Warga') {
        const selectedIds = Array.from(selectedWargaMap.keys());
        
        if (selectedIds.length === 0) {
            alert('Silakan pilih minimal satu warga');
            resetSimpanButton(simpanBtn, originalText);
            return;
        }
        
        selectedIds.forEach((id, index) => {
            formData.append(`warga_ids[${index}]`, id);
        });
    }
    
    // Send AJAX request
    fetch('/petugas-keamanan', {
        method: 'POST',
        body: formData,
        headers: {
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert(data.message);
            
            // Reset form dan tutup modal
            resetForm();
            closeTambahPetugasModal();
            
            // Refresh tabel petugas
            refreshPetugasTable();
            
        } else {
            alert(data.message || 'Terjadi kesalahan saat menyimpan data');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Terjadi kesalahan saat menyimpan data');
    })
    .finally(() => {
        resetSimpanButton(simpanBtn, originalText);
    });
}

function resetSimpanButton(button, originalText) {
    button.textContent = originalText;
    button.disabled = false;
}

function refreshPetugasTable() {
    // Refresh the petugas table without page reload
    fetch('/jadwal-piket-keamanan/petugas')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                updatePetugasTableContent(data.data, data.is_read_only);
                // Hide/show add button based on read-only status
                toggleAddPetugasButton(data.is_read_only);
            }
        })
        .catch(error => {
            console.error('Error refreshing table:', error);
        });
}

function updatePetugasTableContent(petugasData, isReadOnly = false) {
    // Find the table body - adjust selector based on your table structure
    const tableBody = document.querySelector('#petugasTable tbody') || 
                     document.querySelector('.table tbody') ||
                     document.querySelector('tbody');
    
    if (!tableBody) {
        console.error('Table body not found');
        return;
    }
    
    // Clear existing rows
    tableBody.innerHTML = '';
    
    if (petugasData.length === 0) {
        const emptyMessage = isReadOnly 
            ? '<p>Belum ada data petugas keamanan</p>'
            : '<p>Belum ada data petugas keamanan</p><p class="text-sm">Klik tombol "Tambah Petugas" untuk menambah data</p>';
        
        tableBody.innerHTML = `
            <tr>
                <td colspan="7" class="px-6 py-4 text-center text-gray-500 dark:text-gray-400">
                    <i class="fas fa-users fa-3x mb-3 text-gray-300 dark:text-gray-600"></i>
                    ${emptyMessage}
                </td>
            </tr>
        `;
        return;
    }
    
    // Add new rows
    petugasData.forEach((petugas, index) => {
        const row = document.createElement('tr');
        row.className = 'bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600';
        
        const actionColumn = isReadOnly 
            ? '<td class="px-6 py-4 text-gray-500 dark:text-gray-400 italic">Hanya Lihat</td>'
            : `<td class="px-6 py-4">
                <button type="button" onclick="hapusPetugas(${petugas.id})" class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">
                    <i class="fas fa-trash mr-1"></i>Hapus
                </button>
            </td>`;
        
        row.innerHTML = `
            <td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                ${index + 1}
            </td>
            <td class="px-6 py-4 text-gray-900 dark:text-white">
                ${petugas.nama_lengkap}
            </td>
            <td class="px-6 py-4 text-gray-900 dark:text-white">
                ${petugas.nik}
            </td>
            <td class="px-6 py-4 text-gray-900 dark:text-white">
                ${petugas.no_hp || '-'}
            </td>
            <td class="px-6 py-4 text-gray-900 dark:text-white">
                ${petugas.alamat || '-'}
            </td>
            <td class="px-6 py-4">
                <span class="px-2 py-1 text-xs font-medium rounded-full ${
                    petugas.status_petugas === 'Petugas Khusus' 
                        ? 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300'
                        : 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300'
                }">
                    ${petugas.status_petugas === 'Petugas Khusus' ? 'Petugas Khusus' : 'Warga'}
                </span>
            </td>
            ${actionColumn}
        `;
        
        tableBody.appendChild(row);
    });
}

function hapusPetugas(id) {
    if (!confirm('Apakah Anda yakin ingin menghapus petugas ini?')) {
        return;
    }
    
    fetch(`/petugas-keamanan/${id}`, {
        method: 'DELETE',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert(data.message);
            refreshPetugasTable();
        } else {
            alert(data.message || 'Terjadi kesalahan saat menghapus data');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Terjadi kesalahan saat menghapus data');
    });
}

// Jadwal Piket Functions
function openJadwalPiketModal() {
    document.getElementById('jadwalPiketModal').classList.remove('hidden');
    document.body.style.overflow = 'hidden';
    loadPetugasKeamanan();
}

function closeJadwalPiketModal() {
    document.getElementById('jadwalPiketModal').classList.add('hidden');
    document.body.style.overflow = 'auto';
    resetJadwalPiketForm();
}

function resetJadwalPiketForm() {
    document.getElementById('jadwalPiketForm').reset();
    document.getElementById('tanggalContainer').innerHTML = `
        <div class="text-center text-gray-500 dark:text-gray-400 col-span-7 py-4">
            Pilih bulan dan tahun terlebih dahulu
        </div>
    `;
}

function loadPetugasKeamanan() {
    const petugasSelect = document.getElementById('modalPetugas');
    petugasSelect.innerHTML = '<option value="">Memuat data petugas...</option>';
    
    fetch('/jadwal-piket-keamanan/petugas')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                petugasSelect.innerHTML = '<option value="">Pilih Petugas</option>';
                data.data.forEach(petugas => {
                    const option = document.createElement('option');
                    option.value = petugas.id;
                    option.textContent = petugas.nama_lengkap;
                    petugasSelect.appendChild(option);
                });
            } else {
                petugasSelect.innerHTML = '<option value="">Gagal memuat data petugas</option>';
            }
        })
        .catch(error => {
            console.error('Error:', error);
            petugasSelect.innerHTML = '<option value="">Terjadi kesalahan</option>';
        });
}

function generateTanggal() {
    const bulan = document.getElementById('modalBulan').value;
    const tahun = document.getElementById('modalTahun').value;
    const container = document.getElementById('tanggalContainer');
    
    if (!bulan || !tahun) {
        container.innerHTML = `
            <div class="text-center text-gray-500 dark:text-gray-400 col-span-7 py-4">
                Pilih bulan dan tahun terlebih dahulu
            </div>
        `;
        return;
    }
    
    // Get number of days in the month
    const daysInMonth = new Date(tahun, bulan, 0).getDate();
    
    container.innerHTML = '';
    
    // Add day headers
    const dayHeaders = ['Min', 'Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab'];
    dayHeaders.forEach(day => {
        const header = document.createElement('div');
        header.className = 'text-center text-xs font-medium text-gray-500 dark:text-gray-400 py-2';
        header.textContent = day;
        container.appendChild(header);
    });
    
    // Get first day of the month (0 = Sunday, 1 = Monday, etc.)
    const firstDay = new Date(tahun, bulan - 1, 1).getDay();
    
    // Add empty cells for days before the first day of the month
    for (let i = 0; i < firstDay; i++) {
        const emptyCell = document.createElement('div');
        container.appendChild(emptyCell);
    }
    
    // Add date buttons
    for (let day = 1; day <= daysInMonth; day++) {
        const dateButton = document.createElement('button');
        dateButton.type = 'button';
        dateButton.className = 'p-2 text-sm border border-gray-300 dark:border-gray-600 rounded hover:bg-blue-50 dark:hover:bg-blue-900 focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900 dark:text-white';
        dateButton.textContent = day;
        dateButton.onclick = () => toggleTanggal(dateButton, day);
        container.appendChild(dateButton);
    }
}

function toggleTanggal(button, day) {
    if (button.classList.contains('bg-blue-600')) {
        // Deselect
        button.classList.remove('bg-blue-600', 'text-white');
        button.classList.add('text-gray-900', 'dark:text-white');
    } else {
        // Select
        button.classList.add('bg-blue-600', 'text-white');
        button.classList.remove('text-gray-900', 'dark:text-white');
    }
}

function simpanJadwalPiket() {
    const bulan = document.getElementById('modalBulan').value;
    const tahun = document.getElementById('modalTahun').value;
    const petugasId = document.getElementById('modalPetugas').value;
    const keterangan = document.getElementById('modalKeterangan').value;
    
    // Get selected dates
    const selectedDates = [];
    const selectedButtons = document.querySelectorAll('#tanggalContainer .bg-blue-600');
    selectedButtons.forEach(button => {
        selectedDates.push(parseInt(button.textContent));
    });
    
    // Validation
    if (!bulan || !tahun || !petugasId) {
        alert('Bulan, tahun, dan petugas wajib dipilih');
        return;
    }
    
    if (selectedDates.length === 0) {
        alert('Pilih minimal satu tanggal piket');
        return;
    }
    
    // Show loading state
    const simpanBtn = document.querySelector('#jadwalPiketModal .bg-blue-600');
    const originalText = simpanBtn.textContent;
    simpanBtn.textContent = 'Menyimpan...';
    simpanBtn.disabled = true;
    
    // Prepare form data
    const formData = new FormData();
    formData.append('bulan', bulan);
    formData.append('tahun', tahun);
    formData.append('petugas_keamanan_id', petugasId);
    formData.append('keterangan', keterangan);
    formData.append('_token', document.querySelector('meta[name="csrf-token"]').getAttribute('content'));
    
    // Add selected dates with proper date format
    selectedDates.forEach((date, index) => {
        // Format: YYYY-MM-DD
        const formattedDate = `${tahun}-${bulan.toString().padStart(2, '0')}-${date.toString().padStart(2, '0')}`;
        formData.append(`tanggal_piket[${index}]`, formattedDate);
    });
    
    // Send AJAX request
    fetch('/jadwal-piket-keamanan', {
        method: 'POST',
        body: formData,
        headers: {
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert(data.message);
            closeJadwalPiketModal();
            loadJadwalPiket(); // Refresh the jadwal piket table
        } else {
            alert(data.message || 'Terjadi kesalahan saat menyimpan jadwal');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Terjadi kesalahan saat menyimpan jadwal');
    })
    .finally(() => {
        simpanBtn.textContent = originalText;
        simpanBtn.disabled = false;
    });
}

function loadJadwalPiket() {
    const bulan = document.getElementById('filterBulan').value;
    const tahun = document.getElementById('filterTahun').value;
    
    let url = '/jadwal-piket-keamanan';
    const params = new URLSearchParams();
    
    if (bulan) params.append('bulan', bulan);
    if (tahun) params.append('tahun', tahun);
    
    if (params.toString()) {
        url += '?' + params.toString();
    }
    
    fetch(url)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                updateJadwalPiketTable(data.data, data.is_read_only);
                // Hide/show add button based on read-only status
                toggleAddJadwalButton(data.is_read_only);
            } else {
                console.error('Failed to load jadwal piket:', data.message);
            }
        })
        .catch(error => {
            console.error('Error loading jadwal piket:', error);
        });
}

function updateJadwalPiketTable(jadwalData, isReadOnly = false) {
    const tableBody = document.querySelector('#jadwalPiketTable tbody');
    
    if (!tableBody) {
        console.error('Jadwal piket table body not found');
        return;
    }
    
    tableBody.innerHTML = '';
    
    if (jadwalData.length === 0) {
        const emptyMessage = isReadOnly 
            ? '<p>Belum ada jadwal piket</p>'
            : '<p>Belum ada jadwal piket</p><p class="text-sm">Klik tombol "Buat Jadwal" untuk menambah jadwal</p>';
        
        tableBody.innerHTML = `
            <tr>
                <td colspan="6" class="px-6 py-4 text-center text-gray-500 dark:text-gray-400">
                    <i class="fas fa-calendar fa-3x mb-3 text-gray-300 dark:text-gray-600"></i>
                    ${emptyMessage}
                </td>
            </tr>
        `;
        return;
    }
    
    jadwalData.forEach((jadwal, index) => {
        const row = document.createElement('tr');
        row.className = 'bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600';
        
        const tanggalPiket = new Date(jadwal.tanggal_piket);
        const formattedDate = tanggalPiket.toLocaleDateString('id-ID', {
            day: '2-digit',
            month: '2-digit',
            year: 'numeric'
        });
        
        const formattedDay = tanggalPiket.toLocaleDateString('id-ID', {
            weekday: 'long'
        });
        
        const actionColumn = isReadOnly 
            ? '<td class="px-6 py-4 text-gray-500 dark:text-gray-400 italic">Hanya Lihat</td>'
            : `<td class="px-6 py-4">
                <button type="button" onclick="hapusJadwalPiket(${jadwal.id})" class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">
                    <i class="fas fa-trash mr-1"></i>Hapus
                </button>
            </td>`;
        
        row.innerHTML = `
            <td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                ${formattedDate}
            </td>
            <td class="px-6 py-4 text-gray-900 dark:text-white">
                ${formattedDay}
            </td>
            <td class="px-6 py-4 text-gray-900 dark:text-white">
                ${jadwal.petugas_keamanan.nama_lengkap}
            </td>
            <td class="px-6 py-4">
                <span class="px-2 py-1 text-xs font-medium rounded-full ${
                    jadwal.status === 'aktif' 
                        ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300'
                        : 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-300'
                }">
                    ${jadwal.status === 'aktif' ? 'Aktif' : 'Tidak Aktif'}
                </span>
            </td>
            <td class="px-6 py-4 text-gray-900 dark:text-white">
                ${jadwal.keterangan || '-'}
            </td>
            ${actionColumn}
        `;
        
        tableBody.appendChild(row);
    });
}

function hapusJadwalPiket(id) {
    if (!confirm('Apakah Anda yakin ingin menghapus jadwal piket ini?')) {
        return;
    }
    
    fetch(`/jadwal-piket-keamanan/${id}`, {
        method: 'DELETE',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert(data.message);
            loadJadwalPiket();
        } else {
            alert(data.message || 'Terjadi kesalahan saat menghapus jadwal');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Terjadi kesalahan saat menghapus jadwal');
    });
}

// Fungsi untuk Daftar Hadir
function loadDaftarHadir() {
    const bulan = document.getElementById('filterBulanHadir').value;
    const tahun = document.getElementById('filterTahunHadir').value;
    
    if (!bulan || !tahun) {
        document.getElementById('daftarHadirTableBody').innerHTML = `
            <tr>
                <td colspan="5" class="px-6 py-4 text-center text-gray-500 dark:text-gray-400">
                    <i class="fas fa-clipboard-check fa-3x mb-3 text-gray-300 dark:text-gray-600"></i>
                    <p>Pilih bulan dan tahun untuk melihat daftar hadir</p>
                </td>
            </tr>
        `;
        return;
    }
    
    // Show loading
    document.getElementById('daftarHadirTableBody').innerHTML = `
        <tr>
            <td colspan="5" class="px-6 py-4 text-center text-gray-500 dark:text-gray-400">
                <i class="fas fa-spinner fa-spin fa-2x mb-3"></i>
                <p>Memuat data...</p>
            </td>
        </tr>
    `;
    
    fetch(`/keamanan/daftar-hadir?bulan=${bulan}&tahun=${tahun}`, {
        method: 'GET',
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            displayDaftarHadir(data.data, data.is_read_only);
        } else {
            document.getElementById('daftarHadirTableBody').innerHTML = `
                <tr>
                    <td colspan="5" class="px-6 py-4 text-center text-gray-500 dark:text-gray-400">
                        <i class="fas fa-exclamation-triangle fa-2x mb-3 text-yellow-500"></i>
                        <p>${data.message || 'Gagal memuat data'}</p>
                    </td>
                </tr>
            `;
        }
    })
    .catch(error => {
        console.error('Error:', error);
        document.getElementById('daftarHadirTableBody').innerHTML = `
            <tr>
                <td colspan="5" class="px-6 py-4 text-center text-gray-500 dark:text-gray-400">
                    <i class="fas fa-exclamation-triangle fa-2x mb-3 text-red-500"></i>
                    <p>Terjadi kesalahan saat memuat data</p>
                </td>
            </tr>
        `;
    });
}

function displayDaftarHadir(data, isReadOnly = false) {
    const tbody = document.getElementById('daftarHadirTableBody');
    
    if (data.length === 0) {
        tbody.innerHTML = `
            <tr>
                <td colspan="5" class="px-6 py-4 text-center text-gray-500 dark:text-gray-400">
                    <i class="fas fa-calendar-times fa-3x mb-3 text-gray-300 dark:text-gray-600"></i>
                    <p>Tidak ada jadwal piket untuk bulan dan tahun yang dipilih</p>
                </td>
            </tr>
        `;
        return;
    }
    
    let html = '';
    data.forEach(item => {
        const tanggalFormatted = new Date(item.tanggal_piket).toLocaleDateString('id-ID', {
            day: '2-digit',
            month: '2-digit', 
            year: 'numeric'
        });
        
        const hariFormatted = new Date(item.tanggal_piket).toLocaleDateString('id-ID', {
            weekday: 'long'
        });
        
        let kehadiranBadge = '';
        let aksiButtons = '';
        
        if (item.kehadiran === 'hadir') {
            kehadiranBadge = '<span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100">Hadir</span>';
            aksiButtons = isReadOnly 
                ? '<span class="text-gray-500 dark:text-gray-400 italic text-xs">Hanya Lihat</span>'
                : `<button onclick="editKehadiran(${item.id}, '${item.tanggal_piket}', '${item.petugas_keamanan.nama_lengkap}', '${item.kehadiran}')" 
                         class="px-3 py-1 bg-blue-600 text-white text-xs rounded hover:bg-blue-700 transition-colors duration-200">
                     <i class="fas fa-edit mr-1"></i>Edit
                 </button>`;
        } else if (item.kehadiran === 'absen') {
             kehadiranBadge = '<span class="px-2 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100">Absen</span>';
             aksiButtons = isReadOnly 
                ? '<span class="text-gray-500 dark:text-gray-400 italic text-xs">Hanya Lihat</span>'
                : `<button onclick="editKehadiran(${item.id}, '${item.tanggal_piket}', '${item.petugas_keamanan.nama_lengkap}', '${item.kehadiran}')" 
                         class="px-3 py-1 bg-blue-600 text-white text-xs rounded hover:bg-blue-700 transition-colors duration-200">
                     <i class="fas fa-edit mr-1"></i>Edit
                 </button>`;
         } else {
             kehadiranBadge = '<span class="px-2 py-1 text-xs font-semibold rounded-full bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300">Belum Absen</span>';
             aksiButtons = isReadOnly 
                ? '<span class="text-gray-500 dark:text-gray-400 italic text-xs">Hanya Lihat</span>'
                : `<div class="flex items-center space-x-2">
                     <select id="kehadiran_${item.id}" class="px-2 py-1 text-xs border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                         <option value="">Pilih</option>
                         <option value="hadir">Hadir</option>
                         <option value="absen">Absen</option>
                     </select>
                     <button onclick="simpanKehadiran(${item.id})" 
                             class="px-3 py-1 bg-green-600 text-white text-xs rounded hover:bg-green-700 transition-colors duration-200">
                         <i class="fas fa-save mr-1"></i>Simpan
                     </button>
                     <button onclick="editKehadiran(${item.id}, '${item.tanggal_piket}', '${item.petugas_keamanan.nama_lengkap}', '')" 
                             class="px-3 py-1 bg-blue-600 text-white text-xs rounded hover:bg-blue-700 transition-colors duration-200">
                         <i class="fas fa-edit mr-1"></i>Edit
                     </button>
                 </div>`;
         }
        
        html += `
            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">${tanggalFormatted}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">${hariFormatted}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">${item.petugas_keamanan.nama_lengkap}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm">${kehadiranBadge}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm">${aksiButtons}</td>
            </tr>
        `;
    });
    
    tbody.innerHTML = html;
}

function simpanKehadiran(jadwalId) {
    const kehadiranSelect = document.getElementById(`kehadiran_${jadwalId}`);
    const kehadiran = kehadiranSelect.value;
    
    if (!kehadiran) {
        alert('Silakan pilih status kehadiran terlebih dahulu');
        return;
    }
    
    const formData = new FormData();
    formData.append('kehadiran', kehadiran);
    formData.append('_token', document.querySelector('meta[name="csrf-token"]').getAttribute('content'));
    
    fetch(`/keamanan/simpan-kehadiran/${jadwalId}`, {
        method: 'POST',
        body: formData,
        headers: {
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert(data.message);
            loadDaftarHadir(); // Reload data
            loadJadwalPiket(); // Refresh jadwal piket untuk update status
        } else {
            alert(data.message || 'Terjadi kesalahan saat menyimpan kehadiran');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Terjadi kesalahan saat menyimpan kehadiran');
    });
}

function editKehadiran(jadwalId, tanggal, petugas, kehadiran) {
    document.getElementById('editTanggal').value = new Date(tanggal).toLocaleDateString('id-ID', {
        day: '2-digit',
        month: '2-digit',
        year: 'numeric'
    });
    document.getElementById('editPetugas').value = petugas;
    document.getElementById('editStatusKehadiran').value = kehadiran;
    
    // Store jadwal ID for update
    document.getElementById('editKehadiranForm').dataset.jadwalId = jadwalId;
    
    document.getElementById('editKehadiranModal').classList.remove('hidden');
}

function closeEditKehadiranModal() {
    document.getElementById('editKehadiranModal').classList.add('hidden');
    document.getElementById('editKehadiranForm').reset();
    delete document.getElementById('editKehadiranForm').dataset.jadwalId;
}

function updateKehadiran() {
    const jadwalId = document.getElementById('editKehadiranForm').dataset.jadwalId;
    const kehadiran = document.getElementById('editStatusKehadiran').value;
    
    if (!kehadiran) {
        alert('Silakan pilih status kehadiran');
        return;
    }
    
    const formData = new FormData();
    formData.append('kehadiran', kehadiran);
    formData.append('_token', document.querySelector('meta[name="csrf-token"]').getAttribute('content'));
    
    fetch(`/keamanan/update-kehadiran/${jadwalId}`, {
        method: 'POST',
        body: formData,
        headers: {
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert(data.message);
            closeEditKehadiranModal();
            loadDaftarHadir(); // Reload data
            loadJadwalPiket(); // Refresh jadwal piket untuk update status
        } else {
            alert(data.message || 'Terjadi kesalahan saat mengupdate kehadiran');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Terjadi kesalahan saat mengupdate kehadiran');
    });
}

// Helper functions for read-only access
function toggleAddPetugasButton(isReadOnly) {
    const addButton = document.querySelector('button[onclick="openTambahPetugasModal()"]');
    if (addButton) {
        if (isReadOnly) {
            addButton.style.display = 'none';
        } else {
            addButton.style.display = 'inline-flex';
        }
    }
}

function toggleAddJadwalButton(isReadOnly) {
    const addButton = document.querySelector('button[onclick="openJadwalPiketModal()"]');
    if (addButton) {
        if (isReadOnly) {
            addButton.style.display = 'none';
        } else {
            addButton.style.display = 'inline-flex';
        }
    }
}

function toggleBuatLaporanButton(isReadOnly) {
    const buatLaporanBtn = document.getElementById('buatLaporanBtn');
    if (buatLaporanBtn) {
        if (isReadOnly) {
            buatLaporanBtn.style.display = 'none';
        } else {
            buatLaporanBtn.style.display = 'inline-flex';
        }
    }
}

// Fungsi untuk modal laporan kejadian
function openLaporanKejadianModal() {
    document.getElementById('laporanKejadianModal').classList.remove('hidden');
    // Set tanggal hari ini sebagai default
    const today = new Date().toISOString().split('T')[0];
    document.getElementById('tanggalKejadian').value = today;
    // Set waktu sekarang sebagai default
    const now = new Date();
    const timeString = now.toTimeString().slice(0, 5);
    document.getElementById('waktuKejadian').value = timeString;
}

function closeLaporanKejadianModal() {
    document.getElementById('laporanKejadianModal').classList.add('hidden');
    resetLaporanKejadianForm();
}

function resetLaporanKejadianForm() {
    document.getElementById('laporanKejadianForm').reset();
}

function simpanLaporanKejadian() {
    const form = document.getElementById('laporanKejadianForm');
    const formData = new FormData(form);
    
    // Validasi form
    if (!form.checkValidity()) {
        form.reportValidity();
        return;
    }
    
    // Kirim data ke server
    fetch('/keamanan/laporan-kejadian', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Accept': 'application/json',
        },
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('Laporan kejadian berhasil disimpan!');
            closeLaporanKejadianModal();
            // Refresh tabel laporan jika ada
            // refreshLaporanTable();
        } else {
            alert('Gagal menyimpan laporan: ' + (data.message || 'Terjadi kesalahan'));
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Terjadi kesalahan saat menyimpan laporan');
    });
}

// Function to filter laporan kejadian by date range
function filterLaporanKejadian() {
    const tanggalDari = document.getElementById('tanggalDari').value;
    const tanggalSampai = document.getElementById('tanggalSampai').value;
    
    if (!tanggalDari || !tanggalSampai) {
        alert('Silakan pilih tanggal dari dan sampai');
        return;
    }
    
    if (new Date(tanggalDari) > new Date(tanggalSampai)) {
        alert('Tanggal dari tidak boleh lebih besar dari tanggal sampai');
        return;
    }
    
    // Get all table rows
    const tableBody = document.getElementById('laporanKejadianTableBody');
    const rows = tableBody.querySelectorAll('tr');
    let visibleCount = 0;
    
    rows.forEach(row => {
        const tanggalCell = row.querySelector('td:nth-child(2)'); // Kolom tanggal
        if (tanggalCell) {
            const tanggalText = tanggalCell.textContent.trim();
            // Convert DD/MM/YYYY to YYYY-MM-DD for comparison
            const dateParts = tanggalText.split('/');
            if (dateParts.length === 3) {
                const tanggalRow = `${dateParts[2]}-${dateParts[1].padStart(2, '0')}-${dateParts[0].padStart(2, '0')}`;
                
                if (tanggalRow >= tanggalDari && tanggalRow <= tanggalSampai) {
                    row.style.display = '';
                    visibleCount++;
                } else {
                    row.style.display = 'none';
                }
            }
        }
    });
    
    // Show message if no data found
    if (visibleCount === 0) {
        const noDataRow = tableBody.querySelector('.no-data-row');
        if (!noDataRow) {
            const newRow = document.createElement('tr');
            newRow.className = 'no-data-row';
            newRow.innerHTML = `
                <td colspan="7" class="px-6 py-4 text-center text-gray-500 dark:text-gray-400">
                    Tidak ada laporan kejadian pada rentang tanggal yang dipilih
                </td>
            `;
            tableBody.appendChild(newRow);
        }
    } else {
        // Remove no data message if exists
        const noDataRow = tableBody.querySelector('.no-data-row');
        if (noDataRow) {
            noDataRow.remove();
        }
    }
 }
 
 // Function to reset laporan kejadian filter
 function resetFilterLaporanKejadian() {
     // Clear date inputs
     document.getElementById('tanggalDari').value = '';
     document.getElementById('tanggalSampai').value = '';
     
     // Show all table rows
     const tableBody = document.getElementById('laporanKejadianTableBody');
     const rows = tableBody.querySelectorAll('tr');
     
     rows.forEach(row => {
         if (!row.classList.contains('no-data-row')) {
             row.style.display = '';
         }
     });
     
     // Remove any filter no-data message
     const noDataRow = tableBody.querySelector('.no-data-row');
     if (noDataRow) {
         noDataRow.remove();
     }
 }
 
 // Add event listeners for warga checkboxes
document.addEventListener('DOMContentLoaded', function() {
    switchTab('petugas');
    
    // Detect read-only status based on user entity
    const userEntity = '{{ strtolower(auth()->user()->entity->name ?? "") }}';
    const userRole = '{{ strtolower(auth()->user()->role->name ?? "") }}';
    const isReadOnly = ['rw', 'kelurahan', 'kecamatan'].includes(userEntity) || 
                      ['rw', 'sekretaris_rw', 'bendahara_rw', 'kelurahan'].includes(userRole);
    
    // Hide Buat Laporan button for read-only users
    toggleBuatLaporanButton(isReadOnly);
    
    // Load initial petugas data with read-only detection
    refreshPetugasTable();
    
    // Load initial jadwal piket data with read-only detection
    loadJadwalPiket();
    
    // Add event listeners to warga checkboxes
    const wargaCheckboxes = document.querySelectorAll('.warga-checkbox');
    wargaCheckboxes.forEach(checkbox => {
        checkbox.addEventListener('change', onWargaCheckboxChange);
    });
    
    // Close modals when clicking outside
    document.getElementById('tambahPetugasModal').addEventListener('click', function(e) {
        if (e.target === this) {
            closeTambahPetugasModal();
        }
    });
    
    document.getElementById('jadwalPiketModal').addEventListener('click', function(e) {
        if (e.target === this) {
            closeJadwalPiketModal();
        }
    });
    
    document.getElementById('editKehadiranModal').addEventListener('click', function(e) {
        if (e.target === this) {
            closeEditKehadiranModal();
        }
    });
    
    // Event listener untuk modal laporan kejadian
    document.getElementById('laporanKejadianModal').addEventListener('click', function(e) {
        if (e.target === this) {
            closeLaporanKejadianModal();
        }
    });
    
    // Event listener untuk tombol Buat Laporan
    document.getElementById('buatLaporanBtn').addEventListener('click', function() {
        openLaporanKejadianModal();
    });
    
    // Event listener untuk form submission laporan kejadian
    document.getElementById('laporanKejadianForm').addEventListener('submit', function(e) {
        e.preventDefault();
        simpanLaporanKejadian();
    });
    
    // Event listener untuk filter laporan kejadian
    document.getElementById('filterLaporanBtn').addEventListener('click', function() {
        filterLaporanKejadian();
    });
    
    // Event listener untuk reset filter laporan kejadian
    document.getElementById('resetFilterBtn').addEventListener('click', function() {
        resetFilterLaporanKejadian();
    });
    
    // Load daftar hadir saat bulan dan tahun sudah dipilih
    const currentMonth = new Date().getMonth() + 1;
    document.getElementById('filterBulanHadir').value = currentMonth;
    loadDaftarHadir();
});
</script>
@endsection