<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">Gestión de empresas</h4>

            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="javascript: void(0);">Sistema</a></li>
                    <li class="breadcrumb-item">Configuración</li>
                    <li class="breadcrumb-item active">Gestión de empresas</li>
                </ol>
            </div>

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

<div class="card">
    <div class="border">
        <ul class="nav nav-pills custom-hover-nav-tabs">
            <li class="nav-item">
                <a href="#empresas-container" data-bs-toggle="tab" aria-expanded="false" class="nav-link active" id="empresas-tab">
                    <i class="fa-solid fa-city nav-icon nav-tab-position"></i>
                    <h5 class="nav-titl nav-tab-position m-0">Empresas</h5>
                </a>
            </li>
            <li class="nav-item">
                <a href="#edit-empresa-container" data-bs-toggle="tab" aria-expanded="true" class="nav-link disabled" id="editar-empresa-tab">
                    <i class="fa-solid fa-building nav-icon nav-tab-position"></i>
                    <h5 class="nav-titl nav-tab-position m-0">Edición</h5>
                </a>
            </li>
            <li class="nav-item ms-auto" id="btns-nueva-empresa">
                <div class="h-100 pe-1 d-flex align-items-center">
                    <button class="btn btn-sm btn-primary btn-rounded waves-effect waves-light" id="btn-agregar-empresa" type="button">
                        <i class="fas fa-plus"></i>
                        <span>Nueva empresa</span>
                    </button>
                </div>
            </li>
            <li class="nav-item ms-auto d-none" id="btns-guardar-empresa">
                <div class="h-100 pe-1 d-flex align-items-center">
                    <button class="btn btn-sm btn-primary btn-rounded waves-effect waves-light" id="btn-guardar-empresa" type="submit" form="empresa-form">
                        <i class="fas fa-save"></i>
                        <span>Guardar</span>
                    </button>
                    <button class="btn btn-sm btn-danger btn-rounded waves-effect waves-light ms-2" id="btn-cancelar-empresa" type="button">
                        <i class="fas fa-times"></i>
                        <span>Cancelar</span>
                    </button>
                </div>
            </li>
        </ul>
    </div>
    <div class="card-body pt-0 ps-0 pe-0">
        <div class="tab-content text-muted">
            <div class="tab-pane fade show active pt-2 ps-3 pe-3" id="empresas-container">
                <div class="row">
                    <div class="col-sm-12 col-md-12 col-lg-12">
                        <table class="table table-sm table-bordered" id="empresas-tbl" style="text-align:center; width:100% !important;">
                            <thead>
                                <tr>
                                    <th class="text-center">#</th>
                                    <th class="text-center">¿Principal?</th>
                                    <th class="text-center">CODEMPRESA</th>
                                    <th>Nombre</th>
                                    <th class="text-center">Fecha de registro</th>
                                    <th class="text-center">Acciones</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade pt-1 pe-2 ps-2" id="edit-empresa-container">
                <form id="empresa-form" name="empresa-form" accept-charset="utf-8" method="POST" class="needs-validation" novalidate>
                    <div class="row">
                        <div class="col-sm-12 col-md-12 col-lg-6">
                            <fieldset class="w-auto border pt-0">
                                <legend>Generales</legend>
                                <div class="row">
                                    <div class="col-sm-12 col-md-12 col-lg-6">
                                        <div class="d-flex align-middle">
                                            <label style="margin-top:3px;" class="mb-0 me-3 fw-500">¿Empresa principal?</label>
                                            <input type="checkbox" id="chk-empresa-principal" switch="none">
                                            <label for="chk-empresa-principal" data-on-label="Si" data-off-label="No"></label>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-12 col-md-6 col-lg-8 mayusculas">
                                        <label for="txt-nombre-empresa" class="form-label mt-0">Nombre</label>
                                        <input type="text" class="form-control form-control-sm" id="txt-nombre-empresa" name="txt-nombre-empresa" placeholder="Nombre de la empresa" required>
                                        <div class="invalid-feedback">
                                            Por favor ingrese el nombre de la empresa.
                                        </div>
                                    </div>
                                    <div class="col-sm-12 col-md-6 col-lg-4">
                                        <label for="num-codempresa" class="form-label mt-0">CODEMPRESA</label>
                                        <input type="number" class="form-control form-control-sm" id="num-codempresa" name="num-codempresa" placeholder="Código de la empresa" required>
                                        <div class="invalid-feedback">
                                            Por favor ingrese el código de la empresa.
                                        </div>
                                    </div>
                                </div>
                                <div class="row mt-3">
                                    <div class="col-12">
                                        <ul class="nav nav-pills arrow-navtabs nav-secondary bg-light mb-3" role="tablist">
                                            <li class="nav-item">
                                                <a class="nav-link active" data-bs-toggle="tab" href="#rubros-container" role="tab">
                                                    <span class="d-block d-sm-none"><i class="fas fa-cog"></i></span>
                                                    <span class="d-none d-sm-block">Rubros</span>
                                                </a>
                                            </li>
                                            <li class="nav-item ms-auto">
                                                <div class="h-100 d-flex pe-1 align-items-center">
                                                    <button type="button" class="btn btn-primary btn-sm" id="btn-asignar-rubro" data-bs-toggle="tooltip" data-bs-placement="top" title="Asignar rubro">
                                                        <i class="fas fa-plus"></i> Rubro
                                                    </button>
                                                </div>
                                            </li>
                                        </ul>
                                        <div class="tab-content text-muted">
                                            <div class="tab-pane active" id="rubros-container" role="tabpanel">
                                                <div class="row">
                                                    <div class="col-sm-12 col-md-12 col-lg-12">
                                                        <table class="table table-sm table-bordered" id="rubros-tbl" style="text-align:center; width:100% !important;">
                                                            <thead>
                                                                <tr>
                                                                    <th class="text-center">#</th>
                                                                    <th>Rubro</th>
                                                                    <th class="text-center">Acciones</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>

                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>
                        </div>
                        <div class="col-sm-12 col-md-12 col-lg-6">
                            <fieldset class="w-auto border pt-0">
                                <legend>API</legend>
                                <div class="row">
                                    <div class="col-12">
                                        <label for="txt-url-api" class="form-label">URL</label>
                                        <input type="text" class="form-control form-control-sm" id="txt-url-api" name="txt-url-api" placeholder="URL de la API">
                                        <div class="invalid-feedback">
                                            Por favor ingrese la URL de la API.
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <label for="txt-api-key" class="form-label">API KEY</label>
                                        <input type="text" class="form-control form-control-sm" id="txt-api-key" name="txt-api-key" placeholder="URL de la API">
                                        <div class="invalid-feedback">
                                            Por favor ingrese la API KEY.
                                        </div>
                                    </div>
                                </div>
                            </fieldset>
                            <fieldset class="w-auto border pt-0">
                                <legend>Módulos</legend>
                                <div class="row mt-3">
                                    <div class="col-12">
                                        <ul class="nav nav-pills arrow-navtabs nav-secondary bg-light mb-3" role="tablist">
                                            <li class="nav-item">
                                                <a class="nav-link active" data-bs-toggle="tab" href="#modulos-container" role="tab">
                                                    <span class="d-block d-sm-none"><i class="fas fa-cog"></i></span>
                                                    <span class="d-none d-sm-block">Módulos</span>
                                                </a>
                                            </li>
                                            <li class="nav-item ms-auto">
                                                <div class="h-100 d-flex pe-1 align-items-center">
                                                    <button type="button" class="btn btn-primary btn-sm" id="btn-asignar-modulo" data-bs-toggle="tooltip" data-bs-placement="top" title="Asignar módulo">
                                                        <i class="fas fa-plus"></i> Módulo
                                                    </button>
                                                </div>
                                            </li>
                                        </ul>
                                        <div class="tab-content text-muted">
                                            <div class="tab-pane active" id="modulos-container" role="tabpanel">
                                                <div class="row">
                                                    <div class="col-sm-12 col-md-12 col-lg-12">
                                                        <table class="table table-sm table-bordered" id="modulos-tbl" style="text-align:center; width:100% !important;">
                                                            <thead>
                                                                <tr>
                                                                    <th class="text-center">#</th>
                                                                    <th>Módulo</th>
                                                                    <th class="text-center">Acciones</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>

                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modal-rubro" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Asignar rubro</h5>
            </div>
            <div class="modal-body pt-1">
                <form id="rubro-form" name="rubro-form" accept-charset="utf-8" method="POST" class="needs-validation" novalidate>
                    <div class="row">
                        <div class="col-12">
                            <label class="form-label" for="cbo-rubro">Rubro</label>
                            <div class="form-group has-validation">
                                <select class="form-control form-control-sm selectpicker" data-live-search="true" id="cbo-rubro" name="cbo-rubro" required>
                                    <option value="">Seleccione un rubro</option>
                                </select>
                                <div class="invalid-feedback">
                                    Por favor seleccione un rubro.
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary btn-sm" form="rubro-form">Guardar</button>
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cancelar</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modal-modulo" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Asignar módulo</h5>
            </div>
            <div class="modal-body pt-1">
                <form id="modulo-form" name="modulo-form" accept-charset="utf-8" method="POST" class="needs-validation" novalidate>
                    <div class="row">
                        <div class="col-12">
                            <label class="form-label" for="cbo-modulo">Módulo</label>
                            <div class="form-group has-validation">
                                <select class="form-control form-control-sm selectpicker" data-live-search="true" id="cbo-modulo" name="cbo-modulo" required>
                                    <option value="">Seleccione un módulo</option>
                                </select>
                                <div class="invalid-feedback">
                                    Por favor seleccione un módulo.
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary btn-sm" form="modulo-form">Guardar</button>
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cancelar</button>
            </div>
        </div>
    </div>
</div>

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