<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">Carga de horas extras y otros ingresos</h4>

            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item">RRHH</li>
                    <li class="breadcrumb-item">Administración</li>
                    <li class="breadcrumb-item">Carga de información</li>
                    <li class="breadcrumb-item active">Horas extras y otros ingresos</li>
                </ol>
            </div>

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

<div class="card">
    <div class="card-header pt-1">
        <form id="ubicacion-form" accept-charset="utf-8" name="ubicacion-form" class="needs-validation" novalidate>
            <div class="row">
                <div class="col-sm-12 col-md-8 col-lg-5">
                    <div class="row">
                        <div class="col-sm-12 col-md-6 col-lg-4">
                            <label for="cbo-tipoPlanilla" class="form-label">Tipo de planilla <span class="required">*</span></label>
                            <div class="form-group form-group-sm has-validation">
                                <select id="cbo-tipoPlanilla" name="cbo-tipoPlanilla" class="form-control form-control-sm selectpicker" data-live-search="true" required>
                                    <option value="">Seleccione</option>
                                </select>
                                <div class="invalid-feedback">
                                    Debe seleccionar un tipo de planilla.
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-6 col-lg-4">
                            <label for="cbo-anio" class="form-label">Año <span class="required">*</span></label>
                            <select id="cbo-anio" name="cbo-anio" class="form-select form-select-sm" required>
                                <option value="">Seleccione</option>
                            </select>
                        </div>
                        <div class="col-sm-12 col-md-4 col-lg-3">
                            <div class="d-grid">
                                &nbsp;
                                <button class="btn btn-sm btn-primary" type="submit" style="margin-top:1.8px !important;">
                                    <i class="mdi mdi-magnify"></i> Buscar
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="border">
        <ul class="nav nav-pills custom-hover-nav-tabs" id="pestaniasPrincipales">
            <li class="nav-item">
                <a href="#contenedor-horasExtras" data-bs-toggle="tab" aria-expanded="false" class="nav-link active" id="horasExtras-tab">
                    <i class="fa-solid fa-stopwatch nav-icon nav-tab-position"></i>
                    <h5 class="nav-titl nav-tab-position m-0">Horas extras</h5>
                </a>
            </li>
            <li class="nav-item">
                <a href="#contenedor-otrosIngresos" data-bs-toggle="tab" aria-expanded="true" class="nav-link" id="otrosIngresos-tab">
                    <i class="fa-solid fa-sack-dollar nav-icon nav-tab-position"></i>
                    <h5 class="nav-titl nav-tab-position m-0">Otros ingresos</h5>
                </a>
            </li>
        </ul>
    </div>
    <div class="card-body pt-0 pe-0 ps-0">
        <div class="tab-content text-muted">
            <div class="tab-pane fade show active p-0" id="contenedor-horasExtras">
                <ul class="nav nav-tabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="historicoHorasExtras-tab" data-bs-toggle="tab" data-bs-target="#historicoHorasExtras-tab-pane" type="button" role="tab" aria-controls="historicoHorasExtras-tab-pane" aria-selected="true">Histórico</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link disabled" id="cargaHorasExtras-tab" data-bs-toggle="tab" data-bs-target="#cargaHorasExtras-tab-pane" type="button" role="tab" aria-controls="cargaHorasExtras-tab-pane" aria-selected="false">Carga</button>
                    </li>
                    <li class="nav-item ms-auto" id="btns-nuevaCargaHoraExtra">
                        <div class="h-100 pe-1 d-flex align-items-center">
                            <button class="btn btn-sm btn-success btn-rounded waves-effect waves-light" type="button" id="btn-nuevaCargaHoraExtra" disabled>
                                <i class="fas fa-file-excel"></i>
                                <span>Cargar archivo</span>
                            </button>
                        </div>
                    </li>
                    <li class="nav-item ms-auto d-none" id="btns-cargaHoraExtra">
                        <div class="h-100 pe-1 d-flex align-items-center">
                            <button class="btn btn-sm btn-primary btn-rounded waves-effect waves-light" type="submit" form="cargaHoraExtra-form" id="btn-guardarCargaHoraExtra">
                                <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" type="button" id="btn-limpiarCargaHoraExtra">
                                <i class="fas fa-times"></i>
                                <span>Cancelar</span>
                            </button>
                        </div>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane fade show active pt-3 ps-2 pe-2" id="historicoHorasExtras-tab-pane" role="tabpanel" aria-labelledby="historicoHorasExtras-tab" tabindex="0">
                        <table class="table table-sm table-bordered" id="historicoHorasExtras-tbl" style="text-align:center; width:100% !important;">
                            <thead>
                                <tr>
                                    <th class="text-center">#</th>
                                    <th>Tipo de planilla</th>
                                    <th class="text-center">Fecha de carga</th>
                                    <th class="text-center">Fecha de pago</th>
                                    <th class="text-center">Empleados</th>
                                    <th class="text-center">Monto total</th>
                                    <th class="text-center">Usuario</th>
                                    <th class="text-center">Estado</th>
                                    <th class="text-center">Acciones</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                    <div class="tab-pane fade pt-1 ps-3 pe-3" id="cargaHorasExtras-tab-pane" role="tabpanel" aria-labelledby="cargaHorasExtras-tab" tabindex="0">
                        <form id="cargaHoraExtra-form" name="cargaHoraExtra-form" accept-charset="utf-8" class="needs-validation" novalidate>
                            <div class="row">
                                <div class="col-sm-12 col-md-12 col-lg-5">
                                    <label for="file-horasExtras" class="form-label">Archivo <span class="required">*</span></label>
                                    <div class="input-group input-group-sm has-validation">
                                        <input type="file" class="form-control form-control-sm" id="file-horasExtras" name="file-horasExtras" accept=".xlsx, .xls">
                                        <button type="button" class="btn btn-sm btn-info" id="btn-formatoHorasExtras">
                                            <i class="fas fa-eye"></i> Ver formato
                                        </button>
                                    </div>
                                    <div class="invalid-feedback">
                                        Debe seleccionar un archivo.
                                    </div>
                                </div>
                                <div class="col-sm-12 col-md-6 col-lg-2">
                                    <label for="txt-mesPagoHoraExtra" class="form-label">Mes de pago <span class="required">*</span></label>
                                    <input type="text" id="txt-mesPagoHoraExtra" name="txt-mesPagoHoraExtra" class="form-control form-control-sm flatpickr" data-only-MY="true" data-min-month="true" required>
                                    <div class="invalid-feedback" data-static="false">
                                        Debe ingresar un mes de pago.
                                    </div>
                                </div>
                                <div class="col-sm-12 col-md-6 col-lg-2">
                                    <label for="cbo-quincenaPagoHoraExtra" class="form-label">Quincena <span class="required">*</span></label>
                                    <select class="form-select form-select-sm" id="cbo-quincenaPagoHoraExtra" name="cbo-quincenaPagoHoraExtra" required>
                                        <option value="" selected disabled>Seleccione</option>
                                        <option value="1">Primera</option>
                                        <option value="2">Segunda</option>
                                    </select>
                                    <div class="invalid-feedback">
                                        Debe seleccionar una quincena.
                                    </div>
                                </div>
                                <!-- <div class="col-sm-12 col-md-6 col-lg-2">
                                    <span class="badge bg-info" style="font-size: 1rem; margin-top:27.5px;" id="spn-procesoHoraExtra">Carga nueva</span>
                                </div> -->
                            </div>
                            <div class="row pb-2">
                                <div class="col-sm-12 col-md-6 col-lg-2">
                                    <label for="num-totalRegistrosHE" class="form-label">Total de registros</label>
                                    <input type="number" id="num-totalRegistrosHE" name="num-totalRegistrosHE" class="form-control form-control-sm" readonly>
                                </div>
                                <div class="col-sm-12 col-md-6 col-lg-2">
                                    <label for="num-totalEmpleadosHE" class="form-label">Total de empleados</label>
                                    <input type="number" id="num-totalEmpleadosHE" name="num-totalEmpleadosHE" class="form-control form-control-sm" readonly>
                                </div>
                                <div class="col-sm-12 col-md-6 col-lg-2">
                                    <label for="num-totalMontoHE" class="form-label">Monto total</label>
                                    <div class="input-group input-group-sm">
                                        <span class="input-group-text">$</span>
                                        <input type="number" id="num-totalMontoHE" name="num-totalMontoHE" class="form-control form-control-sm text-start" readonly>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <div class="row mt-2">
                            <div class="col-12">
                                <table class="table table-sm table-bordered" id="cargaHorasExtras-tbl" style="text-align:center; width:100% !important;">
                                    <thead>
                                        <tr>
                                            <th class="text-center">#</th>
                                            <th class="text-center">Tipo de planilla</th>
                                            <th class="text-center">CODEMPLEADO</th>
                                            <th>Nombre completo</th>
                                            <th>Concepto</th>
                                            <th class="text-center">Tipo de hora</th>
                                            <th class="text-center">Cantidad</th>
                                            <th class="text-center">Monto</th>
                                            <th class="text-center">Acciones</th>
                                        </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade p-0" id="contenedor-otrosIngresos">
                <ul class="nav nav-tabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="historicoOtrosIngresos-tab" data-bs-toggle="tab" data-bs-target="#historicoOtrosIngresos-tab-pane" type="button" role="tab" aria-controls="historicoOtrosIngresos-tab-pane" aria-selected="true">Histórico</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link disabled" id="cargaOtrosIngresos-tab" data-bs-toggle="tab" data-bs-target="#cargaOtrosIngresos-tab-pane" type="button" role="tab" aria-controls="cargaOtrosIngresos-tab-pane" aria-selected="false">Carga</button>
                    </li>
                    <li class="nav-item ms-auto" id="btns-nuevaCargaOtrosIngresos">
                        <div class="h-100 pe-1 d-flex align-items-center">
                            <button class="btn btn-sm btn-success btn-rounded waves-effect waves-light" type="button" id="btn-nuevaCargaOtrosIngresos" disabled>
                                <i class="fas fa-file-excel"></i>
                                <span>Cargar archivo</span>
                            </button>
                        </div>
                    </li>
                    <li class="nav-item ms-auto d-none" id="btns-cargaOtrosIngresos">
                        <div class="h-100 pe-1 d-flex align-items-center">
                            <button class="btn btn-sm btn-primary btn-rounded waves-effect waves-light" type="submit" form="cargaOtrosIngresos-form" id="btn-guardarCargaOtrosIngresos">
                                <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" type="button" id="btn-limpiarCargaOtrosIngresos">
                                <i class="fas fa-times"></i>
                                <span>Cancelar</span>
                            </button>
                        </div>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane fade show active pt-3 ps-2 pe-2" id="historicoOtrosIngresos-tab-pane" role="tabpanel" aria-labelledby="historicoOtrosIngresos-tab" tabindex="0">
                        <table class="table table-sm table-bordered" id="historicoOtrosIngresos-tbl" style="text-align:center; width:100% !important;">
                            <thead>
                                <tr>
                                    <th class="text-center">#</th>
                                    <th>Tipo de planilla</th>
                                    <th class="text-center">Fecha de carga</th>
                                    <th class="text-center">Fecha de pago</th>
                                    <th class="text-center">Empleados</th>
                                    <th class="text-center">Monto total</th>
                                    <th class="text-center">Usuario</th>
                                    <th class="text-center">Estado</th>
                                    <th class="text-center">Acciones</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                    <div class="tab-pane fade pt-1 ps-3 pe-3" id="cargaOtrosIngresos-tab-pane" role="tabpanel" aria-labelledby="cargaOtrosIngresos-tab" tabindex="0">
                        <form id="cargaOtrosIngresos-form" name="cargaOtrosIngresos-form" accept-charset="utf-8" class="needs-validation" novalidate>
                            <div class="row">
                                <div class="col-sm-12 col-md-12 col-lg-5">
                                    <label for="file-otrosIngresos" class="form-label">Archivo <span class="required">*</span></label>
                                    <div class="input-group input-group-sm has-validation">
                                        <input type="file" class="form-control form-control-sm" id="file-otrosIngresos" name="file-otrosIngresos" accept=".xlsx, .xls">
                                        <button type="button" class="btn btn-sm btn-info" id="btn-formatoOtrosIngresos">
                                            <i class="fas fa-eye"></i> Ver formato
                                        </button>
                                    </div>
                                    <div class="invalid-feedback">
                                        Debe seleccionar un archivo.
                                    </div>
                                </div>
                                <div class="col-sm-12 col-md-6 col-lg-2">
                                    <label for="txt-mesPagoOtrosIngresos" class="form-label">Mes de pago <span class="required">*</span></label>
                                    <input type="text" id="txt-mesPagoOtrosIngresos" name="txt-mesPagoOtrosIngresos" class="form-control form-control-sm flatpickr" data-only-MY="true" data-min-month="true" required>
                                    <div class="invalid-feedback" data-static="false">
                                        Debe ingresar un mes de pago.
                                    </div>
                                </div>
                                <div class="col-sm-12 col-md-6 col-lg-2">
                                    <label for="cbo-quincenaOtrosIngresos" class="form-label">Quincena <span class="required">*</span></label>
                                    <select class="form-select form-select-sm" id="cbo-quincenaOtrosIngresos" name="cbo-quincenaOtrosIngresos" required>
                                        <option value="" selected disabled>Seleccione</option>
                                        <option value="1">Primera</option>
                                        <option value="2">Segunda</option>
                                    </select>
                                    <div class="invalid-feedback">
                                        Debe seleccionar una quincena.
                                    </div>
                                </div>
                                <!-- <div class="col-sm-12 col-md-6 col-lg-2">
                                    <span class="badge bg-info" style="font-size: 1rem; margin-top:27.5px;" id="spn-procesoOtroIngreso">Carga nueva</span>
                                </div> -->
                            </div>
                            <div class="row pb-2">
                                <div class="col-sm-12 col-md-6 col-lg-2">
                                    <label for="num-totalRegistrosOI" class="form-label">Total de registros</label>
                                    <input type="number" id="num-totalRegistrosOI" name="num-totalRegistrosOI" class="form-control form-control-sm" readonly>
                                </div>
                                <div class="col-sm-12 col-md-6 col-lg-2">
                                    <label for="num-totalEmpleadosOI" class="form-label">Total de empleados</label>
                                    <input type="number" id="num-totalEmpleadosOI" name="num-totalEmpleadosOI" class="form-control form-control-sm" readonly>
                                </div>
                                <div class="col-sm-12 col-md-6 col-lg-2">
                                    <label for="num-totalMontoOI" class="form-label">Monto total</label>
                                    <div class="input-group input-group-sm">
                                        <span class="input-group-text">$</span>
                                        <input type="number" id="num-totalMontoOI" name="num-totalMontoOI" class="form-control form-control-sm text-start" readonly>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <div class="row mt-2">
                            <div class="col-12">
                                <table class="table table-sm table-bordered" id="cargaOtrosIngresos-tbl" style="text-align:center; width:100% !important;">
                                    <thead>
                                        <tr>
                                            <th class="text-center">#</th>
                                            <th class="text-center">Tipo de planilla</th>
                                            <th class="text-center">CODEMPLEADO</th>
                                            <th>Nombre completo</th>
                                            <th>Concepto</th>
                                            <th class="text-center">Tipo de ingreso</th>
                                            <th class="text-center">Monto</th>
                                            <th class="text-center">Acciones</th>
                                        </tr>
                                    </thead>
                                    <tbody>

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

<div class="modal fade show" id="modal-formatoHorasExtras">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Detalles de plantilla de excel para carga de horas extras</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-12">
                        <table class="table table-sm table-bordered table-responsive responsive w-100">
                            <thead>
                                <tr>
                                    <th rowspan="2">Reglas</th>
                                    <th colspan="9" class="text-center">Columnas</th>
                                </tr>
                                <tr>
                                    <th class="text-center">codempleado</th>
                                    <th class="text-center">tipoPlanilla</th>
                                    <th class="text-center">concepto</th>
                                    <th class="text-center">tipoHora</th>
                                    <th class="text-center">cantidad</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Obligatorio</td>
                                    <td class="text-center">SI</td>
                                    <td class="text-center">SI</td>
                                    <td class="text-center">SI</td>
                                    <td class="text-center">SI</td>
                                    <td class="text-center">SI</td>
                                </tr>
                                <tr>
                                    <td>Permite vacíos</td>
                                    <td class="text-center">NO</td>
                                    <td class="text-center">NO</td>
                                    <td class="text-center">NO</td>
                                    <td class="text-center">NO</td>
                                    <td class="text-center">NO</td>
                                </tr>
                                <tr>
                                    <td>Tipo de dato</td>
                                    <td class="text-center">Texto</td>
                                    <td class="text-center">Número entero</td>
                                    <td class="text-center">Texto</td>
                                    <td class="text-center">Número entero</td>
                                    <td class="text-center">Número con decimales</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="col-12">
                        <div class="badge bg-warning text-justify" style="font-size: 1.25em; white-space:normal; text-align:justify !important;">
                            <strong class="text-dark">Nota: </strong>El archivo debe contener únicamente la hoja de cálculo con los datos a importar. El orden de las columnas puede variar, pero los nombres de las columnas deben ser los mismos que se muestran en la tabla anterior.
                        </div>
                    </div>
                    <div class="col-12 mt-2">
                        <label class="form-label w-100 text-center">Captura de ejemplo</label>
                        <div class="d-flex w-100 justify-content-center">
                            <img src="main/RRHH/assets/images/plantillaHoraExtra.png" alt="Ejemplo de importación" class="img-fluid">
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <a class="btn btn-sm btn-success btn-rounded waves-effect waves-light" href="main/RRHH/docs/plantillas/cargaHorasExtras.xlsx">
                    <i class="fas fa-download"></i>
                    Descargar plantilla
                </a>
                <button type="button" class="btn btn-sm btn-danger btn-rounded waves-effect waves-light" data-bs-dismiss="modal">
                    <i class="fas fa-times"></i>
                    Cerrar
                </button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade show" id="modal-formatoOtrosIngresos">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Detalles de plantilla de excel para carga de otros ingresos</h4>
            </div>
            <div class="modal-body pt-1">
                <div class="row">
                    <div class="col-12">
                        <table class="table table-sm table-bordered table-responsive responsive w-100">
                            <thead>
                                <tr>
                                    <th rowspan="2">Reglas</th>
                                    <th colspan="9" class="text-center">Columnas</th>
                                </tr>
                                <tr>
                                    <th class="text-center">codempleado</th>
                                    <th class="text-center">tipoPlanilla</th>
                                    <th class="text-center">concepto</th>
                                    <th class="text-center">tipoIngreso</th>
                                    <th class="text-center">monto</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Obligatorio</td>
                                    <td class="text-center">SI</td>
                                    <td class="text-center">SI</td>
                                    <td class="text-center">SI</td>
                                    <td class="text-center">SI</td>
                                    <td class="text-center">SI</td>
                                </tr>
                                <tr>
                                    <td>Permite vacíos</td>
                                    <td class="text-center">NO</td>
                                    <td class="text-center">NO</td>
                                    <td class="text-center">NO</td>
                                    <td class="text-center">NO</td>
                                    <td class="text-center">NO</td>
                                </tr>
                                <tr>
                                    <td>Tipo de dato</td>
                                    <td class="text-center">Texto</td>
                                    <td class="text-center">Número entero</td>
                                    <td class="text-center">Texto</td>
                                    <td class="text-center">Número entero</td>
                                    <td class="text-center">Número con decimales</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="col-12">
                        <div class="badge bg-warning text-justify" style="font-size: 1.25em; white-space:normal; text-align:justify !important;">
                            <strong class="text-dark">Nota: </strong>El archivo debe contener únicamente la hoja de cálculo con los datos a importar. El orden de las columnas puede variar, pero los nombres de las columnas deben ser los mismos que se muestran en la tabla anterior.
                        </div>
                    </div>
                    <div class="col-12 mt-2">
                        <label class="form-label w-100 text-center">Captura de ejemplo</label>
                        <div class="d-flex w-100 justify-content-center">
                            <img src="main/RRHH/assets/images/plantillaOtrosIngresos.png" alt="Ejemplo de importación" class="img-fluid">
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <a class="btn btn-sm btn-success btn-rounded waves-effect waves-light" href="main/RRHH/docs/plantillas/cargaOtrosIngresos.xlsx">
                    <i class="fas fa-download"></i>
                    Descargar plantilla
                </a>
                <button type="button" class="btn btn-sm btn-danger btn-rounded waves-effect waves-light" data-bs-dismiss="modal">
                    <i class="fas fa-times"></i>
                    Cerrar
                </button>
            </div>
        </div>
    </div>
</div>
<?php
$jsModules = [
    'cargaHorasOtrosIngresosPage'
];
