@extends('layouts.app')

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

@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">
                @isset($kategori)
                    Template Kategori: {{ $kategori->nama }}
                @else
                    Semua Template
                @endisset
            </h3>

            @if (!isset($kategori))
                <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 Template
                </button>
            @endif
        </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 Template -->
        <div class="bg-white rounded-lg shadow-sm">
            <div class="p-4 overflow-x-auto">
                <table class="w-full table-fixed text-left border border-gray-300 border-collapse">
                    <thead class="bg-gray-100">
                        <tr>
                            <th class="p-2 border border-gray-300 w-[50px] text-center">No</th>
                            <th class="p-2 border border-gray-300 w-[200px]">Nama Template</th>
                            <th class="p-2 border border-gray-300 w-[150px]">Kategori</th>
                            <th class="p-2 border border-gray-300 w-[150px]">Fitur</th>
                            <th class="p-2 border border-gray-300 w-[90px] text-center">Foto</th>
                            <th class="p-2 border border-gray-300 w-[130px] text-center">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($templates as $key => $template)
                            <tr>
                                <td class="p-2 border border-gray-300 text-center">{{ $key + 1 }}</td>
                                <td class="p-2 border border-gray-300 truncate">{{ $template->nama_template }}</td>
                                <td class="p-2 border border-gray-300 truncate">{{ $template->kategori->nama ?? '-' }}</td>
                                <td class="p-2 border border-gray-300 truncate">{{ $template->fitur->deskripsi ?? '-' }}
                                </td>
                                <td class="p-2 border border-gray-300 text-center">
                                    <div
                                        class="w-12 h-12 overflow-hidden rounded bg-gray-100 flex items-center justify-center mx-auto">
                                        <img src="{{ $template->foto ? asset('storage/' . $template->foto) : asset('default-image.png') }}"
                                            alt="foto" class="max-w-full max-h-full object-contain">
                                    </div>
                                </td>
                                <td class="p-2 border border-gray-300 text-center">
                                    <div class="flex justify-center space-x-2">
                                        <button class="text-blue-600 hover:underline flex items-center openEditModalBtn"
                                            data-id="{{ $template->id }}">
                                            <i class="bi bi-pencil mr-1"></i> Edit
                                        </button>
                                        <form action="{{ route('templates.destroy', $template->id) }}" method="POST"
                                            class="inline" onsubmit="return confirm('Hapus template ini?')">
                                            @csrf
                                            @method('DELETE')
                                            <button class="text-red-600 hover:underline flex items-center">
                                                <i class="bi bi-trash mr-1"></i> Hapus
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="p-2 text-center text-gray-500 border border-gray-300">Belum ada
                                    template</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Modal Tambah Template -->
    @if (!isset($kategori))
        <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('templates.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="p-4 border-b">
                        <h5 class="text-lg font-medium">Tambah Template</h5>
                    </div>
                    <div class="p-4 space-y-4">
                        <div>
                            <label class="block text-sm font-medium">Nama Template</label>
                            <input type="text" name="nama_template" class="w-full p-2 border rounded" required>
                        </div>
                        <div>
                            <label class="block text-sm font-medium">Kategori</label>
                            <select name="kategori_id" class="w-full p-2 border rounded" required>
                                @foreach ($kategoris as $kategori)
                                    <option value="{{ $kategori->id }}">{{ $kategori->nama }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium">Fitur</label>
                            <select name="fitur_id" class="w-full p-2 border rounded" required>
                                @foreach ($fiturs as $fitur)
                                    <option value="{{ $fitur->id }}">{{ $fitur->deskripsi }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium">Foto (opsional)</label>
                            <input type="file" name="foto" class="w-full p-2 border rounded" accept="image/*">
                            <small class="text-gray-500">Format yang didukung: JPG, PNG, GIF. Maksimal 5MB.</small>
                        </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>
    @endif

    <!-- Modal Edit Template -->
    @foreach ($templates as $template)
        <div id="modalEdit{{ $template->id }}" class="fixed inset-0 hidden items-center justify-center z-50">
            <div class="absolute inset-0 bg-black opacity-50 closeEditOverlay" data-id="{{ $template->id }}"></div>
            <div class="bg-white rounded-lg shadow-lg w-full max-w-md z-50 overflow-hidden">
                <form action="{{ route('templates.update', $template->id) }}" method="POST" enctype="multipart/form-data">
                    @csrf @method('PUT')
                    <div class="p-4 border-b">
                        <h5 class="text-lg font-medium">Edit Template</h5>
                    </div>
                    <div class="p-4 space-y-4">
                        <div>
                            <label class="block text-sm font-medium">Nama Template</label>
                            <input type="text" name="nama_template" value="{{ $template->nama_template }}"
                                class="w-full p-2 border rounded" required>
                        </div>
                        <div>
                            <label class="block text-sm font-medium">Kategori</label>
                            <select name="kategori_id" class="w-full p-2 border rounded" required>
                                @foreach ($kategoris as $kategori)
                                    <option value="{{ $kategori->id }}" @selected($kategori->id == $template->kategori_id)>{{ $kategori->nama }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium">Fitur</label>
                            <select name="fitur_id" class="w-full p-2 border rounded" required>
                                @foreach ($fiturs as $fitur)
                                    <option value="{{ $fitur->id }}" @selected($fitur->id == $template->fitur_id)>
                                        {{ $fitur->deskripsi }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium">Foto (opsional)</label>
                            @if ($template->foto)
                                <div class="mb-2">
                                    <small class="text-gray-500">Foto saat ini:</small>
                                    <div
                                        class="w-20 h-20 mt-1 overflow-hidden rounded bg-gray-100 flex items-center justify-center border">
                                        <img src="{{ asset('storage/' . $template->foto) }}" alt="foto"
                                            class="max-w-full max-h-full object-contain">
                                    </div>
                                </div>
                            @endif
                            <input type="file" name="foto" class="w-full p-2 border rounded" accept="image/*">
                        </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="{{ $template->id }}">Batal</button>
                        <button class="bg-blue-600 text-white px-3 py-1 rounded">Simpan Perubahan</button>
                    </div>
                </form>
            </div>
        </div>
    @endforeach

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

            if (openTambahModal) {
                openTambahModal.addEventListener('click', () => {
                    modalTambah.classList.remove('hidden');
                    modalTambah.classList.add('flex');
                });
            }
            if (closeTambahBtn) {
                closeTambahBtn.addEventListener('click', () => {
                    modalTambah.classList.add('hidden');
                    modalTambah.classList.remove('flex');
                });
            }
            if (closeTambahOverlay) {
                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);
                    if (modal) {
                        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);
                    if (modal) {
                        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);
                    if (modal) {
                        modal.classList.add('hidden');
                        modal.classList.remove('flex');
                    }
                });
            });
        });
    </script>
@endsection