@extends('layouts.client')

@section('title', 'Review.Blade')

@section('content')
<div class="min-h-screen py-8 px-4">
        <div class="max-w-2xl mx-auto">
            <!-- Back to Dashboard -->
            <div class="mb-6">
                <a href="{{ route('appointment.show', $appointmentLink->token) }}" class="inline-flex items-center text-primary hover:text-[var(--stencil-deep)] transition-colors">
                    <i class="fas fa-arrow-left mr-2"></i>Back to Dashboard
                </a>
            </div>

            <div class="glass-card rounded-xl p-8">
                <!-- Header -->
                <div class="text-center mb-8 pb-6 border-b rule">
                    @if($studio->logo_url)
                        <img src="{{ $studio->logo_url }}" alt="Studio Logo" class="h-20 mx-auto mb-4 rounded-lg">
                    @endif
                    <h1 class="text-3xl font-bold text-primary mb-2">{{ $studio->studio_name ?: 'Tattoo Studio' }}</h1>
                    <p class="text-secondary">Leave a Review</p>
                </div>

                <!-- Check if already reviewed -->
                @if(!empty($appointmentLink->metadata['review']))
                    <div class="text-center">
                        <div class="glass-card p-6 mb-6 border-green-500/20 bg-green-500/10">
                            <h3 class="text-xl font-semibold text-success mb-4">
                                <i class="fas fa-check-circle mr-2"></i>Review Submitted
                            </h3>
                            <p class="text-secondary mb-4">Thank you for your review! Your feedback helps us improve our services.</p>

                            <div class="glass-card p-4 mb-4">
                                <div class="star-rating justify-center mb-2">
                                    @for($i = 1; $i <= 5; $i++)
                                        <i class="fas fa-star {{ $i <= $appointmentLink->metadata['review']['rating'] ? 'text-warning' : 'text-gray-600' }}"></i>
                                    @endfor
                                </div>
                                <p class="text-secondary">{{ $appointmentLink->metadata['review']['review'] }}</p>
                                <p class="text-muted text-sm mt-2">
                                    Submitted on {{ \Carbon\Carbon::parse($appointmentLink->metadata['review']['submitted_at'])->format('F j, Y g:i A') }}
                                </p>
                            </div>

                            @if($appointmentLink->metadata['review']['allow_public'])
                                <p class="text-primary text-sm">
                                    <i class="fas fa-globe mr-1"></i>This review may be displayed publicly
                                </p>
                            @else
                                <p class="text-muted text-sm">
                                    <i class="fas fa-lock mr-1"></i>This review is private
                                </p>
                            @endif
                        </div>
                    </div>
                @else
                    <!-- Review Form -->
                    <form method="POST" action="{{ route('appointment.review.submit', $appointmentLink->token) }}">
                        @csrf

                        <!-- Appointment Summary -->
                        <div class="glass-card p-6 mb-6">
                            <h3 class="text-lg font-semibold text-primary mb-4">
                                <i class="fas fa-calendar-check mr-2"></i>Your Experience
                            </h3>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <p class="text-secondary">Artist:</p>
                                    <p class="text-primary font-semibold">{{ $appointment->user->name }}</p>
                                </div>
                                <div>
                                    <p class="text-secondary">Date:</p>
                                    <p class="text-primary font-semibold">{{ $appointment->scheduled_at->format('F j, Y') }}</p>
                                </div>
                                @if($appointment->service)
                                    <div>
                                        <p class="text-secondary">Service:</p>
                                        <p class="text-primary font-semibold">{{ $appointment->service }}</p>
                                    </div>
                                @endif
                            </div>
                        </div>

                        <!-- Rating Section -->
                        <div class="mb-6">
                            <label class="block text-secondary font-semibold mb-4 text-center">How would you rate your experience?</label>
                            <div class="star-rating">
                                @for($i = 1; $i <= 5; $i++)
                                    <i class="fas fa-star star" data-rating="{{ $i }}"></i>
                                @endfor
                            </div>
                            <input type="hidden" name="rating" id="rating" required>
                            <p class="text-center text-muted text-sm mt-2">Click to rate from 1 to 5 stars</p>
                        </div>

                        <!-- Review Text -->
                        <div class="mb-6">
                            <label for="review" class="block text-secondary font-semibold mb-2">Tell us about your experience:</label>
                            <textarea
                                id="review"
                                name="review"
                                rows="6"
                                class="w-full p-3 glass-card rounded-lg border rule bg-transparent text-[var(--ink)] placeholder-gray-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/50 focus:outline-none resize-none"
                                placeholder="Share your experience with the studio, artist, and service quality..."
                                required
                            ></textarea>
                            <p class="text-muted text-sm mt-2">Minimum 50 characters</p>
                        </div>

                        <!-- Public Review Option -->
                        <div class="mb-6">
                            <div class="glass-card p-4">
                                <label class="flex items-center cursor-pointer">
                                    <input type="checkbox" name="allow_public" value="1" class="w-5 h-5 text-[var(--stencil)] border-2 border-blue-500 rounded focus:ring-blue-500 bg-transparent">
                                    <div class="ml-3">
                                        <div class="text-secondary font-semibold">Allow public display</div>
                                        <div class="text-muted text-sm">Your review may be displayed on our website and social media to help other clients</div>
                                    </div>
                                </label>
                            </div>
                        </div>

                        <!-- Submit Button -->
                        <div class="text-center">
                            <button type="submit" class="btn-primary w-full" id="submit-btn" disabled>
                                <i class="fas fa-star mr-2"></i>Submit Review
                            </button>
                        </div>
                    </form>
                @endif

                <!-- Contact Information -->
                <div class="mt-6 pt-6 border-t rule">
                    <h3 class="text-lg font-semibold text-secondary mb-4">Thank you for choosing us!</h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        @if($studio->phone)
                            <div class="flex items-center">
                                <i class="fas fa-phone text-primary mr-3"></i>
                                <div>
                                    <p class="text-secondary">Phone</p>
                                    <p class="text-primary font-semibold">{{ $studio->phone }}</p>
                                </div>
                            </div>
                        @endif
                        @if($studio->email)
                            <div class="flex items-center">
                                <i class="fas fa-envelope text-primary mr-3"></i>
                                <div>
                                    <p class="text-secondary">Email</p>
                                    <p class="text-primary font-semibold">{{ $studio->email }}</p>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
        const stars = document.querySelectorAll('.star');
        const ratingInput = document.getElementById('rating');
        const reviewTextarea = document.getElementById('review');
        const submitBtn = document.getElementById('submit-btn');

        // Handle star rating
        stars.forEach((star, index) => {
            star.addEventListener('click', () => {
                const rating = index + 1;
                ratingInput.value = rating;

                // Update star appearance
                stars.forEach((s, i) => {
                    if (i < rating) {
                        s.classList.add('active');
                    } else {
                        s.classList.remove('active');
                    }
                });

                checkFormValidity();
            });

            star.addEventListener('mouseenter', () => {
                stars.forEach((s, i) => {
                    if (i <= index) {
                        s.style.color = '#fbbf24';
                    } else {
                        s.style.color = '#4b5563';
                    }
                });
            });

            star.addEventListener('mouseleave', () => {
                stars.forEach((s, i) => {
                    const rating = parseInt(ratingInput.value) || 0;
                    if (i < rating) {
                        s.style.color = '#fbbf24';
                    } else {
                        s.style.color = '#4b5563';
                    }
                });
            });
        });

        // Check form validity
        function checkFormValidity() {
            const rating = ratingInput.value;
            const review = reviewTextarea.value.trim();

            if (rating && review.length >= 50) {
                submitBtn.disabled = false;
            } else {
                submitBtn.disabled = true;
            }
        }

        // Monitor review text
        reviewTextarea.addEventListener('input', function() {
            this.style.height = 'auto';
            this.style.height = (this.scrollHeight) + 'px';
            checkFormValidity();
        });

        // Character counter
        reviewTextarea.addEventListener('input', function() {
            const length = this.value.length;
            const minLength = 50;
            const counter = document.querySelector('.text-muted');

            if (length < minLength) {
                counter.textContent = `${minLength - length} more characters needed`;
                counter.className = 'text-muted text-sm mt-2';
            } else {
                counter.textContent = `${length} characters`;
                counter.className = 'text-success text-sm mt-2';
            }
        });

        // Initial check
        checkFormValidity();
    </script>
@endpush