@extends('layouts.app', ['activePage' => 'clientes', 'titlePage' => __('Autos')])

@section('content')

<style>
    #gridPoyectos th {
        font-size: 10px;
    }

    table {
        table-layout: fixed;
    }

    table td {
        word-wrap: break-word;
        max-width: 200px;
    }

    #gridPoyectos td {
        white-space: inherit;
    }

    #bodyCarPros {
        width: 100%;
        height: 100%;
        overflow: visible;
    }

    .peque {
        font-size: 13px;
    }

    .peque2 {
        font-size: 11px;
    }

    .errorpartida {
        background-color: #ff97a9;
        color: white;
    }
</style>
<div class="content">
        <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-12">
                                <h4 class="card-title">{{ $data->Descripcion }} - ({{ $data->CodigoProyecto }})</h4>
                                <!--<p class="card-category"> Here is a subtitle for this table</p>-->
                                <input type="hidden" id="idProyecto" value="{{ $data->Id }}">
                                @if (isset($volumetria))
                                <input type="hidden" id="id_volumetria" value="{{ $volumetria->id }}">
                                @else
                                <input type="hidden" id="id_volumetria" value="0">
                                @endif
                            </div>
                        </div>
                        @if (isset($volumetria))
                        @if (!($volumetria->estatus =='Rechazada' || $volumetria->estatus =='Aceptada'))

                        <div class="row">
                            <div class="col-1 d-flex align-items-center">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" value="" id="plantilla" onclick="muestraVolu();">
                                    <label class="custom-control-label" for="customCheck1">Plantilla</label>
                                </div>
                            </div>
                            <div class="col-3 selplan" style="display: none;">
                                <div class="input-group input-group-static mb-4">
                                    <label for="versiones" class="ms-0">Version:</label>
                                    <select class="form-control" id="versiones">
                                        @foreach ($data->volumetrias as $v)
                                        <option value="{{ $v->id }}">Version {{ $v->version }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-2 align-items-center selplan" style="display: none;">
                                <button class="btn btn-primary btn-sm" onclick="cargaVolumetria();">Cargar version</button>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-4">
                                <div class="input-group input-group-static">
                                    <label class="mr-2">Producto:</label>
                                    <input type="text" class="form-control" id="producto">
                                </div>
                            </div>
                            <!--<div class="col-1">
                                <div class="input-group input-group-static">
                                    <label>Cantidad</label>
                                    <input type="number" class="form-control" id="cantidad" value="1">
                                </div>
                            </div>
                            <div class="col-5" align="left">
                                <button class="btn btn-info">Agregar</button>
                            </div>-->
                        </div>
                        @endif
                        @else
                        <div class="row">
                            <div class="col-1 d-flex align-items-center">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" value="" id="plantilla" onclick="muestraVolu();">
                                    <label class="custom-control-label" for="customCheck1">Plantilla</label>
                                </div>
                            </div>
                            <div class="col-3 selplan" style="display: none;">
                                <div class="input-group input-group-static mb-4">
                                    <label for="versiones" class="ms-0">Version:</label>
                                    <select class="form-control" id="versiones">
                                        @foreach ($data->volumetrias as $v)
                                        <option value="{{ $v->id }}">Version {{ $v->version }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-2 align-items-center selplan" style="display: none;">
                                <button class="btn btn-primary btn-sm" onclick="cargaVolumetria();">Cargar version</button>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-4">
                                <div class="input-group input-group-static">
                                    <label class="mr-2">Producto:</label>
                                    <input type="text" class="form-control" id="producto">
                                </div>
                            </div>
                            <!--<div class="col-1">
                                <div class="input-group input-group-static">
                                    <label>Cantidad</label>
                                    <input type="number" class="form-control" id="cantidad" value="1">
                                </div>
                            </div>
                            <div class="col-5" align="left">
                                <button class="btn btn-info">Agregar</button>
                            </div>-->
                        </div>
                        @endif

                        <br>
                        <div class="row d-flex">
                            <div class="col-12">
                                <div class="card bg-light border-light d-flex" style="max-width: 100%;height: 100%;">
                                    <div id="bodyCarPros" class="card-body d-flex" style="background-color:  #fef9e7 ;">
                                        <div class="table-responsive float-left">
                                            <table class="table table-hover table-sm">
                                                <thead>
                                                    <tr>
                                                        <th width="15%">Codigo</th>
                                                        <!--<th width="10%">Item</th>-->
                                                        <th width="10%">Unidad</th>
                                                        <th>Descripcion</th>
                                                        <th width="10%">Stock</th>
                                                        <th width="10%">Cantidad</th>
                                                        <th width="10%">Acciones</th>
                                                        @if (isset($volumetria))
                                                        <th>Fecha</th>
                                                        <th>Motivo</th>
                                                        @endif
                                                    </tr>
                                                </thead>
                                                <tbody id="prdlist">
                                                    @if (isset($volumetria))
                                                    @foreach ($volumetria->productos as $p)
                                                    @if (strtotime($p->FechaProbableEntrega) > strtotime($data->FechaEstimadaEjecucion) && $p->FechaProbableEntrega!='0000-00-00')
                                                    <tr title="{{ $p->motivo }}" id="pr_{{ $p->Id_Producto }}" class="prods errorpartida" idpr="{{ $p->Id_Producto }}">
                                                        @else
                                                    <tr id="pr_{{ $p->Id_Producto }}" class="prods" idpr="{{ $p->Id_Producto }}">
                                                        @endif

                                                        <td width="20%" class="text-wrap peque">{{ $p->producto->Cod020a }}</td>
                                                        <!--<td width="5%">{{ $p->producto->CodigoProveedor }}</td>-->
                                                        <td width="5%" class="peque">{{ $p->producto->Tipoe020a }}</td>
                                                        <td class="text-wrap peque2" width="50%">{{ $p->producto->Nom020a }}</td>
                                                        <td>
                                                            <div class="input-group input-group-outline"><input type="number" step="any" class="form-control form-control-sm" value="{{ intval($p->existencias) }}" id="stock_{{ $p->Id_Producto }}" readonly></div>
                                                        </td>

                                                        <td width="10%" class="peque">
                                                            <div class="input-group input-group-outline"><input type="number" step="any" class="form-control" id="canti_{{ $p->Id_Producto }}" value="{{ $p->Cantidad }}" onkeyup="contadorPartidas();"></div>
                                                        </td>
                                                        <td width="5%" align="center"><button class="btn btn-danger btn-sm" onclick="elimina(`{{ $p->Id_Producto }}`)">X</button></td>
                                                        <td class="text-wrap peque2" width="30%">{{ $p->FechaProbableEntrega }}</td>
                                                        <td class="text-wrap peque2" width="30%">{{ $p->motivo }}</td>
                                                    </tr>
                                                                                                        @endforeach
                                                    @endif
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="card-footer">
                                        <div class="row">
                                            <div class="col-4" align="left">
                                                <h5 id="totalPartidas">Partidas : {{ $partidas }}</h5>
                                            </div>
                                            <div class="col-4" align="center">
                                                <h5 id="totalPiezas">Unidades : {{ $piezassTotales }}</h5>
                                            </div>
                                            <div class="col-4" align="right">

                                                @if (isset($volumetria))
                                                @if ($volumetria->estatus =='En Proceso')
                                                <button class="btn btn-info" id="btnGuarda">Guardar</button>
                                                @endif

                                                @else

                                                <button class="btn btn-info" id="btnGuarda">Guardar</button>

                                                @endif

                                                @if (isset($volumetria))
                                                @if ($volumetria->estatus =='En Proceso')
                                                <button class="btn btn-success" id="btnFinaliza">Finalizar</button>
                                                @endif
                                                @else

                                                <button class="btn btn-success" id="btnFinaliza">Finalizar</button>

                                                @endif

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="modalCargando" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Cargando</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body">
                <div class="col-12" align="center">
                    <i class="fa fa-spinner fa-spin" style="font-size:24px"></i>
                </div>
            </div>

        </div>
    </div>
</div>


<link rel="stylesheet" href="{{asset('vendor/jquery-ui/jquery-ui.min.css')}}">
<script src="{{asset('vendor/jquery-ui/jquery-ui.min.js')}}"></script>
<script>
    $(document).ready(function() {
        $('.dropify').dropify();

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        var clicando = false;
        $("#btnFinaliza").click(function() {
            // Si ha sido clicado
            if (clicando) {
                // Mostramos que ya se ha clicado, y no puede clicarse de nuevo
                return false;
                // Si no ha sido clicado
            } else {
                // Le decimos que ha sido clicado
                clicando = true;
                // Mostramos el mensaje de que ha sido clicado
                guardar(2)
            }
        });
        var clicando2 = false;
        $("#btnGuarda").click(function() {
            // Si ha sido clicado
            if (clicando2) {
                // Mostramos que ya se ha clicado, y no puede clicarse de nuevo
                return false;
                // Si no ha sido clicado
            } else {
                // Le decimos que ha sido clicado
                clicando2 = true;
                // Mostramos el mensaje de que ha sido clicado
                guardar(1)
            }
        });

        var text2 = $("#producto").tautocomplete({
            width: "750px",
            columns: ['Descripcion', 'Codigo'],
            ajax: {
                //url: "../proyectos/volumetrias/busca_productos",
                url: "{{url('proyectos/busca_productos')}}",
                type: "GET",
                data: function() {
                    return {
                        test: text2.searchdata()
                    };
                },
                success: function(data) {
                    var filterData = [];
                    var searchData = eval("/" + text2.searchdata() + "/gi");
                    $.each(data, function(i, v) {
                        filterData.push(v);
                    });

                    console.log(filterData);
                    return filterData;
                }
            },
            onchange: function() {
                console.log(text2.all())
                agregaProducto(text2.id(), $('#cantidad').val())
                $(this).val('')
                $("#producto").focus()
                //$('#modalServicios').modal('hide')
                //$("#ta-txt").html(text2.text());
                //$("#ta-id").html(text2.id());
            }
        });
    });


    function blockSpecialChar(e) {
        var k;
        document.all ? k = e.keyCode : k = e.which;
        return ((k > 64 && k < 91) || (k > 96 && k < 123) || k == 8 || k == 32 || (k >= 48 && k <= 57));
    }

    function loadgrid1() {
        $('#gridVolumetrias').dataTable().fnDestroy();
        $('#gridVolumetrias td').css('white-space', 'initial');
        var table = $('#gridVolumetrias').DataTable({
            lengthMenu: [10, 15, 20, 50, 100],
            dom: 'Bfrtip',
            processing: true,
            responsive: true,
            scrollY: '50vh',
            scrollCollapse: true,
            order: [
                [0, "desc"]
            ],
            buttons: [{
                    extend: 'copyHtml5',
                    text: '<i class="fa fa-files-o"></i>',
                    titleAttr: 'Copiar'
                },
                {
                    extend: 'excelHtml5',
                    text: '<i class="fa fa-file-excel-o"></i>',
                    titleAttr: 'Excel'
                },
                {
                    extend: 'csvHtml5',
                    text: '<i class="fa fa-file-text-o"></i>',
                    titleAttr: 'CSV'
                },
                {
                    extend: 'pdfHtml5',
                    text: '<i class="fa fa-file-pdf-o"></i>',
                    titleAttr: 'PDF'
                }

            ],
        });
    }

    function loadGrid() {
        //$('#').DataTable();
        $('#gridPoyectos').dataTable().fnDestroy();
        $('#gridPoyectos td').css('white-space', 'initial');
        var table = $('#gridPoyectos').DataTable({
            lengthMenu: [10, 15, 20, 50, 100],
            dom: 'Bfrtip',
            processing: true,
            responsive: true,
            scrollY: '50vh',
            scrollCollapse: true,
            ajax: {
                url: "{{url('proyectos/get_volus')}}",
                type: "POST",
                data: {
                    cliente: $('#clienteF').val(),
                    //asignados: $('#asignadosF').val(),
                    estatus: $('#estatusF').val(),
                    //proyectista: $('#proyectistaF').val(),

                }
            },
            columns: [
                // {
                //     "className": 'details-control',
                //     "orderable": false,
                //     "data": null,
                //     "defaultContent": ''
                // },
                {
                    data: "Id",
                    visible: false
                },
                {
                    data: "CodigoProyecto"
                },
                {
                    data: "Descripcion"
                },
                {
                    data: "cliente_nombre"
                },
                /*{
                    data: "proyectista_nombre"
                },*/
                {
                    data: "prioridad_display"
                },
                {
                    data: "Estatus"
                },
                {
                    data: "acciones"
                },

            ],

            order: [
                [0, "desc"]
            ],
            buttons: [{
                    extend: 'copyHtml5',
                    text: '<i class="fa fa-files-o"></i>',
                    titleAttr: 'Copiar'
                },
                {
                    extend: 'excelHtml5',
                    text: '<i class="fa fa-file-excel-o"></i>',
                    titleAttr: 'Excel'
                },
                {
                    extend: 'csvHtml5',
                    text: '<i class="fa fa-file-text-o"></i>',
                    titleAttr: 'CSV'
                },
                {
                    extend: 'pdfHtml5',
                    text: '<i class="fa fa-file-pdf-o"></i>',
                    titleAttr: 'PDF'
                }

            ],
        });

        // $('#gridPoyectos tbody').on('click', 'td.details-control', function() {
        //     var tr = $(this).closest('tr');
        //     var row = table.row(tr);

        //     if (row.child.isShown()) {
        //         // This row is already open - close it
        //         row.child.hide();
        //         tr.removeClass('shown');
        //     } else {
        //         // Open this row
        //         row.child(format(row.data())).show();
        //         tr.addClass('shown');
        //     }
        // });
    }

    function agregaProducto(id, cantidad) {
        $.ajax({
                url: "{{url('proyectos/get_producto')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    id: id
                },
            })
            .done(function(resp) {
                console.log(resp);
                //console.log(typeof resp.Id !== 'undefined');
                if (typeof resp.Id !== 'undefined') {
                    suma = false
                    $(".prods").each(function() {
                        id = $(this).attr('idpr')
                        if (resp.Id == id) {
                            suma = true
                        }
                    });

                    if (suma == true) {
                        $('#canti_' + resp.Id).val(parseFloat($('#canti_' + resp.Id).val()) + 1)
                    } else {
                        html = '<tr id="pr_' + resp.Id + '" class="prods" idpr="' + resp.Id + '">'
                        html += '<td width="20%" class="text-wrap peque">' + resp.Cod020a + '</td>'
                        //html +='<td width="5%">'+resp.CodigoProveedor+'</td>'
                        html += '<td width="5%" class="peque">' + resp.Tipoe020a + '</td>'
                        html += '<td class="text-wrap" class="peque2">' + resp.Nom020a + '</td>'
                        html += '<td width="10%" class="peque"><div class="input-group input-group-outline"><input type="number" step="any" value="' + resp.existencias + '" readonly class="form-control" id="existencias_' + resp.Id + '" value="1" ></div></td>'
                        html += '<td width="10%" class="peque"><div class="input-group input-group-outline"><input type="number" step="any" class="form-control" id="canti_' + resp.Id + '" value="1" onkeyup="contadorPartidas();"></div></td>'
                        html += '<td width="5%" align="center"><button class="btn btn-danger btn-sm" onclick="elimina(' + resp.Id + ')">X</button></td>'
                        html += '</tr>'
                        $('#prdlist').append(html)
                        contadorPartidas()
                    }

                }


            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });

    }

    function elimina(id) {
        $('#pr_' + id).remove();
        contadorPartidas()
    }

    function contadorPartidas() {
        partidas = 0;
        piezas = 0;
        $(".prods").each(function() {
            id = $(this).attr('idpr')
            piezas += parseFloat($('#canti_' + id).val())
            partidas++;
        });
        $('#totalPartidas').html('Partidas : ' + partidas)
        $('#totalPiezas').html('Unidades : ' + piezas)
    }

    function guardar(tipo) {
        $('#modalCargando').modal('show')
        var idVolumetria = $('#id_volumetria').val()
        var items = new Array()
        var partidas = 0;
        $(".prods").each(function() {
            id = $(this).attr('idpr')
            partidas += parseFloat($('#canti_' + id).val())
            dat = {
                iditem: id,
                cantidad: $('#canti_' + id).val()
            }
            items.push(dat)
        });
        console.log(items)
        $.ajax({
                url: "{{url('proyectos/save_volumetria')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    id: $('#idProyecto').val(),
                    items: items,
                    tipo: tipo,
                    idVolumetria: idVolumetria,
                },
            })
            .done(function(resp) {
                console.log(resp);
                if (resp.id > 0) {
                    if (tipo == '1') {
                        titulo = 'Se guardo correctamente'
                    } else {
                        titulo = 'Se finalizo correctamente'
                    }
                    Swal.fire({
                        title: titulo,
                        type: 'success',
                        timer: 2000
                    })
                    setTimeout(() => {
                        $('#modalCargando').modal('hide')
                        window.location.href = "{{url('proyectos/volumetrias')}}/" + $('#idProyecto').val();
                    }, 2000);

                }

            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });

    }

    function muestraVolu() {

        if ($('#plantilla').is(':checked')) {
            $('.selplan').show()
        } else {
            $('.selplan').hide()
        }
    }

    function cargaVolumetria() {
        var version = $('#versiones').val()
        $.ajax({
                url: "{{url('proyectos/get_productos_volu')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    version: version
                },
            })
            .done(function(resp) {
                console.log("success");
                html = ''
                $('#prdlist').html(html)
                console.log(resp.productos)
                $.each(resp.productos, function(index, val) {

                    html += '<tr id="pr_' + val.Id + '" class="prods" idpr="' + val.Id + '">'
                    html += '<td width="5%">' + val.Cod020a + '</td>'
                    //html += '<td width="5%">' + val.CodigoProveedor + '</td>'
                    html += '<td width="5%">' + val.Tipoe020a + '</td>'
                    html += '<td class="text-wrap">' + val.Nom020a + '</td>'
                    html += '<td width="10%"><div class="input-group input-group-outline"><input type="number" step="any" class="form-control" id="canti_' + val.Id + '" value="' + val.Cantidad + '" onkeyup="contadorPartidas();"></div></td>'
                    html += '<td width="10%" align="center"><button class="btn btn-danger btn-sm" onclick="elimina(' + val.Id + ')">X</button></td>'
                    html += '</tr>'
                });
                $('#prdlist').append(html)
                contadorPartidas()
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });

    }
</script>
@endsection