@extends('layouts.dashboardnew')

@section('content')

{{-- ===================== HEADER ===================== --}}
<div class="card border-0 shadow-sm rounded-4 mb-3 overflow-hidden">
    <div class="card-body p-4 bg-primary bg-gradient text-white position-relative">
        <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-3">
            <div class="d-flex align-items-center gap-3">
                <div class="bg-white bg-opacity-25 rounded-3 d-inline-flex align-items-center justify-content-center border border-light border-opacity-25"
                     style="width:52px;height:52px;">
                    <i class="fa-solid fa-medal fs-4"></i>
                </div>
                <div>
                    <h4 class="fw-bold mb-1 text-white">Productos de fidelización</h4>
                    <p class="mb-0 small text-white text-opacity-75">
                        Administra los productos canjeables por puntos de lealtad.
                    </p>
                </div>
            </div>

            <div class="d-flex flex-column flex-sm-row gap-2 align-self-start align-self-md-center">
                <span class="badge bg-white text-primary rounded-pill fw-semibold px-3 py-2 align-self-start" id="totalProductos">
                    <i class="fa-solid fa-box me-1"></i> {{ count($productos) }} productos
                </span>
                <a href="{{ route('fidelizacion-show') }}"
                   class="btn bg-white fw-semibold rounded-pill px-3 py-1 text-primary shadow-sm align-self-start d-inline-flex align-items-center gap-2">
                    <i class="fa-solid fa-plus"></i> Nuevo producto
                </a>
            </div>
        </div>
    </div>
</div>


{{-- ===================== TOOLBAR (búsqueda + filtros + acciones masivas) ===================== --}}
<div class="card border-0 shadow-sm rounded-4 mb-3">
    <form action="{{route('fidelizacion-index')}}" method="get">

        <div class="card-body p-3">
            <div class="d-flex flex-wrap align-items-center gap-2">

                {{-- Búsqueda --}}
                <div class="input-group input-group-sm" style="width:auto;flex:1 1 280px;max-width:380px;">
                    <span class="input-group-text bg-light text-secondary">
                        <i class="fa-solid fa-magnifying-glass"></i>
                    </span>
                    <input type="text" name="buscar" id="buscarProducto" class="form-control" placeholder="Buscar por nombre">
                </div>

                {{-- Orden --}}
                <div class="d-flex align-items-center gap-1">
                    <label class="form-label fw-semibold text-secondary small mb-0 text-nowrap d-none d-md-inline">
                        Ordenar:
                    </label>
                    <select name="orden" id="ordenarProducto" class="form-select form-select-sm" style="width:auto;">
                        <option value="newest">Más recientes</option>
                        <option value="oldest">Más antiguos</option>
                        <option value="az">Nombre A → Z</option>
                        <option value="za">Nombre Z → A</option>
                    </select>
                </div>

                {{-- Botón Buscar --}}
                <button type="submit" class="btn btn-primary btn-sm fw-semibold rounded-pill px-3 text-nowrap d-inline-flex align-items-center gap-1">
                    <i class="fa-solid fa-magnifying-glass"></i> Buscar
                </button>

            </div>
        </div>

    </form>
</div>


{{-- ===================== GRID DE PRODUCTOS ===================== --}}
<div id="gridProductos" class="row g-3">

    @foreach ($productos as $item)
    <div class="col-6 col-md-4 col-lg-3 producto-item"
         data-id="{{ $item->id }}"
         data-title="{{ strtolower($item->title) }}"
         data-created="{{ $item->created_at }}">

        <div class="card border-0 shadow-sm rounded-4 overflow-hidden h-100 producto-card">

            {{-- ID flotante --}}
            <span class="producto-id badge bg-dark bg-opacity-50 text-white rounded-pill font-monospace px-2 py-1 small">
                #{{ $item->id }}
            </span>

            {{-- Imagen + overlay con acciones --}}
            <div class="producto-media">
                <img src="{{ $item->img }}" alt="{{ $item->title }}" loading="lazy">

                <div class="producto-overlay">
                    <div class="d-flex gap-2 w-100 justify-content-center">
                        <a href="{{ route('fidelizacion-editar', $item->id) }}"
                           class="btn btn-sm btn-light fw-semibold rounded-pill px-3 shadow-sm text-primary"
                           title="Editar">
                            <i class="fa-solid fa-pencil"></i>
                            <span class="d-none d-sm-inline ms-1">Editar</span>
                        </a>
                        <a href="{{ route('fidelizacion-eliminar', ['id' => $item->id]) }}"
                           class="btn btn-sm btn-danger fw-semibold rounded-pill px-3 shadow-sm"
                           title="Eliminar"
                           onclick="return confirm('¿Eliminar este producto?');">
                            <i class="fa-solid fa-trash"></i>
                            <span class="d-none d-sm-inline ms-1">Eliminar</span>
                        </a>
                    </div>
                </div>
            </div>

            {{-- Info --}}
            <div class="card-body p-3">
                <h6 class="fw-bold text-truncate mb-1 text-dark" title="{{ $item->title }}">
                    {{ $item->title }}
                </h6>

                <div class="d-flex align-items-center justify-content-between gap-2">
                    @if(isset($item->precio))
                        <span class="badge bg-warning-subtle text-warning-emphasis rounded-pill px-2 py-1 fw-bold font-monospace small">
                            <i class="fa-solid fa-star"></i> {{ $item->precio }}
                        </span>
                    @endif
                    <small class="text-secondary font-monospace text-nowrap">
                        <i class="fa-regular fa-calendar text-primary"></i>
                        {{ date('d-m-Y', strtotime($item->created_at)) }}
                    </small>
                </div>
            </div>
        </div>
    </div>
    @endforeach

</div>


{{-- ===================== ESTADO VACÍO (cuando no hay resultados de búsqueda) ===================== --}}
@if($productos->count() == 0)
<div id="sinResultados" class="text-center py-5 d-none">
    <div class="bg-secondary-subtle text-secondary-emphasis rounded-circle d-inline-flex align-items-center justify-content-center mb-3"
         style="width:72px;height:72px;">
        <i class="fa-solid fa-magnifying-glass fs-2"></i>
    </div>
    <h5 class="fw-bold text-dark mb-2">Sin resultados</h5>
    <p class="text-secondary small mb-0">
        No se encontraron productos que coincidan con tu búsqueda.
    </p>
</div>
@endif

@endsection