@extends('layouts.app')

@section('content')

<section class="search-section py-5">
    <div class="container">

        {{-- HEADER --}}
        <div class="text-center mb-5">
            <h4 class="fw-bold text-white">
                Resultados para: 
                <span class="text-accent">"{{ $q }}"</span>
            </h4>
        </div>

        @if($products->count())

        <div class="row g-4">

            @foreach($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);

                    $price = $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-img">

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

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

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

                                <small>
                                    {{ $product->brand ?? '-' }}
                                </small>

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

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

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

                                </div>

                            </div>

                        </div>

                    </a>

                </div>

            @endforeach

        </div>

        {{-- PAGINATION --}}
        <div class="mt-5">
            {{ $products->withQueryString()->links() }}
        </div>

        @else

            <div class="text-center text-white-50 py-5">
                <i class="fas fa-search fa-2x mb-3"></i>
                <p>Nenhum produto encontrado para esta pesquisa.</p>
            </div>

        @endif

    </div>
</section>

@endsection

<style>

.search-section{
    background: radial-gradient(circle at top, #0f172a, #020617);
}

/* 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;
    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-img{
    height: 220px;
    background: #fff;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
}

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

/* TEXT */
.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;
}

.price{
    font-weight:700;
    color:#fb923c;
}

/* 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;
}

.text-accent{
    color:#fb923c;
}

</style>