<div class="content-wrapper">
  <!-- Content Header (Page header) -->
  <div class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
        <div class="col-sm-6">
          <h1 class="m-0 text-dark">Reporte de Cuentas</h1>
        </div><!-- /.col -->
        <div class="col-sm-6">
          <ol class="breadcrumb float-sm-right">
            <li class="breadcrumb-item"><a href="#">Reportes</a></li>
            <li class="breadcrumb-item active">Cuentas de Banco</li>
          </ol>
        </div><!-- /.col -->
      </div><!-- /.row -->
    </div><!-- /.container-fluid -->
  </div>
  <!-- /.content-header -->

  <!-- Main content -->
  <!-- Main content -->
  <section class="content">
    <div class="row">
      <div class="form-group col-sm-6">
        <div class="card-body">
          <label for="cuentas_bancarias">Cuentas</label>
          <select class="form-control select2 bg-primary" id="cuentas_bancarias" style="width: 100%;">
          </select>
        </div></div>

        <div class="form-group col-sm-6">
          <div class="card-body">

            <label for="fecha_search">Fecha</label>
            <input type="date" class="form-control" id="fecha_search" autocomplete="off">
          </div></div>
        </div>
        <div id="saldos_del_dia" class="row" style="display: none;">
          <div class="col-md-12">
            <div class="card card-default">
              <div class="card-header">
                <h3 class="card-title">
                  <i class="fas fa-hand-holding-usd"></i>
                  Saldos del dia
                </h3>
              </div>
              <!-- /.card-header -->
              <div class="card-body" id="datos_saldos">

              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->
          </div>
        </div>

        <div id="datos_de_balance" class="row" style="display: none;">
          <div class="form-group col-sm-3">
            <div class="card-body">
              <h6 id="banco_cuenta"></h6><br>
              <h6 id="titular_cuenta"></h6><br>
              <h6 id="numero_cuenta"></h6><br>
              <button class="btn btn-danger" id="volver" ><i class="fas fa-reply"></i> Volver</button>
            </div>
          </div>

          <div class="form-group col-sm-3">
            <div class="card-body">
              <h6 id="saldo_inicial"></h6><br>
              <h6 id="fecha_cuenta"></h6><br>
              <h6 id="saldo_actual"></h6><br>
              <a href="" id="url_movimientos" target="_blank"><button class="btn btn-success">Ver Transacciones</button></a>
            </div>
          </div>


          <div class="col-md-6" id="datos_producto" >
            <div class="card  card-body" >
              <div class="card-header" >
                <h3 class="card-title" >Pagos en sistema</h3>
              </div>
              <div class="card-body table-responsive p-0" >
                <table class="table table-head-fixed text-nowrap">
                  <tbody>
                    <tr>
                      <th>Depositos</th>
                      <td id="total_depositos">0</td>
                      <td id="soles_depositos">s/0</td>
                    </tr>
                  </tbody>
                  <tbody>
                    <tr>
                      <th>Transferencias</th>
                      <td id="total_transferencia">0</td>
                      <td id="soles_transferencia">s/0</td>
                    </tr>
                    <tr>
                      <th>Total</th>
                      <td id="pagos_total">0</td>
                      <td id="total_soles">s/0</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->
          </div>

          <div class="col-md-6" >
            <div class="card  card-body" >
              <div class="card-header" >
                <h3 class="card-title" >Ingresos</h3>
              </div>
              <div class="card-body">

                <table id="ingresos_total" class="table table-bordered table-striped" style="width: 100%;">
                  <thead>
                    <tr class="bg-primary text-center">
                      <th></th>
                      <th>Fecha</th>
                      <th>Depositos</th>
                      <th>Transferencias</th>
                      <th>Soles</th>
                    </tr>
                  </thead>

                  <tfoot>
                    <tr>
                      <th></th>
                      <th colspan="4" style="text-align: center;">Ingresos</th>
                    </tr>
                  </tfoot>
                </table>
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->
          </div>

          <div class="col-md-6"  >
            <div class="card  card-body" >
              <div class="card-header" >
                <h3 class="card-title" >Egresos</h3>
              </div>
              <div class="card-body">

                <table id="egresos_total" class="table table-bordered table-striped" style="width: 100%;">
                  <thead>
                    <tr class="bg-danger text-center">
                      <th></th>
                      <th >Fecha</th>
                      <th>Depositos</th>
                      <th>Transferencias</th>
                      <th>Soles</th>
                    </tr>
                  </thead>

                  <tfoot>
                    <tr>
                      <th></th>
                      <th colspan="4" style="text-align: center;">Egresos</th>
                    </tr>
                  </tfoot>
                </table>
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->
          </div>

        </div>


      </section>
    </div>