<?php
// Partial view for review form
// Expected variables: $productId, $userReview (optional - for editing)
$isEditing = isset($userReview) && !empty($userReview);
?>

<div class="review-form-container" id="reviewFormContainer">
    <h3><?= $isEditing ? 'Редактировать отзыв' : 'Оставить отзыв' ?></h3>
    
    <form id="reviewForm" class="review-form">
        <input type="hidden" name="product_id" value="<?= $productId ?>">
        <?php if ($isEditing): ?>
            <input type="hidden" name="review_id" value="<?= $userReview['review_id'] ?>">
        <?php endif; ?>

        <div class="form-group">
            <label>Ваша оценка: <span class="required">*</span></label>
            <div class="star-rating-input" id="starRatingInput">
                <?php for ($i = 1; $i <= 5; $i++): ?>
                    <span class="star-input" data-rating="<?= $i ?>">★</span>
                <?php endfor; ?>
            </div>
            <input type="hidden" name="rating" id="ratingValue" value="<?= $isEditing ? $userReview['rating'] : '0' ?>" required>
            <div class="rating-text" id="ratingText">
                <?php if ($isEditing): ?>
                    <?= $userReview['rating'] ?> из 5
                <?php else: ?>
                    Нажмите на звезды для выбора оценки
                <?php endif; ?>
            </div>
            <span class="error-message" id="ratingError"></span>
        </div>

        <div class="form-group">
            <label for="reviewComment">Ваш отзыв:</label>
            <textarea 
                name="comment" 
                id="reviewComment" 
                rows="5" 
                placeholder="Расскажите о вашем впечатлении о товаре..."
                maxlength="1000"
            ><?= $isEditing ? htmlspecialchars($userReview['comment']) : '' ?></textarea>
            <div class="char-counter">
                <span id="charCount"><?= $isEditing ? mb_strlen($userReview['comment']) : '0' ?></span>/1000
            </div>
        </div>

        <div class="form-actions">
            <button type="submit" class="btn primary-btn" id="submitReviewBtn">
                <i class="fas fa-paper-plane"></i> 
                <?= $isEditing ? 'Обновить отзыв' : 'Отправить отзыв' ?>
            </button>
            <?php if ($isEditing): ?>
                <button type="button" class="btn secondary-btn" id="cancelEditBtn">
                    <i class="fas fa-times"></i> Отменить
                </button>
            <?php endif; ?>
        </div>

        <div class="form-message" id="formMessage"></div>
    </form>
</div>

<style>
.review-form-container {
    background: #f8f9fa;
    padding: 25px;
    border-radius: 8px;
    margin: 20px 0;
    border: 2px solid #e0e0e0;
}

.review-form-container h3 {
    color: #453227;
    margin-bottom: 20px;
    font-size: 20px;
}

.review-form .form-group {
    margin-bottom: 20px;
}

.review-form label {
    display: block;
    color: #453227;
    font-weight: bold;
    margin-bottom: 8px;
}

.required {
    color: #dc3545;
}

.star-rating-input {
    display: flex;
    gap: 5px;
    margin: 10px 0;
}

.star-input {
    font-size: 32px;
    color: #ddd;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}

.star-input:hover,
.star-input.hover {
    color: #ffc107;
    transform: scale(1.1);
}

.star-input.selected {
    color: #ffc107;
}

.rating-text {
    font-size: 14px;
    color: #666;
    margin-top: 5px;
}

.review-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-family: inherit;
    font-size: 14px;
    resize: vertical;
    transition: border-color 0.3s;
}

.review-form textarea:focus {
    outline: none;
    border-color: #617365;
}

.char-counter {
    text-align: right;
    font-size: 12px;
    color: #999;
    margin-top: 5px;
}

.form-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.btn {
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.primary-btn {
    background: #617365;
    color: white;
}

.primary-btn:hover {
    background: #453227;
}

.primary-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.secondary-btn {
    background: #6c757d;
    color: white;
}

.secondary-btn:hover {
    background: #5a6268;
}

.form-message {
    margin-top: 15px;
    padding: 12px;
    border-radius: 6px;
    display: none;
}

.form-message.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    display: block;
}

.form-message.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    display: block;
}

.error-message {
    color: #dc3545;
    font-size: 13px;
    display: none;
}

.error-message.show {
    display: block;
    margin-top: 5px;
}

@media (max-width: 768px) {
    .review-form-container {
        padding: 15px;
    }
    
    .form-actions {
        flex-direction: column;
    }
    
    .btn {
        width: 100%;
        justify-content: center;
    }
    
    .star-input {
        font-size: 28px;
    }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const starRatingInput = document.getElementById('starRatingInput');
    const ratingValue = document.getElementById('ratingValue');
    const ratingText = document.getElementById('ratingText');
    const stars = starRatingInput.querySelectorAll('.star-input');
    const reviewComment = document.getElementById('reviewComment');
    const charCount = document.getElementById('charCount');
    
    // Set initial state if editing
    const initialRating = parseInt(ratingValue.value);
    if (initialRating > 0) {
        updateStarDisplay(initialRating);
    }
    
    // Star hover effect
    stars.forEach(star => {
        star.addEventListener('mouseenter', function() {
            const rating = parseInt(this.dataset.rating);
            updateStarHover(rating);
        });
        
        star.addEventListener('click', function() {
            const rating = parseInt(this.dataset.rating);
            ratingValue.value = rating;
            updateStarDisplay(rating);
            updateRatingText(rating);
            document.getElementById('ratingError').classList.remove('show');
        });
    });
    
    starRatingInput.addEventListener('mouseleave', function() {
        const currentRating = parseInt(ratingValue.value);
        updateStarDisplay(currentRating);
    });
    
    // Character counter
    if (reviewComment && charCount) {
        reviewComment.addEventListener('input', function() {
            charCount.textContent = this.value.length;
        });
    }
    
    function updateStarHover(rating) {
        stars.forEach((star, index) => {
            if (index < rating) {
                star.classList.add('hover');
            } else {
                star.classList.remove('hover');
            }
        });
    }
    
    function updateStarDisplay(rating) {
        stars.forEach((star, index) => {
            star.classList.remove('hover');
            if (index < rating) {
                star.classList.add('selected');
            } else {
                star.classList.remove('selected');
            }
        });
    }
    
    function updateRatingText(rating) {
        const texts = {
            1: '1 из 5 - Плохо',
            2: '2 из 5 - Неудовлетворительно',
            3: '3 из 5 - Нормально',
            4: '4 из 5 - Хорошо',
            5: '5 из 5 - Отлично!'
        };
        ratingText.textContent = texts[rating] || 'Нажмите на звезды для выбора оценки';
    }
});
</script>

