<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0">Cuentas por cobrar clientes</h4>

            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="javascript: void(0);">Contabilidad</a></li>
                    <li class="breadcrumb-item">Informes</li>
                    <li class="breadcrumb-item active">CXC Clientes</li>
                </ol>
            </div>

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

<div class="card">
    <div class="card-body pt-1">
        <div class="row">
            <div class="col-sm-12 col-md-12">
                <div class="row mb-2">
                    <div class="col-sm-2 col-md-2">
                        <label class="form-label" for="num-total">Total</label>
                        <input type="text" class="form-control form-control-sm" id="num-total" readonly>
                    </div>
                    <div class="col-sm-2 col-md-2">
                        <label for="num-total-abono" class="form-label">Total abono</label>
                        <input type="text" class="form-control form-control-sm" id="num-total-abono" readonly>
                    </div>
                    <div class="col-sm-2 col-md-2">
                        <label for="num-total-saldo" class="form-label">Total saldo</label>
                        <input type="text" class="form-control form-control-sm" id="num-total-saldo" readonly>
                    </div>
                    <div class="col-sm-2 col-md-2">
                        <label for="num-total-30" class="form-label">Total 01 a 30</label>
                        <input type="text" class="form-control form-control-sm" id="num-total-30" readonly>
                    </div>
                    <div class="col-sm-2 col-md-2">
                        <label for="num-total-60" class="form-label">Total 31 a 60</label>
                        <input type="text" class="form-control form-control-sm" id="num-total-60" readonly>
                    </div>
                    <div class="col-sm-2 col-md-2">
                        <label for="num-total-90" class="form-label">Total 61 a 90</label>
                        <input type="text" class="form-control form-control-sm" id="num-total-90" readonly>
                    </div>
                    <div class="col-sm-2 col-md-2">
                        <label for="num-total-90-mas" class="form-label">Total más de 90</label>
                        <input type="text" class="form-control form-control-sm" id="num-total-90-mas" readonly>
                    </div>
                </div>
            </div>
            <div class="col-sm-12 col-md-12">
                <table class="table table-sm table-bordered" id="cuentas-por-pagar-tbl" style="text-align:center; width:100% !important;">
                    <thead class="table-primary">
                        <tr>
                            <th class="text-center">#</th>
                            <th>Cliente</th>
                            <th class="text-center">Total</th>
                            <th class="text-center">Abono</th>
                            <th class="text-center">Saldo</th>
                            <th class="text-center">De 01 a 30</th>
                            <th class="text-center">De 31 a 60</th>
                            <th class="text-center">De 61 a 90</th>
                            <th class="text-center">Más de 90</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<?php
$jsModules = [
    'informeCXCClientesPage',
];
