@extends('layouts.admin')

@section('admin-content')
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;">
    <h2 style="font-size: 1.5rem; font-weight: 800;">Catálogo de Productos</h2>
    <a href="{{ route('admin.products.create') }}" class="btn btn-primary btn-sm">
        <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
        Nuevo Producto
    </a>
</div>

@if($products->isEmpty())
    <p style="color: var(--text-muted); text-align: center; padding: 2rem;">No hay productos creados en este momento.</p>
@else
    <div class="table-responsive">
        <table class="table">
            <thead>
                <tr>
                    <th>Imagen</th>
                    <th>Nombre</th>
                    <th>Descripción</th>
                    <th>Precio</th>
                    <th>Stock</th>
                    <th style="text-align: right;">Acciones</th>
                </tr>
            </thead>
            <tbody>
                @foreach($products as $product)
                    <tr>
                        <td>
                            <img src="{{ $product->image_url }}" alt="{{ $product->name }}" style="width: 50px; height: 50px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border-color); background: #f1f5f9;">
                        </td>
                        <td><strong>{{ $product->name }}</strong></td>
                        <td>
                            <div style="max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.85rem;" title="{{ $product->description }}">
                                {{ $product->description }}
                            </div>
                        </td>
                        <td style="font-weight: 600; color: var(--primary-color);">${{ number_format($product->price, 2) }}</td>
                        <td>
                            @if($product->stock <= 0)
                                <span class="badge badge-warning">Agotado</span>
                            @else
                                <span class="badge badge-info">{{ $product->stock }} un.</span>
                            @endif
                        </td>
                        <td style="text-align: right;">
                            <div style="display: inline-flex; gap: 0.5rem; justify-content: flex-end;">
                                <a href="{{ route('admin.products.edit', $product) }}" class="btn btn-outline btn-sm" title="Editar">
                                    Editar
                                </a>
                                <form action="{{ route('admin.products.destroy', $product) }}" method="POST" onsubmit="return confirm('¿Estás seguro de eliminar este producto? Esta acción no se puede deshacer.');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-danger btn-sm" title="Eliminar">
                                        Eliminar
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
@endif
@endsection