{% extends "layouts/base.html" %}
{% load i18n %}

{% block title %}Manage Surveys for {{ stage.name }} - PX360{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="mb-1">
                <i class="bi bi-file-earmark-text text-primary me-2"></i>
                Manage Surveys for {{ stage.name }}
            </h2>
            <p class="text-muted mb-0">Journey: {{ template.name }}</p>
        </div>
        <div>
            <a href="{% url 'journeys:template_detail' template.pk %}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left me-1"></i> Back to Template
            </a>
        </div>
    </div>

    <form method="post" id="surveysForm">
        {% csrf_token %}
        
        <!-- Stage Information -->
        <div class="card mb-4">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <h5>Stage Information</h5>
                        <table class="table table-borderless mb-0">
                            <tr>
                                <th width="30%">Stage Name:</th>
                                <td>{{ stage.name }} ({{ stage.name_ar|default:"-" }})</td>
                            </tr>
                            <tr>
                                <th>Order:</th>
                                <td>{{ stage.order }}</td>
                            </tr>
                        </table>
                    </div>
                    <div class="col-md-6">
                        <h5>Template Information</h5>
                        <table class="table table-borderless mb-0">
                            <tr>
                                <th width="30%">Template Name:</th>
                                <td>{{ template.name }}</td>
                            </tr>
                            <tr>
                                <th>Hospital:</th>
                                <td>{{ template.hospital.name_en }}</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Surveys -->
        <div class="card mb-4">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Assigned Surveys</h5>
                <button type="button" class="btn btn-sm btn-primary" id="addSurveyBtn">
                    <i class="bi bi-plus me-1"></i> Add Survey
                </button>
            </div>
            <div class="card-body">
                <div id="surveys-container">
                    {{ formset.management_form }}
                    
                    <table class="table table-bordered" id="surveysTable">
                        <thead>
                            <tr>
                                <th width="60%">Survey Template</th>
                                <th width="30%">Send After (Hours)</th>
                                <th width="10%">Actions</th>
                            </tr>
                        </thead>
                        <tbody id="surveys-body">
                            {% for form in formset %}
                            <tr class="survey-form" id="survey-{{ forloop.counter0 }}">
                                {{ form.id }}
                                <td>
                                    {{ form.survey_template }}
                                    {% if form.survey_template.errors %}
                                    <div class="invalid-feedback d-block">{{ form.survey_template.errors }}</div>
                                    {% endif %}
                                </td>
                                <td>
                                    {{ form.send_after_hours }}
                                    {% if form.send_after_hours.errors %}
                                    <div class="invalid-feedback d-block">{{ form.send_after_hours.errors }}</div>
                                    {% endif %}
                                </td>
                                <td class="text-center">
                                    <button type="button" class="btn btn-sm btn-danger delete-survey-btn">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                    
                    {% if not formset %}
                    <div class="text-center py-4">
                        <i class="bi bi-inbox" style="font-size: 2rem; color: #ccc;"></i>
                        <p class="text-muted mt-2">No surveys assigned yet</p>
                        <button type="button" class="btn btn-sm btn-primary" id="addFirstSurveyBtn">
                            <i class="bi bi-plus me-1"></i> Add First Survey
                        </button>
                    </div>
                    {% endif %}
                    
                    <div class="text-muted small">
                        <i class="bi bi-info-circle me-1"></i>
                        Surveys will be sent to patients automatically after the specified number of hours from when the stage is triggered.
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Form Actions -->
        <div class="card">
            <div class="card-body text-end">
                <a href="{% url 'journeys:template_detail' template.pk %}" class="btn btn-secondary me-2">
                    <i class="bi bi-x-circle me-1"></i> Cancel
                </a>
                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-check-circle me-1"></i> Save Changes
                </button>
            </div>
        </div>
    </form>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const surveysBody = document.getElementById('surveys-body');
    const addSurveyBtn = document.getElementById('addSurveyBtn');
    const addFirstSurveyBtn = document.getElementById('addFirstSurveyBtn');
    const totalFormsInput = document.getElementById('id_surveys-TOTAL_FORMS');
    
    // Delete survey button handler
    surveysBody.addEventListener('click', function(e) {
        if (e.target.closest('.delete-survey-btn')) {
            const row = e.target.closest('tr');
            const idInput = row.querySelector('[name$="-id"]');
            
            if (idInput && idInput.value) {
                // Existing record - mark for deletion
                const deleteInput = document.createElement('input');
                deleteInput.type = 'hidden';
                deleteInput.name = idInput.name.replace('id', 'DELETE');
                deleteInput.value = 'on';
                row.appendChild(deleteInput);
                row.style.display = 'none';
            } else {
                // New record - just remove
                row.remove();
            }
        }
    });
    
    // Add new survey helper function
    function addSurvey() {
        const formCount = totalFormsInput ? parseInt(totalFormsInput.value) : 0;
        const newRow = document.createElement('tr');
        newRow.className = 'survey-form';
        newRow.id = 'survey-' + formCount;
        
        // Get available survey templates from existing forms
        let surveyOptions = '';
        const firstSurveySelect = surveysBody.querySelector('select[name$="-survey_template"]');
        if (firstSurveySelect) {
            surveyOptions = firstSurveySelect.innerHTML;
        }
        
        newRow.innerHTML = `
            <input type="hidden" name="surveys-${formCount}-id" id="id_surveys-${formCount}-id">
            <td>
                <select name="surveys-${formCount}-survey_template" 
                        id="id_surveys-${formCount}-survey_template" 
                        class="form-select">
                    ${surveyOptions}
                </select>
            </td>
            <td>
                <input type="number" name="surveys-${formCount}-send_after_hours" 
                       id="id_surveys-${formCount}-send_after_hours" 
                       class="form-control" value="24" min="0" step="1">
            </td>
            <td class="text-center">
                <button type="button" class="btn btn-sm btn-danger delete-survey-btn">
                    <i class="bi bi-trash"></i>
                </button>
            </td>
        `;
        
        if (surveysBody) {
            surveysBody.appendChild(newRow);
            if (totalFormsInput) {
                totalFormsInput.value = formCount + 1;
            }
        } else {
            // Create table body if it doesn't exist
            const newBody = document.createElement('tbody');
            newBody.id = 'surveys-body';
            newBody.appendChild(newRow);
            const table = document.getElementById('surveysTable');
            if (table) {
                table.appendChild(newBody);
            }
        }
    }
    
    // Add new survey button handler
    if (addSurveyBtn) {
        addSurveyBtn.addEventListener('click', addSurvey);
    }
    
    if (addFirstSurveyBtn) {
        addFirstSurveyBtn.addEventListener('click', addSurvey);
    }
});
</script>
{% endblock %}