@extends('layouts.master')
@section('title')  @endsection

@section('css')
   
    <link href="{{ URL::asset('assets/css/bootstrap.min.css')}}" id="bootstrap-style" rel="stylesheet" type="text/css" />
	<link href="{{ URL::asset('assets/css/app.min.css')}}" id="app-style" rel="stylesheet" type="text/css" />
    <!--<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">-->
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    @endsection

@section('content')
@component('common-components.breadcrumb')
    @slot('pagetitle') Usuarios @endslot
    @slot('title') Gestion Usuarios @endslot
@endcomponent
<div class="row">
    <a class="dropdown-item" href="javascript:void();" onclick="event.preventDefault(); document.getElementById('logout-form').submit();"><i class="uil uil-sign-out-alt font-size-18 align-middle mr-1 text-muted"></i> <span class="align-middle">Salir</span></a>
    <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
        @csrf
    </form>
    <div class="col-lg-12">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title mb-4">Menu principal</h4>
                <div class="panel panel-primary">
                    <div class="panel-heading">Opciones de usuario</div>
                    <div class="panel-body">
                        <ul>
                            <li><a href="{{ route('edit.usuario') }}">Datos del usuario</a></li>
                            <li><a href="#" data-toggle="modal" data-target="#myModal">Cambiar contraseña</a></li>
                        </ul>
                    </div>
                </div>

                <div class="panel panel-primary">
                    <div class="panel-heading">Administración COMISCA</div>
                    <div class="panel-body">
                        <ul>
                            <li><a href="{{route('index.aplicaciones')}}">Administración de Aplicaciones</a></li>
                            <li><a href="{{route('index.roles')}}">Administración de Roles</a></li>
                            <li><a href="{{route('index.usuarios')}}">Administración de Usuarios</a></li>
                            <li><a href="{{route('index.rol_user')}}">Administración de Roles de Usuarios</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- end row -->
<!-- MODAL DE CAMBIOI de contraseña-->
<div>
    <!-- sample modal content -->
    <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <h5 class="modal-title mt-0 text-white" id="myModalLabel">Cambiar contraseña</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-info mb-0">
                        <ul>
                            <li>La contraseña debe contener mayúsculas y minúsculas.</li>
                            <li>Tener al menos 1 número.</li>
                            <li>Longitud entre 8 y 10 caracteres.</li>
                        </ul> 
                    </div>
                    <br>
                    <div class="row">
                        <label class="col-md-3 col-form-label" for="progresspill-pancard-input">contraseña:</label>
                        <div class="col-lg-6">
                            <input type="text" class="form-control" id="password" name="password">
                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <label class="col-md-3 col-form-label" for="confir_password">Confirmar Contraseña:</label>
                        <div class="col-lg-6">
                            <input type="text" class="form-control" id="confir_password" name="confir_password">
                        </div>
                    </div>    
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary waves-effect waves-light">Guardar</button>
                    <button type="button" class="btn btn-primary waves-effect waves-light" data-dismiss="modal">Cerrar</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
</div>
<!-- FINALIZA MODAL -->
@endsection
@section('script')
    <script src="{{ URL::asset('assets/libs/jquery-ui/jquery-ui.min.js')}}"></script>
    <script>
    </script>
@endsection