@extends('admin.layouts.app')

@section('content')
    <div class="azp-page">

        {{-- Cabeçalho --}}
        <div class="azp-page-header">
            <div class="azp-page-title-wrap">
                <div class="azp-page-title">Produtos da loja</div>
                <div class="azp-page-subtitle">
                    Gestão de produtos gerais da loja — separados por venda vs internos, e agrupados por categoria.
                </div>
            </div>

            <div class="azp-actions">
                <a href="{{ route('admin.products.create') }}" class="btn primary">+ Novo produto</a>
            </div>
        </div>

        {{-- Filtros --}}
        <div class="azp-card" style="margin-bottom:12px;">
            <div class="azp-filter-head">
                <div class="azp-section-title" style="margin:0">Filtros</div>

                <div class="azp-filter-actions">
                    <a class="btn outline" href="{{ route('admin.products.index') }}">Limpar</a>
                    <button class="btn primary" type="submit" form="productsFilterForm">Aplicar</button>
                </div>
            </div>

            <form id="productsFilterForm" method="GET" class="azp-filter-grid">
                <div class="field">
                    <label class="label">Pesquisa</label>
                    <input
                        type="text"
                        name="q"
                        value="{{ request('q') }}"
                        placeholder="Pesquisar por nome ou SKU…">
                </div>

                <div class="field">
                    <label class="label">Categoria</label>
                    <select name="category">
                        <option value="">Todas as categorias</option>
                        @foreach($categories as $id => $name)
                            <option value="{{ $id }}" @selected((string)request('category') === (string)$id)>
                                {{ $name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="field">
                    <label class="label">Estado</label>
                    <select name="status">
                        <option value="">Todos</option>
                        <option value="1" @selected(request('status') === '1')>Ativos</option>
                        <option value="0" @selected(request('status') === '0')>Inativos</option>
                    </select>
                </div>
            </form>
        </div>

        {{-- SPLIT VIEW --}}
        <div class="azp-split">
            {{-- LEFT: Venda --}}
            <div class="azp-split-col">
                <div class="azp-card">
                    <div class="azp-split-head">
                        <div>
                            <div class="azp-section-title">Produtos de venda</div>
                            <div class="azp-page-subtitle" style="margin-top:4px">Visíveis no frontoffice para venda.</div>
                        </div>
                        <span class="azp-tag">
                            <span class="azp-dot"></span>
                            {{ collect($saleGroups)->sum(fn($g) => count($g['items'])) }} itens
                        </span>
                    </div>
                </div>

                @forelse($saleGroups as $group)
                    @include('admin.store.products._category_block', ['group' => $group])
                @empty
                    <div class="azp-card" style="margin-top:12px;color:var(--muted)">Sem produtos de venda com estes filtros.</div>
                @endforelse
            </div>

            {{-- RIGHT: Internos --}}
            <div class="azp-split-col">
                <div class="azp-card">
                    <div class="azp-split-head">
                        <div>
                            <div class="azp-section-title">Produtos internos</div>
                            <div class="azp-page-subtitle" style="margin-top:4px">Usados apenas em encomendas internas.</div>
                        </div>
                        <span class="azp-tag">
                            <span class="azp-dot"></span>
                            {{ collect($internalGroups)->sum(fn($g) => count($g['items'])) }} itens
                        </span>
                    </div>
                </div>

                @forelse($internalGroups as $group)
                    @include('admin.store.products._category_block', ['group' => $group])
                @empty
                    <div class="azp-card" style="margin-top:12px;color:var(--muted)">Sem produtos internos com estes filtros.</div>
                @endforelse
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .azp-split{
            display:grid;
            grid-template-columns: 1fr 1fr;
            gap:12px;
        }
        @media (max-width: 980px){
            .azp-split{ grid-template-columns: 1fr; }
        }

        .azp-split-head{
            display:flex;
            align-items:flex-start;
            justify-content:space-between;
            gap:12px;
        }

        .azp-cat-card{ margin-top:12px; }
        .azp-cat-head{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:10px;
            padding-bottom:10px;
            border-bottom:1px solid rgba(0,0,0,.06);
            margin-bottom:10px;
        }
        .azp-cat-title{
            font-weight:800;
            letter-spacing:.01em;
            display:flex;
            align-items:center;
            gap:10px;
        }

        /* thumbs */
        .azp-prod-main { display:flex; align-items:center; gap:10px; }
        .azp-prod-thumb{
            width:42px;height:42px;border-radius:10px;overflow:hidden;
            background:#f2f2f2;display:flex;align-items:center;justify-content:center;flex-shrink:0;
            border:1px solid rgba(0,0,0,.08);
        }
        .azp-prod-thumb img{ width:100%;height:100%;object-fit:cover;display:block; }
        .azp-prod-thumb-placeholder{ font-size:10px;color:#999;padding:2px;text-align:center; }
        .azp-prod-info{ display:flex;flex-direction:column;gap:2px; }
        .azp-prod-meta{ font-size:11px;color:#777;display:flex;align-items:center;flex-wrap:wrap;gap:6px; }

        .azp-filter-actions{
            display:flex;
            flex-direction:column;
        }
        .azp-filter-actions-row{
            display:flex;
            gap:10px;
            align-items:center;
            justify-content:flex-end;
            height: 42px; /* igual aos inputs do teu design */
            flex-wrap:nowrap;
        }
        .azp-filter-actions-row .btn{
            white-space:nowrap;
        }
        @media (max-width: 980px){
            .azp-filter-actions-row{
                justify-content:flex-start;
            }
        }
        .azp-filter-head{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            padding-bottom:10px;
            border-bottom:1px solid rgba(0,0,0,.06);
            margin-bottom:10px;
        }

        .azp-filter-actions{
            display:flex;
            align-items:center;
            gap:10px;
            flex:0 0 auto;
        }
        .azp-filter-actions .btn{ white-space:nowrap; }

        .azp-filter-grid{
            display:grid;
            grid-template-columns: 1.2fr 1fr 0.7fr;
            gap:12px;
            align-items:end;
        }


        @media (max-width: 980px){
            .azp-filter-grid{
                grid-template-columns: 1fr;
            }
            .azp-filter-head{
                align-items:flex-start;
            }
            .azp-filter-actions{
                gap:8px;
            }
        }
    </style>
@endpush