{% extends "base.html" %}

{% block title %}جستجو - سیستم مدیریت بیماران موسسه پرنیا{% endblock %}

{% block content %}
<div class="section-container">
    <div class="section-header">
        <h2><i class="fas fa-search"></i> جستجوی بیماران</h2>
    </div>

    <!-- Search Inputs -->
    <div class="search-form-container">
        <form id="searchForm">
            <div class="search-fields-grid">
                <div class="input-field">
                    <label for="search_national_id">کد ملی</label>
                    <input type="text" id="search_national_id" name="کد ملی" placeholder="جستجو بر اساس کد ملی...">
                </div>
                <div class="input-field">
                    <label for="search_patient_name">نام بیمار</label>
                    <input type="text" id="search_patient_name" name="نام بیمار" placeholder="جستجو بر اساس نام بیمار...">
                </div>
                <div class="input-field">
                    <label for="search_file_number">شماره پرونده</label>
                    <input type="text" id="search_file_number" name="شماره پرونده" placeholder="جستجو بر اساس شماره پرونده...">
                </div>
                <div class="input-field">
                    <label for="search_disease_type">نوع بیماری</label>
                    <input type="text" id="search_disease_type" name="نوع بیماری" placeholder="جستجو بر اساس نوع بیماری...">
                </div>
                <div class="input-field">
                    <label for="search_admission_date">تاریخ پذیرش</label>
                    <input type="text" id="search_admission_date" name="تاریخ پذیرش" placeholder="جستجو بر اساس تاریخ پذیرش...">
                </div>
                <!-- <div class="search-actions"> -->
                    
                <!-- </div> -->
            </div>
            <!-- Search button in a separate row -->
            <div class="search-submit-container">
                <button type="submit" id="searchSubmitBtn" class="action-btn"><i class="fas fa-search"></i><span class="button-text"> جستجو</span></button>
                <button type="button" id="clearSearchFiltersBtn" class="action-btn clear-btn"><i class="fas fa-eraser"></i><span class="button-text"> پاک کردن همه فیلتر ها</span></button>
                <button type="button" id="barcodeSearchBtn" class="barcode-btn"><i class="fas fa-barcode"></i><span class="button-text"> جستجو با بارکد</span></button>
            </div>
        </form>
    </div>

    <!-- Selection Actions (Modified) -->
     <div class="selection-actions" id="searchSelectionActions" style="display: none;"> <!-- Hidden initially -->
        <button id="searchSelectAllBtn" class="selection-btn"><i class="fas fa-check-square"></i> <span>انتخاب همه</span></button>
        <button id="searchDeselectAllBtn" class="selection-btn" disabled><i class="fas fa-times-circle"></i> <span>لغو</span></button>
        <div id="searchSelectionCounter" class="selection-counter">۰ مورد انتخاب شده</div>
        <button id="searchEditSelectedBtn" class="selection-btn" disabled><i class="fas fa-edit"></i> <span>مشاهده جزئیات و ویرایش</span></button>
        <button id="searchDeleteSelectedBtn" class="selection-btn delete-btn" disabled><i class="fas fa-trash"></i> <span>حذف</span></button>
        <button id="searchGenerateLabelBtn" class="selection-btn generate-btn" disabled><i class="fas fa-tag"></i> <span>تولید برچسب</span></button>
        <button id="viewDetailsBtn" class="selection-btn details-btn" disabled><i class="fas fa-table"></i> <span>مشاهده در بایگانی</span></button>
     </div>

    <!-- Results Table -->
    <div class="table-container">
         <div id="loadingOverlay" class="loading-overlay" style="display: none;">
             <div class="spinner"></div>
             <p>در حال بارگذاری داده‌ها...</p>
         </div>
        <table id="searchResultsTable">
            <thead>
                <tr>
                    <th><input type="checkbox" id="searchHeaderCheckbox"></th>
                    <!-- Dynamically populated headers based on SEARCH_COLUMNS_FA -->
                    {% for col, name in search_column_pairs %}
                         <th>{{ name }}</th>
                    {% endfor %}
                </tr>
            </thead>
            <tbody id="searchResultsBody">
                <!-- Initial message -->
                <tr id="initialMessageRow">
                    <td colspan="{{ search_column_pairs|length + 1 }}" class="empty-message">جهت جستجوی بیماران فیلد های بالا را پر کنید</td>
                </tr>
            </tbody>
        </table>
         <div id="searchTotalCount" style="text-align: center; margin-top: 10px; color: #555; font-size: 0.9em; display: none;">
             <!-- Total count will be displayed here -->
         </div>
    </div>

    <!-- Pagination Removed -->

</div>

<!-- Include Edit Modal, passing column_pairs for the form -->
{% include 'edit_modal.html' with context %}

<!-- Include Delete Confirmation Modal -->
{% include 'delete_modal.html' %}

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

<!-- مودال اسکن بارکد -->
<div id="barcodeScannerModal" class="modal">
    <div class="modal-content barcode-modal-content">
        <div class="barcode-modal-header">
            <h2>اسکن بارکد</h2>
            <span class="close-btn" id="searchCloseBarcodeModalBtn">&times;</span>
        </div>
        <div id="barcodeScannerView">
            <video id="barcodeVideo" style="width: 65%; height: auto; border-radius: 10px;"></video>
            <p id="barcodeStatus">لطفا بارکد را مقابل دوربین قرار دهید...</p>
        </div>
        <div class="barcode-modal-actions">
            <button id="searchCancelBarcodeModalBtn">انصراف</button>
            <button id="searchSwitchCameraButton" style="display: none;"><i class="fas fa-sync-alt"></i> چرخش دوربین</button>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_css %}
<style>
    .search-form-container {
        margin-bottom: 20px;
        padding: 15px;
    }
    .search-fields-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 15px;
        align-items: flex-end; /* Improved alignment to ensure all elements are at bottom */
        margin-bottom: 15px; /* Add space between grid and search button */
    }
    .search-form-container .input-field {
        display: flex;
        flex-direction: column;
        height: 100%; /* Make all input fields take full height */
        justify-content: flex-end; /* Push content to bottom */
    }
    .search-form-container label {
        margin-bottom: 5px;
        font-weight: bold;
        color: #555;
        font-size: 0.9em;
    }
    .search-form-container input[type="text"] {
        padding: 8px 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-size: 0.95em;
        width: 100%;
        box-sizing: border-box;
    }
    .search-actions {
        display: flex;
        gap: 10px;
        align-items: flex-end; /* Align buttons at the bottom */
        align-self: flex-end; /* Position the action div at the bottom */
        justify-content: flex-start; /* Align buttons to the start */
        height: 100%; /* Take full height of grid cell */
    }
    .search-actions button {
        padding: 8px 15px;
        margin-top: auto; /* Push buttons to the bottom */
    }
    .search-submit-container {
        display: flex;
        justify-content: center;
        margin-top: 10px;
        gap: 10px; /* Add gap for desktop view as well */
    }
    #searchSubmitBtn {
        padding: 8px 15px;
        font-size: 0.95rem;
        background-color: #007bff; /* Thematic blue color */
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        min-width: 200px; /* Keep the wider width */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        transition: background-color 0.2s, transform 0.1s, box-shadow 0.2s;
    }
    #searchSubmitBtn:hover {
        background-color: #0069d9; /* Darker blue on hover */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }
    #searchSubmitBtn:active {
        transform: translateY(1px);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }
    #searchSubmitBtn i {
        margin-left: 5px;
    }
    .barcode-btn, .action-btn, .details-btn {
         /* Style buttons */
    }
    #searchResultsTable .empty-message {
        text-align: right;
        padding: 20px;
        color: #888;
        font-style: italic;
    }
    #searchSelectionActions {
        /* Styles for selection actions bar if needed */
        margin-top: 15px; /* Add space above the actions bar */
    }

    /* Responsive adjustments for button container */
    @media (max-width: 768px) {
        .search-submit-container {
            flex-direction: row; /* Keep buttons in a row */
            justify-content: space-around; /* Distribute icon buttons */
            align-items: center; 
            gap: 5px; /* Smaller gap for icon buttons */
        }
        .search-submit-container button {
            width: auto; /* Let button shrink to content (icon) */
            min-width: 40px; /* Ensure a minimum clickable area, adjust as needed */
            padding: 8px 10px; /* Adjust padding for a more compact look */
            font-size: 1rem; /* Ensure icon size is reasonable */
            /* Remove previous mobile-specific width/margin styles */
            max-width: none;
            margin-bottom: 0;
        }
        .search-submit-container button .button-text {
            display: none; /* Hide the text on mobile */
        }
        .search-submit-container button i {
            margin-right: 0; /* Remove margin if text is hidden */
            margin-left: 0; /* Remove margin if text is hidden */
        }
    }
</style>
{% endblock %}


{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/@zxing/library@latest/umd/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/JsBarcode.all.min.js"></script>
<script>
    // Make SEARCH_COLUMNS from Python available to search.js
    const SEARCH_COLUMNS_FROM_PYTHON = JSON.parse('{{ search_columns_for_js | safe }}');
    const currentUserRole = "{{ current_user.role }}";
</script>
<script src="{{ url_for('static', filename='js/search.js') }}"></script>
<script src="{{ url_for('static', filename='js/label_generator.js') }}"></script>
<script>
// Set up edit form submission
document.addEventListener('DOMContentLoaded', function() {
    // Remove the duplicate edit form submission handler
    // The handler in edit_modal.html will remain and handle the form submission
    
    // Set up modal close on outside click
    window.onclick = function(event) {
        const modal = document.getElementById('editModal');
        if (event.target == modal) {
            closeEditModal();
        }
    };
    
    // Create a bridge function for the label generator
    window.bridgeSelectedPatients = function() {
        // Try to get searchSelectedPatientIds from the search.js scope
        if (typeof searchSelectedPatientIds !== 'undefined' && searchSelectedPatientIds.length > 0) {
            window.selectedPatientIds = [...searchSelectedPatientIds]; // Create a copy
            console.log('Successfully bridged searchSelectedPatientIds to selectedPatientIds:', window.selectedPatientIds);
            return true;
        } else if (typeof window.selectedPatientIds !== 'undefined' && window.selectedPatientIds.length > 0) {
            console.log('Using existing selectedPatientIds:', window.selectedPatientIds);
            return true;
        }
        
        // If we get here, no patients are selected
        console.log('No patients selected in either variable.');
        return false;
    };
    
    // Override the generateLabelsForSelectedPatients function to use our bridge
    const originalGenerateLabels = window.generateLabelsForSelectedPatients;
    window.generateLabelsForSelectedPatients = function() {
        if (window.bridgeSelectedPatients()) {
            // If we have selected patients, use the original or the openLabelModal function
            if (typeof originalGenerateLabels === 'function') {
                originalGenerateLabels();
            } else if (typeof window.openLabelModal === 'function') {
                window.openLabelModal();
            }
        } else {
            showToast('لطفا ابتدا بیمار یا بیماران مورد نظر را انتخاب کنید', 'warning');
        }
    };
});
</script>
{% endblock %}