<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">Gestión de asignaciones de usuarios</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">Configuración</li>
                    <li class="breadcrumb-item active">Asignaciones de usuarios</li>
                </ol>
            </div>

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

<div class="card">
    <div class="card-body p-0">
        <div class="border">
            <ul class="nav nav-pills custom-hover-nav-tabs">
                <li class="nav-item">
                    <a href="#usuarios-container" data-bs-toggle="tab" aria-expanded="false" class="nav-link active" id="usuarios-tab">
                        <i class="fa-solid fa-users nav-icon nav-tab-position"></i>
                        <h5 class="nav-titl nav-tab-position m-0">Usuarios</h5>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#configuracion-container" data-bs-toggle="tab" aria-expanded="false" class="nav-link disabled" id="configuracion-tab">
                        <i class="fa-solid fa-user-edit nav-icon nav-tab-position"></i>
                        <h5 class="nav-titl nav-tab-position m-0">Configuración</h5>
                    </a>
                </li>
                <li class="nav-item ms-auto d-none" id="btns-configuracion">
                    <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" id="btn-guardar-configuracion">
                            <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-configuracion">
                            <i class="fa-solid fa-times"></i>
                            <span>Cancelar</span>
                        </button>
                    </div>
                </li>
            </ul>
        </div>
        <div class="tab-content text-muted p-2 pt-0">
            <div class="tab-pane pt-2 show active" id="usuarios-container">
                <div class="row">
                    <div class="col-sm-12 col-md-12">
                        <table class="table table-bordered" id="usuarios-tbl" style="text-align:center; width:100% !important;">
                            <thead>
                                <tr>
                                    <th class="text-center">#</th>
                                    <th class="text-center">Foto</th>
                                    <th>Nombre completo</th>
                                    <th>Asignaciones</th>
                                    <th class="text-center">Fecha de creación</th>
                                    <th class="text-center">Acciones</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="tab-pane" id="configuracion-container">
                <div class="row">
                    <div class="col-sm-12 col-md-12 mb-2">
                        <label for="txt-nombre-usuario" class="form-label">Usuario</label>
                        <input type="text" class="form-control" id="txt-nombre-usuario" readonly>
                    </div>
                    <div class="col-sm-3 col-md-3">
                        <div class="card p-1">
                            <div class="card-header pt-0 pb-0 pe-3 ps-3">
                                <div class="row">
                                    <div class="col-md p-1 ps-0 d-flex flex-row mt-auto">
                                        Tipos de planilla
                                    </div>
                                    <div class="col-md p-1 pe-0 d-flex flex-row-reverse">
                                        <button type="button" class="btn btn-outline-dark btn-sm" id="btn-asignar-tipo-planilla" title="Asignar tipo de planilla">
                                            <i class="fas fa-plus"></i> Agregar
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body p-1">
                                <div class="row">
                                    <div class="col-sm-12 col-md-12">
                                        <table class="table table-bordered" id="tipos-planilla-tbl" style="text-align:center; width:100% !important;">
                                            <thead>
                                                <tr>
                                                    <th class="text-center">#</th>
                                                    <th>Tipo de planilla</th>
                                                    <th class="text-center">Acciones</th>
                                                </tr>
                                            </thead>
                                            <tbody>

                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-3 col-md-3">
                        <div class="card p-1">
                            <div class="card-header pt-0 pb-0 pe-3 ps-3">
                                <div class="row">
                                    <div class="col-md p-1 ps-0 d-flex flex-row mt-auto">
                                        Empresas
                                    </div>
                                    <div class="col-md p-1 pe-0 d-flex flex-row-reverse">
                                        <button type="button" class="btn btn-outline-dark btn-sm" id="btn-asignar-empresa" title="Asignar empresa" disabled>
                                            <i class="fas fa-plus"></i> Agregar
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body p-1">
                                <div class="row">
                                    <div class="col-sm-12 col-md-12">
                                        <table class="table table-bordered" id="empresas-tbl" style="text-align:center; width:100% !important;">
                                            <thead>
                                                <tr>
                                                    <th class="text-center">#</th>
                                                    <th>Empresa</th>
                                                    <th class="text-center">Acciones</th>
                                                </tr>
                                            </thead>
                                            <tbody>

                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-3 col-md-3">
                        <div class="card p-1">
                            <div class="card-header pt-0 pb-0 pe-3 ps-3">
                                <div class="row">
                                    <div class="col-md p-1 ps-0 d-flex flex-row mt-auto">
                                        Sucursales
                                    </div>
                                    <div class="col-md p-1 pe-0 d-flex flex-row-reverse">
                                        <button type="button" class="btn btn-outline-dark btn-sm" id="btn-asignar-sucursal" title="Asignar sucursal" disabled>
                                            <i class="fas fa-plus"></i> Agregar
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body p-1">
                                <div class="row">
                                    <div class="col-sm-12 col-md-12">
                                        <table class="table table-bordered" id="sucursales-tbl" style="text-align:center; width:100% !important;">
                                            <thead>
                                                <tr>
                                                    <th class="text-center">#</th>
                                                    <th>Sucursal</th>
                                                    <th class="text-center">Acciones</th>
                                                </tr>
                                            </thead>
                                            <tbody>

                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-3 col-md-3">
                        <div class="card p-1">
                            <div class="card-header pt-0 pb-0 pe-3 ps-3">
                                <div class="row">
                                    <div class="col-md p-1 ps-0 d-flex flex-row mt-auto">
                                        Proyectos
                                    </div>
                                    <div class="col-md p-1 pe-0 d-flex flex-row-reverse">
                                        <button type="button" class="btn btn-outline-dark btn-sm" id="btn-asignar-proyecto" title="Asignar proyecto" disabled>
                                            <i class="fas fa-plus"></i> Agregar
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body p-1">
                                <div class="row">
                                    <div class="col-sm-12 col-md-12">
                                        <table class="table table-bordered" id="proyectos-tbl" style="text-align:center; width:100% !important;">
                                            <thead>
                                                <tr>
                                                    <th class="text-center">#</th>
                                                    <th>Proyecto</th>
                                                    <th class="text-center">Acciones</th>
                                                </tr>
                                            </thead>
                                            <tbody>

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

<div class="modal fade" id="modal-tipoPlanilla" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Tipo de planilla</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body pt-1">
                <form id="tipoPlanilla-form" name="tipoPlanilla-form" accept-charset="utf-8" method="POST" class="needs-validation" novalidate>
                    <div class="row">
                        <div class="col-sm-12 col-md-12">
                            <label for="cbo-tipo-planilla" class="form-label">Tipo de planilla <span class="required">*</span></label>
                            <div class="form-group has-validation">
                                <select id="cbo-tipo-planilla" name="cbo-tipo-planilla" class="form-control selectpicker" data-live-search="true" required>
                                    <option value="" disabled selected>Seleccione</option>
                                </select>
                                <div class="invalid-feedback">
                                    Por favor seleccione un tipo de planilla
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-sm btn-primary" type="submit" form="tipoPlanilla-form">Guardar</button>
                <button class="btn btn-sm btn-secondary" type="button" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modal-empresa" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Empresa</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body pt-1">
                <form id="empresa-form" name="empresa-form" accept-charset="utf-8" method="POST" class="needs-validation" novalidate>
                    <div class="row">
                        <div class="col-sm-12 col-md-12">
                            <label for="cbo-empresa" class="form-label">Empresa <span class="required">*</span></label>
                            <div class="form-group has-validation">
                                <select id="cbo-empresa" name="cbo-empresa" class="form-control selectpicker" data-live-search="true" required>
                                    <option value="" disabled selected>Seleccione</option>
                                </select>
                                <div class="invalid-feedback">
                                    Por favor seleccione una empresa
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-sm btn-primary" type="submit" form="empresa-form">Guardar</button>
                <button class="btn btn-sm btn-secondary" type="button" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modal-sucursal" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Sucursal</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body pt-1">
                <form id="sucursal-form" name="sucursal-form" accept-charset="utf-8" method="POST" class="needs-validation" novalidate>
                    <div class="row">
                        <div class="col-sm-12 col-md-12">
                            <label for="cbo-sucursal" class="form-label">Sucursal <span class="required">*</span></label>
                            <div class="form-group has-validation">
                                <select id="cbo-sucursal" name="cbo-sucursal" class="form-control selectpicker" data-live-search="true" required>
                                    <option value="" disabled selected>Seleccione</option>
                                </select>
                                <div class="invalid-feedback">
                                    Por favor seleccione una sucursal
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-sm btn-primary" type="submit" form="sucursal-form">Guardar</button>
                <button class="btn btn-sm btn-secondary" type="button" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modal-proyecto" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Proyecto</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body pt-1">
                <form id="proyecto-form" name="proyecto-form" accept-charset="utf-8" method="POST" class="needs-validation" novalidate>
                    <div class="row">
                        <div class="col-sm-12 col-md-12">
                            <label for="cbo-proyecto" class="form-label">Proyecto <span class="required">*</span></label>
                            <div class="form-group has-validation">
                                <select id="cbo-proyecto" name="cbo-proyecto" class="form-control selectpicker" data-live-search="true" required>
                                    <option value="" disabled selected>Seleccione</option>
                                </select>
                                <div class="invalid-feedback">
                                    Por favor seleccione un proyecto
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-sm btn-primary" type="submit" form="proyecto-form">Guardar</button>
                <button class="btn btn-sm btn-secondary" type="button" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

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