@extends('layouts.admin')

@section('styles')
<link rel="stylesheet" href="{{asset('plugins/slim-select/slimselect.min.css')}}">
<style>
   .form-control:disabled,
   .form-control[readonly] {
      background-color: #a9d4ff;
      color: black;
      opacity: 1;
   }
</style>
@endsection



@section('content')
<div class="container-fluid mb-5">
   <div class="row">
      <div class="col">
         <div class="card p-4">

            <form action="{{route('venta.store')}}" method="post" autocomplete="off">
               @csrf

               <h1 class="display-4 text-center">Datos De Venta</h1>

               <!-- paneles -->
               <div class="row p-4">
                  <!-- panel izquierdo -->
                  <div class="col-md-9">

                     <!-- articulos -->
                     <div class="form-group row">
                        <div class="col-md-10">

                           <div class="form-group">
                              <label for="">ARTICULOS</label>
                              <input type="text" class="form-control" id="formulario" placeholder="">

                           </div>

                           <select class="" name="articulo" id="medicamento" autofocus>
                              <option value="">Seleccione Articulo </option>



                           </select>
                           <br>
                        </div>
                     </div>
                     <!-- end articulos -->
                     <!-- clientes -->
                     <div class="form-group row mt-2">
                        <div class="col-md-7">
                           <select class="" style="width: 100% !important;" name="cliente" id="idcliente">
                              <option value="">Seleccione Cliente </option>
                              @foreach($clientes as $cliente)
                              <option value="{{ $cliente->id}}">Codigo: {{$cliente->id}} / {{$cliente->nombre}} / {{$cliente->nit}}</option>
                              @endforeach
                           </select>
                        </div>
                        <div class="col-md-3">
                           <a href="{{route('cliente.create')}}"> <i class="fa fa-plus" aria-hidden="true"></i> Registrar Cliente Nuevo </a>
                        </div>
                     </div>
                     <!-- end clientes -->

                     <!-- datos descriptivos -->
                     <div class="col-md-6">
                        <h3 class="h6">Datos Descriptivos</h3>
                        <div class="form-group row mx-3">
                           <div class="row">
                              <div class="col">
                                 Tipo de Venta
                                 <input type="text" class="form-control" placeholder="Tipo de Venta" disabled name="" id="tventa">

                              </div>
                              <div class="col">
                                 Precio
                                 <input type="text" class="form-control" placeholder="Precio Venta" name="" id="pventa">

                              </div>
                              <div class="col">
                                 Existencia
                                 <input type="text" class="form-control" placeholder="Existencia" name="" disabled id="existencia">
                              </div>

                           </div>

                           <div class="row">
                              <div class="col">
                                 Cantidad
                                 <input type="number" class="form-control" name="" value="1" step="any" id="cantidad">
                              </div>
                              <div class="col">
                                 Descuento %
                                 <input type="number" class="form-control" placeholder="Descuento" id="descuento">
                              </div>
                           </div>
                        </div>
                     </div>
                     <!-- end datos descriptivos -->
                  </div>
                  <!-- fin panel izquierdo -->

                  <!-- panel derecho -->
                  <div class="col-md-3">
                     <a style="font-size: 300%; color: blue;" id="add"> <i class="fa fa-cart-plus" aria-hidden="true"></i> </a>

                     <div class="row">
                        <div class="col text-center">
                           Image De Descripcion <br>
                           <img src="" id="img" class="img-fluid mt-1" style="width: 35%;">
                        </div>
                     </div>
                  </div>
                  <!-- fin panel derecho -->
               </div>
               <!-- paneles -->

               <!-- decripcion de articulos -->
               <div class="row p-4 justify-content-center">
                  <div class="col-md-5">
                     <textarea class="forn-control" id="descripArt" style="width: 100%;" rows="3" disabled></textarea>
                  </div>
                  <div class="col-md-5">
                     <textarea class="forn-control" id="descripArtInter" style="width: 100%;" rows="3" disabled></textarea>
                  </div>
               </div>
               <!-- fin decripcion de articulos -->
               <hr>
               <!-- descripcion -->
               <div class="container-fluid">
                  <div class="row justify-content-center">
                     <div class="col">
                        <!-- Widget: user widget style 1 -->

                        <div class="table-responsive">

                           <table class="table " id="tabla_venta">
                              <thead class="">
                                 <tr>
                                    <th>Accion</th>
                                    <th>Artículo</th>
                                    <th>Cantidad</th>
                                    <th>Precio Unitario</th>
                                    <th class="d-none">Descuento</th>
                                    <th>Precio Total</th>
                                 </tr>
                              </thead>
                              <tbody>

                                 <tr>

                                 </tr>

                              </tbody>
                           </table>

                        </div>
                        <!-- /.widget-user -->
                     </div>
                  </div>
               </div>
               <!-- fin descripcio -->
               <!-- totales -->
               <div class="row justify-content-end">
                  <div class="col-4">
                     <p class="lead">
                        <font style="vertical-align: inherit;">
                           <font style="vertical-align: inherit;">Monto a Pagar </font>
                        </font>
                     </p>

                     <div class="table-responsive">
                        <table class="table">
                           <tbody>
                              <tr>
                                 <th>
                                    <font style="vertical-align: inherit;">
                                       <font style="vertical-align: inherit;">Total:Q</font>
                                    </font>
                                 </th>
                                 <td>
                                    <label id="total"> </label> <br>
                                 </td>

                              </tr>
                              <tr>
                                 <th>
                                    <font style="vertical-align: inherit;">
                                       <font style="vertical-align: inherit;">Total Descuento:Q</font>
                                    </font>
                                 </th>
                                 <td>
                                    <label id="total_descuento"> </label> <br>
                                 </td>
                              </tr>
                              <tr>
                                 <th>
                                    <font style="vertical-align: inherit;">
                                       <font style="vertical-align: inherit;">Efectivo:Q</font>
                                    </font>

                                 <td>
                                    <input type="text" class="form-control" name="efectivo" id="efectivo" placeholder="Efectivo">

                                 </td>

                                 </th>
                              </tr>

                              <tr>
                                 <th>
                                    <font style="vertical-align: inherit;">
                                       <font style="vertical-align: inherit;">Cambio:Q</font>
                                    </font>
                                 </th>

                                 <td>
                                    <input type="text" class="form-control" name="" disabled id="cambio" placeholder="Cambio" style="font-size: 25px; color: black; background: #abd7d7;">

                                 </td>
                              </tr>

                              <tr>
                                 <th>

                                 </th>

                                 <td>
                                    <button type="button" onclick="cambiofun()" class="btn btn-success"> <i class="fa fa-money" aria-hidden="true"></i> Calcular Cambio</button>

                                    <!-- <p>
                                                <button class="btn btn-warning btn-sm mt-4" type="button" data-toggle="collapse" data-target="#contentId" aria-expanded="false" aria-controls="contentId">
                                                    <i class="fa fa-plus-circle" aria-hidden="true"></i> EXTRAS
                                                </button>
                                            </p> -->
                                 </td>
                              </tr>

                           </tbody>
                        </table>
                     </div>
                  </div>
               </div>
               <!-- fin totales -->


               <p>
                  <a class="btn btn-info" data-toggle="collapse" href="#VENTASeSPECIALES" aria-expanded="false" aria-controls="VENTASeSPECIALES">
                     VENTAS ESPECIALES
                  </a>
               </p>
               <div class="collapse " id="VENTASeSPECIALES">
                  <div class="row">
                     <div class="form-group col-md-5">
                        <label for="">TIPO DE VENTA</label>
                        <select class="form-control" name="tipo" id="">
                           <option value="EFECTIVO" selected> Ventas en efectivo</option>
                           <option value="CREDITO"> Ventas al crédito</option>
                           <option value="DEPOSITO"> Ventas con depósito</option>
                           <option value="TARJETA"> Ventas con tarjeta de crédito</option>
                           <option value="OTROS"> Ventas otros</option>
                        </select>
                     </div>

                     <div class="form-group col-md-5">
                        <div class="form-group mb-3">
                           <label for="">DESCUENTO: </label>
                           <input type="number" name="descuentoglobal" id="descuentoglobal" value="0" step="any" class="form-control ml-2">
                        </div>
                     </div>
                     <div class="col-md-2 mt-md-4">
                        <a class="btn btn-primary btn-sm" style="color: white;" onclick="rec_nuevototal()"> <i class="fa fa-calculator" aria-hidden="true"></i> </a>
                     </div>

                     <div class="form-group col-12">
                        <label for="">Descripcion de Venta</label>
                        <textarea class="form-control" name="des_min" rows="2"></textarea>
                     </div>
                  </div>
               </div>

               <hr>
               <button type="submit" class="btn btn-primary">Registrar Venta</button>
            </form>

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

@section('scripts')

<script src="{{asset('plugins/slim-select/slimselect.min.js')}}"></script>
<script src="{{asset('plugins/decimal/decimal.min.js')}}"></script>
<script>
   new SlimSelect({
      select: '#medicamento'
   });
   new SlimSelect({
      select: '#idcliente'
   });
</script>



<script>
   var cliente = $('#idcliente');
   var total_venta = $('#total');
   var total_descuento = $('#total_descuento');
   var tabla = $('#tabla_venta');
   var btn_add = $('#add');
   var medicamento = $('#medicamento');
   var pventa = $('#pventa');
   var existenci = $('#existencia');
   var efectivo = $('#efectivo');
   var cambio = $('#cambio');
   var descuento = $('#descuento');
   var descArt = $('#descripArt');
   var descArtInter = $('#descripArtInter');
   var img = $('#img');
   var tventa = $('#tventa');
   var acum_descuento = 0;
   var total = 0;
   var cont = 0;
   var subtotal = Array;
   const formulario = document.querySelector('#formulario');

   medicamento.change(mostrarvalores);

   document.addEventListener('DOMContentLoaded', () => {
      document.querySelectorAll('input[type=text]').forEach(node => node.addEventListener('keypress', e => {
         if (e.keyCode == 13) {
            e.preventDefault();
         }
      }))
   });

   function buscar(numero) {
      event.preventDefault();
      limpiar();    

      let route = "{{ route('venta.findArticle') }}"
      if (formulario.value.length >= 3) {

         if (event.keyCode === 13) {
            // Cancel the default action, if needed

            $.ajax({
               type: "GET",
               url: route,
               data: {
                  codigo: formulario.value
               },
               dataType: "JSON",
               success: function(resp) {

                  $('#formulario').val('');

                  for (let i = 0; i < resp.length; i++) {
                     if (resp[i].stock > 0 && resp[i].deleted_at == null) {
                        $('#medicamento').prepend(`<option value="${resp[i].id}__${resp[i].stock}__${resp[i].p_venta}__${resp[i].id}__${resp[i].descripcion}__${resp[i].descripcion_interna}__${resp[i].img}__${resp[i].catNom}" >${resp[i].nombre} / ${resp[i].descripcion} / ${resp[i].code} </option>`);
                     }
                  }


                  if (resp.length == 0) {
                     $('#medicamento').prepend(`<option value="" > SIN DATOS </option>`);
                     formulario.value = null;
                  }


               },

            });
         }

      }

      

   }

   formulario.addEventListener('keyup', buscar)

   function mostrarvalores() {
      datosmerdicamento = document.getElementById('medicamento').value.split('__');
      existenci.val(datosmerdicamento[1]);
      pventa.val(datosmerdicamento[2]);
      descArt.val(datosmerdicamento[3]);
      descArtInter.val('DESCRIPCION INTERNA \n ' + datosmerdicamento[4]);
      $("#img").attr("src", datosmerdicamento[5]);
      tventa.val(datosmerdicamento[6]);
   }

   function limpiar() {
      var medicamento = $('#medicamento').val('');
      let pventa = $('#pventa').val('');
      let existenci = $('#existencia').val('');
      let cantidad = $('#cantidad').val('1');
      var descuento = $('#descuento').val('');
      var tventa = $('#tventa').val('');
      img = '';
      medicamento.focus();

      $('#medicamento').empty();
      $('#medicamento').prepend(`<option value="" >SELECCIONE ARTICULO </option>`);

   }

   btn_add.click(function() {
      agregar();
   })

   function agregar() {
      datosmerdicamento = document.getElementById('medicamento').value.split('_');
      var idmedicamento = datosmerdicamento[0];
      let pventa = parseFloat($('#pventa').val());
      let existenci = $('#existencia').val();
      let cantidad = parseFloat($('#cantidad').val());
      let medicamento = $('#medicamento option:selected').text();
      var descuento = $('#descuento').val();
      var newdescuento = 0;


      if (descuento > 0) {
         newdescuento = ((pventa * cantidad) * descuento) / 100;
      }

      if (idmedicamento != "" && pventa != "" && existenci != "" && cantidad != "") {
         if (cantidad <= existenci) {
            subtotal[cont] = (cantidad * pventa) - newdescuento;
            total = total + subtotal[cont];
            var fila = '<tr class="selected" id="fila' + cont + '">' +
               '<td><a href="#" class="btn btn-danger btn-sm" onclick="eliminar_fila(' + cont + ')">X</a></td>' +
               '<td><input type="hidden" name="idArticulos[]" value="' + idmedicamento + '">' + medicamento + '</td>' +

               '<td><input type="number" class="form-control"  name="cantidad[]" value="' + cantidad.toFixed(2) + '" readonly ></td> ' +
               '<td><input type="number" class="form-control"  name="pventa[]" value="' + pventa.toFixed(2) + '" readonly></td> ' +
               '<td class="d-none"><input type="number" class="form-control"  name="descuento[]" value="' + newdescuento.toFixed(2) + '" readonly ></td> ' +
               '<td> <input type="hidden" name="subtotal[]" value="' + subtotal[cont] + '">' + subtotal[cont].toFixed(2) + '</td>' +
               '</tr>';
            cont++;
            limpiar();
            acum_descuento += newdescuento;
            total_venta.html('<input type="number" id="totvent" name="totalventa" class="form-control" value="' + total.toFixed(2) + '" readonly >');
            total_descuento.html(
               '<input type="number" id="totvent" name="total_descuento" class="form-control" value="' + acum_descuento.toFixed(2) + '" readonly >'
            )
            tabla.append(fila);


         } else {
            alert('LA CANTIDAD A VENDER SUERA LA EXISTENCIA');
         }

      } else {
         alert('TODOS LOS CAMPOS DEBEN DE ESTAR LLENOS');
      }
   }

   function eliminar_fila(index) {
      total = total - subtotal[index];

      total_venta.html('<input type="number" name="totalventa" class="form-control" value="' + total.toFixed(2) + '" readonly >');
      $('#fila' + index).remove();
   }

   function cambiofun() {
      var totVent = $('#totvent').val();
      var cambio = parseFloat(efectivo.val()) - parseFloat(totVent);
      $('#cambio').val(cambio);
   }


   function rec_nuevototal() {


      if (parseFloat(descuentoglobal.value) > 0) {

         let new_val = parseFloat(descuentoglobal.value) + acum_descuento;

         // console.log(new_val.toFixed(2) );

         total = total - parseFloat(descuentoglobal.value);
         total_venta.html('<input type="number" id="totvent" name="totalventa" class="form-control" value="' + total.toFixed(2) + '" readonly >');

         total_descuento.html(
            '<input type="number" id="total_descuento" name="total_descuento" class="form-control" value="' + new_val.toFixed(2) + '" readonly >'
         )
      }

   }
</script>


@endsection