@extends('layouts.app')

@section('title', 'Manajemen Fitur')

@section('content')
    <div class="container mx-auto py-4">
        <!-- Header -->
        <div class="flex justify-between items-center mb-4">
            <h3 class="text-xl font-bold">Manajemen Fitur</h3>
            <button id="openTambahModal" class="bg-blue-600 text-white px-3 py-2.5 rounded flex items-center">
                <i class="bi bi-plus-lg mr-1"></i> Tambah Fitur
            </button>
        </div>

        <!-- Flash Message -->
        @if (session('success'))
            <div id="toast-success" class="mb-4 p-3 rounded bg-green-100 text-green-800 border border-green-300 shadow">
                {{ session('success') }}
            </div>
            <script>
                setTimeout(() => document.getElementById('toast-success')?.remove(), 3000);
            </script>
        @endif

        @if ($errors->any())
            <div id="toast-error" class="mb-4 p-3 rounded bg-red-100 text-red-800 border border-red-300 shadow">
                <ul class="list-disc ml-5">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
            <script>
                setTimeout(() => document.getElementById('toast-error')?.remove(), 5000);
            </script>
        @endif

        <!-- Tabel Fitur -->
        <div class="bg-white rounded-lg shadow-sm">
            <div class="p-4 overflow-x-auto">
                <table class="w-full table-fixed border border-gray-300 text-left">
                    <thead class="bg-gray-100">
                        <tr>
                            <th class="w-[7%] p-2 border border-gray-300 text-center">Nomor</th>
                            <th class="w-[70%] p-2 border border-gray-300 text-center">Fitur</th>
                            <th class="w-[20%] p-2 border border-gray-300 text-center">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($fitur as $key => $item)
                            <tr class="hover:bg-gray-50">
                                <td class="py-5 px-2 border border-gray-300 text-center">{{ $key + 1 }}</td>
                                <td class="py-5 px-2 border border-gray-300 truncate whitespace-nowrap">{{ $item->deskripsi }}</td>
                                <td class="py-5 px-2 border border-gray-300 text-center">
                                    <div class="flex justify-center space-x-2">
                                        <button class="text-blue-600 flex items-center pr-4 openEditModalBtn"
                                            data-id="{{ $item->id }}">
                                            <i class="bi bi-pencil mr-1"></i> Ubah
                                        </button>
                                        <button class="text-red-600 flex items-center openDeleteModalBtn"
                                            data-id="{{ $item->id }}">
                                            <i class="bi bi-trash mr-1"></i> Hapus
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="3" class="p-2 text-center text-gray-500">Belum ada fitur</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Modal Tambah -->
    <div id="modalTambah" class="fixed inset-0 hidden items-center justify-center z-50">
        <div class="absolute inset-0 bg-black opacity-50" id="closeTambahModal"></div>
        <div class="bg-white rounded-lg shadow-lg w-full max-w-md z-50 overflow-hidden">
            <form action="{{ route('admin.fitur.store') }}" method="POST">
                @csrf
                <div class="p-4 border-b">
                    <h5 class="text-lg font-medium">Tambah Fitur</h5>
                </div>
                <div class="p-4 space-y-4">
                    <div>
                        <label class="block text-sm font-medium">Nama Fitur</label>
                        <input type="text" name="deskripsi" class="w-full p-2 border rounded" required>
                    </div>
                </div>
                <div class="p-4 border-t flex justify-end space-x-2">
                    <button type="button" id="closeTambahBtn"
                        class="bg-gray-300 text-black px-3 py-1 rounded">Batal</button>
                    <button class="bg-blue-600 text-white px-3 py-1 rounded">Simpan</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Modal Edit -->
    @foreach ($fitur as $item)
        <div id="modalEdit{{ $item->id }}" class="fixed inset-0 hidden items-center justify-center z-50">
            <div class="absolute inset-0 bg-black opacity-50 closeEditOverlay" data-id="{{ $item->id }}"></div>
            <div class="bg-white rounded-lg shadow-lg w-full max-w-md z-50 overflow-hidden">
                <form action="{{ route('admin.fitur.update', $item->id) }}" method="POST">
                    @csrf
                    @method('PUT')
                    <div class="p-4 border-b">
                        <h5 class="text-lg font-medium">Edit Fitur</h5>
                    </div>
                    <div class="p-4 space-y-4">
                        <div>
                            <label class="block text-sm font-medium">Nama Fitur</label>
                            <input type="text" name="deskripsi" value="{{ $item->deskripsi }}"
                                class="w-full p-2 border rounded" required>
                        </div>
                    </div>
                    <div class="p-4 border-t flex justify-end space-x-2">
                        <button type="button" class="bg-gray-300 text-black px-3 py-1 rounded closeEditBtn"
                            data-id="{{ $item->id }}">Batal</button>
                        <button class="bg-blue-600 text-white px-3 py-1 rounded">Simpan Perubahan</button>
                    </div>
                </form>
            </div>
        </div>
    @endforeach

    <!-- Modal Hapus -->
    @foreach ($fitur as $item)
        <div id="modalDelete{{ $item->id }}" class="fixed inset-0 hidden items-center justify-center z-50">
            <div class="absolute inset-0 bg-black opacity-50 closeDeleteOverlay" data-id="{{ $item->id }}"></div>
            <div class="bg-white rounded-lg shadow-lg w-full max-w-md z-50 overflow-hidden">
                <div class="p-4 border-b">
                    <h5 class="text-lg font-medium">Hapus Fitur</h5>
                </div>
                <div class="p-4">
                    <p>Apakah Anda yakin ingin menghapus fitur <strong>{{ $item->deskripsi }}</strong>?</p>
                </div>
                <div class="p-4 border-t flex justify-end space-x-2">
                    <button type="button" class="bg-gray-300 text-black px-3 py-1 rounded closeDeleteBtn"
                        data-id="{{ $item->id }}">Batal</button>
                    <form action="{{ route('admin.fitur.destroy', $item->id) }}" method="POST" class="inline">
                        @csrf
                        @method('DELETE')
                        <button class="bg-red-600 text-white px-3 py-1 rounded">Hapus</button>
                    </form>
                </div>
            </div>
        </div>
    @endforeach

    <script>
        // Modal Tambah
        const openTambahModal = document.getElementById('openTambahModal');
        const modalTambah = document.getElementById('modalTambah');
        const closeTambahBtn = document.getElementById('closeTambahBtn');
        const closeTambahOverlay = document.getElementById('closeTambahModal');

        openTambahModal.addEventListener('click', () => {
            modalTambah.classList.remove('hidden');
            modalTambah.classList.add('flex');
        });
        closeTambahBtn.addEventListener('click', () => {
            modalTambah.classList.add('hidden');
            modalTambah.classList.remove('flex');
        });
        closeTambahOverlay.addEventListener('click', () => {
            modalTambah.classList.add('hidden');
            modalTambah.classList.remove('flex');
        });

        // Modal Edit
        const openEditBtns = document.querySelectorAll('.openEditModalBtn');
        const closeEditBtns = document.querySelectorAll('.closeEditBtn');
        const closeEditOverlays = document.querySelectorAll('.closeEditOverlay');

        openEditBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                const id = btn.dataset.id;
                const modal = document.getElementById('modalEdit' + id);
                modal.classList.remove('hidden');
                modal.classList.add('flex');
            });
        });

        closeEditBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                const id = btn.dataset.id;
                const modal = document.getElementById('modalEdit' + id);
                modal.classList.add('hidden');
                modal.classList.remove('flex');
            });
        });

        closeEditOverlays.forEach(overlay => {
            overlay.addEventListener('click', () => {
                const id = overlay.dataset.id;
                const modal = document.getElementById('modalEdit' + id);
                modal.classList.add('hidden');
                modal.classList.remove('flex');
            });
        });

        // Modal Delete
        const openDeleteBtns = document.querySelectorAll('.openDeleteModalBtn');
        const closeDeleteBtns = document.querySelectorAll('.closeDeleteBtn');
        const closeDeleteOverlays = document.querySelectorAll('.closeDeleteOverlay');

        openDeleteBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                const id = btn.dataset.id;
                const modal = document.getElementById('modalDelete' + id);
                modal.classList.remove('hidden');
                modal.classList.add('flex');
            });
        });

        closeDeleteBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                const id = btn.dataset.id;
                const modal = document.getElementById('modalDelete' + id);
                modal.classList.add('hidden');
                modal.classList.remove('flex');
            });
        });

        closeDeleteOverlays.forEach(overlay => {
            overlay.addEventListener('click', () => {
                const id = overlay.dataset.id;
                const modal = document.getElementById('modalDelete' + id);
                modal.classList.add('hidden');
                modal.classList.remove('flex');
            });
        });
    </script>
@endsection