@extends('admin.layouts.app')

@section('header')
    <!-- Page Header -->
    <div class="bg-header text-white p-4 rounded-lg shadow-md flex justify-between items-center">
        <h1 class="text-2xl font-medium">Data Kecerdasan</h1>
        <span class="text-sm">Good morning, <span class="font-bold">{{ Auth::user()->name }}</span></span>
    </div>
@endsection

@section('content')
    <div class="mt-6 bg-white p-6 rounded-lg shadow">
        @if (session('success'))
            <div class="mb-4 p-3 bg-green-100 text-green-800 rounded">
                {{ session('success') }}
            </div>
        @endif

        <!-- Title Bar -->
        <div class="mb-4">
            <h3 class="text-lg font-bold">Data Kecerdasan</h3>
            <p class="text-sm text-gray-500">View the existing Kecerdasan</p>
        </div>

        <!-- Action Bar -->
        <div class="flex justify-between items-center mb-4">
            <div>
                <button class="text-gray-600 flex items-center">
                    <i class="bi bi-funnel mr-1"></i> Filters
                </button>
            </div>
            <div class="flex items-center space-x-2">
                <div class="relative">
                    <input type="text" placeholder="Search Kecerdasan"
                        class="pl-8 pr-4 py-2 border rounded-lg bg-gray-100 w-56">
                    <i class="bi bi-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                </div>
                <button id="btnTambah" class="bg-teal-500 text-white px-4 py-2 rounded-lg flex items-center">
                    <i class="bi bi-plus-lg mr-2"></i> Add
                </button>
            </div>
        </div>

        <!-- Data Table -->
        <table class="w-full border-collapse bg-white shadow rounded-lg">
            <thead>
                <tr class="bg-gray-100 border-b">
                    <th class="p-3 text-gray-600">No</th>
                    <th class="p-3 text-gray-600">ID</th>
                    <th class="p-3 text-gray-600">Nama</th>
                    <th class="p-3 text-gray-600">Deskripsi</th>
                    <th class="p-3 text-gray-600">Aksi</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($kecerdasans as $i => $k)
                    <tr class="border-b hover:bg-gray-50">
                        <td class="p-3">{{ $i + 1 }}</td>
                        <td class="p-3">{{ $k->id }}</td>
                        <td class="p-3">{{ $k->nama }}</td>
                        <td class="p-3">{{ $k->deskripsi }}</td>
                        <td class="p-3 flex space-x-2">
                            <button
                                onclick="openEditModal('{{ $k->id }}', '{{ addslashes($k->nama) }}', '{{ addslashes($k->deskripsi) }}')"
                                class="bg-yellow-500 hover:bg-yellow-600 text-white px-3 py-1 rounded-lg flex items-center">
                                <i class="bi bi-pencil-fill mr-1"></i>Edit
                            </button>
                            <form action="{{ route('admin.kecerdasan.destroy', $k) }}" method="POST"
                                onsubmit="return confirm('Hapus kecerdasan “{{ $k->nama }}”?')">
                                @csrf @method('DELETE')
                                <button
                                    class="bg-red-500 hover:bg-red-600 text-white px-3 py-1 rounded-lg flex items-center">
                                    <i class="bi bi-trash-fill mr-1"></i>Delete
                                </button>
                            </form>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>

        <!-- Modal Form -->
        <div id="modalForm" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
            <div class="bg-white rounded-2xl shadow-2xl w-full max-w-md p-6">
                <h2 id="modalTitle" class="text-xl font-semibold mb-4">Tambah Kecerdasan</h2>

                <form id="formKecerdasan" action="" method="POST" class="space-y-4">
                    @csrf
                    <input type="hidden" name="_method" id="methodInput" value="POST">

                    <div>
                        <label for="idField" class="block text-sm font-medium">ID (4 karakter)</label>
                        <input type="text" name="id" id="idField"
                            class="mt-1 block w-full border rounded px-3 py-2" maxlength="4" required>
                    </div>

                    <div>
                        <label for="namaField" class="block text-sm font-medium">Nama Kecerdasan</label>
                        <input type="text" name="nama" id="namaField"
                            class="mt-1 block w-full border rounded px-3 py-2" required>
                    </div>

                    <div>
                        <label for="deskripsiField" class="block text-sm font-medium">Deskripsi</label>
                        <textarea name="deskripsi" id="deskripsiField" class="mt-1 block w-full border rounded px-3 py-2" rows="3"></textarea>
                    </div>

                    <div class="flex justify-end space-x-3 pt-4">
                        <button type="button" id="btnBatal"
                            class="px-4 py-2 rounded-lg font-medium hover:underline">Batal</button>
                        <button type="submit"
                            class="bg-blue hover:bg-blue-600 text-white px-4 py-2 rounded-lg flex items-center">
                            <i id="modalIcon" class="bi bi-check-lg mr-1"></i>
                            <span id="modalButtonText">Simpan</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const btnTambah = document.getElementById('btnTambah');
            const modal = document.getElementById('modalForm');
            const btnBatal = document.getElementById('btnBatal');
            const modalTitle = document.getElementById('modalTitle');
            const form = document.getElementById('formKecerdasan');
            const methodInput = document.getElementById('methodInput');
            const idField = document.getElementById('idField');
            const namaField = document.getElementById('namaField');
            const deskripsiField = document.getElementById('deskripsiField');
            const modalIcon = document.getElementById('modalIcon');
            const modalText = document.getElementById('modalButtonText');
            const storeUrl = '{{ route('admin.kecerdasan.store') }}';
            const updateUrlTpl = '{{ route('admin.kecerdasan.update', ':id') }}';

            function openModal(isEdit = false, data = {}) {
                if (isEdit) {
                    modalTitle.textContent = 'Edit Kecerdasan';
                    form.action = updateUrlTpl.replace(':id', data.id);
                    methodInput.value = 'PUT';
                    idField.readOnly = true;
                    idField.value = data.id;
                    namaField.value = data.nama;
                    deskripsiField.value = data.deskripsi;
                    modalIcon.className = 'bi bi-pencil-fill mr-1';
                    modalText.textContent = 'Update';
                } else {
                    modalTitle.textContent = 'Tambah Kecerdasan';
                    form.action = storeUrl;
                    methodInput.value = 'POST';
                    idField.readOnly = false;
                    idField.value = '';
                    namaField.value = '';
                    deskripsiField.value = '';
                    modalIcon.className = 'bi bi-check-lg mr-1';
                    modalText.textContent = 'Simpan';
                }
                modal.classList.remove('hidden');
            }

            btnTambah.addEventListener('click', () => openModal(false));
            btnBatal.addEventListener('click', () => modal.classList.add('hidden'));
            window.openEditModal = (id, nama, deskripsi) => {
                openModal(true, {
                    id,
                    nama,
                    deskripsi
                });
            };

            // Tampilkan modal kembali jika ada error validasi
            @if ($errors->any())
                openModal({{ old('id') ? true : false }}, {
                    id: '{{ old('id') }}',
                    nama: '{{ old('nama') }}',
                    deskripsi: '{{ old('deskripsi') }}'
                });
            @endif
        });
    </script>
@endpush