@extends('template.layoutAdmin', ['activeButton'=>'inventario'])

@section('title')
{{  trans('CuadreInventario.crearProducto') }}
@endsection

@section('cabecera')
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/>

    <div class="row">
        <div class="col-6">
            <h1 style="margin: 15px 0 10px 0;">
                <a href="{{ route('CuadreInventario.index') }}" class="btn btn-default btn-sm"> <i class="fa fa-arrow-left"></i>
                    {{  trans('CuadreInventario.regresar') }}</a>
            </h1>
        </div>
        <div class="col-6 text-right">
            <h1>
                <small> {{  trans('CuadreInventario.crearNuevoInventarioCuadre') }}</small>
            </h1>
        </div>
    </div>
@endsection

@section('contenido')
    <style>
        .modalContentFill{
        background: rgba(255, 255, 255, 0.97);
        width: 100%;
        max-width: none !important;
        height: 100vh;
        padding: 4%;
        }

        .modalContentFill .itemComponent{
        background-color: #DB3920 ;
        border-radius: 5px;
        padding: 20px;
        margin-bottom: 10px;
        }

        .modalContentFill .itemComponent .custom-checkbox{
        margin: 0;
        padding: 0;
        display: inline-flex;
        }

        .modalContentFill .itemComponent .custom-checkbox label{
        margin: 0;

        color: #fff;
        height: auto;
        }

        .modalContentFill .itemComponent .custom-checkbox h5{
        margin: auto;
        }
    </style>
    @if (Session::has('message'))
        <div class="row">
            <div class="col-12">
                <div class="alert alert-success alert-dismissible" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    😉 {{ Session::get('message') }} 😉
                </div>
            </div>
        </div>
    @endif
    @if (Session::has('message_error'))
        <div class="row">
            <div class="col-12">
                <div class="alert alert-warning alert-dismissible" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    😓 {{ Session::get('message_error') }} 😒
                </div>
            </div>
        </div>
    @endif
    @if (count($errors) > 0)
        <div class="row">
            <div class="col-12">
                <div class="alert alert-warning alert-dismissible" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <p> {{  trans('CuadreInventario.corrigeErrores') }}</p>
                    <ul>
                        @foreach ($errors->all() as $message)
                            <li>{{ $message }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    @endif
    <form action="" method="POST">
        @csrf
        <div class="row">

            <div class="col">
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="Documentos"> {{  trans('CuadreInventario.referencia') }}<span class="text-red">*</span></label>
                                    <input type="number" placeholder=" {{  trans('CuadreInventario.ingreseNumeroReferencia') }}" name="referencia" id="referencia" min="1" value="{{$referencia}}" class="form-control" required disabled>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="idTag"> {{  trans('tags.tituloTag') }}</label>
                                    <select name="idTag" class="form-control" id="idTag">
                                        <option selected value="0">{{  trans('inventario.seleccione') }}</option>
                                        @foreach ($tags as $tag)
                                          <option value="{{$tag->idTag}}">{{$tag->nombre}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <div class="form-group">
                                    <label for="Descripcion"> {{  trans('CuadreInventario.descripcion') }}<span class="text-red">*</span></label>
                                    <textarea name="descripcion" id="descripcion" cols="5" rows="5" class="form-control"
                                        required placeholder=" {{  trans('CuadreInventario.descripcionDeLaEntrada') }}"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <br>

    <div class="row">
        <div class="col">
            <div class="card">
                <div >
                    <h3 class="card-title"> {{  trans('CuadreInventario.productoInventario') }}
                        <button class="btn btn-info btn-sm float-right" data-toggle="modal" data-target="#verInventario"><i class="fa fa-plus"></i></button>
                    </h3>
                </div>
                <div class="card-body">
                    <table class="table table-striped" id="tbProduct">
                        <thead>
                            <tr>
                            <th class="text-center"> <strong>  {{  trans('CuadreInventario.codigo') }}</strong></th>
                            <th class="text-center"><strong>  {{  trans('CuadreInventario.nombre') }}</strong></th>
                            <th class="text-center"> <strong>  {{  trans('CuadreInventario.existenciaActual') }}</strong></th>
                            <th class="text-center"> <strong>  {{  trans('CuadreInventario.existenciaReal') }}</strong></th>
                            <th class="text-center"><strong>  {{  trans('CuadreInventario.diferencia') }}</strong></th>
                            <th class="text-center"><strong>  {{  trans('CuadreInventario.valorDiferencia') }}</strong></th>
                            <th class="text-center"> <strong>  {{  trans('CuadreInventario.opciones') }}</strong></th>
                        </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
    <div class="row">
        <div class="col-12 text-center">
            <button class="btn btn-info margin-top-10" value="Agregar Cuadre Inventario" onclick="mandar()"> {{  trans('CuadreInventario.agregarCuadreInv') }}</button>
        </div>
    </div>


    {{---Modal Editar--}}
    <div class="modal fade" id="verInventario" tabindex="-1" role="dialog" aria-labelledby="editarInventarioLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editarUnidadLabel"> {{  trans('CuadreInventario.inventarioActual') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col">
                            <div class="form-group">
                                <span id="respuesta"></span>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <input name="filtro" id="filtro" class="form-control"
                                        placeholder="{{  trans('CuadreInventario.nombreCodigPr') }}" onchange="filtrar()">
                                        </div>
                                    </div>
                            </div>
                        </div>
                    </div>
                    <table class="table table-bordered table-responsive" id="tbActualizar">
                        <thead>
                            <th class="text-center"> {{  trans('CuadreInventario.productos') }}</th>
                        </thead>
                        <tbody>
                                @php
                                    $o=0;
                                @endphp
                            @foreach ($inventario as $item)
                                <tr id="rowEditar{{$o}}">
                                    <td>
                                        <div class="card">
                                            <div class="card-body">
                                                <div>
                                                    Cod. <b>{{$item->codigo}} </b>&nbsp&nbsp&nbsp&nbsp
                                                    {{ $item->presentacion }}
                                                    <button class="btn btn-info float-right" onclick="añadir({{ $item }}, {{$item->valorUnidad}})"> {{  trans('CuadreInventario.agregar') }}</button>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                @php
                                    $o=$o+1;
                                @endphp
                            @endforeach
                        </tbody>
                    </table>
                    <div class="modal-footer text-center">
                        <button type="button" class="btn btn-danger" data-dismiss="modal"> {{  trans('CuadreInventario.cerrar') }}</button>
                    </div>
                </div>

            </div>

        </div>
    </div>

    </div>


@endsection
@section('js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
    <script>
        var i = 1;
        var ids = [];
        var idBodega=[];
        jQuery(document).ready(function($){
            $(document).ready(function() {
                $('.mi-selector').select2();
            });
        });

        function añadir(item, data) {
            ids.push(item.idInventario);
            idBodega.push(item.idBodega);
            var fila='<tr id="row'+i+'">'+
                '<td class="text-center">'+item.codigo+'</td>'+
                '<td class="text-center">'+item.presentacion+'</td>'+
                '<td class="text-center" name="ExistenciaActual" id="precio_' + i + '">' + item.existenciaUnidad + '</td>' +
                ' <input type="hidden" name="tipoDeMovimiento" id="tipo_' + i + '">' +
                '<td class="text-center"> <input type="number" name="ExistenciaReal" id="cantidad_' +
                i + '" min="1" required placeholder=" {{  trans('CuadreInventario.ingreseLaCantidadDe') }}'+
                '" class="form-control" onchange="valorTotal('+i+"," +item.existenciaUnidad+', '+item.rango+')"></td>'+
                '<td class="text-center"> <span id="total_'+i+'"></span> </td>'+
                '<td class="text-center"> <input type="hidden" name="valorDiferencia" id="valorDiferencia_' + i + '" min="1"><span id="totalDiferencia_'+i+'"></span></td>'+
                '<td class="text-center"> <button class="btn btn-danger   " onclick="eliminar(' + i + ', '+ item.idInventario +')" ><i class="fa fa-trash" aria-hidden="true"></i></button> </td>'+
                    '</tr>';
            i = i + 1;
            $('#tbProduct tr:first').after(fila);
            $("#verInventario").modal('hide'); //ocultamos el modal
            $('body').removeClass('modal-open'); //eliminamos la clase del body para poder hacer scroll
            $('.modal-backdrop').remove(); //eliminamos el backdrop del modal

        }

        function eliminar(id, idInventario) {
            $('#row' + id + '').remove(); //borra la fila
            const index = ids.indexOf(idInventario);
            if (index > -1) { // only splice array when item is found
              ids.splice(index, 1); // 2nd parameter means remove one item only
            }
            i = i - 1;
        }

        function valorTotal(i, valor, valorAnterior){
            var ExistenciaActual = valor;
            var ExistenciaReal = document.getElementById('cantidad_'+i).value;
            if (ExistenciaActual < ExistenciaReal) {
                var total =  ExistenciaReal - ExistenciaActual; 
                $("#tipo_"+i).val(0);
                document.getElementById('total_'+i).innerHTML=" + "+total;
                document.getElementById('totalDiferencia_'+i).innerHTML=" + "+total * valorAnterior ;
                document.getElementById('valorDiferencia_'+i).value=total * valorAnterior ;
            } else {
                var total =  ExistenciaActual - ExistenciaReal; 
                $("#tipo_"+i).val(1);
                document.getElementById('total_'+i).innerHTML=" - "+total ;
                document.getElementById('totalDiferencia_'+i).innerHTML=" - "+total * valorAnterior ;
                document.getElementById('valorDiferencia_'+i).value=total * valorAnterior ;
            }
        }

        function mandar() {
            var salidas = [];
            var entradas = [];
            var detalleInputs = document.getElementsByName("ExistenciaActual");
            var detalleInputsCantidad = document.getElementsByName("ExistenciaReal");
            var tipoMovimientos = document.getElementsByName("tipoDeMovimiento");
            if (detalleInputs.length == 0) {
                swal({
                    title: " {{  trans('CuadreInventario.noHaSeleccionadoPro') }}",
                    text: " {{  trans('CuadreInventario.porFavorAñadeProducto') }}",
                    showConfirmButton: true
                });
            } else {
                const idsPro = ids.slice().reverse();
                for (let index = 0; index < detalleInputs.length; index++) {
                    const existenciaReal = document.getElementById(detalleInputsCantidad[index].id).value;
                    const tipoMovimiento = document.getElementById(tipoMovimientos[index].id).value;
                    const valorDiferencia = document.getElementById("valorDiferencia_"+(detalleInputs.length-(index))).value;
                    const id = idsPro[index];
                    if (id == null) {
                        swal({
                        title: " {{  trans('CuadreInventario.noHaSeleccionadoPro') }}",
                        text: " {{  trans('CuadreInventario.porFavorAñadeProducto') }}",
                        showConfirmButton: true
                    });

                    } else {
                        if (existenciaReal == "" || existenciaReal == null) {
                            swal({
                                title: " {{  trans('CuadreInventario.camposVacios') }}",
                                text: " {{  trans('CuadreInventario.porFavorLleneLosCampos') }}",
                                showConfirmButton: true
                            });
                            break;
                        } else {
                            if (tipoMovimiento == 0) {
                                entradas.push({
                                    existenciaReal: existenciaReal,
                                    idInventario: id,
                                    valorDiferencia: valorDiferencia,
                                });
                            } else {
                                salidas.push({
                                    existenciaReal: existenciaReal,
                                    idInventario: id,
                                    valorDiferencia: valorDiferencia,
                                });
                            }
                        }
                    }
                }
                var referencia = document.getElementById('referencia').value;
                var idTag = document.getElementById('idTag').value;
                var descrip = document.getElementById('descripcion').value;
                if ( descrip == "") {
                    swal({
                        title: " {{  trans('CuadreInventario.camposVacios') }}",
                        text: " {{  trans('CuadreInventario.porFavorLleneLosCampos') }}",
                        showConfirmButton: true
                    });
                } else {
                    var data = {
                        referencia: referencia,
                        idTag: idTag,
                        descripcion: descrip,
                        entradas: entradas,
                        salidas: salidas
                    }
                    var host = "{{ $_SERVER['HTTP_HOST'] }}";
                    $.ajax({
                        url: UrlHost_ + "/administrator/cuadreInventario/store",
                        data: data,
                        type: 'post',
                        dataType: 'json',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        beforeSend: function() {
                            swal({
                                title: " {{  trans('CuadreInventario.cargando') }}",
                                text: " {{  trans('CuadreInventario.BuscandoInventario') }}",
                                showConfirmButton: false
                            });
                        },
                        success: function(response) {
                            if (response.code == 200) {
                                swal.close();
                                location.href= UrlHost_+"/administrator/cuadreInventario";
                            }else if(response.code == 0){
                                swal.close();
                                swal({
                                title: " {{  trans('CuadreInventario.errorInterno') }}",
                                text: " {{  trans('CuadreInventario.CorregirErrores') }}",
                                showConfirmButton: true
                                });
                            } else if (response.code == 306) {
                            swal("Error!", " Ese número de referencia ya existe. ", "error");
                            }else{
                                swal("Error!", " {{  trans('CuadreInventario.errorIntenteloMasTarde') }}", "error");
                            }
                        },
                        error: function(xhr, error, txt){
                            swal("Error!", " {{  trans('tags.espereUnMomento') }} ", "error");
                        }
                        });
                }
            }
        }

        function changeFact() {
            if ($('.service').is(':checked')) {
                $("#typeService").attr("disabled", false);
                $("#contenido").removeAttr("disabled");

                $("#idUnidad").removeAttr("disabled");
                document.getElementById("factorizar").value = true;
            } else {
                $("#typeService").attr("checked", true);
                $("#contenido").attr("disabled", true);
                document.getElementById("contenido").value = "";
                $("#idUnidad").attr("disabled", true);
                document.getElementById("idUnidad").value = "";
            }
        }

        function filtrar(){
            var validad = document.getElementById('filtro').value;
            var data = {
            buscar: validad,
            }
            $.ajax({
                url: UrlHost_ + "/administrator/MovInventario/entradas/filtro",
                data: data,
                type: 'post',
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    // document.getElementById('respuesta').innerHTML=" <div class='alert alert-info'>Cargando...</div>";
                },
                success: function(response) {
                    if (response.code == 200) {
                        document.getElementById('respuesta').innerHTML=" <div class='alert alert-success'>Encontrado!! </div>";
                        var nFilas = $("#tbActualizar tr").length;
                        for (let index = 0; index < nFilas; index++) {
                            $('#rowEditar'+index+ '').remove(); //borra la filac
                        }

                        var array=response.data.inventario;
                        for (let index2 = 0; index2 < array.length; index2++) {
                            const element = array[index2];
                            const idEd=element.idInventario;
                            var agregar='<tr id="rowEditar'+index2+'" >'+
                                        '<td>'+
                                        '<div class="card">'+
                                            '<div class="card-body"><div>'+
                                                'Cod. <b>'+element.codigo+'</b>&nbsp&nbsp&nbsp&nbsp'+
                                                element.presentacion+
                                                ' <button id="btadd'+index2+'" class="btn btn-info float-right"'+
                                                '>Añadir</button></div>'+
                                                '</div>'+
                                                '</div>'+
                                                ' </td>'+
                                                '</tr>';
                                                $('#tbActualizar tr:first').after(agregar)
                                               
                                                var bt = document.getElementById("btadd"+index2);
                                                bt.onclick = function(event) {
                                                    añadir(element, response.data.inventario["rango"]);
                                                };
                                                
                        }
                    }else{

                        document.getElementById('respuesta').innerHTML=" <div class='alert alert-danger'>No existe!! </div>";

                        var nFilas = $("#tbActualizar tr").length;
                        for (let index = 0; index < nFilas; index++) {
                            $('#rowEditar'+index+ '').remove(); //borra la filac
                        }

                        var array=response.data.inventario;
                        for (let index2 = 0; index2 < array.length; index2++) {
                            const element = array[index2];
                            const idEd=element.idInventario;
                            var agregar='<tr id="rowEditar'+index2+'" >'+
                                        '<td>'+
                                        '<div class="card">'+
                                            '<div class="card-body"><div>'+
                                                'Cod. <b>'+element.codigo+'</b>&nbsp&nbsp&nbsp&nbsp'+
                                                element.presentacion+

                                                ' <button class="btn btn-info float-right"'+
                                                '>Añadir</button></div>'+
                                                '</div>'+
                                                '</div>'+
                                                ' </td>'+
                                                '</tr>';
                                                $('#tbActualizar tr:first').after(agregar)
                                                var bt = document.getElementById("btadd"+index2);
                                                bt.onclick = function(event) {
                                                    añadir(element, response.data.rangoActual);
                                                };

                        }



                    }
                }
            });
            if (document.getElementById('filtro').value.length==null) {
            document.getElementById('respuesta').innerHTML="";
            }
        }
    </script>
@endsection