{# customhome/templates/customhome/previous_appointments.html #}
{% extends "core/base.html" %}
{% load static %}

{% block title %}Previous Appointments & Feedback{% endblock %}


{%block stylesheet %}
    <link rel="stylesheet" href="{% static 'officer/css/previous_appointments.css' %}">
{% endblock %}


{% block content %}
<div class="container mt-4">
    <h2>Previous Appointments & Feedback</h2>
    
    {# Button to open feedback form popup for the latest appointment #}
    {% if appointments_data and appointments_data|length > 0 %}
        {% with current=appointments_data.0.appointment %}
            <button type="button" class="btn btn-primary" onclick="openFeedbackPopup({{ current.id }})">
                Add/Edit Feedback for Latest Appointment ({{ current.appointment_date|date:"d M Y" }})
            </button>
        {% endwith %}
    {% endif %}
    
    {% if appointments_data %}
        {% for data in appointments_data %}
        <div class="Previous_appointments">
            <h2 class="heading">Appointment on {{ data.appointment.appointment_date|date:"d M Y" }} </h2>
    
            <div class="details-container">
                <div class="box">
                    <p><span class="label">Time:</span> {{ data.appointment.appointment_time }}</p>
                </div>
                <div class="box">
                    <p><span class="label">Description:</span> {{ data.appointment.short_description }}</p>
                </div>
                <div class="box">
                    <p><span class="label">Status:</span> {{ data.appointment.status }}</p>
                </div>
                

                <div class="box">
                    <p>
                        <span class="label">View Document:</span> 
                        {% if data.appointment.id_proof_documents != "" %}
                            <a href="{{ data.appointment.id_proof_documents.url }}" target="_blank" download>
                                {{ data.appointment.id_proof_documents.name|cut:"documents/" }}
                            </a>
                        {% else %}
                            <span>No Document Uploaded</span>
                        {% endif %}
                    </p>                
                </div>

                <h5 class="heading">Feedbacks:</h5>
                {% if data.feedback_list %}
                    {% for feedback in data.feedback_list %}
        
                        <div class="box">
                            <p><span class="label">Feedback:</span> {{ feedback.feedback }}</p>
                        </div>
                        <div class="box">
                            <p><span class="label">Outcome:</span> {{ feedback.outcome }}</p>
                        </div>
                        <div class="box">
                            <p><span class="label">Internal Notes:</span> {{ feedback.internal_notes }}</p>
                        </div>
            
                        <div class=" inline-box">
                            <div class="follow-up-box"> <span class="label">Follow-up Required:</span> {% if feedback.follow_up_required %} Yes {% else %} No
                                {% endif %}</div>
            
            
                            <div class="follow-up-box"> <span class="label">Follow-up Date:</span> {{ feedback.follow_up_date|date:"d M Y" }}</div>
                            <div class="follow-up-box"> <span class="label">Assigned To:</span> {{ feedback.follow_up_assigned_to }}</div>
                            <div class="follow-up-box"> <span class="label">Follow-up Priority:</span> {{ feedback.follow_up_priority }}</div>
                        </div>
            
                        <button class="edit-button" onclick="openFeedbackPopup({{ data.appointment.id }})">Edit Feedback</button>
                    {% endfor %}
                {% else %}
                    <p class="text-muted">No feedback available.</p>
                    <button type="button" class="btn btn-secondary btn-sm"
                        onclick="openFeedbackPopup({{ data.appointment.id }})">Add Feedback</button>
                    {% endif %}
                
            </div> 
        </div>
        {% endfor %}
    {% else %}
        <p class="text-muted">No appointments available.</p>
    {% endif %}
</div>

<!-- Modal for Feedback Form -->
{% comment %} <div id="feedbackModal" class="modal" tabindex="-1" role="dialog" style="display: none;"> {% endcomment %}
<div id="feedbackModal" class="modal" tabindex="-1" role="dialog" style="display: none;">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      {% comment %} <div class="modal-header">
        <h5 class="modal-title">Feedback Form</h5>
        <button type="button" class="close" onclick="closeFeedbackPopup()" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div> {% endcomment %}
      <div class="modal-body" id="feedbackModalContent">
        <!-- The feedback form will be loaded here via AJAX -->
      </div>
    </div>
  </div>
</div>

{% endblock %}

{% block script_code %}
<script>
function openFeedbackPopup(appointmentId) {
    $.ajax({
        url: "{% url 'officer:feedback_form' appointment_id=0 %}".replace("0", appointmentId),
        success: function(data) {
            $('#feedbackModalContent').html(data);
            $('#feedbackModal').show();
        },
        error: function() {
            alert("Error loading feedback form.");
        }
    });
}

</script>

{% endblock   %}

{% comment %} {% block footer %}{% endblock %} {% endcomment %}

{% comment %} function closeFeedbackPopup() {
    $('#feedbackModal').hide();
} {% endcomment %}