@extends('admin.layouts.main')

@section('content')

    <div class="card">
        <div class="card-header">
            <h4 class="card-title">Customer Reviews for: <strong>{{ $product->product_name }}</strong></h4>
        </div>
        <div class="card-body">
            {{-- Product Details Card --}}
            <div class="card mb-4">
                <div class="card-header bg-light">
                    <h5 class="mb-0"><i class="fas fa-info-circle me-2"></i>Product Details</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label text-muted small mb-1">Category</label>
                                <p class="mb-0">{{ $product->category ? $product->category->name : 'N/A' }}</p>
                            </div>
                            <div class="mb-3">
                                <label class="form-label text-muted small mb-1">Brand</label>
                                <p class="mb-0">{{ $product->brand ? $product->brand->name : 'N/A' }}</p>
                            </div>
                            <div class="mb-3">
                                <label class="form-label text-muted small mb-1">Sales Price</label>
                                <p class="mb-0">₹{{ number_format($product->sales_price, 2) }}</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label text-muted small mb-1">Stock Quantity</label>
                                <p class="mb-0">{{ $product->quantity }}</p>
                            </div>
                            <div class="mb-3">
                                <label class="form-label text-muted small mb-1">GST</label>
                                <p class="mb-0">{{ $product->gst }}%</p>
                            </div>
                            <div class="mb-3">
                                <label class="form-label text-muted small mb-1">Description</label>
                                <p class="mb-0">{{ $product->description }}</p>
                            </div>
                        </div>
                    </div>

                    {{-- Product Images --}}
                    <div class="mt-4">
                        <label class="form-label text-muted small mb-2">Product Images</label>
                        <div class="d-flex flex-wrap gap-3">
                            @foreach ([$product->product_image_1, $product->product_image_2, $product->product_image_3] as $image)
                                @if ($image)
                                    <div class="border rounded p-2" style="width: 120px; height: 120px;">
                                        <img src="{{ url('images/products/' . $image) }}"
                                            class="img-fluid h-100 w-100 object-fit-cover" alt="Product Image">
                                    </div>
                                @endif
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>

            {{-- Customer Reviews Section --}}
            <div class="card">
                <div class="card-header bg-light">
                    <h5 class="mb-0"><i class="fas fa-star me-2"></i>Customer Reviews</h5>
                </div>
                <div class="card-body">
                    @if ($reviews->count())
                        @php
                            // Filter only visible reviews for average rating calculation
                            $visibleReviews = $reviews->where('status', 1);

                            $averageRating = round($visibleReviews->avg('rating'), 1);
                            $totalVisibleReviews = $visibleReviews->count();
                        @endphp

                        {{-- Average Rating Section --}}
                        <div class="d-flex align-items-center mb-4">
                            <h2 class="mb-0 me-3 text-warning">{{ $averageRating }} <i class="fas fa-star"></i></h2>
                            <div>
                                <div class="fw-bold">{{ $totalVisibleReviews }} Ratings & Reviews</div>
                                <div class="text-muted small">Verified customers shared their experience</div>
                            </div>
                        </div>


                        {{-- Review List --}}
                        <div class="d-flex flex-column gap-4">
                            @foreach ($reviews as $review)
                                <div class="card shadow-sm rounded-3 border-0">
                                    <div class="card-body">
                                        {{-- User Info --}}
                                        <div class="d-flex align-items-center mb-3">
                                            <div class="avatar avatar-sm me-2 bg-primary text-white rounded-circle d-flex align-items-center justify-content-center"
                                                style="width: 36px; height: 36px;">
                                                {{ substr($review->user ? $review->user->name : 'G', 0, 1) }}
                                            </div>
                                            <div>
                                                <h6 class="mb-0">{{ $review->user ? $review->user->name : 'Guest' }}</h6>
                                                <small
                                                    class="text-muted">{{ $review->user ? $review->user->email : '' }}</small>
                                            </div>
                                        </div>

                                        {{-- Title & Content --}}
                                        <h6 class="fw-bold mb-1">{{ $review->title }}</h6>
                                        <p class="text-muted mb-2">{{ Str::limit($review->description, 200) }}</p>

                                        {{-- Star Rating --}}
                                        <div class="mb-2">
                                            @for ($i = 1; $i <= 5; $i++)
                                                <i
                                                    class="fas fa-star {{ $i <= $review->rating ? 'text-warning' : 'text-secondary' }}"></i>
                                            @endfor
                                        </div>

                                        {{-- Media Preview --}}
                                        @if ($review->media)
                                            @php $media = json_decode($review->media, true); @endphp
                                            <div class="d-flex flex-wrap gap-2 mb-2">
                                                @foreach (array_slice($media, 0, 5) as $item)
                                                    @php $extension = pathinfo($item, PATHINFO_EXTENSION); @endphp
                                                    <div class="media-thumbnail position-relative"
                                                        style="width: 60px; height: 60px;">
                                                        @if (in_array($extension, ['jpg', 'jpeg', 'png', 'gif']))
                                                            <img src="{{ url('images/review/' . $item) }}"
                                                                class="img-fluid h-100 w-100 object-fit-cover rounded border media-trigger"
                                                                data-media="{{ url('images/review/' . $item) }}"
                                                                data-type="image" alt="Review Image">
                                                        @elseif(in_array($extension, ['mp4', 'mov', 'avi']))
                                                            <div class="position-relative media-trigger"
                                                                data-media="{{ url('images/review/' . $item) }}"
                                                                data-type="video">
                                                                <video class="h-100 w-100 object-fit-cover rounded border">
                                                                    <source src="{{ url('images/review/' . $item) }}"
                                                                        type="video/mp4">
                                                                </video>
                                                                <div
                                                                    class="position-absolute top-50 start-50 translate-middle">
                                                                    <i
                                                                        class="fas fa-play text-white bg-dark bg-opacity-50 rounded-circle p-1"></i>
                                                                </div>
                                                            </div>
                                                        @endif
                                                    </div>
                                                @endforeach
                                            </div>
                                            @if (count($media) > 5)
                                                <button type="button" class="btn btn-sm btn-link p-0 media-view-all"
                                                    data-media='@json($media)'>
                                                    View All Media
                                                </button>
                                            @endif
                                        @else
                                            <small class="text-muted">No media</small>
                                        @endif
                                    </div>
                                    <div class="card-footer text-end">
                                        <small class="text-muted">{{ $review->created_at->format('d M Y') }}</small>

                                        {{-- Show/Hide Button --}}
                                        @if ($review->status)
                                            <!-- Show Review Button (when review is visible) -->
                                            <button type="button" class="btn btn-warning btn-sm" data-bs-toggle="modal"
                                                data-bs-target="#hideReviewModal{{ $review->id }}">
                                                Hide Review
                                            </button>
                                        @else
                                            <!-- Hide Review Button (when review is hidden) -->
                                            <button type="button" class="btn btn-success btn-sm" data-bs-toggle="modal"
                                                data-bs-target="#hideReviewModal{{ $review->id }}">
                                                Show Review
                                            </button>
                                        @endif
                                    </div>
                                </div>

                                {{-- Modal for showing/hiding review --}}
                                <div class="modal fade" id="hideReviewModal{{ $review->id }}" tabindex="-1"
                                    aria-labelledby="hideReviewModalLabel{{ $review->id }}" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="hideReviewModalLabel{{ $review->id }}">Review
                                                    Visibility Warning</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                    aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body">
                                                <p>Are you sure you want to {{ $review->status ? 'hide' : 'show' }} this
                                                    review? The rating will {{ $review->status ? 'no longer' : 'now' }} be
                                                    counted on the website.</p>
                                            </div>
                                            <div class="modal-footer">
                                                <form action="{{ route('admin.toggleReviewStatus', $review->id) }}"
                                                    method="POST">
                                                    @csrf
                                                    @method('PATCH')
                                                    <button type="button" class="btn btn-secondary"
                                                        data-bs-dismiss="modal">Cancel</button>
                                                    <button type="submit" class="btn btn-danger">
                                                        {{ $review->status ? 'Hide' : 'Show' }} Review
                                                    </button>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-center py-5">
                            <div class="mb-3">
                                <i class="fas fa-comment-slash fa-3x text-muted"></i>
                            </div>
                            <h5 class="text-muted">No reviews found for this product</h5>
                            <p class="text-muted small">Customers haven't reviewed this product yet.</p>
                        </div>
                    @endif
                </div>
            </div>
            <div class="mt-4">
    {{ $reviews->links('pagination::bootstrap-5') }}
</div>


            <div class="mt-4">
                <a href="{{ route('admin.productlist') }}" class="btn btn-outline-secondary">
                    <i class="fas fa-arrow-left me-2"></i>Back to Product List
                </a>
            </div>
        </div>
    </div>

    <div class="modal fade" id="mediaModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-body text-center p-0">
                    <!-- Media will be injected here -->
                </div>
                <div class="modal-footer justify-content-center">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="viewAllMediaModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">All Media</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row" id="allMediaContainer"></div>
                </div>
            </div>
        </div>
    </div>




@endsection

@section('script')
    <script>
        $(document).ready(function() {
            $(document).on('click', '.media-trigger', function() {
                console.log('clciked')
                var mediaUrl = $(this).data('media');
                var mediaType = $(this).data('type');
                var modalBody = $('#mediaModal .modal-body');

                // Clear previous content
                modalBody.html('');

                if (mediaType === 'image') {
                    modalBody.append('<img src="' + mediaUrl + '" class="img-fluid rounded w-100" />');
                } else if (mediaType === 'video') {
                    modalBody.append(
                        '<video controls autoplay class="w-100 rounded">' +
                        '<source src="' + mediaUrl + '" type="video/mp4">' +
                        'Your browser does not support the video tag.' +
                        '</video>'
                    );
                }

                $('#mediaModal').modal('show');
            });
        });


        $(document).ready(function() {
            $(document).on('click', '.media-view-all', function() {
                const media = $(this).data('media');
                const container = $('#allMediaContainer');
                container.html(''); // Clear previous

                media.forEach(item => {
                    const ext = item.split('.').pop().toLowerCase();
                    let mediaHTML = '';

                    if (['jpg', 'jpeg', 'png', 'gif'].includes(ext)) {
                        mediaHTML = `
                    <div class="col-md-3 mb-3">
                        <img src="/images/review/${item}" class="img-fluid rounded border w-100" alt="Image">
                    </div>`;
                    } else if (['mp4', 'mov', 'avi'].includes(ext)) {
                        mediaHTML = `
                    <div class="col-md-3 mb-3">
                        <video controls class="w-100 rounded border">
                            <source src="/images/review/${item}" type="video/mp4">
                            Your browser does not support the video tag.
                        </video>
                    </div>`;
                    }

                    container.append(mediaHTML);
                });

                $('#viewAllMediaModal').modal('show');
            });
        });
    </script>
@endsection

@section('styles')
    <style>
        .avatar {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
        }

        .media-thumbnail {
            cursor: pointer;
            transition: transform 0.2s;
        }

        .media-thumbnail:hover {
            transform: scale(1.05);
        }

        .table th {
            white-space: nowrap;
        }

        .object-fit-cover {
            object-fit: cover;
        }
    </style>
@endsection