<?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"/>

    <!-- Parameters -->

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

    <xsl:template match="/">
    
        <script src="js/{$PAGE-NAME}.js?version={$VERSION}"/>   
        <script src="js/ckeditor.js?version={$VERSION}"/>   

        <div class="{$PAGE-NAME}">
      
            <div class="card">
        
                <div class="card-header bg-primary text-white p-1 ps-3">
                    <i class="bi bi-question-circle me-2"/>
                    <xsl:value-of select="$PAGE-TITLE"/>
                    for
                    <xsl:value-of select="//users/record/user_client_name"/>
                    /
                    <xsl:value-of select="//users/record/user_name"/>
          
                </div>
        
                <div class="card-body">
          
                    <form action="" name="{$PAGE-NAME}" method="post" id="{$PAGE-NAME}">

                        <input type="hidden" name="action" value="SupportTickets.startSupportTicket"/>
                        <input type="hidden" name="step"   value="send"/>
            
                        <div class="row">

                            <div class="col-lg-5 mb-3">
                                <label class="form-label" for="supportticket_subject">Subject</label>
                                <input type="text" class="form-control form-control-sm" name="supportticket_subject" id="supportticket_subject" maxlength="100" autocomplete="off" autofocus="autofocus"/>
                            </div>
                            
                        </div>
                        
                        <div class="row">
                            <div class="col-lg-5 mb-3">
                                <label class="form-label" for="supportticket_category">Category</label>
                                <select class="form-control form-control-sm" name="supportticket_category" id="supportticket_category" size="1">
                                    <xsl:call-template name="dropdowns">
                                        <xsl:with-param name="dropdown-name" select="'supportticket_catagories'"/>
                                    </xsl:call-template>
                                </select>
                            </div>
                        </div>
                        
                        <div class="row other_catagory d-none">
                            <div class="col-lg-5 mb-3">
                                <label class="form-label" for="supportticket_category_other">
                                    Other Category
                                </label>
                                <input type="text" class="form-control form-control-sm" name="supportticket_category_other" id="supportticket_category_other" maxlength="100" autocomplete="off" />
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-lg-10 mb-3">
                                <label class="form-label" for="supportticket_message">Message</label>
                                <textarea class="form-control form-control-sm" name="supportticket_message" id="supportticket_message"></textarea>
                            </div>
                        </div>
                        
                    </form>

                    <div class="buttons mt-1 mb-2">
                        <button type="button" class="btn btn-sm btn-primary me-2 btnCancel">
                            <i class="bi bi-box-arrow-left me-2"/>Cancel</button>
                        <button type="button" class="btn btn-sm btn-primary me-2 btnSubmit">
                            <i class="bi bi-save me-2"/>Submit</button>
                    </div>
          
                    <div id="ticketSending" class="d-none mt-2">
                        <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
                        Sending ticket…
                    </div>

          
                </div>
        
            </div>
      
        </div>
          
    </xsl:template>

    <!-- Template for Dropdowns -->

    <xsl:template name="dropdowns">
        <xsl:param name="dropdown-name"/>

        <option value="">Choose...</option>
        
        <xsl:for-each select="/XML/dropdowns/record[dropdowntype_name = $dropdown-name]">
            <option value="{dropdown_serial}" data-tokens="{dropdown_value}">
                <xsl:value-of select="dropdown_value"/>
            </option>
        </xsl:for-each>
    </xsl:template>

</xsl:stylesheet>
