@extends('layouts.app')

@section('title', 'Data Panitia')
@section('page-title', 'Data Panitia')
@section('breadcrumb', 'Beranda / Panitia')

@section('content')

<div style="display:flex; justify-content:flex-end; margin-bottom:16px;">
    <button onclick="openModal()" class="btn btn-primary">
        <i class="fa-solid fa-plus"></i> Tambah Panitia
    </button>
</div>

<div class="card">
    <div class="card-header">
        <i class="fa-solid fa-users" style="color:#1e6f5c;"></i>
        <span class="card-title">Daftar Panitia</span>
    </div>
    <div class="table-wrap">
        <table>
            <thead>
                <tr>
                    <th>No</th>
                    <th>Nama</th>
                    <th>Seksi</th>
                    <th>No. HP</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody>
                @forelse($panitia as $i => $p)
                <tr>
                    <td style="color:#9db8ac;">{{ $i + 1 }}</td>
                    <td style="font-weight:600;">{{ $p->nama }}</td>
                    <td><span class="badge badge-blue">{{ $p->seksi }}</span></td>
                    <td style="font-size:13px;">{{ $p->no_hp ?? '—' }}</td>
                    <td>
                        <div style="display:flex; gap:6px;">
                            <button onclick="editPanitia({{ $p->id }}, '{{ addslashes($p->nama) }}', '{{ addslashes($p->seksi) }}', '{{ $p->no_hp }}')"
                                class="btn btn-outline btn-sm">
                                <i class="fa-solid fa-pen"></i>
                            </button>
                            <button onclick="confirmDelete('del-panitia-{{ $p->id }}', '{{ addslashes($p->nama) }}')"
                                class="btn btn-danger btn-sm">
                                <i class="fa-solid fa-trash"></i>
                            </button>
                            <form id="del-panitia-{{ $p->id }}" action="{{ route('panitia.destroy', $p) }}"
                                method="POST" style="display:none">
                                @csrf
                                @method('DELETE')
                            </form>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="5" style="text-align:center; padding:40px; color:#9db8ac;">Belum ada panitia</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

{{-- Modal: Tambah / Edit Panitia --}}
<div class="modal-backdrop" id="modal-panitia">
    <div class="modal">
        <div class="modal-header">
            <span class="modal-title" id="modal-title">Tambah Panitia</span>
            <button type="button" onclick="closeModal()"
                style="background:none;border:none;font-size:20px;cursor:pointer;color:#7aaa94;">&times;</button>
        </div>

        {{-- Form TAMBAH --}}
        <form method="POST" id="form-store" action="{{ route('panitia.store') }}">
            @csrf
            <div class="modal-body">
                <div class="form-group">
                    <label>Nama <span style="color:#dc2626;">*</span></label>
                    <input type="text" name="nama" id="input-nama" class="form-control"
                        placeholder="Nama panitia" required>
                </div>
                <div class="form-group">
                    <label>Seksi <span style="color:#dc2626;">*</span></label>
                    <input type="text" name="seksi" id="input-seksi" class="form-control"
                        placeholder="Contoh: Seksi Perlengkapan" required>
                </div>
                <div class="form-group">
                    <label>No. HP</label>
                    <input type="text" name="no_hp" id="input-nohp" class="form-control"
                        placeholder="08xxxxxxxxxx">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" onclick="closeModal()" class="btn btn-outline">Batal</button>
                <button type="submit" class="btn btn-primary">
                    <i class="fa-solid fa-floppy-disk"></i> Simpan
                </button>
            </div>
        </form>

        {{-- Form EDIT (tersembunyi, method PUT) --}}
        <form method="POST" id="form-update" action="" style="display:none;">
            @csrf
            @method('PUT')
            <div class="modal-body">
                <div class="form-group">
                    <label>Nama <span style="color:#dc2626;">*</span></label>
                    <input type="text" name="nama" id="edit-nama" class="form-control"
                        placeholder="Nama panitia" required>
                </div>
                <div class="form-group">
                    <label>Seksi <span style="color:#dc2626;">*</span></label>
                    <input type="text" name="seksi" id="edit-seksi" class="form-control"
                        placeholder="Contoh: Seksi Perlengkapan" required>
                </div>
                <div class="form-group">
                    <label>No. HP</label>
                    <input type="text" name="no_hp" id="edit-nohp" class="form-control"
                        placeholder="08xxxxxxxxxx">
                </div>
            </div>
            <div class="modal-footer" style="border-top:1px solid #e2ece8;">
                <button type="button" onclick="closeModal()" class="btn btn-outline">Batal</button>
                <button type="submit" class="btn btn-primary">
                    <i class="fa-solid fa-floppy-disk"></i> Simpan
                </button>
            </div>
        </form>
    </div>
</div>

{{-- Modal Konfirmasi Hapus --}}
<div class="modal-backdrop" id="modal-delete">
    <div class="modal" style="max-width:400px;">
        <div class="modal-header">
            <span class="modal-title">Konfirmasi Hapus</span>
            <button type="button" onclick="closeDeleteModal()"
                style="background:none;border:none;font-size:20px;cursor:pointer;color:#7aaa94;">&times;</button>
        </div>
        <div class="modal-body">
            <p style="margin:0; color:#374151;">
                Yakin ingin menghapus panitia <strong id="delete-nama"></strong>?
                Tindakan ini tidak dapat dibatalkan.
            </p>
        </div>
        <div class="modal-footer">
            <button type="button" onclick="closeDeleteModal()" class="btn btn-outline">Batal</button>
            <button type="button" onclick="submitDelete()" class="btn btn-danger">
                <i class="fa-solid fa-trash"></i> Hapus
            </button>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
    let deleteFormId = null;

    // ── Buka modal TAMBAH ────────────────────────────
    function openModal() {
        document.getElementById('input-nama').value  = '';
        document.getElementById('input-seksi').value = '';
        document.getElementById('input-nohp').value  = '';

        document.getElementById('modal-title').textContent = 'Tambah Panitia';
        document.getElementById('form-store').style.display  = '';
        document.getElementById('form-update').style.display = 'none';
        document.getElementById('modal-panitia').classList.add('open');
    }

    // ── Buka modal EDIT ──────────────────────────────
    function editPanitia(id, nama, seksi, noHp) {
        document.getElementById('edit-nama').value  = nama;
        document.getElementById('edit-seksi').value = seksi;
        document.getElementById('edit-nohp').value  = (noHp && noHp !== 'null') ? noHp : '';

        document.getElementById('modal-title').textContent   = 'Edit Panitia';
        document.getElementById('form-update').action        = '/panitia/' + id;
        document.getElementById('form-store').style.display  = 'none';
        document.getElementById('form-update').style.display = '';
        document.getElementById('modal-panitia').classList.add('open');
    }

    // ── Tutup modal tambah/edit ──────────────────────
    function closeModal() {
        document.getElementById('modal-panitia').classList.remove('open');
    }

    // ── Buka modal konfirmasi hapus ──────────────────
    function confirmDelete(formId, nama) {
        deleteFormId = formId;
        document.getElementById('delete-nama').textContent = nama;
        document.getElementById('modal-delete').classList.add('open');
    }

    // ── Submit form hapus ────────────────────────────
    function submitDelete() {
        if (deleteFormId) {
            document.getElementById(deleteFormId).submit();
        }
    }

    // ── Tutup modal hapus ────────────────────────────
    function closeDeleteModal() {
        deleteFormId = null;
        document.getElementById('modal-delete').classList.remove('open');
    }

    // Klik di luar modal → tutup
    document.getElementById('modal-panitia').addEventListener('click', function(e) {
        if (e.target === this) closeModal();
    });

    document.getElementById('modal-delete').addEventListener('click', function(e) {
        if (e.target === this) closeDeleteModal();
    });
</script>
@endpush