<?xml version="1.0" encoding="UTF-8"?>

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
    <xsl:output method="html" encoding="utf-8" indent="yes"/>

    <xsl:param name="VERSION">1.0</xsl:param>
    <xsl:param name="PAGE-TITLE">Support Ticket Summary</xsl:param>
    <xsl:param name="PAGE-NAME">supportTicketSummary</xsl:param>

    <xsl:template match="/">

        <script src="js/{$PAGE-NAME}.js?version={$VERSION}"/>

        <!-- iMessage-ish chat CSS -->
        <style type="text/css">
            .ticket-chat {
            background: #f5f5f7;
            border: 1px solid rgba(0,0,0,.1);
            border-radius: 1rem;
            overflow: hidden;
            }
            .ticket-chat-header {
            background: #fff;
            border-bottom: 1px solid rgba(0,0,0,.08);
            }
            .ticket-chat-body {
            height: 520px;
            overflow-y: auto;
            padding: 1rem;
            }
            .msg-row {
            display: flex;
            gap: .5rem;
            margin-bottom: .75rem;
            align-items: flex-end;
            }
            .msg-row.incoming { justify-content: flex-start; }
            .msg-row.outgoing { justify-content: flex-end; }

            .msg-avatar {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            object-fit: cover;
            flex: 0 0 34px;
            }
            .msg {
            max-width: 78%;
            display: flex;
            flex-direction: column;
            gap: .25rem;
            }
            .bubble {
            padding: .6rem .75rem;
            border-radius: 1.1rem;
            line-height: 1.25rem;
            word-wrap: break-word;
            box-shadow: 0 1px 0 rgba(0,0,0,.04);
            }
            .incoming .bubble {
            background: #fff;
            color: #111;
            border-bottom-left-radius: .45rem;
            }
            .outgoing .bubble {
            background: #0d6efd;
            color: #fff;
            border-bottom-right-radius: .45rem;
            }
            .msg-meta {
            font-size: .75rem;
            color: #6c757d;
            }
            .outgoing .msg-meta { text-align: right; }

            .chat-divider {
            display: flex;
            align-items: center;
            gap: .75rem;
            margin: 1.25rem 0;
            color: #6c757d;
            font-size: .75rem;
            }
            .chat-divider:before,
            .chat-divider:after {
            content: "";
            flex: 1;
            height: 1px;
            background: rgba(0,0,0,.10);
            }
        </style>

        <div class="{$PAGE-NAME}">
            <div class="card">
                <div class="card-header bg-primary text-white p-1 ps-3">
                    <i class="bi bi-person me-2" aria-hidden="true"/>
                    <xsl:value-of select="$PAGE-TITLE"/>
                </div>

                <div class="card-body pb-0">

                    <!-- Details -->
                    <div class="card card-header rounded p-0 ms-0 me-0 mb-3">
                        <div class="card-body p-2">
                            <div class="row fs-875 lh-sm">
                                <div class="col-lg-6">
                                    <div class="row">
                                        <div class="col-3 fw-bold">Category:</div>
                                        <div class="col-9">
                                            <xsl:value-of select="//supporttickets/record/supportticket_catagory_verbose"/>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-3 fw-bold">Subject:</div>
                                        <div class="col-9">
                                            <xsl:value-of select="//supporttickets/record/supportticket_subject"/>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-6">
                                    <div class="row">
                                        <div class="col-3 fw-bold">Created:</div>
                                        <div class="col-9">
                                            <xsl:value-of select="//supporttickets/record/supportticket_created"/>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-3 fw-bold">Created By:</div>
                                        <div class="col-9">
                                            <xsl:value-of select="//supporttickets/record/supportticket_creator"/>
                                            |
                                            <xsl:value-of select="//user/record/user_client_name"/>
                                        </div>
                                    </div>

                                    <div class="row align-items-baseline mt-1">
                                        <div class="col-3 fw-bold">Status:</div>
                                        <div class="col-3">
                                            <select class="form-select form-select-sm" name="supportticketactive" id="supportticketactive" size="1">
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <hr class="mb-2"/>

                    <!-- Action Buttons -->
                    <div class="buttons mt-1 mb-1">
                        <button type="button" class="btn btn-sm btn-primary me-1 mb-1 btnDone">
                            <i class="bi bi-box-arrow-left me-2"/>Done</button>
                        <button type="button" class="btn btn-sm btn-primary me-1 mb-1 btnPrint">
                            <i class="bi bi-printer me-2"/>Print</button>
                    </div>

                    <hr class="mt-1 mb-3"/>

                    <!-- Tabs -->
                    <div class="row">
                        <div class="col-12">
                            <div class="nav nav-tabs" id="nav-tabs" role="tablist">
                                <a class="nav-item nav-link active" id="tab-Conversation" data-bs-toggle="tab" href="#pane-Conversation" role="tab" data-tab="Conversation" aria-controls="st-Conversation">
                                    <i class="bi bi-pen me-1"/>Conversation</a>
                            </div>
                        </div>
                    </div>

                    <!-- Tab Content -->
                    <div class="tab-content mb-3" id="tab-content">

                        <!-- Conversation -->
                        <div class="tab-pane show active" id="pane-Conversation" role="tabpanel" aria-labelledby="tab-Conversation">

                            <div class="card mb-0 mt-3">
                                <div class="card-body pt-2 pb-2">

                                    <xsl:choose>

                                        <!-- NOTE: you had count(//supporttickets/record) here.
                                        That’s the ticket itself, not the conversation.
                                        This checks conversation messages. Change node if needed. -->
                                        <xsl:when test="count(//supportticketcomments/record) = 0">
                                            <div class="col fs-6 text-danger fw-bold fst-italic mt-1 mb-1">
                                                <xsl:text>There are no Conversation....</xsl:text>
                                            </div>
                                        </xsl:when>

                                        <xsl:otherwise>

                                            <!-- Chat container -->
                                            <div class="ticket-chat">

                                                <!-- Optional header inside tab -->
                                                <div class="ticket-chat-header px-3 py-2">
                                                    <div class="d-flex align-items-center justify-content-between">
                                                        <div class="d-flex align-items-center gap-2">
                                                            <i class="bi bi-chat-dots text-primary fs-5"></i>
                                                            <div>
                                                                <div class="fw-semibold">Conversation</div>
                                                                <div class="small text-muted">
                                                                    <xsl:value-of select="//supporttickets/record/supportticket_subject"/>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <span class="badge bg-primary-subtle text-primary border border-primary-subtle">
                                                            Ticket
                                                        </span>
                                                    </div>
                                                </div>

                                                <!-- Transcript -->
                                                <div class="ticket-chat-body">

                                                    <div class="chat-divider">Messages</div>

                                                    <!-- Loop messages (oldest -> newest). Adjust sort fields as needed -->
                                                    <xsl:for-each select="//supportticketcomments/record">
                                                        <xsl:sort select="comment_created" data-type="text" order="ascending"/>

                                                        <!-- Determine incoming/outgoing -->
                                                        <xsl:variable name="isOutgoing">
                                                            <xsl:choose>
                                                                <xsl:when test="comment_creator_type = 'STAFF'">1</xsl:when>
                                                                <xsl:otherwise>0</xsl:otherwise>
                                                            </xsl:choose>
                                                        </xsl:variable>

                                                        <xsl:choose>
                                                            <!-- OUTGOING (you/support) -->
                                                            <xsl:when test="$isOutgoing = 1">
                                                                <div class="msg-row outgoing">
                                                                    <div class="msg">
                                                                        <div class="bubble">
                                                                            <xsl:value-of select="comment_message"/>
                                                                        </div>
                                                                        <div class="msg-meta">
                                                                            <xsl:text>You • </xsl:text>
                                                                            <xsl:value-of select="comment_created_verbose"/>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </xsl:when>

                                                            <!-- INCOMING (customer) -->
                                                            <xsl:otherwise>
                                                                <div class="msg-row incoming">
                                                                    <!-- You can swap this to a real avatar field if you store it -->
                                                                    <img class="msg-avatar" src="assets/img/person/person-f-7.webp" alt="Customer"/>
                                                                    <div class="msg">
                                                                        <div class="bubble">
                                                                            <xsl:value-of select="comment_message"/>
                                                                        </div>
                                                                        <div class="msg-meta">
                                                                            <xsl:value-of select="comment_creator_name"/>
                                                                            <xsl:text> • </xsl:text>
                                                                            <xsl:value-of select="comment_created_verbose"/>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </xsl:otherwise>
                                                        </xsl:choose>

                                                    </xsl:for-each>

                                                </div>
                                            </div>

                                        </xsl:otherwise>

                                    </xsl:choose>

                                    <div class="buttons mt-2 mb-1">
                                        <button type="button" class="btn btn-sm btn-primary mt-2 me-1 mb-1 btnAddComment">
                                            <i class="bi bi-plus-lg me-2"/>Add Comment</button>
                                    </div>

                                </div>
                            </div>

                        </div>  <!-- Conversation -->
                    </div>  <!-- Tab Content -->
                </div>
            </div>
        </div>

        <!-- Form to Print the Support Ticket Summary -->
        <form style="display:inline;" id="PrintSupportTicketSummaryForm" method="post" action="" target="PrintTab">
            <input type="hidden" name="action" value="print"/>
            <input type="hidden" name="report" value="Print_SupportTicketSummary"/>
            <input type="hidden" name="supportticketserial" value=""/>
        </form>

    </xsl:template>

    <!-- Template for Dropdowns -->
    <xsl:template name="dropdowns">
        <xsl:param name="dropdown-name"/>
        <xsl:param name="current-value"/>

        <option value="">Choose...</option>

        <xsl:for-each select="//dropdowns/record[dropdowntype_name = $dropdown-name]">
            <option value="{dropdown_serial}" data-tokens="{dropdown_value}">
                <xsl:if test="dropdown_serial = $current-value">
                    <xsl:attribute name="selected">selected</xsl:attribute>
                </xsl:if>
                <xsl:value-of select="dropdown_value"/>
            </option>
        </xsl:for-each>
    </xsl:template>

    <!-- Existing template kept as-is -->
    <xsl:template match="supportticketsubscriptions/record">
        <tr class="supportticketsubscription-row hoverable" data-supportticketsubscription-serial="{supportticketsubscription_serial}">
            <td class="subscription_title">
                <xsl:value-of select="concat(subscription_title, '-', subscription_description)"/>
            </td>
            <td class="supportticketsubscription_stop_date_verbose">
                <xsl:value-of select="supportticketsubscription_stop_date_verbose"/>
            </td>

            <xsl:choose>
                <xsl:when test="supportticketsubscription_status = 'EXPIRED'">
                    <td class="supportticketsubscription_status">
                        <span class="badge rounded-pill text-bg-danger">
                            <xsl:value-of select="supportticketsubscription_status"/>
                        </span>
                    </td>
                </xsl:when>
                <xsl:otherwise>
                    <td class="supportticketsubscription_status">
                        <span class="badge text-bg-success">
                            <xsl:value-of select="supportticketsubscription_status"/>
                        </span>
                    </td>
                </xsl:otherwise>
            </xsl:choose>
        </tr>
    </xsl:template>

</xsl:stylesheet>
