@extends('layouts.app')

@push('styles')
    <link rel="stylesheet" href="{{ asset('css/modules/inventory.css') }}">
@endpush

@section('content')
<section class="inventory-page">
    <div class="page-heading">
        <div>
            <h1>Inventario</h1>
            <p>Consulta el stock y registra entradas o ajustes de insumos.</p>
        </div>
        <button class="button blue" data-mock-action="ingreso de inventario iniciado">+ Registrar ingreso</button>
    </div>
    <div class="inventory-tabs">
        <button class="active">Productos</button>
        <button>Categorías</button>
        <button>Proveedores</button>
    </div>
    <label class="search-field">⌕ <input type="search" placeholder="Buscar producto..."></label>
    <div class="data-table inventory-table">
        <div class="data-head">
            <span>Producto</span>
            <span>Stock</span>
            <span>Unidad</span>
            <span>Estado</span>
            <span></span>
        </div>
        @foreach ([['Pollo','15.00','kg','Normal','green'],['Carne de res','8.00','kg','Normal','green'],['Mariscos','5.00','kg','Bajo','amber'],['Lechuga','12.00','kg','Normal','green'],['Tomate','10.00','kg','Normal','green'],['Cebolla','7.00','kg','Normal','green'],['Papa','20.00','kg','Normal','green'],['Arroz','15.00','kg','Normal','green']] as $stock)
            <button class="data-row" data-mock-action="detalle de producto abierto">
                <span>{{ $stock[0] }}</span>
                <span>{{ $stock[1] }}</span>
                <span>{{ $stock[2] }}</span>
                <span class="pill {{ $stock[4] }}">{{ $stock[3] }}</span>
                <span>⋮</span>
            </button>
        @endforeach
    </div>
</section>
@endsection