@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <a href="{{route('product.index')}}" class="btn btn-info">volver</a>
                    Carga masiva de productos
                    <a href="{{ asset('formats/Plantilla_creacion_productos.xlsx') }}"
                        download="Plantilla_creacion_productos.xlsx">
                        <h5 class="modal-title green pull-right"><i class="fa fa-file"></i> Descargar plantilla aqui!
                        </h5>
                    </a>

                </div>
                <div class="card-body">
                    <div>
                        <div class="col-md-12">
                        <div class=" alert alert-warning"> <strong>PARA TENER EN CUENTA !!!</strong>  Las Categorías han cambiado, asegurate de descargar la nueva plantilla actualizada</div>
                    </div>
                    </div>

                    <form method="POST" action="{{ route('product.massive')}}">
                        <div class="modal-body">
                            <div>
                                <div class="row">
                                    <input type="text" name="_token" id="_token" value="{{ csrf_token() }}" hidden>
                                    <input type="text" name="_id" id="_id" value="{{{auth()->user()->roles[0]->id}}}" hidden>
                                    {{ Form::hidden('invisible', 'secret', array('id' => 'invisible_id')) }}

                                    <div class="col">
                                        <label for="" class="col-md-6 col-form-label text-md-left">Marca:</label>
                                        <select name="brand" id="brand" class="form-control">
                                            @foreach ($brands as $brand)
                                            <option value="{{$brand->Code}}">{{$brand->Description}}</option>
                                            @endforeach

                                        </select>
                                    </div>

                                </div>
                                <div class="row">

                                    <div class="col">
                                        <label for="" class=" col-form-label text-md-left">Productos en el
                                            archivo:</label>
                                        <input type="text" name="cuantos" id="cuantos" class="form-control" value="0"
                                            readonly>
                                    </div>
                                    <div class="col">
                                        <label for="" class="col-form-label text-md-left">Total productos a cargar
                                            :</label>
                                        <input type="text" name="cantidades" id="cantidades" class="form-control"
                                            value="0" readonly>
                                    </div>
                                    <div class="col">
                                        <label for="" class="col-form-label text-md-left">Total productos descartados
                                            :</label>
                                        <input type="text" name="total" id="total" class="form-control" value="0"
                                            readonly>
                                    </div>
                                </div>
                                <hr>
                                <div class="row">
                                    <div class="col">
                                        <div class="col col-md-4">
                                             <!--<input type="file" id="select_file" name="select_file" class="form-control-file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" /> -->
                                            <span class="btn btn-info btn-file"><i class="fa fa-upload"></i> Seleccionar plantilla 
                                                <input type="file" id="select_file" name="select_file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
                                            </span>
                                        </div>
                                        <div class="col col-md-4">
                                            <button type="button" name="upload" class="btn btn-success"
                                                onclick="fnProcesarArchivo()">Procesar archivo</button>

                                        </div>
                                    </div>

                                </div>
                                <hr>

                                <br>
                                <table class="table table-striped jambo_table bulk_action" id="tabla_productos">
                                    <thead>
                                        <tr>
                                            <th>Crear</th>
                                            <th>Referencia</th>
                                            <th>Codigo barras </th>
                                            <th>Descripcion</th>
                                            <th hidden>Descripcion corta</th>
                                            <th>Precio</th>
                                            <th>Material</th>
                                            <th>Modelo</th>
                                            <th>Division</th>
                                            <th>Categoria</th>
                                            <th>Color</th>
                                            <th>Genero</th>
                                            <th>Talla</th>
                                            <th>Coleccion</th>
                                            <th>-</th>
                                        </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                </table>
                                <br>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
                            <button type="button" class="btn btn-success" id="btnsaveDocument"
                                onclick="saveDocumentProduct()">Guardar</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection
<script>
    function calcTtl_masive() {
        // console.log('wtffffffffffffffffffffffff')
        $('#total').val(0)
        $('#cantidades').val(0)
        $('#tabla_productos tbody').find('tr').each(function () {
            let si = parseInt($(this).find('td:nth-child(2)').text() == "Si" ? 0 : 1)
            let no = parseInt($(this).find('td:nth-child(2)').text() == "Si" ? 1 : 0)
            $('#total').val(si + parseInt($('#total').val()))
            $('#cantidades').val(no + parseInt($('#cantidades').val()))
        });
        $('#total').val(formatMoney($('#total').val(), 0))
        $('#cantidades').val(formatMoney($('#cantidades').val(), 0))
        $('#cuantos').val(parseInt($('#tabla_productos tbody tr').length))
        // console.log($('#cuantos').val())
        // console.log(parseInt($('#tabla_productos tbody tr').length))

    }
    function myFunction(button) {
        let tr = "#tr" + button.name
        $(tr).remove()
        calcTtl_masive()
    }
    function fnProcesarArchivo() {
        openLoading()
        $('#tabla_productos tbody >tr').remove()

        var $this = $(this); //alias form reference
        var file_data = $('#select_file').prop('files')[0];
        var form_data = new FormData();
        form_data.append('doc', file_data);
        form_data.append('_token', $('#_token').val());
        form_data.append('brand_id', $('#brand').val());
        form_data.append('brand_ddid', $('#brand').val());
        axios.post("{{ route('product.massive')}}", form_data)
            .then(function (response) {
                // console.log(response.data);
                closeLoading()
                mensajeArchivo = '';
                cuentamensaje = 0;
                let temp_refs = [];
                validacionArchivo = false;
                jQuery.each(response.data, function (i, jsonProduct) {
                    validacionArchivo = false;
                    if (!temp_refs.includes(jsonProduct.Referencia)) {
                        temp_refs.push(jsonProduct.Referencia);
                    }else{
                        mensajeArchivo += 'La Referencia '+jsonProduct.Referencia+' aparece mas de una vez en el archivo<br>';
                        return;
                    }
                    if (jsonProduct.Referencia == jsonProduct.Codigo_barras) {
                        mensajeArchivo += 'La Referencia '+jsonProduct.Referencia+' no puede tener el mismo codigo de barras<br>';
                        validacionArchivo = true;                        
                    }
                    if (jsonProduct.Referencia.length > 20) {
                        mensajeArchivo += 'La Referencia '+jsonProduct.Referencia+' debe tener entre 0 a 20 caracteres<br>';
                        validacionArchivo = true;                        
                    }
                    if (jsonProduct.Codigo_barras.length > 13) {
                        mensajeArchivo += 'El Codigo de barras del producto '+jsonProduct.Referencia+' no es valido <b>Mensaje:</b>'+jsonProduct.Codigo_barras+'<br>';
                        validacionArchivo = true;                        
                    }
                    if (jsonProduct.Codigo_barras.length < 12) {
                        mensajeArchivo += 'El Codigo de barras del producto '+jsonProduct.Referencia+' debe tener 12 o 13 caracteres <br>';
                        validacionArchivo = true;                        
                    }
                    if (jsonProduct.Descripcion.length > 50) {
                        mensajeArchivo += 'La Description del producto '+jsonProduct.Referencia+' debe tener entre 0 a 50 caracteres<br>';
                        validacionArchivo = true;                        
                    }
                    // if (jsonProduct.Material == null) {
                    //     mensajeArchivo += 'El Material del producto '+jsonProduct.Referencia+' no puede estar vacia<br>';
                    //     validacionArchivo = true;                        
                    // }
                    // if (jsonProduct.Modelo == null) {
                    //     mensajeArchivo += 'El Modelo del producto '+jsonProduct.Referencia+' no puede estar vacia<br>';
                    //     validacionArchivo = true;                        
                    // }
                    if (jsonProduct.Division == null) {
                        mensajeArchivo += 'La Division del producto '+jsonProduct.Referencia+' no puede estar vacia<br>';
                        validacionArchivo = true;                        
                    }
                    if (jsonProduct.Categoria == null) {
                        mensajeArchivo += 'La Categoria del producto '+jsonProduct.Referencia+' no puede estar vacia<br>';
                        validacionArchivo = true;                        
                    }
                    if (jsonProduct.Color == null) {
                        mensajeArchivo += 'El Color del producto '+jsonProduct.Referencia+' no puede estar vacia<br>';
                        validacionArchivo = true;                        
                    }
                    if (jsonProduct.Genero == null) {
                        mensajeArchivo += 'El Genero del producto '+jsonProduct.Referencia+' no puede estar vacia<br>';
                        validacionArchivo = true;                        
                    }
                    if (jsonProduct.Talla == null) {
                        mensajeArchivo += 'La Talla del producto '+jsonProduct.Referencia+' no puede estar vacia<br>';
                        validacionArchivo = true;                        
                    }
                    if(validacionArchivo){
                        cuentamensaje++;
                        return;

                    }
                    // if (jsonProduct.Codigo_barras.length < 12 && jsonProduct.Codigo_barras.length > 13) {
                    //     alertify.alert('Error encontrado en archivo', 'La Referencia debe tener entre 0 y 20 caracteres');
                    //     return;
                    // }
                    let id = Math.floor(Math.random() * 1000000)
                    let row =
                        "<tr id=\"tr" + id + "\">" +
                        "<td name=\"id\" hidden>" + jsonProduct.id + "</td>" +
                        "<td class='" + (jsonProduct.Omitir ? 'red' : 'green') + "'><b>" + (jsonProduct.Omitir ? 'No' : 'Si') + "</b></td>" +
                        "<td>" + getTextMayusc(jsonProduct.Referencia) + "</td>" +
                        "<td>" + jsonProduct.Codigo_barras + "</td>" +
                        "<td>" + getTextMayusc(jsonProduct.Descripcion) + "</td>" +
                        "<td hidden>" + getTextMayusc(jsonProduct.Descripcion) + "</td>" +//posible quitar
                        "<td>$" + formatMoney(jsonProduct.Precio) + "</td>" +
                        "<td>" + getTextMayusc(jsonProduct.Material) + "</td>" +
                        "<td>" + getTextMayusc(jsonProduct.Modelo) + "</td>" +
                        "<td>" + jsonProduct.Division + "</td>" +
                        "<td>" + jsonProduct.Categoria + "</td>" +
                        "<td>" + jsonProduct.Color + "</td>" +
                        "<td>" + jsonProduct.Genero + "</td>" +
                        "<td>" + jsonProduct.Talla + "</td>" +
                        "<td>" + jsonProduct.Coleccion + "</td>" +
                        "<td><button onclick=\"myFunction(this)\" type=\"button\" id=\"btnRemove\" name=\"" +
                        id +
                        "\"class=\"btn btn-danger btn-sm\"><span class=\"glyphicon glyphicon-remove\"></span></button></td>" +
                        "</tr>"

                    $("#tabla_productos tbody").append(row);
                    calcTtl_masive()
                    //console.log('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa')
                })
                if (cuentamensaje>0) {
                    alertify.alert('Error encontrado en archivo <br>Las siguientes referencias no cumplieron los requisitos', mensajeArchivo);
                }
                
                closeLoading()
            })
            .catch((error) => {
                closeLoading()
                // console.log(error.response.data);
                // console.log(error.response.status);
                // console.log(error.response.headers);
                // console.log(error);
                // console.log(error.error);
                // console.log(error.message);
                //alertify.alert('Error encontrado en archivo', error.response.data.message)
                alertify.alert('Error encontrado en archivo', 'Fallo la lectura del archivo, por favor validar la plantilla y probar nuevamente');
            });

    }
    function saveDocumentProduct() {
        openLoading()

        let items = []

        $('#tabla_productos tbody').find('tr').each(function () {
            if ($(this).find('td:nth-child(2)').text() == 'Si') {
                items.push({
                    "reference": $(this).find('td:nth-child(3)').text(),
                    "name": $(this).find('td:nth-child(5)').text(),//descripcion usada para crear el producto
                    "description": $(this).find('td:nth-child(6)').text(),//posible quitar ya no se usa
                    "brand": $('#brand').val(),
                    "price": $(this).find('td:nth-child(7)').text(),
                    "CLSTRB": "",
                    "upc": $(this).find('td:nth-child(4)').text(),
                    "material": $(this).find('td:nth-child(8)').text(),
                    "model": $(this).find('td:nth-child(9)').text(),
                    "division": $(this).find('td:nth-child(10)').text(),
                    "category": $(this).find('td:nth-child(11)').text(),
                    "colors": $(this).find('td:nth-child(12)').text(),
                    "gender": $(this).find('td:nth-child(13)').text(),
                    "talla": $(this).find('td:nth-child(14)').text(),
                    "coleccion": $(this).find('td:nth-child(15)').text(),
                })
            }
        });
        if (items.length < 1){
            alertify.alert('Error encontrado', 'No hay productos para crear').set('onok', function (closeEvent) {
                //window.location.href = "{{ route('product.index')}}";
            });
            closeLoading()
            return;
        }

        var form_data = new FormData();
        form_data.append("_token", $('#_token').val())
        form_data.append("user_id", $('#id').val())
        form_data.append("rol_user_id", $('#_id').val())
        form_data.append("brand_id", $('#brand').val())
        form_data.append("items", JSON.stringify(items))
        console.log($('#_id').val());

        // if ($('#brand').val() != '02B'){
            // fetch("../api/items/massiveNav", {
            //     method: 'POST', // or 'PUT'
            //     body: form_data, // data can be `string` or {object}!
            // })
            //     .then(res => res.json())
            //     .then((js) => {
            //         $('#btnsaveDocument').prop('disabled', true);
            //         //console.log(js);
            //         var mensajeMostrar = '';
            //         jQuery.each(js.procesados, function (i, resultitem) {
            //             var mensajeProducto = '';
            //             if (resultitem.original.message == 'Creacion de producto Fallida') {//resultitem.hasOwnProperty('detail')
            //                 mensajeProducto = resultitem.original.resource.detail.string;
            //             }else if(resultitem.original.message == 'Error proceso'){
            //                 mensajeProducto = 'Fallo la creacion';
            //             }else{
            //                 mensajeProducto = 'Creacion exitosa';
            //             }
            //             //console.log(resultitem.original.producto);
            //             //console.log(resultitem.original.message);
            //             mensajeMostrar += '<b>'+resultitem.original.message + '</b> Producto: ' + resultitem.original.producto + ' mensaje: ' + mensajeProducto + '<br>'
            //             //console.log(js.procesados);

            //         })
            //         if(mensajeMostrar == '') {mensajeMostrar = 'Los productos se crearon correctamente.'}
            //         alertify.alert('Proceso Finalizado', mensajeMostrar).set('onok', function (closeEvent) {
            //             //location.reload();
            //             window.location.href = "{{ route('product.index')}}";
            //         }
            //         );
            //         closeLoading()
            //     })
            //     .catch((error) => {
            //         console.log('Error:', error)
            //         alertify.alert('Error encontrado', 'Algo salió mal!');
            //         $('#btnsaveDocument').prop('disabled', false);
            //         closeLoading()
            //     })
        // }else{
            //console.log('proceso miguel');
            //closeLoading()
            fetch("../api/items_/massiveNav_new", {
            method: 'POST', // or 'PUT'
            body: form_data, // data can be `string` or {object}!
            })
                .then(res => res.json())
                .then((js) => {
                    //$('#btnsaveDocument').prop('disabled', true);
                    //console.log(js);
                    var mensajeMostrar = '';
                    var cabeceraMensaje = '';
                    if (js.message == 'Creacion de producto Fallida ya existen') {//resultitem.hasOwnProperty('detail')
                        mensajeProducto = js.resource.response.detail.string;
                        if (Array.isArray(js.resource.Items.ItemCardRetail)) {
                            jQuery.each(js.resource.Items.ItemCardRetail, function (i, resultitem) {
                                mensajeMostrar += '<b>'+js.message + '</b> Producto: ' + resultitem.No + ' <b>mensaje:</b> ' + js.resource.response.detail.string + '<br>';
                                cabeceraMensaje = 'Fallo la creacion';
                            })
                        }else{
                            mensajeMostrar += '<b>'+js.message + '</b> Producto: ' + js.resource.Items.ItemCardRetail.No + ' <b>mensaje:</b> ' + js.resource.response.detail.string + '<br>';
                            cabeceraMensaje = 'Fallo la creacion';
                        }
                    }else if(js.message == 'Error proceso'){
                        mensajeMostrar = 'Fallo la creacion <b>mensaje:</b> '+js.resource;
                        cabeceraMensaje = 'Fallo la creacion';
                    }else if(js.message == 'Productos creados correctamente') {
                        mensajeMostrar = 'Creacion exitosa';
                        cabeceraMensaje = 'Proceso Finalizado';
                    }else if(js.message == 'Creacion de producto Fallida por datos'){// en NAV
                        if (js.resource.response.detail.string == 'The record already exists.') {
                            mensajeMostrar = 'Por favor probar nuevamente, cargar archivos de menor tamaño puede ayudar a la efectividad del proceso';
                            cabeceraMensaje = 'Se presento una falla inesperada';
                        }else{
                            mensajeMostrar = 'Fallo generado por datos incorrectos <b>mensaje:</b> '+js.resource.response.detail.string;
                            cabeceraMensaje = 'Fallo la creacion';
                        }
                    }else if(js.message == 'Creacion de producto Fallida por datos en NAV'){
                        mensajeMostrar = 'Fallo generado por datos incorrectos <b>mensaje:</b> '+js.resource + ' <b>Valor:</b>: ' + js.producto;
                        cabeceraMensaje = 'Fallo la creacion';
                    }
                    console.log(js.message);
                    
                    if(mensajeMostrar == '') {mensajeMostrar = 'No esta dentro del flujo.'}
                    alertify.alert(cabeceraMensaje, mensajeMostrar).set('onok', function (closeEvent) {
                        //location.reload();
                        //window.location.href = "{{ route('product.index')}}";
                    }
                    );
                    closeLoading()
                })
                .catch((error) => {
                    console.log('Error:', error)
                    alertify.alert('Error encontrado', 'Algo salió mal!');
                    $('#btnsaveDocument').prop('disabled', false);
                    closeLoading()
                })
        //}



    }
</script>