@extends('layouts.app')

@section('content')

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700" rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="/css/select2.min.css" rel="stylesheet">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<script src="/js/select2.min.js"></script>

@if ($message = Session::get('success'))
    <div class="alert alert-success" role="alert">
        <p class="mb-0">{{ $message }}</p>
    </div>
@endif


<!-- Dynamic Table Full -->
<div class="block block-rounded block-bordered panel-ticket-create">
    <div class="block-header block-header-default">
        <h3 class="block-title">Nuevo Ticket</h3>
    </div>

    <div class="block-content block-content-full">
      {!! Form::open(['url' => '', 'method' => 'POST', 'id' => 'formCreateTicket']) !!}
      @csrf
      <div class="row">

         <div class="col-md-12">
            <small>Datos Generales</small>
            <hr>
         </div>

         <div class="col-md-4">
            <div class="form-group row">
               {{ Form::label('fecha', null, ['class' => 'col-form-label col-md-3']) }}
               <div class="col-md-9">
                  {{ Form::text('fecha', $fecha, ['class' => 'form-control', 'readonly', 'id' => 'ticketFecha']) }}
               </div>
            </div>

            <div class="form-group row">
               {{ Form::label('referencia', null, ['class' => 'col-form-label col-md-3']) }}
               <div class="col-md-9">
                  {{ Form::text('referencia', null, ['class' => 'form-control', 'id' => 'ticketReferencia', 'required']) }}
               </div>
            </div>
         </div>

         <div class="col-md-4">
            <div class="form-group row">
               {!! Form::label('moneda', null, ['class' => 'col-form-label col-md-5']) !!}
               <div class="col-md-5">
                  {!! Form::text('moneda', 'MXN', ['class' => 'form-control', 'required', 'id' => 'ticketMoneda']) !!}
               </div>
            </div>

            <div class="form-group row">
               {!! Form::label('tipo_cambio', null, ['class' => 'col-form-label col-md-5']) !!}
               <div class="col-md-5">
                  {!! Form::text('tipo_cambio', 1, ['class' => 'form-control', 'id' => 'ticketTipoCambio']) !!}
               </div>
            </div>
         </div>

         <div class="col-md-4">
            <div class="form-group row">
               {{ Form::label('sucursal', null, ['class' => 'col-form-label col-md-3']) }}
               <div class="col-md-9">
                  {!! Form::select("sucursal", $sucursales, $sucursalDefaultId, ['class' => 'form-control', 'required', 'id' => 'selectSucursal']) !!}
               </div>
            </div>
         </div>

      </div>

      <div class="row">

         <div class="col-md-12">
            <small>Articulos</small>
            <hr>
         </div>

         <div class="col md-3">
            <button type="button" class="btn btn-success btn-sm" id="addRow"><i class="fa fa-plus"></i> Agregar Producto</button>
         </div>

      </div>

      <div class="row mt-4">

         <div class="col-md-12 push">
            <div id="acc_conceptos" role="tablist" aria-multiselectable="true">
            </div>
         </div>

      </div>

      <div class="row mt-4">
         <div class="col-md-3 ml-auto">
            <table class="table">
               <tr>
                  <td>Subtotal</td>
                  <td id="tdSubtotal" class="text-right">0.00</td>
               </tr>
               <tr id="trTraslados">
                  <td>Traslados</td>
                  <td id="tdTraslados" class="text-right">0.00</td>
               </tr>
               <tr id="trRetenciones">
                  <td>Retenciones</td>
                  <td id="tdRetenciones" class="text-right">0.00</td>
               </tr>
               <tr>
                  <td>Total</td>
                  <td id="tdTotal" class="text-right">0.00</td>
               </tr>
            </table>
         </div>
      </div>

      <div class="row mt-4">

         <div class="col md-3">
            <button type="submit" class="btn btn-primary btn-sm"><i class="fa fa-check"></i> Crear Ticket</button>
         </div>

      </div>

      <input type="hidden" name="subtotal" id="subtotal" value="0">
      <input type="hidden" name="total" id="total" value="0">
      <input type="hidden" name="descuento" id="descuento" value="0">

      {!! Form::close() !!}

    </div>
</div>

<!-- temporalmente aqui, despues moverlo a un archivo aparte y luego importarlo en el view -->
<script>

   var idRow = 0;
   var descuento = 0;
   var rows = [];
   var sucursalKey = '{!! $sucursalDefaultApiToken !!}';


   $(document).ready(function(){
      addRow();
      $("#trTraslados").hide();
      $("#trRetenciones").hide();
   });

   // evento submit del formulario
   $("#formCreateTicket").submit(function(event){

      event.preventDefault();
      calcular();
      if(validarTicket()){

         //peticion ajax
         $.ajax({
            type:"POST",
            url:"{!! env('APP_URL') !!}/api/ticket",
            headers:{
               'Content-Type':'application/x-www-form-urlencoded',
               'user':'{!! $apiToken !!}',
               'sucursal': `${sucursalKey}`
            },
            data: $("#formCreateTicket").serialize(),
            success: function (data){
               //console.log('DATA', data);
               window.location.replace("{!! env('APP_URL') !!}/ticket");

            },
            error: function (data){

               swal("Error...","Algo Salio Mal," + data.responseText,"error");

            }
         });

      }

   });

   // evento para agregar un row
   $("#addRow").click(function(){

      addRow();

   });

   $("#selectSucursal").change(function(){

      let elemento = $(this);
      let sucursalId = elemento.val();

      $.ajax({
         type:"GET",
         url: `{!! env('APP_URL') !!}/sucursal/getsucursalkey/${sucursalId}`,
         success: function (data){

            sucursal = data;

         },
         error: function (data){

            swal("Error...","Algo Salio Mal, Intentalo de nuevo","error");

         }
      });

   });

   // ---------------------


   /* funcion para validar el ticket */
   function validarTicket()
   {
      // Referencia del Ticket
      if($("#ticketReferencia").val() == ''){

         aswal("Advertencia","Referencia requerida","warning");
         return false;

      }

      // si la moneda es diferente a MXN se requiere tipo de Cambio
      if($("#ticketMoneda").val() != 'MXN'){

         if($("#ticketTipoCambio").val() == ''){

            swal("Advertencia","Si la Moneda es diferente de MXN debes especificar un Tipo de Cambio","warning");
            return false;

         }

      }

      let totales = getTotales();
      if(totales.subtotal <= 0){

         swal("Advertencia","El Subtotal del Ticket debe ser mayor a cero.","warning")
         return false;

      }

      return true;
   }

   // funcion para agregar un nuevo row de producto
   function addRow(){

      let row = {
         impuestos:0
      }
      rows.push(row);

      var text = `
         <div class="block block-rounded mb-1" id="row${idRow}">
            <div class="block-header block-header-default" role="tab" id="acc_conceptos_h${idRow}">
               <div class="form-group mt-3">
                  <div class="input-group">
                     <div class="input-group-prepend">
                        <span class="input-group-text">
                           Descripcion
                        </span>
                     </div>
                     <input type="text" class="form-control" id="" name="conceptos[${idRow}][descripcion]">
                  </div>
               </div>
               <div>
                  <a class="font-w600" data-toggle="collapse" data-parent="#acc_conceptos" href="#acc_conceptos_q${idRow}" aria-expanded="true" aria-controls="acc_conceptos_q${idRow}">Detalles</a>
                  <button type="button" class="btn btn-danger btn-custom-xs ml-4" onClick="deleteRow(${idRow}, 'row')"><i class="fa fa-times"></i></button>
               </div>
            </div>
            <div id="acc_conceptos_q${idRow}" class="collapse show" role="tabpanel" aria-labelledby="acc_conceptos_h${idRow}">
               <div class="block-content">
                  <div class="form-group row">
                     <div class="col-md-2 text-center">
			            <label for="clavProd${idRow}" class="control-label">Clave Producto</label>
			            <select name="conceptos[${idRow}][clave_prodserv]" class="form-control" id="clavProd${idRow}"></select>
                     </div>
                     <div class="col-md-2 text-center">
                        <label for="">No. Identificacion</label>
                        <input type="text" class="form-control" name="conceptos[${idRow}][no_identificacion]">
                     </div>
                     <div class="col-md-2 text-center">
			            <label for="ClaveUnidad${idRow}" class="control-label">Clave Unidad</label>
			            <select name="conceptos[${idRow}][clave_unidad]" class="form-control" id="ClaveUnidad${idRow}"></select>
                     </div>
                     <div class="col-md-2 text-center">
                        <label for="">Cantidad</label>
                        <input type="text" class="form-control" name="conceptos[${idRow}][cantidad]" id="cnt${idRow}" onBlur="calcular()">
                     </div>
                     <div class="col-md-2 text-center">
                        <label for="">Unidad de Medida</label>
                        <input type="text" class="form-control" name="conceptos[${idRow}][unidad]">
                     </div>
                     <div class="col-md-2 text-center">
                        <label for="">Precio Unitario</label>
                        <input type="text" class="form-control valorUnitario" name="conceptos[${idRow}][valor_unitario]" id="${idRow}" onBlur="calcular()">
                     </div>
                  </div>
                  <div class="col-md-12">
                     <small>Impuestos del Producto</small>
                     <hr>
                  </div>
                  <div>
                     <button type="button" class="btn btn-success btn-sm btn-custom-xs mb-4" onClick="addImpuestosRow(${idRow})"><i class="fa fa-plus"></i> Agregar Impuesto</button>
                  </div>
                  <div id="impuestos${idRow}">
                  </div>
               </div>
            </div>
         </div>
      `;

      // agregamos el nuevo row
	  $("#acc_conceptos").append(text);
		$('#clavProd'+idRow).select2({
			ajax: {
				dataType: 'json',
				url: '{{ route("ticket.create.autocomplete_CatClaveProdServ") }}',
				delay: 250,
				data: function(params) {
				    return {
				        term: params.term
				    }
				},
				processResults: function (data, page) {
				  return {
				    results: data
				  };
				},
			}
		});
		$('#ClaveUnidad'+idRow).select2({
			ajax: {
				dataType: 'json',
				url: '{{ route("ticket.create.autocomplete_CatClaveUnidades") }}',
				delay: 250,
				data: function(params) {
				    return {
				        term: params.term
				    }
				},
				processResults: function (data, page) {
				  return {
				    results: data
				  };
				},
			}
		});
      idRow++;
   }
   function addImpuestosRow(row){

      var text = `
      <div class="form-group row impuestos${row}" id="impuesto${rows[row].impuestos}" i="${rows[row].impuestos}">
         <div class="col-md-2 text-center">
            <label for="">Clave</label>
            <select class="form-control" name="conceptos[${row}][impuestos][${rows[row].impuestos}][clave]">
               <option value="002">002 - I.V.A.</option>
               <option value="001">001 - I.S.R.</option>
               <option value="003">003 - I.E.P.S.</option>
            </select>
         </div>
         <div class="col-md-2 text-center">
            <label for="">Tipo</label>
            <select class="form-control" id="impuestoTipo${rows[row].impuestos}" name="conceptos[${row}][impuestos][${rows[row].impuestos}][tipo]">
               <option value="traslado">Traslado</option>
               <option value="retencion">Retencion</option>
            </select>
         </div>
         <div class="col-md-2 text-center">
            <label for="">Tasa</label>
            <input type="text" class="form-control" id="impuestoTasa${rows[row].impuestos}" name="conceptos[${row}][impuestos][${rows[row].impuestos}][tasa]" onBlur="calcular()">
         </div>
         <div class="col-md-1 pt-4">
            <button type="button" class="btn btn-danger btn-custom-xs ml-4" onClick="deleteRow(${rows[row].impuestos}, 'impuesto')"><i class="fa fa-times"></i></button>
         </div>
      </div>
      `;

      // agregamos la linea en los impuestos del producto
      $(`#impuestos${row}`).append(text);
      // aumentamos el contador de rows de impuestos
      rows[row].impuestos++;

   }

   // funcion para calcular el total del ticket
   function calcular(){

      let { subtotal, total, retenciones, traslados } = getTotales();

      // mostramos el valores en el view
      $("#tdSubtotal").html(subtotal.toFixed(2));
      $("#tdTotal").html(total.toFixed(2));
      $("#tdTraslados").html(traslados.toFixed(2));
      $("#tdRetenciones").html(retenciones.toFixed(2));

      if(traslados){
         $("#trTraslados").show();
      }else{
         $("#trTraslados").hide();
      }

      if(retenciones){
         $("#trRetenciones").show();
      }else{
         $("#trRetenciones").hide();
      }


      // guardamos el subtotal en el input hidden del subtotal
      $("#subtotal").val(subtotal);
      $("#total").val(total);
   }

   function getTotales(){

      let elementos = $(".valorUnitario");
      let subtotal = 0;
      let traslados = 0;
      let retenciones = 0;
      let total = 0;

      $.each(elementos, function(key, val){

         let valor = parseFloat(val.value);
         // validamos que el valor del input sea un numero
         if(!isNaN(valor)){
            //obtenemos el numero del row
            let row = val.id;
            // id del input para buscar la cantidad y multiplicarlo por su valor
            let cantidad = $(`#cnt${row}`).val();
            // validamos el valor del input cantidad que sea un numero
            cantidad = parseFloat(cantidad);
            if(!isNaN(cantidad)){

               subtotal += (valor*cantidad);

               //calcumamos los impuestos
               let impuestos = $(`.impuestos${row}`);

               impuestos.each(function(key, val){

                  let elemento = $(val);
                  let numImpuesto = elemento.attr("i");

                  let tasa = $(`#impuestoTasa${numImpuesto}`).val();
                  let tipo = $(`#impuestoTipo${numImpuesto}`).val();
                  let base = (valor*cantidad);
                  let valorImpuesto = base * tasa;

                  if(tipo == "retencion"){

                     retenciones += valorImpuesto;

                  }else if(tipo == "traslado"){

                     traslados += valorImpuesto;
                  }


               });

            }
         }
      });

      total = subtotal + traslados - retenciones;


      return {subtotal, traslados, retenciones, total};

   }

   // funcion para eliminar un row
   function deleteRow(row, idName){
      $(`#${idName}${row}`).remove();
      calcular();
   }



</script>

@endsection