<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">Configuración de bonos a empleados</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 active">Bonos a empleados</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-4 col-lg-3">
                            <div class="d-grid">
                                &nbsp;
                                <button class="btn btn-sm btn-primary" type="submit" id="btn-buscar" 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-periodicos" data-bs-toggle="tab" aria-expanded="false" class="nav-link active" id="periodicos-tab">
                    <i class="fa-solid fa-clock-rotate-left nav-icon nav-tab-position"></i>
                    <h5 class="nav-titl nav-tab-position m-0">Periódicos</h5>
                </a>
            </li>
            <li class="nav-item">
                <a href="#contenedor-unicos" data-bs-toggle="tab" aria-expanded="true" class="nav-link" id="unicos-tab">
                    <i class="fa-solid fa-bolt nav-icon nav-tab-position"></i>
                    <h5 class="nav-titl nav-tab-position m-0">Únicos</h5>
                </a>
            </li>
            <li class="nav-item ms-auto">
                <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="button" disabled id="btn-agregar">
                        <i class="fas fa-plus"></i>
                        <span>Agregar nuevo</span>
                    </button>
                </div>
            </li>
        </ul>
    </div>
    <div class="card-body pt-0">
        <div class="tab-content text-muted">
            <div class="tab-pane fade show active pt-3" id="contenedor-periodicos">
                <div class="row">
                    <div class="col-12">
                        <table class="table table-sm table-bordered" id="bonosPeriodicos-tbl" style="text-align:center; width:100% !important;">
                            <thead>
                                <tr>
                                    <th class="text-center">#</th>
                                    <th>Descripción</th>
                                    <th class="text-center">Periodicidad</th>
                                    <th class="text-center">Monto</th>
                                    <th class="text-center">Empleados</th>
                                    <th class="text-center">Fecha de registro</th>
                                    <th class="text-center">Último modificación</th>
                                    <th class="text-center">Última aplicación</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 pt-3" id="contenedor-unicos">
                <div class="row">
                    <div class="col-12">
                        <table class="table table-sm table-bordered" id="bonosUnicos-tbl" style="text-align:center; width:100% !important;">
                            <thead>
                                <tr>
                                    <th class="text-center">#</th>
                                    <th>Descripción</th>
                                    <th class="text-center">Fecha de pago</th>
                                    <th class="text-center">Monto</th>
                                    <th class="text-center">Empleados</th>
                                    <th class="text-center">Fecha de registro</th>
                                    <th class="text-center">Última modificación</th>
                                    <th class="text-center">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-bonoPeriodico" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Configuración de bono periódico</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="btn-cerrar-modal"></button>
            </div>
            <div class="modal-body pt-1">
                <form id="bonoPeriodico-form" name="bonoPeriodico-form" accept-charset="utf-8" class="needs-validation" novalidate>
                    <div class="row">
                        <div class="col-12 mayusculas">
                            <label for="txt-descripcionPeriodico" class="form-label">Descripción <span class="required">*</span></label>
                            <input type="text" id="txt-descripcionPeriodico" name="txt-descripcionPeriodico" class="form-control form-control-sm" required>
                            <div class="invalid-feedback">
                                Debe ingresar una descripción.
                            </div>
                        </div>
                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <label for="cbo-periodicidad" class="form-label">Periodicidad <span class="required">*</span></label>
                            <select class="form-select form-select-sm" id="cbo-periodicidad" name="cbo-periodicidad" required>
                                <option value="" selected disabled>Seleccione</option>
                                <option value="1">Quincenal</option>
                                <option value="2">Mensual</option>
                            </select>
                            <div class="invalid-feedback">
                                Debe seleccionar una periodicidad.
                            </div>
                        </div>
                        <div class="col-sm-6 col-md-4 col-lg-6">
                            <label class="form-label">Notas</label>
                            <input type="text" class="form-control form-control-sm info" id="txt-notasPeriodico" name="txt-notasPeriodico" readonly value="Seleccione una periodicidad">
                        </div>
                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <label for="num-montoPeriodico" class="form-label">Monto <span class="required">*</span></label>
                            <div class="input-group input-group-sm has-validation">
                                <span class="input-group-text">$</span>
                                <input type="number" id="num-montoPeriodico" name="num-montoPeriodico" class="form-control form-control-sm" required min="0" step="0.01">
                                <div class="invalid-feedback">
                                    Debe ingresar un monto.
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 mt-2">
                            <table class="table table-sm table-bordered" id="detallePeriodico-tbl" style="text-align:center; width:100% !important;">
                                <thead>
                                    <tr>
                                        <th class="text-center">#</th>
                                        <th class="text-center">Tipo</th>
                                        <th>Asignación</th>
                                        <th>Departamento</th>
                                        <th>Cargo</th>
                                        <th class="text-center">Fecha de aplicación</th>
                                        <th class="text-center">Usuario</th>
                                        <th class="text-center">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-sm btn-primary" type="submit" form="bonoPeriodico-form">
                    <i class="mdi mdi-content-save"></i> Guardar
                </button>
                <button class="btn btn-sm btn-secondary" type="button" data-bs-dismiss="modal" id="btn-cerrar-modal">
                    <i class="mdi mdi-close"></i> Cerrar
                </button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modal-bonoExtraordinario" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Configuración de bono extraordinario</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="btn-cerrar-modal"></button>
            </div>
            <div class="modal-body pt-1">
                <form id="bonoExtraordinario-form" name="bonoExtraordinario-form" accept-charset="utf-8" class="needs-validation" novalidate>
                    <div class="row">
                        <div class="col-12 mayusculas">
                            <label for="txt-descripcionExtraordinario" class="form-label">Descripción <span class="required">*</span></label>
                            <input type="text" id="txt-descripcionExtraordinario" name="txt-descripcionExtraordinario" class="form-control form-control-sm" required>
                            <div class="invalid-feedback">
                                Debe ingresar una descripción.
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-4 col-lg-2">
                            <label for="txt-mesPagoExtraordinario" class="form-label">Mes de pago <span class="required">*</span></label>
                            <input type="text" id="txt-mesPagoExtraordinario" name="txt-mesPagoExtraordinario" 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-4 col-lg-2">
                            <label for="cbo-quincenaExtraordinario" class="form-label">Quincena <span class="required">*</span></label>
                            <select class="form-select form-select-sm" id="cbo-quincenaExtraordinario" name="cbo-quincenaExtraordinario" 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-4 col-lg-3">
                            <label for="num-montoExtraordinario" class="form-label">Monto <span class="required">*</span></label>
                            <div class="input-group input-group-sm has-validation">
                                <span class="input-group-text">$</span>
                                <input type="number" id="num-montoExtraordinario" name="num-montoExtraordinario" class="form-control form-control-sm" required min="0" step="0.01">
                                <div class="invalid-feedback">
                                    Debe ingresar un monto.
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 mt-2">
                            <table class="table table-sm table-bordered" id="detalleExtraordinario-tbl" style="text-align:center; width:100% !important;">
                                <thead>
                                    <tr>
                                        <th class="text-center">#</th>
                                        <th class="text-center">Tipo</th>
                                        <th>Asignación</th>
                                        <th>Departamento</th>
                                        <th>Cargo</th>
                                        <th class="text-center">Fecha de aplicación</th>
                                        <th class="text-center">Usuario</th>
                                        <th class="text-center">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-sm btn-primary" type="submit" form="bonoExtraordinario-form">
                    <i class="mdi mdi-content-save"></i> Guardar
                </button>
                <button class="btn btn-sm btn-secondary" type="button" data-bs-dismiss="modal" id="btn-cerrar-modal">
                    <i class="mdi mdi-close"></i> Cerrar
                </button>
            </div>
        </div>
    </div>
</div>

<div id="modal-asignacion" class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Asignación a bono</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="btn-cerrar-modal"></button>
            </div>
            <div class="modal-body pt-1">
                <form id="asignacion-form" name="asignacion-form" accept-charset="utf-8" class="needs-validation" novalidate>
                    <div class="row">
                        <div class="col-12">
                            <label for="cbo-tipoAsignacion" class="form-label">Tipo de asignación <span class="required">*</span></label>
                            <select id="cbo-tipoAsignacion" name="cbo-tipoAsignacion" class="form-select form-select-sm" required>
                                <option value="">Seleccione</option>
                                <option value="1">Unidad de trabajo</option>
                                <option value="2">Empleado</option>
                                <option value="3">Cargo</option>
                            </select>
                            <div class="invalid-feedback">
                                Debe seleccionar un tipo de asignación.
                            </div>
                        </div>
                        <div class="col-12 d-none" id="contenedor-unidades">
                            <label for="cbo-unidad" class="form-label">Unidad de trabajo <span class="required">*</span></label>
                            <div class="form-group form-group-sm has-validation">
                                <select id="cbo-unidad" name="cbo-unidad" class="form-control form-control-sm selectpicker" data-live-search="true">
                                    <option value="">Seleccione</option>
                                </select>
                                <div class="invalid-feedback">
                                    Debe seleccionar una unidad de trabajo.
                                </div>
                            </div>
                        </div>
                        <div class="col-12 d-none" id="contenedor-empleado">
                            <div class="row">
                                <div class="col-12">
                                    <label for="cbo-departamento" class="form-label">Departamento <span class="required">*</span></label>
                                    <div class="form-group form-group-sm has-validation">
                                        <select id="cbo-departamento" name="cbo-departamento" class="form-control form-control-sm selectpicker" data-live-search="true">
                                            <option value="">Seleccione</option>
                                        </select>
                                        <div class="invalid-feedback">
                                            Debe seleccionar un departamento.
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <label for="cbo-puesto" class="form-label">Puesto <span class="required">*</span></label>
                                    <div class="form-group form-group-sm has-validation">
                                        <select id="cbo-puesto" name="cbo-puesto" class="form-control form-control-sm selectpicker" data-live-search="true">
                                            <option value="">Seleccione un departamento</option>
                                        </select>
                                        <div class="invalid-feedback">
                                            Debe seleccionar un puesto.
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12" id="contenedor-cboEmpleado">
                                    <label for="cbo-empleado" class="form-label">Empleado <span class="required">*</span></label>
                                    <div class="form-group form-group-sm has-validation">
                                        <select id="cbo-empleado" name="cbo-empleado" class="form-control form-control-sm selectpicker" data-live-search="true">
                                            <option value="">Seleccione un puesto</option>
                                        </select>
                                        <div class="invalid-feedback">
                                            Debe seleccionar un empleado.
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-sm btn-primary" type="submit" form="asignacion-form">
                    <i class="mdi mdi-content-save"></i> Guardar
                </button>
                <button class="btn btn-sm btn-secondary" type="button" data-bs-dismiss="modal" id="btn-cerrar-modal">
                    <i class="mdi mdi-close"></i> Cerrar
                </button>
            </div>
        </div>
    </div>
</div>

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