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

{% block title %}Company Meetings{% endblock %}
{% block extra_css %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.css" />
<style>
    #calendar {
        /* max-width: 900px; */
        margin: 0 auto;
    }

    /* Custom Modal Styles */
    .custom-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);
    }

    .custom-modal-content {
        background-color: #fefefe;
        margin: 15% auto;
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
        max-width: 500px;
        border-radius: 8px;
    }

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

    .close:hover,
    .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

    #meetingDetails {
        line-height: 25px
    }
</style>
{% endblock %}
{% block content %}
<div id="calendar"></div>

<!-- Custom Modal -->
<div id="meetingModal" class="custom-modal">
    <div class="custom-modal-content">
        <span class="close">&times;</span>
        <h3>Meeting Details</h3>
        <p id="meetingDetails"></p>
    </div>
</div>
{% endblock %}
{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var calendarEl = document.getElementById('calendar');
        var modal = document.getElementById('meetingModal');
        var span = document.getElementsByClassName('close')[0];

        if (calendarEl) {
            var calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                events: [
                    {% for meeting in meetings %}
                    {
                    title: 'Meeting with {{ meeting[1] }}',
                    start: '{{ meeting[2] }}T{{ meeting[3] }}',
                    extendedProps: {
                        customerEmail: '{{ meeting[1] }}'
                    }
                },
                {% endfor %}
                ],
        eventClick: function(info) {
            var details = 'Meeting with ' + info.event.extendedProps.customerEmail + '<br>' +
                '<strong>Date</strong>: ' + info.event.start.toLocaleDateString() + '<br>' +
                '<strong>Time</strong>: ' + info.event.start.toLocaleTimeString();
            document.getElementById('meetingDetails').innerHTML = details;
            modal.style.display = 'block';
        }
    });
    calendar.render();
        }

    // Close the modal
    span.onclick = function () {
        modal.style.display = 'none';
    }
    window.onclick = function (event) {
        if (event.target == modal) {
            modal.style.display = 'none';
        }
    }
    });
</script>
{% endblock %}