<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">Movimientos y traslados</h4>

            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item">Recursos humanos</li>
                    <li class="breadcrumb-item">Administración</li>
                    <li class="breadcrumb-item active">Movimientos y traslados</li>
                </ol>
            </div>

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

<div class="card">
    <div class="card-header 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>
                    <select id="cbo-tipoPlanilla" name="cbo-tipoPlanilla" class="form-select form-select-sm" required title="">
                        <option selected disabled value="">Seleccione</option>
                    </select>
                    <div class="invalid-feedback">
                        Por favor, seleccione un tipo de planilla.
                    </div>
                </div>
                <div class="col-sm-12 col-md-4 col-lg-1">
                    &nbsp;
                    <div class="d-grid">
                        <button class="btn btn-sm btn-primary btn-rounded waves-effect waves-light" type="submit" style="margin-top:1.5px !important;" id="btn-buscar">
                            <i class="mdi mdi-magnify"></i>
                            Buscar
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="border">
        <ul class="nav nav-pills custom-hover-nav-tabs">
            <li class="nav-item">
                <a href="#contenedor-movimientos" data-bs-toggle="tab" aria-expanded="false" class="nav-link active" id="movimientos-tab">
                    <i class="fa-solid fa-folder-open nav-icon nav-tab-position"></i>
                    <h5 class="nav-titl nav-tab-position m-0">Activos</h5>
                </a>
            </li>
            <li class="nav-item">
                <a href="#contenedor-edicion" data-bs-toggle="tab" aria-expanded="false" class="nav-link disabled" id="editar-movimiento-tab">
                    <i class="fa-solid fa-edit nav-icon nav-tab-position"></i>
                    <h5 class="nav-titl nav-tab-position m-0">Edición</h5>
                </a>
            </li>
            <li class="nav-item ms-auto" id="btns-nuevo-movimiento">
                <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-agregarMovimiento" type="button" disabled>
                        <i class="fas fa-plus"></i>
                        <span>Agregar</span>
                    </button>
                </div>
            </li>
            <li class="nav-item ms-auto d-none" id="btns-guardar-movimiento">
                <div class="h-100 pe-1 d-flex align-items-center">
                    <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" id="btn-guardar-movimiento" form="movimiento-form">
                            <i class="fa-solid fa-save"></i>
                            <span>Guardar</span>
                        </button>
                        <button class="btn ms-2 btn-sm btn-danger btn-rounded waves-effect waves-light" type="button" id="btn-cancelar-edicion">
                            <i class="fa-solid fa-times"></i>
                            <span>Cancelar</span>
                        </button>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="card-body pt-1 ps-1 pe-1">
        <div class="tab-content text-muted">
            <div class="tab-pane fade show active pt-2 ps-2 pe-2" id="contenedor-movimientos">
                <div class="row">
                    <div class="col-12">
                        <table class="table table-sm table-responsive table-bordered w-100" id="tbl-movimientos" name="tbl-movimientos" style="text-align:center;">
                            <thead>
                                <tr>
                                    <th class="text-center">N°</th>
                                    <th class="text-center">Foto</th>
                                    <th class="text-center">Código</th>
                                    <th>Nombre completo</th>
                                    <th>Tipo de movimiento</th>
                                    <th class="text-center">Asignación original</th>
                                    <th class="text-center">Ubicación movimiento</th>
                                    <th class="text-center">Fecha de movimiento</th>
                                    <th class="text-center">Fecha de retorno</th>
                                    <th class="text-center">Estado</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-edicion">
                <form id="movimiento-form" name="movimiento-form" accept-charset="utf-8" class="needs-validation" novalidate>
                    <div class="row">
                        <div class="col-sm-12 col-md-12 col-lg-8">
                            <fieldset class="w-auto border pt-0">
                                <legend>Empleado</legend>
                                <div class="row">
                                    <div class="col-sm-12 col-md-12 col-lg-8 d-flex align-items-center">
                                        <div class="row">
                                            <div class="col-sm-12 col-md-12 col-lg-6">
                                                <label for="cbo-departamento" class="form-label mt-1">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" required title="">
                                                        <option selected disabled value="">Seleccione</option>
                                                    </select>
                                                    <div class="invalid-feedback">
                                                        Por favor, seleccione un departamento.
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-sm-12 col-md-12 col-lg-6">
                                                <label for="cbo-puesto" class="form-label mt-1">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" required title="">
                                                        <option selected disabled value="">Seleccione un departamento</option>
                                                    </select>
                                                    <div class="invalid-feedback">
                                                        Por favor, seleccione un puesto.
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-12">
                                                <label for="cbo-empleado" class="form-label mt-1">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" required title="">
                                                        <option selected disabled value="">Seleccione un puesto</option>
                                                    </select>
                                                    <div class="invalid-feedback">
                                                        Por favor, seleccione un empleado.
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-12 col-md-12 col-lg-4">
                                        <div class="custom-employee-image">
                                            <div class="profile-user position-relative d-inline-block mx-auto">
                                                <img src="main/RRHH/assets/images/empleados/default.png?v=<?= rand(); ?>" class="rounded-circle avatar-xxl img-thumbnail user-profile-image" alt="empleado-profile-image" id="img-foto-empleado">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12 col-md-12 col-lg-5">
                            <fieldset class="w-auto border pt-1">
                                <legend>Asignación oficial</legend>
                                <div class="row">
                                    <div class="col-sm-12 col-md-6 col-lg-6">
                                        <label for="cbo-sucursalAsignada" class="form-label mt-1">Sucursal</label>
                                        <select id="cbo-sucursalAsignada" name="cbo-sucursalAsignada" class="form-select form-select-sm" disabled>
                                            <option selected disabled value="">Seleccione un empleado</option>
                                        </select>
                                    </div>
                                    <div class="col-sm-12 col-md-6 col-lg-6">
                                        <label for="cbo-proyectoAsignado" class="form-label mt-1">Proyecto</label>
                                        <select id="cbo-proyectoAsignado" name="cbo-proyectoAsignado" class="form-select form-select-sm" disabled>
                                            <option selected disabled value="">Seleccione un empleado</option>
                                        </select>
                                    </div>
                                </div>
                            </fieldset>
                        </div>
                        <div class="col-sm-12 col-md-12 col-lg-7">
                            <fieldset class="w-auto border pt-1">
                                <legend>Ubicación de movimiento</legend>
                                <div class="row">
                                    <div class="col-sm-12 col-md-6 col-lg-4">
                                        <label for="cbo-sucursal" class="form-label mt-1">Sucursal <span class="required">*</span></label>
                                        <div class="form-group form-group-sm has-validation">
                                            <select id="cbo-sucursal" name="cbo-sucursal" class="form-control form-control-sm selectpicker" data-live-search="true" title="" required>
                                                <option selected disabled value="">Seleccione</option>
                                            </select>
                                            <div class="invalid-feedback">
                                                Por favor, seleccione una sucursal.
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-12 col-md-6 col-lg-4">
                                        <label for="cbo-proyecto" class="form-label mt-1">Proyecto <span class="required">*</span></label>
                                        <div class="form-group form-group-sm has-validation">
                                            <select id="cbo-proyecto" name="cbo-proyecto" class="form-control form-control-sm selectpicker" data-live-search="true" title="" required>
                                                <option selected disabled value="">Seleccione una sucursal</option>
                                            </select>
                                            <div class="invalid-feedback">
                                                Por favor, seleccione un proyecto.
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-12 col-md-6 col-lg-4">
                                        <label for="cbo-oficina" class="form-label mt-1">Oficina <span class="required">*</span></label>
                                        <div class="form-group form-group-sm has-validation">
                                            <select id="cbo-oficina" name="cbo-oficina" class="form-control form-control-sm selectpicker" data-live-search="true" title="" required>
                                                <option selected disabled value="">Seleccione un proyecto</option>
                                            </select>
                                            <div class="invalid-feedback">
                                                Por favor, seleccione una oficina.
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>
                        </div>
                    </div>
                    <div class="row ps-2 pe-2">
                        <div class="col-sm-12 col-md-6 col-lg-4">
                            <label for="cbo-tipoMovimiento" class="form-label mt-1">Tipo de movimiento <span class="required">*</span></label>
                            <div class="form-group form-group-sm has-validation">
                                <select id="cbo-tipoMovimiento" name="cbo-tipoMovimiento" class="form-control form-control-sm selectpicker" data-live-search="true" title="" required>
                                    <option selected disabled value="">Seleccione</option>
                                </select>
                                <div class="invalid-feedback">
                                    Por favor, seleccione un tipo de movimiento.
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-6 col-lg-3">
                            <div class="row">
                                <div class="col-sm-12 col-md-12 col-lg-6">
                                    <label for="txt-fechaMovimiento" class="form-label mt-1">Fecha efectiva <span class="required">*</span></label>
                                    <input type="text" id="txt-fechaMovimiento" name="txt-fechaMovimiento" class="form-control form-control-sm flatpickr" required data-static="false">
                                    <div class="invalid-feedback">
                                        Por favor, seleccione una fecha de movimiento.
                                    </div>
                                </div>
                                <div class="col-sm-12 col-md-12 col-lg-6">
                                    <label for="txt-fechaRetorno" class="form-label mt-1">Fecha de retorno</label>
                                    <div class="input-group input-group-sm">
                                        <input type="text" id="txt-fechaRetorno" name="txt-fechaRetorno" class="form-control form-control-sm flatpickr" data-static="false">
                                        <button class="btn btn-sm btn-outline-warning" type="button" id="btn-fechaRetorno">
                                            <i class="fas fa-trash-alt"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <label for="txt-comentarios" class="form-label mt-1">Comentarios</label>
                            <textarea id="txt-comentarios" name="txt-comentarios" class="form-control form-control-sm" rows="3" maxlength="500"></textarea>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

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