@extends('layouts.app')

@section('content')


<div class="modal-inner-pro">

    <div class="invoice-wrap">
        <div class="invoice-img" style="background-color:green; color:white;">
            <h1>NUEVA COTIZACIÓN</h1>
        </div>




    <!-- CAPTURAMOS TODOS LOS DATOS PARA ENVIAR POR POST PARA REGISTRAR -->
    <form action="{{route('Cotizacion.Store')}}" method="POST" accept-charset="utf-8">
       @csrf

        <div class="invoice-hds-pro">
            <div class="row">


                @include('layouts.alertas')


                <!-- BUSQUEDA DEL CLIENTE -->
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                    <div class="invoice-cmp-ds ivc-to">
                        <div class="cmp-ph-em">
                        </div>
                        <div class="invoice-frm">
                            <div class="row">
                                <div class="col-lg-9 col-md-9 col-sm-9 col-md-12">

                                    <select class="selectpicker" id="cliente_id" name="cliente_id" onchange="clienteSelct(this.value)" data-live-search="true">
                                        <option value="">Seleccione el cliente</option>
                                        @foreach ($clientes as $cli)
                                            <option value="{{ $cli->id }}">{{ $cli->nombre }} | {{ $cli->documento }}</option>
                                        @endforeach
                                    </select>


                                </div>

                                <!-- BOTON PARA ABRIR FORMULARIO DE NUEVO USUARIO -->
                                <div class="col-lg-3 col-md-3 col-sm-3 col-md-12">
                                    <a href="" data-toggle="modal" data-target="#addClienteModal" data-placement="left" >
                                        <i class="fa fa-user-plus fa-lg" style="color:green;"></i>
                                    </a>
                                </div>


                            </div>
                        </div>
                        
                        <div class="comp-tl">
                            <div id="datosCliente">

                            </div>         
                        </div>
                        <div class="cmp-ph-em" id="campoPersonal">
                            <span> </span>
                            <span> </span>
                        </div>
                    </div>
                </div>


            <!-- ROW CLOSE -->
            </div>
        </div>





        <!-- AQUI PRESENTAMOS LOS DATOS DE LA COTIZACIÓN -->
        <div class="row">
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                <div class="invoice-hs wt-inv sm-res-mg-t-30 tb-res-mg-t-30 tb-res-mg-t-0">
                    <span>Cotización #</span>
                    <h2>{{ str_pad($numero_cotizacion, 9, 'COT-0000', STR_PAD_LEFT) }}</h2> 
                    <input type="hidden" name="numero_cotizacion" value="{{ str_pad($numero_cotizacion, 6, '0', STR_PAD_LEFT) }}">
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                <div class="invoice-hs date-inv sm-res-mg-t-30 tb-res-mg-t-30 tb-res-mg-t-0">
                    <span>Fecha</span>
                    @php $todayDate = date("d-m-Y"); @endphp
                    <h2>{{ $todayDate }}</h2>   
                    <input type="hidden" name="date" value="{{ $todayDate }}">                         
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                <div class="invoice-hs">
                    <span>Vendedor</span>                            
                    <h2>{{ auth()->user()->name }}</h2>
                    <input type="hidden" name="vendedor_id" value="{{ auth()->user()->id }}"> 
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                <div class="invoice-hs gdt-inv sm-res-mg-t-30 tb-res-mg-t-30 tb-res-mg-t-0">
                    <span>Total General</span>
                    <h2 id="total_venta">RD$ 0</h2>

                    <!-- aqui debemos cargar el total -->
                    <input type="hidden" id="total_ventas" name="total_venta" value="0">
                </div>
            </div>
        </div>


  











        <!-- AQUI ESTA EL FORMULARIO PARA REGISTRAR UN NUEVO PROUCTO Y AGREGARLO A LA COTIZACION -->
        <div class="row formulario_cotizacion">
            <div class="col-lg-6 col-sm-6 col-md-6 col-xs-12">
                <label>Seleccione el producto</label>
                <!-- onchange="funselprod(this.value)" -->


                <select class="select_product_search selectpicker" id="pidproducto" name="pidproducto" data-live-search="true">
                    <option>Seleccione el producto</option>
                    @foreach ($productos as $pro)

                    <!--
                        <option value="{{ $pro->id }}_{{ $pro->stock }}_{{ $pro->precio_venta1 }}">{{ $pro->codigo }} | {{ $pro->nombre }}</option>  -->

                        <option value="{{ $pro->id }}_{{ $pro->stock }}_{{ $pro->precio_venta1 }}_{{ $pro->codigo }}_{{ $pro->nombre }}_{{ $pro->descripcion }}">{{ $pro->codigo }} | {{ $pro->nombre }}</option> 
                                  
                    @endforeach
                    <!--
                     <input type="text" id="pcodigo" name="pcodigo" value="{{ $pro->codigo }}">
                        <input type="text" id="pnombre" name="pnombre" value="{{ $pro->nombre }}">
                        <input type="text" id="pdescripcion" name="pdescripcion" value="{{ $pro->descripcion }}">-->
                </select>


            
            </div>


            <div class="col-lg-1 col-sm-1 col-md-1 col-xs-12">
                <label>Cantidad</label>
                <div class="form-group">
                    <div class="nk-int-st">
                        <input type="number" id="pcantidad" name="pcantidad" min="1" class="form-control" placeholder="Cantidad" value="1" required>
                    </div>
                </div>
            </div>
            <div class="col-lg-2 col-sm-2 col-md-2 col-xs-12">
                <label>Disponibilidad</label>
                <div class="form-group">
                    <div class="nk-int-st">
                        <input type="number" id="pstock"  class="form-control" placeholder="Disponible" disabled>
                    </div>
                </div>
            </div>

            <div class="col-lg-2 col-sm-2 col-md-2 col-xs-12">
                <label>Precio Unidad</label>
                <div class="form-group">
                    <div class="nk-int-st">
                        <input type="number" id="pprecio_venta" name="pprecio_venta" class="form-control" placeholder="Precio Unidad" disabled>
                    </div>
                </div>
            </div>
            <div class="col-lg-1 col-sm-1 col-md-1 col-xs-12 button_agregar">

                <!-- onclick="agregar();" -->
                <div id="agregar" class="btn notika-btn-teal waves-effect agregar">Agregar</div>
            </div>
        </div>






        <!-- AQUI PRESENTAMOS LOS DATOS QUE SE TRAE DE LA TABLA -->
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="invoice-sp">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th style="width: 5%;">#</th>
                                <th style="width: 10%;">Código</th>
                                <th style="width: 50%;">Descripción</th>
                                <th style="width: 5%;">Cant.</th>
                                <th style="width: 15%;">Precio U.</th>
                                <th style="width: 15%;">Total</th>
                                <th style="width: 5%;">Opciones </th>
                            </tr>
                        </thead>
                        <tbody id="detalles">
                        </tbody>

                        <tfoot>
                             <th style="width: 5%;"></th>
                                <th style="width: 10%;"></th>
                                <th style="width: 40%;"></th>
                                <th style="width: 15%;">ITBIS <b id="precio_itbis" style="color: red;">RD$ 0</b></th>
                                <th style="width: 15%;">Precio Total</th>
                                <th style="width: 20%;"><h6 id="precio_total" style="color: green; font-size: 20px;">0</h6></th>
                                <th style="width: 0%;"></th>
                        </tfoot>

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



        <input type="hidden" name="total" id="total_final">


         <div class="row" style="padding-top:40px;">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="invoice-ds-int invoice-last">
                        <h2>NOTA:</h2>
                        <p class="tab-mg-b-0">Despues de los 15 de la elaboración de esta cotización @foreach ($datosEmpresa as $emp) {{ strtoupper($emp->nombre) }} @endforeach puede modificar los precios de los productos sin previo aviso.</p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="btn-list">
                        <button class="btn btn-primary notika-btn-primary waves-effect" id="guardar">Guardar</button>
                        <a href="/cotizaciones" class="btn btn-danger notika-btn-danger waves-effect">Cancelar</a>
                        <div class="btn btn-danger notika-btn-danger waves-effect limpiar_tabla">Limpiar</div>
                    </div>
                </div>
            </div>

    </form> 







    <!-- invoice-wrap -->
    </div>

</div>




    @include('layouts.formularios_emergentes')
    @yield('form_user')




<script>

    function clienteSelct(){
        
        var idcliente = document.getElementById('cliente_id').value;
            
        $.ajax({
            type:'GET',
            url:"{{ route('cliente.selecionado') }}",
            data:{idcliente:idcliente},
            dataType: 'html',
            success:function(response){

                var array = $.parseJSON(response);
                var arrayLength = array.length;
            
                html = "";
                for (var i = 0; i < arrayLength; i++) {
                    html += "<span>Cliente: <strong>"+array[i]['nombre']+"</strong></span><br><span>Teléfono: "+array[i]['tel']+" / "+array[i]['cel']+"</span><br><span>Dirección: "+array[i]['direccion']+"</span><br><span>"+array[i]['tipo_documento']+": "+array[i]['numero_documento']+"</span><br><span>Correo electrónico: "+array[i]['email']+"</span>";
                }

                $('#datosCliente').html(html);

            } 
        });
    
    }




    function limpiar(){
       $("#pcantidad").val();
       $("#pstock").val("");
       $("#pprecio_venta").val(""); 
    }

    function evaluar(){
        if(+total > 0){
            $("#guardar").show();
        }else{
            $("#guardar").hide();
        }
    }



</script>








@endsection