@extends('layouts.admin.app')

@section('content')
<div class="container-fluid py-4">

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

    <div>
        <h4 class="fw-bold text-gold mb-1">
            <i class="fas fa-tags me-2"></i> {{ $categoria->name }}
        </h4>
        <small class="text-muted">
            Produtos pertencentes a esta categoria
        </small>
    </div>

    <a href="{{ route('dashboard.admin.categorias.index') }}"
       class="btn btn-outline-light">
        <i class="fas fa-arrow-left me-1"></i> Voltar
    </a>

</div>

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

@forelse($produtos as $produto)

    @php
        $mainImage = $produto->images->where('is_primary',1)->first()
                      ?? $produto->images->first();

        $now = now();

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

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

        <a href="{{ route('dashboard.admin.produtos.show',$produto) }}"
           class="text-decoration-none">

            <div class="product-card h-100">

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

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

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

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

                </div>

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

                    <h6>{{ $produto->name }}</h6>

                    <p>
                        {{ $produto->brand ?? '-' }}
                        {{ $produto->model ?? '' }}
                    </p>

                    {{-- PRICE (SEM IVA) --}}
                    <div class="product-price">

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

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

                    </div>

                </div>

                {{-- FOOTER --}}
                <div class="product-footer">

                    <span class="stock">
                        Stock: {{ $produto->quantity ?? 0 }}
                    </span>

                    <span class="arrow">
                        <i class="fas fa-arrow-right"></i>
                    </span>

                </div>

            </div>

        </a>

    </div>

@empty

    <div class="col-12">
        <div class="empty-state text-center">

            <i class="fas fa-box-open"></i>

            <h5>Nenhum produto encontrado</h5>

            <p>
                Esta categoria ainda não possui produtos associados.
            </p>

        </div>
    </div>

@endforelse

</div>

</div>

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

/* BACKGROUND */
body{
    background:#0b0f1a;
}

/* GOLD */
.text-gold{
    color:#d4af37;
}

/* CARD */
.product-card{
    background: linear-gradient(145deg,#0f172a,#020617);
    border-radius:18px;
    overflow:hidden;

    border:1px solid #1f2937;

    transition:.35s ease;
}

/* HOVER */
.product-card:hover{
    transform: translateY(-8px);
    box-shadow:0 25px 60px rgba(0,0,0,.4);
    border-color:#d4af37;
}

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

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

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

.badge-promo{
    left:10px;
    background:#dc2626;
}

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

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

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

.product-body p{
    font-size:12px;
    color:#9ca3af;
}

/* PRICE */
.product-price{
    margin-top:8px;
}

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

.new{
    color:#d4af37;
    font-weight:700;
    font-size:15px;
}

/* FOOTER */
.product-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:10px 14px;

    border-top:1px solid #1f2937;

    font-size:12px;
}

.stock{
    color:#9ca3af;
}

.arrow{
    color:#d4af37;
}

/* EMPTY */
.empty-state{
    background:#0f172a;
    border:1px solid #1f2937;
    border-radius:18px;
    padding:50px;
    color:#9ca3af;
}

.empty-state i{
    font-size:40px;
    margin-bottom:15px;
    color:#d4af37;
}

.empty-state h5{
    color:#fff;
}

/* RESPONSIVO */
@media(max-width:768px){
    .product-img{ height:180px; }
}

@media(max-width:576px){
    .product-img{ height:150px; }
}

</style>

@endsection