@extends('layouts.member')

@section('title', 'Modifier mon avis')
@section('page-title', 'Modifier mon avis')

@section('content')
<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="card modern shadow-sm border-0 rounded-3">
            <div class="card-header bg-white rounded-top-3">
                <h5 class="mb-0"><i class="bi bi-pencil me-2"></i>Modifier votre avis</h5>
            </div>
            <div class="card-body">
                <!-- Produit concerné -->
                <div class="d-flex align-items-center gap-3 mb-4 p-3 bg-light rounded-3">
                    @if($review->product && $review->product->main_image)
                    <img src="{{ asset('storage/' . $review->product->main_image) }}" 
                         alt="{{ $review->product->name }}"
                         class="rounded-2" 
                         style="width: 80px; height: 80px; object-fit: cover;">
                    @else
                    <div class="bg-secondary rounded-2 d-flex align-items-center justify-content-center" 
                         style="width: 80px; height: 80px;">
                        <i class="bi bi-image text-white fs-4"></i>
                    </div>
                    @endif
                    <div>
                        <h5 class="mb-1">{{ $review->product->name ?? 'Produit' }}</h5>
                        <p class="text-muted mb-0">
                            Commande #{{ $review->order_id }} · Avis du {{ $review->created_at->format('d/m/Y') }}
                        </p>
                    </div>
                </div>

                @if(!$review->is_approved)
                <div class="alert alert-warning d-flex align-items-center mb-4">
                    <i class="bi bi-clock-fill me-2 fs-5"></i>
                    <div>
                        Votre avis est actuellement en attente de modération. 
                        Si vous le modifiez, il sera à nouveau soumis à validation.
                    </div>
                </div>
                @endif

                <form action="{{ route('member.reviews.update', $review->id) }}" method="POST">
                    @csrf
                    @method('PUT')

                    <!-- Note -->
                    <div class="mb-4">
                        <label class="form-label fw-semibold">Votre note <span class="text-danger">*</span></label>
                        <div class="star-rating" id="star-rating">
                            @for($i = 1; $i <= 5; $i++)
                            <input type="radio" name="rating" value="{{ $i }}" id="star{{ $i }}" 
                                   {{ old('rating', $review->rating) == $i ? 'checked' : '' }} class="d-none">
                            <label for="star{{ $i }}" class="star-label" data-value="{{ $i }}">
                                <i class="bi bi-star{{ old('rating', $review->rating) >= $i ? '-fill text-warning' : '' }} fs-2"></i>
                            </label>
                            @endfor
                        </div>
                        <div class="rating-text text-muted mt-2" id="rating-text">
                            @php
                                $ratingTexts = [
                                    1 => '😞 Très déçu',
                                    2 => '😐 Déçu',
                                    3 => '😊 Correct',
                                    4 => '😃 Satisfait',
                                    5 => '🤩 Excellent !'
                                ];
                            @endphp
                            {{ $ratingTexts[$review->rating] ?? 'Cliquez sur les étoiles pour noter' }}
                        </div>
                        @error('rating')
                        <div class="text-danger small mt-1">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Titre -->
                    <div class="mb-4">
                        <label for="title" class="form-label fw-semibold">Titre de votre avis (optionnel)</label>
                        <input type="text" 
                               class="form-control @error('title') is-invalid @enderror" 
                               id="title" 
                               name="title" 
                               value="{{ old('title', $review->title) }}"
                               placeholder="Résumez votre avis en quelques mots">
                        @error('title')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Commentaire -->
                    <div class="mb-4">
                        <label for="comment" class="form-label fw-semibold">Votre avis <span class="text-danger">*</span></label>
                        <textarea class="form-control @error('comment') is-invalid @enderror" 
                                  id="comment" 
                                  name="comment" 
                                  rows="5" 
                                  placeholder="Partagez votre expérience avec ce produit."
                                  minlength="10"
                                  maxlength="1000">{{ old('comment', $review->comment) }}</textarea>
                        <div class="d-flex justify-content-between mt-1">
                            @error('comment')
                            <div class="text-danger small">{{ $message }}</div>
                            @else
                            <small class="text-muted">Minimum 10 caractères</small>
                            @enderror
                            <small class="text-muted"><span id="charCount">0</span>/1000</small>
                        </div>
                    </div>

                    <div class="d-flex justify-content-between">
                        <a href="{{ route('member.reviews.index') }}" class="btn btn-outline-secondary">
                            <i class="bi bi-arrow-left me-1"></i> Annuler
                        </a>
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-check-lg me-1"></i> Enregistrer les modifications
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
.star-rating {
    display: flex;
    gap: 0.5rem;
}
.star-label {
    cursor: pointer;
    transition: transform 0.2s ease;
}
.star-label:hover {
    transform: scale(1.2);
}
.star-label i {
    transition: color 0.2s ease;
}
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const starLabels = document.querySelectorAll('.star-label');
    const ratingText = document.getElementById('rating-text');
    const textarea = document.getElementById('comment');
    const charCount = document.getElementById('charCount');
    
    const ratingTexts = {
        1: '😞 Très déçu',
        2: '😐 Déçu',
        3: '😊 Correct',
        4: '😃 Satisfait',
        5: '🤩 Excellent !'
    };

    starLabels.forEach((label, index) => {
        label.addEventListener('click', function() {
            const value = this.dataset.value;
            updateStars(value);
            ratingText.textContent = ratingTexts[value];
        });

        label.addEventListener('mouseenter', function() {
            const value = this.dataset.value;
            highlightStars(value);
        });
    });

    document.querySelector('.star-rating').addEventListener('mouseleave', function() {
        const checked = document.querySelector('input[name="rating"]:checked');
        if (checked) {
            updateStars(checked.value);
        } else {
            resetStars();
        }
    });

    function updateStars(value) {
        starLabels.forEach((label, index) => {
            const icon = label.querySelector('i');
            if (index < value) {
                icon.className = 'bi bi-star-fill text-warning fs-2';
            } else {
                icon.className = 'bi bi-star fs-2';
            }
        });
    }

    function highlightStars(value) {
        starLabels.forEach((label, index) => {
            const icon = label.querySelector('i');
            if (index < value) {
                icon.className = 'bi bi-star-fill text-warning fs-2';
            } else {
                icon.className = 'bi bi-star fs-2';
            }
        });
    }

    function resetStars() {
        starLabels.forEach(label => {
            label.querySelector('i').className = 'bi bi-star fs-2';
        });
    }

    textarea.addEventListener('input', function() {
        charCount.textContent = this.value.length;
    });
    charCount.textContent = textarea.value.length;
});
</script>
@endpush
