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

    <link rel="stylesheet" type="text/css" href="{{mix("css/dataTables.bootstrap4.min.css")}}"/>
    <link rel="stylesheet" type="text/css" href="{{mix("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("admin.includes.page-message")
    <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->full_name}}</td>
                                        <td>{{$user->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->active ? "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="{{mix("js/jquery.dataTables.min.js")}}"></script>
    <script src="{{mix("js/dataTables.bootstrap4.min.js")}}"></script>
    <script src="{{mix("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