@extends('admin.layouts.app')

@section('content')
    <!-- Content Container -->
    <div class="mt-6 bg-white p-6 rounded-lg shadow">
        <!-- Title Bar with Subheading -->
        <div class="mb-4">
            <h3 class="text-lg font-bold">Data Mapel</h3>
            <p class="text-sm text-gray-500">View and manage your subjects</p>
        </div>

        <!-- Search and Filter Bar -->
        <div class="flex justify-between items-center mb-4">
            <div class="flex items-center space-x-2">
                <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 Mapel"
                        class="pl-8 pr-4 py-2 border rounded-lg bg-gray-100 w-56" id="searchInput">
                    <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>

        <!-- Table -->
        <table class="w-full border-collapse">
            <thead class="text-left">
                <tr class="border-b">
                    <th class="p-3 text-gray-600">No</th>
                    <th class="p-3 text-gray-600">Nama Mapel</th>
                    <th class="p-3 text-gray-600 w-1/2">Deskripsi</th>
                    <th class="p-3 text-gray-600">Action</th>
                </tr>
            </thead>
            <tbody id="tableBody">
                @foreach ($mapels as $i => $mapel)
                    <tr class="border-b hover:bg-gray-50">
                        <td class="p-3">{{ $i + 1 }}</td>
                        <td class="p-3">{{ $mapel->nama }}</td>
                        <td class="p-3">{{ $mapel->deskripsi ?? 'No description available' }}</td>
                        <td class="p-3 flex items-center space-x-2">
                            <button onclick="openEditModal({{ json_encode($mapel) }})"
                                class="bg-yellow-500 hover:bg-yellow-600 text-white px-3 py-1 rounded-lg flex items-center">
                                <i class="bi bi-pencil-square mr-1"></i> Edit
                            </button>

                            <form action="{{ route('admin.mapels.destroy', $mapel->id) }}" method="POST"
                                onsubmit="return confirm('Yakin ingin menghapus {{ $mapel->nama }}?')">
                                @csrf
                                @method('DELETE')
                                <button type="submit"
                                    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 Tambah/Edit Mapel -->
        <div id="modalTambah" 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 Mapel</h2>

                <!-- Form -->
                <form id="formModal" action="{{ route('admin.mapels.store') }}" method="POST" class="space-y-4">
                    @csrf
                    <input type="hidden" id="methodInput" name="_method" value="POST">

                    <div>
                        <label for="nama" class="block text-sm font-medium">Nama Mapel</label>
                        <input type="text" name="nama" id="namaField" value="{{ old('nama') }}"
                            class="mt-1 block w-full border rounded px-3 py-2" required>
                        @error('nama')
                            <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="deskripsi" 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"></textarea>
                        @error('deskripsi')
                            <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </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" id="submitBtn"
                            class="bg-blue hover:bg-blue-600 text-white px-4 py-2 rounded-lg flex items-center">
                            <i id="submitIcon" class="bi bi-check-lg mr-1"></i>
                            <span id="submitText">Simpan</span>
                        </button>

                    </div>
                </form>
            </div>
        </div>

    </div>


    <script>
        const btnTambah = document.getElementById('btnTambah');
        const modal = document.getElementById('modalTambah');
        const btnBatal = document.getElementById('btnBatal');
        const modalTitle = document.getElementById('modalTitle');
        const formModal = document.getElementById('formModal');
        const methodInput = document.getElementById('methodInput');
        const namaField = document.getElementById('namaField');
        const deskripsiField = document.getElementById('deskripsiField');
        const submitText = document.getElementById('submitText');
        const submitIcon = document.getElementById('submitIcon');

        btnTambah.addEventListener('click', () => {
            modalTitle.textContent = 'Tambah Mapel';
            formModal.action = '{{ route('admin.mapels.store') }}';
            methodInput.value = 'POST';
            namaField.value = '';
            deskripsiField.value = '';
            submitText.textContent = 'Simpan';
            submitIcon.className = 'bi bi-check-lg mr-1';
            modal.classList.remove('hidden');
        });

        btnBatal.addEventListener('click', () => {
            modal.classList.add('hidden');
        });

        function openEditModal(mapel) {
            modalTitle.textContent = 'Edit Mapel';
            formModal.action = `/admin/mapels/${mapel.id}`;
            methodInput.value = 'PUT';
            namaField.value = mapel.nama;
            deskripsiField.value = mapel.deskripsi || '';
            submitText.textContent = 'Update';
            submitIcon.className = 'bi bi-pencil-fill mr-1';
            modal.classList.remove('hidden');
        }

        @if ($errors->any())
            modal.classList.remove('hidden');
        @endif
    </script>
@endsection