{% extends "base.html" %}

{% block title %}Rate Contract - {{ contract.job.title }}{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2><i class="fas fa-star me-2"></i>Rate Contract Performance</h2>
                <span class="badge badge-lg bg-success">{{ contract.status.replace('_', ' ').title() }}</span>
            </div>

            <!-- Contract Summary -->
            <div class="card mb-4">
                <div class="card-body">
                    <h5 class="card-title">Contract Summary</h5>
                    <div class="row">
                        <div class="col-md-6">
                            <p><strong>Job:</strong> {{ contract.job.title }}</p>
                            <p><strong>Location:</strong> {{ contract.job.location }}</p>
                            <p><strong>Rate:</strong> ${{ "{:,.2f}".format(contract.agreed_rate) }}</p>
                        </div>
                        <div class="col-md-6">
                            <p><strong>{% if current_user.role == 'contractor' %}Worker{% else %}Contractor{% endif %}:</strong> 
                                {% if current_user.role == 'contractor' %}
                                    {{ contract.worker.first_name }} {{ contract.worker.last_name }}
                                {% else %}
                                    {{ contract.contractor.first_name }} {{ contract.contractor.last_name }}
                                {% endif %}
                            </p>
                            <p><strong>Duration:</strong> {{ contract.start_date.strftime('%d/%m/%Y') }} - {{ contract.end_date.strftime('%d/%m/%Y') }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Rating Form -->
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Submit Your Rating</h5>
                </div>
                <div class="card-body">
                    <form method="POST" id="ratingForm">
                        <!-- Overall Rating -->
                        <div class="mb-4">
                            <label class="form-label">Overall Rating *</label>
                            <div class="rating-stars" data-rating="overall_rating">
                                <i class="fas fa-star" data-value="1"></i>
                                <i class="fas fa-star" data-value="2"></i>
                                <i class="fas fa-star" data-value="3"></i>
                                <i class="fas fa-star" data-value="4"></i>
                                <i class="fas fa-star" data-value="5"></i>
                            </div>
                            <input type="hidden" name="overall_rating" id="overall_rating" required>
                            <small class="form-text text-muted">Click stars to rate (1-5)</small>
                        </div>

                        <!-- Quality Rating -->
                        <div class="mb-4">
                            <label class="form-label">Quality of Work *</label>
                            <div class="rating-stars" data-rating="quality_rating">
                                <i class="fas fa-star" data-value="1"></i>
                                <i class="fas fa-star" data-value="2"></i>
                                <i class="fas fa-star" data-value="3"></i>
                                <i class="fas fa-star" data-value="4"></i>
                                <i class="fas fa-star" data-value="5"></i>
                            </div>
                            <input type="hidden" name="quality_rating" id="quality_rating" required>
                        </div>

                        <!-- Communication Rating -->
                        <div class="mb-4">
                            <label class="form-label">Communication *</label>
                            <div class="rating-stars" data-rating="communication_rating">
                                <i class="fas fa-star" data-value="1"></i>
                                <i class="fas fa-star" data-value="2"></i>
                                <i class="fas fa-star" data-value="3"></i>
                                <i class="fas fa-star" data-value="4"></i>
                                <i class="fas fa-star" data-value="5"></i>
                            </div>
                            <input type="hidden" name="communication_rating" id="communication_rating" required>
                        </div>

                        <!-- Safety Rating -->
                        <div class="mb-4">
                            <label class="form-label">Safety Standards *</label>
                            <div class="rating-stars" data-rating="safety_rating">
                                <i class="fas fa-star" data-value="1"></i>
                                <i class="fas fa-star" data-value="2"></i>
                                <i class="fas fa-star" data-value="3"></i>
                                <i class="fas fa-star" data-value="4"></i>
                                <i class="fas fa-star" data-value="5"></i>
                            </div>
                            <input type="hidden" name="safety_rating" id="safety_rating" required>
                        </div>

                        <!-- Written Review -->
                        <div class="mb-4">
                            <label for="comment" class="form-label">Written Review</label>
                            <textarea class="form-control" name="comment" id="comment" rows="4" 
                                placeholder="Share your experience working with this {% if current_user.role == 'contractor' %}worker{% else %}contractor{% endif %}..."></textarea>
                            <small class="form-text text-muted">Optional but helpful for future reference</small>
                        </div>

                        <!-- Would Work Again -->
                        <div class="mb-4">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="would_work_again" id="would_work_again" value="true" checked>
                                <label class="form-check-label" for="would_work_again">
                                    I would work with this {% if current_user.role == 'contractor' %}worker{% else %}contractor{% endif %} again
                                </label>
                            </div>
                        </div>

                        <div class="d-flex justify-content-between">
                            <a href="/contracts/{{ contract.id }}" class="btn btn-secondary">Back to Contract</a>
                            <button type="submit" class="btn btn-success">Submit Rating</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.rating-stars {
    font-size: 1.5rem;
    color: #ddd;
    margin: 5px 0;
}

.rating-stars i {
    cursor: pointer;
    transition: color 0.2s;
    margin-right: 5px;
}

.rating-stars i:hover,
.rating-stars i.active {
    color: #ffc107;
}

.rating-stars i.active ~ i {
    color: #ddd;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Handle star ratings
    const ratingContainers = document.querySelectorAll('.rating-stars');
    
    ratingContainers.forEach(container => {
        const stars = container.querySelectorAll('i');
        const ratingName = container.dataset.rating;
        const hiddenInput = document.getElementById(ratingName);
        
        stars.forEach((star, index) => {
            star.addEventListener('click', function() {
                const rating = this.dataset.value;
                hiddenInput.value = rating;
                
                // Update visual state
                stars.forEach((s, i) => {
                    if (i < rating) {
                        s.classList.add('active');
                    } else {
                        s.classList.remove('active');
                    }
                });
            });
        });
    });
});
</script>

{% endblock %}
            
~/workspace$