@extends('layouts.vuexy')

@section('title', 'Selector de contenido')

@section('content')
    <p class="text-body-secondary mb-6">
        Busca un restaurante real de GiGiApp (vía <code>partners.gigiapp.com</code>) para ver sus fotos y su descuento activo.
    </p>

    <div class="card mb-6">
        <div class="card-body">
            <div class="row g-4 align-items-center">
                <div class="col-md-8">
                    <div class="input-group">
                        <span class="input-group-text"><i class="icon-base ti tabler-search"></i></span>
                        <input type="search" id="q" class="form-control" placeholder="Buscar restaurante por nombre…">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="discounted_only">
                        <label class="form-check-label" for="discounted_only">Solo con descuento activo</label>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="results" class="row g-6"></div>

    <div class="modal fade" id="detailModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Detalle del restaurante</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
                </div>
                <div class="modal-body" id="detail-content">Cargando…</div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
const resultsEl = document.getElementById('results');
const qEl = document.getElementById('q');
const discountedEl = document.getElementById('discounted_only');
const detailModalEl = document.getElementById('detailModal');
const detailModal = new bootstrap.Modal(detailModalEl);
const detailContent = document.getElementById('detail-content');

function debounce(fn, ms) {
    let t;
    return (...args) => { clearTimeout(t); t = setTimeout(() => fn(...args), ms); };
}

function discountLabel(store) {
    if (!store.discount) return '';
    const d = store.discount;
    const value = typeof d === 'object' ? d.discount : d;
    if (!value) return '';
    const type = typeof d === 'object' && d.discount_type === 'percent' ? '%' : (typeof d === 'object' ? ' ' + d.discount_type : '%');
    return `${value}${type} OFF`;
}

async function loadRestaurants() {
    const params = new URLSearchParams();
    if (qEl.value.trim()) params.set('q', qEl.value.trim());
    if (discountedEl.checked) params.set('discounted_only', '1');

    resultsEl.innerHTML = '<div class="col-12"><p class="text-body-secondary">Buscando…</p></div>';

    let res;
    try {
        res = await fetch(`{{ route('content.restaurants') }}?${params}`, { headers: { 'Accept': 'application/json' } });
    } catch (e) {
        resultsEl.innerHTML = '<div class="col-12"><div class="alert alert-danger">No se pudo conectar con el panel.</div></div>';
        return;
    }

    if (!res.ok) {
        const body = await res.json().catch(() => ({}));
        resultsEl.innerHTML = `<div class="col-12"><div class="alert alert-danger">${body.message || 'Error consultando partners.gigiapp.com.'}</div></div>`;
        return;
    }

    const data = await res.json();
    const stores = data.stores || [];

    if (stores.length === 0) {
        resultsEl.innerHTML = '<div class="col-12"><p class="text-body-secondary">Sin resultados.</p></div>';
        return;
    }

    resultsEl.innerHTML = '';
    for (const store of stores) {
        const label = discountLabel(store);
        const col = document.createElement('div');
        col.className = 'col-md-4 col-lg-3';
        col.innerHTML = `
            <div class="card h-100 cursor-pointer" role="button">
                <img src="${store.logo_full_url || ''}" class="card-img-top" style="height: 140px; object-fit: cover;" alt="${store.name}">
                <div class="card-body">
                    <h6 class="card-title mb-1">${store.name}</h6>
                    <p class="card-text text-body-secondary small mb-2">${store.address || ''}</p>
                    ${label ? `<span class="badge bg-label-danger">${label}</span>` : ''}
                </div>
            </div>`;
        col.querySelector('.card').addEventListener('click', () => openDetail(store.id));
        resultsEl.appendChild(col);
    }
}

async function openDetail(id) {
    detailContent.innerHTML = 'Cargando…';
    detailModal.show();

    let res;
    try {
        res = await fetch(`/content/restaurants/${id}`, { headers: { 'Accept': 'application/json' } });
    } catch (e) {
        detailContent.innerHTML = '<div class="alert alert-danger">No se pudo conectar con el panel.</div>';
        return;
    }

    if (!res.ok) {
        const body = await res.json().catch(() => ({}));
        detailContent.innerHTML = `<div class="alert alert-danger">${body.message || 'Error consultando partners.gigiapp.com.'}</div>`;
        return;
    }

    const data = await res.json();
    const store = data.store || {};
    const items = data.popular_items || [];
    const label = discountLabel(store);

    detailContent.innerHTML = `
        <img src="${store.cover_photo_full_url || store.logo_full_url || ''}" class="img-fluid rounded mb-4" style="width: 100%; height: 200px; object-fit: cover;" alt="${store.name || ''}">
        <h5>${store.name || ''} ${label ? `<span class="badge bg-label-danger">${label}</span>` : ''}</h5>
        <p class="text-body-secondary">${store.address || ''}</p>
        <h6 class="mt-6">Productos populares</h6>
        <div class="row g-4">
            ${items.map(item => `
                <div class="col-md-3 col-6">
                    <img src="${item.image_full_url || ''}" class="img-fluid rounded mb-1" style="width: 100%; height: 80px; object-fit: cover;" alt="${item.name}">
                    <div class="small">${item.name}</div>
                    <strong class="small">${item.price ?? ''}</strong>
                </div>
            `).join('') || '<div class="col-12"><p class="text-body-secondary">Sin productos populares.</p></div>'}
        </div>
    `;
}

qEl.addEventListener('input', debounce(loadRestaurants, 400));
discountedEl.addEventListener('change', loadRestaurants);
loadRestaurants();
</script>
@endpush