@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">Nuevo Pedido</span>
                        </div>
                    </div>
                    <div class="portlet-body">
                        <form name="frmDatos" 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="hidden" class="form-control" name="idusuario" ng-model="model.idusuario" value="{{(Auth::user())?Auth::user()->id:'1'}}" >
                                                <input type="text" class="form-control" name="" ng-model="model.nameuser" ng-disabled="true" >
                                            </div>
                                        </div>
                                        
                                        <div class="col-md-2 ">
                                            <div class="form-group">
                                                <label>Folio</label>
                                                <input type="text" class="form-control" name="folio" id="folio" ng-model="model.folio" >
                                            </div>
                                        </div>
                                        <div class="col-md-5">
                                            <div class="form-group">
                                                <label>Observaciones</label>
                                                <textarea class="form-control" name="observaciones" id="observaciones"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <hr>
                                <div class="row">
                                    <div class="containerM">
                                        <div class="col-md-12">
                                            <div class="row">
                                                <div class="col-md-2">
                                                    <div class="form-group">
                                                        <label>M&eacute;dicamento</label>
                                                        <select class="form-control chosen-select idProducto" name="" id="idProducto_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>Proveedor</label>
                                                        <select class="form-control chosen-select idProveedor" name="" id="idProveedor_0">
                                                            <option value="">Elegir</option>
                                                            @foreach($proveedores as $proveedor)
                                                                <option value="{{$proveedor->idproveedor}}">{{$proveedor->razonsocial}}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                
                                                <div class="col-md-2">
                                                    <div class="form-group">
                                                        <label>Codigo </label>
                                                        <input type="text" class="form-control" name="" id="lote_0" >
                                                    </div>
                                                </div>
                                                <div class="col-md-2">
                                                    <div class="form-group">
                                                        <label>Cantidad</label>
                                                        <input type="number" class="form-control" name="" id="cantidad_producto_0" value="1">
                                                    </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>
                                            <hr>

                                        </div>
                                        
                                        <h3>Lista</h3>
                                    </div>
                                </div>
                                <hr>
                            </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="/pedidos" 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_form_field_producto").click(function(e){
                e.preventDefault();
                var idproducto = $('#idProducto_0').val();
                var idproveedor = $('#idProveedor_0').val();
                var cantidad = $('#cantidad_producto_0').val();
                var lote = $('#lote_0').val();
                if(!idproducto){
                    swal('','Se necesita un producto','info');
                    return false;
                }
                idRenProducto++;
                $(wrapperProducto).append(''+
                    '    <div class="col-md-12">'+
                    '        <div class="row">'+
                    '            <div class="col-md-3">'+
                    '                <div class="form-group">'+
                    '                    <label>M&eacute;dicamento</label>'+
                    '                    <select class="form-control idProducto" name="idproducto[]" id="idProducto_'+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>Proveedor</label>'+
                    '                   <select class="form-control chosen-select idProveedor" name="idproveedor[]" id="idProveedor_'+idRenProducto+'">'+
                    '                       <option value="">Elegir</option>'+
                    '                        @foreach($proveedores as $proveedor)'+
                    '                            <option value="{{$proveedor->idproveedor}}">{{$proveedor->razonsocial}}</option>'+
                    '                        @endforeach'+
                    '                    </select>'+
                    '               </div>'+
                    '           </div>'+
                    '           <div class="col-md-1">'+
                    '               <div class="form-group">'+
                    '                   <label>Codigo</label>'+
                    '                   <input type="text" class="form-control" name="lote[]" id="lote_'+idRenProducto+'" >'+
                    '               </div>'+
                    '           </div>'+
                    '           <div class="col-md-2">'+
                    '               <div class="form-group">'+
                    '                   <label>Cantidad</label>'+
                    '                   <input class="form-control" name="cantidad_producto[]"  id="cantidad_producto_'+idRenProducto+'"  type="number" value="1">'+
                    '               </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>'+
                    '   </div>'
                    );
                $("#idProducto_"+idRenProducto+" option[value='"+idproducto+"']").prop('selected', true);
                $("#idProveedor_"+idRenProducto+" option[value='"+idproveedor+"']").prop('selected', true);
                $("#cantidad_producto_"+idRenProducto).val(cantidad);
                $("#lote_"+idRenProducto).val(lote);
                $('#cantidad_producto_0').val(1);
                $('#lote_0').val('');
                $("#idProducto_0").val("").trigger('chosen:updated');;
            });

            $(wrapperProducto).on("click",".deleteProducto", function(e){
                e.preventDefault(); $(this).parent('div').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.proveedores = [];
            $scope.status = [
                {id: 'Pendiente', text:'Pendiente'},
                {id: 'Activo', text:'Activo'}
            ];
            $scope.model.idusuario ="{{(Auth::user())?Auth::user()->id:'1'}}";
            $scope.model.nameuser ="{{(Auth::user())?Auth::user()->name:'1'}}";
            $scope.model.fecha = "{{ date('Y-m-d h:i:s')}}";
           

            $scope.getProveedores = function () {
                $http({
                    method: 'GET',
                    url: '/api/catalogos/Proveedores'
                }).then(function (response) {
                    $scope.proveedores = 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 = $(".idProducto");
                var productos = [];
                var indexProductos = 0;
                $.each(idsproductos, function(key,objeto) {
                    var idObjeto = objeto.id;
                    var id = idObjeto.replace("idProducto_","");
                    var modeloProductos = {};
                    if($("#idProducto_"+id).val()){
                        modeloProductos.idproducto = document.getElementById("idProducto_"+id).value;
                        modeloProductos.cantidad = document.getElementById("cantidad_producto_"+id).value;
                        modeloProductos.proveedores = document.getElementById("idProveedor_"+id).value;
                        modeloProductos.lote = document.getElementById("lote_"+id).value;
                        productos[indexProductos]=modeloProductos;
                        indexProductos++;
                        
                    }
                });

                $scope.model.productos = productos ;
                $scope.model.folio = $("#folio").val() ;
                $scope.model.observaciones = $("#observaciones").val() ;

                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/pedidos/guardarpedido';
                console.log($ruta);
                axios.post($ruta, $objData).then(function (response) {
                    console.log(response.data);
                    response =response.data;
                    if(response.code=='200'){
                        window.location = "/pedidos";
                    }else{
                        swal('Error',response.message,'error');
                    }
                    
                }, function (error) {
                    console.log("HAY ERROR");
                    console.log(error);
                });

            };

            $scope.getProveedores();

        });

        $("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