{% extends "base.html" %}
{% block title %}Internship Contract List{% endblock %}
{% block content %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/contract.css') }}" />
<div class="container mt-4">
    <!-- Total Interns and Supervisor Title Cards -->
    <div class="row mb-4 cards-row">
        <!-- Total Interns Card -->
        <div class="col-sm-6 col-xl-3 mb-3">
            <div class="card card-1 h-100 ">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="card-title text-muted">{{ 'Your Interns' if not is_admin else 'Total Interns (Filtered)' }}</h6>
                            <h4 class="mb-1">{{ total_interns }}</h4>
                             <h6 class="text-success">All Interns</h6>
                        </div>
                        <div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
                            <i class="bx bx-file fs-4"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Supervisor Title Cards -->
        {% for title, count in supervisor_counts.items() %}
        <div class="col-sm-6 col-xl-3 mb-3">
            <div class="card card-1 h-100 ">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="card-title text-muted">{{ title }} </h6>
                            <h4 class="mb-1">{{ count }}</h4>
                            <h6 class="text-success">Interns</h6>
                        </div>
                        <div class="bg-{{ loop.cycle('success', 'info', 'warning', 'danger') }} text-white rounded-circle d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
                            <i class="bx bx-user fs-4"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    <!-- Filter + Actions -->
    <div class="table-card card-1 ">
        <form id="filterForm" action="{{ url_for('interns.index') }}" method="get" class="filter-form d-flex flex-wrap gap-3 mb-4 align-items-center justify-content-between">
            <!-- Action Buttons -->
            <div class="d-flex flex-wrap gap-2">
                <a href="{{ url_for('interns.create') }}" class="btn btn-primary">
                    <i class='bx bx-plus-circle'></i> Add New Intern 
                </a>
                <a href="{{ url_for('interns.download_all_docx') }}" class="btn btn-success">
                    <i class='bx bx-download'></i> Download All (ZIP)
                </a>
                <!-- Import Button to Trigger Modal -->
                <button type="button" class="btn  btn-success" data-bs-toggle="modal" data-bs-target="#importExcelModal">
                    <i class='bx bx-upload'></i> Import from Excel
                </button>
            </div>
            <!-- Filters -->
            <div class="d-flex flex-wrap gap-3 align-items-center">
                <!-- Search -->
                <div class="input-group w-auto position-relative">
                    <span class="input-group-text"><i class='bx bx-search'></i></span>
                    <input type="text" name="search" id="searchInput" class="form-control" placeholder="Search by Name or Role" value="{{ search_query }}">
                    <button type="button" id="clearSearch" class="btn btn-outline-secondary {% if not search_query %}d-none{% endif %}">
                        <i class='bx bx-x'></i>
                    </button>
                    <button type="submit" class="btn btn-primary" id="searchButton">Search</button>
                    <div id="searchSpinner" class="spinner-border spinner-border-sm position-absolute" style="right: 80px; top: 50%; transform: translateY(-50%); display: none;" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </div>
                <!-- Sort -->
                <div class="input-group w-auto">
                    <label class="input-group-text" for="sortSelect">Sort</label>
                    <select id="sortSelect" name="sort" class="form-select" onchange="this.form.submit()">
                        <option value="created_at_desc" {% if sort_order == 'created_at_desc' %}selected{% endif %}>Newest First</option>
                        <option value="intern_name_asc" {% if sort_order == 'intern_name_asc' %}selected{% endif %}>Name (A-Z)</option>
                        <option value="intern_name_desc" {% if sort_order == 'intern_name_desc' %}selected{% endif %}>Name (Z-A)</option>
                        <option value="start_date_asc" {% if sort_order == 'start_date_asc' %}selected{% endif %}>Start Date (Earliest)</option>
                        <option value="start_date_desc" {% if sort_order == 'start_date_desc' %}selected{% endif %}>Start Date (Latest)</option>
                    </select>
                </div>
                <!-- Entries -->
                <div class="input-group w-auto">
                    <label class="input-group-text" for="entriesSelect">Show</label>
                    <select id="entriesSelect" name="entries" class="form-select" onchange="this.form.submit()">
                        <option value="5" {% if entries_per_page == 5 %}selected{% endif %}>5</option>
                        <option value="10" {% if entries_per_page == 10 %}selected{% endif %}>10</option>
                        <option value="15" {% if entries_per_page == 15 %}selected{% endif %}>15</option>
                    </select>
                </div>
            </div>
        </form>
        <!-- Import Excel Modal -->
        <div class="modal fade" id="importExcelModal" tabindex="-1" aria-labelledby="importExcelModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="importExcelModalLabel">Import Interns from Excel</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form action="{{ url_for('interns.import_excel') }}" method="post" enctype="multipart/form-data" id="importExcelForm">
                        <div class="modal-body">
                            <div class="mb-3">
                                <label for="importFile" class="form-label">Select Excel File (.xlsx or .xls)</label>
                                <input type="file" name="file" id="importFile" accept=".xlsx,.xls" class="form-control" required>
                                <div class="form-text">
                                    Please ensure the Excel file follows the required 
                                </div>
                            </div>
                            <div id="importSpinner" class="spinner-border spinner-border-sm" style="display: none;" role="status">
                                <span class="visually-hidden">Uploading...</span>
                            </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" id="importSubmitButton">Import</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!-- Table -->
        <div class="table-responsive">
            <table class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th>Intern Name</th>
                        <th>Role</th>
                        <th class="tablet-hidden mobile-hidden">Start Date</th>
                        <th class="tablet-hidden mobile-hidden">End Date</th>
                        <th class="mobile-hidden">Allowance (USD)</th>
                        <th class="mobile-hidden">Supervisor</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for intern in interns %}
                    <tr>
                        <td>{{ intern.intern_name or 'N/A' }}</td>
                        <td>{{ intern.intern_role or 'N/A' }}</td>
                        <td class="tablet-hidden mobile-hidden">{{ intern.start_date.strftime('%d %b %Y') if intern.start_date else 'N/A' }}</td>
                        <td class="tablet-hidden mobile-hidden">{{ intern.end_date.strftime('%d %b %Y') if intern.end_date else 'N/A' }}</td>
                        <td class="mobile-hidden">${{ '%.2f' % intern.allowance_amount if intern.allowance_amount is not none else '0.00' }}</td>
                        <td class="mobile-hidden">{{ intern.supervisor_info.get('name', 'N/A') }}</td>
                        <td>
                            <div class="dropdown">
                                <button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                    <i class="bx bx-dots-horizontal-rounded"></i>
                                </button>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a class="dropdown-item" href="{{ url_for('interns.view_docx', id=intern.id) }}">
                                            <i class="bx bx-show-alt"></i> View Contract
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="{{ url_for('interns.update', id=intern.id) }}">
                                            <i class="bx bx-edit"></i> Edit
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="{{ url_for('interns.download_docx', id=intern.id) }}">
                                            <i class="bx bx-download"></i> Download DOCX
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item text-danger" href="#" data-bs-toggle="modal" data-bs-target="#deleteConfirmModal{{ intern.id }}">
                                            <i class="bx bx-trash"></i> Delete
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </td>
                    </tr>
                    <!-- Delete Modal -->
                    <div class="modal fade" id="deleteConfirmModal{{ intern.id }}" tabindex="-1" aria-labelledby="deleteModalLabel{{ intern.id }}" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="deleteModalLabel{{ intern.id }}">Confirm Deletion</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    Are you sure you want to delete the intern contract for {{ intern.intern_name or 'N/A' }}?
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                    <form action="{{ url_for('interns.delete', id=intern.id) }}" method="POST">
                                        <button type="submit" class="btn btn-danger">Delete</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        <!-- Pagination -->
        <div class="d-flex justify-content-between align-items-center mt-3">
            <div id="message" class="text-danger {% if interns|length > 0 %}d-none{% endif %}">
                No intern contracts found.
            </div>
            {% if pagination %}
            <nav aria-label="Page navigation">
                <ul class="pagination mb-0">
                    <li class="page-item {% if not pagination.has_prev %}disabled{% endif %}">
                        <a class="page-link" href="{{ url_for('interns.index', page=pagination.prev_num, search=search_query, sort=sort_order, entries=entries_per_page) if pagination.has_prev else '#' }}" aria-label="Previous">
                            <span aria-hidden="true">&laquo; Previous</span>
                        </a>
                    </li>
                    {% for page_num in pagination.iter_pages() %}
                        {% if page_num %}
                        <li class="page-item {% if page_num == pagination.page %}active{% endif %}">
                            <a class="page-link" href="{{ url_for('interns.index', page=page_num, search=search_query, sort=sort_order, entries=entries_per_page) }}">{{ page_num }}</a>
                        </li>
                        {% else %}
                        <li class="page-item disabled"><span class="page-link">...</span></li>
                        {% endif %}
                    {% endfor %}
                    <li class="page-item {% if not pagination.has_next %}disabled{% endif %}">
                        <a class="page-link" href="{{ url_for('interns.index', page=pagination.next_num, search=search_query, sort=sort_order, entries=entries_per_page) if pagination.has_next else '#' }}" aria-label="Next">
                            <span aria-hidden="true">Next &raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
            {% endif %}
        </div>
    </div>
</div>
<!-- JavaScript for Search and Import -->
<script>
    function debounce(func, wait) {
        let timeout;
        return function (...args) {
            clearTimeout(timeout);
            timeout = setTimeout(() => func.apply(this, args), wait);
        };
    }
    const searchForm = document.getElementById('filterForm');
    const searchInput = document.getElementById('searchInput');
    const clearSearch = document.getElementById('clearSearch');
    const searchSpinner = document.getElementById('searchSpinner');
    const importForm = document.getElementById('importExcelForm');
    const importSubmitButton = document.getElementById('importSubmitButton');
    const importSpinner = document.getElementById('importSpinner');
    // Search functionality
    searchInput.addEventListener('input', debounce(() => {
        if (searchInput.value.length >= 2 || searchInput.value.length === 0) {
            searchSpinner.style.display = 'block';
            clearSearch.classList.toggle('d-none', !searchInput.value);
            searchForm.submit();
        }
    }, 500));
    clearSearch.addEventListener('click', () => {
        searchInput.value = '';
        clearSearch.classList.add('d-none');
        searchSpinner.style.display = 'block';
        searchForm.submit();
    });
    window.addEventListener('load', () => {
        searchSpinner.style.display = 'none';
        importSpinner.style.display = 'none';
    });
    // Import form submission
    importForm.addEventListener('submit', () => {
        importSubmitButton.disabled = true;
        importSpinner.style.display = 'inline-block';
    });
</script>
{% endblock %}