@extends('frontend.layouts.app')

@section('title')
    {{ $title ?? 'Product Feedback' }}
@endsection

@section('content')
<div class="feedback-section py-5">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8">

                <h1 class="text-center mb-3 theme-red">Product Feedback</h1>
                <p class="text-center mb-4">Share your experience with this product. Your feedback helps us improve!</p>

                <!-- Product Card -->
                <div class="card mb-4">
                    <img src="{{ getPhoto($ad->thumbnail) }}" class="card-img-top product-image" alt="{{ $ad->title }}">
                    <div class="card-body">
                        <h2 class="card-title theme-red">{{ $ad->title }}</h2>
                        <p class="card-text">{!! nl2br($ad?->hasOneAdsInfo?->description) !!}</p>
                    </div>
                </div>

                @if($trade && is_null($trade->rating))
                    <!-- Feedback Form -->
                    <div class="card p-4 mb-4">
                        <h5 class="theme-red mb-3">Rate this product:</h5>
                        <form method="POST" action="{{ route('user.ads.feedback.submit', $ad->id) }}">
                            @csrf
                            <input type="hidden" name="ad_id" value="{{ $ad->id }}">
                            <input type="hidden" id="rating-value" name="rating" value="0">

                            <!-- Star Rating -->
                            <div class="rating mb-3">
                                <i class="far fa-star fa-lg" data-rating="1"></i>
                                <i class="far fa-star fa-lg" data-rating="2"></i>
                                <i class="far fa-star fa-lg" data-rating="3"></i>
                                <i class="far fa-star fa-lg" data-rating="4"></i>
                                <i class="far fa-star fa-lg" data-rating="5"></i>
                            </div>

                            <!-- Comment -->
                            <div class="mb-3">
                                <label for="feedback" class="form-label">Your Comment</label>
                                <textarea class="form-control" id="feedback" name="feedback" rows="3" required></textarea>
                            </div>

                            <button type="submit" class="btn btn-theme">Submit Feedback</button>
                        </form>
                    </div>
                @else
                    <div class="alert alert-info">
                        You have already submitted feedback for this product or are not authorized to submit feedback.
                    </div>
                @endif

            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    $(document).ready(function() {
        // Star rating functionality
        $('.rating i').click(function() {
            const rating = parseInt($(this).data('rating'));
            $('#rating-value').val(rating);

            $('.rating i').each(function(index) {
                if (index < rating) {
                    $(this).removeClass('far').addClass('fas theme-red');
                } else {
                    $(this).removeClass('fas theme-red').addClass('far');
                }
            });
        });
    });
</script>
@endpush

@push('style')
<style>
    .card { border: none; box-shadow: 0 4px 12px rgba(0,0,0,0.1); transition: transform 0.3s; }
    .card:hover { transform: translateY(-5px); }
    .product-image { height: 300px; object-fit: cover; border-radius: 8px 8px 0 0; }
    .theme-red { color: var(--primary); }
    .btn-theme { background-color: var(--primary); border-color: var(--primary); color: white; }
    .btn-theme:hover { background-color: #c00000; border-color: #c00000; color: white; }
    .rating i { cursor: pointer; transition: color 0.2s; }
    .rating i:hover { color: var(--primary); }
    @media (max-width: 767px) { .card-title { font-size: 22px; } }
</style>
@endpush