@extends('dashboard.layout.content')

@section('customTitle')
{{__('general.show_ratings')}}
@endsection

@section('customStyle')
<link href='{{ asset("dashboard/$locale/assets/css/elements/alert.css") }}' rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<link href='{{ asset("dashboard/$locale/plugins/jquery-ui-range-slider/jquery-ui-range-slider.min.css") }}' rel="stylesheet" type="text/css" />
@endsection

@section('customBody')
<div id="content" class="main-content">
    <div class="layout-px-spacing">
        <div class="row layout-top-spacing">
            <div class="col-12 layout-spacing">
                <div class="widget-content widget-content-area br-6">
                    <div class="filter-container">
                        <button class="btn btn-primary filter-button"> <i class="fas fa-filter"></i></button>
                        <div class="filters-inputs">
                            <form>
                                <div class="form-row">
                                    <div class="form-group col-md-6 mb-0  pr-5">
                                        <label for="rateFilter" class="mb-5">{{ __('dashboard.Rating') }}</label>
                                        <div id="rate-range"></div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table id="ratingsTable" class="table table-hover text-center">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>{{__('validation.attributes.username')}}</th>
                                    <th>{{__('validation.attributes.rating')}}</th>
                                    <th>{{__('validation.attributes.text')}}</th>
                                </tr>
                            </thead>
                            <tfoot>
                                <tr>
                                    <th>#</th>
                                    <th>{{__('validation.attributes.username')}}</th>
                                    <th>{{__('validation.attributes.rating')}}</th>
                                    <th>{{__('validation.attributes.text')}}</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<x-bootstrap.modal id="showModal" content-type="empty" :with-header="false" />

@endsection

@section('customScript')
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<script src='{{ asset("dashboard/$locale/plugins/jquery-ui-range-slider/jquery-ui-range-slider.min.js") }}'></script>
<script>
    $("#ratings-menu-box").attr("data-active", "true")

    var ratingsTable = initializeDataTable("#ratingsTable",{
        columns : [
            {data: 'DT_RowIndex', orderable: false, searchable: false },
            {data: "user", searchable: false, orderable: false},
            {data: "value", searchable: false},
            {data: "review", searchable: false, orderable: false},
        ],
        searching:false
    });

    rateTimeout = null;
   $('#rate-range').rangeSlider({
       min: 1,
       max: 5,
       ranges: [{
           id: 1,
           startValue: 0,
           endValue: 5,
           color: "#4361ee",
       }],
       rangeSlide: function(event, ui) {
           let startValue = ui.range.startValue;
           let endValue= ui.range.endValue;

           clearTimeout(rateTimeout);
           
           rateTimeout = setTimeout(() => {
               reloadDataTable(ratingsTable,{
                   startRate : startValue,
                   endRate : endValue,
               });
           }, 100);
       },
       
   });


    $(document).on("click",".show-rating",function(e){
        e.preventDefault();
        let id = $(this).data('rating');
        $.ajax({
            url: `/dashboard/rating/${id}/edit`,
           
            success(result) {
                $("#showModal .modal-body").html(result);
                $("#showModal").modal();
            },
        });
    });

</script>
@endsection