@extends('admin/layouts/main')

@section('content')

    <div id="page-content">
    <div class="content-header content-header-media">
        <div class="header-section">
            <div class="row">
                <!-- Main Title (hidden on small devices for the statistics to fit) -->
                <div class="col-md-12 hidden-xs hidden-sm">
                    <h1><i class="fa fa-users"></i>&nbsp;&nbsp;&nbsp;Users<br><small>&nbsp;&nbsp;&nbsp;List of all users you have!</small></h1>
                </div>
                <!-- END Main Title -->

                <!-- Top Stats -->
                
                <!-- END Top Stats -->
            </div>
        </div>
        <!-- For best results use an image with a resolution of 2560x248 pixels (You can also use a blurred image with ratio 10:1 - eg: 1000x100 pixels - it will adjust and look great!) -->
        <img src="{{URL::to('/')}}/admin/img/placeholders/headers/dash_bg.png" alt="header image" class="animation-pulseSlow">
    </div> 
       <ul class="breadcrumb breadcrumb-top">
            <li><a href="{{url('admin/dashboard')}}">Dashboard</a></li>
            <li><a href="javascript:void(0)">Users</a></li>
        </ul>
        <div class="row">
            <form method="get" action="{{URL::to('/')}}/admin/user-listing">
                <div class="col-sm-10">
                    <div class="form-group">
                        <div class="col-xs-12">
                            <div class="input-group">
                                <span class="input-group-addon"><i class="gi gi-search"></i></span>
                                <input type="text" name="keyword" value="{{$keyword}}" placeholder="Search by name..." class="form-control txt-user-search">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-2">                   
                    <button type="submit" class="btn btn-play btn-alt my-search-btn">Search</button>
                </div>            
            </form>
        </div>
        <div class="row">
        @if(count($users))
        @foreach($users as $key => $value)
            <div class="col-lg-3">
                <div class="block">
                    <!-- Customer Info -->
                    <div class="block-section user text-center">
                        <a href="javascript:void(0)">
                            <div class="user-img text-center">
                                @if(strpos($value->image,'graph.facebook.com')!= false)
                                    <img src="{{$value->image}}" width="64px" alt="avatar" class="img-circle">
                                @elseif(strpos($value->image,'googleusercontent.com')!=false)
                                    <img src="{{$value->image}}" width="64px" alt="avatar" class="img-circle">
                                @elseif($value->image == null)
                                <img src="{{URL::to('/')}}/admin/img/placeholders/avatars/avatar2.jpg" alt="avatar" class="img-circle">
                                @else
                                    <img src="{{$value->image}}/64/64" alt="avatar" class="img-circle">
                                @endif
                            </div>
                        </a>
                        <h4>
                            <strong>{{$value->name}}</strong>
                        </h4>
                        <p title="{{$value->email}}">@if($value->email)
                                {{$value->email}}
                            @else
                                -
                            @endif
                        </p>
                        <hr>                        
                        <a href="{{URL::to('/')}}/admin/user-detail/{{$value->id}}" class="btn btn-alt btn-sm btn-info">Details</a>                       
                    </div>
                    
                    <!-- END Customer Info -->
                </div>
            </div>
        @endforeach
        @else
        <div class="col-md-12 ">
            <div class="text-center">
                <strong><h2><span> No Users</span></h2></strong>
                <i class="fa fa-frown-o fa-5x"></i>
            </div>
        </div>
        @endif
        <div class="col-sm-12">
            <ul class="pagination pull-right">
                {{$users->links()}}
            </ul>                                                
        </div>
        </div>
    </div>
    <script>
    $(document).ready(function (e) {
        // alert(1);
    $('.btn-unblock-user').click(function () {
        var user_id = $(this).attr('user_id');
        swal({
            title: "Are you sure?",
            text: "You want to unblock this user!",
            icon: "warning",
            buttons:{
                cancel: {
                    text: "Cancel",
                    value: false,
                    visible: true,
                    className: "",
                    closeModal: true,
                },
                confirm: {
                    text: "Unblock",
                    value: true,
                    visible: true,
                    className: "",
                    closeModal: true
                }
            },
            closeOnClickOutside: false,
        }).then(okay => {
            if(okay){
                $('.unblock-user-form-' + user_id).submit();
                
            }
        });
    });
    });
</script>

@stop