@extends('layouts.admin')

@section('title', 'Pengaturan Upah Lembur')

@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 Upah Lembur</h1>
            <p class="text-xs text-slate-500 mt-1">Konfigurasi nominal tarif lembur per jam, pengali lembur hari libur, dan aturan kompensasi lembur karyawan</p>
        </div>
        <button onclick="document.getElementById('modalTambahLembur').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 Aturan Lembur</span>
        </button>
    </div>

    <!-- Alert Success / Error -->
    @if(session('success'))
    <div class="p-4 rounded-2xl bg-emerald-50 border border-emerald-200 text-emerald-800 text-xs font-semibold flex items-center justify-between">
        <div class="flex items-center gap-2.5">
            <i data-lucide="check-circle-2" class="w-4 h-4 text-emerald-600 shrink-0"></i>
            <span>{{ session('success') }}</span>
        </div>
        <button onclick="this.parentElement.remove()" class="text-emerald-500 hover:text-emerald-700">
            <i data-lucide="x" class="w-4 h-4"></i>
        </button>
    </div>
    @endif

    @if($errors->any())
    <div class="p-4 rounded-2xl bg-rose-50 border border-rose-200 text-rose-800 text-xs font-semibold">
        <div class="flex items-center gap-2 mb-1.5">
            <i data-lucide="alert-circle" class="w-4 h-4 text-rose-600 shrink-0"></i>
            <span>Terjadi kesalahan penginputan:</span>
        </div>
        <ul class="list-disc list-inside space-y-0.5 text-[11px] text-rose-700 pl-4">
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif

    <!-- Stat Cards Ringkasan Lembur -->
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
        <!-- Card 1: Tarif Aktif Saat Ini -->
        <div class="p-5 rounded-2xl bg-gradient-to-br from-amber-500 to-amber-600 text-white shadow-lg shadow-amber-500/20 relative overflow-hidden">
            <div class="absolute -right-4 -bottom-4 w-24 h-24 bg-white/10 rounded-full blur-xl pointer-events-none"></div>
            <div class="flex items-center justify-between mb-3">
                <span class="text-[11px] font-bold text-amber-100 uppercase tracking-wider">Tarif Lembur Aktif</span>
                <span class="p-1.5 rounded-lg bg-white/20 text-white">
                    <i data-lucide="coins" class="w-4 h-4"></i>
                </span>
            </div>
            <div class="text-2xl font-black tracking-tight text-white mb-1">
                Rp {{ number_format($aturanAktif?->upah_per_jam ?? 75000, 0, ',', '.') }}
                <span class="text-xs font-semibold text-amber-200 font-normal">/ Jam</span>
            </div>
            <p class="text-[11px] text-amber-100 truncate">
                {{ $aturanAktif?->nama_aturan ?? 'Standar Perusahaan' }} (Pengali Libur: {{ $aturanAktif?->pengali_hari_libur ?? 1.5 }}x)
            </p>
        </div>

        <!-- Card 2: Total Pengajuan Bulan Ini -->
        <div class="p-5 rounded-2xl bg-white border border-slate-200/80 shadow-sm relative overflow-hidden">
            <div class="flex items-center justify-between mb-3">
                <span class="text-[11px] font-bold text-slate-400 uppercase tracking-wider">Pengajuan Bulan Ini</span>
                <span class="p-1.5 rounded-lg bg-blue-50 text-blue-600">
                    <i data-lucide="timer" class="w-4 h-4"></i>
                </span>
            </div>
            <div class="text-2xl font-black tracking-tight text-slate-800 mb-1">
                {{ $totalPengajuanBulanIni }}
                <span class="text-xs font-medium text-slate-400">Pengajuan</span>
            </div>
            <p class="text-[11px] text-slate-500">
                Periode {{ now()->translatedFormat('F Y') }}
            </p>
        </div>

        <!-- Card 3: Total Upah Lembur Disetujui -->
        <div class="p-5 rounded-2xl bg-white border border-slate-200/80 shadow-sm relative overflow-hidden">
            <div class="flex items-center justify-between mb-3">
                <span class="text-[11px] font-bold text-slate-400 uppercase tracking-wider">Akumulasi Disetujui</span>
                <span class="p-1.5 rounded-lg bg-emerald-50 text-emerald-600">
                    <i data-lucide="check-check" class="w-4 h-4"></i>
                </span>
            </div>
            <div class="text-2xl font-black tracking-tight text-emerald-600 mb-1">
                Rp {{ number_format($totalUpahBulanIni, 0, ',', '.') }}
            </div>
            <p class="text-[11px] text-slate-500">
                Lembur status disetujui siap payroll
            </p>
        </div>
    </div>

    <!-- Info Box: Petunjuk Upah Lembur -->
    <div class="p-4 rounded-2xl bg-primary-50/60 border border-primary-100 flex items-start gap-3">
        <div class="w-9 h-9 rounded-xl bg-primary-100 text-primary-700 flex items-center justify-center shrink-0 mt-0.5">
            <i data-lucide="info" class="w-4 h-4"></i>
        </div>
        <div>
            <h4 class="text-xs font-bold text-primary-900">Mekanisme Tarif Lembur</h4>
            <p class="text-[11px] text-primary-800 mt-0.5 leading-relaxed">
                Nominal <strong>Tarif Lembur per Jam</strong> yang diaktifkan di menu ini menjadi acuan otomatis bagi aplikasi mobile ketika karyawan mengajukan lembur (format 24 jam) serta rekapitulasi upah lembur pada laporan bulanan.
            </p>
        </div>
    </div>

    <!-- Tabel Daftar Aturan Upah Lembur -->
    <div class="rounded-2xl bg-white border border-slate-200/80 shadow-sm overflow-hidden">
        <div class="p-4 border-b border-slate-100 flex items-center justify-between">
            <div>
                <h3 class="text-sm font-bold text-slate-800">Daftar Skema Tarif Lembur</h3>
                <p class="text-[11px] text-slate-400">Pilih atau ubah nominal tarif upah lembur karyawan</p>
            </div>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full min-w-[750px] 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">Kode</th>
                        <th class="py-3 px-4">Nama Skema</th>
                        <th class="py-3 px-4">Tarif Per Jam</th>
                        <th class="py-3 px-4">Berlaku Untuk</th>
                        <th class="py-3 px-4">Pengali Libur</th>
                        <th class="py-3 px-4">Keterangan</th>
                        <th class="py-3 px-4 text-center">Status</th>
                        <th class="py-3 px-4 text-right">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 text-xs">
                    @forelse($aturanList as $aturan)
                    <tr class="hover:bg-slate-50/70 transition-colors {{ $aturan->status_aktif ? 'bg-amber-50/20' : '' }}">
                        <td class="py-3.5 px-4 font-mono font-bold text-slate-800">
                            {{ $aturan->kode_aturan }}
                        </td>
                        <td class="py-3.5 px-4 font-bold text-slate-900">
                            {{ $aturan->nama_aturan }}
                        </td>
                        <td class="py-3.5 px-4 font-mono font-bold text-emerald-600 text-sm">
                            Rp {{ number_format($aturan->upah_per_jam, 0, ',', '.') }}
                            <span class="text-[10px] font-normal text-slate-400">/ jam</span>
                        </td>
                        <td class="py-3.5 px-4">
                            @if($aturan->tipe_hari === 'semua_hari')
                                <span class="px-2 py-0.5 rounded-full text-[10px] font-bold bg-blue-50 text-blue-700 border border-blue-200">
                                    Semua Hari
                                </span>
                            @elseif($aturan->tipe_hari === 'hari_kerja')
                                <span class="px-2 py-0.5 rounded-full text-[10px] font-bold bg-slate-100 text-slate-700 border border-slate-200">
                                    Hari Kerja
                                </span>
                            @else
                                <span class="px-2 py-0.5 rounded-full text-[10px] font-bold bg-purple-50 text-purple-700 border border-purple-200">
                                    Hari Libur / Weekend
                                </span>
                            @endif
                        </td>
                        <td class="py-3.5 px-4 font-bold text-slate-700">
                            {{ number_format($aturan->pengali_hari_libur, 1) }}x
                        </td>
                        <td class="py-3.5 px-4 text-slate-500 max-w-xs truncate" title="{{ $aturan->keterangan }}">
                            {{ $aturan->keterangan ?? '-' }}
                        </td>
                        <td class="py-3.5 px-4 text-center">
                            <form action="{{ route('admin.pengaturan-absensi.lembur.toggle', $aturan->id) }}" method="POST" class="inline">
                                @csrf
                                <button type="submit" class="px-2.5 py-1 rounded-full text-[10px] font-bold transition-all {{ $aturan->status_aktif ? 'bg-emerald-50 text-emerald-700 border border-emerald-200 hover:bg-emerald-100' : 'bg-slate-100 text-slate-500 border border-slate-200 hover:bg-slate-200' }}">
                                    {{ $aturan->status_aktif ? '● Aktif' : '○ Nonaktif' }}
                                </button>
                            </form>
                        </td>
                        <td class="py-3.5 px-4 text-right">
                            <div class="flex items-center justify-end gap-1.5">
                                <button type="button" onclick="openEditModal({{ json_encode($aturan) }})" class="p-1.5 text-slate-500 hover:text-primary-600 hover:bg-primary-50 rounded-lg transition-colors" title="Ubah Aturan">
                                    <i data-lucide="edit-3" class="w-4 h-4"></i>
                                </button>
                                @if(!$aturan->status_aktif)
                                <form action="{{ route('admin.pengaturan-absensi.lembur.destroy', $aturan->id) }}" method="POST" class="inline" onsubmit="return confirm('Apakah Anda yakin ingin menghapus aturan lembur ini?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="p-1.5 text-slate-400 hover:text-rose-600 hover:bg-rose-50 rounded-lg transition-colors" title="Hapus">
                                        <i data-lucide="trash-2" class="w-4 h-4"></i>
                                    </button>
                                </form>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="8" class="py-8 text-center text-slate-400">
                            Belum ada konfigurasi tarif lembur. Silakan tambahkan aturan baru.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- MODAL TAMBAH ATURAN LEMBUR -->
<div id="modalTambahLembur" class="fixed inset-0 z-50 bg-slate-900/50 backdrop-blur-sm flex items-center justify-center p-4 hidden">
    <div class="bg-white rounded-2xl w-full max-w-lg shadow-xl overflow-hidden animate-fade-in">
        <div class="p-5 border-b border-slate-100 flex items-center justify-between">
            <div class="flex items-center gap-2.5">
                <div class="w-9 h-9 rounded-xl bg-amber-50 text-amber-600 flex items-center justify-center">
                    <i data-lucide="coins" class="w-4 h-4"></i>
                </div>
                <div>
                    <h3 class="text-sm font-bold text-slate-800">Tambah Aturan Upah Lembur</h3>
                    <p class="text-[11px] text-slate-400">Tentukan tarif lembur per jam dan pengali hari libur</p>
                </div>
            </div>
            <button onclick="document.getElementById('modalTambahLembur').classList.add('hidden')" class="p-1.5 text-slate-400 hover:text-slate-600 rounded-lg">
                <i data-lucide="x" class="w-4 h-4"></i>
            </button>
        </div>

        <form action="{{ route('admin.pengaturan-absensi.lembur.store') }}" method="POST" class="p-5 space-y-4">
            @csrf
            <div class="grid grid-cols-2 gap-3">
                <div>
                    <label class="block text-xs font-bold text-slate-700 mb-1">Kode Aturan</label>
                    <input type="text" name="kode_aturan" required placeholder="Contoh: LMB-STD" class="w-full px-3 py-2 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-primary-500 focus:outline-none uppercase">
                </div>
                <div>
                    <label class="block text-xs font-bold text-slate-700 mb-1">Nama Aturan</label>
                    <input type="text" name="nama_aturan" required placeholder="Tarif Lembur Standar" class="w-full px-3 py-2 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-primary-500 focus:outline-none">
                </div>
            </div>

            <div class="grid grid-cols-2 gap-3">
                <div>
                    <label class="block text-xs font-bold text-slate-700 mb-1">Nominal Upah / Jam (Rp)</label>
                    <div class="relative">
                        <span class="absolute left-3 top-2.5 text-xs text-slate-400 font-bold">Rp</span>
                        <input type="number" name="upah_per_jam" required min="0" step="1000" placeholder="75000" class="w-full pl-9 pr-3 py-2 rounded-xl border border-slate-200 text-xs font-bold font-mono focus:ring-2 focus:ring-primary-500 focus:outline-none">
                    </div>
                </div>
                <div>
                    <label class="block text-xs font-bold text-slate-700 mb-1">Pengali Hari Libur</label>
                    <input type="number" name="pengali_hari_libur" required min="1" max="5" step="0.1" value="1.5" class="w-full px-3 py-2 rounded-xl border border-slate-200 text-xs font-bold font-mono focus:ring-2 focus:ring-primary-500 focus:outline-none">
                </div>
            </div>

            <div>
                <label class="block text-xs font-bold text-slate-700 mb-1">Berlaku Untuk</label>
                <select name="tipe_hari" class="w-full px-3 py-2 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-primary-500 focus:outline-none">
                    <option value="semua_hari">Semua Hari (Hari Kerja & Akhir Pekan)</option>
                    <option value="hari_kerja">Hanya Hari Kerja</option>
                    <option value="hari_libur">Hanya Hari Libur / Akhir Pekan</option>
                </select>
            </div>

            <div>
                <label class="block text-xs font-bold text-slate-700 mb-1">Keterangan / Catatan</label>
                <textarea name="keterangan" rows="2" placeholder="Catatan kebijakan lembur..." class="w-full px-3 py-2 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-primary-500 focus:outline-none resize-none"></textarea>
            </div>

            <div class="flex items-center gap-2 p-3 rounded-xl bg-slate-50 border border-slate-100">
                <input type="checkbox" id="tambah_status_aktif" name="status_aktif" value="1" checked class="w-4 h-4 rounded text-primary-600 focus:ring-primary-500">
                <label for="tambah_status_aktif" class="text-xs font-bold text-slate-700 cursor-pointer">
                    Jadikan Aturan Aktif Utama
                </label>
            </div>

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

<!-- MODAL EDIT ATURAN LEMBUR -->
<div id="modalEditLembur" class="fixed inset-0 z-50 bg-slate-900/50 backdrop-blur-sm flex items-center justify-center p-4 hidden">
    <div class="bg-white rounded-2xl w-full max-w-lg shadow-xl overflow-hidden animate-fade-in">
        <div class="p-5 border-b border-slate-100 flex items-center justify-between">
            <div class="flex items-center gap-2.5">
                <div class="w-9 h-9 rounded-xl bg-primary-50 text-primary-600 flex items-center justify-center">
                    <i data-lucide="edit-3" class="w-4 h-4"></i>
                </div>
                <div>
                    <h3 class="text-sm font-bold text-slate-800">Ubah Aturan Upah Lembur</h3>
                    <p class="text-[11px] text-slate-400">Perbarui nominal upah per jam dan pengaturan lembur</p>
                </div>
            </div>
            <button onclick="document.getElementById('modalEditLembur').classList.add('hidden')" class="p-1.5 text-slate-400 hover:text-slate-600 rounded-lg">
                <i data-lucide="x" class="w-4 h-4"></i>
            </button>
        </div>

        <form id="formEditLembur" method="POST" class="p-5 space-y-4">
            @csrf
            @method('PUT')
            <div class="grid grid-cols-2 gap-3">
                <div>
                    <label class="block text-xs font-bold text-slate-700 mb-1">Kode Aturan</label>
                    <input type="text" id="edit_kode_aturan" name="kode_aturan" required class="w-full px-3 py-2 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-primary-500 focus:outline-none uppercase">
                </div>
                <div>
                    <label class="block text-xs font-bold text-slate-700 mb-1">Nama Aturan</label>
                    <input type="text" id="edit_nama_aturan" name="nama_aturan" required class="w-full px-3 py-2 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-primary-500 focus:outline-none">
                </div>
            </div>

            <div class="grid grid-cols-2 gap-3">
                <div>
                    <label class="block text-xs font-bold text-slate-700 mb-1">Nominal Upah / Jam (Rp)</label>
                    <div class="relative">
                        <span class="absolute left-3 top-2.5 text-xs text-slate-400 font-bold">Rp</span>
                        <input type="number" id="edit_upah_per_jam" name="upah_per_jam" required min="0" step="1000" class="w-full pl-9 pr-3 py-2 rounded-xl border border-slate-200 text-xs font-bold font-mono focus:ring-2 focus:ring-primary-500 focus:outline-none">
                    </div>
                </div>
                <div>
                    <label class="block text-xs font-bold text-slate-700 mb-1">Pengali Hari Libur</label>
                    <input type="number" id="edit_pengali_hari_libur" name="pengali_hari_libur" required min="1" max="5" step="0.1" class="w-full px-3 py-2 rounded-xl border border-slate-200 text-xs font-bold font-mono focus:ring-2 focus:ring-primary-500 focus:outline-none">
                </div>
            </div>

            <div>
                <label class="block text-xs font-bold text-slate-700 mb-1">Berlaku Untuk</label>
                <select id="edit_tipe_hari" name="tipe_hari" class="w-full px-3 py-2 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-primary-500 focus:outline-none">
                    <option value="semua_hari">Semua Hari (Hari Kerja & Akhir Pekan)</option>
                    <option value="hari_kerja">Hanya Hari Kerja</option>
                    <option value="hari_libur">Hanya Hari Libur / Akhir Pekan</option>
                </select>
            </div>

            <div>
                <label class="block text-xs font-bold text-slate-700 mb-1">Keterangan / Catatan</label>
                <textarea id="edit_keterangan" name="keterangan" rows="2" class="w-full px-3 py-2 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-primary-500 focus:outline-none resize-none"></textarea>
            </div>

            <div class="flex items-center gap-2 p-3 rounded-xl bg-slate-50 border border-slate-100">
                <input type="checkbox" id="edit_status_aktif" name="status_aktif" value="1" class="w-4 h-4 rounded text-primary-600 focus:ring-primary-500">
                <label for="edit_status_aktif" class="text-xs font-bold text-slate-700 cursor-pointer">
                    Jadikan Aturan Aktif Utama
                </label>
            </div>

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

<script>
    function openEditModal(aturan) {
        document.getElementById('formEditLembur').action = "{{ url('admin/pengaturan-absensi/lembur') }}/" + aturan.id;
        document.getElementById('edit_kode_aturan').value = aturan.kode_aturan;
        document.getElementById('edit_nama_aturan').value = aturan.nama_aturan;
        document.getElementById('edit_upah_per_jam').value = aturan.upah_per_jam;
        document.getElementById('edit_pengali_hari_libur').value = aturan.pengali_hari_libur;
        document.getElementById('edit_tipe_hari').value = aturan.tipe_hari;
        document.getElementById('edit_keterangan').value = aturan.keterangan || '';
        document.getElementById('edit_status_aktif').checked = Boolean(aturan.status_aktif);
        
        document.getElementById('modalEditLembur').classList.remove('hidden');
    }
</script>
@endsection