{% extends "base.html" %}
{% block title %}Contract List{% endblock %}
{% block content %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/contract.css') }}" />

<!-- TomSelect CSS + JS (lightweight, modern autocomplete) -->
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/css/tom-select.bootstrap5.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>

<div class="container mt-4">
    <!-- Total Contracts Cards -->
    <div class="row mb-4 cards-row">
        <!-- User-specific Total Contracts Card -->
        <div class="col-sm-6 col-xl-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 Contracts' if not is_admin else 'Total Contracts (Filtered)' }}</h6>
                            <h4 class="mb-1">{{ total_contracts }}</h4>
                            <h6 class="text-muted">Last Contract: <strong>{{ last_contract_number if last_contract_number else 'None' }}</strong></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>
        <!-- Global Total Contracts Card -->
        <div class="col-sm-6 col-xl-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">Global Contracts</h6>
                            <h4 class="mb-1">{{ total_contracts_global }}</h4>
                            <small class="text-muted">Across all users</small>
                        </div>
                        <div class="bg-success text-white rounded-circle d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
                            <i class="bx bx-globe fs-4"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filter Form -->
    <div class="table-card card-1">
        <form id="filterForm" action="{{ url_for('contracts.index') }}" method="get" class="filter-form d-flex flex-wrap gap-3 mb-4 align-items-center justify-content-between">
            <a href="{{ url_for('contracts.create') }}" class="btn btn-primary btn-create"><i class='bx bx-plus-circle'></i> Add New Consultant</a>

            <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 Contract Number, Project Title, or Party B" 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="document.getElementById('filterForm').submit()">
                        <option value="created_at_desc" {% if sort_order == 'created_at_desc' %}selected{% endif %}>Newest First</option>
                        <option value="contract_number_asc" {% if sort_order == 'contract_number_asc' %}selected{% endif %}>Contract Number (ASC)</option>
                        <option value="contract_number_desc" {% if sort_order == 'contract_number_desc' %}selected{% endif %}>Contract Number (DESC)</option>
                        <option value="start_date_asc" {% if sort_order == 'start_date_asc' %}selected{% endif %}>Start Date (ASC)</option>
                        <option value="start_date_desc" {% if sort_order == 'start_date_desc' %}selected{% endif %}>Start Date (DESC)</option>
                        <option value="total_fee_asc" {% if sort_order == 'total_fee_asc' %}selected{% endif %}>Total Fee (ASC)</option>
                        <option value="total_fee_desc" {% if sort_order == 'total_fee_desc' %}selected{% endif %}>Total Fee (DESC)</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="document.getElementById('filterForm').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>

                <!-- Export -->
                <div class="dropdown">
                    <button class="btn btn-success dropdown-toggle" type="button" data-bs-toggle="dropdown">
                        <i class='bx bx-download'></i> Export
                    </button>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="{{ url_for('contracts.export_excel', search=search_query, sort=sort_order) }}">Export to Excel</a></li>
                        {% if is_admin %}
                        <li><a class="dropdown-item" href="{{ url_for('contracts.export_excel_all', search=search_query, sort=sort_order) }}">Export All Contracts to Excel</a></li>
                        <li><a class="dropdown-item" href="{{ url_for('contracts.export_all_docx') }}">Export All Contracts to DOCX</a></li>
                        {% endif %}
                        {% if not is_admin %}
                        <li><a class="dropdown-item" href="{{ url_for('contracts.export_all_docx') }}">Export My Contracts to DOCX</a></li>
                        {% endif %}
                    </ul>
                </div>
            </div>
        </form>

        <!-- Table -->
        <div class="table-responsive">
            <table class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th>Contract Number</th>
                        <th class="mobile-hidden">Project Title</th>
                        <th>Party B</th>
                        <th class="tablet-hidden mobile-hidden">Start Date</th>
                        <th class="tablet-hidden mobile-hidden">End Date</th>
                        <th class="mobile-hidden">Total Fee (USD)</th>
                        <th class="mobile-hidden">Articles</th>
                        {% if is_admin %}
                        <th class="mobile-hidden">Created By</th>
                        {% endif %}
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for contract in contracts %}
                    <tr>
                        <td>{{ contract.contract_number or 'N/A' }}</td>
                        <td class="mobile-hidden">{{ contract.project_title or 'N/A' }}</td>
                        <td>{{ contract.party_b_signature_name or 'N/A' }}</td>
                        <td class="tablet-hidden mobile-hidden">{{ contract.agreement_start_date_display or 'N/A' }}</td>
                        <td class="tablet-hidden mobile-hidden">{{ contract.agreement_end_date_display or 'N/A' }}</td>
                        <td class="mobile-hidden">${{ contract.total_fee_usd or '0.00' }}</td>
                        <td class="mobile-hidden">{{ contract.custom_article_sentences|length }} {{ 'article' if contract.custom_article_sentences|length == 1 else 'articles' }}</td>
                        {% if is_admin %}
                        <td class="mobile-hidden">{{ contract.username or 'N/A' }}</td>
                        {% endif %}
                        <td>
                            <div class="dropdown">
                                <button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="dropdown">
                                    <i class="bx bx-dots-horizontal-rounded"></i>
                                </button>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="{{ url_for('contracts.view', contract_id=contract.id) }}"><i class="bx bx-show"></i> View</a></li>
                                    <li><a class="dropdown-item" href="{{ url_for('contracts.update', contract_id=contract.id) }}"><i class="bx bx-edit"></i> Edit</a></li>
                                    <li><a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#downloadConfirmModal{{ contract.id }}" data-contract-number="{{ contract.contract_number or 'N/A' }}"><i class="bx bx-download"></i> Download Docx</a></li>
                                    {% if is_admin %}
                                    <li><a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#sendEmailModal" data-contract-id="{{ contract.id }}"><i class="bx bx-envelope"></i> Send via Email</a></li>
                                    {% endif %}
                                    <li><a class="dropdown-item text-danger" href="#" data-bs-toggle="modal" data-bs-target="#deleteConfirmModal{{ contract.id }}"><i class="bx bx-trash"></i> Delete</a></li>
                                </ul>
                            </div>
                        </td>
                    </tr>

                    <!-- Delete Modal -->
                    <div class="modal fade" id="deleteConfirmModal{{ contract.id }}" tabindex="-1">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">Confirm Deletion</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                </div>
                                <div class="modal-body">
                                    Are you sure you want to delete the contract "{{ contract.contract_number or 'N/A' }}"? This action will mark the contract as deleted.
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                    <form action="{{ url_for('contracts.delete', contract_id=contract.id) }}" method="POST">
                                        <button type="submit" class="btn btn-danger">Delete</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Download Confirm Modal -->
                    <div class="modal fade" id="downloadConfirmModal{{ contract.id }}" tabindex="-1">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">Download Contract: <span id="contractNumber{{ contract.id }}">{{ contract.contract_number or 'N/A' }}</span></h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                </div>
                                <div class="modal-body">
                                    <p>This is the latest version of consultant contract number <strong id="contractNumberBody{{ contract.id }}">{{ contract.contract_number or 'N/A' }}</strong>. Please confirm you want to download it.</p>
                                    <p class="text-muted">Note: Downloading will also send the contract via email to the designated recipients. Ensure all details are up-to-date before proceeding.</p>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                    <a href="{{ url_for('contracts.export_docx', contract_id=contract.id) }}" class="btn btn-primary">Download</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <!-- Send Email Modal -->
        <div class="modal fade" id="sendEmailModal" tabindex="-1" aria-labelledby="sendEmailModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="sendEmailModalLabel">Send Contract via Email</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form id="sendEmailForm" action="{{ url_for('contracts.send_docx') }}" method="POST">
                            <div class="mb-3">
                                <label for="toEmail" class="form-label">To <span class="text-danger">*</span></label>
                                <select id="toEmail" name="to_emails" multiple required placeholder="Type name or email..."></select>
                                <small class="form-text text-muted">Start typing a name (e.g. "Chet") to see suggestions.</small>
                            </div>

                            <div class="mb-3">
                                <a href="#" id="toggleCc" class="text-primary text-decoration-none"><i class="bx bx-plus-circle"></i> Add CC</a>
                                <div id="ccInputGroup" class="mt-2 d-none">
                                    <label for="ccEmail" class="form-label">CC</label>
                                    <select id="ccEmail" name="cc_emails" multiple placeholder="Type name or email..."></select>
                                    <small class="form-text text-muted">Optional. Multiple allowed.</small>
                                </div>
                            </div>

                            <div class="mb-3">
                                <a href="#" id="toggleBcc" class="text-primary text-decoration-none"><i class="bx bx-plus-circle"></i> Add BCC</a>
                                <div id="bccInputGroup" class="mt-2 d-none">
                                    <label for="bccEmail" class="form-label">BCC</label>
                                    <select id="bccEmail" name="bcc_emails" multiple placeholder="Type name or email..."></select>
                                    <small class="form-text text-muted">Optional. Multiple allowed.</small>
                                </div>
                            </div>

                            <input type="hidden" id="contractId" name="contract_id">
                            <button type="submit" class="btn btn-primary">Send Email</button>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Pagination -->
        <div class="d-flex justify-content-between align-items-center mt-3">
            <div id="message" class="{% if contracts|length == 0 %}error{% else %}d-none{% endif %}">
                {% if contracts|length == 0 %}No contracts found.{% endif %}
            </div>
            <nav>
                <ul class="pagination mb-0">
                    {% if pagination.has_prev %}
                    <li class="page-item"><a class="page-link" href="{{ url_for('contracts.index', page=pagination.prev_num, search=search_query, sort=sort_order, entries=entries_per_page) }}">Previous</a></li>
                    {% else %}
                    <li class="page-item disabled"><span class="page-link">Previous</span></li>
                    {% endif %}

                    {% 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('contracts.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 %}

                    {% if pagination.has_next %}
                    <li class="page-item"><a class="page-link" href="{{ url_for('contracts.index', page=pagination.next_num, search=search_query, sort=sort_order, entries=entries_per_page) }}">Next</a></li>
                    {% else %}
                    <li class="page-item disabled"><span class="page-link">Next</span></li>
                    {% endif %}
                </ul>
            </nav>
        </div>
    </div>
</div>

<!-- ==================== JAVASCRIPT ==================== -->
<script>
    // List of known emails with labels (name extracted from email)
    const emailOptions = [
        { value: "chettana@ngoforum.org.kh", label: "Chettana" },
        { value: "saroeun@ngoforum.org.kh", label: "Saroeun" },
        { value: "vicheth@ngoforum.org.kh", label: "Vicheth" },
        { value: "somaly@ngoforum.org.kh", label: "Somaly" },
        { value: "sophal@ngoforum.org.kh", label: "Sophal" },
        { value: "leaksopor@ngoforum.org.kh", label: "Leaksopor" },
        { value: "sereymongkol@ngoforum.org.kh", label: "Sereymongkol" },
        { value: "sochea@ngoforum.org.kh", label: "Sochea" },
        { value: "sochoeun@ngoforum.org.kh", label: "Sochoeun" },
        { value: "sreynich@ngoforum.org.kh", label: "Sreynich" },
        { value: "chhea@ngoforum.org.kh", label: "Chhea" },
        { value: "mengseu@ngoforum.org.kh", label: "Mengseu" },
        { value: "romas@ngoforum.org.kh", label: "Romas" },
        { value: "sollyhorng@ngoforum.org.kh", label: "Sollyhorng" },
        { value: "tola@ngoforum.org.kh", label: "Tola" },
        { value: "borey@ngoforum.org.kh", label: "Borey" },
        { value: "bunna@ngoforum.org.kh", label: "Bunna" }
    ];

    // Initialize TomSelect for email fields
    function initEmailSelect(id) {
        return new TomSelect(id, {
            options: emailOptions,
            create: true,
            createOnBlur: true,
            maxItems: null,
            placeholder: "Type name or email...",
            searchField: ['label', 'value'],
            render: {
                option: function(data, escape) {
                    return `<div><strong>${escape(data.label)}</strong><br><small class="text-muted">${escape(data.value)}</small></div>`;
                },
                item: function(data, escape) {
                    return `<div title="${escape(data.value)}">${escape(data.label)}</div>`;
                }
            }
        });
    }

    let toSelect, ccSelect, bccSelect;

    // Initialize on modal show
    const sendEmailModal = document.getElementById('sendEmailModal');
    sendEmailModal.addEventListener('show.bs.modal', function (event) {
        const button = event.relatedTarget;
        const contractId = button.getAttribute('data-contract-id');
        document.getElementById('contractId').value = contractId;

        // Destroy previous instances
        [toSelect, ccSelect, bccSelect].forEach(s => s && s.destroy());

        // Re-init
        toSelect = initEmailSelect('#toEmail');
        ccSelect = initEmailSelect('#ccEmail');
        bccSelect = initEmailSelect('#bccEmail');

        // Reset CC/BCC visibility
        document.getElementById('ccInputGroup').classList.add('d-none');
        document.getElementById('bccInputGroup').classList.add('d-none');
    });

    // Toggle CC
    document.getElementById('toggleCc').addEventListener('click', e => {
        e.preventDefault();
        const grp = document.getElementById('ccInputGroup');
        grp.classList.toggle('d-none');
        if (!grp.classList.contains('d-none')) {
            setTimeout(() => ccSelect && ccSelect.focus(), 100);
        }
    });

    // Toggle BCC
    document.getElementById('toggleBcc').addEventListener('click', e => {
        e.preventDefault();
        const grp = document.getElementById('bccInputGroup');
        grp.classList.toggle('d-none');
        if (!grp.classList.contains('d-none')) {
            setTimeout(() => bccSelect && bccSelect.focus(), 100);
        }
    });

    // Form validation
    document.getElementById('sendEmailForm').addEventListener('submit', function(e) {
        const toItems = toSelect ? toSelect.items : [];
        if (!toItems || toItems.length === 0) {
            e.preventDefault();
            alert('Please add at least one recipient in "To".');
            return;
        }

        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        const allEmails = [...toItems];
        if (ccSelect) allEmails.push(...ccSelect.items);
        if (bccSelect) allEmails.push(...bccSelect.items);

        for (const email of allEmails) {
            if (!emailRegex.test(email)) {
                e.preventDefault();
                alert(`Invalid email: ${email}`);
                return;
            }
        }
    });

    // Search debounce
    function debounce(func, wait) {
        let timeout;
        return function (...args) {
            clearTimeout(timeout);
            timeout = setTimeout(() => func(...args), wait);
        };
    }

    const searchInput = document.getElementById('searchInput');
    const clearSearch = document.getElementById('clearSearch');
    const searchSpinner = document.getElementById('searchSpinner');
    const filterForm = document.getElementById('filterForm');

    searchInput.addEventListener('input', debounce(() => {
        searchSpinner.style.display = 'block';
        clearSearch.classList.toggle('d-none', !searchInput.value);
        filterForm.submit();
    }, 500));

    clearSearch.addEventListener('click', () => {
        searchInput.value = '';
        clearSearch.classList.add('d-none');
        filterForm.submit();
    });

    window.addEventListener('load', () => {
        searchSpinner.style.display = 'none';
    });

    // Download modal contract number
    document.querySelectorAll('[data-bs-target^="#downloadConfirmModal"]').forEach(button => {
        button.addEventListener('click', function () {
            const contractNumber = this.getAttribute('data-contract-number');
            const modalId = this.getAttribute('data-bs-target');
            const modal = document.querySelector(modalId);
            modal.querySelectorAll('[id^="contractNumber"]').forEach(el => {
                el.textContent = contractNumber;
            });
        });
    });
</script>
{% endblock %}