@extends('layouts.app')

@push('css')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.css">
    <style>
        .btn-nuevo:hover::after{
            content: ' Crear nuevo usuario';
        }
    </style>
@endpush

@section('content')
    <div class="container ml-0 mr-0 pl-0 pr-0 row" id="users_list">
        <div class="animate__animated animate__fadeInUp container tarjetas tarjeta-gris p-3 p-sm-2 p-md-3 p-lg-5 p-xl-5 col-12">
            <div class="row row-bottom">
               <div class="col-12 col-sm-12 col-md-8 col-lg-8 col-xl-8">
                   <h3 class="titulo-modulo texto-obscuro">Usuarios inactivos </h3>
               </div>
                <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
                    <nav class="breadcrumb"><a class="breadcrumb-item" href="{{ url('home') }}">Dashboard</a><span class="breadcrumb-item active">Usuarios activos</span></nav>
                </div>
                <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
                    <input type="text" class="search input_main input_buscador float-right" placeholder="Buscar...">
                </div>
           </div>
           <div class="empty-space-10"></div>
           <div class="list">
            @foreach ($users as $user)
            <div class="row row-inicio lista list_custom ml-0 mr-0">
                <div class="col-6 col-sm-6 col-md-3 col-lg-3 col-xl-3">
                    <p class="m-0 mb-1 texto-obscuro">{{ $user->perfil }}</p>
                    <h6 class="texto-azul user_name">{{ $user->name.' '.$user->a_paterno.' '.$user->a_materno }}</h6>
                </div>
                <div class="col-6 col-sm-6 col-md-2 col-lg-2 col-xl-2">
                    <p class="m-0 mb-1 texto-obscuro">Teléfono</p>
                    <h6 class="texto-azul tel">{{ $user->telefono }}</h6>
                </div>
                <div class="col-6 col-sm-6 col-md-3 col-lg-3 col-xl-3">
                    <p class="m-0 mb-1 texto-obscuro">Correo electrónico</p>
                    <h6 class="texto-azul correo">{{ $user->email }}</h6>
                </div>
                <div class="col-3 col-sm-3 col-md-2 col-lg-2 col-xl-2">
                    <p class="m-0 mb-1 texto-obscuro">Fecha de unión</p>
                    <h6 class="texto-azul fechacreacion">{{ $user->created_at->format('d/M/Y') }}</h6>
                </div>
                <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
                    <p class="m-0 mb-1 texto-obscuro">Estatus</p>
                    <select id="select_estatus" data-userid="{{ $user->id }}" class="js-example-basic-single w-75 input_main select_estatus">
                        <option value="{!! $user->estatus !!}">{!! $user->estatus !!}</option>
                        <option value="Activo">Activo</option>
                    </select>
                </div>
                @if(get_perfil()["perfil"] == "Administrador"||get_perfil()["perfil"] == "Distribuidor")
                <button class="btn-acciones dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-ellipsis-h text-obscuro"></i></button>
                <div class="dropdown-menu menu-acciones-lista" aria-labelledby="dropdownMenuButton">
                    <a class="dropdown-item btn-cerrar-acciones"><i class="fa fa-ellipsis-h"></i></a>
                    <a class="dropdown-item row-centrado" href="{{ url('users/'.$user->id.'/edit') }}"><img src="{{ asset('imagenes/iconos/icono_editar.png') }}" alt=""></a>
                    <button class="dropdown-item mt-2 btn-eliminar" data-id="{{ $user->id }}" data-name="{{ $user->name.' '.$user->a_paterno }}"  data-url="{{ url('users/'.$user->id) }}"><img src="{{ asset('imagenes/iconos/icono_eliminar.png') }}"></button>
                </div>
                @endif
            </div>
            @endforeach
        </div>
        <h1 id="msg-result" class="d-none">0 resultados</h1>
        <div class="pagination_flex col-12 mt-5">
            <button type="button" class="jPaginateBack"><i class="fa fa-angle-left"></i></button>
            <ul class="pagination"></ul>
            <button type="button" class="jPaginateNext"><i class="fa fa-angle-right"></i></button>
        </div>

           <div class="empty-space-30"></div>
       </div>
    </div>
@endsection

@section('modales')
<div class="modal fade" id="modalEliminar" tabindex="-1" role="dialog" aria-labelledby="modalEliminarLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalEliminarLabel">Eliminar usuarios</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <h3>¡Advertencia!</h3>
                <p>Al aceptar el usuario <strong id="nombre_modal"></strong> será eliminado, esta acción no puede ser reversible.</p>
            </div>
            <div class="empty-space-50"></div>
            {!! Form::open(['route' => ['users.destroy', 1], 'method' => 'delete','class' => 'row botonera-inferior','id' => 'form-eliminar']) !!}
                @csrf
                <div class="col-12 p-0 m-0 text-right botonera-formulario">
                    <a href="{{ url('users') }}" class="btn btn-secundario text-white" data-dismiss="modal">Cancelar <span><-</span></a>
                    <button type="submit" id="guardar-cambios" class="btn btn-principal ">Aceptar <span>-></span></button>
                </div>
            {!! Form::close() !!}
        </div>
    </div>
</div>
@endsection

@push('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
    <script>
        $(document).ready(function() {
            @if($validar_vista)
            localStorage.setItem("buscador_usuario", '');
            @endif

            $(".input_buscador").val(localStorage.getItem("buscador_usuario"));
            userList.search(localStorage.getItem("buscador_usuario"));
            if(userList.search(localStorage.getItem("buscador_usuario")) == 0)
            {
                $("#msg-result").removeClass('d-none');
            }
        });

        $(".btn-acciones").click(function(){
            $(".menu-acciones-lista").hide();
            $(this).next().slideDown("fast");
        });
        $(".btn-cerrar-acciones").click(function(){
            $(this).parent().slideUp("fast");
        });

        $(".btn-eliminar").click(function(){
            $("#modalEliminar").modal();
            var nombre = $(this).data('name');
            var url = $(this).data('url');
            $("#nombre_modal").text(nombre);
            $("#form-eliminar").attr('action',url);
        })

        var userList = new List('users_list', {
            valueNames: [ 'user_name','tel','correo','fechacreacion'],
            page: 6,
            pagination: {
                innerWindow: 2,
                left: 0,
                right: 0,
                paginationClass: "pagination",
            }
        });
        var length_lis = $('.list .list_custom').length;
        if(length_lis == 0){
            $('.jPaginateNext').css('display','none');
            $('.jPaginateBack').css('display','none');
        }
        else{
            $('.jPaginateNext').css('display','block');
            $('.jPaginateBack').css('display','block');
            $('.jPaginateNext').on('click', function(){
                var list = $('.pagination').find('li');
                $.each(list, function(position, element){
                    if($(element).is('.active')){
                        $(list[position+1]).trigger('click');
                    }
                })
            });

            $('.jPaginateBack').on('click', function(){
                var list = $('.pagination').find('li');
                $.each(list, function(position, element){
                    if($(element).is('.active')){
                        $(list[position-1]).trigger('click');
                    }
                })
            });
        }

        $(".input_buscador").keyup(function(){
            if($('.list .list_custom').length == 0)
            {
                $("#msg-result").removeClass('d-none');
            }else{
                $("#msg-result").addClass('d-none');
            }
            var buscador = $(".input_buscador").val();
            localStorage.setItem("buscador_usuario", buscador);
        });

        $(".select_estatus").change(function(){
            let user_id = $(this).data('userid');
            let url = "{{ url('/usuarios_inactivos/') }}";

            window.location.replace(url+"/"+user_id);
        });

        @foreach (session('flash_notification', collect())->toArray() as $message)
            @if($message["level"] == "success")
            toastr.success('{{ $message["message"] }}', {timeOut: 1000000})
            @else
            toastr.error('{{ $message["message"] }}', {timeOut: 10000})
            @endif
            {{ session()->forget('flash_notification') }}
        @endforeach
    </script>
@endpush