@extends('layouts.app')

@section('content')

{{-- HEADER DA CATEGORIA --}}
<section class="category-header py-5">
    <div class="container">

        <nav aria-label="breadcrumb" class="mb-3">
            <ol class="breadcrumb mb-0 breadcrumb-dark">
                <li class="breadcrumb-item">
                    <a href="{{ url('/') }}">Início</a>
                </li>
                <li class="breadcrumb-item active text-white">
                    {{ $category->name }}
                </li>
            </ol>
        </nav>

        <h2 class="fw-bold text-white">{{ $category->name }}</h2>

        @if($category->description)
            <p class="text-white-50 mt-2 col-lg-8">
                {{ $category->description }}
            </p>
        @endif

    </div>
</section>

{{-- LISTAGEM --}}
<section class="category-section py-5">
    <div class="container">

        <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
            <h5 class="text-black mb-0">
                {{ $products->count() }} produtos encontrados
            </h5>
        </div>

        <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);

                    $oldPrice = $product->price;
                    $finalPrice = $onPromo ? $product->promo_price : $product->price;
                @endphp

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

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

                        <div class="product-card">

                            {{-- IMAGE --}}
                            <div class="product-image">

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

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

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

                            </div>

                            {{-- BODY --}}
                            <div class="product-body">

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

                                <small>
                                    {{ $product->brand }} {{ $product->model }}
                                </small>

                                {{-- PREÇO --}}
                                <div class="price-box">

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

                                    <span class="final-price">
                                        {{ number_format($finalPrice,2,',','.') }} Kz
                                    </span>

                                </div>

                            </div>

                        </div>

                    </a>

                </div>

            @empty

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

            @endforelse

        </div>

    </div>
</section>

@endsection

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

/* BACKGROUND GERAL */
body{
    background: radial-gradient(circle at top, #0f172a, #020617);
}

/* HEADER */
.category-header{
    background: linear-gradient(135deg,#0b1220,#111827);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* breadcrumb */
.breadcrumb-dark a{
    color:#94a3b8;
    text-decoration:none;
}

/* SECTION */
.category-section{
    background: transparent;
}

/* CARD */
.product-card{
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    overflow: hidden;
    transition: .3s ease;
    backdrop-filter: blur(10px);
}

.product-card:hover{
    transform: translateY(-8px);
    border-color: rgba(251,146,60,0.4);
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

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

.product-image img{
    max-width: 85%;
    max-height: 85%;
    object-fit: contain;
}

/* BODY */
.product-body{
    padding:14px;
    text-align:center;
    color:#fff;
}

.product-body h6{
    margin-bottom:4px;
    font-weight:600;
}

.product-body small{
    color:#94a3b8;
}

/* PRICE */
.price-box{
    margin-top:10px;
}

.old-price{
    text-decoration: line-through;
    color:#94a3b8;
    font-size:12px;
    margin-right:6px;
}

.final-price{
    font-weight:700;
    color:#fb923c;
    font-size:15px;
}

/* BADGES */
.badge{
    position:absolute;
    top:10px;
    padding:4px 10px;
    font-size:11px;
    border-radius:20px;
}

.badge-promo{
    left:10px;
    background:#ef4444;
    color:#fff;
}

.badge-off{
    right:10px;
    background:#374151;
    color:#fff;
}

</style>