@extends('layouts.admin')

@section('content')
<div class="row">
    <div class="col">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">NUEVOS ARTICULOS</h4>

                <form action="{{route('articulo.store_masive')}}" method="post">
                    @csrf
                    <div id="articles-container">
                    </div>

                    <button type="button" class="btn btn-success" id="add-article"><i class="fa fa-plus" aria-hidden="true"></i> ANADIR</button>


                    <button type="submit" class="btn btn-primary mt-3">GUARDAR ARTICULOS</button>
                </form>
            </div>
        </div>
    </div>
</div>

<br>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const addButton = document.getElementById('add-article');
        const articlesContainer = document.getElementById('articles-container');
        let articleCount = 0;

        addButton.addEventListener('click', function() {
            articleCount++;
            const newArticleDiv = document.createElement('div');
            newArticleDiv.classList.add('row', 'mb-3', 'article-item');
            newArticleDiv.innerHTML = `
        <div class="col-md-3">
            <label for="nombre_${articleCount}" class="form-label">Nombre</label>
            <input type="text" class="form-control" id="nombre_${articleCount}" name="articulos[${articleCount}][nombre]" required>
        </div>
        <div class="col-md-3">
            <label for="codigobarras_${articleCount}" class="form-label">Código de Barras</label>
            <input type="text" class="form-control" id="codigobarras_${articleCount}" name="articulos[${articleCount}][codigobarras]">
        </div>
        <div class="col-md-2">
            <label for="p_venta_${articleCount}" class="form-label">P. Venta</label>
            <input type="number" class="form-control" id="p_venta_${articleCount}" name="articulos[${articleCount}][p_venta]" step="0.01" required>
        </div>
        <div class="col-md-2">
            <label for="p_costo_${articleCount}" class="form-label">P. Costo</label>
            <input type="number" class="form-control" id="p_costo_${articleCount}" name="articulos[${articleCount}][p_costo]" step="0.01" required>
        </div>  <br>
        <div class="col-md-2 mt-2">
            <label for="stock_${articleCount}" class="form-label">Stock</label>
            <input type="number" class="form-control" id="stock_${articleCount}" name="articulos[${articleCount}][stock]" required>
        </div>
        <div class="col-md-2 mt-2">
            <label for="min_stock_${articleCount}" class="form-label">Min. Stock</label>
            <input type="number" class="form-control" id="min_stock_${articleCount}" name="articulos[${articleCount}][min_stock]">
        </div>
        <div class="col-md-2 mt-2">
            <label for="max_stock_${articleCount}" class="form-label">Max. Stock</label>
            <input type="number" class="form-control" id="max_stock_${articleCount}" name="articulos[${articleCount}][stock_maximo]">
        </div> <br>
        <div class="col-md-3 mt-2">
            <label for="fabricante_${articleCount}" class="form-label">Fabricante</label>
            <input type="text" class="form-control" id="fabricante_${articleCount}" name="articulos[${articleCount}][fabricante]">
        </div>
        <div class="col-md-2 mt-2">
            <label for="medida_${articleCount}" class="form-label">Medida</label>
            <input type="text" class="form-control" id="medida_${articleCount}" name="articulos[${articleCount}][medida]">
        </div>
        <div class="col-md-2 mt-2">
            <label for="unidad_${articleCount}" class="form-label">Estantería</label>
            <input type="text" class="form-control" id="unidad_${articleCount}" name="articulos[${articleCount}][unidad]">
        </div>
        <div class="col-md-3 mt-2">
            <label for="ubicacion_${articleCount}" class="form-label">Sub-estantería</label>
            <input type="text" class="form-control" id="ubicacion_${articleCount}" name="articulos[${articleCount}][ubicacion]">
        </div> <br>
        <div class="col-md-5 mt-2">
            <label for="categoria_id_${articleCount}">Categoria / Tipo de Venta</label>
            <select class="form-control" name="articulos[${articleCount}][categoria_id]" id="categoria_id_${articleCount}" required>
                <option value="">Seleccione Categoria</option>
                @foreach($categorias as $cat)
                    <option value="{{$cat->id}}">{{$cat->nombre}} / {{$cat->tipo}}</option>
                @endforeach
            </select>
        </div>
        <div class="col-md-5 mt-2">
            <label for="proveedor_id_${articleCount}">Proveedor</label>
            <select class="form-control" name="articulos[${articleCount}][proveedor_id]" id="proveedor_id_${articleCount}" required>
                <option value="">Seleccione Proveedor</option>
                @foreach($proveeedores as $pro)
                    <option value="{{$pro->id}}">{{$pro->nombre}} / {{$pro->telefono1}}</option>
                @endforeach
            </select>
        </div>  <br>>
        <div class="col-md-4 mt-2">
            <label for="img_${articleCount}" class="form-label">Imagen</label>
            <input type="text" class="form-control" id="img_${articleCount}" name="articulos[${articleCount}][img]">
        </div>
        <div class="col-md-4 mt-2">
            <label for="img2_${articleCount}" class="form-label">Imagen Secundaria</label>
            <input type="text" class="form-control" id="img2_${articleCount}" name="articulos[${articleCount}][img2]">
        </div>
        <div class="col-md-6 mt-2">
            <label for="descripcion_${articleCount}" class="form-label">Descripción</label>
            <textarea class="form-control" id="descripcion_${articleCount}" name="articulos[${articleCount}][descripcion]" rows="3" required></textarea>
        </div>
        <div class="col-md-6 mt-2">
            <label for="descripcion_interna_${articleCount}" class="form-label">Descripción Interna</label>
            <textarea class="form-control" id="descripcion_interna_${articleCount}" name="articulos[${articleCount}][descripcion_interna]" rows="3" placeholder="Colocamos Descuentos,  O informacion Util para el futuro esto no se vera en el recibo"></textarea>
        </div>


        <div class="d-flex justify-content-center mt-3 d-none">
            <div class="table-responsive col-md-8 ">
                <table class="table table-sm d-none">
                    <thead>
                        <tr>
                            <th>MINIMO</th>
                            <th>MAXIMO</th>
                            <th>PRECIO</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td> <input value="" type="number" step="any" name="articulos[${articleCount}][minimo1]" placeholder="minimo1" class="form-control">
                            </td>
                            <td> <input value="" type="number" step="any" name="articulos[${articleCount}][maximo1]" placeholder="maximo1" class="form-control">
                            </td>
                            <td> <input value="" type="number" step="any" name="articulos[${articleCount}][precio1]" placeholder="precio1" class="form-control">
                            </td>
                        </tr>
                        <tr>
                            <td> <input value="" type="number" step="any" name="articulos[${articleCount}][minimo2]" placeholder="minimo2" class="form-control"></td>
                            <td> <input value="" type="number" step="any" name="articulos[${articleCount}][maximo2]" placeholder="maximo2" class="form-control"></td>
                            <td> <input value="" type="number" step="any" name="articulos[${articleCount}][precio2]" placeholder="precio2" class="form-control"></td>
                        </tr>
                        <tr>
                            <td> <input value="" type="number" step="any" name="articulos[${articleCount}][minimo3]" placeholder="minimo3" class="form-control"></td>
                            <td> <input value="" type="number" step="any" name="articulos[${articleCount}][maximo3]" placeholder="maximo3" class="form-control"></td>
                            <td> <input value="" type="number" step="any" name="articulos[${articleCount}][precio3]" placeholder="precio3" class="form-control"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>


        <div class="col-md-1 mt-2 d-flex align-items-end">
            <button type="button" class="btn btn-danger remove-article"><i class="fa fa-trash"></i></button>
        </div>

    `;
            articlesContainer.appendChild(newArticleDiv);
        });

        articlesContainer.addEventListener('click', function(event) {
            if (event.target.classList.contains('remove-article') || event.target.closest('.remove-article')) {
                event.preventDefault();
                const button = event.target.closest('.remove-article');
                button.closest('.article-item').remove();
            }
        });
    });
</script>
@endpush