@extends('layouts.app')
@section('title', 'Manajemen Karyawan')

@section('content')
<div class="space-y-6">

    {{-- ===== HEADER ===== --}}
    <div class="flex items-center justify-between">
        <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-emerald-500 to-teal-600 flex items-center justify-center">
                <i class="fas fa-users text-white"></i>
            </div>
            <div>
                <h1 class="text-xl font-bold text-gray-900">Manajemen Karyawan</h1>
                <p class="text-sm text-gray-500">Kelola data karyawan PT Putra Taro Paloma</p>
            </div>
        </div>
        <button onclick="openModal('modalTambah')"
            class="flex items-center gap-2 px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg text-sm font-semibold transition">
            <i class="fas fa-plus"></i> Tambah Karyawan
        </button>
    </div>

    {{-- ===== STAT CARDS ===== --}}
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
        <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-4 flex items-center gap-3">
            <div class="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center">
                <i class="fas fa-id-card text-blue-500"></i>
            </div>
            <div>
                <p class="text-xs text-gray-500">Total Karyawan</p>
                <p class="text-xl font-bold text-gray-900">{{ $stats['total'] }}</p>
            </div>
        </div>
        <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-4 flex items-center gap-3 cursor-pointer hover:border-emerald-200 transition" onclick="filterByStatus('Aktif')">
            <div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center">
                <i class="fas fa-user-check text-emerald-500"></i>
            </div>
            <div>
                <p class="text-xs text-gray-500">Aktif</p>
                <p class="text-xl font-bold text-emerald-600">{{ $stats['aktif'] }}</p>
            </div>
        </div>
        <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-4 flex items-center gap-3 cursor-pointer hover:border-red-200 transition" onclick="filterByStatus('Resign')">
            <div class="w-10 h-10 rounded-lg bg-red-50 flex items-center justify-center">
                <i class="fas fa-user-times text-red-500"></i>
            </div>
            <div>
                <p class="text-xs text-gray-500">Resign</p>
                <p class="text-xl font-bold text-red-600">{{ $stats['resign'] }}</p>
            </div>
        </div>
        <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-4 flex items-center gap-3 cursor-pointer hover:border-gray-300 transition" onclick="filterByStatus('Pensiun')">
            <div class="w-10 h-10 rounded-lg bg-gray-50 flex items-center justify-center">
                <i class="fas fa-user-clock text-gray-400"></i>
            </div>
            <div>
                <p class="text-xs text-gray-500">Pensiun</p>
                <p class="text-xl font-bold text-gray-600">{{ $stats['pensiun'] }}</p>
            </div>
        </div>
    </div>

    {{-- ===== FILTER & SEARCH (auto-submit) ===== --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4">
        <form method="GET" action="{{ route('karyawan.index') }}" id="filterForm" class="flex flex-col md:flex-row gap-3 items-center">
            {{-- Search --}}
            <div class="flex-1 relative w-full">
                <i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm"></i>
                <input type="text" name="search" id="searchInput" value="{{ request('search') }}"
                    placeholder="Cari NIK, nama, departemen, jabatan..."
                    class="w-full pl-9 pr-8 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 transition">
                @if(request('search'))
                <button type="button" onclick="clearSearch()" class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-300 hover:text-gray-500">
                    <i class="fas fa-times text-xs"></i>
                </button>
                @endif
            </div>

            {{-- Status pills --}}
            <div class="flex gap-2 flex-shrink-0" id="statusPills">
                @foreach([''=>'Semua', 'Aktif'=>'Aktif', 'Resign'=>'Resign', 'Pensiun'=>'Pensiun'] as $val => $label)
                <button type="button"
                    onclick="setStatus('{{ $val }}')"
                    data-status="{{ $val }}"
                    class="status-pill px-3 py-1.5 rounded-full text-xs font-semibold border transition
                        {{ request('status', '') === $val
                            ? 'bg-emerald-600 text-white border-emerald-600'
                            : 'bg-white text-gray-500 border-gray-200 hover:border-emerald-400 hover:text-emerald-600' }}">
                    {{ $label }}
                </button>
                @endforeach
            </div>
            {{-- Hidden status input --}}
            <input type="hidden" name="status" id="statusInput" value="{{ request('status', '') }}">

            {{-- Reset (muncul jika ada filter aktif) --}}
            @if(request('search') || request('status'))
            <a href="{{ route('karyawan.index') }}"
                class="flex items-center gap-1.5 px-3 py-2 bg-gray-100 hover:bg-gray-200 text-gray-500 rounded-lg text-xs font-semibold transition flex-shrink-0">
                <i class="fas fa-times"></i> Reset
            </a>
            @endif

            {{-- Import & Template --}}
            <div class="flex gap-2 flex-shrink-0">
                <a href="{{ route('karyawan.template') }}"
                    class="flex items-center gap-1.5 px-3 py-2 bg-blue-50 hover:bg-blue-100 text-blue-600 rounded-lg text-sm font-semibold transition">
                    <i class="fas fa-download"></i> Template
                </a>
                <button type="button" onclick="document.getElementById('importFile').click()"
                    class="flex items-center gap-1.5 px-3 py-2 bg-amber-50 hover:bg-amber-100 text-amber-600 rounded-lg text-sm font-semibold transition">
                    <i class="fas fa-upload"></i> Import
                </button>
            </div>
        </form>

        {{-- Hidden import form --}}
        <form id="importForm" action="{{ route('karyawan.import') }}" method="POST" enctype="multipart/form-data" class="hidden">
            @csrf
            <input type="file" id="importFile" name="file" accept=".csv,.txt"
                onchange="submitImport()">
        </form>
    </div>

    {{-- ===== TABLE ===== --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="px-5 py-3 border-b border-gray-100 flex items-center justify-between">
            <p class="text-sm text-gray-500">
                Menampilkan <span class="font-semibold text-gray-700">{{ $karyawanList->firstItem() ?? 0 }}–{{ $karyawanList->lastItem() ?? 0 }}</span>
                dari <span class="font-semibold text-gray-700">{{ $karyawanList->total() }}</span> karyawan
                @if(request('status'))
                    — filter: <span class="font-semibold text-emerald-600">{{ request('status') }}</span>
                @endif
            </p>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead class="bg-gray-50 border-b border-gray-100">
                    <tr>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase">No</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase">NIK</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Nama</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Departemen</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Jabatan</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Join Date</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase">End Contract</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Status</th>
                        <th class="px-4 py-3 text-center text-xs font-semibold text-gray-500 uppercase">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-50">
                    @forelse($karyawanList as $i => $k)
                    <tr class="hover:bg-gray-50 transition">
                        <td class="px-4 py-3 text-gray-400 text-xs">{{ $karyawanList->firstItem() + $i }}</td>
                        <td class="px-4 py-3 font-mono text-xs font-semibold text-gray-700">{{ $k->nik }}</td>
                        <td class="px-4 py-3 font-semibold text-gray-800">{{ $k->nama }}</td>
                        <td class="px-4 py-3 text-gray-500">{{ $k->departemen ?: '-' }}</td>
                        <td class="px-4 py-3 text-gray-500">{{ $k->jabatan ?: '-' }}</td>
                        <td class="px-4 py-3 text-gray-500 text-xs">
                            {{ $k->join_company ? \Carbon\Carbon::parse($k->join_company)->format('d/m/Y') : '-' }}
                        </td>
                        <td class="px-4 py-3 text-xs">
                            @if($k->end_contract)
                                @php $daysLeft = now()->diffInDays(\Carbon\Carbon::parse($k->end_contract), false); @endphp
                                <span class="{{ $daysLeft >= 0 && $daysLeft < 30 ? 'text-red-600 font-semibold' : 'text-gray-500' }}">
                                    {{ \Carbon\Carbon::parse($k->end_contract)->format('d/m/Y') }}
                                </span>
                                @if($daysLeft >= 0 && $daysLeft < 30)
                                    <span class="block text-xs text-red-400 font-medium">{{ $daysLeft }}h lagi</span>
                                @endif
                            @else
                                <span class="text-gray-300">-</span>
                            @endif
                        </td>
                        <td class="px-4 py-3">
                            @php
                                $sc = match($k->status_karyawan) {
                                    'Aktif'   => 'bg-emerald-100 text-emerald-700',
                                    'Resign'  => 'bg-red-100 text-red-700',
                                    'Pensiun' => 'bg-gray-100 text-gray-600',
                                    default   => 'bg-gray-100 text-gray-600',
                                };
                            @endphp
                            <span class="inline-flex px-2.5 py-0.5 rounded-full text-xs font-semibold {{ $sc }}">
                                {{ $k->status_karyawan }}
                            </span>
                        </td>
                        <td class="px-4 py-3 text-center">
                            <div class="flex items-center justify-center gap-1">
                                <button onclick='openEditModal(@json($k))'
                                    class="p-1.5 text-blue-600 hover:bg-blue-50 rounded-lg transition" title="Edit">
                                    <i class="fas fa-edit text-sm"></i>
                                </button>
                                <button onclick="confirmHapus('form-del-{{ $k->id }}', '{{ addslashes($k->nama) }}')"
                                    class="p-1.5 text-red-500 hover:bg-red-50 rounded-lg transition" title="Hapus">
                                    <i class="fas fa-trash text-sm"></i>
                                </button>
                                <form id="form-del-{{ $k->id }}" action="{{ route('karyawan.destroy', $k->id) }}" method="POST" class="hidden">
                                    @csrf @method('DELETE')
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="9" class="px-4 py-16 text-center text-gray-400">
                            <i class="fas fa-users text-3xl block mb-2 opacity-20"></i>
                            <p>Belum ada data karyawan</p>
                            @if(request('search') || request('status'))
                            <a href="{{ route('karyawan.index') }}" class="text-emerald-600 text-sm mt-1 inline-block hover:underline">Reset filter</a>
                            @endif
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{-- Pagination --}}
        @if($karyawanList->hasPages())
        <div class="px-5 py-3 border-t border-gray-100 flex items-center justify-between">
            <p class="text-xs text-gray-400">
                Halaman {{ $karyawanList->currentPage() }} dari {{ $karyawanList->lastPage() }}
            </p>
            <div class="flex gap-1">
                @if($karyawanList->onFirstPage())
                    <span class="px-3 py-1.5 text-xs rounded-lg bg-gray-50 text-gray-300 cursor-not-allowed">← Prev</span>
                @else
                    <a href="{{ $karyawanList->previousPageUrl() }}" class="px-3 py-1.5 text-xs rounded-lg bg-gray-100 hover:bg-gray-200 text-gray-600 transition">← Prev</a>
                @endif
                @foreach($karyawanList->getUrlRange(max(1,$karyawanList->currentPage()-2), min($karyawanList->lastPage(),$karyawanList->currentPage()+2)) as $page => $url)
                    @if($page == $karyawanList->currentPage())
                        <span class="px-3 py-1.5 text-xs rounded-lg bg-emerald-600 text-white font-semibold">{{ $page }}</span>
                    @else
                        <a href="{{ $url }}" class="px-3 py-1.5 text-xs rounded-lg bg-gray-100 hover:bg-gray-200 text-gray-600 transition">{{ $page }}</a>
                    @endif
                @endforeach
                @if($karyawanList->hasMorePages())
                    <a href="{{ $karyawanList->nextPageUrl() }}" class="px-3 py-1.5 text-xs rounded-lg bg-gray-100 hover:bg-gray-200 text-gray-600 transition">Next →</a>
                @else
                    <span class="px-3 py-1.5 text-xs rounded-lg bg-gray-50 text-gray-300 cursor-not-allowed">Next →</span>
                @endif
            </div>
        </div>
        @endif
    </div>
</div>

{{-- ===== MODAL TAMBAH ===== --}}
<div id="modalTambah" class="hidden fixed inset-0 z-50 flex items-center justify-center p-4">
    <div class="modal-backdrop absolute inset-0 bg-gray-900/60 backdrop-blur-sm" onclick="closeModal('modalTambah')"></div>
    <div class="modal-box relative bg-white rounded-2xl shadow-2xl w-full max-w-lg max-h-[90vh] overflow-y-auto">
        <div class="flex items-center justify-between p-6 border-b border-gray-100">
            <div class="flex items-center gap-2">
                <div class="w-8 h-8 rounded-lg bg-emerald-100 flex items-center justify-center">
                    <i class="fas fa-user-plus text-emerald-600 text-sm"></i>
                </div>
                <h3 class="font-bold text-gray-800">Tambah Karyawan</h3>
            </div>
            <button onclick="closeModal('modalTambah')" class="text-gray-400 hover:text-gray-600 transition">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <form action="{{ route('karyawan.store') }}" method="POST" class="p-6 space-y-4">
            @csrf
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs font-semibold text-gray-600 mb-1">NIK <span class="text-red-500">*</span></label>
                    <input type="text" name="nik"
                        class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 transition">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-gray-600 mb-1">Status</label>
                    <select name="status_karyawan" class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 transition">
                        <option value="Aktif">Aktif</option>
                        <option value="Resign">Resign</option>
                        <option value="Pensiun">Pensiun</option>
                    </select>
                </div>
            </div>
            <div>
                <label class="block text-xs font-semibold text-gray-600 mb-1">Nama Lengkap <span class="text-red-500">*</span></label>
                <input type="text" name="nama" 
                    class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 transition">
            </div>
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs font-semibold text-gray-600 mb-1">Departemen</label>
                    <input type="text" name="departemen" 
                        class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 transition">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-gray-600 mb-1">Jabatan</label>
                    <input type="text" name="jabatan" 
                        class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 transition">
                </div>
            </div>
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs font-semibold text-gray-600 mb-1">Tanggal Masuk</label>
                    <div class="relative">
                        <input type="text" id="add_join_company" placeholder="dd/mm/yyyy" autocomplete="off"
                            class="flatpickr-input w-full pl-3 pr-8 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 transition">
                        <input type="hidden" name="join_company" id="add_join_company_val">
                        <i class="fas fa-calendar-alt absolute right-3 top-1/2 -translate-y-1/2 text-gray-300 text-sm pointer-events-none"></i>
                    </div>
                </div>
                <div>
                    <label class="block text-xs font-semibold text-gray-600 mb-1">Selesai Kontrak</label>
                    <div class="relative">
                        <input type="text" id="add_end_contract" placeholder="dd/mm/yyyy" autocomplete="off"
                            class="flatpickr-input w-full pl-3 pr-8 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 transition">
                        <input type="hidden" name="end_contract" id="add_end_contract_val">
                        <i class="fas fa-calendar-alt absolute right-3 top-1/2 -translate-y-1/2 text-gray-300 text-sm pointer-events-none"></i>
                    </div>
                </div>
            </div>
            <div class="flex gap-3 pt-2">
                <button type="button" onclick="closeModal('modalTambah')"
                    class="flex-1 py-2.5 border border-gray-200 text-gray-600 rounded-lg text-sm font-semibold hover:bg-gray-50 transition">Batal</button>
                <button type="submit"
                    class="flex-1 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg text-sm font-semibold transition">
                    <i class="fas fa-plus mr-1"></i> Tambah
                </button>
            </div>
        </form>
    </div>
</div>

{{-- ===== MODAL EDIT ===== --}}
<div id="modalEdit" class="hidden fixed inset-0 z-50 flex items-center justify-center p-4">
    <div class="modal-backdrop absolute inset-0 bg-gray-900/60 backdrop-blur-sm" onclick="closeModal('modalEdit')"></div>
    <div class="modal-box relative bg-white rounded-2xl shadow-2xl w-full max-w-lg max-h-[90vh] overflow-y-auto">
        <div class="flex items-center justify-between p-6 border-b border-gray-100">
            <div class="flex items-center gap-2">
                <div class="w-8 h-8 rounded-lg bg-blue-100 flex items-center justify-center">
                    <i class="fas fa-edit text-blue-600 text-sm"></i>
                </div>
                <h3 class="font-bold text-gray-800">Edit Karyawan</h3>
            </div>
            <button onclick="closeModal('modalEdit')" class="text-gray-400 hover:text-gray-600 transition">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <form id="formEdit" action="" method="POST" class="p-6 space-y-4">
            @csrf @method('PUT')
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs font-semibold text-gray-600 mb-1">NIK <span class="text-red-500">*</span></label>
                    <input type="text" name="nik" id="edit_nik" required
                        class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 transition">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-gray-600 mb-1">Status</label>
                    <select name="status_karyawan" id="edit_status" class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 transition">
                        <option value="Aktif">Aktif</option>
                        <option value="Resign">Resign</option>
                        <option value="Pensiun">Pensiun</option>
                    </select>
                </div>
            </div>
            <div>
                <label class="block text-xs font-semibold text-gray-600 mb-1">Nama Lengkap <span class="text-red-500">*</span></label>
                <input type="text" name="nama" id="edit_nama" required
                    class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 transition">
            </div>
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs font-semibold text-gray-600 mb-1">Departemen</label>
                    <input type="text" name="departemen" id="edit_departemen"
                        class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 transition">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-gray-600 mb-1">Jabatan</label>
                    <input type="text" name="jabatan" id="edit_jabatan"
                        class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 transition">
                </div>
            </div>
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs font-semibold text-gray-600 mb-1">Tanggal Masuk</label>
                    <div class="relative">
                        <input type="text" id="edit_join_display" placeholder="dd/mm/yyyy" autocomplete="off"
                            class="flatpickr-input w-full pl-3 pr-8 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 transition">
                        <input type="hidden" name="join_company" id="edit_join_company">
                        <i class="fas fa-calendar-alt absolute right-3 top-1/2 -translate-y-1/2 text-gray-300 text-sm pointer-events-none"></i>
                    </div>
                </div>
                <div>
                    <label class="block text-xs font-semibold text-gray-600 mb-1">Selesai Kontrak</label>
                    <div class="relative">
                        <input type="text" id="edit_end_display" placeholder="dd/mm/yyyy" autocomplete="off"
                            class="flatpickr-input w-full pl-3 pr-8 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 transition">
                        <input type="hidden" name="end_contract" id="edit_end_contract">
                        <i class="fas fa-calendar-alt absolute right-3 top-1/2 -translate-y-1/2 text-gray-300 text-sm pointer-events-none"></i>
                    </div>
                </div>
            </div>
            <div class="flex gap-3 pt-2">
                <button type="button" onclick="closeModal('modalEdit')"
                    class="flex-1 py-2.5 border border-gray-200 text-gray-600 rounded-lg text-sm font-semibold hover:bg-gray-50 transition">Batal</button>
                <button type="submit"
                    class="flex-1 py-2.5 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-semibold transition">
                    <i class="fas fa-save mr-1"></i> Simpan
                </button>
            </div>
        </form>
    </div>
</div>

{{-- ===== CONFIRM DIALOG ===== --}}
<div id="confirmOverlay" class="hidden fixed inset-0 z-[9998] flex items-center justify-center p-4">
    <div class="confirm-backdrop absolute inset-0 bg-gray-900/70 backdrop-blur-sm"></div>
    <div class="confirm-box relative bg-white rounded-2xl shadow-2xl w-full max-w-sm overflow-hidden">
        <div class="flex flex-col items-center pt-8 pb-5 px-6">
            <div class="w-16 h-16 rounded-full bg-red-50 flex items-center justify-center mb-4">
                <i class="fas fa-trash-alt text-red-500 text-2xl icon-pulse"></i>
            </div>
            <h3 class="text-lg font-bold text-gray-800 text-center">Hapus Karyawan?</h3>
            <p id="confirmMessage" class="text-sm text-gray-500 text-center mt-1 leading-relaxed"></p>
        </div>
        <div class="flex border-t border-gray-100">
            <button id="confirmCancel" class="flex-1 py-3.5 text-sm font-semibold text-gray-500 hover:bg-gray-50 transition rounded-bl-2xl border-r border-gray-100">Batal</button>
            <button id="confirmOk" class="flex-1 py-3.5 text-sm font-bold text-white bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 transition rounded-br-2xl">Ya, Hapus</button>
        </div>
    </div>
</div>

{{-- ===== TOAST CONTAINER ===== --}}
<div id="toastContainer" class="fixed top-5 right-5 z-[9999] flex flex-col gap-3 pointer-events-none"></div>

{{-- Flatpickr --}}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.js"></script>

<style>
.modal-box, .confirm-box { animation: modalPop 0.3s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes modalPop { from{opacity:0;transform:scale(0.85) translateY(20px)} to{opacity:1;transform:scale(1) translateY(0)} }
.modal-backdrop,.confirm-backdrop { animation: fadeIn 0.2s ease; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.icon-pulse { animation: iconPulse 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.1s both; }
@keyframes iconPulse { from{transform:scale(0)} to{transform:scale(1)} }
.toast-item { animation: toastSlide 0.4s cubic-bezier(0.34,1.4,0.64,1); pointer-events:all; }
.toast-item.toast-out { animation: toastOut 0.3s ease forwards; }
@keyframes toastSlide { from{opacity:0;transform:translateX(100px) scale(0.8)} to{opacity:1;transform:translateX(0) scale(1)} }
@keyframes toastOut { from{opacity:1;transform:translateX(0) scale(1)} to{opacity:0;transform:translateX(80px) scale(0.9)} }
.toast-progress { height:3px; border-radius:0 0 8px 8px; animation:progress linear forwards; }
@keyframes progress { from{width:100%} to{width:0%} }

/* Format tanggal dd/mm/yyyy via Flatpickr */
.flatpickr-calendar { font-family: inherit; border-radius: 12px !important; box-shadow: 0 10px 40px rgba(0,0,0,0.15) !important; border: 1px solid #e5e7eb !important; }
.flatpickr-day.selected, .flatpickr-day.selected:hover { background: #059669 !important; border-color: #059669 !important; }
.flatpickr-day:hover { background: #d1fae5 !important; }
.flatpickr-months .flatpickr-month { background: #059669 !important; border-radius: 11px 11px 0 0; }
.flatpickr-current-month, .flatpickr-current-month .cur-month,
.flatpickr-current-month input.cur-year,
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { color: #fff !important; fill: #fff !important; }
.flatpickr-weekday { color: #059669 !important; font-weight: 600; }
</style>

<script>
// ── TOAST SYSTEM ──────────────────────────────────────────────────────────
const toastCfg = {
    success: { icon:'fas fa-check-circle', iconColor:'#10b981', bg:'#f0fdf4', border:'#bbf7d0', titleColor:'#065f46', msgColor:'#047857', progressColor:'#10b981', title:'Berhasil!' },
    error:   { icon:'fas fa-times-circle', iconColor:'#ef4444', bg:'#fef2f2', border:'#fecaca', titleColor:'#7f1d1d', msgColor:'#b91c1c', progressColor:'#ef4444', title:'Gagal!' },
    warning: { icon:'fas fa-exclamation-triangle', iconColor:'#f59e0b', bg:'#fffbeb', border:'#fde68a', titleColor:'#78350f', msgColor:'#b45309', progressColor:'#f59e0b', title:'Perhatian!' },
    info:    { icon:'fas fa-info-circle', iconColor:'#3b82f6', bg:'#eff6ff', border:'#bfdbfe', titleColor:'#1e3a8a', msgColor:'#1d4ed8', progressColor:'#3b82f6', title:'Info' }
};
function showToast(type, message, duration = 4000) {
    const c = toastCfg[type] || toastCfg.info;
    const container = document.getElementById('toastContainer');
    const el = document.createElement('div');
    el.className = 'toast-item';
    el.style.cssText = `background:${c.bg};border:1.5px solid ${c.border};border-radius:14px;padding:12px 14px 8px;min-width:280px;max-width:340px;box-shadow:0 8px 32px rgba(0,0,0,0.12);cursor:pointer;`;
    el.innerHTML = `
        <div style="display:flex;align-items:flex-start;gap:10px;">
            <i class="${c.icon}" style="color:${c.iconColor};font-size:1.25rem;margin-top:1px;flex-shrink:0;"></i>
            <div style="flex:1;min-width:0;">
                <div style="font-weight:700;font-size:0.8rem;color:${c.titleColor};">${c.title}</div>
                <div style="font-size:0.78rem;color:${c.msgColor};margin-top:2px;line-height:1.4;">${message}</div>
            </div>
            <button onclick="dismissToast(this.closest('.toast-item'))" style="color:${c.msgColor};opacity:0.5;font-size:0.85rem;margin-left:4px;background:none;border:none;cursor:pointer;padding:0;"><i class="fas fa-times"></i></button>
        </div>
        <div style="margin-top:8px;background:${c.border};border-radius:4px;overflow:hidden;">
            <div class="toast-progress" style="background:${c.progressColor};animation-duration:${duration}ms;"></div>
        </div>`;
    container.appendChild(el);
    el.addEventListener('click', () => dismissToast(el));
    setTimeout(() => dismissToast(el), duration);
}
function dismissToast(el) {
    if (!el || el.classList.contains('toast-out')) return;
    el.classList.add('toast-out');
    setTimeout(() => el.remove(), 300);
}

// ── AUTO SHOW TOAST dari session ──────────────────────────────────────────
@if(session('success'))
    document.addEventListener('DOMContentLoaded', () => showToast('success', @json(session('success'))));
@endif
@if(session('error'))
    document.addEventListener('DOMContentLoaded', () => showToast('error', @json(session('error'))));
@endif
@if($errors->any())
    document.addEventListener('DOMContentLoaded', () => showToast('error', @json($errors->first())));
@endif

// ── FILTER: auto-submit on status pill click ──────────────────────────────
function setStatus(val) {
    document.getElementById('statusInput').value = val;
    // Update pill styles
    document.querySelectorAll('.status-pill').forEach(btn => {
        const active = btn.dataset.status === val;
        btn.className = 'status-pill px-3 py-1.5 rounded-full text-xs font-semibold border transition ' +
            (active ? 'bg-emerald-600 text-white border-emerald-600'
                    : 'bg-white text-gray-500 border-gray-200 hover:border-emerald-400 hover:text-emerald-600');
    });
    document.getElementById('filterForm').submit();
}

// ── FILTER: auto-submit on search with debounce ───────────────────────────
let _searchTimer;
document.getElementById('searchInput').addEventListener('input', function() {
    clearTimeout(_searchTimer);
    _searchTimer = setTimeout(() => document.getElementById('filterForm').submit(), 800);
});

function clearSearch() {
    document.getElementById('searchInput').value = '';
    document.getElementById('filterForm').submit();
}

// ── Klik stat card → filter status ───────────────────────────────────────
function filterByStatus(status) {
    setStatus(status);
}

// ── IMPORT ────────────────────────────────────────────────────────────────

// ── MODAL helpers ─────────────────────────────────────────────────────────
function openModal(id) {
    document.getElementById(id).classList.remove('hidden');
    document.body.style.overflow = 'hidden';
    // Reset picker modal tambah saat dibuka
    if (id === 'modalTambah') {
        fpAddJoin.clear();
        fpAddEnd.clear();
    }
}
function closeModal(id) {
    document.getElementById(id).classList.add('hidden');
    document.body.style.overflow = '';
}
document.addEventListener('keydown', e => {
    if (e.key === 'Escape') {
        ['modalTambah','modalEdit','confirmOverlay'].forEach(id => {
            document.getElementById(id)?.classList.add('hidden');
        });
        document.body.style.overflow = '';
    }
});

// ── FLATPICKR: dd/mm/yyyy, bisa ketik atau pilih kalender ─────────────────
function makePicker(inputId, hiddenId) {
    return flatpickr('#' + inputId, {
        dateFormat: 'd/m/Y',          // tampil dd/mm/yyyy
        allowInput: true,             // bisa diketik manual
        locale: { firstDayOfWeek: 1 },
        disableMobile: true,          // pakai flatpickr di HP juga (konsisten)
        onChange: function(selectedDates, dateStr) {
            // simpan ke hidden input format yyyy-mm-dd untuk server
            if (selectedDates.length > 0) {
                const d = selectedDates[0];
                const ymd = d.getFullYear() + '-'
                    + String(d.getMonth()+1).padStart(2,'0') + '-'
                    + String(d.getDate()).padStart(2,'0');
                document.getElementById(hiddenId).value = ymd;
            } else {
                document.getElementById(hiddenId).value = '';
            }
        }
    });
}
const fpAddJoin = makePicker('add_join_company',  'add_join_company_val');
const fpAddEnd  = makePicker('add_end_contract',  'add_end_contract_val');
const fpEditJoin= makePicker('edit_join_display', 'edit_join_company');
const fpEditEnd = makePicker('edit_end_display',  'edit_end_contract');

// ── MODAL EDIT: isi data ──────────────────────────────────────────────────
function openEditModal(k) {
    document.getElementById('formEdit').action = `/karyawan/${k.id}`;
    document.getElementById('edit_nik').value        = k.nik          || '';
    document.getElementById('edit_nama').value       = k.nama         || '';
    document.getElementById('edit_departemen').value = k.departemen   || '';
    document.getElementById('edit_jabatan').value    = k.jabatan      || '';
    document.getElementById('edit_status').value     = k.status_karyawan || 'Aktif';

    // Set tanggal ke flatpickr (format yyyy-mm-dd ke picker)
    fpEditJoin.setDate(k.join_company ? k.join_company.substring(0,10) : null, true, 'Y-m-d');
    fpEditEnd.setDate(k.end_contract  ? k.end_contract.substring(0,10)  : null, true, 'Y-m-d');

    // Pastikan hidden value juga terisi
    document.getElementById('edit_join_company').value = k.join_company ? k.join_company.substring(0,10) : '';
    document.getElementById('edit_end_contract').value = k.end_contract  ? k.end_contract.substring(0,10)  : '';

    openModal('modalEdit');
}

// ── CONFIRM HAPUS ─────────────────────────────────────────────────────────
let _delFormId = null;
function confirmHapus(formId, nama) {
    _delFormId = formId;
    document.getElementById('confirmMessage').textContent =
        `Yakin ingin menghapus karyawan "${nama}"? Data tidak bisa dikembalikan.`;
    document.getElementById('confirmOverlay').classList.remove('hidden');
    document.body.style.overflow = 'hidden';
}
document.getElementById('confirmOk').addEventListener('click', () => {
    if (_delFormId) document.getElementById(_delFormId).submit();
});
document.getElementById('confirmCancel').addEventListener('click', () => {
    document.getElementById('confirmOverlay').classList.add('hidden');
    document.body.style.overflow = '';
});
document.getElementById('confirmOverlay').addEventListener('click', function(e) {
    if (e.target === this || e.target.classList.contains('confirm-backdrop')) {
        this.classList.add('hidden');
        document.body.style.overflow = '';
    }
});
</script>
@endsection