<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">Planilla Complementaria</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 complementaria</li>
                </ol>
            </div>

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

<div class="card">
    <ul class="nav nav-tabs" role="tablist" id="pestanias-principales">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="unidad-tab" data-bs-toggle="tab" data-bs-target="#contenedor-unidad" type="button" role="tab" aria-controls="contenedor-unidad" aria-selected="true">Unidades de trabajo</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="horaExtra-tab" data-bs-toggle="tab" data-bs-target="#contenedor-horaExtra" type="button" role="tab" aria-controls="contenedor-horaExtra" aria-selected="false">Tipos de horas extras</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="tipoOtrosIngresos-tab" data-bs-toggle="tab" data-bs-target="#contenedor-otrosIngresos" type="button" role="tab" aria-controls="contenedor-otrosIngresos" aria-selected="false">Tipos de otros ingresos</button>
        </li>
        <li class="nav-item ms-auto" id="btns-nuevo">
            <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" type="button">
                    <i class="fas fa-plus"></i>
                    <span>Agregar nuevo</span>
                </button>
            </div>
        </li>
    </ul>
    <div class="card-body">
        <div class="tab-content">
            <div class="tab-pane fade show active" id="contenedor-unidad" role="tabpanel" aria-labelledby="unidad-tab">
                <div class="row">
                    <div class="col-sm-12 col-md-12">
                        <table class="table table-sm table-bordered" id="unidades-tbl" style="text-align:center; width:100% !important;">
                            <thead class="table-primary">
                                <tr>
                                    <th class="text-center">#</th>
                                    <th>Nombre de la unidad</th>
                                    <th class="text-center">Cantidad de empleados</th>
                                    <th class="text-center">Fecha de registro</th>
                                    <th class="text-center">Usuario</th>
                                    <th class="text-center">Acciones</th>

                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="contenedor-horaExtra" role="tabpanel" aria-labelledby="horaExtra-tab">
                <div class="row">
                    <div class="col-sm-12 col-md-12">
                        <table class="table table-sm table-bordered" id="tipoHorasExtra" style="text-align:center; width:100% !important;">
                            <thead class="table-primary">
                                <tr>
                                    <th class="text-center">CodTipo</th>
                                    <th>Tipo hora extra</th>
                                    <th class="text-center">Factor</th>
                                    <th class="text-center">Recargo</th>
                                    <th class="text-center">Planilla complementaria</th>
                                    <th class="text-center">Aplica cotizaciones</th>
                                    <th class="text-center">Aplica renta</th>
                                    <th class="text-center">Calcular sobre salario</th>
                                    <th class="text-center">Acciones</th>

                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="contenedor-otrosIngresos" role="tabpanel" aria-labelledby="otrosIngresos-tab">
                <div class="row">
                    <div class="col-sm-12 col-md-12">
                        <table class="table table-bordered" id="tipoOtrosingresos" style="text-align:center; width:100% !important;">
                            <thead class="table-primary">
                                <tr>
                                    <th class="text-center">CodTipo</th>
                                    <th>Tipo otro ingreso</th>
                                    <th class="text-center">Planilla complementaria</th>
                                    <th class="text-center">Aplica cotizaciones</th>
                                    <th class="text-center">Aplica renta</th>
                                    <th class="text-center">Estado</th>
                                </tr>
                            </thead>
                            <tbody>

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


            </div>

        </div>

    </div>

</div>

<div class="modal fade" id="modal-unidad" data-bs-keyboard="false" data-bs-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-tittle">Unidad de trabajo</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body pt-1">
                <form id="unidad-form" name="unidad-form" accept-charset="utf-8" class="needs-validation" novalidate>
                    <div class="row">
                        <div class="col-12 mayusculas">
                            <label for="txt-unidadTrabajo" class="form-label">Unidad de trabajo <span class="required">*</span></label>
                            <input type="text" class="form-control form-control-sm" id="txt-unidadTrabajo" name="txt-unidadTrabajo" required>
                            <div class="invalid-feedback">
                                Por favor ingrese la unidad de trabajo.
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="submit" form="unidad-form" class="btn btn-sm btn-primary">
                    <i class="fas fa-save"></i> Guardar
                </button>
                <button type="button" data-bs-dismiss="modal" class="btn btn-sm btn-secondary">
                    <i class="fas fa-close"></i> Cerrar
                </button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modal-tiposHorasExtra" data-bs-keyboard="false" data-bs-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-tittle">Tipo de hora extra</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body pt-1">
                <form id="tipoHorasExtra-form" name="tipoHorasExtra-form" accept-charset="utf-8" class="needs-validation" novalidate>
                    <div class="row">
                        <div class="col-12">
                            <label for="num-codtipo" class="form-label">Codtipo <span class="required">*</span></label>
                            <input type="number" class="form-control form-control-sm" id="num-codtipo" name="num-codtipo" required min="0" step="1" onkeypress="return soloNumeros(event);">
                            <div class="invalid-feedback">
                                Por favor ingrese el código tipo.
                            </div>
                        </div>
                        <div class="col-12 mayusculas">
                            <label for="txt-tiposHorasExtra" class="form-label">Tipo de hora extra <span class="required">*</span></label>
                            <input type="text" class="form-control form-control-sm" id="txt-tiposHorasExtra" name="txt-tiposHorasExtra" required>
                            <div class="invalid-feedback">
                                Por favor ingrese el tipo de hora extra.
                            </div>
                        </div>
                        <div class="col-12">
                            <label for="num-factor" class="form-label">Factor <span class="required">*</span></label>
                            <input type="number" class="form-control form-control-sm" id="num-factor" name="num-factor" required min="0" step="0.01">
                            <div class="invalid-feedback">
                                Por favor ingrese el factor.
                            </div>
                        </div>
                        <div class="col-12">
                            <label for="num-recargo" class="form-label">Recargo <span class="required">*</span></label>
                            <input type="number" class="form-control form-control-sm" id="num-recargo" name="num-recargo" required min="0" step="0.01">
                            <div class="invalid-feedback">
                                Por favor ingrese el recargo.
                            </div>
                        </div>
                        <div class="col-12 mt-3">
                            <div class="row">
                                <div class="col-6">
                                    <div class="d-flex align-middle justify-content-between">
                                        <label style="margin-top:3px; font-weight:bold;">¿Planilla complementaria?</label>
                                        <input type="checkbox" id="chk-planillaComplementariaHE" switch="none">
                                        <label for="chk-planillaComplementariaHE" data-on-label="Si" data-off-label="No"></label>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="d-flex align-middle justify-content-between">
                                        <label style="margin-top:3px; font-weight:bold;">¿Aplica cotizaciones?</label>
                                        <input type="checkbox" id="chk-cotizacionesHoras" switch="none">
                                        <label for="chk-cotizacionesHoras" data-on-label="Si" data-off-label="No"></label>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="d-flex align-middle justify-content-between">
                                        <label style="margin-top:3px; font-weight:bold;">¿Aplica renta?</label>
                                        <input type="checkbox" id="chk-rentaHoras" switch="none">
                                        <label for="chk-rentaHoras" data-on-label="Si" data-off-label="No"></label>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="d-flex align-middle justify-content-between">
                                        <label style="margin-top:3px; font-weight:bold;">¿Calcular sobre salario?</label>
                                        <input type="checkbox" id="chk-calcularSobreSalario" switch="none">
                                        <label for="chk-calcularSobreSalario" data-on-label="Si" data-off-label="No"></label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="submit" form="tipoHorasExtra-form" class="btn btn-sm btn-primary">
                    <i class="fas fa-save"></i> Guardar
                </button>
                <button type="button" data-bs-dismiss="modal" class="btn btn-sm btn-secondary">
                    <i class="fas fa-close"></i> Cerrar
                </button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modal-tiposOtrosIngresos" data-bs-keyboard="false" data-bs-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-tittle">Tipos de otros ingresos </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body pt-1">
                <form id="tiposOtrosIngresos-form" name="tiposOtrosIngresos-form" accept-charset="utf-8" class="needs-validation" novalidate>
                    <div class="row">
                        <div class="col-12 mayusculas">
                            <label for="num-codTipoOtroIngreso" class="form-label">CodTipo <span class="required">*</span></label>
                            <input type="number" class="form-control form-control-sm" id="num-codTipoOtroIngreso" name="num-codTipoOtroIngreso" required>
                            <div class="invalid-feedback">
                                Por favor ingrese CodTipo
                            </div>
                        </div>
                        <div class="col-12">
                            <label for="txt-tipoOtroIngreso" class="form-label">Tipo otro ingreso <span class="required">*</span></label>
                            <input type="text" class="form-control form-control-sm" id="txt-tipoOtroIngreso" name="txt-tipoOtroIngreso" required min="0" step="0.01">
                            <div class="invalid-feedback">
                                Por favor ingrese el factor.
                            </div>
                        </div>
                        <div class="col-12 mt-3">
                            <div class="row">
                                <div class="col-6">
                                    <div class="d-flex align-middle justify-content-between">
                                        <label style="margin-top:3px; font-weight:bold;">¿Planilla complementaria?</label>
                                        <input type="checkbox" id="chk-planillaComplementariaOI" switch="none">
                                        <label for="chk-planillaComplementariaOI" data-on-label="Si" data-off-label="No"></label>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-6">
                                    <div class="d-flex align-middle justify-content-between">
                                        <label style="margin-top:3px; font-weight:bold;">¿Aplica cotizaciones?</label>
                                        <input type="checkbox" id="chk-cotizaciones" switch="none">
                                        <label for="chk-cotizaciones" data-on-label="Si" data-off-label="No"></label>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="d-flex align-middle justify-content-between">
                                        <label style="margin-top:3px; font-weight:bold;">¿Aplica renta?</label>
                                        <input type="checkbox" id="chk-renta" switch="none">
                                        <label for="chk-renta" data-on-label="Si" data-off-label="No"></label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="submit" form="tiposOtrosIngresos-form" class="btn btn-sm btn-primary">
                    <i class="fas fa-save"></i> Guardar
                </button>
                <button type="button" data-bs-dismiss="modal" class="btn btn-sm btn-secondary">
                    <i class="fas fa-close"></i> Cerrar
                </button>
            </div>
        </div>
    </div>
</div>

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

//unidades de trabajo, tipo de horas extras tipos de personas b 5.1