@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 & Errors (sama seperti sebelumnya) -->
        @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">Nomor</th>
                            <th class="p-2 border border-gray-300 w-[200px] text-center">Nama Template</th>
                            <th class="p-2 border border-gray-300 w-[150px] text-center">Kategori</th>
                            <th class="p-2 border border-gray-300 w-[200px] text-center">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-[100px] text-center">Harga</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>

                                <!-- Tampilkan banyak fitur -->
                                <td class="p-2 border border-gray-300 truncate">
                                    @forelse($template->fiturs as $f)
                                        <span class="inline-block bg-gray-200 px-2 py-0.5 rounded text-xs mr-1 mb-1">
                                            {{ \Illuminate\Support\Str::limit($f->deskripsi, 50) }}
                                        </span>
                                    @empty
                                        -
                                    @endforelse
                                </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-left font-semibold">
                                    Rp {{ number_format($template->harga, 0, ',', '.') }}
                                </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="7" class="p-2 text-center text-gray-500 border border-gray-300">Belum ada template</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </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 value="{{ old('nama_template') }}">
                            </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 $kategoriItem)
                                        <option value="{{ $kategoriItem->id }}" @selected(old('kategori_id') == $kategoriItem->id)>{{ $kategoriItem->nama }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <!-- CHECKBOX FITUR -->
                            <div>
                                <label class="block text-sm font-medium">Fitur</label>
                                <div class="grid grid-cols-1 sm:grid-cols-2 gap-2 max-h-48 overflow-auto p-2 border rounded">
                                    @foreach ($fiturs as $fitur)
                                        <label class="flex items-center space-x-2">
                                            <input type="checkbox" name="fitur_id[]" value="{{ $fitur->id }}"
                                                {{ (is_array(old('fitur_id')) && in_array($fitur->id, old('fitur_id'))) ? 'checked' : '' }}>
                                            <span class="text-sm">{{ \Illuminate\Support\Str::limit($fitur->deskripsi, 80) }}</span>
                                        </label>
                                    @endforeach
                                </div>
                            </div>

                            <div>
                                <label class="block text-sm font-medium">Harga</label>
                                <input type="number" name="harga" class="w-full p-2 border rounded" required min="0" step="1000" value="{{ old('harga') }}">
                            </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: JPG, PNG, GIF. Maks 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="{{ old('nama_template', $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 $kategoriItem)
                                        <option value="{{ $kategoriItem->id }}" @selected($kategoriItem->id == old('kategori_id', $template->kategori_id))>
                                            {{ $kategoriItem->nama }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <!-- EDIT: checkbox fitur dengan checked state -->
                            <div>
                                <label class="block text-sm font-medium">Fitur</label>
                                <div class="grid grid-cols-1 sm:grid-cols-2 gap-2 max-h-48 overflow-auto p-2 border rounded">
                                    @foreach ($fiturs as $fiturItem)
                                        <label class="flex items-center space-x-2">
                                            <input type="checkbox" name="fitur_id[]" value="{{ $fiturItem->id }}"
                                                {{ (is_array(old('fitur_id')) ? in_array($fiturItem->id, old('fitur_id')) : $template->fiturs->contains($fiturItem->id)) ? 'checked' : '' }}>
                                            <span class="text-sm">{{ \Illuminate\Support\Str::limit($fiturItem->deskripsi, 80) }}</span>
                                        </label>
                                    @endforeach
                                </div>
                            </div>

                            <div>
                                <label class="block text-sm font-medium">Harga</label>
                                <input type="number" name="harga" value="{{ old('harga', $template->harga) }}" class="w-full p-2 border rounded" required min="0" step="1000">
                            </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>
    </div>
@endsection