{% extends 'base.html' %}

{% block title %}Customers - Optinet Global Links{% endblock %}

{% block content %}
<div class="container-fluid mt-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1><i class="bi bi-people"></i> Customers ({{ customers|length }})</h1>
        <div class="btn-group">
            <a href="{% url 'customers:customer_add' %}" class="btn btn-primary">
                <i class="bi bi-person-plus"></i> Add Customer
            </a>
            <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#importModal">
                <i class="bi bi-upload"></i> Import
            </button>
            <a href="{% url 'customers:export_customers' %}" class="btn btn-outline-success">
                <i class="bi bi-download"></i> Export CSV
            </a>
            <a href="{% url 'customers:download_template' %}" class="btn btn-outline-info">
                <i class="bi bi-file-earmark-text"></i> Template
            </a>
        </div>
    </div>

    <!-- Status Tabs -->
    <div class="card mb-3">
        <div class="card-header">
            <ul class="nav nav-pills card-header-pills" role="tablist">
                <li class="nav-item" role="presentation">
                    <a class="nav-link {% if not current_status_tab or current_status_tab == 'all' %}active{% endif %}" 
                       href="?{% if request.GET.search %}search={{ request.GET.search }}&{% endif %}{% if request.GET.customer_type %}customer_type={{ request.GET.customer_type }}&{% endif %}{% if request.GET.service %}service={{ request.GET.service }}&{% endif %}{% if request.GET.tag %}tag={{ request.GET.tag }}&{% endif %}status_tab=all">
                        All <span class="badge bg-secondary ms-1">{{ total_customers }}</span>
                    </a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link {% if current_status_tab == 'active' %}active{% endif %}" 
                       href="?{% if request.GET.search %}search={{ request.GET.search }}&{% endif %}{% if request.GET.customer_type %}customer_type={{ request.GET.customer_type }}&{% endif %}{% if request.GET.service %}service={{ request.GET.service }}&{% endif %}{% if request.GET.tag %}tag={{ request.GET.tag }}&{% endif %}status_tab=active">
                        Active <span class="badge bg-success ms-1">{{ active_customers }}</span>
                    </a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link {% if current_status_tab == 'inactive' %}active{% endif %}" 
                       href="?{% if request.GET.search %}search={{ request.GET.search }}&{% endif %}{% if request.GET.customer_type %}customer_type={{ request.GET.customer_type }}&{% endif %}{% if request.GET.service %}service={{ request.GET.service }}&{% endif %}{% if request.GET.tag %}tag={{ request.GET.tag }}&{% endif %}status_tab=inactive">
                        Inactive <span class="badge bg-danger ms-1">{{ inactive_customers }}</span>
                    </a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link {% if current_status_tab == 'suspended' %}active{% endif %}" 
                       href="?{% if request.GET.search %}search={{ request.GET.search }}&{% endif %}{% if request.GET.customer_type %}customer_type={{ request.GET.customer_type }}&{% endif %}{% if request.GET.service %}service={{ request.GET.service }}&{% endif %}{% if request.GET.tag %}tag={{ request.GET.tag }}&{% endif %}status_tab=suspended">
                        Suspended <span class="badge bg-warning ms-1">{{ suspended_customers }}</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <!-- Search and Filters -->
    <div class="card mb-3">
        <div class="card-body py-3">
            <form method="get" id="searchForm">
                <input type="hidden" name="status_tab" value="{{ current_status_tab|default:'all' }}">
                <div class="row g-2 align-items-end">
                    <div class="col-md-3">
                        <div class="input-group input-group-sm">
                            <span class="input-group-text"><i class="bi bi-search"></i></span>
                            <input type="text" name="search" class="form-control" placeholder="Live search..." value="{{ search }}" id="liveSearchInput">
                        </div>
                    </div>
                    <div class="col-md-2">
                        <select name="customer_type" class="form-select form-select-sm auto-filter">
                            <option value="">All Types</option>
                            <option value="individual" {% if current_customer_type == 'individual' %}selected{% endif %}>Individual</option>
                            <option value="institution" {% if current_customer_type == 'institution' %}selected{% endif %}>Institution</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <select name="service" class="form-select form-select-sm auto-filter">
                            <option value="">All Services</option>
                            {% for service in services %}
                            <option value="{{ service.id }}" {% if current_service == service.id|stringformat:"s" %}selected{% endif %}>
                                {{ service.name }}
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-2">
                        <select name="tag" class="form-select form-select-sm auto-filter">
                            <option value="">All Tags</option>
                            {% for tag in tags %}
                            <option value="{{ tag.id }}" {% if current_tag == tag.id|stringformat:"s" %}selected{% endif %}>
                                {{ tag.name }}
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-3">
                        <div class="d-flex gap-2">
                            <a href="{% url 'customers:customer_list' %}" class="btn btn-outline-secondary btn-sm" title="Clear all filters">
                                <i class="bi bi-x-circle"></i> Clear
                            </a>
                            <button type="button" class="btn btn-outline-info btn-sm" onclick="sendBulkSMS()" title="Send Bulk SMS">
                                <i class="bi bi-chat-text"></i> Bulk SMS
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Pagination Controls -->
    <div class="card mb-3">
        <div class="card-body py-2">
            <div class="d-flex justify-content-between align-items-center">
                <span class="text-muted">Showing {{ customers|length }} customers</span>
                <div class="d-flex align-items-center">
                    <label class="me-2">Rows per page:</label>
                    <select class="form-select form-select-sm" style="width: auto;" onchange="changePageSize(this.value)">
                        <option value="10" {% if request.GET.per_page == '10' %}selected{% endif %}>10</option>
                        <option value="25" {% if request.GET.per_page == '25' or not request.GET.per_page %}selected{% endif %}>25</option>
                        <option value="50" {% if request.GET.per_page == '50' %}selected{% endif %}>50</option>
                        <option value="100" {% if request.GET.per_page == '100' %}selected{% endif %}>100</option>
                    </select>
                </div>
            </div>
        </div>
    </div>

        <!-- Bulk SMS Section -->
        <div class="row mb-3">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h6 class="card-title mb-0">
                            <i class="bi bi-chat-text text-success"></i> Bulk SMS
                            <button class="btn btn-sm btn-outline-secondary ms-2" type="button" data-bs-toggle="collapse" data-bs-target="#bulkSmsForm">
                                <i class="bi bi-chevron-down"></i> Toggle
                            </button>
                        </h6>
                    </div>
                    <div class="collapse" id="bulkSmsForm">
                        <div class="card-body">
                            <form method="post" id="bulkSmsForm">
                                {% csrf_token %}
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="bulk_sms_message" class="form-label">Message</label>
                                            <textarea class="form-control" id="bulk_sms_message" name="bulk_sms_message" rows="3" 
                                                      placeholder="Enter your bulk SMS message here..." maxlength="160" required></textarea>
                                            <div class="form-text">
                                                <span id="bulk-char-count">0</span>/160 characters
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="mb-3">
                                            <label class="form-label">Audience Filter</label>
                                            <select name="sms_audience" class="form-select form-select-sm" id="smsAudienceFilter">
                                                <option value="all">All Filtered Customers</option>
                                                <option value="active_only">Active Customers Only</option>
                                                <option value="inactive_only">Inactive Customers Only</option>
                                                <option value="individuals_only">Individuals Only</option>
                                                <option value="institutions_only">Institutions Only</option>
                                                <option value="with_service">Customers with Service</option>
                                                <option value="without_service">Customers without Service</option>
                                            </select>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">Filter by Tag</label>
                                            <select name="sms_tag_filter" class="form-select form-select-sm" id="smsTagFilter">
                                                <option value="">All Tags</option>
                                                {% for tag in tags %}
                                                <option value="{{ tag.id }}">{{ tag.name }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="mb-3">
                                            <label class="form-label">Recipients</label>
                                            <div class="alert alert-info py-2">
                                                <small>
                                                    <strong id="sms-recipient-count">{{ customers|length }}</strong> customers selected
                                                    <br>
                                                    <span class="text-muted" id="sms-audience-description">Based on current filters</span>
                                                </small>
                                            </div>
                                            <button type="submit" name="send_bulk_sms" class="btn btn-success w-100" 
                                                    onclick="return confirmBulkSMS()">
                                                <i class="bi bi-send"></i> Send Bulk SMS
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

    <!-- Customers Table -->
    <div class="card">
        <div class="card-body">
            {% if customers %}
                <div class="table-responsive">
                    <table class="table table-hover sortable-table" id="customersTable">
                        <thead class="table-dark">
                            <tr>
                                <th class="sortable" data-column="customer-id" data-sort="asc">
                                    Customer ID <i class="bi bi-arrow-up-down"></i>
                                </th>
                                <th class="sortable" data-column="name" data-sort="asc">
                                    Name <i class="bi bi-arrow-up-down"></i>
                                </th>
                                <th class="sortable" data-column="type" data-sort="asc">
                                    Type <i class="bi bi-arrow-up-down"></i>
                                </th>
                                <th class="sortable" data-column="phone" data-sort="asc">
                                    Phone <i class="bi bi-arrow-up-down"></i>
                                </th>
                                <th class="sortable" data-column="email" data-sort="asc">
                                    Email <i class="bi bi-arrow-up-down"></i>
                                </th>
                                <th class="sortable" data-column="service" data-sort="asc">
                                    Service <i class="bi bi-arrow-up-down"></i>
                                </th>
                                <th class="sortable" data-column="status" data-sort="asc">
                                    Status <i class="bi bi-arrow-up-down"></i>
                                </th>
                                <th class="sortable" data-column="created" data-sort="desc">
                                    Created <i class="bi bi-arrow-up-down"></i>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for customer in customers %}
                                <tr class="customer-row" style="cursor: pointer;" onclick="goToCustomerDetail('{{ customer.customer_id }}')">
                                    <td data-column="customer-id">{{ customer.customer_id }}</td>
                                    <td data-column="name">
                                        <div>
                                            <strong>{{ customer.display_name }}</strong>
                                            {% if customer.customer_type == 'institution' and customer.contact_person_full_name %}
                                                <small class="text-muted d-block">Contact: {{ customer.contact_person_full_name }}</small>
                                            {% endif %}
                                        </div>
                                    </td>
                                    <td data-column="type">
                                        <span class="badge {% if customer.customer_type == 'institution' %}bg-primary{% else %}bg-secondary{% endif %}">
                                            {{ customer.get_customer_type_display }}
                                        </span>
                                    </td>
                                    <td data-column="phone">{{ customer.phone }}</td>
                                    <td data-column="email">{{ customer.email }}</td>
                                    <td data-column="service">
                                        {% if customer.service %}
                                            <span class="badge bg-info">{{ customer.service.name }}</span>
                                            <small class="text-muted d-block">{{ customer.service.speed_mbps }}Mbps</small>
                                        {% else %}
                                            <span class="badge bg-secondary">No Service</span>
                                        {% endif %}
                                    </td>
                                    <td data-column="status">
                                        {% if customer.service_status == 'suspended' %}
                                            <span class="badge bg-warning">Suspended</span>
                                        {% elif customer.is_active %}
                                            <span class="badge bg-success">Active</span>
                                        {% else %}
                                            <span class="badge bg-danger">Inactive</span>
                                        {% endif %}
                                    </td>
                                    <td data-column="created" data-sort-value="{{ customer.created_at|date:'Y-m-d' }}">
                                        {{ customer.created_at|date:"M d, Y" }}
                                        <small class="text-muted d-block">{{ customer.created_at|date:"H:i" }}</small>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        

                <!-- Pagination -->
                {% if is_paginated %}
                    <nav aria-label="Customers pagination">
                        <ul class="pagination justify-content-center">
                            {% if page_obj.has_previous %}
                                <li class="page-item">
                                    <a class="page-link" href="?page=1{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}">First</a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}">Previous</a>
                                </li>
                            {% endif %}

                            <li class="page-item active">
                                <span class="page-link">{{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</span>
                            </li>

                            {% if page_obj.has_next %}
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}">Next</a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}">Last</a>
                                </li>
                            {% endif %}
                        </ul>
                    </nav>
                {% endif %}
            {% else %}
                <div class="text-center py-5">
                    <i class="bi bi-people display-1 text-muted"></i>
                    <h3 class="mt-3">No customers found</h3>
                    <p class="text-muted">Try adjusting your search criteria or add a new customer.</p>
                    <a href="{% url 'customers:customer_add' %}" class="btn btn-primary">
                        <i class="bi bi-person-plus"></i> Add Customer
                    </a>
                </div>
            {% endif %}
        </div>
    </div>

    <!-- Import Modal -->
    <div class="modal fade" id="importModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Import Customers</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form method="post" enctype="multipart/form-data" action="{% url 'customers:import_customers' %}">
                    <div class="modal-body">
                        {% csrf_token %}
                        <div class="mb-3">
                            <label for="csvFile" class="form-label">Select CSV File</label>
                            <input type="file" class="form-control" id="csvFile" name="csv_file" accept=".csv" required>
                            <div class="form-text">
                                Upload a CSV file with customer data. 
                                <a href="{% url 'customers:download_template' %}" target="_blank">Download template</a> for the required format.
                            </div>
                        </div>
                        <div class="alert alert-info">
                            <strong>Note:</strong> Make sure your CSV file follows the template format. 
                            Existing customers with matching Customer IDs will be updated.
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-upload"></i> Import
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Bulk SMS Modal -->
    <div class="modal fade" id="bulkSmsModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Send Bulk SMS</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form method="post" id="bulkSmsForm">
                    <div class="modal-body">
                        {% csrf_token %}
                        <div class="row">
                            <div class="col-md-8">
                                <div class="mb-3">
                                    <label for="bulk_sms_message" class="form-label">Message</label>
                                    <textarea class="form-control" id="bulk_sms_message" name="bulk_sms_message" rows="4" 
                                              placeholder="Enter your bulk SMS message here..." maxlength="160" required></textarea>
                                    <div class="form-text">
                                        <span id="bulk-char-count">0</span>/160 characters
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label class="form-label">Audience Filter</label>
                                    <select name="sms_audience" class="form-select form-select-sm" id="smsAudienceFilter">
                                        <option value="current_filter">Current Filter Results</option>
                                        <option value="all">All Customers</option>
                                        <option value="active_only">Active Customers Only</option>
                                        <option value="inactive_only">Inactive Customers Only</option>
                                        <option value="suspended_only">Suspended Customers Only</option>
                                        <option value="individuals_only">Individuals Only</option>
                                        <option value="institutions_only">Institutions Only</option>
                                    </select>
                                </div>
                                <div class="alert alert-info py-2">
                                    <small>
                                        <strong id="sms-recipient-count">{{ customers|length }}</strong> customers selected
                                        <br>
                                        <span class="text-muted" id="sms-audience-description">Based on current filters</span>
                                    </small>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" name="send_bulk_sms" class="btn btn-success" onclick="return confirmBulkSMS()">
                            <i class="bi bi-send"></i> Send Bulk SMS
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<!-- Bootstrap 5 JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Navigate to customer detail page
function goToCustomerDetail(customerId) {
    window.location.href = "{% url 'customers:customer_detail' 'PLACEHOLDER' %}".replace('PLACEHOLDER', customerId);
}

// Live search with form submission
let searchTimeout;
document.getElementById('liveSearchInput').addEventListener('input', function() {
    const searchTerm = this.value.trim();
    
    clearTimeout(searchTimeout);
    
    searchTimeout = setTimeout(() => {
        document.getElementById('searchForm').submit();
    }, 500);
});

// Auto-apply filters with form submission
document.querySelectorAll('.auto-filter').forEach(select => {
    select.addEventListener('change', function() {
        document.getElementById('searchForm').submit();
    });
});

// Table sorting functionality
document.querySelectorAll('.sortable').forEach(header => {
    header.addEventListener('click', function() {
        const column = this.dataset.column;
        const currentSort = this.dataset.sort;
        const newSort = currentSort === 'asc' ? 'desc' : 'asc';
        
        // Update sort indicators
        document.querySelectorAll('.sortable').forEach(h => {
            h.querySelector('i').className = 'bi bi-arrow-up-down';
        });
        
        this.querySelector('i').className = newSort === 'asc' ? 'bi bi-arrow-up' : 'bi bi-arrow-down';
        this.dataset.sort = newSort;
        
        sortTable(column, newSort);
    });
});

function sortTable(column, direction) {
    const tbody = document.querySelector('#customersTable tbody');
    const rows = Array.from(tbody.querySelectorAll('tr'));
    
    rows.sort((a, b) => {
        let aValue = a.querySelector(`[data-column="${column}"]`).dataset.sortValue || 
                    a.querySelector(`[data-column="${column}"]`).textContent.trim();
        let bValue = b.querySelector(`[data-column="${column}"]`).dataset.sortValue || 
                    b.querySelector(`[data-column="${column}"]`).textContent.trim();
        
        // Handle different data types
        if (column === 'created') {
            aValue = new Date(aValue);
            bValue = new Date(bValue);
        } else if (!isNaN(aValue) && !isNaN(bValue)) {
            aValue = parseFloat(aValue);
            bValue = parseFloat(bValue);
        } else {
            aValue = aValue.toLowerCase();
            bValue = bValue.toLowerCase();
        }
        
        if (direction === 'asc') {
            return aValue > bValue ? 1 : -1;
        } else {
            return aValue < bValue ? 1 : -1;
        }
    });
    
    rows.forEach(row => tbody.appendChild(row));
}

// Page size change
function changePageSize(size) {
    const url = new URL(window.location);
    url.searchParams.set('per_page', size);
    window.location = url;
}

// Show bulk SMS modal
function sendBulkSMS() {
    const modal = new bootstrap.Modal(document.getElementById('bulkSmsModal'));
    modal.show();
}

// Bulk SMS character counter
document.getElementById('bulk_sms_message').addEventListener('input', function() {
    const charCount = this.value.length;
    document.getElementById('bulk-char-count').textContent = charCount;
    
    const counter = document.getElementById('bulk-char-count').parentElement;
    if (charCount > 160) {
        counter.className = 'form-text text-danger';
    } else if (charCount > 140) {
        counter.className = 'form-text text-warning';
    } else {
        counter.className = 'form-text text-success';
    }
});

// SMS audience filtering
function updateSMSRecipientCount() {
    const audienceFilter = document.getElementById('smsAudienceFilter').value;
    const tagFilter = document.getElementById('smsTagFilter').value;
    const rows = document.querySelectorAll('#customersTable tbody tr:not([style*="display: none"])');
    let count = 0;
    let description = '';
    
    rows.forEach(row => {
        const isActive = row.querySelector('[data-column="status"] .badge').classList.contains('bg-success');
        const customerType = row.querySelector('[data-column="type"] .badge').textContent.trim().toLowerCase();
        const hasService = !row.querySelector('[data-column="service"] .badge').classList.contains('bg-secondary');
        
        let include = true;
        
        switch(audienceFilter) {
            case 'active_only':
                include = isActive;
                description = 'Active customers only';
                break;
            case 'inactive_only':
                include = !isActive;
                description = 'Inactive customers only';
                break;
            case 'individuals_only':
                include = customerType === 'individual';
                description = 'Individual customers only';
                break;
            case 'institutions_only':
                include = customerType === 'institution';
                description = 'Institutional customers only';
                break;
            case 'with_service':
                include = hasService;
                description = 'Customers with service';
                break;
            case 'without_service':
                include = !hasService;
                description = 'Customers without service';
                break;
            default:
                include = true;
                description = 'Based on current filters';
        }
        
        if (include) count++;
    });
    
    // Apply tag filter if selected
    if (tagFilter) {
        description += ' with selected tag';
        // Note: Tag filtering would need backend support for accurate counting
    }
    
    document.getElementById('sms-recipient-count').textContent = count;
    document.getElementById('sms-audience-description').textContent = description;
}

// Update SMS recipient count when filters change
document.getElementById('smsAudienceFilter').addEventListener('change', updateSMSRecipientCount);
document.getElementById('smsTagFilter').addEventListener('change', updateSMSRecipientCount);

// Confirm bulk SMS
function confirmBulkSMS() {
    const count = document.getElementById('sms-recipient-count').textContent;
    const message = document.getElementById('bulk_sms_message').value;
    
    if (!message.trim()) {
        alert('Please enter a message to send.');
        return false;
    }
    
    return confirm(`Are you sure you want to send SMS to ${count} customers?\n\nMessage: "${message}"`);
}

// Update row count display
function updateRowCount() {
    const visibleRows = document.querySelectorAll('#customersTable tbody tr:not([style*="display: none"])').length;
    const totalRows = document.querySelectorAll('#customersTable tbody tr').length;
    
    if (visibleRows !== totalRows) {
        document.querySelector('h1').innerHTML = `<i class="bi bi-people"></i> Customers (${visibleRows} of ${totalRows})`;
    } else {
        document.querySelector('h1').innerHTML = `<i class="bi bi-people"></i> Customers (${totalRows})`;
    }
}

// Auto-dismiss alerts
setTimeout(function() {
    document.querySelectorAll('.alert').forEach(alert => {
        alert.style.opacity = '0';
        setTimeout(() => alert.remove(), 500);
    });
}, 5000);

// Initialize tooltips and modals
document.addEventListener('DOMContentLoaded', function() {
    // Initialize tooltips
    const tooltips = document.querySelectorAll('[title]');
    tooltips.forEach(tooltip => {
        try {
            new bootstrap.Tooltip(tooltip);
        } catch (e) {
            console.log('Bootstrap tooltip initialization failed for:', tooltip);
        }
    });
    
    // Ensure modals are properly initialized
    const modals = document.querySelectorAll('.modal');
    modals.forEach(modal => {
        try {
            new bootstrap.Modal(modal);
        } catch (e) {
            console.log('Bootstrap modal initialization failed for:', modal);
        }
    });
});
</script>
{% endblock %}