<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 empresariales</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">Cuentas empresariales</li>
                </ol>
            </div>

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

<div class="card">
    <ul class="nav nav-tabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="cxp-tab" data-bs-toggle="tab" data-bs-target="#cxp" type="button" role="tab" aria-controls="cxp" aria-selected="true">CXP</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="cxc-tab" data-bs-toggle="tab" data-bs-target="#cxc" type="button" role="tab" aria-controls="cxc" aria-selected="false">CXC</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="proveedores-tab" data-bs-toggle="tab" data-bs-target="#proveedores" type="button" role="tab" aria-controls="proveedores" aria-selected="false">Proveedores</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="resumen-tab" data-bs-toggle="tab" data-bs-target="#resumen" type="button" role="tab" aria-controls="resumen" aria-selected="false">Resúmen</button>
        </li>
    </ul>
    <div class="card-body">
        <div class="tab-content">
            <div class="tab-pane fade show active" id="cxp" role="tabpanel" aria-labelledby="cxp-tab">
                <div class="row">
                    <div class="col-sm-12 col-md-12">
                        <table class="table 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>Institución</th>
                                    <th class="text-center">Fecha de otorgamiento</th>
                                    <th class="text-center">Monto</th>
                                    <th class="text-center">Cuota</th>
                                    <th class="text-center">N° cuotas</th>
                                    <th class="text-center">Periodicidad</th>
                                    <th class="text-center">Tasa</th>
                                    <th class="text-center">Saldo</th>
                                    <th class="text-center">Último pago</th>
                                    <th class="text-center">Saldo vencido</th>
                                    <th>Observación</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="cxc" role="tabpanel" aria-labelledby="cxc-tab">
                <div class="row">
                    <div class="col-sm-12 col-md-12">
                        <table class="table table-bordered" id="cuentas-por-cobrar-tbl" style="text-align:center; width:100% !important;">
                            <thead class="table-primary">
                                <tr>
                                    <th class="text-center">#</th>
                                    <th>Institución</th>
                                    <th class="text-center">Fecha de otorgamiento</th>
                                    <th class="text-center">Monto</th>
                                    <th class="text-center">Cuota</th>
                                    <th class="text-center">N° cuotas</th>
                                    <th class="text-center">Periodicidad</th>
                                    <th class="text-center">Tasa</th>
                                    <th class="text-center">Saldo</th>
                                    <th class="text-center">Último pago</th>
                                    <th class="text-center">Saldo vencido</th>
                                    <th>Observación</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="proveedores" role="tabpanel" aria-labelledby="proveedores-tab">
                <div class="row">
                    <div class="col-sm-12 col-md-12">
                        <table class="table table-bordered" id="cuentas-proveedores-tbl" style="text-align:center; width:100% !important;">
                            <thead class="table-primary">
                                <tr>
                                    <th class="text-center">#</th>
                                    <th>Proveedor</th>
                                    <th class="text-center">Monto CXP</th>
                                    <th class="text-center">Saldo CXP</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 class="tab-pane fade" id="resumen" role="tabpanel" aria-labelledby="resumen-tab">
                <div class="row">
                    <div class="col-sm-12 col-md-12">
                        <table class="table table-bordered" id="resumen-tbl" style="text-align:center; width:100% !important;">
                            <thead class="table-primary">
                                <tr>
                                    <th rowspan="2">Empresa</th>
                                    <th class="text-center" colspan="2">BANCOS</th>
                                    <th class="text-center" colspan="2">INTERCOMPANIES</th>
                                    <th class="text-center" rowspan="2">PROVEEDORES</th>
                                    <th class="text-center" rowspan="2">IMPUESTOS</th>
                                    <th class="text-center" rowspan="2">ACREEDORES VARIOS</th>
                                    <th class="text-center" rowspan="2">DEUDA</th>
                                    <th class="text-center" rowspan="2">CxC</th>
                                    <th class="text-center" rowspan="2">DIFERENCIA CXP VS CXC</th>
                                </tr>
                                <tr>
                                    <th class="text-center">Saldo K</th>
                                    <th class="text-center">Cuota</th>
                                    <th class="text-center">Saldo K</th>
                                    <th class="text-center">Cuota</th>
                                </tr>
                            </thead>
                            <tbody>

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

<?php
$jsModules = [
    'informeCuentasEmpresarialesPage'
];
