<x-app-layout title="Data Jabatan">

@push('styles')
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<style>
:root {
    --p: #4f46e5; --pd: #3730a3; --pl: #eef2ff; --pm: rgba(79,70,229,.12);
    --ok: #059669; --okl: #ecfdf5; --err: #dc2626; --errl: #fef2f2;
    --txt: #0f172a; --mut: #64748b; --mut2: #94a3b8;
    --bdr: #e2e8f0; --bg: #f0f4ff; --wh: #ffffff;
    --sh: 0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.05);
    --r: 16px; --rs: 10px;
}

body { font-family: 'Plus Jakarta Sans', sans-serif; background: var(--bg); color: var(--txt); }
.pg { max-width: 900px; margin: 0 auto; padding: 24px 20px 80px; }

/* Header */
.pg-hd { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
.pg-title { font-size: 1.5rem; font-weight: 900; letter-spacing: -.03em; }
.pg-sub { font-size: 13px; color: var(--mut); font-weight: 500; }

/* Buttons */
.btn-primary { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: var(--rs); background: var(--p); color: #fff; border: none; font-size: 14px; font-weight: 700; cursor: pointer; transition: all .2s; text-decoration: none; }
.btn-primary:hover { background: var(--pd); transform: translateY(-1px); }
.btn-ghost { padding: 10px 18px; border-radius: var(--rs); background: #fff; color: var(--mut); border: 1.5px solid var(--bdr); font-size: 14px; font-weight: 700; cursor: pointer; }

/* Card & Table */
.card { background: var(--wh); border: 1px solid var(--bdr); border-radius: var(--r); box-shadow: var(--sh); overflow: hidden; }
.card-hd { padding: 20px; border-bottom: 1px solid var(--bdr); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.card-title { font-size: 15px; font-weight: 800; }
.cnt-badge { background: var(--pl); color: var(--p); font-size: 11px; padding: 2px 8px; border-radius: 100px; margin-left: 6px; }

.tbl-wrap { width: 100%; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { padding: 12px 20px; text-align: left; font-size: 11px; font-weight: 800; text-transform: uppercase; color: var(--mut2); background: #fafbff; border-bottom: 1px solid var(--bdr); }
.tbl td { padding: 16px 20px; border-bottom: 1px solid #f1f5f9; font-size: 14px; }

/* Badge & Action */
.jab-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--pl); color: var(--p); padding: 6px 14px; border-radius: 100px; font-weight: 700; font-size: 13px; border: 1px solid #c7d2fe; }
.act-cell { display: flex; gap: 8px; }
.act-btn { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--bdr); cursor: pointer; transition: all .15s; }
.act-edit { background: #f5f3ff; color: var(--p); border-color: #ddd6fe; }
.act-del { background: #fff1f2; color: var(--err); border-color: #fecaca; }

/* Modal */
.modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 100; padding: 20px; }
.modal-bg { position: absolute; inset: 0; background: rgba(15,23,42,0.4); backdrop-filter: blur(4px); }
.modal-box { position: relative; background: #fff; width: 100%; max-width: 400px; border-radius: 20px; overflow: hidden; animation: mIn .3s ease-out; }
@keyframes mIn { from { opacity: 0; transform: scale(0.95) translateY(10px); } }
.modal-hd { padding: 20px; border-bottom: 1px solid var(--bdr); display: flex; justify-content: space-between; align-items: center; }
.modal-body { padding: 20px; }
.modal-ft { padding: 16px 20px; background: #f8fafc; border-top: 1px solid var(--bdr); display: flex; justify-content: flex-end; gap: 10px; }

/* Form Elements */
.fg { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.fg label { font-size: 12px; font-weight: 700; color: var(--mut); }
.fg input { padding: 12px; border: 1.5px solid var(--bdr); border-radius: 10px; font-family: inherit; font-weight: 600; outline: none; }
.fg input:focus { border-color: var(--p); box-shadow: 0 0 0 3px var(--pm); }

/* Responsive */
@media (max-width: 640px) {
    .pg-hd { flex-direction: column; align-items: flex-start; }
    .btn-primary { width: 100%; justify-content: center; }
    .search { width: 100%; }
    .search input { width: 100% !important; }
    
    .tbl thead { display: none; }
    .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; }
    .tbl tr { padding: 15px; border-bottom: 8px solid var(--bg); }
    .tbl td { padding: 8px 0; border: none; display: flex; justify-content: space-between; align-items: center; }
    .tbl td::before { content: attr(data-label); font-size: 11px; font-weight: 800; color: var(--mut2); text-transform: uppercase; }
    .act-cell { width: 100%; justify-content: flex-end; }
}

/* Toast */
.toast { position: fixed; bottom: 20px; right: 20px; left: 20px; z-index: 999; background: #0f172a; color: #fff; padding: 14px 20px; border-radius: 12px; font-size: 13px; font-weight: 600; display: none; box-shadow: 0 10px 25px rgba(0,0,0,0.2); }
@media (min-width: 640px) { .toast { left: auto; width: 320px; } }
</style>
@endpush

<div class="pg">
    <div class="pg-hd fu1">
        <div>
            <h1 class="pg-title">Data Jabatan</h1>
            <p class="pg-sub">Kelola struktur posisi organisasi Anda</p>
        </div>
        <button class="btn-primary" onclick="openCreate()">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
            Tambah Jabatan
        </button>
    </div>

    <div class="card fu2">
        <div class="card-hd">
            <span class="card-title">Daftar Posisi <span class="cnt-badge" id="cnt-badge">{{ $jabatans->count() }}</span></span>
            <div class="search">
                <input type="text" id="search-input" placeholder="Cari jabatan..." 
                    style="padding: 8px 14px; border: 1.5px solid var(--bdr); border-radius: 8px; font-size: 13px; width: 200px;" 
                    oninput="filterTable(this.value)">
            </div>
        </div>
        <div class="tbl-wrap">
            <table class="tbl">
                <thead>
                    <tr>
                        <th width="50">#</th>
                        <th>Nama Jabatan</th>
                        <th width="100">Aksi</th>
                    </tr>
                </thead>
                <tbody id="tbl-body">
                    @foreach($jabatans as $i => $jab)
                    <tr id="row-{{ $jab->id }}" data-name="{{ strtolower($jab->nama_jabatan) }}">
                        <td data-label="#">{{ $i + 1 }}</td>
                        <td data-label="Jabatan">
                            <span class="jab-badge">{{ $jab->nama_jabatan }}</span>
                        </td>
                        <td data-label="Aksi">
                            <div class="act-cell">
                                <button class="act-btn act-edit" onclick="openEdit({{ $jab->id }}, '{{ addslashes($jab->nama_jabatan) }}')">
                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                                </button>
                                <button class="act-btn act-del" onclick="openDel({{ $jab->id }}, '{{ addslashes($jab->nama_jabatan) }}')">
                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg>
                                </button>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

<div id="modal-form" class="modal">
    <div class="modal-bg" onclick="closeForm()"></div>
    <div class="modal-box">
        <div class="modal-hd">
            <span id="mf-title" style="font-weight:800;">Tambah Jabatan</span>
            <button onclick="closeForm()" style="background:none; border:none; font-size:20px; cursor:pointer;">&times;</button>
        </div>
        <form id="form-jab" onsubmit="submitForm(event)">
            @csrf
            <input type="hidden" name="_method" id="f-method" value="POST">
            <div class="modal-body">
                <div class="fg">
                    <label>Nama Jabatan</label>
                    <input type="text" name="nama_jabatan" id="f-nama" placeholder="Contoh: Manager Operasional" required>
                    <span id="err-nama" style="color:var(--err); font-size:11px; font-weight:600;"></span>
                </div>
            </div>
            <div class="modal-ft">
                <button type="button" class="btn-ghost" onclick="closeForm()">Batal</button>
                <button type="submit" class="btn-primary" id="btn-submit">Simpan</button>
            </div>
        </form>
    </div>
</div>

<div id="toast" class="toast"></div>

@push('scripts')
<script>
function filterTable(q) {
    const rows = document.querySelectorAll('#tbl-body tr');
    rows.forEach(r => {
        r.style.display = r.dataset.name.includes(q.toLowerCase()) ? '' : 'none';
    });
}

function openCreate() {
    document.getElementById('mf-title').textContent = 'Tambah Jabatan';
    document.getElementById('f-method').value = 'POST';
    document.getElementById('form-jab').action = "{{ route('instansi.jabatan.store') }}";
    document.getElementById('f-nama').value = '';
    document.getElementById('modal-form').style.display = 'flex';
}

function openEdit(id, nama) {
    document.getElementById('mf-title').textContent = 'Edit Jabatan';
    document.getElementById('f-method').value = 'PUT';
    document.getElementById('form-jab').action = `/instansi/jabatan/${id}`;
    document.getElementById('f-nama').value = nama;
    document.getElementById('modal-form').style.display = 'flex';
}

function closeForm() {
    document.getElementById('modal-form').style.display = 'none';
}

async function submitForm(e) {
    e.preventDefault();
    const form = e.target;
    const btn = document.getElementById('btn-submit');
    btn.disabled = true;
    btn.textContent = 'Menyimpan...';

    try {
        const res = await fetch(form.action, {
            method: 'POST',
            body: new FormData(form),
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        });
        const data = await res.json();
        if (data.success) {
            location.reload();
        } else {
            document.getElementById('err-nama').textContent = data.errors?.nama_jabatan?.[0] || 'Terjadi kesalahan';
        }
    } catch (err) {
        showToast('Gagal terhubung ke server');
    } finally {
        btn.disabled = false;
        btn.textContent = 'Simpan';
    }
}

function showToast(msg) {
    const t = document.getElementById('toast');
    t.textContent = msg;
    t.style.display = 'block';
    setTimeout(() => t.style.display = 'none', 3000);
}

// Inisialisasi DELETE tetap menggunakan logic script sebelumnya
</script>
@endpush

</x-app-layout>