@extends('layouts.app')

@section('title', 'Inventario')
@section('hi', 'Inventario / Stock')
@section('hi_sub', 'Compras y Stock')

@section('content')
    <div class="page-head">
        <div>
            <h1 class="page-title">Inventario / Stock</h1>
            <p class="page-sub">Controla el stock por variante y registra movimientos.</p>
        </div>
        <a href="{{ route('inventory.movements') }}" class="btn-outline">@include('partials.icon', ['name' => 'rotate', 'class' => 'ic-sm']) Ver movimientos</a>
    </div>

    <div class="stat-row">
        <div class="stat"><span>Variantes</span><b>{{ number_format($stats['variants']) }}</b></div>
        <div class="stat"><span>Unidades en stock</span><b>{{ number_format($stats['units']) }}</b></div>
        <div class="stat warn"><span>Stock bajo</span><b>{{ number_format($stats['low']) }}</b></div>
        <div class="stat bad"><span>Agotados</span><b>{{ number_format($stats['out']) }}</b></div>
    </div>

    <div class="subtabs">
        <a href="{{ route('inventory.index', ['filter' => 'all', 'q' => $q]) }}" class="{{ $filter === 'all' ? 'active' : '' }}">Todos</a>
        <a href="{{ route('inventory.index', ['filter' => 'low', 'q' => $q]) }}" class="{{ $filter === 'low' ? 'active' : '' }}">Stock bajo</a>
        <a href="{{ route('inventory.index', ['filter' => 'out', 'q' => $q]) }}" class="{{ $filter === 'out' ? 'active' : '' }}">Agotados</a>
    </div>

    <div class="card table-card">
        <div class="toolbar">
            <form class="search" method="GET" action="{{ route('inventory.index') }}">
                <input type="hidden" name="filter" value="{{ $filter }}">
                @include('partials.icon', ['name' => 'search'])
                <input type="text" name="q" value="{{ $q }}" placeholder="Buscar producto o SKU...">
            </form>
        </div>
        <table class="dt">
            <thead><tr><th>Producto</th><th>Variante</th><th>SKU</th><th>Stock mín.</th><th>Stock actual</th><th style="text-align:right">Acción</th></tr></thead>
            <tbody>
            @forelse($variants as $v)
                @php $cls = $v->stock <= 0 ? 'stock-out' : ($v->isLow() ? 'stock-low' : 'stock-ok'); @endphp
                <tr>
                    <td class="strong">{{ $v->product->name ?? '—' }}</td>
                    <td>{{ $v->label() }}</td>
                    <td class="mono">{{ $v->sku ?: '—' }}</td>
                    <td>{{ $v->min_stock }}</td>
                    <td><span class="stock-pill {{ $cls }}">{{ $v->stock }} u.</span></td>
                    <td style="text-align:right">
                        <button class="btn-outline btn-sm" style="padding:8px 12px"
                            onclick='openAdj(@js(["id"=>$v->id,"name"=>$v->product->name ?? "","label"=>$v->label(),"stock"=>$v->stock]))'>
                            Ajustar stock
                        </button>
                    </td>
                </tr>
            @empty
                <tr><td colspan="6"><div class="empty">
                    @if(auth()->user()->company_id) No hay variantes que coincidan. @else Ingresa como usuario de una empresa para gestionar el inventario. @endif
                </div></td></tr>
            @endforelse
            </tbody>
        </table>
        @include('partials.pager', ['paginator' => $variants])
    </div>

    <div class="modal" id="adjModal">
        <div class="modal__box">
            <div class="modal__head"><h3>Ajustar stock</h3><button class="modal__x" onclick="closeAdj()">&times;</button></div>
            <div class="modal__body">
                <p class="page-sub" id="adjInfo" style="margin-bottom:16px"></p>
                <form method="POST" action="{{ route('inventory.adjust') }}">
                    @csrf
                    <input type="hidden" name="product_variant_id" id="adj_id">
                    <div style="margin-bottom:14px">
                        <label class="lbl">Tipo de movimiento *</label>
                        <select name="type" id="adj_type" class="sel">
                            <option value="in">Entrada (sumar)</option>
                            <option value="out">Salida (restar)</option>
                            <option value="adjust">Ajuste (fijar stock exacto)</option>
                        </select>
                    </div>
                    <div style="margin-bottom:14px">
                        <label class="lbl" id="adj_qlabel">Cantidad *</label>
                        <input class="inp" type="number" min="0" name="quantity" id="adj_qty" value="1" required>
                    </div>
                    <div style="margin-bottom:6px">
                        <label class="lbl">Motivo</label>
                        <input class="inp" name="reason" placeholder="Compra, merma, conteo físico...">
                    </div>
                    <div class="form-actions" style="margin-top:18px">
                        <button type="button" class="btn-ghost" onclick="closeAdj()">Cancelar</button>
                        <button class="btn-primary">@include('partials.icon', ['name' => 'check', 'class' => 'ic-sm']) Registrar</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    const adj = document.getElementById('adjModal');
    const adjType = document.getElementById('adj_type');
    const adjQLabel = document.getElementById('adj_qlabel');
    function openAdj(v){
        document.getElementById('adj_id').value = v.id;
        document.getElementById('adjInfo').innerHTML = '<b>' + v.name + '</b> · ' + v.label + ' — stock actual: <b>' + v.stock + '</b>';
        adj.classList.add('open');
    }
    function closeAdj(){ adj.classList.remove('open'); }
    adjType.addEventListener('change', () => {
        adjQLabel.textContent = adjType.value === 'adjust' ? 'Stock final *' : 'Cantidad *';
    });
    adj.addEventListener('click', e => { if(e.target === adj) closeAdj(); });
</script>
@endpush