<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">Generación de archivo para 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">Pagos</li>
                    <li class="breadcrumb-item active">Planilla única</li>
                </ol>
            </div>

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

<div class="card">
    <div class="card-body pt-1">
        <form id="busqueda-form" name="busqueda-form" accept-charset="utf-8" class="needs-validation" novalidate>
            <div class="row">
                <div class="col-sm-12 col-md-4 col-lg-2">
                    <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 title="">
                            <option selected disabled value="0">Seleccione</option>
                        </select>
                        <div class="invalid-feedback">
                            Seleccione un tipo de planilla
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 col-md-4 col-lg-2">
                    <label for="txt-periodo" class="form-label">
                        Periodo
                        <span class="required">*</span>
                    </label>
                    <input type="text" id="txt-periodo" name="txt-periodo" class="form-control form-control-sm flatpickr" data-only-MY="true" data-max-today="true" required>
                    <div class="invalid-feedback">
                        Ingrese un periodo
                    </div>
                </div>
                <div class="col-sm-12 col-md-4 col-lg-2">
                    <label for="txt-periodo" class="form-label">
                        Configuración
                        <span class="required">*</span>
                    </label>
                    <select class="form-select form-select-sm" id="cbo-configuracion" name="cbo-configuracion" required>
                        <option value="0">Retomar último proceso</option>
                        <option value="1">Generar datos nuevos</option>
                    </select>
                    <div class="invalid-feedback">
                        Seleccione una opción
                    </div>
                </div>
                <div class="col-sm-12 col-md-4 col-lg-2">
                    <div class="row">
                        <div class="col-sm-12 col-md-12 col-lg-8 mt-sm-0 mt-md-4 mt-lg-4">
                            <div class="d-grid" style="padding-top:4px !important;">
                                <button type="submit" class="btn btn-primary btn-sm">
                                    <i class="mdi mdi-magnify"></i> Buscar
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
        <hr class="mt-1 mb-2" />
        <div class="row">
            <div class="col-12 mb-2 alert alert-info" style="padding: 0.4rem 1rem;">
                <div class="row">
                    <div class="col-sm-12 col-md-8 col-lg d-flex align-items-center">
                        <span class="text-info" id="lbl-info">
                            <i class="mdi mdi-information-outline"></i> Seleccione un tipo de planilla y un periodo para buscar los empleados
                        </span>
                        <span class="text-info ms-2" id="lbl-info-cantidad"></span>
                    </div>
                    <div class="col-sm-12 col-md-4 col-lg-3 ms-auto">
                        <div class="row">
                            <div class="col-4">
                                <div class="d-grid" style="padding-top:0 !important">
                                    <button class="btn btn-sm btn-success" type="button" id="btn-excel" disabled>
                                        <i class="mdi mdi-file-excel-outline"></i> Excel
                                    </button>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="d-grid" style="padding-top:0 !important">
                                    <button class="btn btn-sm btn-success" type="button" id="btn-csv" disabled>
                                        <i class="mdi mdi-file-csv-outline"></i> CSV
                                    </button>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="d-grid" style="padding-top:0 !important">
                                    <button class="btn btn-sm btn-primary" type="button" id="btn-agregar-extra" disabled>
                                        <i class="mdi mdi-plus"></i> Extra
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12">
                <table class="table table-bordered table-sm display nowrap" id="empleados-tbl" style="text-align:center; width:100% !important;">
                    <thead>
                        <tr>
                            <th class="text-center">N°</th>
                            <th class="text-center">CODEMPLEADO</th>
                            <th class="text-center">Tipo</th>
                            <th class="text-center">Documento</th>
                            <th>Primer nombre</th>
                            <th>Segundo nombre</th>
                            <th>Primer apellido</th>
                            <th>Segundo apellido</th>
                            <th>Apellido casada</th>
                            <th class="text-center">Documento empleador</th>
                            <th class="text-center">Número patronal</th>
                            <th class="text-center">Periodo</th>
                            <th class="text-center">Centro de trabajo</th>
                            <th class="text-center">Número patronal afiliado</th>
                            <th class="text-center">Institucion previsional</th>
                            <th class="text-center">Salario</th>
                            <th class="text-center">Pago adicional</th>
                            <th class="text-center">Monto vacación</th>
                            <th class="text-center">Días</th>
                            <th class="text-center">Horas</th>
                            <th class="text-center">Dias vacación</th>
                            <th class="text-center">Código #1</th>
                            <th class="text-center">Código #2</th>
                            <th class="text-center">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>

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

    </div>
</div>

<div class="modal fade" id="modal-empleado" data-bs-keyboard="false" data-bs-backdrop="static">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="mdi mdi-account-circle-outline"></i> Datos del empleado
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
            </div>
            <div class="modal-body pt-1">
                <form id="empleado-form" name="empleado-form" accept-charset="utf-8" class="needs-validation" novalidate>
                    <div class="row">
                        <div class="col-sm-12 col-md-4 col-lg-2">
                            <label for="txt-codempleado" class="form-label">CODEMPLEADO
                                <span class="required">*</span>
                            </label>
                            <div class="input-group input-group-sm has-validation">
                                <input type="text" id="txt-codempleado" name="txt-codempleado" class="form-control form-control-sm" placeholder="CODEMPLEADO" required />
                                <button type="button" class="btn btn-sm btn-primary d-none" id="btn-buscar-empleado">
                                    <i class="mdi mdi-magnify"></i>
                                </button>
                                <div class="invalid-feedback">
                                    Ingrese un CODEMPLEADO
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-4 col-lg-2">
                            <label for="cbo-tipoDocumento" class="form-label">Tipo de documento
                                <span class="required">*</span>
                            </label>
                            <select id="cbo-tipoDocumento" name="cbo-tipoDocumento" class="form-select form-select-sm" title="" required>
                                <option selected disabled value="">Seleccione</option>
                            </select>
                            <div class="invalid-feedback">
                                Seleccione un tipo de documento
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-4 col-lg-2">
                            <label for="txt-numeroDocumento" class="form-label">Número de documento
                                <span class="required">*</span>
                            </label>
                            <input type="text" id="txt-numeroDocumento" name="txt-numeroDocumento" class="form-control form-control-sm" required readonly />
                            <div class="invalid-feedback">
                                Ingrese un número de documento
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-4 col-lg-2">
                            <label for="txt-numeroPatronal" class="form-label">Número patronal
                                <span class="required">*</span>
                            </label>
                            <input type="text" id="txt-numeroPatronal" name="txt-numeroPatronal" class="form-control form-control-sm" required readonly />
                            <div class="invalid-feedback">
                                Ingrese un número de documento
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-4 col-lg-2">
                            <label for="cbo-institucionPrevisional" class="form-label">Institución previsional
                                <span class="required">*</span>
                            </label>
                            <select id="cbo-institucionPrevisional" name="cbo-institucionPrevisional" class="form-select form-select-sm" title="" required>
                                <option selected disabled value="">Seleccione</option>
                            </select>
                            <div class="invalid-feedback">
                                Seleccione un tipo de documento
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-4 col-lg-2 mayusculas">
                            <label for="txt-primerNombre" class="form-label">Primer nombre
                                <span class="required">*</span>
                            </label>
                            <input type="text" id="txt-primerNombre" name="txt-primerNombre" class="form-control form-control-sm" required />
                            <div class="invalid-feedback">
                                Ingrese un primer nombre
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-4 col-lg-2 mayusculas">
                            <label for="txt-segundoNombre" class="form-label">Segundo nombre</label>
                            <input type="text" id="txt-segundoNombre" name="txt-segundoNombre" class="form-control form-control-sm" />
                            <div class="invalid-feedback">
                                Ingrese un segundo nombre
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-4 col-lg-2 mayusculas">
                            <label for="txt-primerApellido" class="form-label">Primer apellido
                                <span class="required">*</span>
                            </label>
                            <input type="text" id="txt-primerApellido" name="txt-primerApellido" class="form-control form-control-sm" required />
                            <div class="invalid-feedback">
                                Ingrese un primer apellido
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-4 col-lg-2 mayusculas">
                            <label for="txt-segundoApellido" class="form-label">Segundo apellido</label>
                            <input type="text" id="txt-segundoApellido" name="txt-segundoApellido" class="form-control form-control-sm" />
                            <div class="invalid-feedback">
                                Ingrese un segundo apellido
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-4 col-lg-2 mayusculas">
                            <label for="txt-apellidoCasada" class="form-label">Apellido de casada</label>
                            <input type="text" id="txt-apellidoCasada" name="txt-apellidoCasada" class="form-control form-control-sm" />
                            <div class="invalid-feedback">
                                Ingrese un apellido de casada
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-4 col-lg-2">
                            <label for="num-salario" class="form-label">Salario
                                <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-salario" name="num-salario" class="form-control form-control-sm" required min="0" step="0.01" />
                                <div class="invalid-feedback">
                                    Ingrese un salario
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-4 col-lg-2">
                            <label for="num-pagoAdicional" class="form-label">Pago adicional
                            </label>
                            <div class="input-group input-group-sm has-validation">
                                <span class="input-group-text">$</span>
                                <input type="number" id="num-pagoAdicional" name="num-pagoAdicional" class="form-control form-control-sm" min="0" step="0.01" />
                                <div class="invalid-feedback">
                                    Ingrese un pago adicional
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-4 col-lg-2">
                            <label for="num-montoVacacion" class="form-label">Monto de vacación
                            </label>
                            <div class="input-group input-group-sm has-validation">
                                <span class="input-group-text">$</span>
                                <input type="number" id="num-montoVacacion" name="num-montoVacacion" class="form-control form-control-sm" min="0" step="0.01" />
                                <div class="invalid-feedback">
                                    Ingrese el monto de vacación
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-4 col-lg-2">
                            <label for="num-dias" class="form-label">Días
                                <span class="required">*</span>
                            </label>
                            <input type="number" id="num-dias" name="num-dias" class="form-control form-control-sm" min="1" step="1" required />
                            <div class="invalid-feedback">
                                Ingrese la cantidad de días
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-4 col-lg-2">
                            <label for="num-horas" class="form-label">Horas
                                <span class="required">*</span>
                            </label>
                            <input type="number" id="num-horas" name="num-horas" class="form-control form-control-sm" min="1" step="0.01" required />
                            <div class="invalid-feedback">
                                Ingrese la cantidad de horas
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-4 col-lg-2">
                            <label for="num-diasVacacion" class="form-label">Días de vacación
                            </label>
                            <input type="number" id="num-diasVacacion" name="num-diasVacacion" class="form-control form-control-sm" min="0" step="0.01" />
                            <div class="invalid-feedback">
                                Ingrese la cantidad de días de vacación
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12 col-md-6 col-lg-4">
                            <label for="cbo-codigoObservacion1" class="form-label">Código de observación 1 <span class="required">*</span></label>
                            <div class="form-group form-group-sm has-validation">
                                <select id="cbo-codigoObservacion1" name="cbo-codigoObservacion1" class="form-control form-control-sm selectpicker" data-live-search="true" required title="">
                                    <option selected disabled value="">Seleccione</option>
                                </select>
                                <div class="invalid-feedback">
                                    Seleccione un código de observación
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-6 col-lg-4">
                            <label for="cbo-codigoObservacion2" class="form-label">Código de observación 2 <span class="required">*</span></label>
                            <div class="form-group form-group-sm has-validation">
                                <select id="cbo-codigoObservacion2" name="cbo-codigoObservacion2" class="form-control form-control-sm selectpicker" data-live-search="true" required title="">
                                    <option selected disabled value="">Seleccione</option>
                                </select>
                                <div class="invalid-feedback">
                                    Seleccione un código de observación
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-sm btn-primary" form="empleado-form" id="btn-guardar-empleado">
                    <i class="mdi mdi-content-save"></i> Guardar
                </button>
                <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">
                    <i class="mdi mdi-close"></i> Cancelar
                </button>
            </div>
        </div>
    </div>
</div>

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