@extends('adminlte::page')
@section('content_header')
<h1>Agendar</h1>
@stop

@section('content')

@if(session()->has('success'))
<div class="alert alert-success" role="alert">
  {{session()->get('success')}}
  </div>
@endif

@if(session()->has('danger'))
<div class="alert alert-danger" role="alert">
  {{session()->get('danger')}}
  </div>
@endif

<form class="form-horizontal"  id="frmEmpresa" action="{{route("ventas.store")}}" method="POST">

    <x-adminlte-card title="INFORMACION DEL CLIENTE" theme="lightblue" theme-mode="outline" icon="fas fa-lg fa-envelope" header-class="text-uppercase rounded-bottom border-info">

        <div class="form-group row">
            <label for="inputEmail3" class="col-sm-3 col-form-label">CLIENTE</label>
            <div class="col-sm-9">
                <select name="venta_cliente_id" id="venta_cliente_id" class="form-control @error('venta_cliente_id') is-invalid @enderror" onchange="getDireccionCliente(this.value)">
                    <option value="">Seleccionar...</option>
                @foreach ($clientes as $cliente)
                    <option value="{{$cliente->cliente_id}}">{{$cliente->cliente_nombre}}</option>
                @endforeach
                </select>
            </div>
            @error('venta_cliente_id')
            <span class="invalid-feedback" role="alert">
              <strong>{{ $message }}</strong>
          </span>
            @enderror
        </div>

        <div class="form-group row">
            <label for="inputEmail3" class="col-sm-3 col-form-label">DIRECCIÓN</label>
            <div class="col-sm-9">
                <input type="tet" class="form-control" id="venta_direccion" name="venta_direccion" readonly>
            </div>
            @error('venta_direccion')
            <span class="invalid-feedback" role="alert">
              <strong>{{ $message }}</strong>
          </span>
            @enderror
        </div>

    </x-adminlte-card>


    <x-adminlte-card title="DETALLE" theme="dark" theme-mode="outline" icon="fas fa-lg fa-envelope" header-class="text-uppercase rounded-bottom border-info">
        <div class="card-body">
    
            <table class="table table-bordered tbl33" id="tbl33">
                <thead>
                <tr class="item-row">
                    <th>Producto</th>
                    <th>Valor Unitario</th>
                    <th>Cantidad</th>
                    <th>Subtotal</th>

                </tr>

                </thead>

                <tbody id="alertas"></tbody>

                <tr>
                    <td colspan="7">
                        <button type="button" id="anhadirDestino" class="btn btn-success btn-sm"><i class="fa fa-plus"></i></button>
                        <button type="button" id="eliminaDestino" class="btn btn-danger btn-sm"><i class="fa fa-minus"></i></button>
                    </td>
                </tr>

            </table>

        </div>


        <x-slot name="footerSlot">
            <x-adminlte-button label="Guardar" theme="success" icon="fas fa-key" type="submit"/>
          </x-slot>
          
    </x-adminlte-card>
    @csrf
</form>

@stop

@section('js')
<script type="text/javascript">

$("#anhadirDestino").click(function(){
    let productos = jQuery.parseJSON('');
    let productos_options = '<option value="">Seleccionar...</option>';
    $.each(productos,function(i,v){
        productos_options+='<option value="'+v.producto_id+'">'+v.producto_glosa+' - '+v.tipo_cliente_glosa+'</option>';
    });

        let offset = 1;
        let rowCount = $("#alertas > tr").length + offset;
        let id = "<tr><td><select name='producto_item["+rowCount+"]' id='producto_item_"+rowCount+"' class='form-control' required='true' onchange='getValorProducto(this.value,"+rowCount+")'>"+productos_options+"</select></td><td><input type='text' name='producto_unitario["+rowCount+"]' id='producto_unitario_"+rowCount+"' class='form-control' onchange='checkCantidad("+rowCount+")'/></td><td><input type='number' min='1' name='producto_cantidad["+rowCount+"]' id='producto_cantidad_"+rowCount+"' class='form-control' required value='0' onchange='checkCantidad("+rowCount+")'></td><td><input type='number' min='0' max='100' onchange='checkDescuento(this.value,"+rowCount+")' name='producto_subtotal["+rowCount+"]' id='producto_subtotal_"+rowCount+"' class='desc form-control' required value='0' readonly></td></tr>";
        $("#alertas").append(id);
        $("#totalElementos").val(rowCount);
    });

    $("#eliminaDestino").click(function(){
    let totalDestinos = $("#alertas > tr").length;
    $("#totalElementos").val(totalDestinos);
    if(totalDestinos > 1)
    {
      $('#alertas > tr').last().remove();
    }
    totalDestinos = $("#alertas > tr").length;
    $("#totalElementos").val(totalDestinos);
  });
  
  function getValorProducto(input,rowCount)
  {
    let _token = $("input[name='_token']").val();
    let data = ({_token:_token,producto_id:input});
    $.ajax({
        type:'POST',
        data:data,
        url:'{{route('productos.getValorUnitario')}}',
        dataType:'JSON',
        beforeSend : function()
        {

        },
        success : function (response)
        {
            $("#producto_unitario_"+rowCount).val(response[0].producto_valor);
        },
        complete : function ()
        {

        }
    })
  }
function getValorUnitario(producto_id)
{
    let _token = $("input[name='_token']").val();
    let data = ({_token:_token,producto_id:producto_id});
    $.ajax({
        type:'POST',
        data:data,
        url:'{{route('productos.getValorUnitario')}}',
        dataType:'JSON',
        beforeSend : function()
        {

        },
        success : function (response)
        {
            $("#venta_valor").val(response[0].producto_valor);
        },
        complete : function ()
        {

        }
    })
}

function checkCantidad(id) {
		$("#producto_cantidad_" + id).val($.trim(parseInt($("#producto_cantidad_" + id).val())));
        $("#producto_unitario_" + id).val($.trim(parseInt($("#producto_unitario_" + id).val())));
		var totalElementos = parseInt($("#totalElementos").val());
		var subtotal = 0;

		subtotal = parseInt($("#producto_unitario_" + id).val()) * parseInt($("#producto_cantidad_" + id).val());
		$("#producto_subtotal_" + id).val(subtotal);
	}


function getDireccionCliente(cliente_id)
{
    let _token = $("input[name='_token']").val();
    let data = ({_token:_token,cliente_id:cliente_id});

    $.ajax({
        type:'POST',
        url:'{{route('clientes.getDireccionCliente')}}',
        data:data,
        dataType:'JSON',
        beforeSend : function()
        {

        },
        success : function(response)
        {
            $("#venta_direccion").val(response.cliente_direccion);
        },
        complete : function()
        {

        }
    })
}
</script>
@stop