@extends('layouts.app')

@section('title', 'Productos')
@section('subtitle', 'Catálogo, stock por bodega y operaciones de ingreso/traspaso')

@section('content')
    @if(session('status'))
        <div class="card" style="border: 1px solid #1f2937; background: #0f172a;">{{ session('status') }}</div>
    @endif

    <div class="card">
        <h3>Crear nuevo producto</h3>
        <form class="form-grid" method="POST" action="{{ route('products.store') }}">
            @csrf
            <div>
                <label>Código</label>
                <input type="text" name="code" required>
            </div>
            <div>
                <label>Descripción</label>
                <input type="text" name="description" required>
            </div>
            <div>
                <label>Categoría</label>
                <input type="text" name="category">
            </div>
            <div>
                <label>Unidad</label>
                <input type="text" name="unit" placeholder="unidad, caja, etc.">
            </div>
            <div>
                <label>Stock mínimo</label>
                <input type="number" step="0.01" name="min_stock" value="0">
            </div>
            <div>
                <label>Stock crítico</label>
                <input type="number" step="0.01" name="critical_stock" value="0">
            </div>
            <div>
                <label>Bodega inicial</label>
                <select name="warehouse_id">
                    <option value="">(Opcional)</option>
                    @foreach($warehouses as $wh)
                        <option value="{{ $wh->id }}">{{ $wh->name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label>Stock inicial</label>
                <input type="number" step="0.01" name="initial_stock" value="0">
            </div>
            <div class="row" style="align-items: flex-end;">
                <button class="btn btn-primary" type="submit">Crear producto</button>
            </div>
        </form>
    </div>

    <div class="card">
        <form class="form-grid" method="GET">
            <div>
                <label>Buscar producto (código, descripción, categoría)</label>
                <input type="text" name="q" value="{{ request('q') }}" placeholder="Ej: alcohol, guantes">
            </div>
            <div class="row" style="align-items: flex-end;">
                <button class="btn btn-secondary" type="submit">Filtrar</button>
                <span class="chip">Sin opción de Egreso/Entrega (se gestiona en menú Entregas)</span>
            </div>
        </form>
    </div>

    <div class="stack" style="margin-top: 16px;">
        @foreach($products as $product)
            <div class="card">
                <div class="row" style="justify-content: space-between; align-items: center; flex-wrap: wrap;">
                    <div class="row">
                        <img class="thumbnail" src="{{ $product->image_path ? asset('storage/'.$product->image_path) : 'https://placehold.co/80x80?text=Foto' }}" alt="foto">
                        <div>
                            <div class="row" style="gap: 8px; align-items: center;">
                                <strong>{{ $product->description }}</strong>
                                <span class="chip">{{ $product->code }}</span>
                                @if($product->category)<span class="chip">{{ $product->category }}</span>@endif
                            </div>
                            <div class="subtitle">Unidad: {{ $product->unit }} · Mín: {{ $product->min_stock }} · Crítico: {{ $product->critical_stock }}</div>
                        </div>
                    </div>
                    <div class="row">
                        <button class="btn btn-primary">Editar</button>
                        <button class="btn btn-secondary">Traspasar</button>
                        <button class="btn btn-secondary">Cuadratura</button>
                        <button class="btn btn-secondary" onclick="return false;">Adjuntar foto</button>
                    </div>
                </div>

                <div class="stack" style="margin-top: 12px;">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Bodega</th>
                                <th>Stock</th>
                                <th>Mínimo</th>
                                <th>Crítico</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($product->warehouses as $wh)
                                <tr>
                                    <td>{{ $wh->name }}</td>
                                    <td>{{ $wh->pivot->stock }}</td>
                                    <td>{{ $wh->pivot->min_stock }}</td>
                                    <td>{{ $wh->pivot->critical_stock }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>

                    <div class="card" style="background: #0f172a;">
                        <h3>Ingreso a bodega</h3>
                        <div class="subtitle">Campos adicionales: OC y Factura</div>
                        <div class="form-grid">
                            <div>
                                <label>Cantidad</label>
                                <input type="number" min="0" step="0.01" placeholder="Ej: 10">
                            </div>
                            <div>
                                <label>Nota</label>
                                <input type="text" placeholder="Detalle del ingreso">
                            </div>
                            <div>
                                <label>OC (Orden de Compra)</label>
                                <input type="text" placeholder="OC-1234">
                            </div>
                            <div>
                                <label>Factura</label>
                                <input type="text" placeholder="FAC-5678">
                            </div>
                            <div>
                                <label>Bodega destino</label>
                                <select>
                                    @foreach($product->warehouses as $wh)
                                        <option>{{ $wh->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="row" style="margin-top: 10px;">
                            <button class="btn btn-primary" type="button">Registrar ingreso</button>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
@endsection