@extends('layouts.app')

@section('content')

<section class="lux-products-section py-5">

    <div class="container">

        {{-- HEADER --}}
        <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">

            <div>
                <h2 class="lux-title">Todos os Produtos</h2>
                <p class="lux-subtitle mb-0">
                    Descubra fragrâncias exclusivas e elegantes
                </p>
            </div>

            <span class="lux-counter">
                {{ $products->count() }} produtos disponíveis
            </span>

        </div>

        {{-- GRID --}}
        <div class="row g-4">

            @forelse($products as $product)

                @php
                    $image = $product->images->first();
                    $now = now();

                    $onPromo = $product->promo_price
                        && $product->promo_start
                        && $product->promo_end
                        && $now->between($product->promo_start, $product->promo_end);
                @endphp

                <div class="col-xl-3 col-lg-4 col-md-6">

                    <a href="{{ route('public.produtos.show', $product->slug) }}"
                       class="lux-card">

                        {{-- IMAGE --}}
                        <div class="lux-card-image">

                            <img src="{{ $image ? asset('storage/'.$image->image) : asset('images/no-image.png') }}"
                                 alt="{{ $product->name }}">

                            @if($onPromo)
                                <span class="badge-promo">Promo</span>
                            @endif

                            @if(!$product->is_available)
                                <span class="badge-off">Indisponível</span>
                            @endif

                            <div class="glow"></div>

                        </div>

                        {{-- INFO --}}
                        <div class="lux-card-body">

                            <h6 class="name">{{ $product->name }}</h6>

                            <p class="meta">
                                {{ $product->brand ?? '-' }} {{ $product->model ?? '' }}
                            </p>

                            {{-- PRICE --}}
                            <div class="price">

                                @if($onPromo)
                                    <span class="old">
                                        {{ number_format($product->price,2,',','.') }} Kz
                                    </span>

                                    <span class="new">
                                        {{ number_format($product->promo_price,2,',','.') }} Kz
                                    </span>
                                @else
                                    <span class="new">
                                        {{ number_format($product->price,2,',','.') }} Kz
                                    </span>
                                @endif

                            </div>

                        </div>

                    </a>

                </div>

            @empty

                <div class="col-12 text-center py-5 text-muted">
                    <i class="fas fa-box-open fa-2x mb-3"></i>
                    <p>Nenhum produto disponível no momento.</p>
                </div>

            @endforelse

        </div>

        {{-- PAGINAÇÃO --}}
        <div class="mt-4">
            {{ $products->links('vendor.pagination.bootstrap-5') }}
        </div>

    </div>

</section>

{{-- ================= STYLE ================= --}}
<style>

/* BACKGROUND PREMIUM (ROSÉ + DARK LUXO) */
.lux-products-section{
    background: linear-gradient(135deg,#0b0f1a,#111827,#1f2937);
    color:#f9fafb;
}

/* TITLE */
.lux-title{
    font-weight:700;
    color:#fff;
}

.lux-subtitle{
    color:#9ca3af;
}

/* COUNTER */
.lux-counter{
    background: linear-gradient(135deg,#fb923c,#f97316);
    padding:6px 14px;
    border-radius:999px;
    font-size:12px;
    font-weight:600;
    color:#000;
}

/* CARD */
.lux-card{
    display:block;
    text-decoration:none;
    border-radius:18px;
    overflow:hidden;

    background: rgba(17,24,39,0.75);
    backdrop-filter: blur(12px);

    border:1px solid rgba(255,255,255,0.08);

    transition:.35s ease;
}

.lux-card:hover{
    transform: translateY(-8px);
    box-shadow: 0 25px 60px rgba(251,146,60,0.18);
    border-color: rgba(251,146,60,0.35);
}

/* IMAGE */
.lux-card-image{
    position:relative;
    height:220px;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.lux-card-image img{
    max-width:85%;
    max-height:85%;
    object-fit:contain;
    transition:.5s ease;
}

.lux-card:hover img{
    transform: scale(1.06);
}

/* glow */
.glow{
    position:absolute;
    inset:0;
    background: radial-gradient(circle, rgba(251,146,60,.25), transparent 60%);
    opacity:0;
    transition:.4s ease;
}

.lux-card:hover .glow{
    opacity:1;
}

/* BADGES */
.badge-promo{
    position:absolute;
    top:12px;
    left:12px;
    background:#ef4444;
    color:#fff;
    font-size:11px;
    padding:4px 10px;
    border-radius:20px;
}

.badge-off{
    position:absolute;
    top:12px;
    right:12px;
    background:#6b7280;
    color:#fff;
    font-size:11px;
    padding:4px 10px;
    border-radius:20px;
}

/* BODY */
.lux-card-body{
    padding:14px;
    text-align:center;
}

.name{
    font-size:15px;
    font-weight:600;
    color:#fff;
    margin-bottom:4px;
}

.meta{
    font-size:12px;
    color:#9ca3af;
    margin-bottom:10px;
}

/* PRICE */
.price{
    display:flex;
    justify-content:center;
    align-items:baseline;
    gap:8px;
}

.old{
    font-size:12px;
    color:#ef4444;
    text-decoration: line-through;
}

.new{
    font-size:16px;
    font-weight:700;
    color:#fb923c;
}

/* RESPONSIVO */
@media(max-width:768px){
    .lux-card-image{height:190px;}
}

@media(max-width:576px){
    .lux-card-image{height:170px;}
}

</style>

@endsection