<style>
    .person-block {
        margin-bottom: 30px;
        border-bottom: 1px solid #ccc;
        padding-bottom: 20px;
    }

    .person-name {
        color: #333;
        border-bottom: 2px solid #df6336;
        padding-bottom: 5px;
    }

    table.schedule-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 10px;
    }

    table.schedule-table th, table.schedule-table td {
        text-align: left;
        padding: 8px;
        border-bottom: 1px solid #ccc;
    }

    table.schedule-table thead {
        background-color: #f2f2f2;
    }

    .no-data {
        color: #666;
        font-style: italic;
    }
    
    .response-cell {
        vertical-align: middle !important;
        height: 100%;
        padding: 10px;
    }
    
    .response-buttons {
        display: inline-flex;
        gap: 8px;
        align-items: center;       /* vertically center buttons */
        justify-content: flex-start; /* left-align buttons */
    }

    @media (max-width: 600px) {
        .schedule-table th, .schedule-table td {
            padding: 6px 4px;
            font-size: 14px;
        }
    
        .btn.btn-xs {
            font-size: 12px;
            padding: 4px 8px;
        }
    
        .person-name {
            font-size: 18px;
        }
    
        #popupContent {
            width: 95%;
            padding: 15px;
        }
        
    }
</style>

{% person where:'PrimaryFamilyId=={{ CurrentPerson.PrimaryFamilyId }} && Id!={{ CurrentPerson.Id }}' %}
    {% assign familyScheduledCount = 0 %}
    {% for p in personItems %}
        {% sql %}
            WITH servingTable AS (
                SELECT g.Name AS 'TeamName',
                    ao.OccurrenceDate,
                    sch.Name AS 'ServiceTime',
                    loc.Name AS 'Position',
                    (CASE a.RSVP 
                        WHEN 0 THEN 'Declined' 
                        WHEN 1 THEN 'Accepted' 
                        WHEN 3 THEN 'Pending' 
                    END) AS 'InviteStatus',
                    CAST(a.CreatedDateTime AS DATE) AS 'ScheduledDate',
                    (CASE a.ScheduleConfirmationSent 
                        WHEN 1 THEN 'Yes'
                        ELSE 'No'
                    END) AS 'ConfirmationSent',
                    a.[Guid] AS 'AttendanceGuid'
                FROM AttendanceOccurrence ao
                JOIN Attendance a ON a.OccurrenceId = ao.Id
                JOIN Schedule sch ON sch.Id = ao.ScheduleId
                JOIN [Location] loc ON loc.Id = ao.LocationId
                JOIN PersonAlias pa ON pa.Id = a.PersonAliasId
                JOIN Person p ON p.Id = pa.PersonId
                JOIN [Group] g ON g.Id = ao.GroupId 
                WHERE (g.GroupTypeId = 23 OR g.GroupTypeId = 65)
                    AND p.Id = {{ p.Id }}
                    AND a.RequestedToAttend = 1
            )

            SELECT 
                TeamName,
                OccurrenceDate,
                ServiceTime,
                Position,
                InviteStatus,
                ScheduledDate,
                ConfirmationSent,
                AttendanceGuid
            FROM servingTable
            WHERE OccurrenceDate >= GETDATE()
            ORDER BY TeamName ASC, 
                OccurrenceDate ASC,
                CASE ServiceTime
                    WHEN 'Sunday 8:30am' THEN 1
                    WHEN 'Sunday 10:00am' THEN 2
                    WHEN 'Sunday 11:30am' THEN 3
                    ELSE 9
                END ASC
        {% endsql %}

        {% if results != empty %}
            {% assign familyScheduledCount = familyScheduledCount | Plus: 1 %}
            <div class="person-block">
                <h3 class="person-name">{{ p.FullName }}</h3>
                <div style="overflow-x: auto;">
                    <table class="schedule-table">
                        <thead>
                            <tr>
                                <th></th>
                                <th>Invite Status</th>
                                <th>Team</th>
                                <th>Service Time</th>
                                <th>Date</th>
                                <th>Position</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for row in results %}
                            <tr>
                                <td class="response-cell">
                                    <div class="response-buttons">
                                        {% if row.InviteStatus == 'Pending' or row.InviteStatus == 'Declined' %}
                                        <a href="#" class="btn btn-xs btn-success" onclick="openPopup(this); return false;" data-url="/page/1258?PersonScheduled={{p.PrimaryAlias.Guid}}&PersonAccepting={{CurrentPerson.PrimaryAlias.Guid}}&Attendance={{row.AttendanceGuid}}">Accept</a>
                                        {% endif %}
                                        {% if row.InviteStatus == 'Pending' or row.InviteStatus == 'Accepted' %}
                                            <a href="#" class="btn btn-xs btn-danger" onclick="openPopup(this); return false;" data-url="/page/1259?PersonScheduled={{p.PrimaryAlias.Guid}}&PersonDeclining={{CurrentPerson.PrimaryAlias.Guid}}&Attendance={{row.AttendanceGuid}}">Decline</a>
                                        {% endif %}
                                    </div>
                                </td>
                                {% if row.InviteStatus == 'Accepted' %}
                                <td><span class='label label-success' >{{ row.InviteStatus }}</span></td>
                                {% elseif row.InviteStatus == 'Pending' %}
                                <td><span class='label label-warning' >{{ row.InviteStatus }}</span></td>
                                {% elseif row.InviteStatus == 'Declined' %}
                                <td><span class='label label-danger' >{{ row.InviteStatus }}</span></td>
                                {% endif %}
                                <td>{{ row.TeamName }}</td>
                                <td>{{ row.ServiceTime | AsString }}</td>
                                <td>{{ row.OccurrenceDate | Date:'M/d/yyyy' }}</td>
                                <td>{{ row.Position }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        {% endif %}
    {% endfor %}
    {% if familyScheduledCount == 0 %}
        <div class="alert alert-warning">
            You have no family members currently scheduled to serve in the future.
        </div>
    {% endif %}
{% endperson %}

<style>
#popupModal {
    display: none;
    position: fixed;
    z-index: 9999;
    bottom: 0;
    left: 0;
    width: 100%;
    pointer-events: none; /* so clicks outside are ignored */
}

#popupContent {
    position: relative;
    background: #fff;
    width: 90%;
    max-width: 400px;
    margin: auto;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
    transform: translateY(100vh);
    transition: transform 0.3s ease-in-out;
    pointer-events: auto;
}

#popupModal.show #popupContent {
    transform: translateY(-50vh); /* Pops to center */
}

#popupFrame {
    width: 100%;
    height: 150px;
    border: none;
}

#popupClose {
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 20px;
    font-weight: bold;
    color: #999;
    cursor: pointer;
}

@media (max-width: 600px) {
    #popupFrame {
        height: 200px;
    }

    #popupModal.show #popupContent {
        transform: translateY(-40vh); /* less vertical shift for smaller screen */
    }
}
</style>

<div id="popupModal">
    <div id="popupContent">
        <span id="popupClose" onclick="closePopup()">&times;</span>
        <iframe id="popupFrame" src=""></iframe>
    </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
    window.openPopup = function(link) {
        var url = link.getAttribute('data-url');
        document.getElementById('popupFrame').src = url;
        var modal = document.getElementById('popupModal');
        modal.style.display = 'block';
        setTimeout(() => modal.classList.add('show'), 10);
    };

    window.closePopup = function() {
        var modal = document.getElementById('popupModal');
        modal.classList.remove('show');
        setTimeout(() => {
            modal.style.display = 'none';
            document.getElementById('popupFrame').src = '';
            location.reload(); // ✅ This reloads the page after popup closes
        }, 300);
    };
});
</script>