@extends('layouts.admin')

@section('title', 'Master Komponen & Gaji Pokok')

@section('content')
<div class="space-y-6">
    <!-- Header Page -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
            <div class="flex items-center gap-2">
                <span class="px-2.5 py-1 rounded-lg text-xs font-bold bg-primary-100 text-primary-700 tracking-wide uppercase">
                    Modul Penggajian
                </span>
                <span class="text-xs text-slate-400 font-semibold">• Master Data</span>
            </div>
            <h1 class="text-2xl font-bold text-slate-900 tracking-tight mt-1">Master Komponen & Gaji Pokok</h1>
            <p class="text-xs text-slate-500 mt-1">Kelola gaji pokok karyawan, tunjangan manual, tunjangan lembur otomatis, potongan tetap, serta potongan denda keterlambatan</p>
        </div>
        
        <div class="flex items-center gap-2.5">
            <a href="{{ route('admin.penggajian.gaji-bersih.index') }}" class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl border border-slate-200 bg-white hover:bg-slate-50 text-slate-700 text-xs font-bold transition-all shadow-sm">
                <i data-lucide="receipt" class="w-4 h-4 text-slate-500"></i>
                <span>Buka Data Gaji Bersih</span>
            </a>
            @if($tab === 'komponen')
            <button onclick="bukaModalTambahKomponen()" 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 Komponen</span>
            </button>
            @endif
        </div>
    </div>

    <!-- Alert Notifikasi -->
    @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 shadow-sm">
        <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 validasi:</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 Overview -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <!-- Card 1: Total Gaji Pokok -->
        <div class="p-5 rounded-2xl bg-gradient-to-br from-primary-600 to-primary-700 text-white shadow-lg shadow-primary-600/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-primary-100 uppercase tracking-wider">Total Gaji Pokok</span>
                <span class="p-1.5 rounded-lg bg-white/20 text-white">
                    <i data-lucide="wallet" class="w-4 h-4"></i>
                </span>
            </div>
            <div class="text-2xl font-black tracking-tight text-white mb-1">
                Rp {{ number_format($totalGajiPokok, 0, ',', '.') }}
            </div>
            <p class="text-[11px] text-primary-100 truncate">
                Estimasi akumulasi {{ $totalPegawai }} pegawai aktif
            </p>
        </div>

        <!-- Card 2: Jumlah Pegawai -->
        <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">Pegawai Aktif</span>
                <span class="p-1.5 rounded-lg bg-blue-50 text-blue-600">
                    <i data-lucide="users" class="w-4 h-4"></i>
                </span>
            </div>
            <div class="text-2xl font-black tracking-tight text-slate-800 mb-1">
                {{ $totalPegawai }}
                <span class="text-xs font-medium text-slate-400">Orang</span>
            </div>
            <p class="text-[11px] text-slate-500">
                Penerima payroll perusahaan
            </p>
        </div>

        <!-- Card 3: Komponen Tunjangan -->
        <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-emerald-600 uppercase tracking-wider">Komponen Tunjangan</span>
                <span class="p-1.5 rounded-lg bg-emerald-50 text-emerald-600">
                    <i data-lucide="plus-circle" class="w-4 h-4"></i>
                </span>
            </div>
            <div class="text-2xl font-black tracking-tight text-slate-800 mb-1">
                {{ $totalKomponenTunjangan }}
                <span class="text-xs font-medium text-slate-400">Jenis</span>
            </div>
            <p class="text-[11px] text-emerald-600 font-medium">
                Termasuk Upah Lembur Otomatis
            </p>
        </div>

        <!-- Card 4: Komponen Potongan -->
        <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-rose-600 uppercase tracking-wider">Komponen Potongan</span>
                <span class="p-1.5 rounded-lg bg-rose-50 text-rose-600">
                    <i data-lucide="minus-circle" class="w-4 h-4"></i>
                </span>
            </div>
            <div class="text-2xl font-black tracking-tight text-slate-800 mb-1">
                {{ $totalKomponenPotongan }}
                <span class="text-xs font-medium text-slate-400">Jenis</span>
            </div>
            <p class="text-[11px] text-rose-600 font-medium">
                Termasuk Denda Keterlambatan Otomatis
            </p>
        </div>
    </div>

    <!-- Tab Navigasi -->
    <div class="flex items-center gap-2 border-b border-slate-200 pb-2">
        <a href="{{ route('admin.penggajian.master.index', ['tab' => 'gaji-pokok']) }}" class="flex items-center gap-2 px-4 py-2.5 rounded-xl text-xs font-bold transition-all {{ $tab === 'gaji-pokok' ? 'bg-primary-600 text-white shadow-sm shadow-primary-500/20' : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900' }}">
            <i data-lucide="banknote" class="w-4 h-4"></i>
            <span>Daftar Gaji Pokok Pegawai</span>
            <span class="px-1.5 py-0.5 rounded-md text-[10px] {{ $tab === 'gaji-pokok' ? 'bg-white/20 text-white' : 'bg-slate-200 text-slate-700' }}">{{ $totalPegawai }}</span>
        </a>
        <a href="{{ route('admin.penggajian.master.index', ['tab' => 'komponen']) }}" class="flex items-center gap-2 px-4 py-2.5 rounded-xl text-xs font-bold transition-all {{ $tab === 'komponen' ? 'bg-primary-600 text-white shadow-sm shadow-primary-500/20' : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900' }}">
            <i data-lucide="layers" class="w-4 h-4"></i>
            <span>Master Komponen (Tunjangan & Potongan)</span>
            <span class="px-1.5 py-0.5 rounded-md text-[10px] {{ $tab === 'komponen' ? 'bg-white/20 text-white' : 'bg-slate-200 text-slate-700' }}">{{ $komponenList->count() }}</span>
        </a>
    </div>

    @if($tab === 'gaji-pokok')
    <!-- TAB 1: GAJI POKOK PEGAWAI -->
    <div class="bg-white rounded-2xl border border-slate-200/80 shadow-sm overflow-hidden">
        <!-- Filter Toolbar -->
        <div class="p-4 border-b border-slate-100 bg-slate-50/50 flex flex-col sm:flex-row sm:items-center justify-between gap-3">
            <form action="{{ route('admin.penggajian.master.index') }}" method="GET" class="flex flex-wrap items-center gap-3">
                <input type="hidden" name="tab" value="gaji-pokok">
                
                <!-- Filter Departemen -->
                <div class="w-48">
                    <select name="departemen_id" onchange="this.form.submit()" class="w-full text-xs font-semibold px-3 py-2 rounded-xl border border-slate-200 bg-white focus:outline-none focus:ring-2 focus:ring-primary-500 text-slate-700">
                        <option value="">Semua Departemen</option>
                        @foreach($departemenList as $dep)
                            <option value="{{ $dep->id }}" {{ $departemenId == $dep->id ? 'selected' : '' }}>
                                {{ $dep->nama_departemen }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <!-- Input Cari Nama / NIP -->
                <div class="relative w-64">
                    <i data-lucide="search" class="w-3.5 h-3.5 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2"></i>
                    <input type="text" name="search" value="{{ $search }}" placeholder="Cari NIP atau nama pegawai..." class="w-full text-xs font-medium pl-9 pr-3 py-2 rounded-xl border border-slate-200 bg-white focus:outline-none focus:ring-2 focus:ring-primary-500 text-slate-700">
                </div>

                <button type="submit" class="px-3 py-2 rounded-xl bg-slate-800 text-white text-xs font-bold hover:bg-slate-900 transition-colors">
                    Filter
                </button>

                @if($departemenId || $search)
                <a href="{{ route('admin.penggajian.master.index', ['tab' => 'gaji-pokok']) }}" class="px-3 py-2 rounded-xl text-xs font-medium text-slate-600 hover:text-slate-900 hover:bg-slate-200 transition-colors">
                    Reset
                </a>
                @endif
            </form>

            <span class="text-xs font-medium text-slate-400">
                Menampilkan {{ $pegawaiList->total() }} pegawai
            </span>
        </div>

        <!-- Tabel Pegawai & Gaji Pokok -->
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse text-xs">
                <thead>
                    <tr class="bg-slate-50/75 border-b border-slate-100 text-slate-500 font-bold uppercase tracking-wider text-[11px]">
                        <th class="py-3 px-4">Pegawai</th>
                        <th class="py-3 px-4">Departemen & Jabatan</th>
                        <th class="py-3 px-4 text-right">Gaji Pokok (IDR)</th>
                        <th class="py-3 px-4">Komponen Tetap Aktif</th>
                        <th class="py-3 px-4 text-center">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 text-slate-700 font-medium">
                    @forelse($pegawaiList as $pegawai)
                    <tr class="hover:bg-slate-50/75 transition-colors">
                        <td class="py-3 px-4">
                            <div class="flex items-center gap-3">
                                <div class="w-9 h-9 rounded-xl bg-primary-100 text-primary-700 font-bold flex items-center justify-center text-xs shrink-0 overflow-hidden">
                                    @if($pegawai->foto_profil)
                                        <img src="{{ asset('storage/' . $pegawai->foto_profil) }}" alt="{{ $pegawai->nama_lengkap }}" class="w-full h-full object-cover">
                                    @else
                                        {{ $pegawai->inisial }}
                                    @endif
                                </div>
                                <div>
                                    <p class="font-bold text-slate-900">{{ $pegawai->nama_lengkap }}</p>
                                    <p class="text-[11px] text-slate-400">NIP: {{ $pegawai->nip }}</p>
                                </div>
                            </div>
                        </td>
                        <td class="py-3 px-4">
                            <p class="font-semibold text-slate-800">{{ $pegawai->departemen?->nama_departemen ?? '-' }}</p>
                            <p class="text-[11px] text-slate-400">{{ $pegawai->jabatan?->nama_jabatan ?? '-' }}</p>
                        </td>
                        <td class="py-3 px-4 text-right">
                            <span class="inline-block px-3 py-1.5 rounded-xl bg-slate-100 font-bold text-slate-900 text-xs">
                                Rp {{ number_format($pegawai->gaji_pokok, 0, ',', '.') }}
                            </span>
                        </td>
                        <td class="py-3 px-4">
                            <div class="flex flex-wrap gap-1 max-w-xs">
                                @php
                                    $kompAktif = $pegawai->komponenGaji->where('status_aktif', true);
                                @endphp
                                @if($kompAktif->isNotEmpty())
                                    @foreach($kompAktif->take(3) as $pk)
                                        <span class="inline-flex items-center px-2 py-0.5 rounded-md text-[10px] font-semibold {{ $pk->komponenGaji?->jenis === 'tunjangan' ? 'bg-emerald-50 text-emerald-700 border border-emerald-200' : 'bg-rose-50 text-rose-700 border border-rose-200' }}">
                                            {{ $pk->komponenGaji?->nama_komponen }}: Rp {{ number_format($pk->nominal, 0, ',', '.') }}
                                        </span>
                                    @endforeach
                                    @if($kompAktif->count() > 3)
                                        <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] bg-slate-100 text-slate-600 font-semibold">
                                            +{{ $kompAktif->count() - 3 }} lainnya
                                        </span>
                                    @endif
                                @else
                                    <span class="text-[11px] text-slate-400 italic">Belum ada komponen khusus</span>
                                @endif
                            </div>
                        </td>
                        <td class="py-3 px-4">
                            <div class="flex items-center justify-center gap-1.5">
                                <button type="button" onclick="bukaModalEditGaji('{{ $pegawai->id }}', '{{ addslashes($pegawai->nama_lengkap) }}', '{{ $pegawai->gaji_pokok }}')" class="p-2 rounded-xl text-primary-600 hover:bg-primary-50 transition-colors" title="Edit Gaji Pokok">
                                    <i data-lucide="edit-3" class="w-4 h-4"></i>
                                </button>
                                <button type="button" onclick="bukaModalAturKomponen('{{ $pegawai->id }}', '{{ addslashes($pegawai->nama_lengkap) }}')" class="p-2 rounded-xl text-slate-600 hover:bg-slate-100 transition-colors" title="Atur Komponen Tunjangan & Potongan Pegawai">
                                    <i data-lucide="sliders" class="w-4 h-4"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="5" class="py-8 text-center text-slate-400">
                            <i data-lucide="inbox" class="w-8 h-8 mx-auto mb-2 opacity-50"></i>
                            <p>Data pegawai tidak ditemukan.</p>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($pegawaiList->hasPages())
        <div class="p-4 border-t border-slate-100">
            {{ $pegawaiList->links() }}
        </div>
        @endif
    </div>

    @else
    <!-- TAB 2: MASTER KOMPONEN GAJI (TUNJANGAN & POTONGAN) -->
    <div class="bg-white rounded-2xl border border-slate-200/80 shadow-sm overflow-hidden">
        <div class="p-4 border-b border-slate-100 bg-slate-50/50 flex items-center justify-between">
            <div>
                <h3 class="text-sm font-bold text-slate-900">Daftar Komponen Penggajian</h3>
                <p class="text-xs text-slate-500">Master jenis tunjangan (penambah) dan potongan (pengurang) gaji</p>
            </div>
            <button onclick="bukaModalTambahKomponen()" class="inline-flex items-center gap-1.5 px-3 py-2 rounded-xl bg-primary-600 hover:bg-primary-700 text-white text-xs font-bold shadow-sm shadow-primary-500/20 transition-all">
                <i data-lucide="plus" class="w-3.5 h-3.5"></i>
                <span>Komponen Baru</span>
            </button>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse text-xs">
                <thead>
                    <tr class="bg-slate-50/75 border-b border-slate-100 text-slate-500 font-bold uppercase tracking-wider text-[11px]">
                        <th class="py-3 px-4">Kode & Nama Komponen</th>
                        <th class="py-3 px-4">Jenis</th>
                        <th class="py-3 px-4">Tipe Kalkulasi / Sumber</th>
                        <th class="py-3 px-4 text-right">Nilai Default</th>
                        <th class="py-3 px-4 text-center">Status</th>
                        <th class="py-3 px-4 text-center">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 text-slate-700 font-medium">
                    @forelse($komponenList as $komponen)
                    <tr class="hover:bg-slate-50/75 transition-colors">
                        <td class="py-3 px-4">
                            <div class="flex items-center gap-2.5">
                                <span class="px-2 py-1 rounded-lg bg-slate-100 font-mono text-[11px] font-bold text-slate-700">
                                    {{ $komponen->kode_komponen }}
                                </span>
                                <div>
                                    <p class="font-bold text-slate-900">{{ $komponen->nama_komponen }}</p>
                                    @if($komponen->keterangan)
                                    <p class="text-[11px] text-slate-400">{{ $komponen->keterangan }}</p>
                                    @endif
                                </div>
                            </div>
                        </td>
                        <td class="py-3 px-4">
                            @if($komponen->jenis === 'tunjangan')
                                <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-lg text-xs font-bold bg-emerald-50 text-emerald-700 border border-emerald-200">
                                    <i data-lucide="trending-up" class="w-3 h-3"></i>
                                    <span>Tunjangan (+)</span>
                                </span>
                            @else
                                <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-lg text-xs font-bold bg-rose-50 text-rose-700 border border-rose-200">
                                    <i data-lucide="trending-down" class="w-3 h-3"></i>
                                    <span>Potongan (-)</span>
                                </span>
                            @endif
                        </td>
                        <td class="py-3 px-4">
                            @if($komponen->tipe_nilai === 'lembur_otomatis')
                                <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-bold bg-amber-50 text-amber-700 border border-amber-200">
                                    <i data-lucide="timer" class="w-3.5 h-3.5"></i>
                                    <span>Otomatis dari Total Lembur</span>
                                </span>
                            @elseif($komponen->tipe_nilai === 'denda_otomatis')
                                <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-bold bg-purple-50 text-purple-700 border border-purple-200">
                                    <i data-lucide="alert-triangle" class="w-3.5 h-3.5"></i>
                                    <span>Otomatis Denda Keterlambatan</span>
                                </span>
                            @else
                                <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-bold bg-blue-50 text-blue-700 border border-blue-200">
                                    <i data-lucide="sliders" class="w-3.5 h-3.5"></i>
                                    <span>Fix Manual Tetap</span>
                                </span>
                            @endif
                        </td>
                        <td class="py-3 px-4 text-right">
                            @if($komponen->tipe_nilai === 'tetap')
                                <span class="font-bold text-slate-800">Rp {{ number_format($komponen->nilai_default, 0, ',', '.') }}</span>
                            @else
                                <span class="text-[11px] text-slate-400 italic">Dihitung otomatis per bulan</span>
                            @endif
                        </td>
                        <td class="py-3 px-4 text-center">
                            @if($komponen->status_aktif)
                                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold bg-emerald-100 text-emerald-800">
                                    Aktif
                                </span>
                            @else
                                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold bg-slate-100 text-slate-500">
                                    Nonaktif
                                </span>
                            @endif
                        </td>
                        <td class="py-3 px-4 text-center">
                            <div class="flex items-center justify-center gap-1.5">
                                <button type="button" onclick="bukaModalEditKomponen({{ json_encode($komponen) }})" class="p-2 rounded-xl text-primary-600 hover:bg-primary-50 transition-colors" title="Edit Komponen">
                                    <i data-lucide="edit-3" class="w-4 h-4"></i>
                                </button>
                                @if(!in_array($komponen->tipe_nilai, ['lembur_otomatis', 'denda_otomatis']))
                                <button type="button" onclick="konfirmasiHapusKomponen('{{ $komponen->id }}', '{{ addslashes($komponen->nama_komponen) }}')" class="p-2 rounded-xl text-rose-600 hover:bg-rose-50 transition-colors" title="Hapus Komponen">
                                    <i data-lucide="trash-2" class="w-4 h-4"></i>
                                </button>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="py-8 text-center text-slate-400">
                            <i data-lucide="inbox" class="w-8 h-8 mx-auto mb-2 opacity-50"></i>
                            <p>Belum ada komponen gaji terdaftar.</p>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
    @endif
</div>

<!-- ==================== MODAL EDIT GAJI POKOK ==================== -->
<div id="modalEditGaji" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/50 backdrop-blur-sm hidden">
    <div class="bg-white rounded-2xl max-w-md w-full shadow-2xl overflow-hidden border border-slate-100">
        <form id="formEditGaji" method="POST" action="">
            @csrf
            @method('PUT')
            <div class="p-5 border-b border-slate-100 flex items-center justify-between bg-slate-50/50">
                <div class="flex items-center gap-2.5">
                    <div class="p-2 rounded-xl bg-primary-100 text-primary-700">
                        <i data-lucide="wallet" class="w-5 h-5"></i>
                    </div>
                    <div>
                        <h3 class="text-sm font-bold text-slate-900">Edit Gaji Pokok Pegawai</h3>
                        <p id="labelNamaPegawaiGaji" class="text-xs text-slate-500 font-medium"></p>
                    </div>
                </div>
                <button type="button" onclick="tutupModal('modalEditGaji')" class="text-slate-400 hover:text-slate-600 p-1 rounded-lg hover:bg-slate-100">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>

            <div class="p-5 space-y-4">
                <div>
                    <label class="block text-xs font-bold text-slate-700 mb-1.5">Nominal Gaji Pokok (Rp) <span class="text-rose-500">*</span></label>
                    <div class="relative">
                        <span class="absolute left-3 top-1/2 -translate-y-1/2 text-xs font-bold text-slate-400">Rp</span>
                        <input type="number" id="inputGajiPokok" name="gaji_pokok" min="0" step="1000" required class="w-full text-sm font-bold pl-10 pr-4 py-2.5 rounded-xl border border-slate-200 bg-white focus:outline-none focus:ring-2 focus:ring-primary-500 text-slate-900">
                    </div>
                    <p class="text-[11px] text-slate-400 mt-1">Gaji pokok dasar sebelum penambahan tunjangan dan potongan bulanan.</p>
                </div>
            </div>

            <div class="p-4 border-t border-slate-100 bg-slate-50/50 flex items-center justify-end gap-2.5">
                <button type="button" onclick="tutupModal('modalEditGaji')" class="px-4 py-2 rounded-xl text-xs font-semibold text-slate-600 hover:bg-slate-100 transition-colors">
                    Batal
                </button>
                <button type="submit" class="px-4 py-2 rounded-xl text-xs font-bold bg-primary-600 hover:bg-primary-700 text-white shadow-sm shadow-primary-500/20 transition-all">
                    Simpan Perubahan
                </button>
            </div>
        </form>
    </div>
</div>

<!-- ==================== MODAL TAMBAH / EDIT KOMPONEN GAJI ==================== -->
<div id="modalKomponen" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/50 backdrop-blur-sm hidden">
    <div class="bg-white rounded-2xl max-w-lg w-full shadow-2xl overflow-hidden border border-slate-100">
        <form id="formKomponen" method="POST" action="{{ route('admin.penggajian.master.komponen.store') }}">
            @csrf
            <input type="hidden" name="_method" id="methodKomponen" value="POST">
            
            <div class="p-5 border-b border-slate-100 flex items-center justify-between bg-slate-50/50">
                <div class="flex items-center gap-2.5">
                    <div class="p-2 rounded-xl bg-primary-100 text-primary-700">
                        <i data-lucide="layers" class="w-5 h-5"></i>
                    </div>
                    <div>
                        <h3 id="modalKomponenTitle" class="text-sm font-bold text-slate-900">Tambah Komponen Gaji Baru</h3>
                        <p class="text-xs text-slate-500 font-medium">Tunjangan penambah atau potongan pengurang gaji</p>
                    </div>
                </div>
                <button type="button" onclick="tutupModal('modalKomponen')" class="text-slate-400 hover:text-slate-600 p-1 rounded-lg hover:bg-slate-100">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>

            <div class="p-5 space-y-4 max-h-[75vh] overflow-y-auto">
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-xs font-bold text-slate-700 mb-1.5">Kode Komponen <span class="text-rose-500">*</span></label>
                        <input type="text" id="inputKodeKomponen" name="kode_komponen" placeholder="Contoh: TJ-TRANS" required class="w-full text-xs font-bold px-3 py-2.5 rounded-xl border border-slate-200 bg-white focus:outline-none focus:ring-2 focus:ring-primary-500 uppercase">
                    </div>
                    <div>
                        <label class="block text-xs font-bold text-slate-700 mb-1.5">Jenis Komponen <span class="text-rose-500">*</span></label>
                        <select id="selectJenisKomponen" name="jenis" required class="w-full text-xs font-bold px-3 py-2.5 rounded-xl border border-slate-200 bg-white focus:outline-none focus:ring-2 focus:ring-primary-500">
                            <option value="tunjangan">Tunjangan (Penambah Gaji)</option>
                            <option value="potongan">Potongan (Pengurang Gaji)</option>
                        </select>
                    </div>
                </div>

                <div>
                    <label class="block text-xs font-bold text-slate-700 mb-1.5">Nama Komponen <span class="text-rose-500">*</span></label>
                    <input type="text" id="inputNamaKomponen" name="nama_komponen" placeholder="Contoh: Tunjangan Makan & Transportasi" required class="w-full text-xs font-semibold px-3 py-2.5 rounded-xl border border-slate-200 bg-white focus:outline-none focus:ring-2 focus:ring-primary-500">
                </div>

                <div>
                    <label class="block text-xs font-bold text-slate-700 mb-1.5">Tipe Kalkulasi / Sumber Nilai <span class="text-rose-500">*</span></label>
                    <select id="selectTipeNilai" name="tipe_nilai" onchange="toggleTipeNilai(this.value)" required class="w-full text-xs font-bold px-3 py-2.5 rounded-xl border border-slate-200 bg-white focus:outline-none focus:ring-2 focus:ring-primary-500">
                        <option value="tetap">Fix / Tetap Manual (Input Nominal Rutin)</option>
                        <option value="lembur_otomatis">Otomatis dari Akumulasi Total Upah Lembur</option>
                        <option value="denda_otomatis">Otomatis dari Total Denda Keterlambatan Absensi</option>
                    </select>
                    <p class="text-[11px] text-slate-400 mt-1" id="keteranganTipeNilai">
                        Nominal bersifat tetap bulanan dan dapat disesuaikan per pegawai.
                    </p>
                </div>

                <div id="wrapperNilaiDefault">
                    <label class="block text-xs font-bold text-slate-700 mb-1.5">Nilai Default Bulanan (Rp)</label>
                    <div class="relative">
                        <span class="absolute left-3 top-1/2 -translate-y-1/2 text-xs font-bold text-slate-400">Rp</span>
                        <input type="number" id="inputNilaiDefault" name="nilai_default" min="0" step="1000" value="0" class="w-full text-xs font-bold pl-10 pr-3 py-2.5 rounded-xl border border-slate-200 bg-white focus:outline-none focus:ring-2 focus:ring-primary-500">
                    </div>
                </div>

                <div>
                    <label class="block text-xs font-bold text-slate-700 mb-1.5">Keterangan Tambahan</label>
                    <input type="text" id="inputKeteranganKomponen" name="keterangan" placeholder="Contoh: Diberikan kepada seluruh staf tetap" class="w-full text-xs font-medium px-3 py-2.5 rounded-xl border border-slate-200 bg-white focus:outline-none focus:ring-2 focus:ring-primary-500">
                </div>

                <div id="wrapperTerapkanSemua" class="p-3 rounded-xl bg-slate-50 border border-slate-100 flex items-center gap-2">
                    <input type="checkbox" id="checkTerapkanSemua" name="terapkan_ke_semua" value="1" class="rounded border-slate-300 text-primary-600 focus:ring-primary-500">
                    <label for="checkTerapkanSemua" class="text-xs font-semibold text-slate-700 cursor-pointer">
                        Otomatis terapkan komponen ini ke semua pegawai aktif saat ini
                    </label>
                </div>
            </div>

            <div class="p-4 border-t border-slate-100 bg-slate-50/50 flex items-center justify-end gap-2.5">
                <button type="button" onclick="tutupModal('modalKomponen')" class="px-4 py-2 rounded-xl text-xs font-semibold text-slate-600 hover:bg-slate-100 transition-colors">
                    Batal
                </button>
                <button type="submit" class="px-4 py-2 rounded-xl text-xs font-bold bg-primary-600 hover:bg-primary-700 text-white shadow-sm shadow-primary-500/20 transition-all">
                    Simpan Komponen
                </button>
            </div>
        </form>
    </div>
</div>

<!-- ==================== MODAL ATUR KOMPONEN PEGAWAI ==================== -->
<div id="modalAturKomponen" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/50 backdrop-blur-sm hidden">
    <div class="bg-white rounded-2xl max-w-xl w-full shadow-2xl overflow-hidden border border-slate-100">
        <form id="formAturKomponenPegawai" method="POST" action="">
            @csrf
            <div class="p-5 border-b border-slate-100 flex items-center justify-between bg-slate-50/50">
                <div class="flex items-center gap-2.5">
                    <div class="p-2 rounded-xl bg-primary-100 text-primary-700">
                        <i data-lucide="sliders" class="w-5 h-5"></i>
                    </div>
                    <div>
                        <h3 class="text-sm font-bold text-slate-900">Atur Komponen Tunjangan & Potongan</h3>
                        <p id="labelNamaPegawaiAtur" class="text-xs text-slate-500 font-semibold"></p>
                    </div>
                </div>
                <button type="button" onclick="tutupModal('modalAturKomponen')" class="text-slate-400 hover:text-slate-600 p-1 rounded-lg hover:bg-slate-100">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>

            <div class="p-5 max-h-[60vh] overflow-y-auto">
                <p class="text-xs text-slate-500 mb-3">
                    Centang komponen yang berlaku untuk pegawai ini dan tentukan nominalnya. (Komponen lembur & denda keterlambatan dihitung otomatis dari riwayat absensi).
                </p>
                <div id="listKomponenPegawaiContainer" class="space-y-3">
                    <!-- Konten diisi lewat AJAX -->
                    <div class="py-8 text-center text-slate-400">
                        <i data-lucide="loader-2" class="w-6 h-6 mx-auto animate-spin mb-2"></i>
                        <p class="text-xs font-medium">Memuat data komponen...</p>
                    </div>
                </div>
            </div>

            <div class="p-4 border-t border-slate-100 bg-slate-50/50 flex items-center justify-end gap-2.5">
                <button type="button" onclick="tutupModal('modalAturKomponen')" class="px-4 py-2 rounded-xl text-xs font-semibold text-slate-600 hover:bg-slate-100 transition-colors">
                    Batal
                </button>
                <button type="submit" class="px-4 py-2 rounded-xl text-xs font-bold bg-primary-600 hover:bg-primary-700 text-white shadow-sm shadow-primary-500/20 transition-all">
                    Simpan Pengaturan Pegawai
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Form Hapus Komponen Helper -->
<form id="formHapusKomponen" method="POST" action="" class="hidden">
    @csrf
    @method('DELETE')
</form>

@endsection

@push('scripts')
<script>
    function tutupModal(id) {
        document.getElementById(id).classList.add('hidden');
    }

    function bukaModalEditGaji(id, nama, gajiPokok) {
        document.getElementById('labelNamaPegawaiGaji').innerText = nama;
        document.getElementById('inputGajiPokok').value = Math.round(gajiPokok);
        document.getElementById('formEditGaji').action = `/admin/penggajian/master/gaji-pokok/${id}`;
        document.getElementById('modalEditGaji').classList.remove('hidden');
    }

    function bukaModalTambahKomponen() {
        document.getElementById('modalKomponenTitle').innerText = 'Tambah Komponen Gaji Baru';
        document.getElementById('formKomponen').action = "{{ route('admin.penggajian.master.komponen.store') }}";
        document.getElementById('methodKomponen').value = 'POST';
        document.getElementById('inputKodeKomponen').value = '';
        document.getElementById('inputNamaKomponen').value = '';
        document.getElementById('selectJenisKomponen').value = 'tunjangan';
        document.getElementById('selectTipeNilai').value = 'tetap';
        document.getElementById('inputNilaiDefault').value = '0';
        document.getElementById('inputKeteranganKomponen').value = '';
        document.getElementById('wrapperTerapkanSemua').classList.remove('hidden');
        toggleTipeNilai('tetap');
        document.getElementById('modalKomponen').classList.remove('hidden');
    }

    function bukaModalEditKomponen(komp) {
        document.getElementById('modalKomponenTitle').innerText = 'Edit Komponen: ' + komp.nama_komponen;
        document.getElementById('formKomponen').action = `/admin/penggajian/master/komponen/${komp.id}`;
        document.getElementById('methodKomponen').value = 'PUT';
        document.getElementById('inputKodeKomponen').value = komp.kode_komponen;
        document.getElementById('inputNamaKomponen').value = komp.nama_komponen;
        document.getElementById('selectJenisKomponen').value = komp.jenis;
        document.getElementById('selectTipeNilai').value = komp.tipe_nilai;
        document.getElementById('inputNilaiDefault').value = Math.round(komp.nilai_default);
        document.getElementById('inputKeteranganKomponen').value = komp.keterangan || '';
        document.getElementById('wrapperTerapkanSemua').classList.add('hidden');
        toggleTipeNilai(komp.tipe_nilai);
        document.getElementById('modalKomponen').classList.remove('hidden');
    }

    function toggleTipeNilai(tipe) {
        const wrapper = document.getElementById('wrapperNilaiDefault');
        const ket = document.getElementById('keteranganTipeNilai');
        if (tipe === 'lembur_otomatis') {
            wrapper.classList.add('hidden');
            ket.innerText = 'Nilai tunjangan ini akan otomatis ditarik dari total upah lembur karyawan yang disetujui pada bulan tersebut.';
        } else if (tipe === 'denda_otomatis') {
            wrapper.classList.add('hidden');
            ket.innerText = 'Nilai potongan ini akan otomatis ditarik dari total denda keterlambatan karyawan pada bulan tersebut.';
        } else {
            wrapper.classList.remove('hidden');
            ket.innerText = 'Nominal bersifat tetap bulanan dan dapat disesuaikan per pegawai.';
        }
    }

    function konfirmasiHapusKomponen(id, nama) {
        if (confirm(`Apakah Anda yakin ingin menghapus komponen "${nama}"?`)) {
            const form = document.getElementById('formHapusKomponen');
            form.action = `/admin/penggajian/master/komponen/${id}`;
            form.submit();
        }
    }

    function bukaModalAturKomponen(pegawaiId, namaPegawai) {
        document.getElementById('labelNamaPegawaiAtur').innerText = namaPegawai;
        document.getElementById('formAturKomponenPegawai').action = `/admin/penggajian/master/pegawai-komponen/${pegawaiId}`;
        const container = document.getElementById('listKomponenPegawaiContainer');
        container.innerHTML = `
            <div class="py-8 text-center text-slate-400">
                <i data-lucide="loader-2" class="w-6 h-6 mx-auto animate-spin mb-2"></i>
                <p class="text-xs font-medium">Memuat komponen pegawai...</p>
            </div>
        `;
        document.getElementById('modalAturKomponen').classList.remove('hidden');
        lucide.createIcons();

        fetch(`/admin/penggajian/master/pegawai-komponen/${pegawaiId}`)
            .then(res => res.json())
            .then(res => {
                if (!res.success || !res.komponen || res.komponen.length === 0) {
                    container.innerHTML = `
                        <div class="p-4 rounded-xl bg-amber-50 text-amber-800 text-xs">
                            Belum ada master komponen tetap yang tersedia. Buat di tab "Master Komponen".
                        </div>
                    `;
                    return;
                }

                let html = '';
                res.komponen.forEach(k => {
                    const isChecked = k.is_assigned ? 'checked' : '';
                    const nominalVal = Math.round(k.nominal);
                    const jenisBadge = k.jenis === 'tunjangan' 
                        ? '<span class="px-2 py-0.5 rounded text-[10px] font-bold bg-emerald-100 text-emerald-800">Tunjangan (+)</span>'
                        : '<span class="px-2 py-0.5 rounded text-[10px] font-bold bg-rose-100 text-rose-800">Potongan (-)</span>';

                    html += `
                        <div class="p-3.5 rounded-xl border border-slate-200 bg-white hover:border-primary-300 transition-colors">
                            <div class="flex items-start justify-between gap-3">
                                <div class="flex items-start gap-2.5">
                                    <input type="checkbox" id="check_komp_${k.id}" name="komponen[${k.id}][checked]" value="1" ${isChecked} class="mt-1 rounded border-slate-300 text-primary-600 focus:ring-primary-500">
                                    <div>
                                        <label for="check_komp_${k.id}" class="text-xs font-bold text-slate-900 cursor-pointer block">
                                            ${k.nama_komponen}
                                        </label>
                                        <span class="text-[10px] font-mono text-slate-400">${k.kode_komponen}</span>
                                        <div class="mt-1">${jenisBadge}</div>
                                    </div>
                                </div>
                                <div class="w-36">
                                    <label class="block text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-1">Nominal (Rp)</label>
                                    <input type="number" name="komponen[${k.id}][nominal]" value="${nominalVal}" min="0" step="1000" class="w-full text-xs font-bold px-2.5 py-1.5 rounded-lg border border-slate-200 bg-slate-50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-primary-500 text-right">
                                </div>
                            </div>
                        </div>
                    `;
                });

                container.innerHTML = html;
            })
            .catch(err => {
                container.innerHTML = `
                    <div class="p-4 rounded-xl bg-rose-50 text-rose-800 text-xs">
                        Gagal memuat komponen pegawai: ${err.message}
                    </div>
                `;
            });
    }
</script>
@endpush