@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-2 mb-4">
    <div>
        <h4 class="fw-bold mb-1">
            <i class="fas fa-boxes text-primary"></i> Gestão de Stock
        </h4>
        <small class="text-muted">
            Controle de entradas e saídas de produtos
        </small>
    </div>
</div>

{{-- FILTRO --}}
<div class="row mb-4">
    <div class="col-md-6 col-lg-4">
        <div class="input-group custom-search">
            <span class="input-group-text">
                <i class="fas fa-search"></i>
            </span>
            <input type="text" id="productFilter" class="form-control"
                   placeholder="Pesquisar produto, marca, modelo ou categoria...">
        </div>
    </div>
</div>

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

@forelse($products as $product)
@php
    $category = $product->category->name ?? '-';
    $mainImage = $product->images->where('is_primary',1)->first() ?? $product->images->first();
@endphp

<div class="col-xl-3 col-lg-4 col-md-6 product-card"
     data-search="{{ strtolower($product->name.' '.$product->brand.' '.$product->model.' '.$category) }}">

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

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

        @if($product->is_featured)
            <span class="badge badge-featured">
                ⭐ Destaque
            </span>
        @endif
    </div>

    {{-- CONTEÚDO --}}
    <div class="text-center card-body">

        <h6 class="fw-bold mb-1 text-dark">
            {{ $product->name }}
        </h6>

        <small class="text-dark d-block mb-2">
            {{ $category }}
        </small>

        <div class="text-dark stock-meta">
            <span>Marca: {{ $product->brand ?? '-' }}</span>
        </div>

        {{-- STOCK --}}
        <div class="text-center stock-indicator mt-3">
            <span>Stock atual</span>
            <strong class="{{ $product->quantity > 5 ? 'text-success' : 'text-danger' }}">
                {{ $product->quantity }}
            </strong>
        </div>

        {{-- FORM --}}
        <form method="POST"
              action="{{ route('dashboard.tecnico.stock.update',$product) }}"
              class="stock-form mt-3">
            @csrf
            @method('PATCH')

            <input type="number"
                   name="quantity_change"
                   class="form-control form-control-sm"
                   placeholder="Qtd"
                   min="1"
                   required>

            <div class="d-flex gap-2 mt-2">
                <button type="submit" name="operation" value="add"
                        class="btn btn-success btn-sm w-100">
                    <i class="fas fa-plus"></i>
                </button>

                <button type="submit" name="operation" value="subtract"
                        class="btn btn-danger btn-sm w-100">
                    <i class="fas fa-minus"></i>
                </button>
            </div>
        </form>

    </div>

</div>
</div>

@empty
<div class="col-12 text-center text-muted py-5">
    <i class="fas fa-box-open fa-2x mb-3"></i>
    <p>Nenhum produto encontrado.</p>
</div>
@endforelse

</div>

{{-- EMPTY STATE --}}
<div id="noResults" class="text-center text-muted py-5 d-none">
    <i class="fas fa-search fa-2x mb-2"></i>
    <p>Nenhum produto corresponde à pesquisa.</p>
</div>

</div>

{{-- JS FILTRO --}}
<script>
document.addEventListener('DOMContentLoaded', () => {

    const input = document.getElementById('productFilter');
    const cards = document.querySelectorAll('.product-card');
    const noResults = document.getElementById('noResults');

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

        cards.forEach(card => {
            const text = card.getAttribute('data-search');
            const match = text.includes(value);

            card.style.display = match ? '' : 'none';

            if(match) visible++;
        });

        noResults.classList.toggle('d-none', visible > 0);
    });

});
</script>

{{-- ESTILO PREMIUM --}}
<style>

/* SEARCH */
.custom-search{
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 8px 20px rgba(0,0,0,.05);
}
.custom-search input{
    border:none;
}
.custom-search .input-group-text{
    background:#3b82f6;
    color:#fff;
    border:none;
}

/* CARD */
.stock-card{
    border:none;
    border-radius:16px;
    overflow:hidden;
    background:#fff;

    transition:.3s ease;
    box-shadow:0 10px 25px rgba(0,0,0,.05);
}

.stock-card:hover{
    transform: translateY(-6px);
    box-shadow:0 20px 45px rgba(0,0,0,.12);
}

/* IMAGE */
.stock-img{
    height:180px;
    background:#f9fafb;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
}

.stock-img img{
    max-width:90%;
    max-height:90%;
    object-fit:contain;
}

/* BADGE */
.badge-featured{
    position:absolute;
    top:10px;
    left:10px;
    background:#facc15;
    color:#111;
    font-size:11px;
    padding:5px 10px;
    border-radius:20px;
}

/* META */
.stock-meta{
    display:flex;
    flex-direction:column;
    font-size:12px;
    color:#6b7280;
}

/* STOCK */
.stock-indicator{
    display:flex;
    justify-content:space-between;
    align-items:center;

    background:#f1f5f9;
    padding:8px 12px;
    border-radius:10px;
    font-size:13px;
}

/* FORM */
.stock-form input{
    border-radius:8px;
    text-align:center;
}

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

</style>

@endsection