@extends('plantilla')

@section('titulo', "$titulo")

@section('scripts')
<link href=https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css rel="stylesheet">
<script src=https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js></script>
@endsection
@section('breadcrumb')
<ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="/home">Inicio</a></li>

</ol>

<ol class="toolbar" style="margin-bottom: 0px;"> 
    <li class="btn-item"><a title="Recargar" href="#" class="fa fa-refresh" aria-hidden="true" onclick='window.location.replace("/formulario/transacciones");'><span>Recargar</span></a></li>
</ol>

<br>
@endsection
@section('contenido')
 <div class="modal fade" id="modalDatosTarjeta" tabindex="-1" role="dialog" aria-labelledby="modalDatosTarjetaLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content px-3">
      <div class="modal-header" style="border-bottom: 0px !important;">
      <h5 class="modal-title" id="modalDatosTarjetaLabel">Datos de la tarjeta</h5>
      </div>
      
     
      <table class="table table-hover borde">
          <tr>
              <td>Tarjeta</td>
              <td id="tarjeta"></td>
          </tr>
          <tr>
              <td>Número de tarjeta</td>
              <td id="numero"></td>
          </tr>
          <tr>
              <td>Código de seguridad</td>
              <td id="codigo"></td>
          </tr>
          <tr>
              <td>Fecha de vencimiento</td>
              <td id="vencimiento"></td>
          </tr>
          <tr>
              <td>Titular</td>
              <td id="nombretitular"></td>
          </tr>
          <tr>
              <td>Número de cuotas</td>
              <td id="cuotas"></td>
          </tr>
      </table>
     
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Aceptar</button>
      </div>
    </div>
  </div>
</div>

<table id="grilla" class="display">
    <thead>
        <tr> 
            <th>Transaccion</th>
            <th style="width: 127px !important;">Formulario</th>
            <th>Medio de pago</th>
            <th>Núm. Tarjeta</th>
            <th>Cliente</th>
            <th>Importe</th>
            <th>Fecha</th>
            <th>Estado</th>
            <th>Acci&oacute;n</th>
        </tr>
    </thead>
</table> 
<script>

    var dataTable = $('#grilla').DataTable({
            "processing": true,
            "serverSide": true,
            "bFilter": true,
            "bInfo": true,
            "bSearchable": true,
            "pageLength": 25,
            "order": [[ 0, "desc" ]],
            "ajax": "{{ route('administracion-transaccion.cargarGrilla') }}"
        });

    function fAbrirModal(idPagoTransaccion){
        obtenerDatosTarjeta(idPagoTransaccion);
        $('#modalDatosTarjeta').modal('toggle');
    }
    function fEstado(idPagoTransaccion){
    modificado = false;
    accion = $("#lstEstado_"+idPagoTransaccion).val(); 
    if(accion == "Aprobado"){
        fAprobado(idPagoTransaccion);
    }
    if(accion == "Rechazado"){
        fRechazado(idPagoTransaccion);
    }
    if(accion == "Cancelado"){
       fCancelado(idPagoTransaccion); 
    }
         
    $("#lstEstado_"+idPagoTransaccion).prop("selectedIndex", "");    
    }

    function fAprobado(idPagoTransaccion){
        $.ajax({
	      type: "GET",
	      url: "/transaccionAprobada",
	      data: {
            idPagoTransaccion:idPagoTransaccion
              },
	      async: true,
	      dataType: "json",
	      success: function (data) {
            
	      }
      });
     window.location.replace("/formulario/transacciones");
    }
    function fRechazado(idPagoTransaccion){
        $.ajax({
	      type: "GET",
	      url: "/transaccionRechazada",
	      data: {
            idPagoTransaccion:idPagoTransaccion
              },
	      async: true,
	      dataType: "json",
	      success: function (data) {
            
	      }
      });
     window.location.replace("/formulario/transacciones");
    }
    function fCancelado(idPagoTransaccion){
        $.ajax({
	      type: "GET",
	      url: "/transaccionCancelada",
	      data: {
            idPagoTransaccion:idPagoTransaccion
              },
	      async: true,
	      dataType: "json",
	      success: function (data) {
            
	      }
      });
      window.location.replace("/formulario/transacciones");
    }

    function obtenerDatosTarjeta(idPagoTransaccion){
        $.ajax({
	      type: "GET",
	      url: "/obtenerTarjeta",
	      data: {
            idPagoTransaccion:idPagoTransaccion
              },
	      async: true,
	      dataType: "json",
	      success: function (data) {
            $("#vencimiento").html(data.vencimiento);
            $("#tarjeta").html(data.tarjeta);
            $("#numero").html(data.numero);
            $("#cuotas").html(data.cuotas);
            $("#nombretitular").html(data.nombretitular);
            $("#codigo").html(data.codigo);
           
	      }
      });
    }
</script>
@endsection