<div class="dashboard-support-request">
    <form method="post" action="{$smarty.server.PHP_SELF}?step=3" enctype="multipart/form-data" role="form" class="dashboard-support-request__layout">
        <section class="card dashboard-support-request__main">
            <div class="card-body extra-padding">
                <div class="dashboard-page-heading__title dashboard-page-heading__title--compact">
                    <span class="dashboard-page-heading__icon dashboard-page-heading__icon--mint">
                        <i class="far fa-headset"></i>
                    </span>
                    <div>
                        <h3 class="card-title">{lang key="createNewSupportRequest"}</h3>
                        <p class="dashboard-panel__copy">{lang key='supportticketsheader'}</p>
                    </div>
                </div>

                {if $errormessage}
                    {include file="$template/includes/alert.tpl" type="error" errorshtml=$errormessage}
                {/if}

                <div class="row">
                    <div class="form-group col-md-6">
                        <label for="inputName">{lang key='supportticketsclientname'}</label>
                        <div class="dashboard-support-request__verified-field">
                            <input type="text" name="name" id="inputName" value="{$name}" class="form-control{if $loggedin} disabled{/if}"{if $loggedin} disabled="disabled"{/if} />
                            <span class="dashboard-support-request__verified"><i class="far fa-check"></i></span>
                        </div>
                    </div>
                    <div class="form-group col-md-6">
                        <label for="inputEmail">{lang key='supportticketsclientemail'}</label>
                        <div class="dashboard-support-request__verified-field">
                            <input type="email" name="email" id="inputEmail" value="{$email}" class="form-control{if $loggedin} disabled{/if}"{if $loggedin} disabled="disabled"{/if} />
                            <span class="dashboard-support-request__verified"><i class="far fa-check"></i></span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group col-md-12">
                        <label for="inputSubject">{lang key='supportticketsticketsubject'}</label>
                        <input type="text" name="subject" id="inputSubject" value="{$subject}" class="form-control" />
                    </div>
                </div>
                <div class="row">
                    <div class="form-group col-md-4">
                        <label for="inputDepartment">{lang key='supportticketsdepartment'}</label>
                        <select name="deptid" id="inputDepartment" class="form-control" onchange="refreshCustomFields(this)">
                            {foreach $departments as $department}
                                <option value="{$department.id}"{if $department.id eq $deptid} selected="selected"{/if}>
                                    {$department.name}
                                </option>
                            {/foreach}
                        </select>
                    </div>
                    {if $relatedservices}
                        <div class="form-group col-md-4">
                            <label for="inputRelatedService">{lang key='relatedservice'}</label>
                            <select name="relatedservice" id="inputRelatedService" class="form-control">
                                <option value="">{lang key='none'}</option>
                                {foreach $relatedservices as $relatedservice}
                                    <option value="{$relatedservice.id}"{if $relatedservice.id eq $selectedservice} selected="selected"{/if}>
                                        {$relatedservice.name} ({$relatedservice.status})
                                    </option>
                                {/foreach}
                            </select>
                        </div>
                    {/if}
                    <div class="form-group col-md-4">
                        <label for="inputPriority">{lang key='supportticketspriority'}</label>
                        <select name="urgency" id="inputPriority" class="form-control">
                            <option value="High"{if $urgency eq "High"} selected="selected"{/if}>
                                {lang key='supportticketsticketurgencyhigh'}
                            </option>
                            <option value="Medium"{if $urgency eq "Medium" || !$urgency} selected="selected"{/if}>
                                {lang key='supportticketsticketurgencymedium'}
                            </option>
                            <option value="Low"{if $urgency eq "Low"} selected="selected"{/if}>
                                {lang key='supportticketsticketurgencylow'}
                            </option>
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label for="inputMessage">{lang key='contactmessage'}</label>
                    <textarea name="message" id="inputMessage" rows="12" class="form-control markdown-editor" data-auto-save-name="client_ticket_open">{$message}</textarea>
                </div>

                <div class="form-group">
                    <label for="inputAttachments">{lang key='supportticketsticketattachments'}</label>
                    <div class="dashboard-support-upload">
                        <div class="dashboard-support-upload__dropzone">
                            <span class="dashboard-support-upload__icon"><i class="fas fa-cloud-upload-alt"></i></span>
                            <div>
                                <strong>{lang key='chooseFile'}</strong>
                                <span>{lang key='or'} {lang key='browse'|default:{lang key='chooseFile'}}</span>
                                <small>{lang key='maxFileSize' fileSize="$uploadMaxFileSize"}</small>
                            </div>
                        </div>
                        <div class="input-group mb-1 attachment-group">
                            <div class="custom-file">
                                <label class="custom-file-label text-truncate" for="inputAttachment1" data-default="Choose file">
                                    {lang key='chooseFile'}
                                </label>
                                <input type="file" class="custom-file-input" name="attachments[]" id="inputAttachment1">
                            </div>
                            <div class="input-group-append">
                                <button class="btn btn-default" type="button" id="btnTicketAttachmentsAdd">
                                    <i class="fas fa-plus"></i>
                                    {lang key='addmore'}
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="file-upload w-hidden">
                        <div class="input-group mb-1 attachment-group">
                            <div class="custom-file">
                                <label class="custom-file-label text-truncate">
                                    {lang key='chooseFile'}
                                </label>
                                <input type="file" class="custom-file-input" name="attachments[]">
                            </div>
                        </div>
                    </div>
                    <div id="fileUploadsContainer"></div>
                    <div class="text-muted">
                        <small>{lang key='supportticketsallowedextensions'}: {$allowedfiletypes} ({lang key="maxFileSize" fileSize="$uploadMaxFileSize"})</small>
                    </div>
                </div>

                <div id="customFieldsContainer">
                    {include file="$template/supportticketsubmit-customfields.tpl"}
                </div>

                <div id="autoAnswerSuggestions" class="w-hidden"></div>

                <div class="text-center margin-bottom">
                    {include file="$template/includes/captcha.tpl"}
                </div>

                <p class="text-center">
                    <button type="submit" id="openTicketSubmit" class="btn btn-primary disable-on-click{$captcha->getButtonClass($captchaForm)}">
                        {lang key='supportticketsticketsubmit'}
                    </button>
                    <a href="supporttickets.php" class="btn btn-default">{lang key='cancel'}</a>
                </p>
            </div>
        </section>

        <aside class="dashboard-support-request__aside">
            <div class="dashboard-support-tip dashboard-support-tip--mint">
                <span class="dashboard-support-tip__icon"><i class="far fa-lightbulb-on"></i></span>
                <h4>{lang key='supportticketspagetitle'}</h4>
                <p>{lang key='supportticketsheader'}</p>
                <ul>
                    <li>{lang key='knowledgebasetitle'}</li>
                    <li>{lang key='supportticketsticketsubject'}</li>
                    <li>{lang key='supportticketspriority'}</li>
                    <li>{lang key='supportticketsticketattachments'}</li>
                </ul>
            </div>
            <div class="dashboard-support-tip dashboard-support-tip--amber">
                <span class="dashboard-support-tip__icon"><i class="far fa-clock"></i></span>
                <h4>{lang key='supportticketsstatusanswered'}</h4>
                <p>{lang key='supportticketsheader'}</p>
            </div>
        </aside>
    </form>
</div>

{if $kbsuggestions}
    <script>
        jQuery(document).ready(function() {
            getTicketSuggestions();
        });
    </script>
{/if}
