@extends('layouts.default')

@section('scripts')
    {{ Jqgrid::scripts() }}
    <script>
        $(document).ready(function() {
            var nreguists = [];

            $('#btn_agregar').on('click', function() {
                añadir_producto();
            });

            $(document).on('select2:select', 'select[name="producto[]"]', function() {
                var id = $(this).parents('tr').eq(0).data('index');
                var volumen_formula = $(this).select2('data')[0].volumen || 0;
                var peso_formula    = $(this).select2('data')[0].peso    || 0;
                var id_exist = nreguists.map(function(d) {return d['id']}).indexOf(id);
                if(id_exist > -1) {
                    nreguists[id_exist].nreguist = $(this).val();
                    nreguists[id_exist].volumen_formula = volumen_formula;
                    nreguists[id_exist].peso_formula    = peso_formula;
                    console.log();
                } else {
                    nreguists.push({id:id, nreguist: $(this).val(), volumen_formula: volumen_formula, peso_formula: peso_formula});
                }
                $(this).parents('tr').eq(0).attr('data-nreguist', $(this).val());
                obtener_stock(nreguists);
            });

            $(document).on('keyup', 'input[name="cantidad"]', function() {
                var id = $(this).parents('tr').eq(0).data('index');
                var cantidad = $(this).val() || 0;
                var id_exist = nreguists.map(function(d) {return d['id']}).indexOf(id);
                if(id_exist > -1) {
                    nreguists[id_exist].cantidad =  cantidad
                } else {
                    nreguists.push({id:id, cantidad:cantidad});
                }
                obtener_stock(nreguists);
            });

            $(document).on('click', '.btn_eliminar', function () {
                var cant_items = $('.item-producto').length - 1;
                var index = $(this).parents('tr').eq(0).data('index');
                var id = nreguists.map(function(d) {return d['id']}).indexOf(index);
                $(this).parents('tr').eq(0).remove();
                if(id > -1) {
                    nreguists.splice(id, 1);
                }
                if(cant_items == 0) {
                    $('#sin_productos').removeClass('hide');
                    $('#sin_materias_primas').removeClass('hide');
                    $('#lista_materias_primas .item-mp').remove();

                } else {
                    obtener_stock(nreguists);
                }
            });

            $(document).on('click', '.btn_agendar', function () {
                var index = $(this).parents('tr').eq(0).data('index');
                var id_exist = nreguists.map(function(d) {return d['id']}).indexOf(index);
                $('input[name="INDEX"]').val(index);
                $('input[name="NREGUIST_PROD"]').val(nreguists[id_exist].nreguist);
                $('input[name="CANTIDAD"]').val(nreguists[id_exist].cantidad);
                $('#fecha').datepicker("setDate", null);
                $('#agendar_modal').modal('show');
                var fecha = new Date();
                $.get('{{ url("planificador/obtener/true")  }}', {mes:(fecha.getMonth() + 1), anio:fecha.getFullYear()},function(response) {
                    if(response.length > 0) {
                        $('#sin_planificacion').addClass('hide');
                        $('#lista_planificacion .item-pla').remove();
                        $.each(response, function(index, value) {
                            var template = '<tr class="item-pla">' +
                                    '<td>' + value.FECHA_F  + '</td>' +
                                    '<td>' + value.NOMBRE  + '</td>' +
                                    '<td>' + value.CANTIDAD  + '</td>' +
                                    '<td>' + value.ESTADO  + '</td>' +
                                    '</tr>';
                            $('#lista_planificacion').append(template);
                        });
                    } else {
                        $('#sin_planificacion').removeClass('hide');
                        $('#lista_planificacion .item-pla').remove();
                    }
                });
            });

            $('#fecha').datepicker({
                onChangeMonthYear: function(year, month, inst) {
                    $.get('{{ url("planificador/obtener/true")  }}', {mes:month, anio:year},function(response) {
                        if(response.length > 0) {
                            $('#sin_planificacion').addClass('hide');
                            $('#lista_planificacion .item-pla').remove();
                            $.each(response, function(index, value) {
                                var template = '<tr class="item-pla">' +
                                        '<td>' + value.FECHA_F  + '</td>' +
                                        '<td>' + value.NOMBRE  + '</td>' +
                                        '<td>' + value.CANTIDAD  + '</td>' +
                                        '<td>' + value.ESTADO  + '</td>' +
                                        '</tr>';
                                $('#lista_planificacion').append(template);
                            });
                        } else {
                            $('#sin_planificacion').removeClass('hide');
                            $('#lista_planificacion .item-pla').remove();
                        }
                    });
                }
            });

            $('#fecha').on('change', function() {
                var fecha = $('#fecha').datepicker('getDate');
                var mes = (fecha.getMonth() + 1);
                var fecha_formated = fecha.getFullYear() + '-' + mes + '-' + fecha.getDate();
                $('input[name="FECHA"]').val(fecha_formated);
            });

            $('#form_agendar').on('submit', function() {
                clean_form_errors($('#form_agendar'));
                $.post("{{ url('planificador/agregar') }}", {NREGUIST_PROD: $('input[name="NREGUIST_PROD"]').val(), CANTIDAD: $('input[name="CANTIDAD"]').val(), FECHA: $('input[name="FECHA"]').val()}, function(response) {
                    var index = $('input[name="INDEX"]').val();
                    $('.item-producto[data-index="' + index + '"]').find('.btn_eliminar').trigger('click');
                    success_notification(response);
                    $('#agendar_modal').modal('hide');
                }, 'json').fail(function(response) {
                    if(response.status != 409) {
                        show_form_errors(response, $('#form_agendar'));
                    } else {
                        error_notification(response);
                    }
                });
                return false;
            });
        });

        function next_index() {
            var cant = $('.item-producto').length;
            if(cant == 0) return 1;
            return $('.item-producto').map(function(){return $(this).data('index');}).get().sort(function(a, b){return b-a})[0] + 1;
        }

        function añadir_producto() {
            $('#sin_productos').addClass('hide');
            var index = next_index();
            var template = '<tr class="item-producto" data-index="' + index + '">' +
                    '<td><select id="producto_' + index + '" name="producto[]" class="form-control select2"></select></td>' +
                    '<td><input id="cantidad_' + index + '" type="text" name="cantidad" class="form-control" value="0"></td>' +
                    '<td><button class="btn btn-danger btn_eliminar"><i class="fa fa-trash"></i></button> <button class="btn btn-primary btn_agendar hide"><i class="fa fa-plus"></i> Agendar</button></td>' +
                    '</tr>';

            $('#lista_productos').append(template);

            setup_select2('#producto_' + index, "{{ url('planificador/select_productos') }}", 'Seleccionar producto');
        }

        function obtener_stock(params) {
            params = $.grep(params, function(v) {
                return v.cantidad > 0;
            });
            if(params.length > 0) {
                $.get('{{ url("planificador/obtener_stocks")  }}', {fields:params},function(response) {
                    $('#sin_materias_primas').addClass('hide');
                    $('#lista_materias_primas .item-mp').remove();
                    console.log(response.data);
                    console.log(response.sql);
                    $.each(response.data, function(index, value){
                        var template = '<tr class="item-mp">' +
                                '<td>' + value.NOMBRE  + '</td>' +
                                '<td>' + value.UNIDMED + '</td>' +
                                '<td>' + parseFloat(value.STOCK_REQUERIDO).toFixed(3)  + '</td>' +
                                '<td>' + parseFloat(value.STOCK_DISPONIBLE).toFixed(3)  + '</td>' +
                                '<td>' + parseFloat(value.STOCK_RESTANTE).toFixed(3)  + '</td>' +
                                '</tr>';
                        $('#lista_materias_primas').append(template);
                    });
                    $.each(response.estados, function(index, value) {
                        var clase = '';
                        if(value == 'Disponible') {
                            $('tr[data-nreguist="' + index  + '"]').addClass('alert-success').removeClass('alert-danger');
                            $('tr[data-nreguist="' + index  + '"]').find('td').eq(2).find('.btn_agendar').removeClass('hide');
                        }
                        else if(value == 'No Disponible') {
                            $('tr[data-nreguist="' + index  + '"]').addClass('alert-danger').removeClass('alert-success');
                            $('tr[data-nreguist="' + index  + '"]').find('td').eq(2).find('.btn_agendar').addClass('hide');
                        }
                    });
                }, 'json');
            }
        }
    </script>
@endsection

@section('content')
    <div id="planificador" class="product-content product-wrap clearfix product-deatil">
        <div class="row">
            <div class="col-sm-12">
                <h1 class="page-title">
                    Planificar Producción <button id="btn_agregar" class="btn btn-primary"><i class="fa fa-plus"></i>Añadir Producto</button>
                </h1>
            </div>
        </div>
        <div id="productos">
            <table class="table">
                <thead>
                    <tr>
                        <th class="col-sm-6">Nombre Producto</th>
                        <th class="col-sm-4">Cantidad a Producir (Lts)</th>
                        <th class="col-sm-2">Acción</th>
                    </tr>
                </thead>
                <tbody id="lista_productos">
                    <tr id="sin_productos">
                        <td colspan="4" class="text-center">Añada productos</td>
                    </tr>
                </tbody>
            </table>
            <div class="row">
                <div class="col-sm-12">
                    <h1 class="page-title">
                        Stock Materias Primas
                    </h1>
                </div>
            </div>
            <table class="table">
                <thead>
                <tr>
                    <th>Nombre</th>
                    <th>Unid.Medida</th>
                    <th>Stock Requerido</th>
                    <th>Stock Disponible</th>
                    <th>Stock Sobrante/Faltante</th>
                </tr>
                </thead>
                <tbody id="lista_materias_primas">
                <tr id="sin_materias_primas">
                    <td colspan="4" class="text-center">Añada productos</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div id="agendar_modal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">Agendar Fabricación</h4>
                    </div>
                    <form action="" id="form_agendar">
                        <input type="hidden" name="INDEX">
                        <input type="hidden" name="NREGUIST_PROD">
                        <input type="hidden" name="CANTIDAD">
                        <input type="hidden" name="FECHA">
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-sm-8" style="height: 212px;overflow-y: scroll;">
                                    <table class="table table-condensed">
                                        <thead>
                                            <tr>
                                                <td>Fecha</td>
                                                <td>Producto</td>
                                                <td>Cantidad</td>
                                                <td>Estado</td>
                                            </tr>
                                        </thead>
                                        <tbody id="lista_planificacion">
                                            <tr id="sin_planificacion">
                                                <td colspan="4" class="text-center">No hay productos planificados para este mes</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="col-sm-4">
                                    <div id="fecha"></div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
                            <button type="submit" class="btn btn-primary">Agendar</button>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
@endsection