{% extends "layouts/base.html" %}

{% block title %}Call Campaign{% endblock %}

{% block extra_css %}
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-beta.1/css/select2.min.css" rel="stylesheet" />
<link href="{{ url_for('static', filename='css/campaign.css') }}" rel="stylesheet">

<style>
    body {
        background-color: #f8f9fa;
    }

    .campaigns-container {
        padding: 20px;
        max-width: 960px;
        margin: 0 auto;
    }

    .header-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }

    .data-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
        background-color: #fff;
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        border-radius: 8px;
        overflow: hidden;
    }

    .data-table th,
    .data-table td {
        padding: 12px 15px;
        text-align: left;
        border-bottom: 1px solid #ddd;
        vertical-align: middle;
    }

    .data-table th {
        background-color: #f2f2f2;
        font-weight: bold;
        color: #333;
        white-space: nowrap;
    }

    .data-table tbody tr:hover {
        background-color: #f9f9f9;
    }

    .data-table tbody tr:last-child td {
        border-bottom: none;
    }

    .campaign-status {
        padding: 5px 10px;
        border-radius: 4px;
        font-size: 0.9em;
        display: inline-block;
    }

    .status-pending {
        background: #fff3cd;
        color: #664d03;
    }

    .status-in_progress {
        background: #cce5ff;
        color: #004085;
    }

    .status-completed {
        background: #d4edda;
        color: #155724;
    }

    .status-failed {
        background: #f8d7da;
        color: #721c24;
    }

    .import-modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1050;
        overflow-y: auto;
    }

    .modal-content {
        background: white;
        width: 600px;
        height: 520px;
        margin: auto;
        padding: 20px;
        border-radius: 8px;
        position: relative;
        box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
        transform: translate(-60%, 21%);
    }

    .modal-content .form-group {
        margin-bottom: 20px;
    }

    .modal-content .form-group label {
        font-weight: bold;
        margin-bottom: .5rem;
        display: block;
    }

    .modal-content textarea.form-control {
        min-height: 150px;
        resize: vertical;
    }

    .modal-content .form-control {
        width: 100%;
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    .modal-content .select2-container .select2-selection--multiple {
        min-height: 38px;
        border: 1px solid #ced4da;
        padding: .375rem .75rem;
        line-height: 1.5;
        border-radius: .25rem;
    }

    .modal-content .select2-container--default .select2-selection--multiple .select2-selection__choice {
        background-color: #007bff;
        color: white;
        border: 1px solid #007bff;
        border-radius: .25rem;
        padding: 0 .5rem;
        margin-top: .3rem;
    }

    .modal-content .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
        color: rgba(255, 255, 255, 0.7);
        float: none;
        margin-left: 5px;
        font-weight: bold;
        display: inline-block;
        cursor: pointer;
    }

    .modal-content .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
        color: white;
    }

    .modal-content .select2-container--default.select2-container--focus .select2-selection--multiple {
        border-color: #80bdff;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

    .action-button {
        padding: 10px 15px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 1em;
        transition: background-color 0.2s ease;
    }

    .action-button.primary {
        background-color: #042954;
        color: white;
    }

    .action-button.primary:hover {
        background-color: #031f40;
    }

    .action-button.secondary {
        background-color: #6c757d;
        color: white;
    }

    .action-button.secondary:hover {
        background-color: #5a6268;
        color: white;
    }

    .action-button-pg {
        padding: 5px 10px;
        border: 1px solid #ccc;
        background-color: #fff;
        cursor: pointer;
        border-radius: 4px;
        margin: 0 2px;
    }

    .action-button-pg:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
</style>
{% endblock %}

{% block content %}
<div class="campaigns-container mt-5">
    <div class="header-actions">
        <h2>Call Campaigns</h2>
        <button type="button" class="action-button primary" onclick="showNewCampaignModal()">
            <i class="fa-light fa-plus"></i> Create New Campaign
        </button>
    </div>

    <!-- Call Campaigns Table -->
    <table class="data-table">
        <thead>
            <tr>
                <th>#</th>
                <th>Name</th>
                <th>Status</th>
                <th>Total Calls</th>
                <th>Completed Calls</th>
                <th>Failed Calls</th>
                <th>Created At</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody id="campaignsList">
            <!-- Campaign rows will be rendered here by JS -->
        </tbody>
    </table>
    <div id="campaignsPagination" style="margin-top: 10px; text-align: right;"></div>
</div>

<!-- New Campaign Modal -->
<div id="newCampaignModal" class="import-modal">
    <div class="modal-content">
        <h3>Create New Call Campaign</h3>
        <form id="new-campaign-form">
            <!-- Contact Selection -->
            <div class="form-group">
                <label for="contact-select-modal">Select Contacts:</label>
                <select multiple="multiple" class="form-control" id="contact-select-modal">
                    {% for contact in contacts %}
                    <option value="{{ contact[0] }}">{{ contact[1] }} - {{ contact[2] }}</option>
                    {% endfor %}
                </select>
            </div>

            <!-- Campaign Settings -->
            <div class="form-group">
                <label for="campaign-name-modal">Campaign Name:</label>
                <input type="text" class="form-control" id="campaign-name-modal" required>
            </div>
            <div class="form-group">
                <label for="call-script-modal">Call Script:</label>
                <textarea class="form-control" id="call-script-modal" rows="4" required></textarea>
            </div>
            <div class="form-group">
                <label for="retry-attempts-modal">Retry Attempts:</label>
                <input type="number" class="form-control" id="retry-attempts-modal" min="0" max="3" value="1">
            </div>
            <div class="form-group">
                <label for="retry-delay-modal">Retry Delay (minutes):</label>
                <input type="number" class="form-control" id="retry-delay-modal" min="5" max="60" value="30">
            </div>

            <div class="mt-3">
                <button type="button" onclick="hideNewCampaignModal()" style="border: none;" class="action-button secondary">Cancel</button>
                <button type="button" class="action-button primary" id="submit-new-campaign">Create Campaign</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-beta.1/js/select2.min.js"></script>
<script>
    function showNewCampaignModal() {
        document.getElementById('newCampaignModal').style.display = 'block';
        $('#contact-select-modal').select2({
            dropdownParent: $('#newCampaignModal .modal-content'),
            placeholder: "Select contacts...",
            allowClear: true
        });
    }

    function hideNewCampaignModal() {
        document.getElementById('newCampaignModal').style.display = 'none';
        document.getElementById('new-campaign-form').reset();
        $('#contact-select-modal').val(null).trigger('change');
        if ($('#contact-select-modal').data('select2')) {
            $('#contact-select-modal').select2('destroy');
        }
    }

    document.addEventListener('DOMContentLoaded', function () {
        document.getElementById('submit-new-campaign').addEventListener('click', async function () {
            const selectedContacts = $('#contact-select-modal').val();

            if (!selectedContacts || selectedContacts.length === 0) {
                alert('Please select at least one contact.');
                return;
            }

            const campaignData = {
                name: document.getElementById('campaign-name-modal').value,
                script: document.getElementById('call-script-modal').value,
                contacts: selectedContacts,
                retry_attempts: document.getElementById('retry-attempts-modal').value,
                retry_delay: document.getElementById('retry-delay-modal').value
            };

            if (!campaignData.name || !campaignData.script) {
                alert('Please provide a campaign name and script.');
                return;
            }

            try {
                this.disabled = true;
                this.textContent = 'Creating...';

                const response = await fetch('/company/call-campaign/start', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(campaignData)
                });

                const data = await response.json();

                if (data.success) {
                    hideNewCampaignModal();
                    location.reload();
                } else {
                    alert(data.error || 'Failed to create campaign');
                }
            } catch (error) {
                alert('Error creating campaign');
            } finally {
                this.disabled = false;
                this.textContent = 'Create Campaign';
            }
        });
    });

    // Pass campaigns data to JS
    const campaignsData = [
        {% for campaign in campaigns %}
            {{ campaign|tojson }},
        {% endfor %}
    ];

    let campaignsPerPage = 10;
    let currentCampaignsPage = 1;

    function renderCampaignsTable(filteredCampaigns = null) {
        const data = filteredCampaigns || campaignsData;
        const start = (currentCampaignsPage - 1) * campaignsPerPage;
        const end = start + campaignsPerPage;
        const pageCampaigns = data.slice(start, end);

        const campaignsList = document.getElementById('campaignsList');
        if (pageCampaigns.length === 0) {
            campaignsList.innerHTML = `
                <tr>
                    <td colspan="8" class="text-center">No call campaigns found.</td>
                </tr>
            `;
        } else {
            campaignsList.innerHTML = pageCampaigns.map((campaign, idx) => `
                <tr>
                    <td>${start + idx + 1}</td>
                    <td>${campaign[1]}</td>
                    <td>
                        <span class="campaign-status status-${campaign[2].toLowerCase()}">
                            ${campaign[2]}
                        </span>
                    </td>
                    <td>${campaign[4]}</td>
                    <td>${campaign[5]}</td>
                    <td>${campaign[6]}</td>
                    <td>${new Date(campaign[3]).toLocaleString('en-US', {
                        year: 'numeric',
                        month: 'short',
                        day: '2-digit',
                        hour: '2-digit',
                        minute: '2-digit',
                        hour12: true
                    })}</td>
                    <td>
                        <a href="/company/call-campaign/${campaign[0]}/view" class="action-button action-button-pg primary" style="padding: 6px 12px; font-size: 0.95em;text-decoration: none;">
                            View
                        </a>
                    </td>
                </tr>
            `).join('');
        }

        renderCampaignsPagination(data);
    }

    function renderCampaignsPagination(data = null) {
        const totalCampaigns = (data || campaignsData).length;
        const totalPages = Math.ceil(totalCampaigns / campaignsPerPage);
        let html = '';

        if (totalPages > 1) {
            html += `<button onclick="changeCampaignsPage(-1)" ${currentCampaignsPage === 1 ? 'disabled' : ''}>Prev</button>`;
            html += ` Page ${currentCampaignsPage} of ${totalPages} `;
            html += `<button onclick="changeCampaignsPage(1)" ${currentCampaignsPage === totalPages ? 'disabled' : ''}>Next</button>`;
        }

        document.getElementById('campaignsPagination').innerHTML = html;
    }

    function changeCampaignsPage(delta) {
        const totalPages = Math.ceil(campaignsData.length / campaignsPerPage);
        currentCampaignsPage += delta;
        if (currentCampaignsPage < 1) currentCampaignsPage = 1;
        if (currentCampaignsPage > totalPages) currentCampaignsPage = totalPages;
        renderCampaignsTable();
    }

    document.addEventListener('DOMContentLoaded', function () {
        renderCampaignsTable();
    });
</script>
{% endblock %}