@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">Daftar 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-[25%] p-2 border border-gray-300 text-center">Kategori Fitur</th>
                    <th class="w-[30%] p-2 border border-gray-300 text-center">Fitur</th>
                    <th class="w-[18%] p-2 border border-gray-300 text-center">Harga</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">
                        <!-- Nomor -->
                        <td class="py-5 px-2 border border-gray-300 text-center">
                            {{ $fitur->firstItem() + $key }}
                        </td>
                        <!-- Kategori -->
                        <td class="py-5 px-2 border border-gray-300 text-center">
                            {{ $item->kategoriFitur->deskripsi ?? '-' }}
                        </td>
                        <!-- Nama Fitur -->
                        <td class="py-5 px-2 border border-gray-300 truncate whitespace-nowrap">
                            {{ $item->deskripsi }}
                        </td>
                        <!-- Harga -->
                        <td class="py-5 px-2 border border-gray-300 text-center">
                            Rp {{ number_format($item->harga, 0, ',', '.') }}
                        </td>
                        <!-- Aksi -->
                        <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="5" class="p-2 text-center text-gray-500">Belum ada fitur</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>


        <!-- Pagination -->
        <div class="p-4 flex justify-center">
            <div class="flex space-x-1">
                {{-- Tombol Previous --}}
                @if ($fitur->onFirstPage())
                    <span class="px-3 py-1 rounded-lg bg-gray-200 text-gray-500 cursor-not-allowed">Prev</span>
                @else
                    <a href="{{ $fitur->previousPageUrl() }}"
                       class="px-3 py-1 rounded-lg bg-gray-200 text-gray-700 hover:bg-gray-300">Prev</a>
                @endif

                @php
                    $total = $fitur->lastPage();
                    $current = $fitur->currentPage();
                @endphp

                {{-- Selalu tampilkan halaman pertama --}}
                @if ($current > 2)
                    <a href="{{ $fitur->url(1) }}"
                       class="px-3 py-1 rounded-lg bg-gray-200 text-gray-700 hover:bg-blue-100">1</a>
                    @if ($current > 3)
                        <span class="px-3 py-1 text-gray-500">...</span>
                    @endif
                @endif

                {{-- Halaman tengah --}}
                @for ($i = max(1, $current - 1); $i <= min($total, $current + 1); $i++)
                    @if ($i == $current)
                        <span class="px-3 py-1 rounded-lg bg-blue-600 text-white font-semibold">{{ $i }}</span>
                    @else
                        <a href="{{ $fitur->url($i) }}"
                           class="px-3 py-1 rounded-lg bg-gray-200 text-gray-700 hover:bg-blue-100">{{ $i }}</a>
                    @endif
                @endfor

                {{-- Selalu tampilkan halaman terakhir --}}
                @if ($current < $total - 1)
                    @if ($current < $total - 2)
                        <span class="px-3 py-1 text-gray-500">...</span>
                    @endif
                    <a href="{{ $fitur->url($total) }}"
                       class="px-3 py-1 rounded-lg bg-gray-200 text-gray-700 hover:bg-blue-100">{{ $total }}</a>
                @endif

                {{-- Tombol Next --}}
                @if ($fitur->hasMorePages())
                    <a href="{{ $fitur->nextPageUrl() }}"
                       class="px-3 py-1 rounded-lg bg-gray-200 text-gray-700 hover:bg-gray-300">Next</a>
                @else
                    <span class="px-3 py-1 rounded-lg bg-gray-200 text-gray-500 cursor-not-allowed">Next</span>
                @endif
            </div>
        </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">

                {{-- Kategori --}}
                @if($kategori_fitur ?? false)
                    <!-- Jika controller mengirim $kategori_fitur -->
                    <input type="hidden" name="kategori_fitur_id" value="{{ optional($kategori_fitur ?? null)->id }}">
                    <p class="text-sm text-gray-600">
                        Kategori: <strong>{{ optional($kategori_fitur ?? null)->deskripsi }}</strong>
                    </p>
                @else
                    <!-- Kalau tidak ada kategori tertentu, tampilkan dropdown -->
                    <div>
                        <label class="block text-sm font-medium">Kategori Fitur</label>
                        <select name="kategori_fitur_id" class="w-full p-2 border rounded">
                            <option value="">-- Pilih Kategori --</option>
                            @foreach(\App\Models\KategoriFitur::all() as $kategori)
                                <option value="{{ $kategori->id }}">{{ $kategori->deskripsi }}</option>
                            @endforeach
                        </select>
                    </div>
                @endif

                {{-- Nama Fitur --}}
                <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>

                {{-- Harga --}}
                <div>
                    <label class="block text-sm font-medium">Harga</label>
                    <input type="number" name="harga" step="100" min="0" 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">

                    {{-- Kategori --}}
                    @if($kategori_fitur ?? false)
                        <!-- Jika controller mengirim $kategori_fitur -->
                        <input type="hidden" name="kategori_fitur_id" value="{{ optional($kategori_fitur ?? null)->id }}">
                        <p class="text-sm text-gray-600">
                            Kategori: <strong>{{ optional($kategori_fitur ?? null)->deskripsi }}</strong>
                        </p>
                    @else
                        <!-- Kalau tidak ada kategori tertentu, tampilkan dropdown -->
                        <div>
                            <label class="block text-sm font-medium">Kategori Fitur</label>
                            <select name="kategori_fitur_id" class="w-full p-2 border rounded">
                                <option value="">-- Pilih Kategori --</option>
                                @foreach(\App\Models\KategoriFitur::all() as $kategori)
                                    <option value="{{ $kategori->id }}"
                                        {{ $item->kategori_fitur_id == $kategori->id ? 'selected' : '' }}>
                                        {{ $kategori->deskripsi }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    @endif

                    {{-- Nama Fitur --}}
                    <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>

                    {{-- Harga --}}
                    <div>
                        <label class="block text-sm font-medium">Harga</label>
                        <input type="number" name="harga" value="{{ $item->harga }}"
                               step="100" min="0" 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