@extends('layout.store_layout.master')
@section('content')
    @push('custom_css')
        <link rel="stylesheet" href="{{ asset('store_admin/js/rater-js/lib/style.css') }}">
    @endpush
<!--begin::Products-->
<div class="card card-flush">
    <!--begin::Card header-->
    <div class="card-header align-items-center py-5 gap-2 gap-md-5">
        <!--begin::Card title-->
        <div class="card-title">
            <!--begin::Search-->
            <!--end::Search-->
        </div>
        <!--end::Card title-->
        <!--begin::Card toolbar-->
        <div class="card-toolbar ">
            <form action="{{route('admin.ratings.index')}}" method="get" id="rate_filter_form">
            {{--flex-row-fluid justify-content-end gap-5--}}
            <div class="d-flex justify-content-end" data-kt-ratings-table-toolbar="base">
                <div class="w-100 mw-150px">
                    <!--begin::Select2-->
                    <select class="form-select form-select-solid" id="status_select" name="rate_status" data-control="select2" data-hide-search="true" data-placeholder="الحالة" data-filter="status">
                        <option></option>
                        <option value="all">الكل</option>
                        <option value="1">مقبوله</option>
                        <option value="0">بانتظار المراجعة</option>
                    </select>
                    <!--end::Select2-->
                </div>
                <!--begin::Add product-->
                {{--<a href="{{route('admin.fabric_types.add')}}" class="btn btn-primary">اضف جديد</a>--}}
                <!--end::Add product-->
            </div>
            </form>
            <!--begin::Group actions-->
            <div class="d-flex justify-content-end align-items-center d-none" data-kt-ratings-table-toolbar="selected">
                <div class="fw-bold me-5 text-nowrap">
                    <span class="me-2" data-kt-ratings-table-select="selected_count"></span> @lang('general.selected')
                </div>
                <button type="button" class="btn btn-danger text-nowrap" data-kt-ratings-table-select="delete_selected">@lang('general.delete_selected')</button>
                <select class="form-select form-select-solid ms-2"  data-placeholder="@lang('general.status')" data-table-select="status">
                    <option>@lang('general.status')</option>
                    <option value="enable">قبول</option>
                    <option value="disable">بانتظار المراجعة</option>
                </select>
            </div>
            <!--end::Group actions-->
        </div>
        <!--end::Card toolbar-->
    </div>
    <!--end::Card header-->
    <!--begin::Card body-->
    <div class="card-body pt-0">
        <!--begin::Table-->
        <table class="table align-middle table-row-dashed fs-6 gy-5" id="cs_datatable">
            <!--begin::Table head-->
            <thead>
            <!--begin::Table row-->
            <tr class="text-start text-gray-400 fw-bold fs-7 text-uppercase gs-0">
                <th class="w-10px pe-2">
                    <div class="form-check form-check-sm form-check-custom form-check-solid me-3">
                        <input class="form-check-input" type="checkbox" data-kt-check="true" data-kt-check-target="#cs_datatable .form-check-input.selector" value="1" />
                    </div>
                </th>
                <th class="min-w-200px">العميل</th>
                <th class="min-w-100px">التقييم</th>
                <th class="min-w-100px">التعليق</th>
                <th class=" min-w-100px">تاريخ الاضافة</th>
                <th class=" min-w-100px">الحالة</th>
                <th class=" min-w-70px">العمليات</th>
            </tr>
            <!--end::Table row-->
            </thead>
            <!--end::Table head-->
            <!--begin::Table body-->
            <tbody class="fw-semibold text-gray-600">
            @foreach($rates as $rate)
                <tr>
                    <td>
                        <div class="form-check form-check-sm form-check-custom form-check-solid">
                            <input class="form-check-input selector" type="checkbox" value="{{$rate->id}}" />
                        </div>
                    </td>
                    <td>
                        <div class="d-flex">
                            <!--begin::Thumbnail-->
                            <a href="#" class="symbol symbol-50px">
                                <span class="symbol-label" style="background-image:url({{$rate->product->main_image->image_url}});"></span>
                            </a>
                            <!--end::Thumbnail-->
                            <div class="ms-5 text-start">
                                <!--begin::Title-->
                                <a href="#" class="text-gray-800 text-hover-primary fs-5 fw-bold mb-1">{{$rate->user->name}}1</a>
                                <!--end::Title-->
                                <!--begin::Description-->
                                <div class="fs-7">
                                    <a href="#" class="text-gray-800 text-hover-primary text-muted  fw-bold">{{$rate->product->name}}</a>
                                </div>
                                <!--end::Description-->
                            </div>
                        </div>

                    </td>
                    <td class="text-end pe-0" data-order="rating-4">
                        <div class="rating" data-rate="3">
                            @for($i=0;$i<floor($rate->rate);$i++)
                                <i class="fa fa-star text-warning"></i>
                            @endfor
                            @for($i=0;$i<5-$rate->rate;$i++)
                                <i class="fa fa-star"></i>
                            @endfor
                        </div>
                    </td>
                    <td >
                        {{$rate->rate_notes}}
                    </td>
                    <td >
                        {{ \Carbon\Carbon::createFromDate($rate->rated_at)->toDayDateTimeString()}}
                    </td>
                    <td class="">
                        @if($rate->is_rate_approved == 0)
                            <span class="badge badge-light-warning fs-7 fw-bold">بانتظار المراجعة</span>
                        @elseif($rate->is_rate_approved == 1)
                            <span class="badge badge-light-success fs-7 fw-bold">مقبول</span>
                        @endif
                    </td>
                    <td class="">
                        <div class="btn-group">
                            {{--<a href="#" data-bs-toggle="modal" data-bs-target="#cs_modal_show" class="btn btn-icon btn-sm btn-light-primary ">--}}
                            {{--<i class="fas fa-eye fs-4"></i>--}}
                            {{--</a>--}}
                            {{--<a href="{{ route('admin.fabric_types.edit') }}" class="btn btn-icon btn-sm btn-light-warning">--}}
                            {{--<i class="fas fa-pen fs-4"></i>--}}
                            {{--</a>--}}
                            @if($rate->is_rate_approved == 0)
                                <a href="#" data-id="{{$rate->id}}" class="accept_rate_btn btn btn-icon btn-sm btn-light-success">
                                    <i class="fas fa-check fs-4"></i>
                                </a>
                            @endif
                            <a href="#" data-id="{{$rate->id}}"
                               data-url="{{route('admin.ratings.delete')}}"
                               data-token="{{csrf_token()}}" class="btn-del btn btn-icon btn-sm btn-light-danger">
                                <i class="fas fa-trash fs-4"></i>
                            </a>
                        </div>
                    </td>
                </tr>
            @endforeach

            </tbody>
            <!--end::Table body-->
        </table>
        <!--end::Table-->
        <div class="d-flex justify-content-end">
            {{$rates->links()}}
        </div>
        <div id="rating" data-rate="3"></div>

    </div>

    <!--end::Card body-->
</div>


@endsection

@push('custom_js')
    <script src="{{ asset('store_admin/js/rater-js/lib/rater-js.js') }}"></script>
    <script src="{{asset('store_admin/js/shared_script.js')}}"></script>
    <script>
        const rating = new Rater({
            max:16,
            readOnly:true,
            rating:4.4,
            element:document.querySelector("#rating")
        });
        rating.create();
    </script>
    <script>
        $('.accept_rate_btn').on('click',function (e) {
            var btn = $(this);
            var id = $(this).data('id');
            btn.toggleClass('disabled');
            swal.fire(
                {

                    title: "هل انت متأكد ؟",

                    text: "هل تريد بالتأكيد قبول التقييم",

                    icon: "warning",

                    showCancelButton: 1,

                    confirmButtonText: "نعم , اقبل !",

                    cancelButtonText: "لا, الغي العملية !",

                    reverseButtons: 1

                }).then(function (e) {
                $.ajax({
                    type: "post",
                    url: "{{route('admin.ratings.accept')}}",
                    data: {id: id},
                    headers: {
                        'X-CSRF-TOKEN': "{{ csrf_token() }}"
                    },
                    success: function (data) {

                        setTimeout(function () {
                            Swal.fire({
                                text: data.mssg,
                                icon: "success",
                                buttonsStyling: false,
                                confirmButtonText: "تم!",
                                customClass: {
                                    confirmButton: "btn btn-primary"
                                }
                            }).then(function (result) {
                                btn.toggleClass('disabled');
                                location.reload();

                            });
                        }, 2000);

                    },
                    error: function (data) {
                        Swal.fire({
                            icon: "error",
                            title: data.responseJSON.mssg,
                            timer: 4000
                        }).then(function (result) {
                            btn.toggleClass('disabled');
                        });
                    }
                });
            });
        });
    </script>
<script>
    $("#status_select").on('change',function (e) {
        $("#rate_filter_form").submit();
    })
</script>

@endpush