<link rel="stylesheet" href="<?= base_url(); ?>assets/librerias/DataTables/DataTables-1.10.18/css/jquery.dataTables.min.css">
<script src="<?= base_url(); ?>assets/librerias/DataTables/DataTables-1.10.18/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="<?=base_url()?>assets/css/jquery.tosrus.all.css">
<script src="<?=base_url()?>assets/js/jquery.tosrus.all.min.js"></script>
<style>
    th {
        font: 14px sans-serif;
        color: #FFFFFF;
    }

    table {
        width: 100%;

    }

    .col-sm-3 {
        margin-left: 1rem;
    }

    .footer {
        margin-bottom: 1rem;
    }

    .modal-content {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .espacio {
        padding-bottom: 1rem;
    }

    .nuevo {
        margin-left: 80%;
    }
</style>

<div class="container">
    <br>
    <div class="row">
        <div class="col-sm-12">
            <blockquote class="blockquote bq-primary htext">
                <b>ADMINISTRAR USUARIOS</b>
            </blockquote>
        </div>
        <div class="col-sm-12" id="nuevo">
            <button style="float: right;" type="button" id="btn_nuevoUsuario" class="btn btn-success">Crear usuario</button>
        </div>

    </div>
    <br>


    <div class="row">
        <div class="col-sm-12 table-responsive">
            <table class="table table-bordered table-striped usuarios_tabla" id="tabla_usuarios">
                <thead class="mdb-color primary-color">
                    <tr>
                        <th>ID</th>
                        <th>Usuario</th>
                        <th>Nombre</th>
                        <th>Apellidos</th>
                        <th>Email</th>
                        <th>Perfil</th>
                        <th>Sucursal</th>
                        <th>Acciones</th>
                    </tr>
                </thead>
                <tbody id="usuarios" class="usuarios">
                </tbody>
            </table>
        </div>

    </div>
    <br>
</div>



<!-- Boton agregar usuario -->
<!-- <div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
    <a class="btn-floating btn-lg red waves-effect waves-light">
        <i id="btn_nuevoUsuario" class="fa fa-plus"></i>
    </a>
</div> -->
<!-- Modal nuevo usuario -->
<div id="modalNuevoUsuario" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <!-- Titulo de modal  -->
                <h4 class="modal-title">Registrar usuario</strong></h4>
            </div>
            <!-- Cuerpo del modal -->
            <div class="modal-body" id="form_create_usr" class="form_create_usr">
                <div class='row espacio'>
                    <div class='col-sm-4'>
                        <i class='fa fa-user iconos-usuario grey-text'></i>
                        <label for='usuario_nvo'>Usuario:</label>
                    </div>
                    <div class='col'>
                        <input type='text' name='usuario_nvo' id='usuario_nvo' class='form-control input-usuario' value=''>
                    </div>
                </div>
                <div class='row espacio'>
                    <div class='col-sm-4'>
                        <i class='fa fa-user iconos-usuario grey-text'></i>
                        <label for='nombre_nvo'>Nombre:</label>
                    </div>
                    <div class='col'>
                        <input type='text' name='nombre_nvo' id='nombre_nvo' class='form-control input-usuario' value=''>
                    </div>
                </div>
                <div class='row espacio'>
                    <div class='col-sm-4'>
                        <i class='fa fa-user-friends iconos-usuario grey-text'></i>
                        <label for='apellidos_nvo'>Apellidos:</label>
                    </div>
                    <div class='col'>
                        <input type='text' name='apellido_nvo' id='apellido_nvo' class='form-control input-usuario' value=''>
                    </div>
                </div>
                <div class='row espacio'>
                    <div class='col-sm-4'>
                        <i class='fa fa-at iconos-usuario grey-text'></i>
                        <label for='email_nvo'>E-mail:</label>
                    </div>
                    <div class='col'>
                        <input type='text' name='email_nvo' id='email_nvo' class='form-control input-usuario' value=''>
                    </div>
                </div>
                <div class='row espacio'>
                    <div class='col-sm-4'>
                        <i class='fa fa-key iconos-usuario grey-text'></i>
                        <label for='cve_nvo'>Cve Intelisis:</label>
                    </div>
                    <div class='col'>
                        <input type='text' name='cve_nvo' id='cve_nvo' class='form-control input-usuario' value=''>
                    </div>
                </div>
                <div class='row espacio'>
                    <div class='col-sm-4'>
                        <i class='fa fa-building iconos-usuario grey-text'></i>
                        <label for='empresa_nvo'>Empresa:</label>
                    </div>
                    <div class='col empresa_nuevo'>
                        <select id="empresa_nuevo" name="empresa_nuevo" class="browser-default form-control validate[required]">

                        </select>
                    </div>
                </div>
                <div class='row espacio'>
                    <div class='col-sm-4'>
                        <i class='fa fa-building iconos-usuario grey-text'></i>
                        <label for='sucursal_nvo'>Sucursal:</label>
                    </div>
                    <div class='col sucursales_nuevo'>
                        <select id="sucursal_nvo" name="sucursal_nvo" class="browser-default form-control validate[required]">

                        </select>
                    </div>
                </div>
                <div class='row espacio'>
                    <div class='col-sm-4'>
                        <i class='fa fa-address-card iconos-usuario grey-text'></i>
                        <label for='rol_nvo'>Perfil:</label>
                    </div>
                    <div class='col'>
                        <select id="rol_nvo" name="rol_nvo" class="browser-default form-control validate[required]">
                            <option value="">Seleccionar</option>
                            <option value="2">Recepcionista</option>
                            <option value="3">Asesor</option>
                            <option value="4">Jefe de Taller</option>
                            <option value="5">Técnico</option>
                            <option value="6">Refacciones</option>
                            <option value="7">Administrador de Garantías</option>
                            <option value="8">Jefe de Servicio</option>
                        </select>
                    </div>
                </div>
                <div id="fordstarDiv_nvo" class='row espacio' style='display:none;'>
                    <div class='col-sm-4'>
                        <i class='fa fa-star iconos-usuario grey-text'></i>
                        <label for='fordStar_nvo'>FordStar:</label>
                    </div>
                    <div class='col'>
                        <input type='text' name='fordStar_nvo' id='fordStar_nvo' class='form-control input-usuario' value=''>
                    </div>
                </div>
            </div>

            <div class="row footer">
                <div class="col">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
                </div>
                <div style="text-align:right;" class="col">
                    <button class='btn btn-success ' id='btn_crearUsuario'>Registrar</button>
                </div>

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

<!-- Modal editar usuario -->
<div id="modalEditarUsuario" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <!-- Titulo de modal  -->
                <h4 class="modal-title">Editar usuario</strong></h4>
            </div>
            <!-- Cuerpo del modal -->
            <div class="modal-body" id="form_edit_usr" class="form_edit_usr">
                <div class="row">
                    <div class='col' style="text-align:right;">
                        <button class='btn btn-success ' id='btn_resPassword'>Restablecer contraseña</button>
                    </div>
                </div>
                <div class='row espacio'>
                    <div class='col-sm-3'>
                        <i class='fa fa-user-circle iconos-usuario grey-text'></i>
                        <label for='usuario'> Usuario:</label>
                    </div>
                    <div class='col'>
                        <input type='text' name='usuario' id='usuario' class=' input-usuario browser-default form-control validate[required]' value=''>
                    </div>
                </div>

                <div class='row espacio'>
                    <div class='col-sm-3'>
                        <i class='fa fa-user iconos-usuario grey-text'></i>
                        <label for='nombre'>Nombre:</label>
                    </div>
                    <div class='col'>
                        <input type='text' name='nombre' id='nombre' class='form-control input-usuario' value=''>
                    </div>
                </div>

                <div class='row espacio'>
                    <div class='col-sm-3'>
                        <i class='fa fa-user-friends iconos-usuario grey-text'></i>
                        <label for='apellidos'>Apellidos:</label>
                    </div>
                    <div class='col'>
                        <input type='text' name='apellidos' id='apellidos' class='form-control input-usuario' value=''>
                    </div>
                </div>

                <div class='row espacio'>
                    <div class='col-sm-3'>
                        <i class='fa fa-at iconos-usuario grey-text'></i>
                        <label for='email'>E-mail:</label>
                    </div>
                    <div class='col'>
                        <input type='text' name='email' id='email' class='form-control input-usuario' value=''>
                    </div>
                </div>

                <div class='row espacio'>
                    <div class='col-sm-3'>
                        <i class='fa fa-key iconos-usuario grey-text'></i>
                        <label for='cve'>Cve Intelisis:</label>
                    </div>
                    <div class='col'>
                        <input type='text' name='cve' id='cve' class='form-control input-usuario' value=''>
                    </div>
                </div>
                <div id="fordstarDiv" class='row espacio' style='display:none;'>
                    <div class='col-sm-3'>
                        <i class='fa fa-star iconos-usuario grey-text'></i>
                        <label for='fordStar'>FordStar:</label>
                    </div>
                    <div class='col'>
                        <input type='text' name='fordStar' id='fordStar' class='form-control input-usuario' value=''>
                    </div>
                </div>
                <div class='row espacio'>
                    <div class='col-sm-3'>
                        <i class='fa fa-building iconos-usuario grey-text'></i>
                        <label for='empresa'>Empresa:</label>
                    </div>
                    <div class='col empresa'>
                        <select id="empresa" name="empresa" class="browser-default form-control validate[required]">

                        </select>
                    </div>
                </div>
                <div class='row espacio'>
                    <div class='col-sm-3'>
                        <i class='fa fa-building iconos-usuario grey-text'></i>
                        <label for='sucursal_edt'>Sucursal:</label>
                    </div>
                    <div class='col sucursales_editar'>
                        <select id="sucursal" name="sucursal" class="browser-default form-control validate[required]">

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


                <div class='row espacio'>
                    <div class='col-sm-3'>
                        <i class='fa fa-address-card iconos-usuario grey-text'></i>
                        <label for='rol'>Perfil:</label>
                    </div>
                    <div class='col'>
                        <select id="rol" name="rol" class="browser-default form-control validate[required]">
                            <option value="2">Recepcionista</option>
                            <option value="3">Asesor</option>
                            <option value="4">Jefe de Taller</option>
                            <option value="5">Técnico</option>
                            <option value="6">Refacciones</option>
                            <option value="7">Administrador de Garantías</option>
                            <option value="8">Jefe de Servicio</option>
                            <option value="9">Soporte</option>
                        </select>
                    </div>
                </div>

                <div class='row espacio'>
                    <div class='col-sm-3'>
                        <i class='fa fa-trash iconos-usuario grey-text'></i>
                        <label for='eliminado'>Estatus:</label>
                    </div>
                    <div class='col'>
                        <select id="eliminado" name="eliminado" class="browser-default form-control validate[required]">
                            <option value="0">Activo</option>
                            <option value="1">Inactivo</option>
                        </select>
                    </div>
                </div>

                <br>
                <div class="div_firma_usu">
                    <input id='div_firma_usu' name='div_firma_usu' type='hidden' value=''>
                </div>
                <div class="id">
                    <input id='id' name='id' type='hidden' value=''>
                </div>
                <div class="">
                    <div class="row">
                        <div class="col">
                            <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
                        </div>
                        <div style="text-align:right;" class="col">
                            <button class='btn btn-success ' id='btn_editarUsuario'>Guardar Cambios</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
