@extends('layouts.master')
@section('title') @lang('translation.basic-tables') @endsection

@section('content')
@component('components.breadcrumb')
@slot('li_1') Configuración @endslot
@slot('title') Usuarios extras @endslot
@endcomponent

<div class="row">
    <div class="col-xl-12">
        <div class="card">
            <div class="card-header align-items-center d-flex">
                <h4 class="card-title mb-0 flex-grow-1">Usuarios extras</h4>
                <div class="flex-shrink-0">
                    <button 
                        type="button" 
                        class="btn btn-secondary waves-effect waves-light" 
                        data-bs-toggle="modal" 
                        data-bs-target="#exampleModalgrid">
                        <i class="ri-add-fill align-middle"></i> Usuario extra
                    </button>
                    <div class="modal fade" id="exampleModalgrid" tabindex="-1" aria-labelledby="exampleModalgridLabel">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalgridLabel">Nuevo Usuario</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <form action="javascript:void(0);">
                                        <div class="row g-3">
                                            <div class="col-lg-12">
                                                <label for="NameInput" class="form-label">Nombre</label>
                                                <input 
                                                    id="NameInput" 
                                                    name="name"
                                                    type="text" 
                                                    class="form-control" 
                                                    placeholder="Ingresa el nombre"
                                                    required="true">
                                            </div><!--end col-->
                                            <div class="col-lg-12">
                                                <label for="EmailInput" class="form-label">Email</label>
                                                <input 
                                                    id="EmailInput" 
                                                    name="email"
                                                    type="email" 
                                                    class="form-control" 
                                                    placeholder="Ingresa el email"
                                                    required="true">
                                            </div><!--end col-->
                                            <div class="col-lg-12">
                                                <label for="pwInput" class="form-label">Contraseña</label>
                                                <input 
                                                    id="pwInput" 
                                                    name="password"
                                                    type="password" 
                                                    class="form-control" 
                                                    placeholder="Ingresa la contraseña"
                                                    required="true">
                                            </div><!--end col-->
                                            <div class="col-lg-12">
                                                <label for="rpwInput" class="form-label">Repetir Contraseña</label>
                                                <input 
                                                    id="rpwInput" 
                                                    name="rpassword"
                                                    type="password" 
                                                    class="form-control" 
                                                    placeholder="Ingresa nuevamente la contraseña"
                                                    required="true">
                                            </div><!--end col-->
                                            <div class="col-xxl-6">
                                                <label for="rolSelect" class="form-label">Rol</label>
                                                <select 
                                                    id="rolSelect" 
                                                    name="user_type_id"
                                                    class="form-select form-select-tf" 
                                                    aria-label=".form-select-tf"
                                                    required="true">
                                                    <option selected>Elige el rol</option>
                                                    <option value="2">Auxiliar</option>
                                                    <option value="3">Punto de Venta</option>
                                                </select>
                                            </div><!--end col-->
                                            <div class="col-xxl-6">
                                                <label for="estatusSelect" class="form-label">Estatus</label>
                                                <select 
                                                    id="estatusSelect" 
                                                    name="estatus"
                                                    class="form-select form-select-tf" 
                                                    aria-label=".form-select-tf"
                                                    required="true">
                                                    <option selected>Elige el estatus</option>
                                                    <option value="1">Activo</option>
                                                    <option value="2">Inactivo</option>
                                                </select>
                                            </div><!--end col-->

                                            <div class="col-lg-12">
                                                <div class="hstack gap-2 justify-content-end">
                                                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                                                    <button type="submit" class="btn btn-primary">Submit</button>
                                                </div>
                                            </div><!--end col-->
                                        </div><!--end row-->
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div><!-- end card header -->

            <div class="card-body">
                <div class="live-preview">
                    <div class="table-responsive">
                        <table class="table table-borderless align-middle table-nowrap mb-0">
                            <thead>
                                <tr>                                    
                                    <th scope="col">Nombre</th>
                                    <th scope="col">Email</th>
                                    <th scope="col">Rol</th>
                                    <th scope="col">Status</th>
                                    <th scope="col">Fecha Registro</th>
                                    <th scope="col"></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="fw-medium">Anselmo Alonso</td>
                                    <td>anselmo.alonso@gmail.com</td>
                                    <td>Auxiliar</td>
                                    <td><span class="badge bg-success-subtle text-success">Activo</span></td>
                                    <td>05 Mar,2022</td>
                                    <td>
                                        <div class="hstack gap-3 fs-15">
                                            <a href="javascript:void(0);"><i class="ri-eye-fill"></i></a>
                                            <a href="javascript:void(0);" class="link-success"><i class="ri-edit-line"></i></a>
                                            <a href="javascript:void(0);" class="link-success"><i class="las la-toggle-on"></i></a>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="fw-medium">Angélica Chain</td>
                                    <td>achain@me.com</td>
                                    <td>Auxiliar</td>
                                    <td><span class="badge bg-success-subtle text-success">Activo</span></td>
                                    <td>09 Abr,2022</td>
                                    <td>
                                        <div class="hstack gap-3 fs-15">
                                            <a href="javascript:void(0);"><i class="ri-eye-fill"></i></a>
                                            <a href="javascript:void(0);" class="link-success"><i class="ri-edit-line"></i></a>
                                            <a href="javascript:void(0);" class="link-success"><i class="las la-toggle-on"></i></a>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="fw-medium">Lulu Dallas</td>
                                    <td>ldallas@hotmail.com</td>
                                    <td>Punto Venta</td>
                                    <td><span class="badge bg-success-subtle text-success">Activo</span></td>
                                    <td>15 Abr,2022</td>
                                    <td>
                                        <div class="hstack gap-3 fs-15">
                                            <a href="javascript:void(0);"><i class="ri-eye-fill"></i></a>
                                            <a href="javascript:void(0);" class="link-success"><i class="ri-edit-line"></i></a>
                                            <a href="javascript:void(0);" class="link-success"><i class="las la-toggle-on"></i></a>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="fw-medium">Ana Lourdes</td>
                                    <td>ana.lourdes@hotmail.com</td>
                                    <td>Punto Venta</td>
                                    <td><span class="badge bg-danger-subtle text-danger">Baja</span></td>
                                    <td>15 Abr,2022</td>
                                    <td>
                                        <div class="hstack gap-3 fs-15">
                                            <a href="javascript:void(0);"><i class="ri-eye-fill"></i></a>
                                            <a href="javascript:void(0);" class="link-danger"><i class="ri-edit-line"></i></a>
                                            <a href="javascript:void(0);" class="link-danger"><i class="las la-toggle-off"></i></a>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                
            </div><!-- end card-body -->
        </div><!-- end card -->
    </div><!-- end col -->
</div>
<!--end row-->

@endsection

@section('script')
<script src="{{ URL::asset('build/libs/apexcharts/apexcharts.min.js') }}"></script>
<script src="{{ URL::asset('build/js/pages/dashboard-crm.init.js') }}"></script>
<script src="{{ URL::asset('build/js/app.js') }}"></script>
@endsection