{% extends "base.html" %}

{% block title %}افزودن بیمار جدید - مدیریت بیماران{% endblock %}

{% block content %}
    <!-- فرم افزودن بیمار -->
    <div class="section-container">
        <div class="section-header">
            <h2><i class="fas fa-user-plus"></i> افزودن دستی بیمار جدید</h2>
        </div>
        <div class="table-container">
            <form id="addForm">
                {# Fixed Fields Section #}
                <h3><i class="fas fa-user-circle"></i> اطلاعات پایه بیمار</h3>
                <div class="input-grid fixed-fields-grid">
                    {% for i in range(28) %}
                        {% if i < column_pairs|length %}
                            {% set col = column_pairs[i][0] %}
                            {% set name = column_pairs[i][1] %}
                            <div class="input-field">
                                <label for="add_{{ col }}">{{ name }}</label>
                                <input type="text" name="{{ col }}" id="add_{{ col }}"
                                       placeholder="{{ 'الزامی' if name in required_fields else '' }}"
                                       {% if name in required_fields %}required{% endif %}>
                            </div>
                        {% endif %}
                    {% endfor %}
                </div>

                <hr class="section-divider">
                <h3><i class="fas fa-syringe"></i> اطلاعات مراحل پیوند (۳۰۰ مرحله)</h3>

                <div class="collapsible-stages-container">
                    {% for stage_num in range(300) %}
                        {% set stage_start_index = 28 + (stage_num * 3) %}
                        {% if stage_start_index < column_pairs|length %}
                            <details class="stage-group">
                                <summary>اطلاعات مرحله {{ stage_num + 1 }}</summary>
                                <div class="input-grid stage-fields-grid">
                                    {% for field_in_stage in range(3) %}
                                        {% set current_index = stage_start_index + field_in_stage %}
                                        {% if current_index < column_pairs|length %}
                                            {% set col = column_pairs[current_index][0] %}
                                            {% set name = column_pairs[current_index][1] %}
                                            <div class="input-field">
                                                <label for="add_{{ col }}">{{ name }}</label>
                                                <input type="text" name="{{ col }}" id="add_{{ col }}"
                                                       placeholder="{{ 'الزامی' if name in required_fields else '' }}">
                                            </div>
                                        {% endif %}
                                    {% endfor %}
                                </div>
                            </details>
                        {% endif %}
                    {% endfor %}
                </div>

                <div class="form-actions" style="text-align: center; margin-top: 20px;">
                    <button type="submit" class="save-btn"><i class="fas fa-save"></i> افزودن بیمار</button>
                </div>
            </form>
        </div>
        
        <!-- The successMessage div that was here has been removed -->

    </div>

    <!-- Include Label Modal -->
    {% include 'label_modal.html' %}
{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/JsBarcode.all.min.js"></script>
<script src="{{ url_for('static', filename='js/label_generator.js') }}"></script>
<script>
    // Store newly added patient ID
    let lastAddedPatientId = null;
    
    // برای نمایش پیام موفقیت و مخفی کردن آن
    function showSuccessMessage(patientData) {
        // Call showToast with the success message
        showToast("بیمار جدید با موفقیت ذخیره شد.", 'success');
        
        // The original code that updated the now-removed 'successMessage' div is no longer needed.
        // We still need to decide how the user will trigger label generation.
        // For now, we are only changing the success message display.
    }
    
    // برای دکمه تولید برچسب - This button was part of the removed success message div.
    // This event listener will be commented out as its target element is gone.
    /*
    document.getElementById('generateLabelBtn')?.addEventListener('click', function() {
        if (lastAddedPatientId) {
            // Set the selectedPatientIds for the label generator
            window.selectedPatientIds = [lastAddedPatientId];
            
            // Open the label modal
            if (typeof window.openLabelModal === 'function') {
                window.openLabelModal();
            } else {
                showToast('خطا در بارگذاری ماژول تولید برچسب', 'error');
            }
        } else {
            showToast('اطلاعات بیمار برای تولید برچسب در دسترس نیست', 'error');
        }
    });
    */
    
    // افزودن بیمار
    document.getElementById('addForm')?.addEventListener('submit', function(e) {
        e.preventDefault();
        const data = {};
        let valid = true;
        let firstInvalidInput = null;

        this.querySelectorAll('input[type="text"]').forEach(input => { // More specific selector
            data[input.name] = input.value;
            if (input.required && !input.value) {
                const labelElement = document.querySelector(`label[for='${input.id}']`);
                const fieldName = labelElement ? labelElement.innerText : input.name;
                showToast(`فیلد "${fieldName}" الزامی است`, 'error');
                if (!firstInvalidInput) {
                    firstInvalidInput = input;
                }
                valid = false;
            }
        });

        if (!valid) {
            firstInvalidInput?.focus(); // Focus on the first invalid field
            return; // Stop submission if validation fails
        }

        fetch('/add_patient', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(data)
        })
        .then(response => {
            if (!response.ok) {
                // Try to parse error if response is not OK
                return response.json().then(err => Promise.reject(err)).catch(() => Promise.reject({ errors: ['خطای ناشناخته در پاسخ سرور'] }));
            }
            return response.json();
        })
        .then(result => {
            if (result.status === 'error') {
                showToast('خطا: ' + (result.errors ? result.errors.join(', ') : 'خطای نامشخص از سرور'), 'error');
            } else {
                lastAddedPatientId = result.patient_id; 
                showSuccessMessage(data); // This will now call showToast
                this.reset();

                // Optional: Prompt for label generation after success
                // if (lastAddedPatientId && typeof window.openLabelModal === 'function' && window.selectedPatientIds !== undefined) {
                //     setTimeout(() => {
                //         // Example: Use a confirm dialog or a custom toast with actions
                //         if (confirm("بیمار با موفقیت اضافه شد. آیا مایل به تولید برچسب برای این بیمار هستید؟")) {
                //             window.selectedPatientIds = [lastAddedPatientId];
                //             window.openLabelModal();
                //         }
                //     }, 700); // Short delay
                // }
            }
        })
        .catch(error => {
            console.error('Error in add patient fetch:', error);
            const errorMessage = error && error.errors ? error.errors.join(', ') : (error.message || 'خطا در ارتباط با سرور هنگام افزودن بیمار.');
            showToast(errorMessage, 'error');
        });
    });
    
    // Ensure showToast is available (improved fallback)
    if (typeof showToast !== 'function') {
        window.showToast = function(message, type = 'info', options = {}) {
            console.log(`Toast (${type}): ${message}`);
            
            const toastContainer = document.createElement('div');
            // Basic styling, recommend moving to CSS file
            toastContainer.style.position = 'fixed';
            toastContainer.style.left = '50%'; // Center horizontally
            toastContainer.style.bottom = '30px'; // From bottom
            toastContainer.style.transform = 'translateX(-50%)'; // Adjust for centering
            toastContainer.style.padding = '12px 20px';
            toastContainer.style.color = 'white';
            toastContainer.style.zIndex = '10001'; // Ensure it's on top
            toastContainer.style.borderRadius = '6px';
            toastContainer.style.boxShadow = '0 4px 12px rgba(0,0,0,0.15)';
            toastContainer.style.fontSize = '1em';
            toastContainer.style.textAlign = 'center';
            toastContainer.style.opacity = '0';
            toastContainer.style.transition = 'opacity 0.3s ease, transform 0.3s ease, bottom 0.3s ease';
            toastContainer.style.fontFamily = 'inherit'; // Use the default page font

            // Colors based on type
            if (type === 'success') {
                toastContainer.style.backgroundColor = '#28a745'; // Green
            } else if (type === 'error') {
                toastContainer.style.backgroundColor = '#dc3545'; // Red
            } else if (type === 'warning') {
                toastContainer.style.backgroundColor = '#ffc107'; // Yellow
                toastContainer.style.color = '#333'; // Darker text for yellow
            } else { // Info or default
                toastContainer.style.backgroundColor = '#17a2b8'; // Blue
            }
            
            toastContainer.textContent = message;
            document.body.appendChild(toastContainer);

            // Animate in
            setTimeout(() => {
                toastContainer.style.opacity = '1';
                toastContainer.style.bottom = '50px'; // Move up
            }, 50);

            const duration = options.duration || 3500;
            setTimeout(() => {
                toastContainer.style.opacity = '0';
                toastContainer.style.bottom = '30px'; // Move down
                setTimeout(() => {
                    if (toastContainer.parentNode) {
                        document.body.removeChild(toastContainer);
                    }
                }, 300);
            }, duration);
        };
    }
</script>
{% endblock %}

{% block extra_css %}
<style>
    /* Styles for input grids and collapsible sections (can be shared/moved) */
    .input-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 15px;
        margin-bottom: 20px;
    }
    .input-field {
        display: flex;
        flex-direction: column;
    }
    .input-field label {
        margin-bottom: 5px;
        font-weight: bold;
        color: #555;
        font-size: 0.9em;
        text-align: right; /* Align labels to the right */
    }
    .input-field input[type="text"] {
        padding: 8px 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-size: 0.95em;
    }
    .section-divider {
        margin-top: 20px;
        margin-bottom: 15px;
        border: 0;
        border-top: 1px solid #ddd;
    }
    #addForm h3 { /* Specific to addForm if needed, or make global */
        font-size: 1.2em;
        color: #333;
        margin-bottom: 10px;
        margin-top: 20px; /* Add some space above h3 */
        text-align: right;
        border-bottom: 1px solid #eee;
        padding-bottom: 5px;
    }
    .collapsible-stages-container {
        /* Container for all collapsible sections */
    }
    .stage-group {
        border: 1px solid #e0e0e0;
        border-radius: 5px;
        margin-bottom: 10px;
        background-color: #f9f9f9;
    }
    .stage-group summary {
        padding: 10px;
        font-weight: bold;
        cursor: pointer;
        background-color: #f0f0f0;
        border-bottom: 1px solid #e0e0e0;
        border-radius: 5px 5px 0 0;
        text-align: right;
    }
    .stage-group[open] summary {
        background-color: #e9e9e9;
    }
    .stage-fields-grid { /* Renamed from input-grid to be specific */
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 15px;
        padding: 15px;
    }
    .form-actions .save-btn { /* Style for the main add button */
        padding: 12px 25px;
        font-size: 1.1em;
        background-color: #28a745; /* Green */
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.2s ease; /* Smooth hover */
    }
    .form-actions .save-btn:hover {
        background-color: #218838;
    }
    /* Styles for the save button to be sticky */
    .save-btn {
        position: fixed;
        left: 20px; /* Adjust as needed for sidebar spacing */
        bottom: 20px;
        z-index: 999; /* Ensure it's above most content but below sidebar */
    }

    /* Removed .success-message styles as the element is gone */
    
    .small-label-btn {
        background-color: #007bff;
        color: white;
        border: none;
        padding: 5px 10px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 0.9em;
        margin-left: 10px; /* Space from text */
    }
    .small-label-btn:hover {
        background-color: #0056b3;
    }
    /* Add responsive design adjustments if necessary */
    @media (max-width: 768px) {
        .input-grid {
            grid-template-columns: 1fr; /* Single column on smaller screens */
        }
        .save-btn {
            /* Full width button on mobile, considering padding */
            /* width: calc(100% - 40px); 
            left: 20px;
            right: 20px; */

            /* half sized save button: */
            width: calc(50% - 40px); 
            left: 20px;
        }
    }

</style>
{% endblock %}