@extends('admin.layout')

@section('title', 'Productos · Admin')

@section('content')
<div class="space-y-8">
    <div class="flex items-center justify-between">
        <div>
            <h2 class="text-2xl font-bold text-white">Productos de Canje</h2>
            <p class="mt-1 text-sm text-slate-400">Gestiona los productos que los usuarios pueden canjear por puntos.</p>
        </div>
    </div>

    <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
        @foreach ($stats as $stat)
            <div class="rounded-2xl border border-white/10 bg-white/5 p-5">
                <p class="text-xs uppercase tracking-wider text-slate-400">{{ $stat['label'] }}</p>
                <p class="mt-2 text-3xl font-bold text-white">{{ $stat['value'] }}</p>
            </div>
        @endforeach
    </div>

    <div class="rounded-2xl border border-white/10 bg-white/5 p-6">
        <h3 class="text-lg font-semibold text-white">Crear nuevo producto</h3>
        <form method="POST" action="{{ route('admin.products.store') }}" enctype="multipart/form-data" class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
            @csrf
            <div>
                <label class="block text-sm font-medium text-slate-300">Nombre *</label>
                <input type="text" name="name" required class="mt-1 w-full rounded-xl border border-white/10 bg-slate-900 px-4 py-2.5 text-white focus:border-sky-500 focus:ring-1 focus:ring-sky-500" placeholder="Ej: Gorra Spingo">
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-300">Costo en puntos *</label>
                <input type="number" name="points_cost" required min="0" class="mt-1 w-full rounded-xl border border-white/10 bg-slate-900 px-4 py-2.5 text-white focus:border-sky-500 focus:ring-1 focus:ring-sky-500" placeholder="500">
            </div>
            <div class="sm:col-span-2">
                <label class="block text-sm font-medium text-slate-300">Descripción</label>
                <textarea name="description" rows="2" class="mt-1 w-full rounded-xl border border-white/10 bg-slate-900 px-4 py-2.5 text-white focus:border-sky-500 focus:ring-1 focus:ring-sky-500" placeholder="Descripción del producto"></textarea>
            </div>
            <div class="sm:col-span-2">
                <label class="block text-sm font-medium text-slate-300">Imagen del producto</label>
                <div class="mt-1 flex items-center gap-4">
                    <div id="image-preview-create" class="hidden h-20 w-20 shrink-0 overflow-hidden rounded-xl border border-white/10 bg-slate-900">
                        <img id="image-preview-img-create" src="" alt="Preview" class="h-full w-full object-cover">
                    </div>
                    <input type="file" name="image" accept="image/*" id="image-input-create" class="block w-full text-sm text-slate-300 file:mr-4 file:rounded-lg file:border-0 file:bg-sky-500 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-white hover:file:bg-sky-600">
                </div>
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-300">Stock</label>
                <input type="number" name="stock" min="0" class="mt-1 w-full rounded-xl border border-white/10 bg-slate-900 px-4 py-2.5 text-white focus:border-sky-500 focus:ring-1 focus:ring-sky-500" placeholder="10">
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-300">Orden</label>
                <input type="number" name="sort_order" min="0" value="0" class="mt-1 w-full rounded-xl border border-white/10 bg-slate-900 px-4 py-2.5 text-white focus:border-sky-500 focus:ring-1 focus:ring-sky-500">
            </div>
            <div class="flex items-end">
                <label class="flex items-center gap-2 text-sm font-medium text-slate-300">
                    <input type="checkbox" name="is_active" value="1" checked class="h-5 w-5 rounded border-white/20 bg-slate-900 text-sky-500 focus:ring-sky-500">
                    Activo
                </label>
            </div>
            <div class="sm:col-span-2">
                <button type="submit" class="rounded-xl bg-sky-500 px-6 py-2.5 text-sm font-semibold text-white transition hover:bg-sky-600">Crear producto</button>
            </div>
        </form>
    </div>

    <div class="overflow-hidden rounded-2xl border border-white/10 bg-white/5">
        <table class="w-full text-left text-sm">
            <thead class="border-b border-white/10 text-xs uppercase tracking-wider text-slate-400">
                <tr>
                    <th class="px-4 py-3">Imagen</th>
                    <th class="px-4 py-3">Nombre</th>
                    <th class="px-4 py-3">Puntos</th>
                    <th class="px-4 py-3">Stock</th>
                    <th class="px-4 py-3">Estado</th>
                    <th class="px-4 py-3">Orden</th>
                    <th class="px-4 py-3 text-right">Acciones</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-white/5">
                @forelse ($products as $product)
                    <tr class="hover:bg-white/5">
                        <td class="px-4 py-3">
                            @if ($product->image_url)
                                <img src="{{ $product->image_url }}" alt="{{ $product->name }}" class="h-12 w-12 rounded-lg object-cover">
                            @else
                                <div class="flex h-12 w-12 items-center justify-center rounded-lg bg-slate-800 text-slate-500">
                                    <span>📦</span>
                                </div>
                            @endif
                        </td>
                        <td class="px-4 py-3">
                            <p class="font-medium text-white">{{ $product->name }}</p>
                            <p class="mt-0.5 text-xs text-slate-400">{{ $product->description ? \Illuminate\Support\Str::limit($product->description, 60) : '—' }}</p>
                        </td>
                        <td class="px-4 py-3 font-semibold text-emerald-300">{{ $product->points_cost }}</td>
                        <td class="px-4 py-3 text-slate-300">{{ $product->stock ?? '∞' }}</td>
                        <td class="px-4 py-3">
                            @if ($product->is_active)
                                <span class="inline-flex items-center rounded-full bg-emerald-500/15 px-2.5 py-0.5 text-xs font-medium text-emerald-300">Activo</span>
                            @else
                                <span class="inline-flex items-center rounded-full bg-rose-500/15 px-2.5 py-0.5 text-xs font-medium text-rose-300">Inactivo</span>
                            @endif
                        </td>
                        <td class="px-4 py-3 text-slate-300">{{ $product->sort_order }}</td>
                        <td class="px-4 py-3 text-right">
                            <div class="flex flex-col items-end gap-2">
                                <div class="flex items-center justify-end gap-2">
                                    <form method="POST" action="{{ route('admin.products.update', $product) }}" enctype="multipart/form-data" class="inline">
                                        @csrf
                                        <input type="hidden" name="name" value="{{ $product->name }}">
                                        <input type="hidden" name="description" value="{{ $product->description }}">
                                        <input type="hidden" name="points_cost" value="{{ $product->points_cost }}">
                                        <input type="hidden" name="stock" value="{{ $product->stock }}">
                                        <input type="hidden" name="sort_order" value="{{ $product->sort_order }}">
                                        @if ($product->is_active)
                                            <input type="hidden" name="is_active" value="0">
                                            <button type="submit" class="rounded-lg bg-amber-500/15 px-3 py-1.5 text-xs font-medium text-amber-300 transition hover:bg-amber-500/25">Desactivar</button>
                                        @else
                                            <input type="hidden" name="is_active" value="1">
                                            <button type="submit" class="rounded-lg bg-emerald-500/15 px-3 py-1.5 text-xs font-medium text-emerald-300 transition hover:bg-emerald-500/25">Activar</button>
                                        @endif
                                    </form>
                                    <form method="POST" action="{{ route('admin.products.delete', $product) }}" class="inline" onsubmit="return confirm('¿Eliminar este producto?')">
                                        @csrf
                                        <button type="submit" class="rounded-lg bg-rose-500/15 px-3 py-1.5 text-xs font-medium text-rose-300 transition hover:bg-rose-500/25">Eliminar</button>
                                    </form>
                                </div>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" class="px-4 py-8 text-center text-slate-400">No hay productos registrados.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div class="flex justify-center">
        {{ $products->withQueryString()->links() }}
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const input = document.getElementById('image-input-create');
    const preview = document.getElementById('image-preview-create');
    const previewImg = document.getElementById('image-preview-img-create');

    if (input) {
        input.addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(ev) {
                    previewImg.src = ev.target.result;
                    preview.classList.remove('hidden');
                };
                reader.readAsDataURL(file);
            } else {
                preview.classList.add('hidden');
                previewImg.src = '';
            }
        });
    }
});
</script>
@endsection