<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">Catálogos de planilla única</h4>

            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="javascript: void(0);">RRHH</a></li>
                    <li class="breadcrumb-item">Catálogos</li>
                    <li class="breadcrumb-item active">Planilla única</li>
                </ol>
            </div>

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

<div class="card">
    <div class="card-body p-0">
        <ul class="nav nav-tabs" id="catalogos" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="codigosObservacion-tab" data-bs-toggle="tab" data-bs-target="#codigosObservacion-tab-pane" type="button" role="tab" aria-controls="codigosObservacion-tab-pane" aria-selected="true">Códigos de observación</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="documentos-tab" data-bs-toggle="tab" data-bs-target="#documentos-tab-pane" type="button" role="tab" aria-controls="documentos-tab-pane" aria-selected="false">Documentos</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="instituciones-tab" data-bs-toggle="tab" data-bs-target="#instituciones-tab-pane" type="button" role="tab" aria-controls="instituciones-tab-pane" aria-selected="false">Instituciones</button>
            </li>
            <li class="nav-item ms-auto" role="presentation">
                <div class="h-100 pe-1 d-flex align-items-center">
                    <button class="btn btn-sm btn-primary" id="btnNuevo" type="button">
                        <i class="fa-solid fa-plus"></i>
                        Nuevo
                    </button>
                </div>
            </li>
        </ul>
        <div class="tab-content p-2" id="catalogosContent">
            <div class="tab-pane fade show active" id="codigosObservacion-tab-pane" role="tabpanel" aria-labelledby="codigosObservacion-tab" tabindex="0">
                <div class="row">
                    <div class="col-12">
                        <table class="table table-bordered" id="codigosObservacion-tbl" style="text-align:center; width:100% !important;">
                            <thead>
                                <tr>
                                    <th class="text-center">Código</th>
                                    <th>Concepto</th>
                                    <th>Aplica para empleadores</th>
                                    <th class="text-justify">Validaciones</th>
                                    <th class="text-center">Fecha de creación</th>
                                    <th>Usuario</th>
                                    <th class="text-center">Acciones</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="documentos-tab-pane" role="tabpanel" aria-labelledby="documentos-tab" tabindex="0">
                <div class="row">
                    <div class="col-12">
                        <table class="table table-bordered" id="documentos-tbl" style="text-align:center; width:100% !important;">
                            <thead>
                                <tr>
                                    <th class="text-center">Código</th>
                                    <th>Tipo de documento</th>
                                    <th class="text-center">Fecha de creación</th>
                                    <th>Usuario</th>
                                    <th class="text-center">Acciones</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="instituciones-tab-pane" role="tabpanel" aria-labelledby="instituciones-tab" tabindex="0">
                <div class="row">
                    <div class="col-12">
                        <table class="table table-bordered" id="instituciones-tbl" style="text-align:center; width:100% !important;">
                            <thead>
                                <tr>
                                    <th class="text-center">#</th>
                                    <th class="text-center">Código</th>
                                    <th>Institución</th>
                                    <th class="text-center">Fecha de creación</th>
                                    <th>Usuario</th>
                                    <th class="text-center">Acciones</th>
                                </tr>
                            </thead>
                            <tbody>

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

<div class="modal fade" id="modal-codigoObservacion" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5>Código de observación</h5>
                <button class="btn-close" data-bs-dismiss="modal" type="button"></button>
            </div>
            <div class="modal-body pt-1">
                <form id="codigoObservacion-form" name="codigoObservacion-form" accept-charset="utf-8" class="needs-validation" novalidate>
                    <div class="row">
                        <div class="col-12">
                            <label for="num-codigoObservacion" class="form-label">
                                Código
                                <span class="required">*</span>
                            </label>
                            <input type="number" class="form-control" id="num-codigoObservacion" name="num-codigoObservacion" required min="0" step="1">
                            <div class="invalid-feedback">
                                Por favor ingrese un código de observación.
                            </div>
                        </div>
                        <div class="col-12">
                            <label for="txt-conceptoCodigoObservacion" class="form-label">
                                Concepto
                                <span class="required">*</span>
                            </label>
                            <input type="text" class="form-control" id="txt-conceptoCodigoObservacion" name="txt-conceptoCodigoObservacion" required>
                            <div class="invalid-feedback">
                                Por favor ingrese un concepto.
                            </div>
                        </div>
                        <div class="col-12">
                            <label for="txt-validacionesCodigoObservacion" class="form-label">
                                Validaciones
                                <span class="required">*</span>
                            </label>
                            <textarea class="form-control" id="txt-validacionesCodigoObservacion" name="txt-validacionesCodigoObservacion" rows="3" required></textarea>
                            <div class="invalid-feedback">
                                Por favor ingrese las validaciones.
                            </div>
                        </div>
                        <div class="col-12 mt-2">
                            <div class="row">
                                <div class="col-6">
                                    <label class="form-label mt-0 w-100 text-center">¿Aplica persona natural? <span class="required">*</span></label>
                                    <div class="d-flex align-middle justify-content-center">
                                        <input type="checkbox" id="chk-aplica-personaNatural" switch="none" class="chk-salario-base" checked>
                                        <label for="chk-aplica-personaNatural" data-on-label="Si" data-off-label="No"></label>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <label class="form-label mt-0 w-100 text-center">¿Aplica persona jurídica? <span class="required">*</span></label>
                                    <div class="d-flex align-middle justify-content-center">
                                        <input type="checkbox" id="chk-aplica-personaJuridica" switch="none" class="chk-salario-base" checked>
                                        <label for="chk-aplica-personaJuridica" data-on-label="Si" data-off-label="No"></label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-sm btn-primary" type="submit" form="codigoObservacion-form">Guardar</button>
                <button class="btn btn-sm btn-secondary" data-bs-dismiss="modal" type="button">Cancelar</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modal-documento" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5>Documento</h5>
                <button class="btn-close" data-bs-dismiss="modal" type="button"></button>
            </div>
            <div class="modal-body pt-1">
                <form id="documento-form" name="documento-form" accept-charset="utf-8" class="needs-validation" novalidate>
                    <div class="row">
                        <div class="col-12">
                            <label for="num-codigoDocumento" class="form-label">
                                Código
                                <span class="required">*</span>
                            </label>
                            <input type="number" class="form-control" id="num-codigoDocumento" name="num-codigoDocumento" required min="0" step="1">
                            <div class="invalid-feedback">
                                Por favor ingrese un código de documento.
                            </div>
                        </div>
                        <div class="col-12">
                            <label for="cbo-tipoDocumento" class="form-label">
                                Tipo de documento
                                <span class="required">*</span>
                            </label>
                            <div class="form-group has-validation">
                                <select id="cbo-tipoDocumento" name="cbo-tipoDocumento" class="form-control selectpicker" data-live-search="true" required title="">
                                    <option value="" selected disabled>Seleccione</option>
                                </select>
                                <div class="invalid-feedback">
                                    Por favor seleccione un tipo de documento.
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-sm btn-primary" type="submit" form="documento-form">Guardar</button>
                <button class="btn btn-sm btn-secondary" data-bs-dismiss="modal" type="button">Cancelar</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modal-institucion" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5>Institución</h5>
                <button class="btn-close" data-bs-dismiss="modal" type="button"></button>
            </div>
            <div class="modal-body pt-1">
                <form id="institucion-form" name="institucion-form" accept-charset="utf-8" class="needs-validation" novalidate>
                    <div class="row">
                        <div class="col-12 mayusculas">
                            <label for="txt-codigoInstitucion" class="form-label">
                                Código
                                <span class="required">*</span>
                            </label>
                            <input type="text" class="form-control" id="txt-codigoInstitucion" name="txt-codigoInstitucion" required >
                            <div class="invalid-feedback">
                                Por favor ingrese un código de documento.
                            </div>
                        </div>
                        <div class="col-12">
                            <label for="cbo-institucion" class="form-label">
                                Tipo de documento
                                <span class="required">*</span>
                            </label>
                            <div class="form-group has-validation">
                                <select id="cbo-institucion" name="cbo-institucion" class="form-control selectpicker" data-live-search="true" required title="">
                                    <option value="" selected disabled>Seleccione</option>
                                </select>
                                <div class="invalid-feedback">
                                    Por favor seleccione un tipo de documento.
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-sm btn-primary" type="submit" form="institucion-form">Guardar</button>
                <button class="btn btn-sm btn-secondary" data-bs-dismiss="modal" type="button">Cancelar</button>
            </div>
        </div>
    </div>
</div>

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