@extends('plantilla')

@section('titulo', "Estado de Cuenta")

@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>
    <li class="breadcrumb-item active"><a href=#>Estado cuenta</a></li>
</ol>
<ol class="toolbar">
  <li><a class="btn btn-danger" href="/informarPago" role="button">Informar pago</a></li>
</ol>
@endsection
@section('contenido')
<form method="POST">
    <div class="row">

            <div class="col-md-12 mb-12">
              <div class="card border-left-primary">
                <div class="card-body">
                  <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                      <div class="text-xs font-weight-bold text-secondary text-uppercase mb-1">Saldo</div>
                      <div id="divSaldo" class="h5 mb-0 text-gray-800">{{($cobroSaldo[0]->saldo)?$cobroSaldo[0]->saldo:0}}</div>
                    </div>
                    <div class="col-auto">
                    <i class="fa fa-usd" aria-hidden="true"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
    </div>
</form>
<table id="grilla" class="display">
    <thead>
        <tr>
            <th>Periodo</th>
            <th>Fecha vencimiento</th>
            <th>Importe</th>
            <th>Desacargar comprobante</th>
            <th>Saldo</th>
        </tr>
    </thead>
</table> 
<script>
          var dataTable = $('#grilla').DataTable({
              "processing": true,
                "serverSide": true,
              "bFilter": true,
              "bInfo": true,
              "bSearchable": true,
                "pageLength": 25,
                "order": [[ 2, "asc" ]],
              "ajax": "{{ route('administracionEstadoCliente.cargarGrilla') }}"
            });
</script>
@endsection