@extends('layouts.admin-layout')
@section('title', 'All Product ')
@section('content')

    <div class="content-wrapper">
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card card-primary card-box-shadow">
                            <div class="card-body">
                                <a href="{{ route('admin.product.index') }}">
                                    <button class="btn btn-primary custom_btn custom_btn_sm float-left">
                                        <i class="fas fa-arrow-circle-left"></i>
                                        Back to Products
                                    </button>
                                </a>
                                <h2 style="text-align: end">Product Reviews</h2>

                                <div class="reviews-list">
                                    @if($product->reviews->count() > 0)
                                        <div class="table-responsive">
                                            <table class="table table-striped table-bordered">
                                                <thead>
                                                <tr>
                                                    <th>User</th>
                                                    <th>Rating</th>
                                                    <th>Review</th>
                                                    <th>Date</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                @foreach($product->reviews as $review)
                                                    <tr>
                                                        <td>{{ $review->user->first_name ?? 'Anonymous' }}</td>
                                                        <td>
                                                            @for($i = 1; $i <= 5; $i++)
                                                                @if($i <= $review->rating)
                                                                    <i class="fas fa-star text-warning"></i>
                                                                @else
                                                                    <i class="far fa-star text-warning"></i>
                                                                @endif
                                                            @endfor
                                                        </td>
                                                        <td>{{ $review->review }}</td>
                                                        <td>{{ $review->created_at->format('M d, Y') }}</td>
                                                    </tr>
                                                @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    @else
                                        <div class="alert alert-info mt-5">
                                            No reviews available for this product yet.
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

@endsection
@section('script')

    <script>

        $(document).ready(function () {
            $("table").DataTable({
                order: [0, 'dec']
            });
        });

        function showImagePreview(input, previewId) {
            const preview = document.getElementById(previewId);

            if (input.files && input.files[0]) {
                const reader = new FileReader();

                reader.onload = function (e) {
                    preview.src = e.target.result;
                    preview.style.display = 'block';
                };

                reader.readAsDataURL(input.files[0]);
            }
        }
        const topBannerImageInput = document.getElementById('topBannerImageInput');
        topBannerImageInput.addEventListener('change', function () {
            showImagePreview(this, 'topBannerImagePreview');
        });
    </script>

@endsection