@extends('plantilla')
@section('header')

@endsection

@section('container')
    <div class="page-content-wrapper">
        <div class="row">
            <div class="col-md-12">
                <div class="portlet light portlet-fit portlet-form ">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="icon-bubble font-green"></i>
                            <span class="caption-subject font-green bold uppercase">Registrar Salida de Inventario</span>
                        </div>
                    </div>
                    <div class="portlet-body">
                        <form role="form">
                            <div class="form-body">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="col-md-2 ">
                                            <div class="form-group">
                                                <label>Fecha</label>
                                                <input type="text" class="form-control" ng-model="model.fecha" name="fecha" >
                                            </div>
                                        </div>
                                        <div class="col-md-1 ">
                                            <div class="form-group">
                                                <label>Usuario</label>
                                                <input type="text" class="form-control" name="idusuario" ng-model="model.idusuario" ng-disabled="true" >
                                            </div>
                                        </div>
                                        <div class="col-md-2 ">
                                            <div class="form-group">
                                                <label>Motivo</label>
                                                <select class="form-control" name="motivo" id="motivo" ng-model="model.motivo"
                                                        ng-options="option.id as option.text for option in motivos" required>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-2" ng-if="model.motivo == 'Caducidad'">
                                            <div class="form-group">
                                                <label>Fecha de Caducidad</label>
                                                <input class="form-control date-picker" name="fecha_caducidad" ng-model="model.fecha_caducidad" autocomplete="off" id="fecha_caducidad" size="16" type="text" value="">
                                            </div>
                                        </div>
                                        <div class="col-md-2" ng-if="model.motivo == 'Abastecimiento'">
                                            <div class="form-group">
                                                <label>Almacen</label>
                                                <select class="form-control" name="idalmacen" id="idalmacen" ng-model="model.idalmacen"
                                                        ng-options="option.id as option.almacen for option in almacenes" required>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-2" ng-if="model.motivo == 'Abastecimiento'">
                                            <div class="form-group">
                                                <label>Persona que autoriza</label>
                                                <select class="form-control" name="idpersonal" id="idpersonal" ng-model="model.idpersonal"
                                                        ng-options="option.id as option.nombre for option in personal" required>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label>Observaciones</label>
                                                <textarea class="form-control" ng-model="model.observaciones" name="observaciones" id="observaciones"></textarea>
                                            </div>
                                        </div>
                                        <div class="col-md-1 ">
                                            <div class="form-group">
                                                <label>No Vale</label>
                                                <input type="text" class="form-control" name="no_vale" ng-model="model.no_vale" >
                                            </div>
                                        </div>
                                        <div class="col-md-2" ng-if="model.motivo == 'Abastecimiento'">
                                            <div class="form-group">
                                                <label>Paciente</label>
                                                <select class="form-control" name="idpaciente" id="idpaciente" ng-model="model.idpaciente"
                                                        ng-options="option.id as option.nombre for option in pacientes" >
                                                </select>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                                <hr>
                                <div class="row">
                                    <div class="containerM">
                                        <div class="col-md-12">
                                            <div class="col-md-3 ">
                                                <div class="form-group">
                                                    <label>M&eacute;dicamento</label>
                                                    <select class="form-control idProducto" name="idProducto[]" id="idProducto_0" onchange="carga_producto(this.value,0)">
                                                        <option value="">Elegir</option>
                                                        @foreach($productos as $producto)
                                                            <option value="{{$producto->idproducto}}">{{$producto->nombre_comercial}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-2 ">
                                                <div class="form-group">
                                                    <label>Lote</label>
                                                    <select class="form-control" name="lote[]" id="lote_0" onchange="carga_cantidades(this,0)">
                                                        <option value="">Elegir</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-2 ">
                                                <div class="form-group">
                                                    <label>Cantidad</label>
                                                    <select class="form-control" name="cantidad[]" id="cantidad_0">
                                                        <option value="">Elegir</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="form-group col-md-1">
                                                <label>&nbsp;</label>
                                                <button type="button" class="add_form_field_producto btn blue-hoki form-control"><i class="fa fa-plus-circle"></i></button>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                            </div>
                            <div class="form-actions">
                                <div class="row">
                                    <div class="col-md-offset-3 col-md-9">
                                        <button type="submit" class="btn blue" id="button-save"  ng-click="guardaObjeto()" >Dar de Alta</button>
                                        <a href="/servicio" class="btn default">Cancelar</a>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <p id="demo"></p>
@endsection

@section('footer')

    <script>
        $(document).ready(function () {
            var id=0;
            var idRenProducto=0;
            $('[data-toggle="tooltip"]').tooltip();
            var nombreContenedor = ".containerD";
            var nombreBoton = ".add_form_field";
            var wrapper         = $(nombreContenedor);
            var add_button      = $(nombreBoton);


            $(wrapper).on("click",".delete", function(e){
                e.preventDefault(); $(this).parent('div').parent('div').remove(); x--;
            })

            var nombreContenedorProducto = ".containerM";
            var nombreBotonProducto      = ".add_form_field_producto";
            var wrapperProducto          = $(nombreContenedorProducto);
            var add_buttonProducto       = $(nombreBotonProducto);
            $(add_buttonProducto).click(function(e){
                e.preventDefault();
                idRenProducto++;
                $(wrapperProducto).append('<div class="col-md-12"><div class="col-md-3 "><div class="form-group"><label>M&eacute;dicamento</label><select class="form-control idProducto" name="idProducto[]" id="idProducto_'+idRenProducto+'" onchange="carga_producto(this.value,'+idRenProducto+')"><option value="">Elegir</option>@foreach($productos as $producto)<option value="{{$producto->idproducto}}">{{$producto->nombre_comercial}}</option>@endforeach</select></div></div><div class="col-md-2 "><div class="form-group"><label>Lote</label><select class="form-control" name="lote[]" id="lote_'+idRenProducto+'" onchange="carga_cantidades(this,'+idRenProducto+')"><option value="">Elegir</option></select></div></div><div class="col-md-2 "><div class="form-group"><label>Cantidad</label><select class="form-control" onchange="carga_totales_producto('+idRenProducto+')" name="cantidad[]" id="cantidad_'+idRenProducto+'"><option value="">Elegir</option></select></div></div><div class="form-group col-md-1"><label>&nbsp;</label><button type="button" class="deleteProducto btn red form-control"><i class="fa fa-minus-circle"></i></button></div></div>');
            });

            $(wrapperProducto).on("click",".deleteProducto", function(e){
                e.preventDefault(); $(this).parent('div').parent('div').remove(); x--;
            })
        });
        $("#btnRegresar").hide();

        var bbapp = angular.module('bbapp', ['ui.mask']);

        bbapp.controller('FundacionCtrl', function ($scope, $http, $httpParamSerializerJQLike) {
            var vm = this;
            vm.model = {};
            $scope.model = {};
            $scope.motivos = [];
            $scope.almacenes = [];
            $scope.personal = [];
            $scope.pacientes = [];
            $scope.status = [
                {id: 1, text:'Activo'},
                {id: 0, text:'Baja'}
            ];
            $scope.motivos = [
                {id: 'Caducidad', text:'Caducidad'},
                {id: 'Abastecimiento', text:'Abastecimiento'}
            ];
            $scope.model.idusuario ="{{(Auth::user())?Auth::user()->name:'1'}}";
            $scope.model.fecha = "{{ date('Y-m-d h:i:s')}}";

            $scope.getAlmacenes = function () {
                $http({
                    method: 'GET',
                    url: '/api/catalogos/Almacenes'
                }).then(function (response) {
                    $scope.almacenes = response.data;
                }, function (error) {
                    console.log("Entre 2");
                    console.log(error);
                });
            };

            $scope.getPersonal = function () {
                $http({
                    method: 'GET',
                    url: '/api/catalogos/Personal'
                }).then(function (response) {
                    $scope.personal = response.data;
                }, function (error) {
                    console.log("Entre 2");
                    console.log(error);
                });
            };
            $scope.getPacientes = function () {
                $http({
                    method: 'GET',
                    url: '/api/catalogos/Pacientes'
                }).then(function (response) {
                    $scope.pacientes = response.data;
                }, function (error) {
                    console.log("Entre 2");
                    console.log(error);
                });
            };

            $scope.doTheBack = function () {
                window.history.back();
            };

            $scope.guardaObjeto = function () {
                $("#loading").modal('show');
                $('#button-save').prop("disabled", true);

                var idsproductos = document.getElementsByClassName("idProducto");

                console.log("PRODUCTOS  ");
                console.log(idsproductos);

                var productos = [];

                var indexProductos = 0;

                $.each(idsproductos, function(key,objeto) {
                    console.log("AQUI ESTOY");
                    console.log(productos);
                    console.log(key);
                    console.log(objeto);
                    var idObjeto = objeto.id;
                    console.log("IdObjeto");
                    console.log(idObjeto);
                    var id = idObjeto.replace("idProducto_","");
                    console.log(id);
                    var modeloProductos = {};
                    modeloProductos.idproducto = document.getElementById("idProducto_"+id).value;
                    modeloProductos.cantidad = document.getElementById("cantidad_"+id).value;
                    modeloProductos.lote = document.getElementById("lote_"+id).value;
                    console.log(modeloProductos);

                    productos[indexProductos]=modeloProductos;
                    indexProductos++;

                });

                $scope.model.productos = productos;

                console.log($scope.model);
                var config = {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
                    }
                };

                $objData = $httpParamSerializerJQLike($scope.model);
                $objData = $scope.model;

                $ruta = '/api/salidas/registrarsalida';
                console.log($ruta);
                axios.post($ruta, $objData).then(function (response) {
                    console.log("TODO OK");
                    window.location = "/inventario/salidas";
                }, function (error) {
                    console.log("HAY ERROR");
                    console.log(error);
                });

            };

            $scope.getAlmacenes();
            $scope.getPersonal();
            $scope.getPacientes();

        });

        function carga_producto(idProd,renglon) {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    productoT = JSON.parse(this.responseText);
                    producto = productoT["producto"];
                    lotes = productoT["lotes"];
                    selLote = document.getElementById("lote_"+renglon);
                    console.log("select");
                    console.log(selLote);
                    for(i = selLote.options.length - 1 ; i >= 0 ; i--)
                    {
                        selLote.remove(i);
                    }
                    var option = document.createElement('option');
                    option.value = "";
                    option.textContent = "Seleccionar";
                    selLote.appendChild(option);
                    lotes.forEach(function(item){
                        if (item.existencias>0) {
                            var option = document.createElement('option');
                            option.textContent = item.lote + ' (' + item.existencias + ")";
                            option.value = item.lote;
                            selLote.appendChild(option);
                        }
                    });
                    document.getElementById("existencias_"+renglon).value=lotes.existencias;

                }
            };
            xhttp.open("GET", "/productos/"+idProd, true);
            xhttp.send();
        }

        function carga_cantidades(select,renglon) {
            console.log(select);
            lote = select.options[select.selectedIndex].innerHTML;
            cantidad = lote.split("(")[1].split(")")[0];
            console.log(cantidad);
            cantidades = document.getElementById("cantidad_"+renglon);
            for(i = cantidades.options.length - 1 ; i >= 0 ; i--)
            {
                cantidades.remove(i);
            }
            var option = document.createElement('option');
            option.value = "";
            option.textContent = "Seleccionar";
            cantidades.appendChild(option);
            for(i = 1 ; i <= cantidad ; i++)
            {
                var option = document.createElement('option');
                option.textContent = i;
                option.value = i;
                cantidades.appendChild(option);
            }
        }

        $("body").on('click', '.date-picker', function() {
            $(this).css("border-color","blue");
            $(this).datepicker({
                format: "dd/mm/yyyy",
                startView: 0,
                autoclose: true
            });
            $(this).datepicker('show');
        });

    </script>

@endsection