@extends('layouts.admin')

@section('title', 'Pengaturan Jam Kerja (24 Jam & 4 Format Waktu)')

@section('content')
<div class="space-y-6">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-slate-900 tracking-tight">Pengaturan Jam Kerja</h1>
            <p class="text-xs text-slate-500 mt-1">Konfigurasi 4 format jam 24 jam (Awal Masuk, Akhir Masuk, Awal Pulang, Akhir Pulang), shift normal, paruh waktu, dan lintas hari</p>
        </div>
        <button onclick="document.getElementById('modalTambahJamKerja').classList.remove('hidden')" class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-primary-600 hover:bg-primary-700 text-white text-xs font-bold shadow-sm shadow-primary-500/30 transition-all">
            <i data-lucide="plus" class="w-4 h-4"></i>
            <span>Tambah Shift / Jam Kerja</span>
        </button>
    </div>

    <!-- Tabel Jam Kerja (Format 24 Jam & 4 Format Jam) -->
    <div class="rounded-2xl bg-white border border-slate-200/80 shadow-sm overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full min-w-[850px] text-left border-collapse">
                <thead>
                    <tr class="border-b border-slate-100 bg-slate-50/60 text-[11px] font-bold text-slate-400 uppercase tracking-wider">
                        <th class="py-3 px-4">Nama & Kode Shift</th>
                        <th class="py-3 px-4">Tipe & Sifat</th>
                        <th class="py-3 px-3 text-center bg-orange-50/60 border-l border-r border-orange-200/60 text-primary-800">Masuk Resmi (Acuan Denda)</th>
                        <th class="py-3 px-3 text-center bg-orange-50/30 border-r border-orange-100 text-slate-600">Rentang Masuk (Buka - Batas)</th>
                        <th class="py-3 px-3 text-center bg-blue-50/60 border-r border-blue-200/60 text-blue-800">Pulang Resmi (Acuan Cepat)</th>
                        <th class="py-3 px-3 text-center bg-blue-50/30 border-r border-blue-100 text-slate-600">Rentang Pulang (Buka - Batas)</th>
                        <th class="py-3 px-3 text-center bg-amber-50/60 border-r border-amber-200/60 text-amber-800">Istirahat (Mulai - Selesai)</th>
                        <th class="py-3 px-4 text-center">Durasi Kerja</th>
                        <th class="py-3 px-4 text-right">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 text-xs">
                    @forelse($jamKerjaList as $jk)
                    <tr class="hover:bg-slate-50/70 transition-colors">
                        <td class="py-3.5 px-4 font-bold text-slate-900">
                            <span class="block">{{ $jk->nama_jam_kerja }}</span>
                            <span class="text-[11px] font-mono text-slate-400">{{ $jk->kode_jam_kerja }}</span>
                        </td>
                        <td class="py-3.5 px-4">
                            <div class="flex flex-col gap-1 w-max">
                                <span class="px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider {{ $jk->tipe_kerja == 'paruh_waktu' ? 'bg-purple-50 text-purple-700 border border-purple-200' : 'bg-blue-50 text-blue-700 border border-blue-200' }}">
                                    {{ str_replace('_', ' ', $jk->tipe_kerja) }}
                                </span>
                                @if($jk->lintas_hari)
                                <span class="px-2 py-0.5 rounded-full text-[10px] font-bold bg-amber-50 text-amber-800 border border-amber-200 flex items-center gap-1">
                                    <i data-lucide="moon" class="w-3 h-3 text-amber-600"></i> Lintas Hari (24h)
                                </span>
                                @endif
                                @if($jk->batasi_absen)
                                <span class="px-2 py-0.5 rounded-full text-[10px] font-bold bg-rose-50 text-rose-700 border border-rose-200 flex items-center gap-1">
                                    <i data-lucide="clock-alert" class="w-3 h-3 text-rose-600"></i> Absen Dibatasi
                                </span>
                                @else
                                <span class="px-2 py-0.5 rounded-full text-[10px] font-bold bg-slate-100 text-slate-600 border border-slate-200 flex items-center gap-1">
                                    <i data-lucide="unlock" class="w-3 h-3 text-slate-400"></i> Fleksibel
                                </span>
                                @endif
                            </div>
                        </td>

                        <!-- 1. Masuk Resmi (Acuan Denda) -->
                        <td class="py-3.5 px-3 text-center border-l border-r border-orange-200/60 bg-orange-50/30">
                            <span class="inline-block px-2.5 py-1 rounded-lg bg-orange-100/90 font-mono font-extrabold text-primary-800 text-[13px] shadow-sm">
                                {{ substr($jk->jam_masuk, 0, 5) }}
                            </span>
                        </td>

                        <!-- 2. Rentang Masuk (Awal Masuk s/d Batas Akhir Masuk) -->
                        <td class="py-3.5 px-3 text-center font-mono font-bold text-slate-600 border-r border-orange-100">
                            <div class="flex items-center justify-center gap-1">
                                <span>{{ $jk->jam_awal_masuk ? substr($jk->jam_awal_masuk, 0, 5) : '-' }}</span>
                                <span class="text-slate-400 font-normal">s/d</span>
                                <span class="{{ $jk->batasi_absen ? 'text-rose-600 font-extrabold' : 'text-slate-700' }}">{{ $jk->jam_akhir_masuk ? substr($jk->jam_akhir_masuk, 0, 5) : '-' }}</span>
                            </div>
                        </td>

                        <!-- 3. Pulang Resmi (Acuan Pulang Cepat) -->
                        <td class="py-3.5 px-3 text-center border-r border-blue-200/60 bg-blue-50/30">
                            <span class="inline-block px-2.5 py-1 rounded-lg bg-blue-100/90 font-mono font-extrabold text-blue-800 text-[13px] shadow-sm">
                                {{ substr($jk->jam_pulang, 0, 5) }}
                            </span>
                        </td>

                        <!-- 4. Rentang Pulang (Awal Pulang s/d Batas Akhir Pulang) -->
                        <td class="py-3.5 px-3 text-center font-mono font-bold text-slate-600 border-r border-blue-100">
                            <div class="flex items-center justify-center gap-1">
                                <span>{{ $jk->jam_awal_pulang ? substr($jk->jam_awal_pulang, 0, 5) : '-' }}</span>
                                <span class="text-slate-400 font-normal">s/d</span>
                                <span class="{{ $jk->batasi_absen ? 'text-rose-600 font-extrabold' : 'text-slate-700' }}">{{ $jk->jam_akhir_pulang ? substr($jk->jam_akhir_pulang, 0, 5) : '-' }}</span>
                            </div>
                        </td>

                        <!-- 5. Sesi Istirahat -->
                        <td class="py-3.5 px-3 text-center font-mono border-r border-amber-100 bg-amber-50/20">
                            @if($jk->jam_mulai_istirahat)
                                <div class="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-amber-100/80 text-amber-900 font-bold text-[11px]">
                                    <i data-lucide="coffee" class="w-3 h-3 text-amber-600"></i>
                                    <span>{{ substr($jk->jam_mulai_istirahat, 0, 5) }}</span>
                                    <span class="text-amber-500 font-normal">-</span>
                                    <span>{{ $jk->jam_selesai_istirahat ? substr($jk->jam_selesai_istirahat, 0, 5) : 'Selesai' }}</span>
                                </div>
                            @else
                                <span class="text-slate-300">-</span>
                            @endif
                        </td>

                        <td class="py-3.5 px-4 text-center font-bold text-slate-700">
                            {{ $jk->durasi_kerja_format }}
                        </td>

                        <td class="py-3.5 px-4 text-right">
                            <div class="flex items-center justify-end gap-1">
                                <button type="button" 
                                    onclick="openEditModal({{ json_encode($jk) }})" 
                                    class="p-1.5 rounded-lg text-slate-400 hover:text-amber-600 hover:bg-amber-50 transition-colors" 
                                    title="Edit Jam Kerja">
                                    <i data-lucide="edit-3" class="w-4 h-4"></i>
                                </button>
                                <form action="{{ route('admin.pengaturan-absensi.jam-kerja.destroy', $jk->id) }}" method="POST" onsubmit="return confirm('Hapus jam kerja ini?');" class="inline">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="p-1.5 rounded-lg text-slate-400 hover:text-rose-600 hover:bg-rose-50 transition-colors" title="Hapus">
                                        <i data-lucide="trash-2" class="w-4 h-4"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="9" class="py-8 text-center text-slate-400">Belum ada jam kerja terdaftar</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Modal Tambah Jam Kerja (Strict 24 Jam & 4 Format Jam) -->
<div id="modalTambahJamKerja" class="fixed inset-0 z-50 bg-slate-900/40 backdrop-blur-sm hidden flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl max-w-lg w-full p-5 sm:p-6 shadow-xl space-y-4 max-h-[92vh] overflow-y-auto">
        <div class="flex items-center justify-between pb-3 border-b border-slate-100">
            <div>
                <h3 class="font-bold text-slate-900 text-sm">Tambah Jam Kerja (Format 24 Jam)</h3>
                <p class="text-[11px] text-slate-400">Format waktu: 00:00 s/d 23:59 (tanpa AM/PM)</p>
            </div>
            <button onclick="document.getElementById('modalTambahJamKerja').classList.add('hidden')" class="p-1 text-slate-400 hover:text-slate-600">
                <i data-lucide="x" class="w-4 h-4"></i>
            </button>
        </div>
        <form action="{{ route('admin.pengaturan-absensi.jam-kerja.store') }}" method="POST" class="space-y-4 text-xs">
            @csrf
            <div class="grid grid-cols-2 gap-3">
                <div>
                    <label class="block font-bold text-slate-700 mb-1">Kode Jam Kerja *</label>
                    <input type="text" name="kode_jam_kerja" placeholder="Contoh: JK-PAGI / JK-MLM" required class="w-full px-3 py-2 rounded-xl border border-slate-200 outline-none">
                </div>
                <div>
                    <label class="block font-bold text-slate-700 mb-1">Nama Jam Kerja *</label>
                    <input type="text" name="nama_jam_kerja" placeholder="Contoh: Shift Reguler Kantor" required class="w-full px-3 py-2 rounded-xl border border-slate-200 outline-none">
                </div>
            </div>

            <div>
                <label class="block font-bold text-slate-700 mb-1">Tipe Kerja *</label>
                <select name="tipe_kerja" required class="w-full px-3 py-2 rounded-xl border border-slate-200 outline-none">
                    <option value="penuh_waktu">Penuh Waktu (Full Time)</option>
                    <option value="paruh_waktu">Paruh Waktu (Part Time)</option>
                </select>
            </div>

            <!-- FORMAT WAKTU ABSENSI & ACUAN DENDA (24 JAM) -->
            <div class="p-3.5 rounded-xl bg-orange-50/60 border border-orange-200/60 space-y-3">
                <span class="block font-bold text-primary-900 text-[11px] uppercase tracking-wider">
                    Format Waktu Presensi & Acuan Denda (Format 24 Jam: HH:MM)
                </span>
                
                <!-- 1. SESI PRESENSI MASUK -->
                <div class="p-3 rounded-lg bg-white/90 border border-orange-200/60 space-y-2">
                    <span class="text-[11px] font-bold text-orange-950 flex items-center gap-1.5">
                        <i data-lucide="log-in" class="w-3.5 h-3.5 text-primary-600"></i>
                        <span>Sesi Presensi Masuk</span>
                    </span>
                    <div class="grid grid-cols-3 gap-2.5">
                        <div>
                            <label class="block font-bold text-slate-700 mb-1">Awal Masuk *</label>
                            <input type="text" name="jam_awal_masuk" value="07:00" placeholder="07:00" pattern="^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$" required class="w-full px-2.5 py-2 rounded-xl border border-slate-200 bg-white font-mono font-bold outline-none focus:ring-1 focus:ring-primary-500">
                            <span class="text-[10px] text-slate-400 mt-0.5 block">Jam tombol dibuka</span>
                        </div>
                        <div>
                            <label class="block font-bold text-primary-700 mb-1">Jam Masuk (Acuan Denda) *</label>
                            <input type="text" name="jam_masuk" value="08:00" placeholder="08:00" pattern="^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$" required class="w-full px-2.5 py-2 rounded-xl border border-primary-400 bg-orange-50/60 font-mono font-extrabold text-primary-800 outline-none focus:ring-1 focus:ring-primary-500">
                            <span class="text-[10px] text-primary-700 font-medium mt-0.5 block">Lewat jam ini = denda</span>
                        </div>
                        <div>
                            <label class="block font-bold text-rose-700 mb-1">Batas Akhir Masuk *</label>
                            <input type="text" name="jam_akhir_masuk" value="09:00" placeholder="09:00" pattern="^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$" required class="w-full px-2.5 py-2 rounded-xl border border-rose-300 bg-white font-mono font-bold text-rose-800 outline-none focus:ring-1 focus:ring-primary-500">
                            <span class="text-[10px] text-rose-600 mt-0.5 block">Batas tutup absen masuk</span>
                        </div>
                    </div>
                </div>

                <!-- 2. SESI PRESENSI PULANG -->
                <div class="p-3 rounded-lg bg-white/90 border border-blue-200/60 space-y-2">
                    <span class="text-[11px] font-bold text-blue-950 flex items-center gap-1.5">
                        <i data-lucide="log-out" class="w-3.5 h-3.5 text-blue-600"></i>
                        <span>Sesi Presensi Pulang</span>
                    </span>
                    <div class="grid grid-cols-3 gap-2.5">
                        <div>
                            <label class="block font-bold text-slate-700 mb-1">Awal Pulang *</label>
                            <input type="text" name="jam_awal_pulang" value="17:00" placeholder="17:00" pattern="^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$" required class="w-full px-2.5 py-2 rounded-xl border border-slate-200 bg-white font-mono font-bold outline-none focus:ring-1 focus:ring-primary-500">
                            <span class="text-[10px] text-slate-400 mt-0.5 block">Jam tombol dibuka</span>
                        </div>
                        <div>
                            <label class="block font-bold text-blue-700 mb-1">Jam Pulang (Acuan Cepat) *</label>
                            <input type="text" name="jam_pulang" value="17:00" placeholder="17:00" pattern="^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$" required class="w-full px-2.5 py-2 rounded-xl border border-blue-400 bg-blue-50/60 font-mono font-extrabold text-blue-800 outline-none focus:ring-1 focus:ring-primary-500">
                            <span class="text-[10px] text-blue-700 font-medium mt-0.5 block">Sebelum ini = pulang cepat</span>
                        </div>
                        <div>
                            <label class="block font-bold text-slate-800 mb-1">Batas Akhir Pulang *</label>
                            <input type="text" name="jam_akhir_pulang" value="20:00" placeholder="20:00" pattern="^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$" required class="w-full px-2.5 py-2 rounded-xl border border-slate-300 bg-white font-mono font-bold text-slate-900 outline-none focus:ring-1 focus:ring-primary-500">
                            <span class="text-[10px] text-slate-600 mt-0.5 block">Batas tutup absen pulang</span>
                        </div>
                    </div>
                </div>

                <!-- 3. SESI WAKTU ISTIRAHAT (OPSIONAL) -->
                <div class="p-3 rounded-lg bg-white/90 border border-amber-200/60 space-y-2">
                    <div class="flex items-center justify-between">
                        <span class="text-[11px] font-bold text-amber-950 flex items-center gap-1.5">
                            <i data-lucide="coffee" class="w-3.5 h-3.5 text-amber-600"></i>
                            <span>Sesi Waktu Istirahat (Opsional)</span>
                        </span>
                        <span class="text-[10px] text-amber-700 bg-amber-50 px-2 py-0.5 rounded-full font-semibold border border-amber-200">
                            Fitur Tombol Istirahat Mobile
                        </span>
                    </div>
                    <div class="grid grid-cols-2 gap-2.5">
                        <div>
                            <label class="block font-bold text-slate-700 mb-1">Mulai Istirahat</label>
                            <input type="text" name="jam_mulai_istirahat" value="12:00" placeholder="12:00" pattern="^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$" class="w-full px-2.5 py-2 rounded-xl border border-slate-200 bg-white font-mono font-bold outline-none focus:ring-1 focus:ring-primary-500">
                            <span class="text-[10px] text-slate-400 mt-0.5 block">Jam tombol istirahat aktif di mobile</span>
                        </div>
                        <div>
                            <label class="block font-bold text-slate-700 mb-1">Selesai Istirahat</label>
                            <input type="text" name="jam_selesai_istirahat" value="13:00" placeholder="13:00" pattern="^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$" class="w-full px-2.5 py-2 rounded-xl border border-slate-200 bg-white font-mono font-bold outline-none focus:ring-1 focus:ring-primary-500">
                            <span class="text-[10px] text-slate-400 mt-0.5 block">Target selesai istirahat</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="p-3 rounded-xl bg-slate-50 border border-slate-200/60">
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="checkbox" name="lintas_hari" value="1" class="w-4 h-4 rounded text-primary-600 focus:ring-primary-500 border-slate-300">
                    <span class="text-xs font-bold text-slate-800">Shift Lintas Hari (Overnight / Melewati 00:00)</span>
                </label>
                <p class="text-[10px] text-slate-500 mt-1 pl-6">
                    Centang jika jam pulang jatuh pada hari berikutnya (contoh: Masuk 22:00, Pulang 06:00).
                </p>
            </div>

            <!-- TOMBOL TOGGLE PEMBATASAN ABSEN MASUK & PULANG -->
            <div class="p-3.5 rounded-xl bg-gradient-to-r from-rose-50/80 to-orange-50/60 border border-rose-200/90 shadow-sm space-y-2">
                <div class="flex items-start justify-between gap-3">
                    <div class="space-y-0.5">
                        <label class="font-bold text-slate-900 text-xs flex items-center gap-1.5 cursor-pointer">
                            <i data-lucide="clock-alert" class="w-4 h-4 text-rose-600"></i>
                            <span>Batasi Jam Absen Masuk & Pulang</span>
                        </label>
                        <p class="text-[11px] text-slate-600 leading-relaxed">
                            Bila diaktifkan, pegawai <strong>tidak bisa absen masuk</strong> jika melewati jam akhir masuk, dan <strong>tidak bisa absen pulang</strong> jika melewati jam akhir pulang.
                        </p>
                    </div>
                    <label class="relative inline-flex items-center cursor-pointer shrink-0 mt-0.5">
                        <input type="checkbox" name="batasi_absen" value="1" class="sr-only peer">
                        <div class="w-11 h-6 bg-slate-300 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-slate-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-rose-600"></div>
                    </label>
                </div>
            </div>

            <div>
                <label class="block font-bold text-slate-700 mb-1">Keterangan (Optional)</label>
                <input type="text" name="keterangan" placeholder="Keterangan operasional shift..." class="w-full px-3 py-2 rounded-xl border border-slate-200 outline-none">
            </div>

            <div class="pt-3 border-t border-slate-100 flex justify-end gap-2">
                <button type="button" onclick="document.getElementById('modalTambahJamKerja').classList.add('hidden')" class="px-4 py-2 rounded-xl border border-slate-200 text-slate-600 font-semibold">Batal</button>
                <button type="submit" class="px-4 py-2 rounded-xl bg-primary-600 text-white font-bold hover:bg-primary-700">Simpan Jam Kerja</button>
            </div>
        </form>
    </div>
</div>

<!-- Modal Edit Jam Kerja (Strict 24 Jam & 4 Format Jam) -->
<div id="modalEditJamKerja" class="fixed inset-0 z-50 bg-slate-900/40 backdrop-blur-sm hidden flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl max-w-lg w-full p-5 sm:p-6 shadow-xl space-y-4 max-h-[92vh] overflow-y-auto">
        <div class="flex items-center justify-between pb-3 border-b border-slate-100">
            <div>
                <h3 class="font-bold text-slate-900 text-sm">Edit Jam Kerja (Format 24 Jam)</h3>
                <p class="text-[11px] text-slate-400">Format waktu: 00:00 s/d 23:59 (tanpa AM/PM)</p>
            </div>
            <button onclick="document.getElementById('modalEditJamKerja').classList.add('hidden')" class="p-1 text-slate-400 hover:text-slate-600">
                <i data-lucide="x" class="w-4 h-4"></i>
            </button>
        </div>
        <form id="formEditJamKerja" action="" method="POST" class="space-y-4 text-xs">
            @csrf
            @method('PUT')
            <div class="grid grid-cols-2 gap-3">
                <div>
                    <label class="block font-bold text-slate-700 mb-1">Kode Jam Kerja *</label>
                    <input type="text" id="edit_kode_jam_kerja" name="kode_jam_kerja" required class="w-full px-3 py-2 rounded-xl border border-slate-200 outline-none">
                </div>
                <div>
                    <label class="block font-bold text-slate-700 mb-1">Nama Jam Kerja *</label>
                    <input type="text" id="edit_nama_jam_kerja" name="nama_jam_kerja" required class="w-full px-3 py-2 rounded-xl border border-slate-200 outline-none">
                </div>
            </div>

            <div>
                <label class="block font-bold text-slate-700 mb-1">Tipe Kerja *</label>
                <select id="edit_tipe_kerja" name="tipe_kerja" required class="w-full px-3 py-2 rounded-xl border border-slate-200 outline-none">
                    <option value="penuh_waktu">Penuh Waktu (Full Time)</option>
                    <option value="paruh_waktu">Paruh Waktu (Part Time)</option>
                </select>
            </div>

            <!-- FORMAT WAKTU ABSENSI & ACUAN DENDA (24 JAM) -->
            <div class="p-3.5 rounded-xl bg-orange-50/60 border border-orange-200/60 space-y-3">
                <span class="block font-bold text-primary-900 text-[11px] uppercase tracking-wider">
                    Format Waktu Presensi & Acuan Denda (Format 24 Jam: HH:MM)
                </span>
                
                <!-- 1. SESI PRESENSI MASUK -->
                <div class="p-3 rounded-lg bg-white/90 border border-orange-200/60 space-y-2">
                    <span class="text-[11px] font-bold text-orange-950 flex items-center gap-1.5">
                        <i data-lucide="log-in" class="w-3.5 h-3.5 text-primary-600"></i>
                        <span>Sesi Presensi Masuk</span>
                    </span>
                    <div class="grid grid-cols-3 gap-2.5">
                        <div>
                            <label class="block font-bold text-slate-700 mb-1">Awal Masuk *</label>
                            <input type="text" id="edit_jam_awal_masuk" name="jam_awal_masuk" placeholder="07:00" pattern="^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$" required class="w-full px-2.5 py-2 rounded-xl border border-slate-200 bg-white font-mono font-bold outline-none focus:ring-1 focus:ring-primary-500">
                            <span class="text-[10px] text-slate-400 mt-0.5 block">Jam tombol dibuka</span>
                        </div>
                        <div>
                            <label class="block font-bold text-primary-700 mb-1">Jam Masuk (Acuan Denda) *</label>
                            <input type="text" id="edit_jam_masuk" name="jam_masuk" placeholder="08:00" pattern="^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$" required class="w-full px-2.5 py-2 rounded-xl border border-primary-400 bg-orange-50/60 font-mono font-extrabold text-primary-800 outline-none focus:ring-1 focus:ring-primary-500">
                            <span class="text-[10px] text-primary-700 font-medium mt-0.5 block">Lewat jam ini = denda</span>
                        </div>
                        <div>
                            <label class="block font-bold text-rose-700 mb-1">Batas Akhir Masuk *</label>
                            <input type="text" id="edit_jam_akhir_masuk" name="jam_akhir_masuk" placeholder="09:00" pattern="^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$" required class="w-full px-2.5 py-2 rounded-xl border border-rose-300 bg-white font-mono font-bold text-rose-800 outline-none focus:ring-1 focus:ring-primary-500">
                            <span class="text-[10px] text-rose-600 mt-0.5 block">Batas tutup absen masuk</span>
                        </div>
                    </div>
                </div>

                <!-- 2. SESI PRESENSI PULANG -->
                <div class="p-3 rounded-lg bg-white/90 border border-blue-200/60 space-y-2">
                    <span class="text-[11px] font-bold text-blue-950 flex items-center gap-1.5">
                        <i data-lucide="log-out" class="w-3.5 h-3.5 text-blue-600"></i>
                        <span>Sesi Presensi Pulang</span>
                    </span>
                    <div class="grid grid-cols-3 gap-2.5">
                        <div>
                            <label class="block font-bold text-slate-700 mb-1">Awal Pulang *</label>
                            <input type="text" id="edit_jam_awal_pulang" name="jam_awal_pulang" placeholder="17:00" pattern="^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$" required class="w-full px-2.5 py-2 rounded-xl border border-slate-200 bg-white font-mono font-bold outline-none focus:ring-1 focus:ring-primary-500">
                            <span class="text-[10px] text-slate-400 mt-0.5 block">Jam tombol dibuka</span>
                        </div>
                        <div>
                            <label class="block font-bold text-blue-700 mb-1">Jam Pulang (Acuan Cepat) *</label>
                            <input type="text" id="edit_jam_pulang" name="jam_pulang" placeholder="17:00" pattern="^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$" required class="w-full px-2.5 py-2 rounded-xl border border-blue-400 bg-blue-50/60 font-mono font-extrabold text-blue-800 outline-none focus:ring-1 focus:ring-primary-500">
                            <span class="text-[10px] text-blue-700 font-medium mt-0.5 block">Sebelum ini = pulang cepat</span>
                        </div>
                        <div>
                            <label class="block font-bold text-slate-800 mb-1">Batas Akhir Pulang *</label>
                            <input type="text" id="edit_jam_akhir_pulang" name="jam_akhir_pulang" placeholder="20:00" pattern="^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$" required class="w-full px-2.5 py-2 rounded-xl border border-slate-300 bg-white font-mono font-bold text-slate-900 outline-none focus:ring-1 focus:ring-primary-500">
                            <span class="text-[10px] text-slate-600 mt-0.5 block">Batas tutup absen pulang</span>
                        </div>
                    </div>
                </div>

                <!-- 3. SESI WAKTU ISTIRAHAT (OPSIONAL) -->
                <div class="p-3 rounded-lg bg-white/90 border border-amber-200/60 space-y-2">
                    <div class="flex items-center justify-between">
                        <span class="text-[11px] font-bold text-amber-950 flex items-center gap-1.5">
                            <i data-lucide="coffee" class="w-3.5 h-3.5 text-amber-600"></i>
                            <span>Sesi Waktu Istirahat (Opsional)</span>
                        </span>
                        <span class="text-[10px] text-amber-700 bg-amber-50 px-2 py-0.5 rounded-full font-semibold border border-amber-200">
                            Fitur Tombol Istirahat Mobile
                        </span>
                    </div>
                    <div class="grid grid-cols-2 gap-2.5">
                        <div>
                            <label class="block font-bold text-slate-700 mb-1">Mulai Istirahat</label>
                            <input type="text" id="edit_jam_mulai_istirahat" name="jam_mulai_istirahat" placeholder="12:00" pattern="^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$" class="w-full px-2.5 py-2 rounded-xl border border-slate-200 bg-white font-mono font-bold outline-none focus:ring-1 focus:ring-primary-500">
                            <span class="text-[10px] text-slate-400 mt-0.5 block">Jam tombol istirahat aktif di mobile</span>
                        </div>
                        <div>
                            <label class="block font-bold text-slate-700 mb-1">Selesai Istirahat</label>
                            <input type="text" id="edit_jam_selesai_istirahat" name="jam_selesai_istirahat" placeholder="13:00" pattern="^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$" class="w-full px-2.5 py-2 rounded-xl border border-slate-200 bg-white font-mono font-bold outline-none focus:ring-1 focus:ring-primary-500">
                            <span class="text-[10px] text-slate-400 mt-0.5 block">Target selesai istirahat</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="p-3 rounded-xl bg-slate-50 border border-slate-200/60">
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="checkbox" id="edit_lintas_hari" name="lintas_hari" value="1" class="w-4 h-4 rounded text-primary-600 focus:ring-primary-500 border-slate-300">
                    <span class="text-xs font-bold text-slate-800">Shift Lintas Hari (Overnight / Melewati 00:00)</span>
                </label>
            </div>

            <!-- TOMBOL TOGGLE PEMBATASAN ABSEN MASUK & PULANG -->
            <div class="p-3.5 rounded-xl bg-gradient-to-r from-rose-50/80 to-orange-50/60 border border-rose-200/90 shadow-sm space-y-2">
                <div class="flex items-start justify-between gap-3">
                    <div class="space-y-0.5">
                        <label class="font-bold text-slate-900 text-xs flex items-center gap-1.5 cursor-pointer">
                            <i data-lucide="clock-alert" class="w-4 h-4 text-rose-600"></i>
                            <span>Batasi Jam Absen Masuk & Pulang</span>
                        </label>
                        <p class="text-[11px] text-slate-600 leading-relaxed">
                            Bila diaktifkan, pegawai <strong>tidak bisa absen masuk</strong> jika melewati jam akhir masuk, dan <strong>tidak bisa absen pulang</strong> jika melewati jam akhir pulang.
                        </p>
                    </div>
                    <label class="relative inline-flex items-center cursor-pointer shrink-0 mt-0.5">
                        <input type="checkbox" id="edit_batasi_absen" name="batasi_absen" value="1" class="sr-only peer">
                        <div class="w-11 h-6 bg-slate-300 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-slate-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-rose-600"></div>
                    </label>
                </div>
            </div>

            <div>
                <label class="block font-bold text-slate-700 mb-1">Keterangan (Optional)</label>
                <input type="text" id="edit_keterangan" name="keterangan" placeholder="Keterangan operasional shift..." class="w-full px-3 py-2 rounded-xl border border-slate-200 outline-none">
            </div>

            <div class="pt-3 border-t border-slate-100 flex justify-end gap-2">
                <button type="button" onclick="document.getElementById('modalEditJamKerja').classList.add('hidden')" class="px-4 py-2 rounded-xl border border-slate-200 text-slate-600 font-semibold">Batal</button>
                <button type="submit" class="px-4 py-2 rounded-xl bg-primary-600 text-white font-bold hover:bg-primary-700">Simpan Perubahan</button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
function openEditModal(jk) {
    const form = document.getElementById('formEditJamKerja');
    form.action = `/admin/pengaturan-absensi/jam-kerja/${jk.id}`;
    document.getElementById('edit_kode_jam_kerja').value = jk.kode_jam_kerja;
    document.getElementById('edit_nama_jam_kerja').value = jk.nama_jam_kerja;
    document.getElementById('edit_tipe_kerja').value = jk.tipe_kerja;
    
    // Potong format HH:MM jika ada detik
    const formatTime = (t) => t ? t.substring(0, 5) : '';
    document.getElementById('edit_jam_awal_masuk').value = formatTime(jk.jam_awal_masuk);
    document.getElementById('edit_jam_masuk').value = formatTime(jk.jam_masuk);
    document.getElementById('edit_jam_akhir_masuk').value = formatTime(jk.jam_akhir_masuk);
    document.getElementById('edit_jam_awal_pulang').value = formatTime(jk.jam_awal_pulang);
    document.getElementById('edit_jam_pulang').value = formatTime(jk.jam_pulang);
    document.getElementById('edit_jam_akhir_pulang').value = formatTime(jk.jam_akhir_pulang);
    document.getElementById('edit_jam_mulai_istirahat').value = formatTime(jk.jam_mulai_istirahat);
    document.getElementById('edit_jam_selesai_istirahat').value = formatTime(jk.jam_selesai_istirahat);

    document.getElementById('edit_lintas_hari').checked = !!jk.lintas_hari;
    document.getElementById('edit_batasi_absen').checked = !!jk.batasi_absen;
    document.getElementById('edit_keterangan').value = jk.keterangan || '';

    document.getElementById('modalEditJamKerja').classList.remove('hidden');
    if (window.lucide) { lucide.createIcons(); }
}
</script>
@endpush
@endsection