@extends('layouts.tecnico.app')

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

{{-- HEADER --}}
<div class="d-flex flex-wrap justify-content-between align-items-center gap-3 mb-4">
    <div>
        <h4 class="fw-bold text-gold mb-1">
            <i class="fas fa-spray-can-sparkles me-2"></i> Catálogo de Perfumes
        </h4>
        <small class="text-muted">Gestão de produtos e fragrâncias da loja</small>
    </div>

    <a href="{{ route('dashboard.tecnico.produtos.create') }}"
       class="btn btn-gold px-4">
        <i class="fas fa-plus me-1"></i> Novo Produto
    </a>
</div>

{{-- SEARCH --}}
<div class="row mb-4">
    <div class="col-md-6 col-lg-4">
        <div class="search-box">
            <i class="fas fa-search"></i>
            <input type="text"
                   id="productFilter"
                   placeholder="Pesquisar perfume, marca, nota olfativa...">
        </div>
    </div>
</div>

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

@forelse($products as $product)

@php
    $mainImage = $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 product-card"
     data-search="{{ strtolower($product->name.' '.$product->brand.' '.$product->model.' '.$product->category->name) }}">

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

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

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

        {{-- BADGES --}}
        <div class="perfume-badges">
            @if($product->is_featured)
                <span class="badge badge-gold">Destaque</span>
            @endif

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

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

    {{-- BODY --}}
    <div class="card-body text-center">

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

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

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

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

    @if($onPromo)

        {{-- PREÇO ANTIGO (RISCA + VERMELHO) --}}
        <div>
            <span class="old-price">
                {{ number_format($product->price,2,',','.') }} Kz
            </span>
        </div>

        {{-- NOVO PREÇO --}}
        <div class="new-price">
            {{ number_format($product->promo_price,2,',','.') }} Kz
        </div>

    @else

        {{-- PREÇO NORMAL --}}
        <div class="new-price">
            {{ number_format($product->price,2,',','.') }} Kz
        </div>

    @endif

</div>

    </div>

</div>
</a>
</div>

@empty
<div class="col-12 text-center py-5 text-muted">
    <i class="fas fa-spray-can fa-2x mb-3"></i>
    <p>Nenhum perfume encontrado no catálogo.</p>
</div>
@endforelse

</div>

{{-- NO RESULTS --}}
<div id="noResults" class="text-center py-5 text-muted d-none">
    <i class="fas fa-search fa-2x mb-2"></i>
    <p>Nenhum resultado encontrado.</p>
</div>

</div>

{{-- SCRIPT --}}
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', () => {
    const input = document.getElementById('productFilter');
    const cards = document.querySelectorAll('.product-card');
    const noResults = document.getElementById('noResults');

    input.addEventListener('input', () => {
        let value = input.value.toLowerCase().trim();
        let visible = 0;

        cards.forEach(card => {
            const match = card.dataset.search.includes(value);
            card.style.display = match ? '' : 'none';
            if (match) visible++;
        });

        noResults.classList.toggle('d-none', visible > 0);
    });
});
</script>
@endpush

{{-- STYLE PERFUMARIA UI --}}
<style>
body{
    background: #0b0f1a;
}

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

/* SEARCH */
.search-box{
    position: relative;
}
.search-box i{
    position: absolute;
    left: 14px;
    top: 12px;
    color: #aaa;
}
.search-box input{
    width: 100%;
    padding: 10px 12px 10px 38px;
    border-radius: 12px;
    border: 1px solid #1f2937;
    background: #0f172a;
    color: #fff;
}

/* BUTTON GOLD */
.btn-gold{
    background: linear-gradient(135deg,#d4af37,#b8860b);
    color: #000;
    font-weight: 600;
    border-radius: 12px;
}

/* CARD */
.perfume-card{
    background: #0f172a;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid #1f2937;
    transition: .3s ease;
}

.perfume-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0,0,0,.4);
}

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

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

/* BADGES */
.perfume-badges{
    position:absolute;
    top:10px;
    left:10px;
    display:flex;
    flex-direction:column;
    gap:6px;
}

.badge-gold{
    background: #d4af37;
    color:#000;
}

.badge-red{
    background:#dc2626;
}

.badge-dark{
    background:#374151;
}

/* TEXT */
.perfume-title{
    color:#fff;
    font-weight:600;
    margin-bottom:4px;
}

.perfume-meta{
    font-size:12px;
    color:#9ca3af;
}

/* PRICE */
.perfume-price{
    margin-top:12px;
}

.old-price{
    color:#ef4444;
    text-decoration: line-through;
    font-size:13px;
    display:block;
    margin-bottom:2px;
    opacity:.85;
}

.new-price{
    color:#d4af37;
    font-weight:800;
    font-size:16px;
    letter-spacing:.3px;
}

/* RESPONSIVE */
@media(max-width:768px){
    .perfume-image{ height:180px; }
}
</style>

@endsection