@extends('layouts.mainlayout')
@push('css')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.6/css/responsive.bootstrap4.min.css">
@endpush
@section('content')
<div class="edocuenta">
    <div class="row">
        <div class="col-md-12 section-header">
            <h5>
                <span class="icon-i-documento-1"></span>Detalle de Saldo por Cuenta
            </h5>
        </div>
    </div>
    <!-- Consumos destacados -->
    <div class="row">
        <div class="box-info-destacada verde col-md-12">
            <div class="row">
                <div class="col-md-6">
                    <div class="titulo">
                        {{$info_cliente[0]->nombre}}
                    </div>
                    <p>Cliente: {{$info_cliente[0]->Cliente}}</p>
                    <p>Contrato: {{$info_cliente[0]->Contrato}}</p>
                    <p>Dirección: {{$info_cliente[0]->Domicilio}}</p>
                </div>
                <div class="col-md-6">
                    <div class="titulo">
                        Saldo actual
                    </div>
                    <div class="row align-items-center no-gutters">
                        <div class="col-md-auto col-2 areaIcono">
                            <span class="icon-i-dinero"></span>
                        </div>
                        <div class="col-md-auto col-10">
                            <strong class="costo">{{number_format($info_cliente[0]->Saldo,2)}}</strong>
                        </div>
                    </div>
                    <div class="row align-items-center" style="color:black;">
                        <div class="col-md-auto col-6">
                            <p><b>Uso:</b> {{$info_cliente[0]->Uso}}</p>
                        </div>
                        <div class="col-md-auto col-6">
                            <p><b>Giro:</b> {{$info_cliente[0]->Giro}}</p>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <!--row-->
    <!-- Consumos destacados -->
    <!-- Single bloque desplegable -->
    <div class="box-desplegable">
        <h4 class="encabezado-box-desplegable"> <span class="icon-i-documento-1 ico-box-desplegable"></span>
            DETALLE DE PAGOS </h4>
        <div class="contenido-box-desplegable">
            <div class="table-responsive-sm">
                <table id="edoscuenta" class="table table-width-100">
                    <thead>
                        <tr>
                            <th>No. Documento</th>
                            <th>Descripción</th>
                            <th>Emisión</th>
                            <th>Vencimiento</th>
                            <th>Cargo</th>
                            <th>Abono</th>
                            <th>Manejo Cuenta</th>
                            <th>Saldo</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (array_reverse($detalle_pagos) as $pago)
                        <tr>
                            <td>{{$pago->REFERENCIA}}</td>
                            <td>{{$pago->OPERACION}}</td>
                            <td>{{$pago->FECHA}}</td>
                            <td>{{$pago->VENCIMIENTO}}</td>
                            <td>{{$pago->MONTO}}</td>
                            <td>{{$pago->ABONO}}</td>
                            <td>{{$pago->INTERESES}}</td>
                            <td>{{$pago->SLDOPERACION}}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <!--table-responsive-->
        </div>
    </div>
    <!-- Single bloque desplegable -->
</div>
@endsection
@push('scripts')

<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.6/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.6/js/responsive.bootstrap4.min.js"></script>
<script src="https://momentjs.com/downloads/moment.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.13/sorting/datetime-moment.js"></script>
<script>
    $(document).ready(function() {

    var table = $('#edoscuenta').DataTable({
        "order": [],
        responsive: true,
        autoWith: false,
        "language": {
        "lengthMenu": "Mostrar _MENU_ registros por página",
        "zeroRecords": "No se encontraron registros",
        "info": "Mostrando _PAGE_ de _PAGES_ páginas",
        "infoEmpty": "No hay registros disponibles",
        "infoFiltered": "(filtrado de _MAX_ registros totales)",
        "search": "Buscar: ",
        "paginate":{
            "next": "Siguiente",
            "previous": "Anterior"
        }
        }
    });
    
    } );

    

    
</script>
@endpush