{% extends "layouts/base.html" %}
{% block title %}View Call Campaign{% endblock %}

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

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

    .campaigns-container h2{
    }

    .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;
        text-decoration: none;
        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">
    <h2>Call Campaign: {{ campaign[0] }}</h2>
    <p><strong>Created At:</strong> {{ campaign[1] }}</p>
    <div class="" style="margin-bottom: 10px;text-align: right;">
        <a href="{{ url_for('company.call_campaign') }}" class="action-button"
            style="margin-bottom: 20px;">Back to Campaigns</a>
    </div>

    <table class="data-table">
        <thead>
            <tr>
                <th>#</th>
                <th>Contact Name</th>
                <th>Phone</th>
                <th>Status</th>
                <th>Attempts</th>
                <th>Error</th>
                <th>Transcript</th>
                <th>Audio</th>
            </tr>
        </thead>
        <tbody>
            {% for call in calls %}
            <tr>
                <td>{{ loop.index }}</td>
                <td>{{ call[1] }}</td>
                <td>{{ call[2] }}</td>
                <td>{{ call[3] }}</td>
                <td>{{ call[4] }}</td>
                <td>{{ call[5] or '' }}</td>
                <td>
                    <a href="{{ url_for('company.view_call_transcript', call_id=call[0]) }}">View</a>
                </td>
                <td style="display: flex;align-items: center;gap: 10px;">
                    {% if call[7] %}
                    <audio controls style="width: 180px;">
                        <source src="{{ url_for('static', filename=call[7].replace('static/', '')) }}" type="audio/mp3">
                        Your browser does not support the audio element.
                    </audio>
                    <a href="{{ url_for('static', filename=call[7].replace('static/', '')) }}" download>Download</a>
                    {% else %}
                    N/A
                    {% endif %}
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}