@extends('backend.layouts.app')
@section('title', $title)
@section('style')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rater-js/1.1.1/rater.min.css">
@endsection
@section('content')
@foreach ($reviews as $key => $review)
<x-danger-modal :id="$review->id" header="Danger" message="Are you sure deleted it?!" link="{{ route('admin.reviews.destroy', $review->id) }}" />
@endforeach


<div class="row">
    <div class="col">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="ri-filter-2-line"></i>
                    Filter using product
                </h5>
            </div>
            <div class="card-body">
                <form action="{{ route('admin.reviews.index') }}" method="get">
                    <div class="form-group row mb-3">
                        <div class="col">
                            <label class="form-label" for="product_id">Product <span class="text-danger">*</span></label>
                            <select class="form-control form-select select2 @error("product_id") is-invalid @enderror" id="product_id" name="q" data-toggle="select2" required>
                            </select>
                            @error("product_id")
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col">
                            @if(request()->q && isset($product))
                            <a href="{{ route('admin.reviews.index') }}" class="btn btn-danger" onclick="loadingBtn(this)">Reset</a>
                            @endif
                            <button type="submit" class="btn btn-primary" onclick="loadingBtn(this)">Filter</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col">
        <div class="card overflow-scroll">
            <form action="{{ route('admin.reviews.bulk-delete') }}" method="get" id="bulkForm">
                @method("delete")
                <div class="card-body">
                    <div class="pb-4">
                        <div class="card-widgets">
                            <a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="animated-preview"><i class="ri-more-2-fill fs-3"></i></a>
                            <div class="dropdown btn-group">
                                <div class="dropdown-menu dropdown-menu-animated">
                                    <a class="dropdown-item" href="#" onclick="document.querySelector('#bulkForm').submit();">
                                        <i class="ri-delete-bin-line text-danger"></i>
                                        <span class="text-danger">Bulk Delete</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <h5 class="header-title mb-0">
                            {{ $title }}
                        </h5>
                    </div>
                    <div id="yearly-sales-collapse" class="collapse show">
                        <div class="">
                            <table class="table table-nowrap table-hover mb-0" id="reviews-table">
                                <thead>
                                    <tr>
                                        <th>
                                            <div class="d-flex align-items-center gap-2 form-checkbox-success">
                                                <input type="checkbox" class="form-check-input check-all" id="reviewsIds">
                                                <label class="form-check-label" for="reviewsIds">ID</label>
                                            </div>
                                        </th>
                                        <th>User</th>
                                        <th>Product</th>
                                        <th>Rate</th>
                                        <th>Review</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </form>
        </div> <!-- end card-->
    </div>
</div>
@endsection


@section('script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/rater-js/1.1.1/rater.min.js"></script>
<script type="text/javascript">
    $(function() {

        var table = $('#reviews-table').DataTable({
            processing: true
            , serverSide: true
            , ajax: "{{ route('admin.reviews.index') }}"
            , columns: [{
                    data: 'id'
                    , name: 'id'
                    , orderable: false
                }
                , {
                    data: 'user_id'
                    , name: 'user_id'
                    , orderable: false
                    , searcheable: true
                }
                , {
                    data: 'product_id'
                    , name: 'product_id'
                    , orderable: false
                    , searcheable: true
                }
                , {
                    data: 'rate'
                    , name: 'rate'
                }
                , {
                    data: 'review'
                    , name: 'review'
                    , orderable: false
                    , searcheable: true
                }
                , {
                    data: 'action'
                    , name: 'action'
                    , orderable: false
                    , searcheable: false
                }
            , ]
            , order: []
        });

    });

</script>


<script>
    $(document).ready(function() {
        $('#product_id').select2({
            ajax: {
                url: "{{ route('admin.products.search') }}",
                dataType: 'json',
                delay: 100,
                data: function(params) {
                    return {
                        q: params.term // search term
                    };
                },
                processResults: function(data) {
                    return {
                        results: $.map(data, function(item) {
                            return {
                                id: item.slug,
                                text: item.name.en
                            };
                        })
                    };
                },
                cache: true
            },
            minimumInputLength: 3,
            placeholder: 'Search for a product',
            allowClear: true
        });

        @if(request()->q && isset($product))
            var currentProduct = @json($product);
            var option = new Option(currentProduct.name.en, currentProduct.id, true, true);
            $('#product_id').append(option).trigger('change');
        @endif
    });
</script>

@endsection