@extends("layouts.admin.app")
@section("css-links")

    <link rel="stylesheet" type="text/css" href="{{asset("css/dataTables.bootstrap4.min.css")}}"/>
    <link rel="stylesheet" type="text/css" href="{{asset("css/select.bootstrap4.min.css")}}"/>
    <style>
        .show-rating{
            color: var(--primary);
        }
        .show-rating i {
            font-size: 16px;
            text-shadow: 1px 1px 10px #ddd;
        }
        .ratings-box .modal-body {
            max-height: 80vh;
            overflow-y: auto;
        }
    </style>

@endsection
@section("page-header")
    <div class="section-header">
        <h1>Users</h1>
        <div class="section-header-breadcrumb">
            <div class="breadcrumb-item active"><a href="#">Admin</a></div>
            <div class="breadcrumb-item">Users</div>
        </div>
    </div>
@endsection

@section("content")
    @include("includes.dialog")
    <div class="section-body">
        <h2 class="section-title">Users</h2>
        <p class="section-lead">
            View And Control All Users
        </p>

        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4>All Users</h4>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-striped data-table" id="Datatable">
                                <thead>
                                <tr>
                                    <th class="text-center">#</th>
                                    <th>Full name</th>
                                    <th>Phone number</th>
                                    <th>Email</th>
{{--                                    <th>Rating</th>--}}
                                    <th>Activation</th>
                                    <th>Last Updated</th>
                                    <th>Created On</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($users as $user)
                                    <tr>
                                        <td>{{$user->id}}</td>
                                        <td>{{$user->name}}</td>
                                        <td>{{$user->client->phone_number}}</td>
                                        <td>{{$user->email}}</td>
{{--                                        <td class="min-width-90 text-center">--}}
{{--                                            <div style="display:none;">{{$user->rate}}</div>--}}
{{--                                            <div class="user-rating">--}}
{{--                                                <i class="@if($user->rate >= 1 || ($user->rate < 1 && $user->rate >= 0.5)) fas @else far @endif @if($user->rate < 1 && $user->rate >= 0.5) fa-star-half @else fa-star @endif"></i>--}}
{{--                                                <i class="@if($user->rate >= 2 || ($user->rate < 2 && $user->rate >= 1.5)) fas @else far @endif @if($user->rate < 2 && $user->rate >= 1.5) fa-star-half @else fa-star @endif"></i>--}}
{{--                                                <i class="@if($user->rate >= 3 || ($user->rate < 3 && $user->rate >= 2.5)) fas @else far @endif @if($user->rate < 3 && $user->rate >= 2.5) fa-star-half @else fa-star @endif"></i>--}}
{{--                                                <i class="@if($user->rate >= 4 || ($user->rate < 4 && $user->rate >= 3.5)) fas @else far @endif @if($user->rate < 4 && $user->rate >= 3.5) fa-star-half @else fa-star @endif"></i>--}}
{{--                                                <i class="@if($user->rate == 5 || ($user->rate < 5 && $user->rate >= 4.5)) fas @else far @endif @if($user->rate < 5 && $user->rate >= 4.5) fa-star-half @else fa-star @endif"></i>--}}
{{--                                            </div>--}}
{{--                                            <!-- Button trigger modal -->--}}
{{--                                            <span type="button" class="show-rating" data-user-id="{{$user->id}}" data-toggle="modal" data-target="#staticBackdrop">--}}
{{--                                                <i class="far fa-eye"></i>--}}
{{--                                            </span>--}}
{{--                                        </td>--}}
                                        <td>
                                            <label class="custom-switch">
                                                <input type="checkbox"
                                                       name="custom-switch-checkbox"
                                                       class="custom-switch-input changeActive" data-user-id="{{$user->id}}" {{$user->status ? "checked" : null}}>
                                                <span class="custom-switch-indicator"></span>
                                            </label>
                                        </td>
                                        <td>{{$user->updated_at->diffForHumans()}}</td>
                                        <td>{{$user->created_at->diffForHumans()}}</td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
@endsection

@section("js-scripts")
    <!-- Modal -->
    <div class="modal fade ratings-box" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel">Ratings Details</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 id="property-loading"></div>
                    <div class="ratings-list">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    <script src="{{asset("js/jquery.dataTables.min.js")}}"></script>
    <script src="{{asset("js/dataTables.bootstrap4.min.js")}}"></script>
    <script src="{{asset("js/select.bootstrap4.min.js")}}"></script>

    <script src="{{asset("assets/js/page/modules-datatables.js")}}"></script>
    <script>
        $("#Datatable").dataTable({});

        $(".changeActive").on("change",function (e){
            let active = $(this).is(":checked") ? 1 : 0,
                userId = $(this).data("user-id");
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                type: "POST",
                url: "/admin/users/change_activation",
                data: {active:active,userId:userId},
                success: function (response) {}
            });
        });

        // $(document).on('click', ".show-rating", function(){
        //     let body = $(".ratings-box .modal-body"),
        //         loading = body.find("#property-loading"),
        //         userId = $(this).data("user-id"),
        //         ratingsList = body.find(".ratings-list");
        //
        //     $.ajaxSetup({
        //         headers: {
        //             'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        //         }
        //     });
        //     $.ajax({
        //         type: "POST",
        //         url: "/admin/users/get/ratings",
        //         data: {userId:userId},
        //         beforeSend : function(){
        //             ratingsList.empty().fadeOut(100,function (){
        //                 loading.append(`<div class="loader">Loading...</div>`);
        //                 loading.fadeIn();
        //             });
        //         },
        //
        //         success: function (response) {
        //             console.log(response.status_number);
        //             if(response.status_number == 201){
        //                 loading.fadeOut(100).empty();
        //                 let ratings = response.data;
        //                 let box = ``;
        //                 ratings.forEach(function(rating){
        //                     box += `
        //                         <div class="row">
        //                             <div class="col-lg-12">
        //                                 <div class="row bg-light p-3 mb-3">
        //                                     <div class="col-lg-6" style="font-weight: bold; color: var(--primary);">From : ${rating.from}</div>
        //                                     <div class="col-lg-6">
        //                                         <div class="user-rating">
        //                                             <i class="${rating.rate >= 1 || rating.rate < 1 && rating.rate >= 0.5 ? "fas" : "far"} ${rating.rate < 1 && rating.rate >= 0.5 ? "fa-star-half" : "fa-star"}"></i>
        //                                             <i class="${rating.rate >= 2 || rating.rate < 2 && rating.rate >= 1.5 ? "fas" : "far"} ${rating.rate < 2 && rating.rate >= 1.5 ? "fa-star-half" : "fa-star"}"></i>
        //                                             <i class="${rating.rate >= 3 || rating.rate < 3 && rating.rate >= 2.5 ? "fas" : "far"} ${rating.rate < 3 && rating.rate >= 2.5 ? "fa-star-half" : "fa-star"}"></i>
        //                                             <i class="${rating.rate >= 4 || rating.rate < 4 && rating.rate >= 3.5 ? "fas" : "far"} ${rating.rate < 4 && rating.rate >= 3.5 ? "fa-star-half" : "fa-star"}"></i>
        //                                             <i class="${rating.rate == 5 || rating.rate < 5 && rating.rate >= 4.5 ? "fas" : "far"} ${rating.rate < 5 && rating.rate >= 4.5 ? "fa-star-half" : "fa-star"}"></i>                                                                                            </div>
        //                                         </div>
        //                                     ${rating.comment == null ? `` : `<div class="col-lg-12 mt-3">${rating.comment}</div>`}
        //
        //                                     </div>
        //
        //
        //                                 </div>
        //                             </div>
        //                         </div>`;
        //                 });
        //                 ratingsList.append(box);
        //                 ratingsList.fadeIn(100);
        //             }
        //         }
        //     });
        // });
    </script>
@endsection