{% extends "dashboard/base_dashboard.html" %}

{% block title %}{% if editando %}Editar{% else %}Deixar{% endif %} Avaliação — Dra. Mariela Moreno Autie{% endblock %}

{% block panel_title %}{% if editando %}Editar Avaliação{% else %}Avaliar Consulta{% endif %}{% endblock %}

{% block panel_content %}
<div class="max-w-2xl">
    <!-- Info de la cita -->
    <div class="bg-white rounded-xl p-6 border border-gray-100 shadow-sm mb-6">
        <div class="flex items-center gap-4">
            <div class="w-12 h-12 bg-rosa-bg rounded-full flex items-center justify-center flex-shrink-0">
                <svg class="w-6 h-6 text-rosa" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
            </div>
            <div>
                <p class="text-dark font-semibold">{{ cita.servicio.nombre }}</p>
                <p class="text-gray-400 text-sm">{{ cita.fecha_hora|date:"d/m/Y H:i" }}</p>
            </div>
        </div>
    </div>

    <!-- Formulario -->
    <form method="post" id="form-valoracion" class="bg-white rounded-xl p-6 border border-gray-100 shadow-sm">
        {% csrf_token %}

        <!-- Estrellas interactivas -->
        <div class="mb-6 text-center">
            <p class="text-gray-600 font-medium mb-3">Como foi a sua experiência?</p>
            <div class="flex justify-center gap-2" id="star-rating">
                {% for i in "12345" %}
                <button type="button" data-value="{{ i }}"
                    class="star-btn transition-transform duration-200 hover:scale-110 focus:outline-none"
                    aria-label="{{ i }} estrela{{ i|pluralize:'s' }}">
                    <svg class="w-10 h-10 sm:w-12 sm:h-12 text-gray-200" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                    </svg>
                </button>
                {% endfor %}
            </div>
            <p id="star-label" class="text-sm text-gray-400 mt-2"></p>
            {{ form.estrellas }}
            {% if form.estrellas.errors %}
            <p class="text-red-500 text-xs mt-1">{{ form.estrellas.errors.0 }}</p>
            {% endif %}
        </div>

        <!-- Comentario -->
        <div class="mb-6">
            <label for="id_comentario" class="block text-sm font-medium text-gray-600 mb-1.5">
                Comentário <span class="text-gray-300">(opcional)</span>
            </label>
            {{ form.comentario }}
            <div class="flex justify-between mt-1">
                {% if form.comentario.errors %}
                <p class="text-red-500 text-xs">{{ form.comentario.errors.0 }}</p>
                {% else %}
                <span></span>
                {% endif %}
                <span id="char-count" class="text-xs text-gray-300">0/500</span>
            </div>
        </div>

        <!-- Botones -->
        <div class="flex flex-col sm:flex-row gap-3">
            <button type="submit" id="btn-submit"
                class="btn-rosa flex-1 flex items-center justify-center gap-2 px-6 py-3 bg-rosa text-white font-semibold rounded-[25px] shadow-md hover:shadow-lg text-base disabled:opacity-50 disabled:cursor-not-allowed"
                disabled>
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                {% if editando %}Atualizar{% else %}Enviar{% endif %} Avaliação
            </button>
            <a href="{% url 'users:panel_paciente' %}"
                class="flex items-center justify-center gap-2 px-6 py-3 text-gray-500 border border-gray-200 rounded-[25px] hover:border-rosa hover:text-rosa transition text-base">
                Cancelar
            </a>
        </div>
    </form>
</div>

<script>
(function() {
    var stars = document.querySelectorAll('#star-rating .star-btn');
    var input = document.getElementById('id_estrellas');
    var label = document.getElementById('star-label');
    var btn = document.getElementById('btn-submit');
    var labels = {1: 'Muito má', 2: 'Má', 3: 'Regular', 4: 'Boa', 5: 'Excelente'};
    var current = parseInt(input.value) || 0;

    function render(val) {
        stars.forEach(function(s, i) {
            var svg = s.querySelector('svg');
            svg.classList.toggle('text-dorado', i < val);
            svg.classList.toggle('text-gray-200', i >= val);
        });
        label.textContent = labels[val] || '';
        btn.disabled = val < 1;
    }

    stars.forEach(function(s) {
        s.addEventListener('click', function() {
            current = parseInt(this.dataset.value);
            input.value = current;
            render(current);
        });
        s.addEventListener('mouseenter', function() {
            render(parseInt(this.dataset.value));
        });
        s.addEventListener('mouseleave', function() {
            render(current);
        });
    });

    render(current);

    // Contador de caracteres
    var textarea = document.getElementById('id_comentario');
    var counter = document.getElementById('char-count');
    if (textarea && counter) {
        function updateCount() { counter.textContent = textarea.value.length + '/500'; }
        textarea.addEventListener('input', updateCount);
        updateCount();
    }
})();
</script>
{% endblock %}