@extends('layouts.admin')

@section('title', 'Controle de Estoque (F&B)')

@section('content')
<div class="page-header" style="display: flex; justify-content: space-between; align-items: flex-end;">
    <div>
        <h1 class="page-title">Estoque de Produtos</h1>
        <p class="page-subtitle">Acompanhe saldos, realize entradas em lote ou baixe avarias de produtos.</p>
    </div>
</div>

{{-- ═══════════════ GRID DE PRODUTOS ═══════════════ --}}
<div class="card p-4">

    <div class="d-flex justify-content-between mb-4">
        <form method="GET" action="{{ route('admin.stock.index') }}" class="d-flex gap-sm" style="flex: 1; max-width: 400px;">
            <input type="text" name="search" class="form-input" placeholder="Buscar produto..." value="{{ request('search') }}">
            <button type="submit" class="btn btn-secondary">Buscar</button>
        </form>
    </div>

    @if($products->isEmpty())
        <div class="empty-state">
            <div class="empty-state-icon"><i data-lucide="package-search"></i></div>
            <div class="empty-state-title">Nenhum produto em estoque encontrado</div>
            <div class="empty-state-text">Produtos que "controlam estoque" aparecerão listados aqui.</div>
        </div>
    @else
        <div class="table-responsive">
            <table class="table" style="width:100%; text-align:left; border-collapse: collapse;">
                <thead>
                    <tr style="border-bottom: 2px solid var(--color-border);">
                        <th style="padding:10px;">Produto</th>
                        <th style="padding:10px;">Categoria</th>
                        <th style="padding:10px;">Estoque Mín.</th>
                        <th style="padding:10px;">Estoque Atual</th>
                        <th style="padding:10px;text-align:right;">Ações</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($products as $p)
                        <tr style="border-bottom: 1px solid var(--color-border); {{ $p->current_stock <= $p->min_stock ? 'background-color: #fee2e2;' : '' }}">
                            <td style="padding:12px;">
                                <strong>{{ $p->name }}</strong>
                                @if($p->current_stock <= 0)
                                    <span class="badge badge-danger" style="margin-left: 8px;">Estoque Zerado</span>
                                @elseif($p->current_stock <= $p->min_stock)
                                    <span class="badge badge-warning" style="margin-left: 8px;">Abaixo do Mínimo</span>
                                @endif
                            </td>
                            <td style="padding:12px;color:var(--color-text-muted);">{{ $p->category->name }}</td>
                            <td style="padding:12px;color:var(--color-text-muted);">{{ $p->min_stock }} {{ $p->unit ?? 'un' }}</td>
                            <td style="padding:12px;font-size: 16px;font-weight: 700; color: {{ $p->current_stock <= $p->min_stock ? 'var(--color-danger)' : 'var(--color-success)' }};">
                                {{ $p->current_stock }} {{ $p->unit ?? 'un' }}
                            </td>
                            <td style="padding:12px;text-align:right;">
                                <div class="flex justify-end gap-sm">
                                    <button class="btn btn-secondary btn-sm" onclick="openEntryModal({{ $p->id }}, '{{ addslashes($p->name) }}')" title="Entrada (Compra)"><i data-lucide="arrow-down-to-line"></i> Entrada</button>
                                    <button class="btn btn-ghost btn-danger btn-sm" onclick="openOutModal({{ $p->id }}, '{{ addslashes($p->name) }}')" title="Saída (Avaria, Quebra)"><i data-lucide="arrow-up-from-line"></i></button>
                                    <a href="{{ route('admin.stock.transactions', $p) }}" class="btn btn-ghost btn-sm" title="Ver Extrato"><i data-lucide="history"></i></a>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        
        <div class="mt-4">
            {{ $products->links() }}
        </div>
    @endif
</div>

{{-- MODAL ENTRADA --}}
<div id="entryModal" class="modal" tabindex="-1" style="display:none; position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,0.5); justify-content:center; align-items:center;">
    <div class="modal-dialog" style="background:#fff; width:100%; max-width:500px; border-radius:12px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,0.2);">
        <form method="POST" action="{{ route('admin.stock.entry') }}">
            @csrf
            <input type="hidden" name="product_id" id="entry_product_id">
            <div class="modal-header" style="padding:16px 24px; border-bottom:1px solid #e2e8f0; background:#f8fafc; display:flex; justify-content:space-between; align-items:center;">
                <h5 class="m-0" style="font-weight:700; display:flex; align-items:center; gap:8px;"><i data-lucide="package-plus" style="color:var(--color-success);"></i> Lançar Entrada</h5>
                <button type="button" class="btn btn-ghost btn-sm" onclick="closeEntryModal()"><i data-lucide="x"></i></button>
            </div>
            <div class="modal-body" style="padding:24px;">
                <div style="background:#f1f5f9; padding:12px; border-radius:8px; margin-bottom:16px;">
                    <strong id="entry_product_name">Produto</strong>
                </div>

                <div class="form-group mb-3">
                    <label class="form-label">Quantidade <span class="text-danger">*</span></label>
                    <input type="number" name="quantity" class="form-input" min="1" required placeholder="Qtd. que entrou">
                </div>

                <div class="form-group mb-3">
                    <label class="form-label">Preço de Custo (Unidade) - <small>Opcional</small></label>
                    <input type="number" step="0.01" name="unit_price" class="form-input" placeholder="0,00">
                </div>

                <div class="form-group">
                    <label class="form-label">Observação / NF / Fornecedor</label>
                    <textarea name="notes" class="form-input" rows="2" placeholder="Ex: Referente a Nota Fiscal 20380..."></textarea>
                </div>
            </div>
            <div class="modal-footer" style="padding:16px 24px; border-top:1px solid #e2e8f0; background:#f8fafc; display:flex; justify-content:flex-end; gap:12px;">
                <button type="button" class="btn btn-ghost" onclick="closeEntryModal()">Cancelar</button>
                <button type="submit" class="btn btn-primary">Registrar Entrada</button>
            </div>
        </form>
    </div>
</div>

{{-- MODAL SAÍDA (Avaria/Quebra) --}}
<div id="outModal" class="modal" tabindex="-1" style="display:none; position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,0.5); justify-content:center; align-items:center;">
    <div class="modal-dialog" style="background:#fff; width:100%; max-width:500px; border-radius:12px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,0.2);">
        <form method="POST" action="{{ route('admin.stock.out') }}">
            @csrf
            <input type="hidden" name="product_id" id="out_product_id">
            <div class="modal-header" style="padding:16px 24px; border-bottom:1px solid #e2e8f0; background:#f8fafc; display:flex; justify-content:space-between; align-items:center;">
                <h5 class="m-0" style="font-weight:700; display:flex; align-items:center; gap:8px;"><i data-lucide="package-minus" style="color:var(--color-danger);"></i> Lançar Saída/Baixa</h5>
                <button type="button" class="btn btn-ghost btn-sm" onclick="closeOutModal()"><i data-lucide="x"></i></button>
            </div>
            <div class="modal-body" style="padding:24px;">
                <div style="background:#f1f5f9; padding:12px; border-radius:8px; margin-bottom:16px;">
                    <strong id="out_product_name">Produto</strong>
                </div>

                <div class="alert alert-warning mb-3">
                    <strong>Atenção:</strong> Saídas feitas por Lançamentos de Comanda/Reserva no PDV <strong>são automáticas</strong>. Utilize esta tela apenas para "Quebras", "Validade Vencida", "Avarias" ou correção de contagem do inventário!
                </div>

                <div class="form-group mb-3">
                    <label class="form-label">Quantidade <span class="text-danger">*</span></label>
                    <input type="number" name="quantity" class="form-input" min="1" required placeholder="Qtd. a remover">
                </div>

                <div class="form-group">
                    <label class="form-label">Motivo da Baixa <span class="text-danger">*</span></label>
                    <textarea name="notes" class="form-input" rows="2" required placeholder="Ex: Produto venceu na despensa."></textarea>
                </div>
            </div>
            <div class="modal-footer" style="padding:16px 24px; border-top:1px solid #e2e8f0; background:#f8fafc; display:flex; justify-content:flex-end; gap:12px;">
                <button type="button" class="btn btn-ghost" onclick="closeOutModal()">Cancelar</button>
                <button type="submit" class="btn btn-danger">Confirmar Baixa</button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
    function openEntryModal(id, name) {
        document.getElementById('entry_product_id').value = id;
        document.getElementById('entry_product_name').innerText = name;
        document.getElementById('entryModal').style.display = 'flex';
    }
    function closeEntryModal() {
        document.getElementById('entryModal').style.display = 'none';
    }

    function openOutModal(id, name) {
        document.getElementById('out_product_id').value = id;
        document.getElementById('out_product_name').innerText = name;
        document.getElementById('outModal').style.display = 'flex';
    }
    function closeOutModal() {
        document.getElementById('outModal').style.display = 'none';
    }
</script>
@endpush