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

{% block title %}{% trans "Survey Template Mappings" %} - {{ block.super }}{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4 class="mb-0">{% trans "Survey Template Mappings" %}</h4>
                    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addMappingModal">
                        <i class="fas fa-plus me-2"></i>{% trans "Add Mapping" %}
                    </button>
                </div>
                <div class="card-body">
                    <p class="text-muted">
                        {% trans "Configure which survey templates are sent for each patient type at each hospital." %}
                    </p>
                    
                    {% if mappings %}
                        <div class="table-responsive">
                            <table class="table table-striped table-hover">
                                <thead>
                                    <tr>
                                        <th>{% trans "Hospital" %}</th>
                                        <th>{% trans "Patient Type" %}</th>
                                        <th>{% trans "Survey Template" %}</th>
                                        <th>{% trans "Status" %}</th>
                                        <th>{% trans "Actions" %}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for mapping in mappings %}
                                    <tr>
                                        <td>{{ mapping.hospital.name }}</td>
                                        <td>
                                            <span class="badge bg-info">
                                                {{ mapping.patient_type_display }}
                                            </span>
                                            <small class="text-muted d-block">({{ mapping.patient_type }})</small>
                                        </td>
                                        <td>{{ mapping.survey_template.name }}</td>
                                        <td>
                                            {% if mapping.is_active %}
                                                <span class="badge bg-success">{% trans "Active" %}</span>
                                            {% else %}
                                                <span class="badge bg-secondary">{% trans "Inactive" %}</span>
                                            {% endif %}
                                        </td>
                                        <td>
                                            <button class="btn btn-sm btn-outline-primary edit-mapping"
                                                    data-id="{{ mapping.id }}"
                                                    data-hospital="{{ mapping.hospital.id }}"
                                                    data-patient-type="{{ mapping.patient_type }}"
                                                    data-survey-template="{{ mapping.survey_template.id }}"
                                                    data-active="{{ mapping.is_active }}">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <button class="btn btn-sm btn-outline-danger delete-mapping"
                                                    data-id="{{ mapping.id }}"
                                                    data-name="{{ mapping.patient_type_display }} - {{ mapping.survey_template.name }}">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% else %}
                        <div class="alert alert-info">
                            <i class="fas fa-info-circle me-2"></i>
                            {% trans "No survey template mappings configured yet. Click 'Add Mapping' to create your first mapping." %}
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Add/Edit Mapping Modal -->
<div class="modal fade" id="addMappingModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="mappingModalTitle">{% trans "Add Survey Template Mapping" %}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                {% csrf_token %}
                <form id="mappingForm">
                    <input type="hidden" id="mappingId" name="id">
                    
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="hospital" class="form-label">{% trans "Hospital" %} <span class="text-danger">*</span></label>
                            <select class="form-select" id="hospital" name="hospital" required>
                                <option value="">{% trans "Select Hospital" %}</option>
                                {% for hospital in hospitals %}
                                    <option value="{{ hospital.id }}">{{ hospital.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="surveyTemplate" class="form-label">{% trans "Survey Template" %} <span class="text-danger">*</span></label>
                            <select class="form-select" id="surveyTemplate" name="survey_template" required>
                                <option value="">{% trans "Select Survey Template" %}</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="patientType" class="form-label">{% trans "Patient Type" %} <span class="text-danger">*</span></label>
                            <select class="form-select" id="patientType" name="patient_type" required>
                                <option value="">{% trans "Select Patient Type" %}</option>
                                <option value="1">1 - {% trans "Inpatient (Type 1)" %}</option>
                                <option value="2">2 - {% trans "Outpatient (Type 2)" %}</option>
                                <option value="3">3 - {% trans "Emergency (Type 3)" %}</option>
                                <option value="4">4 - {% trans "Day Case (Type 4)" %}</option>
                                <option value="APPOINTMENT">APPOINTMENT - {% trans "Appointment" %}</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="isActive" class="form-label">{% trans "Status" %}</label>
                            <div class="form-check mt-2">
                                <input class="form-check-input" type="checkbox" id="isActive" name="is_active" checked>
                                <label class="form-check-label" for="isActive">{% trans "Active" %}</label>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Cancel" %}</button>
                <button type="button" class="btn btn-primary" id="saveMapping">{% trans "Save Mapping" %}</button>
            </div>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{% trans "Confirm Delete" %}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>{% trans "Are you sure you want to delete this mapping?" %}</p>
                <p class="fw-bold" id="deleteMappingName"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Cancel" %}</button>
                <button type="button" class="btn btn-danger" id="confirmDelete">{% trans "Delete" %}</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const API_URL = '/api/integrations/survey-template-mappings/';
    let deleteMappingId = null;
    
    // Load survey templates when hospital changes
    document.getElementById('hospital').addEventListener('change', function() {
        const hospitalId = this.value;
        const surveyTemplateSelect = document.getElementById('surveyTemplate');
        
        // Clear existing options
        surveyTemplateSelect.innerHTML = '<option value="">{% trans "Select Survey Template" %}</option>';
        
        // Store the pending survey template ID to set after loading
        surveyTemplateSelect.dataset.pendingValue = '';
        
        if (hospitalId) {
            // Fetch survey templates for this hospital
            fetch(`/surveys/api/templates/?hospital=${hospitalId}`)
                .then(response => response.json())
                .then(data => {
                    // Handle both array and paginated response formats
                    const templates = Array.isArray(data) ? data : (data.results || []);
                    
                    templates.forEach(template => {
                        const option = document.createElement('option');
                        option.value = template.id;
                        option.textContent = template.name;
                        surveyTemplateSelect.appendChild(option);
                    });
                    
                    // Set the pending value after loading
                    if (surveyTemplateSelect.dataset.pendingValue) {
                        surveyTemplateSelect.value = surveyTemplateSelect.dataset.pendingValue;
                        surveyTemplateSelect.dataset.pendingValue = '';
                    }
                })
                .catch(error => {
                    console.error('Error loading survey templates:', error);
                    console.error('Response data:', error.message);
                });
        }
    });
    
    // Edit mapping button
    document.querySelectorAll('.edit-mapping').forEach(button => {
        button.addEventListener('click', function() {
            const modal = new bootstrap.Modal(document.getElementById('addMappingModal'));
            
            // Populate form
            document.getElementById('mappingId').value = this.dataset.id;
            document.getElementById('hospital').value = this.dataset.hospital;
            document.getElementById('patientType').value = this.dataset.patientType;
            document.getElementById('isActive').checked = this.dataset.active === 'true';
            
            // Store survey template ID to set after hospital change loads templates
            const surveyTemplateId = this.dataset.surveyTemplate;
            const surveyTemplateSelect = document.getElementById('surveyTemplate');
            surveyTemplateSelect.dataset.pendingValue = surveyTemplateId;
            
            // Update modal title
            document.getElementById('mappingModalTitle').textContent = '{% trans "Edit Survey Template Mapping" %}';
            
            // Trigger hospital change to load survey templates
            // The survey template value will be set after loading completes
            document.getElementById('hospital').dispatchEvent(new Event('change'));
            
            modal.show();
        });
    });
    
    // Delete mapping button
    document.querySelectorAll('.delete-mapping').forEach(button => {
        button.addEventListener('click', function() {
            deleteMappingId = this.dataset.id;
            document.getElementById('deleteMappingName').textContent = this.dataset.name;
            new bootstrap.Modal(document.getElementById('deleteModal')).show();
        });
    });
    
    // Confirm delete
    document.getElementById('confirmDelete').addEventListener('click', function() {
        if (deleteMappingId) {
            // Get CSRF token
            const csrfToken = getCSRFToken();
            if (!csrfToken) {
                alert('{% trans "Error: Unable to get CSRF token. Please refresh the page and try again." %}');
                return;
            }
            
            fetch(`${API_URL}${deleteMappingId}/`, {
                method: 'DELETE',
                headers: {
                    'X-CSRFToken': csrfToken
                }
            })
            .then(response => {
                if (response.ok) {
                    location.reload();
                } else {
                    alert('{% trans "Error deleting mapping" %}');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('{% trans "Error deleting mapping" %}');
            });
        }
    });
    
    // Save mapping
    document.getElementById('saveMapping').addEventListener('click', function(event) {
        // Prevent form submission
        event.preventDefault();
        
        const form = document.getElementById('mappingForm');
        
        // Validate required fields
        if (!form.checkValidity()) {
            form.reportValidity();
            return;
        }
        
        const mappingId = document.getElementById('mappingId').value;
        
        const data = {
            hospital: document.getElementById('hospital').value,
            patient_type: document.getElementById('patientType').value,
            survey_template: document.getElementById('surveyTemplate').value,
            is_active: document.getElementById('isActive').checked
        };
        
        console.log('Saving mapping:', data);
        
        const url = mappingId ? `${API_URL}${mappingId}/` : API_URL;
        const method = mappingId ? 'PUT' : 'POST';
        
        // Disable button to prevent double submission
        const saveButton = this;
        saveButton.disabled = true;
        saveButton.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>{% trans "Saving..." %}';
        
        // Get CSRF token
        const csrfToken = getCSRFToken();
        if (!csrfToken) {
            alert('{% trans "Error: Unable to get CSRF token. Please refresh the page and try again." %}');
            saveButton.disabled = false;
            saveButton.innerHTML = '{% trans "Save Mapping" %}';
            return;
        }
        
        console.log('CSRF Token:', csrfToken.substring(0, 20) + '...');
        
        fetch(url, {
            method: method,
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': csrfToken
            },
            body: JSON.stringify(data)
        })
        .then(response => {
            console.log('Response status:', response.status);
            if (!response.ok) {
                return response.json().then(err => {
                    throw new Error(JSON.stringify(err));
                });
            }
            return response.json();
        })
        .then(data => {
            console.log('Success:', data);
            // Hide modal and reload page
            const modal = bootstrap.Modal.getInstance(document.getElementById('addMappingModal'));
            modal.hide();
            location.reload();
        })
        .catch(error => {
            console.error('Error saving mapping:', error);
            alert('{% trans "Error saving mapping" %}: ' + error.message);
            // Re-enable button
            saveButton.disabled = false;
            saveButton.innerHTML = '{% trans "Save Mapping" %}';
        });
    });
    
    // Reset modal on close
    document.getElementById('addMappingModal').addEventListener('hidden.bs.modal', function() {
        document.getElementById('mappingForm').reset();
        document.getElementById('mappingId').value = '';
        document.getElementById('mappingModalTitle').textContent = '{% trans "Add Survey Template Mapping" %}';
    });
    
    // CSRF token helper - multiple methods for reliability
    function getCSRFToken() {
        // Method 1: Try to get from hidden input (most reliable)
        const csrfInput = document.querySelector('input[name="csrfmiddlewaretoken"]');
        if (csrfInput) {
            return csrfInput.value;
        }
        
        // Method 2: Try to get from cookie (case-insensitive)
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            // Check both 'csrftoken' and 'csrfToken' (case-insensitive)
            if (cookie.toLowerCase().startsWith('csrftoken=')) {
                return decodeURIComponent(cookie.substring(10));
            }
        }
        
        // Method 3: Check for Django's meta tag
        const metaTag = document.querySelector('meta[name="csrf-token"]');
        if (metaTag) {
            return metaTag.getAttribute('content');
        }
        
        console.error('Unable to find CSRF token');
        return null;
    }
});
</script>
{% endblock %}