@extends('layouts.app')
@section('title', 'Kelola Slider')

@section('content')
<div class="space-y-6">

    {{-- HEADER --}}
    <div class="flex items-center justify-between">
        <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-emerald-500 to-emerald-600 flex items-center justify-center">
                <i class="fas fa-images text-white text-sm"></i>
            </div>
            <div>
                <h1 class="text-xl font-bold text-gray-900">Kelola Slider</h1>
                <p class="text-sm text-gray-500">Kelola gambar slider pada halaman utama</p>
            </div>
        </div>
        <button onclick="openModal()"
            class="px-4 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg text-sm font-semibold transition flex items-center gap-2">
            <i class="fas fa-plus text-xs"></i> Tambah Slider
        </button>
    </div>

    {{-- SLIDER LIST --}}
    <div id="sliderContainer">
        <div class="flex items-center justify-center py-16">
            <div class="text-center">
                <i class="fas fa-spinner fa-spin text-pink-500 text-2xl mb-3 block"></i>
                <p class="text-gray-500 text-sm">Memuat slider...</p>
            </div>
        </div>
    </div>

</div>

{{-- ── MODAL TAMBAH / EDIT ───────────────────────────────────────────────── --}}
<div id="modalOverlay" class="hidden fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl shadow-2xl w-full max-w-lg">
        <div class="flex items-center justify-between px-6 py-4 border-b border-gray-100">
            <h3 class="font-bold text-gray-800" id="modalTitle">Tambah Slider</h3>
            <button onclick="closeModal()" class="text-gray-400 hover:text-gray-600 transition">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="p-6 space-y-4">

            {{-- Upload / Preview Gambar --}}
            <div>
                <label class="block text-xs font-semibold text-gray-600 mb-1.5">Gambar Slider <span class="text-red-500">*</span></label>
                <div id="imagePreviewArea"
                    class="relative border-2 border-dashed border-gray-200 rounded-xl overflow-hidden cursor-pointer hover:border-pink-400 transition"
                    onclick="document.getElementById('imageInput').click()">
                    <img id="imagePreview" src="" alt="" class="hidden w-full h-48 object-cover">
                    <div id="imagePlaceholder" class="flex flex-col items-center justify-center h-48 gap-2">
                        <i class="fas fa-cloud-upload-alt text-gray-300 text-3xl"></i>
                        <p class="text-sm text-gray-400">Klik untuk upload gambar</p>
                        <p class="text-xs text-gray-300">JPG, PNG, WebP — maks. 5MB</p>
                    </div>
                    <div id="uploadOverlay" class="hidden absolute inset-0 bg-black/40 flex items-center justify-center">
                        <i class="fas fa-spinner fa-spin text-white text-2xl"></i>
                    </div>
                </div>
                <input type="file" id="imageInput" accept="image/*" class="hidden" onchange="handleImageUpload(this)">
                <input type="hidden" id="imageUrl">
            </div>

            {{-- Judul --}}
            <div>
                <label class="block text-xs font-semibold text-gray-600 mb-1.5">Judul <span class="text-red-500">*</span></label>
                <input type="text" id="sliderTitle"
                    placeholder="Masukkan judul slider..."
                    class="w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-pink-500 transition">
            </div>

            {{-- Deskripsi --}}
            <div>
                <label class="block text-xs font-semibold text-gray-600 mb-1.5">Deskripsi (Opsional)</label>
                <textarea id="sliderDesc" rows="2"
                    placeholder="Masukkan deskripsi slider..."
                    class="w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-pink-500 transition resize-none"></textarea>
            </div>

            {{-- Order --}}
            <div>
                <label class="block text-xs font-semibold text-gray-600 mb-1.5">Urutan</label>
                <input type="number" id="sliderOrder" value="1" min="1"
                    class="w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-pink-500 transition">
            </div>

            {{-- Buttons --}}
            <div class="flex gap-3 pt-1">
                <button onclick="closeModal()"
                    class="px-5 py-2.5 border border-gray-200 text-gray-600 rounded-lg text-sm font-semibold hover:bg-gray-50 transition">
                    Batal
                </button>
                <button onclick="saveSlider()" id="btnSave"
                    class="flex-1 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg text-sm font-semibold transition flex items-center justify-center gap-2">
                    <i class="fas fa-save"></i> Simpan
                </button>
            </div>
        </div>
    </div>
</div>

{{-- Toast --}}
<div id="toastContainer" class="fixed top-5 right-5 z-[9999] flex flex-col gap-3 pointer-events-none"></div>

<style>
@keyframes toastSlide { from{opacity:0;transform:translateX(100px) scale(0.8)} to{opacity:1;transform:translateX(0) scale(1)} }
@keyframes toastOut   { from{opacity:1;transform:translateX(0) scale(1)} to{opacity:0;transform:translateX(80px) scale(0.9)} }
@keyframes progress   { from{width:100%} to{width:0%} }
</style>

<script>
const CSRF = '{{ csrf_token() }}';
let editingId = null;

// ── Toast ──────────────────────────────────────────────────────────────────
function showToast(type, msg) {
    const c = type === 'success'
        ? {icon:'fas fa-check-circle',iconColor:'#10b981',bg:'#f0fdf4',border:'#bbf7d0',titleColor:'#065f46',msgColor:'#047857',progressColor:'#10b981',title:'Berhasil!'}
        : {icon:'fas fa-times-circle',iconColor:'#ef4444',bg:'#fef2f2',border:'#fecaca',titleColor:'#7f1d1d',msgColor:'#b91c1c',progressColor:'#ef4444',title:'Gagal!'};
    const el = document.createElement('div');
    el.style.cssText = `background:${c.bg};border:1.5px solid ${c.border};border-radius:14px;padding:12px 14px 8px;min-width:280px;max-width:340px;box-shadow:0 8px 32px rgba(0,0,0,0.12);cursor:pointer;animation:toastSlide 0.4s cubic-bezier(0.34,1.4,0.64,1);pointer-events:all;`;
    el.innerHTML = `
        <div style="display:flex;align-items:flex-start;gap:10px;">
            <i class="${c.icon}" style="color:${c.iconColor};font-size:1.2rem;margin-top:1px;flex-shrink:0;"></i>
            <div style="flex:1;">
                <div style="font-weight:700;font-size:0.8rem;color:${c.titleColor};">${c.title}</div>
                <div style="font-size:0.78rem;color:${c.msgColor};margin-top:2px;line-height:1.4;">${msg}</div>
            </div>
        </div>
        <div style="margin-top:8px;background:${c.border};border-radius:4px;overflow:hidden;">
            <div style="height:3px;background:${c.progressColor};animation:progress 4s linear forwards;"></div>
        </div>`;
    document.getElementById('toastContainer').appendChild(el);
    el.addEventListener('click', () => { el.style.animation='toastOut 0.3s ease forwards'; setTimeout(()=>el.remove(),300); });
    setTimeout(() => { el.style.animation='toastOut 0.3s ease forwards'; setTimeout(()=>el.remove(),300); }, 4000);
}

// ── Modal ──────────────────────────────────────────────────────────────────
function openModal(slider = null) {
    editingId = slider ? slider.id : null;
    document.getElementById('modalTitle').textContent = slider ? 'Edit Slider' : 'Tambah Slider';
    document.getElementById('sliderTitle').value   = slider?.title || '';
    document.getElementById('sliderDesc').value    = slider?.description || '';
    document.getElementById('sliderOrder').value   = slider?.order_index || 1;
    document.getElementById('imageUrl').value      = slider?.image_url || '';

    const preview = document.getElementById('imagePreview');
    const placeholder = document.getElementById('imagePlaceholder');
    if (slider?.image_url) {
        preview.src = slider.image_url;
        preview.classList.remove('hidden');
        placeholder.classList.add('hidden');
    } else {
        preview.src = '';
        preview.classList.add('hidden');
        placeholder.classList.remove('hidden');
    }

    document.getElementById('modalOverlay').classList.remove('hidden');
}

function closeModal() {
    document.getElementById('modalOverlay').classList.add('hidden');
    document.getElementById('imageInput').value = '';
    editingId = null;
}

// Close on overlay click
document.getElementById('modalOverlay').addEventListener('click', function(e) {
    if (e.target === this) closeModal();
});

// ── Upload Image ───────────────────────────────────────────────────────────
async function handleImageUpload(input) {
    if (!input.files[0]) return;
    const file = input.files[0];
    if (file.size > 5 * 1024 * 1024) { showToast('error', 'Ukuran file maksimal 5MB.'); return; }

    document.getElementById('uploadOverlay').classList.remove('hidden');

    const formData = new FormData();
    formData.append('image', file);

    try {
        const resp = await fetch('/slider/upload', {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': CSRF },
            body: formData
        });
        const data = await resp.json();
        if (!data.success) throw new Error(data.message);

        document.getElementById('imageUrl').value = data.url;
        const preview = document.getElementById('imagePreview');
        preview.src = data.url;
        preview.classList.remove('hidden');
        document.getElementById('imagePlaceholder').classList.add('hidden');
    } catch (err) {
        showToast('error', err.message || 'Gagal upload gambar.');
    } finally {
        document.getElementById('uploadOverlay').classList.add('hidden');
    }
}

// ── Save ───────────────────────────────────────────────────────────────────
async function saveSlider() {
    const title    = document.getElementById('sliderTitle').value.trim();
    const imageUrl = document.getElementById('imageUrl').value.trim();
    const desc     = document.getElementById('sliderDesc').value.trim();
    const order    = parseInt(document.getElementById('sliderOrder').value) || 1;

    if (!title)    { showToast('error', 'Judul wajib diisi.'); return; }
    if (!imageUrl) { showToast('error', 'Gambar wajib diupload.'); return; }

    const btn = document.getElementById('btnSave');
    btn.disabled = true;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Menyimpan...';

    try {
        const url    = editingId ? `/slider/${editingId}` : '/slider';
        const method = editingId ? 'PUT' : 'POST';
        const resp   = await fetch(url, {
            method,
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF, 'Accept': 'application/json' },
            body: JSON.stringify({ title, description: desc, image_url: imageUrl, order_index: order })
        });
        const data = await resp.json();
        if (!data.success) throw new Error(data.message);
        showToast('success', editingId ? 'Slider berhasil diupdate!' : 'Slider berhasil ditambahkan!');
        closeModal();
        loadSliders();
    } catch (err) {
        showToast('error', err.message || 'Gagal menyimpan slider.');
    } finally {
        btn.disabled = false;
        btn.innerHTML = '<i class="fas fa-save mr-2"></i>Simpan';
    }
}

// ── Delete ─────────────────────────────────────────────────────────────────
async function deleteSlider(id, title) {
    if (!confirm(`Hapus slider "${title}"?`)) return;
    try {
        const resp = await fetch(`/slider/${id}`, {
            method: 'DELETE',
            headers: { 'X-CSRF-TOKEN': CSRF, 'Accept': 'application/json' }
        });
        const data = await resp.json();
        if (!data.success) throw new Error(data.message);
        showToast('success', 'Slider berhasil dihapus!');
        loadSliders();
    } catch (err) {
        showToast('error', err.message || 'Gagal menghapus slider.');
    }
}

// ── Render ─────────────────────────────────────────────────────────────────
function renderSliders(sliders) {
    if (!sliders.length) {
        document.getElementById('sliderContainer').innerHTML = `
            <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-12 text-center">
                <i class="fas fa-images text-gray-300 text-4xl mb-3 block"></i>
                <p class="text-gray-500 font-medium">Belum ada slider</p>
                <p class="text-gray-400 text-sm mt-1">Klik "Tambah Slider" untuk menambahkan</p>
            </div>`;
        return;
    }

    const html = `
        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-5">
            ${sliders.map(s => `
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden group">
                <div class="relative h-44 bg-gray-100 overflow-hidden">
                    <img src="${s.image_url}" alt="${s.title}"
                        class="w-full h-full object-cover group-hover:scale-105 transition duration-300"
                        onerror="this.src='https://via.placeholder.com/400x200?text=No+Image'">
                    <div class="absolute top-2 right-2 bg-black/50 text-white text-xs px-2 py-1 rounded-full">
                        <i class="fas fa-sort-numeric-up mr-1"></i>#${s.order_index}
                    </div>
                </div>
                <div class="p-4">
                    <h3 class="font-bold text-gray-800 text-sm truncate">${s.title}</h3>
                    ${s.description ? `<p class="text-xs text-gray-500 mt-1 line-clamp-2">${s.description}</p>` : ''}
                    <div class="flex gap-2 mt-4">
                        <button onclick='openModal(${JSON.stringify(s)})'
                            class="flex-1 py-2 border border-gray-200 text-gray-600 rounded-lg text-xs font-semibold hover:bg-gray-50 transition flex items-center justify-center gap-1.5">
                            <i class="fas fa-edit text-xs"></i> Edit
                        </button>
                        <button onclick="deleteSlider(${s.id}, '${s.title.replace(/'/g,"\\'")}' )"
                            class="flex-1 py-2 bg-red-50 hover:bg-red-100 text-red-600 rounded-lg text-xs font-semibold transition flex items-center justify-center gap-1.5">
                            <i class="fas fa-trash text-xs"></i> Hapus
                        </button>
                    </div>
                </div>
            </div>`).join('')}
        </div>`;
    document.getElementById('sliderContainer').innerHTML = html;
}

// ── Load ───────────────────────────────────────────────────────────────────
async function loadSliders() {
    try {
        const resp = await fetch('/slider/data', {
            headers: { 'X-CSRF-TOKEN': CSRF, 'Accept': 'application/json' }
        });
        const data = await resp.json();
        if (data.success) renderSliders(data.sliders);
        else throw new Error(data.message);
    } catch (err) {
        document.getElementById('sliderContainer').innerHTML = `
            <div class="bg-red-50 border border-red-200 rounded-xl p-6 text-center">
                <i class="fas fa-exclamation-circle text-red-400 text-2xl mb-2 block"></i>
                <p class="text-red-600 font-medium text-sm">Gagal memuat slider: ${err.message}</p>
            </div>`;
    }
}

loadSliders();
</script>
@endsection