@extends('layouts.app')

@section('content')
    <div class="d-flex justify-content-center align-items-center" style="min-height: 70vh;">
        <div>
            <h2 class="mb-3">Alta de artículo</h2>

            <form method="POST" action="{{ route('articulos.store') }}" enctype="multipart/form-data">
                @csrf
                <div class="form-row">
                    <label>Artículo</label>
                    @if ($errors->has('articulo'))
                        <div class="invalid-feedback">{{ $errors->first('articulo') }}</div>
                    @enderror
                    <input class="form-control" type="text" name="articulo" value="{{ old('articulo') }}" required>
            </div>

            <div class="form-group">
                <label for="tipo_movimiento">¿Es trazable?</label>
                <select class="form-select" name="trazabilidad" required>

                    <option {{ old('trazabilidad') == 'Si' ? 'selected' : '' }} value="Si" data-trazable="Si">Si
                    </option>
                    <option {{ old('trazabilidad') == 'No' ? 'selected' : '' }} value="No" data-trazable="No">No
                    </option>
                </select>
            </div>

            <div class="form-group">
                <label for="marca_id">Marca</label>
                <select id="marca_id" name="marca_id"class="form-select" @error('marca_id') is-invalid @enderror
                    required>
                    @foreach ($marcas as $marca)
                        <option value="{{ $marca->id }}" {{ old('marca_id') == $marca->id ? 'selected' : '' }}>
                            {{ $marca->marca }}
                        </option>
                    @endforeach
                </select>
                @error('marca_id')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <div class="form-group">
                <label for="rubro_id">Rubro</label>
                <select id="rubro_id" name="rubro_id"class="form-select" @error('rubro_id') is-invalid @enderror
                    required>
                    @foreach ($rubros as $rubro)
                        <option value="{{ $rubro->id }}" {{ old('rubro_id') == $rubro->id ? 'selected' : '' }} >
                            {{ $rubro->rubro }}
                        </option>
                    @endforeach
                </select>
                @error('rubro_id')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <div class="form-group">
                <label for="subrubro_id">SubRubro</label>
                <select id="subrubro_id" name="subrubro_id" class="form-select">
                    <!-- Subrubros se cargan autom -->
                </select>
            </div>

            <div class="form-row">
                <label>Descripción</label>
                <input class="form-control" type="text" name="descripcion" value="{{ old('descripcion') }}">
            </div>

            <div class="form-row">
                <label>Precio</label>
                <input class="form-control" type="number" step="0.01" name="precio" value="{{ old('precio') }}">
            </div>

            <div class="form-row mt-3">
                <button type="submit" class="btn btn-primary btn-lg" style="padding: 8px 16px; font-size: 14px;"><i
                        class="fa fa-save"></i> Guardar</button>
            </div>
        </form>
    </div>
</div>
@endsection




@section('scripts')

<script>
    $(document).ready(function() {
        const rubroSelect = $('#rubro_id');
        const subrubroSelect = $('#subrubro_id');

        function cargarSubrubros(rubroId) {
            $.ajax({
                url: "{{ route('articulos.subrubrosPorRubro') }}",
                type: 'GET',
                data: {
                    rubro_id: rubroId
                },
                success: function(response) {
                    subrubroSelect.empty();

                    response.forEach(function(subrubro) {
                        subrubroSelect.append($('<option>', {
                            value: subrubro.id,
                            text: subrubro.subrubro
                        }));
                    });
                },
                error: function(xhr, status, error) {
                    console.error('Error al obtener subrubros:', error);
                }
            });
        }

        rubroSelect.change(function() {
            const rubroId = $(this).val();
            cargarSubrubros(rubroId);
        });

        // Cuando se carga la pag, verificar si ya hay un rubro seleccionado
        const rubroIdSeleccionado = rubroSelect.val();
        if (rubroIdSeleccionado) {
            cargarSubrubros(rubroIdSeleccionado);
        }
    });
</script>

@endsection