{% extends "base.html" %}

{% block title %}Conversations{% endblock %}

{% block content %}
<div class="dashboard-box">

    <div class="dashboard-title"><i class="fa-solid fa-comments"></i> Call logs</div>

    <table>
        <tr>
            <th>Lead Phone No.</th>
            <th>Lead Name</th>
            <th>Lead Email</th>
            <th>Call Status</th>
            <th>call Started</th>
            <th>Call Ended</th>
            <th>Lead Status</th>
            <th>Actions</th>
        </tr>
        {% for msg in messages %}
        <tr>
            <td>{{ msg.phone_number }}</td>
            <td>{{msg.lead_name}}</td>
            <td>{{msg.lead_email}}</td>
            <td>
                {% if msg.call_duration_seconds %}
                {{ msg.call_duration_seconds }} Sec.
                {% else %}
                N/A
                {% endif %}
            </td>
            <td>
                {% if msg.call_started_at %}
                {{ msg.call_started_at|date:"d-m-Y H:i A" }}
                {% else %}
                N/A
                {% endif %}
            </td>

            <td>
                {% if msg.call_ended_at %}
                {{ msg.call_ended_at|date:"d-m-Y H:i A" }}
                {% else %}
                N/A
                {% endif %}
            </td>
            <td>
                {{ msg.determined_status|default:"N/A" }}
            </td>

            <td>
                <span class="eye-icon" data-call-recording-url="{{ msg.call_recording_url|default:'N/A' }}"
                    data-call-summary="{{ msg.call_summary|default:'No summary' }}"
                    data-call-transcript="{{msg.call_transcript|default:'No transcript' }}"
                    data-vapi-call-id="{{msg.vapi_call_id|default:'No vapiCallid' }}"
                    data-schedule-meeting-time="{{ msg.schedule_meeting_time|default:'N/A' }}"
                    data-email="{{ msg.lead_email }}" data-duration="{{ msg.call_duration_seconds|default:'N/A' }}"
                    data-started="{{ msg.call_started_at|date:'d-m-Y H:i'|default:'N/A' }}"
                    data-ended="{{ msg.call_ended_at|date:'d-m-Y H:i'|default:'N/A' }}"
                    onclick="openDetailsFromData(this)">
                    &#128065;
                </span>

            </td>
        </tr>
        {% empty %}
        <tr>
            <td colspan="5" style="text-align:center;">No messages found.</td>
        </tr>
        {% endfor %}
    </table>

    <div class="pagination">
        {% if messages.has_previous %}
        <a href="?page=1">First</a>
        <a href="?page={{ messages.previous_page_number }}">Previous</a>
        {% else %}
        <span class="disabled">First</span>
        <span class="disabled">Previous</span>
        {% endif %}

        <span class="current">Page {{ messages.number }} of {{ messages.paginator.num_pages }}</span>

        {% if messages.has_next %}
        <a href="?page={{ messages.next_page_number }}">Next</a>
        <a href="?page={{ messages.paginator.num_pages }}">Last</a>
        {% else %}
        <span class="disabled">Next</span>
        <span class="disabled">Last</span>
        {% endif %}
    </div>
</div>

<!-- Modal HTML -->
<div id="detailsModal" class="modal">
    <div class="modal-content">
        <span class="close" onclick="closeModal()">&times;</span>
        <h2>Lead Details</h2>
        <p><strong>Call Url:</strong> <a id="call_recording_url" href="#" target="_blank"
                style="color: rgb(99, 99, 212); text-decoration: underline;"></a></p>
        <p><strong>Call Summary:</strong> <span id="callSummary"></span></p>
        <p><strong>Call Transcript:</strong><span id="callTranscript"></span></p>
        <p><strong>Vapi callid :</strong><span id="vapiCallid"></span></p>
        <p><strong>schedule meetingtime : </strong><span id="schedulemeetingtime"></span></p>
        <p><strong>Email:</strong> <span id="modalEmail"></span></p>
        <p><strong>Call Duration:</strong> <span id="modalDuration"></span></p>
        <p><strong>Call Started:</strong> <span id="modalStarted"></span></p>
        <p><strong>Call Ended:</strong> <span id="modalEnded"></span></p>
        <!-- <p><strong>Details:</strong> <span id="modalDetails"></span></p> -->
    </div>
</div>


<!-- Modal CSS -->
<style>
    .modal {
        display: none;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.5);
    }

    .eye-icon {
        cursor: pointer;
    }

    .modal-content {
        background-color: #fff;
        margin: 10% auto;
        padding: 20px;
        border-radius: 5px;
        width: 50%;
        max-width: 500px;
    }

    .close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
        cursor: pointer;
    }

    .close:hover {
        color: black;
    }
</style>

<!-- Modal JavaScript -->
<script>function openDetailsFromData(elem) {
        const url = elem.dataset.callRecordingUrl;
        const link = document.getElementById('call_recording_url');

        if (url && url !== "N/A") {
            
            link.href = url;
            link.innerText = "Click to open recording";
            link.style.color = "blue";
            link.style.textDecoration = "underline";
        } else {
            link.removeAttribute("href");
            link.innerText = "N/A";
            link.style.color = "black";
            link.style.textDecoration = "none";
        }

        // document.getElementById('call_recording_url').innerText = elem.dataset.callRecordingUrl;
        document.getElementById('callSummary').innerText = elem.dataset.callSummary;
        document.getElementById('callTranscript').innerText = elem.dataset.callTranscript;
        document.getElementById('vapiCallid').innerText = elem.dataset.vapiCallId;
        document.getElementById('schedulemeetingtime').innerText = elem.dataset.scheduleMeetingTime;
        document.getElementById('modalEmail').innerText = elem.dataset.email;
        document.getElementById('modalDuration').innerText = elem.dataset.duration;
        document.getElementById('modalStarted').innerText = elem.dataset.started;
        document.getElementById('modalEnded').innerText = elem.dataset.ended;
        // document.getElementById('modalDetails').innerText = elem.dataset.details;

        document.getElementById('detailsModal').style.display = "block";
    }


    function closeModal() {
        document.getElementById('detailsModal').style.display = "none";
    }

    // Close modal if user clicks outside of modal content
    window.onclick = function (event) {
        const modal = document.getElementById('detailsModal');
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }
</script>

{% endblock %}