@extends('layouts.app')

@section('content')
    <div class="container">
        <h2>Rate Seller</h2>
        <form action="{{ route('ratings.store') }}" method="POST">
            @csrf
            {{-- You can use hidden inputs for passing ad_id and seller_id if needed --}}
            <input type="hidden" name="ad_id" value="{{ $ad->id }}">
            <input type="hidden" name="seller_id" value="{{ $ad->user_id }}">


            <label for="rating">Rating (1-5):</label>
            <div class="star-rating" id="star-rating">
                <span class="star" data-value="1">&#9733;</span>
                <span class="star" data-value="2">&#9733;</span>
                <span class="star" data-value="3">&#9733;</span>
                <span class="star" data-value="4">&#9733;</span>
                <span class="star" data-value="5">&#9733;</span>
            </div>

            <input type="hidden" name="rating" id="rating-input">

            <label for="comment">Review (optional):</label>
            <textarea name="comment" rows="3"></textarea>

            <button type="submit" class="btn btn-primary">Submit Rating</button>
        </form>
    </div>

    <style>
        /* Container for the stars */
        .star-rating {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-bottom: 20px;
        }

        .star {
            font-size: 40px;
            color: #ccc;
            /* Default gray color for unselected stars */
            cursor: pointer;
            transition: color 0.2s ease-in-out;
        }

        /* When a star is selected, change the color to gold */
        .star.selected {
            color: #f7b731;
            /* Gold color for selected stars */
        }

        /* Hover effect for stars */
        .star:hover,
        .star:hover~.star {
            color: #f7b731;
            /* Gold color on hover */
        }

        /* Optional styling for the review textarea */
        textarea {
            width: 100%;
            padding: 10px;
            border-radius: 4px;
            border: 1px solid #ddd;
            font-size: 14px;
        }

        /* Button style */
        button {
            padding: 10px 20px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        button:hover {
            background-color: #0056b3;
        }
    </style>

    <script>
        // Get all the star elements
        const stars = document.querySelectorAll('.star');
        const ratingInput = document.getElementById('rating-input');

        // Add event listeners to each star
        stars.forEach(star => {
            star.addEventListener('mouseover', () => {
                let value = star.getAttribute('data-value');
                highlightStars(value);
            });

            star.addEventListener('mouseout', () => {
                let selectedRating = ratingInput.value;
                highlightStars(selectedRating);
            });

            star.addEventListener('click', () => {
                let value = star.getAttribute('data-value');
                ratingInput.value = value;
                highlightStars(value);
            });
        });

        // Function to highlight stars based on the rating
        function highlightStars(rating) {
            stars.forEach(star => {
                let value = star.getAttribute('data-value');
                if (value <= rating) {
                    star.classList.add('selected');
                } else {
                    star.classList.remove('selected');
                }
            });
        }
    </script>
@endsection