@extends('layouts.app')

@section('title', 'Produtos')

@push('styles')
<style>
/* ── Page header ── */
.prod-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem;
}

/* ── Filter bar ── */
.prod-filters {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
    padding: .875rem 1rem; margin-bottom: 1rem;
    display: flex; gap: .625rem; flex-wrap: wrap; align-items: center;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.prod-filters .f-search {
    position: relative; flex: 1; min-width: 200px;
}
.prod-filters .f-search svg {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    pointer-events: none; opacity: .4;
}
.prod-filters .f-search input {
    width: 100%; padding-left: 32px;
}
.prod-filters select, .prod-filters input {
    height: 38px; border: 1px solid #e2e8f0; border-radius: 7px;
    font-size: .875rem; color: #374151; background: #fff;
    padding: 0 .75rem; transition: border-color .12s;
}
.prod-filters select:focus, .prod-filters input:focus {
    outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}
.prod-filters select { cursor: pointer; min-width: 140px; padding-right: 2rem; }

/* ── Table card ── */
.prod-table-card {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
    overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.prod-table-card table { width: 100%; border-collapse: collapse; }
.prod-table-card thead th {
    background: #f8fafc; padding: .7rem 1rem;
    font-size: .72rem; font-weight: 700; color: #94a3b8;
    text-transform: uppercase; letter-spacing: .6px;
    border-bottom: 1px solid #e2e8f0; white-space: nowrap;
}
.prod-table-card tbody td {
    padding: .875rem 1rem; border-bottom: 1px solid #f1f5f9;
    font-size: .875rem; vertical-align: middle;
}
.prod-table-card tbody tr:last-child td { border-bottom: none; }
.prod-table-card tbody tr:hover td    { background: #fafbff; }

/* ── Code badge ── */
.code-tag {
    display: inline-block; padding: 2px 8px; border-radius: 5px;
    background: #f1f5f9; color: #475569;
    font-size: .75rem; font-weight: 600; font-family: monospace; letter-spacing: .3px;
}

/* ── Stock indicator ── */
.stock-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px; border-radius: 20px; font-size: .78rem; font-weight: 600;
}
.stock-chip.ok   { background: #f0fdf4; color: #15803d; }
.stock-chip.low  { background: #fef2f2; color: #b91c1c; }
.stock-chip.na   { color: #94a3b8; }

/* ── Status pill ── */
.active-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 20px; font-size: .75rem; font-weight: 600;
}
.active-pill.yes { background: #dcfce7; color: #15803d; }
.active-pill.no  { background: #f1f5f9; color: #94a3b8; }
.active-pill::before {
    content: ''; display: block; width: 6px; height: 6px; border-radius: 50%;
}
.active-pill.yes::before { background: #22c55e; }
.active-pill.no::before  { background: #cbd5e1; }

/* ── Action buttons ── */
.act-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 6px; font-size: .78rem; font-weight: 500;
    border: 1px solid #e2e8f0; background: #fff; color: #475569;
    cursor: pointer; text-decoration: none; transition: .12s; white-space: nowrap;
}
.act-btn:hover { border-color: #2563eb; color: #2563eb; background: #eff6ff; }
.act-btn.danger:hover { border-color: #ef4444; color: #dc2626; background: #fef2f2; }

/* ── Type tag ── */
.type-tag {
    display: inline-block; padding: 2px 8px; border-radius: 5px;
    font-size: .72rem; font-weight: 600;
}
.type-tag.product { background: #eff6ff; color: #1d4ed8; }
.type-tag.service { background: #fdf4ff; color: #7e22ce; }
.type-tag.kit     { background: #fff7ed; color: #c2410c; }

/* ── Empty state ── */
.empty-state { text-align: center; padding: 4rem 2rem; }
.empty-state .icon { font-size: 3rem; margin-bottom: .75rem; }
.empty-state h3 { margin: 0 0 .375rem; font-size: 1rem; color: #0f172a; }
.empty-state p  { margin: 0; font-size: .875rem; color: #64748b; }
</style>
@endpush

@section('content')

{{-- Header --}}
<div class="prod-header">
    <div>
        <h1 class="page-title" style="margin:0 0 2px;">Produtos</h1>
        <p class="page-subtitle" style="margin:0;">
            Cadastro de produtos, serviços e kits
            @if($q->total()) <span style="color:#94a3b8;">· {{ $q->total() }} registro(s)</span> @endif
        </p>
    </div>
    <a href="{{ route('products.create') }}"
       style="display:inline-flex;align-items:center;gap:7px;padding:.6rem 1.2rem;background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;border:none;border-radius:8px;font-size:.875rem;font-weight:600;text-decoration:none;box-shadow:0 2px 8px rgba(37,99,235,.28);transition:.14s;"
       onmouseover="this.style.boxShadow='0 4px 14px rgba(37,99,235,.38)'"
       onmouseout="this.style.boxShadow='0 2px 8px rgba(37,99,235,.28)'">
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
        Novo Produto
    </a>
</div>

@if(session('success'))
<div style="background:#f0fdf4;border:1px solid #bbf7d0;color:#15803d;border-radius:8px;padding:.75rem 1rem;margin-bottom:1rem;font-size:.875rem;font-weight:500;">
    ✓ {{ session('success') }}
</div>
@endif

{{-- Filters --}}
<div class="prod-filters">
    <form method="GET" style="display:contents;">
        <div class="f-search">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
            <input type="text" name="search" value="{{ request('search') }}"
                   placeholder="Nome, código ou barcode...">
        </div>

        <select name="category_id">
            <option value="">Todas categorias</option>
            @foreach($categories as $cat)
                <option value="{{ $cat->id }}" @selected(request('category_id') == $cat->id)>{{ $cat->name }}</option>
            @endforeach
        </select>

        <select name="status">
            <option value="">Qualquer status</option>
            <option value="1" @selected(request('status') === '1')>Ativo</option>
            <option value="0" @selected(request('status') === '0')>Inativo</option>
        </select>

        <select name="type">
            <option value="">Qualquer tipo</option>
            <option value="product" @selected(request('type') === 'product')>Produto</option>
            <option value="service" @selected(request('type') === 'service')>Serviço</option>
            <option value="kit"     @selected(request('type') === 'kit')>Kit</option>
        </select>

        <button type="submit"
                style="height:38px;padding:0 1rem;background:#2563eb;color:#fff;border:none;border-radius:7px;font-size:.875rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:.12s;"
                onmouseover="this.style.background='#1d4ed8'"
                onmouseout="this.style.background='#2563eb'">
            Filtrar
        </button>

        @if(request('search') || request('category_id') || request('status') || request('type'))
        <a href="{{ route('products.index') }}"
           style="height:38px;padding:0 .875rem;display:inline-flex;align-items:center;border:1px solid #e2e8f0;border-radius:7px;font-size:.875rem;color:#64748b;text-decoration:none;background:#fff;transition:.12s;white-space:nowrap;"
           onmouseover="this.style.background='#f8fafc'"
           onmouseout="this.style.background='#fff'">
            × Limpar
        </a>
        @endif
    </form>
</div>

{{-- Table --}}
<div class="prod-table-card">
    <table>
        <thead>
            <tr>
                <th style="width:110px;">Código</th>
                <th>Produto</th>
                <th style="width:80px;">Tipo</th>
                <th style="width:100px;">Categoria</th>
                <th style="width:60px;text-align:center;">Unid.</th>
                <th style="width:120px;text-align:right;">Preço Venda</th>
                <th style="width:130px;text-align:right;">Estoque</th>
                <th style="width:90px;text-align:center;">Status</th>
                <th style="width:110px;text-align:right;">Ações</th>
            </tr>
        </thead>
        <tbody>
            @forelse($q as $product)
            @php
                $low = $product->manage_stock && $product->stock_min > 0 && $product->stock_current <= $product->stock_min;
            @endphp
            <tr>
                {{-- Código --}}
                <td>
                    @if($product->code)
                        <span class="code-tag">{{ $product->code }}</span>
                    @else
                        <span style="color:#cbd5e1;font-size:.8rem;">—</span>
                    @endif
                </td>

                {{-- Nome --}}
                <td>
                    <div style="font-weight:600;color:#0f172a;line-height:1.3;">{{ $product->name }}</div>
                    @if($product->barcode)
                    <div style="font-size:.74rem;color:#94a3b8;margin-top:2px;font-family:monospace;">
                        EAN {{ $product->barcode }}
                    </div>
                    @endif
                </td>

                {{-- Tipo --}}
                <td>
                    <span class="type-tag {{ $product->type }}">
                        {{ ['product'=>'Produto','service'=>'Serviço','kit'=>'Kit'][$product->type] ?? $product->type }}
                    </span>
                </td>

                {{-- Categoria --}}
                <td style="color:#64748b;font-size:.85rem;">{{ $product->category?->name ?? '—' }}</td>

                {{-- Unidade --}}
                <td style="text-align:center;">
                    <span style="background:#f8fafc;border:1px solid #e2e8f0;padding:2px 8px;border-radius:5px;font-size:.75rem;font-weight:600;color:#475569;">{{ $product->unit }}</span>
                </td>

                {{-- Preço --}}
                <td style="text-align:right;">
                    <span style="font-weight:700;color:#0f172a;">R$ {{ number_format($product->price_sale, 2, ',', '.') }}</span>
                    @if($product->price_cost > 0)
                    <div style="font-size:.72rem;color:#94a3b8;margin-top:1px;">
                        custo R$ {{ number_format($product->price_cost, 2, ',', '.') }}
                    </div>
                    @endif
                </td>

                {{-- Estoque --}}
                <td style="text-align:right;">
                    @if($product->manage_stock)
                        <span class="stock-chip {{ $low ? 'low' : 'ok' }}">
                            @if($low)
                                <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/></svg>
                            @endif
                            {{ number_format($product->stock_current, 2, ',', '.') }} {{ $product->unit }}
                        </span>
                    @else
                        <span class="stock-chip na">Não controla</span>
                    @endif
                </td>

                {{-- Status --}}
                <td style="text-align:center;">
                    <span class="active-pill {{ $product->is_active ? 'yes' : 'no' }}">
                        {{ $product->is_active ? 'Ativo' : 'Inativo' }}
                    </span>
                </td>

                {{-- Ações --}}
                <td style="text-align:right;">
                    <div style="display:flex;gap:.35rem;justify-content:flex-end;">
                        <a href="{{ route('products.edit', $product) }}" class="act-btn">
                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                            Editar
                        </a>
                        <form method="POST" action="{{ route('products.destroy', $product) }}"
                              onsubmit="return confirm('Remover o produto «{{ addslashes($product->name) }}»?')">
                            @csrf @method('DELETE')
                            <button type="submit" class="act-btn danger">
                                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6M14 11v6"/></svg>
                            </button>
                        </form>
                    </div>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="9">
                    <div class="empty-state">
                        <div class="icon">📦</div>
                        <h3>Nenhum produto encontrado</h3>
                        <p>
                            @if(request()->hasAny(['search','category_id','status','type']))
                                Tente ajustar os filtros ou <a href="{{ route('products.index') }}" style="color:#2563eb;">limpar a busca</a>.
                            @else
                                <a href="{{ route('products.create') }}" style="color:#2563eb;">Cadastre seu primeiro produto</a> para começar.
                            @endif
                        </p>
                    </div>
                </td>
            </tr>
            @endforelse
        </tbody>
    </table>
</div>

{{-- Pagination --}}
@if($q->hasPages())
<div style="margin-top:1rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem;">
    <div style="font-size:.8rem;color:#94a3b8;">
        Exibindo {{ $q->firstItem() }}–{{ $q->lastItem() }} de {{ $q->total() }} produto(s)
    </div>
    <div>{{ $q->withQueryString()->links() }}</div>
</div>
@endif

@endsection