@extends('layouts.app', ['activePage' => 'clientes'])

@section('content')
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.3.3/css/select.dataTables.min.css">
<style>
  .dataTables_scrollHeadInner {
    width: 100% !important;
  }

  .dataTables_scrollHeadInner table {
    width: 100% !important;
  }
</style>
<div class="content">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <div class="card">
          <div class="card-header">
            <h4 class="card-title text-center ">Captura de Pagos</h4>
          </div>
          <div class="card-body">
            <div class="row">
              <div class="col-md-4">
                <div class="input-group input-group-static mb-4 ">
                  <label for="">Cliente <span class="text-danger">*</span></label>
                  <input type="text" class="form-control" id="cliente">
                  <input type="hidden" class="form-control" id="cuenta_cliente">
                  <input type="hidden" class="form-control" id="id_cliente">
                  <input type="hidden" class="form-control" id="nombre_cliente">
                </div>
              </div>
              <div class="col-md-2">
                </br>
                <button class="tn btn-primary form-control" onclick="getClienteInfo()">Buscar</button>
              </div>
              <div class="row col-md-6 text-center justify-content-center mt-3">
                <div class="col-md-4">
                  <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                    Monto total
                  </div>
                  <div class="h5 mb-0 font-weight-bold text-gray-800" id="labelMontoT">$0.0</div>
                </div>
                <div class="col-md-4">
                  <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                    Saldo pendiente
                  </div>
                  <div class="h5 mb-0 font-weight-bold text-gray-800" id="labelMontoS">$0.0</div>
                </div>
                <div class="col-md-4">
                  <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                    Total pagado
                  </div>
                  <div class="h5 mb-0 font-weight-bold text-gray-800" id="labelMontoA">$0.0</div>
                </div>
              </div>
            </div>
            <div class="row justify-content-end">

              <div class="col-md-2 text-end m-0" id="btnaf" style="display:none;">
                <button class="btn btn-warning" onclick="nuevoPago();">Generar pago</button>
              </div>
            </div>
            <div class="row">
              <table class="table table-bordered table-hover" id="gridDocumentos">
                <thead>
                  <tr>
                    <th class="text-white text-xxs font-weight-bolder opacity-7">Serie y folio</th>
                    <th class="text-white text-xxs font-weight-bolder opacity-7">Plazo</th>
                    <th class="text-white text-xxs font-weight-bolder opacity-7">Fecha vencimiento</th>
                    <th class="text-white text-xxs font-weight-bolder opacity-7">Importe</th>
                    <th class="text-white text-xxs font-weight-bolder opacity-7">Saldo</th>
                    <th class="text-white text-xxs font-weight-bolder opacity-7">Estatus</th>
                    <th width="5%"><input class="checkAll" type="checkbox" id="checkAll" onclick="selectAll();" disabled></th>
                  </tr>
                </thead>
                <tbody>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


<div class="modal fade" id="modalPagos">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title font-weight-normal"> Generar pago</h5>
      </div>
      <div class="modal-body">
        <div class="row text-center justify-content-center">
          <div class="col-md-4">
            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
              Total abonado
            </div>
            <div class="h5 mb-0 font-weight-bold text-gray-800" id="labelMontoAP"></div>
          </div>
          <div class="col-md-4">
            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
              Monto pendiente
            </div>
            <div class="h5 mb-0 font-weight-bold text-gray-800" id="labelMontoSP"></div>
          </div>
          <div class="col-md-4">
            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
              Monto total
            </div>
            <div class="h5 mb-0 font-weight-bold text-gray-800" id="labelMontoTP"></div>
          </div>
        </div>
        <hr>
        <div class="row">
          <div class="col-md-4 ">
            <div class="input-group input-group-static">
              <label for="">Fecha de pago <span class="text-danger">*</span></label>
              <input type="text" class="form-control datepicker" placeholder="2000-10-10" id="fechahora">
            </div>
          </div>
          <div class="col-4">
            <div class="input-group input-group-static mb-4">
              <label>Forma de Pago <span class="text-danger">*</span></label>
              <select class="form-control" id="forma_pago">
                <option disabled selected value="0">-[Selecciona una opción]-</option>
                @foreach ($data['formas_pago'] as $fp)
                <option value="{{ $fp->id }}">{{ $fp->nombre }}({{ $fp->claveSat }})</option>
                @endforeach
              </select>
            </div>
          </div>
          <!-- <div class="col-4">
              <div class="input-group input-group-static mb-4">
                <label>Chequera <span class="text-danger">*</span></label>
                <select class="form-control" id="chequera">
                  <option disabled selected value="0">-[Selecciona una opción]-</option>
                  @foreach ($data['chequeras'] as $fp)
                  <option value="{{ $fp->Id }}">{{ $fp->descripcion }}({{ $fp->cuenta_bancaria }})</option>
                  @endforeach
                </select>
              </div>
            </div> -->
        </div>
        <div class="row">
          <table class="table table-bordered table-hover">
            <thead>
              <tr>
                <th class="text-white text-xxs font-weight-bolder opacity-7">Serie </th>
                <th class="text-white text-xxs font-weight-bolder opacity-7">Folio</th>
                <th class="text-white text-xxs font-weight-bolder opacity-7">Importe</th>
                <th class="text-white text-xxs font-weight-bolder opacity-7">Saldo</th>
                <th class="text-white text-xxs font-weight-bolder opacity-7">Cantidad a abonar</th>
              </tr>
            </thead>
            <tbody id="bodyDocumentos">
            </tbody>
          </table>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
        <button class="btn btn-primary btnSavePago" id="btnGenerar" onclick="savePago();">Generar</button>
        <button class="btn btn-primary btnSavePago" id="btnGenerar" onclick="savePago(1);">Generar y Timbrar</button>
        <button class="btn btn-primary" id="btnGenerar" onclick="modalRelacionados();">Generar y Timbrar con Relacionados</button>

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

<div class="modal fade" id="modalDetallesPagos">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title font-weight-normal" id="titleDetallesPagos"></h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
        </button>
      </div>
      <div class="modal-body">
        <div class="row  justify-content-between">
          <div class="col-md-8">
            <div class="h6 mb-0 font-weight-bold text-gray-800" id="labelNombreCliente"></div>
          </div>
          <div class="col-md-2">
          </div>
          <div class="col-md-2 text-center">
            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
              Total del pago
            </div>
            <div class="h5 mb-0 font-weight-bold text-gray-800" id="labelTotalAbonadoDetalles"></div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12 table-responsive">
            <table class="table table-bordered table-hover" id="gridDetallesPagos">
              <thead>
                <tr>
                  <th class="text-white text-xxs font-weight-bolder opacity-7">ID</th>
                  <th class="text-white text-xxs font-weight-bolder opacity-7">Documento</th>
                  <th class="text-white text-xxs font-weight-bolder opacity-7">Importe</th>
                  <th class="text-white text-xxs font-weight-bolder opacity-7">Fecha de pago</th>
                </tr>
              </thead>
              <tbody>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
      </div>
    </div>
  </div>
</div>

    <div id='modalComprobanteFact' class="modal fade modalEsc" tabindex="-1" role="dialog" data-backdrop="static">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Pago</h4>
                    <input type="hidden" id="idDocComprobante">
                </div>
                <div class="modal-body">
                    <div class="row rTouch">
                        <div class="col-md-12">
                            <iframe id="frameComprobanteFact" src="" frameborder="0" style="float:left;height:300px;width:100%;"></iframe>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                        <div class="col-4">
                            <div class="input-group input-group-static mb-4">
                              <label>Correo Cliente</label>
                              <!--<input type="text" class="form-control" id="emailClienteM">-->
                              <select id="emailClienteM" class="form-control" id="" multiple="">
                              </select>
                            </div>
                        </div>
                        <div class="col-1 justify-content-center" >
                            <button class="btn btn-primary" onclick="addCorreoCliente();">+</button>
                        </div>
                        <div class="col-3 justify-content-center" >
                            <button class="btn btn-primary btn-block" onclick="enviarFactura();"> Enviar</button>
                        </div>
                        <div class="col-3">
                            <button class="btn btn-warning btn-block" data-dismiss="modal" onclick="javascript:$('#modalComprobanteFact').modal('hide')">Cerrar</button>
                        </div>
                </div>
            </div>
        </div>
    </div>

<div class="modal fade modalEsc" id="modalCargando" tabindex="-1" role="dialog" data-backdrop="static">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        
        <h4 class="modal-title">Cargando...</h4>
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      </div>
      <div class="modal-body">
            <div class="py-3 text-center">
              <div class="spinner-border" role="status">
  <span class="sr-only">Loading...</span>
</div>
              
             
            </div>
      </div>
      <!--<div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>-->
    </div>
  </div>
</div>

<div class="modal fade" id="modalRelacionados">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        
        <h4 class="modal-title">Relacionar Y Timbrar</h4>
        <button type="button" class="close" data-bs-dismiss="modal" aria-hidden="true">&times;</button>
      </div>
      <div class="modal-body">
          <div class="row">
              <div class="col-md-4">
                  <div class="input-group input-group-static mb-4">
                      <label>Tipo relacion</label>
                      <select id="tiporelacionRel" class="form-control" onchange="muestraTableRel();">
                          <option value="0">-Selecciones-</option>
                          @foreach ($data['relaciones'] as $mp)
                            @if($mp->c_tiporelacion=='04')
                              <option value="{{ $mp->c_tiporelacion }}" selected>{{ $mp->descripcion }}({{ $mp->c_tiporelacion }})</option>
                            @else
                              <option value="{{ $mp->c_tiporelacion }}">{{ $mp->descripcion }}({{ $mp->c_tiporelacion }})</option>
                            @endif
                          @endforeach
                      </select>
                  </div>
              </div>
              <div class="col-md-6 relacionFuncion" style="display: none;">
                  <div class="row">
                      <div class="col-6">
                          <div class="input-group input-group-static mb-4">
                              <label>Serie</label>
                              <input type="text" class="form-control" id="serieRel">
                          </div>
                      </div>
                      <div class="col-6">
                          <div class="input-group input-group-static mb-4">
                              <label>Folio</label>
                              <input type="text" class="form-control" id="folioRel">
                          </div>
                      </div>
                  </div>
              </div>
              <div class="col-md-2 d-flex align-items-center justify-content-center relacionFuncion" style="display: none;">
                  <div class="input-group input-group-static mb-4 relacionFuncion" style="display: none;">
                      <button class="btn btn-primary btn-sm relacionFuncion" onclick="agregaFactura();" style="display: none;">
                          <span class="material-icons">
                              add
                          </span>
                      </button>
                  </div>
              </div>    
          </div>
          <div class="row relacionFuncion" style="display: none;">
              <div class="col-md-12 col-sm-12">
                  <div class="table-responsive">
                      <table class="table table-hover">
                          <thead>
                              <tr>
                                  <th>Serie Folio</th>
                                  <th>UUID</th>
                                  <th></th>
                              </tr>
                          </thead>
                          <tbody id="tbodyRelaFacturas">
                          </tbody>
                      </table>
                  </div>
              </div>
          </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-bs-dismiss="modal">Cerrar</button>
        <button type="button" class="btn btn-primary btnSavePago" onclick="savePago(1,1);">Timbrar</button>
      </div>
    </div>
  </div>
</div>


<div class="modal fade" id="modalNuevoEmail">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Nuevo Correo Cliente</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-12">
                        <div class="input-group input-group-static my-3">
                            <label>Correo</label>
                            <input type="text" class="form-control" id="correoNuevo">
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-primary" onclick="guardaCorreoCliente();">Guardar</button>
            </div>
        </div>
    </div>
</div>


<link rel="stylesheet" href="{{asset('vendor/jquery-ui/jquery-ui.min.css')}}">
<script src="{{asset('vendor/jquery-ui/jquery-ui.min.js')}}"></script>
<script src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js"></script>
<script>
  $(document).ready(function() {
    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
    });
    $('#modalPagos').modal({
      backdrop: 'static',
      keyboard: false
    })
    // loadGrid();
    $('#cliente').autocomplete({
      source: function(request, response) {
        if ($('#cliente').val().length >= 3) {
          $.ajax({
            url: "{{url('operaciones/cxc/get_cliente')}}",
            dataType: 'json',
            data: {
              term: request.term
            },
            success: function(data) {
              response(data)
            }
          });
        }
      }
    });
    $('#gridDocumentos').dataTable().fnDestroy();
    $('#gridDocumentos').DataTable({
      lengthMenu: [10, 15, 20, 50, 100],
      dom: 'Bfrtip',
      processing: true,
      responsive: true,
      scrollY: '50vh',
      scrollCollapse: true,
      buttons: [{
          extend: 'copyHtml5',
          text: '<i class="fa fa-files-o"></i>',
          titleAttr: 'Copiar'
        },
        {
          extend: 'excelHtml5',
          text: '<i class="fa fa-file-excel-o"></i>',
          titleAttr: 'Excel'
        },
        {
          extend: 'csvHtml5',
          text: '<i class="fa fa-file-text-o"></i>',
          titleAttr: 'CSV'
        },
        {
          extend: 'pdfHtml5',
          text: '<i class="fa fa-file-pdf-o"></i>',
          titleAttr: 'PDF'
        }
      ]
    })

    $(".datepicker").flatpickr({
      enableTime: false,
      dateFormat: "Y-m-d",
    });
  });

  function getClienteInfo() {
    if ($('#cliente').val() == '') {
      Swal.fire({
        type: 'error',
        title: 'Oops...',
        text: 'Debes ingresar el nombre del cliente a buscar',
        showConfirmButton: false,
        timer: 3000
      });
      return false;
    }
    $.ajax({
        url: "{{url('operaciones/cxc/get_clienteinfo')}}",
        type: 'POST',
        dataType: 'json',
        data: {
          cliente: $('#cliente').val(),
        },
      })
      .done(function(resp) {
        $('#id_cliente').val(resp.data['Id'])
        $('#cuenta_cliente').val(resp.data['Cuenta'])
        $('#nombre_cliente').val(resp.data['Nombre'])
         html = ''
            $('#emailClienteM').html(html)
            $.each(resp.correos, function(index, val) {
                html += '<option value="'+val.Correo+'">'+val.Correo+'</option>'
            });
            $('#emailClienteM').append(html);
        loadGrid(resp.data['Cuenta'])
      })
      .fail(function() {
        console.log("error");
        Swal.fire({
          type: 'error',
          title: 'Oops...',
          text: 'No se han encontrado coincidencias con la lista de clientes',
          showConfirmButton: false,
          timer: 3000
        });
        $('#cliente').val('')
      })
      .always(function() {
        console.log("complete");
      });
  }

  function loadGrid() {
    $('#gridDocumentos').dataTable().fnDestroy();
    $('#gridDocumentos').DataTable({
      lengthMenu: [10, 15, 20, 50, 100],
      dom: 'Bfrtip',
      processing: true,
      responsive: true,
      scrollY: '50vh',
      scrollCollapse: true,
      ajax: {
        url: "{{url('operaciones/cxc/get_documentos')}}",
        type: "POST",
        data: {
          cliente: $('#id_cliente').val()
        },
        dataSrc: function(json) {
          //Make your callback here.
          $('#labelMontoT').html('$' + json.total)
          $('#labelMontoS').html('$' + json.pendiente)
          $('#labelMontoA').html('$' + json.abonado)
          $('#checkAll').prop('disabled', false)
          return json.data;
        }
      },
      columns: [{
          data: "seriefolio"
        },
        {
          data: "plazo"
        },
        {
          data: "FechaVencimiento"
        },
        {
          data: "importe"
        },
        {
          data: "saldo"
        },
        {
          data: "estatus"
        },
        {
          data: "select"
        },
      ],
      order: [
        [0, "desc"]
      ],
      buttons: [{
          extend: 'copyHtml5',
          text: '<i class="fa fa-files-o"></i>',
          titleAttr: 'Copiar'
        },
        {
          extend: 'excelHtml5',
          text: '<i class="fa fa-file-excel-o"></i>',
          titleAttr: 'Excel'
        },
        {
          extend: 'csvHtml5',
          text: '<i class="fa fa-file-text-o"></i>',
          titleAttr: 'CSV'
        },
        {
          extend: 'pdfHtml5',
          text: '<i class="fa fa-file-pdf-o"></i>',
          titleAttr: 'PDF'
        }
      ]
    });
  }

  function selectRow() {
    var checados = $("input:checked").length;

    var oTable = $('#gridDocumentos').dataTable();
    var allPages = oTable.fnGetNodes();
    var contador = 0;
    cadena = '';
    $('input:checked', allPages).each(function() {
      contador++;
    });

    if (contador >= 1) {
      $('#btnaf').show('slow');
    } else {
      $('#btnaf').hide('slow');
      $('#checkAll').show('slow');
      $('#checkAll').prop('checked', false);
    }

  }

  function selectAll() {
    if ($('#checkAll').is(':checked')) {
      $('.checkPro').prop('checked', true);
      $('#btnaf').show('slow');

    } else {
      $('.checkPro').prop('checked', false);
      $('#btnaf').hide('slow');

    }
  }

  function nuevoPago() {
    //alert('okeokdoekdoekdokeodkeodkeo');
    // $('#btnaf').hide('slow');
    var oTable = $('#gridDocumentos').dataTable();
    var allPages = oTable.fnGetNodes();
    cadena = '';
    $('input:checked', allPages).each(function() {
      cadena += $(this, allPages).val() + ',';
    });
    $.ajax({
        url: "{{url('operaciones/cxc/generar_pago')}}",
        type: 'POST',
        dataType: 'json',
        data: {
          ids: cadena,
        },
      })
      .done(function(resp) {
        setDataPago(resp.data, resp.calculos)
        limpiarModal()
      })
      .fail(function() {
        console.log("error");
      })
      .always(function() {
        console.log("complete");
      });
  }

  function setDataPago(data, calculos) {
    $('#labelMontoTP').html(calculos['total'])
    $('#labelMontoSP').html(calculos['saldo'])
    $('#labelMontoAP').html(calculos['abono'])
    $('#bodyDocumentos').empty();
    $.each(data, function(index, value) {
      var saldo = value['Saldo'] == null ? 0 : value['Saldo'];
      $('#bodyDocumentos').append(
        '<tr>' +
        '<td>' + value['Serie'] + '</td>' +
        '<td>' + value['Folio'] + '</td>' +
        '<td>$' + new Intl.NumberFormat("es-MX").format(parseFloat(value['ImporteConImpuestos']).toFixed(2)) + '</td>' +
        '<td>$' + new Intl.NumberFormat("es-MX").format(parseFloat(saldo).toFixed(2)) + '</td>' +
        '<td><input type="number" class="abono" step="any"   saldo_doc="' + saldo + '" id_doc="' + value['Id'] + '" id="abono_' + value['Id'] + '" value="' + saldo + '"></td>' +
        '</tr>'
      )
    })
    $('#modalPagos').modal('show');
  }

  function savePago(facturar=0,conrelacion=0) {
    $('#modalPagos').modal('hide')
    $('.btnSavePago').attr('disable',true)
    var Fecha = $('#fechahora').val();
    var FormaPago_id = $('#forma_pago option:selected').val();
    var Cuenta_id = $('#id_cliente').val();

    if (Fecha == '' || FormaPago_id == 0) {
          Swal.fire({
              type: 'error',
              title: 'Oops...',
              text: 'Debes ingresar toda la información obligatoria del pago.',
              showConfirmButton: false,
              timer: 3000
            });
        setTimeout(function() { 
            $('#modalPagos').modal('show')
            $('.btnSavePago').attr('disable',false)
          }, 2000);
      $('#modalPagos').modal('show')
      return false;
    }
    var docs_abonos = new Array();
    var cantidad_total = 0;
    var saldos_total = 0;
    $('.abono').each(function() {
      cantidad_total += parseFloat($(this).val());
      saldos_total += parseFloat($(this).attr('saldo_doc'));
      dat = {
        Documento_id: $(this).attr('id_doc'),
        Importe: $(this).val(),
        Saldo: $(this).attr('saldo_doc'),
      }
      docs_abonos.push(dat)
    });

    if (parseFloat(cantidad_total) > parseFloat(saldos_total)) {
            Swal.fire({
                type: 'error',
                title: 'Oops...',
                text: 'Abono mayor al saldo pendiente.',
                showConfirmButton: false,
                timer: 3000
              });
             $('#modalPagos').modal('show')
        setTimeout(function() { 
            $('#modalPagos').modal('show')
            $('.btnSavePago').attr('disable',false)
          }, 2000);
        $('#modalPagos').modal('show')

        return false;
    }
    if(facturar=='1'){
      $('#modalRelacionados').modal('hide')
    }
    $('#modalCargando').modal('show')
    $.ajax({
        url: "{{url('operaciones/cxc/save_pago')}}",
        type: 'POST',
        dataType: 'json',
        data: {
          Fecha: Fecha,
          FormaPago_id: FormaPago_id,
          Cuenta_id: Cuenta_id,
          documentos: docs_abonos,
          cantidad_total: cantidad_total,
        },
      })
      .done(function(resp) {
        if(resp.result > 0){
            if(facturar=='1'){
              if(conrelacion=='1'){
                var tiporelacionRel = $('#tiporelacionRel').val()
              }else{
                var tiporelacionRel = 0;
              }
              

              var relaciones = new Array()
              if(tiporelacionRel!='0'){
                  $(".relFacts").each(function() {
                      if($(this).attr('uuid')!=''){
                           relaciones.push($(this).attr('uuid'))
                      }
                  })
              }
              $.ajax({
                url: "{{url('operaciones/cxc/facturar_pago')}}",
                type: 'POST',
                dataType: 'json ',
                data: {id: resp.result,tiporelacionRel:tiporelacionRel,relaciones:relaciones},
              })
              .done(function(res) {
                console.log("success");
                  if(res.success==1){

                      guardarFacturaPago(res)
                      $('#modalCargando').modal('hide')
                      $('.btnSavePago').attr('disable',false)
                  }else{
                      
                      $('#modalCargando').modal('hide')
                       $('#modalPagos').modal('show')
                       Swal.fire({
                          title: res.error+' - '+res.mensaje,
                          type: 'error',
                          timer: 10000
                      })
                      $('.btnSavePago').attr('disable',false)
                     
                      return false;
                  }
              })
              .fail(function() {
                console.log("error");
              })
              .always(function() {
                console.log("complete");
              });
              
            }else{
              Swal.fire({
                type: 'success',
                title: '¡Bien!',
                text: resp.mensaje,
                showConfirmButton: false,
                timer: 2000
              });
              limpiarModal();
              $('.btnSavePago').attr('disable',false)
              $('#gridDocumentos').DataTable().ajax.reload();
              $('.checkPro').prop('checked', false);
              $('#btnaf').hide('slow');
              $('#modalPagos').modal('hide');
            }
        }


      })
      .fail(function() {
        $('#modalPagos').modal('show')
        Swal.fire({
          type: 'error',
          title: 'Oops...',
          text: 'Algo salio mal durante el proceso',
          showConfirmButton: false,
          timer: 3000
        });

      })
      .always(function() {
        console.log("complete");
      });

  }

  function setValueDoc(saldo, id) {
    let cantidad = $('#input_' + id).val();
    let seriefolio = $('#input_' + id).attr('seriefolio');
    if (saldo < cantidad) {
      Swal.fire({
        type: 'error',
        title: 'Oops...',
        text: 'La cantidad ingresada sobrepasa el saldo pendiente del documento "' + seriefolio + '"',
        showConfirmButton: false,
        timer: 3000
      });
      $('#btnGenerar').prop('disabled', true)
      return false;

    } else {
      $('#btnGenerar').prop('disabled', false)
    }
  }

  function detallesPagos(id) {
    $('#titleDetallesPagos').text('Detalles de pago - ' + id)
    $('#modalDetallesPagos').modal('show');
    $('#labelNombreCliente').html($('#nombre_cliente').val() + ' - ' + $('#cuenta_cliente').val())
    $('#labelTotalAbonadoDetalles').html('$0.00');

    loadDetallesPagos(id);
  }

  function loadDetallesPagos(id) {
    $('#gridDetallesPagos').dataTable().fnDestroy();
    $('#gridDetallesPagos').DataTable({
      processing: true,
      responsive: true,
      lengthMenu: [5, 10, 20],
      dom: 'Bfrtip',
      scrollY: '37vh',
      scrollCollapse: true,
      ajax: {
        url: "{{url('operaciones/cxc/get_detalles')}}",
        type: "POST",
        data: {
          id: id
        },
        dataSrc: function(json) {
          //Make your callback here.
          $('#labelTotalAbonadoDetalles').html('$' + json.abonado)
          return json.data;
        },
      },
      columns: [{
          data: "Id"
        },
        {
          data: "Documento_id"
        },
        {
          data: "importe"
        },
        {
          data: "created_at"
        },
      ],
      order: [
        [0, "desc"]
      ],
      buttons: [{
          extend: 'copyHtml5',
          text: '<i class="fa fa-files-o"></i>',
          titleAttr: 'Copiar'
        },
        {
          extend: 'excelHtml5',
          text: '<i class="fa fa-file-excel-o"></i>',
          titleAttr: 'Excel'
        },
        {
          extend: 'csvHtml5',
          text: '<i class="fa fa-file-text-o"></i>',
          titleAttr: 'CSV'
        },
        {
          extend: 'pdfHtml5',
          text: '<i class="fa fa-file-pdf-o"></i>',
          titleAttr: 'PDF'
        }
      ]
    });
  }

  function limpiarModal() {
    // $('#labelMontoAP').html('$0.00')
    // $('#labelMontoSP').html('$0.00')
    // $('#labelMontoTP').html('$0.00')
    $('.flatpickr-calendar').removeClass('open');
    $('#fechahora').val('')
    $('#forma_pago').val(0)
  }
  function guardarFacturaPago(respuesta){
    console.log(respuesta)
    $.ajax({
        url: '{{url('operaciones/cxc/guardar_factura_pago')}}',
        type: 'POST',
        dataType: 'json',
        data: {respuesta: respuesta},
    })
    .done(function(resp) {
        console.log("success");
        $('#emailClienteM').val('');
        if(resp.id > 0){
            $('#modalCargando').modal('hide')
            Swal.fire({
                title: 'Se guardo correctamente!',
                type: 'success',
                timer: 2000
            })
            $('#emailClienteM').val(resp.correo);
            $('#modalPagos').modal('hide')
            makePdf(respuesta.datos['xmlNameFile'],respuesta.datos['idVenta']);
        }
    })
    .fail(function() {
        console.log("error");
    })
    .always(function() {
        console.log("complete");
    });
    
  }
  function makePdf(nameXml,idventa,concoche=0){
 
    nameXml = nameXml+'.xml'
    $.ajax({
        url: '{{url('operaciones/cxc/pdf_pago')}}',
        type: 'POST',
        dataType: 'json',
        data: {nameXml: nameXml,idventa:idventa,concoche: concoche},
    })
    .done(function(resp) {
        console.log(resp);
        if(resp.estatus > 0){
            modalComprobanteFact(resp.urlPdf,idventa)
        }
    })
    .fail(function() {
        console.log("error");
    })
    .always(function() {
        console.log("complete");
    });
    
  }
      function modalComprobanteFact(src,idventa){
        //src ='/Applications/MAMP/htdocs/intesystemautolavado/public/pdf/ticket.pdf'
    
        var sizeWidth = 0;
        var sizeheight = 0;
        ticket = 1
        if (ticket)
        {
            sizeWidth = 325;
            sizeheight = 450;
        } else {

            sizeWidth = $('#tb1238-u', window.parent.document).width() - 100;
            sizeheight = $('#tb1238-u', window.parent.document).height() - 50;
            
        }
        $('#idDocComprobante').val(idventa)
        $('#modalFactura').modal('hide')
        $('#modalComprobanteFact').modal('hide')
        $('#frameComprobanteFact').attr({'src': src});
        $('#modalComprobanteFact').modal({backdrop: 'static'});
        $('#modalComprobanteFact').modal('show')
  }
  function modalRelacionados(){
    $('#modalRelacionados').modal('show');
  }
    function agregaFactura(version=1){
    if(version==1){
        var Cuenta_id = $('#id_cliente').val();
        var serie = $('#serieRel').val()
        var folio = $('#folioRel').val()
        var tableInsert = 'tbodyRelaFacturas'
        var ite = ''
        var clase = 'relFacts'

    }else{
        var idVenta = $('#idDoc_r').val()
        var serie = $('#serieRel2').val()
        var folio = $('#folioRel2').val()
        var tableInsert = 'tbodyRelaFacturas2'
        var ite = 2
        var clase = 'relFacts2'

    }
    
    $.ajax({
        url: '../operaciones/cxc/get_pago_uuid',
        type: 'POST',
        dataType: 'json',
        data: {serie: serie,folio: folio,cliente: Cuenta_id},
    })
    .done(function(resp) {
        console.log("success");
        if(resp.estatus > 0){
            html = '<tr class="'+clase+'" uuid="'+resp.uuid+'" id="uid'+ite+'_'+resp.id+'"><td>'+serie+'-'+folio+'</td><td>'+resp.uuid+'</td><td><button class="btn btn-icon-only btn-rounded btn-outline-danger mb-0 me-3 p-3 btn-sm d-flex align-items-center justify-content-center" onclick="removeRelacion('+resp.id+',2);"><i class="material-icons text-lg">clear</i></button></td></tr>'
            $('#'+tableInsert).append(html)
        }else{
            Swal.fire({
                title: resp.mensaje,
                type: 'error',
                timer: 2000
            })
            return false;
        }
        
    })
    .fail(function() {
        console.log("error");
    })
    .always(function() {
        console.log("complete");
    });
    
  }
  function removeRelacion(id,version=1){
    if(version==1){
        $('#uid_'+id).remove()
    }else{
        $('#uid2_'+id).remove()
    }
    
  }
  function muestraTableRel(version=1){
    if(version==1){
        id = 'tiporelacionRel'
    }else{
        id = 'tiporelacionRel2'
    }
    if($('#'+id).val()=='0'){
        $('.relacionFuncion').hide()
    }else{
        $('.relacionFuncion').show()
    }
  }
  function enviarFactura(){
    var emailClienteM = $('#emailClienteM').val();
    var url = $('#frameComprobanteFact').attr('src');
    var idventa = $('#idDocComprobante').val()
    $.ajax({
        url: '../operaciones/enviar_pago',
        type: 'POST',
        dataType: 'json',
        data: {
            emailClienteM: emailClienteM,
            url: url,
            idventa: idventa
        },
    })
    .done(function(resp) {
        console.log("success");
        if(resp.estatus){
            Swal.fire({
                title: 'Se envio correctamente!',
                type: 'success',
                timer: 2000
            })
            cerrarModales();
        }
    })
    .fail(function() {
        console.log("error");
    })
    .always(function() {
        console.log("complete");
    });
    
}
  function addCorreoCliente(){
    $('#correoNuevo').val('')
    $('#modalNuevoEmail').modal('show')
  }
  function guardaCorreoCliente(){
    var id_cliente = $('#id_cliente').val()
    var correo = $('#correoNuevo').val()

    $.ajax({
        url: '../operaciones/cxc/guarda_nuevo_correo',
        type: 'POST',
        dataType: 'json',
        data: {correo: correo,id_cliente: id_cliente},
    })
    .done(function(resp) {
        if(resp.estatus > 0){
            Swal.fire({
                title: 'Correo guardado',
                type: 'success',
                timer: 2000
            })
            $('#emailClienteM').append('<option value="'+correo+'">'+correo+'</option>');
            $('#correoNuevo').val('')
            $('#modalNuevoEmail').modal('hide')
        }else{
            Swal.fire({
                        title: 'Error al guardar el correo',
                        type: 'warning',
                        timer: 2000
                    })
        }
       
    })
    .fail(function() {
        console.log("error");
    })
    .always(function() {
        console.log("complete");
    });
    
  }
</script>
@endsection