@extends('layouts.app')

@section('content')

<div class="col-11 m-0">
    <div class="row border-bottom p-3 justify-content-start ">
        <a href="{{ route('stock.index') }}" class="col-auto btn-primary pt-2 fs-3"><i
                class="bi bi-arrow-left m-3"></i></a>
        <h1 class="col-auto fs-2 fw-bold m-0">Movimiento de almacen: Entrada. </h1>
    </div>
</div>
<div class="container-fluid p-5">
    <div class="container">
        <form class="content" action="{{ route('stock.storeEntry') }}" method="POST">
            @csrf
            @method('PUT')
            <div class="body">
                <div class="mb-3">
                    <label class="form-label is-required">Almacen de origen</label>
                    <input type="hidden" class="form-control" id="input-warehouse" name="warehouse_id"
                        value="{{ $warehouse->id }}" required/>
                    <input type="text" class="form-control" id="input-warehouse-text" name="warehouse_text"
                        value="{{ $warehouse->name }}" disabled/>
                </div>
                <div class="mb-3">
                    <label class="form-label">Almacen destino</label>
                    <select class="form-select" id="input-destination-warehouse" name="destination_warehouse_id">
                        <option value=" ">Sin almacen de destino</option>
                        @foreach($all_warehouses as $warehouse)
                            <option value="{{ $warehouse->id }}">{{ $warehouse->name }}</option>
                        @endforeach
                    </select>
                </div>
    
                <div class="row">
                    <div class="col-8">
                        <div class="mb-3">
                            <label class="form-label is-required">Tipo de movimiento</label>
                            <select class="form-select" id="input-movement" name="movement_id" required>
                                @foreach ($input_movements as $input_movement)
                                    <option value="{{ $input_movement->id }}">{{ $input_movement->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="mb-3">
                            <label class="form-label is-required">Fecha actual</label>
                            <div class="input-group">
                                <input type="date" class="form-control" id="input-date" name="date"
                                    value="{{ Carbon::now()->toDateString() }}" required />
                                <button type="button" class="btn btn-secondary" onclick="setToday()">Hoy</button>
                                <script>
                                    function setToday() {
                                        document.getElementById('input-date').value = new Date().toISOString().split('T')[0];
                                    }
                                </script>
                            </div>                    </div>
                    </div>
                </div>
                
                <div class="mb-3">
                    <label class="form-label">Observaciones</label>
                    <textarea class="form-control" id="observations" name="observations" rows="4" placeholder="Ingrese detalles sobre el traspaso de salida, como el motivo, condiciones de los productos o instrucciones especiales."></textarea>
                </div>
    
                <div class="row">
                    <div class="col-8">
                        <div class="mb-3">
                            <label class="form-label is-required">Producto</label>
                            <select class="form-select" id="product" name="product_id" onchange="refreshLots()" required>
                                <option value="" selected disabled>Seleccione un producto</option>
                                @foreach ($products as $product)
                                    <option value="{{ $product->id }}">{{ $product->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="mb-3">
                            <label class="form-label is-required">Lote</label>
                            <select class="form-select" id="lot" name="lot_id" required>
                                {{-- aqui se muestran las opciones segun el producto seleccionado  --}}
                            </select>
                        </div>
                    </div>
                </div>
                
                
                <div class="mb-3">
                    <label class="form-label is-required">Cantidad</label>
                    <input type="number" class="form-control" id="amount" name="amount" min="0" 
                        value="0" required/>
                    <div class="form-text" id="basic-addon4">Mililitros (ml)/Unidades (uds)</div>
                </div>
            </div>
            <div class="mt-3 d-flex justify-content-between">
                <button type="submit" class="btn btn-primary px-5" style="width: 90%">Registrar Entrada</button>
                <a href="{{ url()->previous() }}" class="btn btn-outline-danger" onclick="return confirm('¿Está seguro que desea cancelar?')">{{ __('buttons.cancel') }}</a>
            </div>
        </form>
    </div>
</div>
    

@endsection

<script>
    function refreshLots() {
        let product = document.getElementById('product').value;
        let lots = @json($lots);
        console.log(lots);
        let select = document.getElementById('lot');
        select.innerHTML = '';
        lots.forEach(lot => {
            if (lot.product_id == product) {
                let option = document.createElement('option');
                option.value = lot.id;
                option.text = lot.registration_number;
                select.appendChild(option);
            }
        });
    }
</script>