#{include file="../Common/Header.html"}
<div class="uc-main uc-ticket-page uc-ticket-create-page">
    <div class="uc-ticket-create-layout">
        <form class="uc-card uc-ticket-form" autocomplete="off" data-acg-prevent>
            <div class="uc-ticket-form__section">
                <div class="uc-ticket-form__heading">
                    <span class="uc-ticket-step">1</span>
                    <div><strong>#{t("选择服务类型")}</strong></div>
                </div>
                <div class="uc-ticket-type-grid" role="radiogroup" aria-label="#{t('工单类型')}">
                    <button type="button" class="uc-ticket-type is-active" data-ticket-type="0" role="radio" aria-checked="true">
                        <span class="uc-ticket-type__icon"><span class="material-icons-outlined">question_answer</span></span>
                        <span class="uc-ticket-type__copy"><strong>#{t("售前咨询")}</strong><small>#{t("购买、商品功能或使用方式等疑问")}</small></span>
                        <span class="uc-ticket-choice"><span class="material-icons-outlined">check</span></span>
                    </button>
                    <button type="button" class="uc-ticket-type" data-ticket-type="1" role="radio" aria-checked="false">
                        <span class="uc-ticket-type__icon"><span class="material-icons-outlined">handyman</span></span>
                        <span class="uc-ticket-type__copy"><strong>#{t("售后支持")}</strong><small>#{t("已购商品出现异常，需要协助处理")}</small></span>
                        <span class="uc-ticket-choice"><span class="material-icons-outlined">check</span></span>
                    </button>
                </div>
            </div>

            <div class="uc-ticket-form__section">
                <div class="uc-ticket-form__heading">
                    <span class="uc-ticket-step">2</span>
                    <div><strong class="uc-ticket-relation-title">#{t("关联商品")}</strong><small class="uc-ticket-relation-sub">#{t("可选，关联后客服能更快理解你的问题")}</small></div>
                </div>

                <div class="uc-ticket-relation uc-ticket-relation--commodity">
                    <label class="uc-ticket-field-label" for="ticket-commodity">#{t("相关商品")} <em>#{t("选填")}</em></label>
                    <select id="ticket-commodity" name="commodity_id" aria-label="#{t('搜索相关商品')}"></select>
                    <p class="uc-ticket-field-help"><span class="material-icons-outlined">search</span>#{t("输入商品名称即可搜索当前店铺中的商品")}</p>
                </div>

                <div class="uc-ticket-relation uc-ticket-relation--order" hidden>
                    <div class="uc-ticket-mode-switch" role="tablist" aria-label="#{t('订单填写方式')}">
                        <button type="button" class="is-active" data-order-mode="account" role="tab" aria-selected="true"><span class="material-icons-outlined">receipt_long</span>#{t("从购买记录选择")}</button>
                        <button type="button" data-order-mode="manual" role="tab" aria-selected="false"><span class="material-icons-outlined">keyboard</span>#{t("手动输入订单号")}</button>
                    </div>
                    <div class="uc-ticket-order-panel" data-order-panel="account">
                        <label class="uc-ticket-field-label" for="ticket-order">#{t("相关订单")} <b>*</b></label>
                        <select id="ticket-order" name="order_id" aria-label="#{t('搜索本人订单')}"></select>
                        <div class="uc-ticket-order-picked" hidden></div>
                        <p class="uc-ticket-field-help"><span class="material-icons-outlined">verified_user</span>#{t("这里只会展示当前账号已经支付的订单")}</p>
                    </div>
                    <div class="uc-ticket-order-panel" data-order-panel="manual" hidden>
                        <label class="uc-ticket-float-field">
                            <input type="text" name="trade_no" maxlength="32" placeholder=" " inputmode="numeric">
                            <span>#{t("订单号")} <b>*</b></span>
                        </label>
                        <p class="uc-ticket-field-help"><span class="material-icons-outlined">info</span>#{t("仅用于游客购买的订单；其他注册会员的订单无法跨账号提交")}</p>
                    </div>

                    <div class="uc-ticket-proof">
                        <div class="uc-ticket-field-label">#{t("购买凭证")} <b>*</b><em>#{t("单张图片")}</em></div>
                        <input type="hidden" name="proof_upload_id">
                        <input type="hidden" name="proof_path">
                        <button type="button" class="uc-ticket-proof__drop">
                            <span class="uc-ticket-proof__icon"><span class="material-icons-outlined">add_photo_alternate</span></span>
                            <span class="uc-ticket-proof__copy"><strong>#{t("上传购买凭证")}</strong><small>#{t("支持 JPG、PNG、WebP，文件不超过 10 MB")}</small></span>
                            <span class="uc-ticket-proof__action">#{t("选择图片")}</span>
                        </button>
                        <div class="uc-ticket-proof__preview" hidden>
                            <img src="" alt="#{t('购买凭证预览')}">
                            <div><strong>#{t("凭证已添加")}</strong><small class="uc-ticket-proof__name"></small></div>
                            <button type="button" class="uc-ticket-proof__remove" aria-label="#{t('移除购买凭证')}"><span class="material-icons-outlined">delete</span></button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="uc-ticket-form__section">
                <div class="uc-ticket-form__heading">
                    <span class="uc-ticket-step">3</span>
                    <div><strong>#{t("说明具体情况")}</strong><small>#{t("标题简明，正文尽量包含现象、期望结果和已尝试的方法")}</small></div>
                </div>

                <div class="uc-ticket-priority-block">
                    <span class="uc-ticket-field-label">#{t("优先级")} <b>*</b></span>
                    <div class="uc-ticket-priorities" role="radiogroup" aria-label="#{t('工单优先级')}">
                        <button type="button" data-priority="0" role="radio" aria-checked="false"><span class="uc-ticket-priority-dot uc-ticket-priority-dot--low"></span><span><strong>#{t("低")}</strong><small>#{t("一般咨询")}</small></span></button>
                        <button type="button" class="is-active" data-priority="1" role="radio" aria-checked="true"><span class="uc-ticket-priority-dot uc-ticket-priority-dot--medium"></span><span><strong>#{t("中")}</strong><small>#{t("影响正常使用")}</small></span></button>
                        <button type="button" data-priority="2" role="radio" aria-checked="false"><span class="uc-ticket-priority-dot uc-ticket-priority-dot--high"></span><span><strong>#{t("高")}</strong><small>#{t("购买或使用受阻")}</small></span></button>
                    </div>
                </div>

                <label class="uc-ticket-float-field">
                    <input type="text" name="title" maxlength="100" placeholder=" ">
                    <span>#{t("工单标题")} <b>*</b></span>
                    <small class="uc-ticket-char-count"><i>0</i>/100</small>
                </label>

                <div class="uc-ticket-editor-field">
                    <div class="uc-ticket-field-label">#{t("问题详情")} <b>*</b><em>#{t("支持 Markdown 与图片")}</em></div>
                    <div id="ticket-content-editor"></div>
                </div>
            </div>

            <aside class="uc-ticket-create-aside">
            <section class="uc-ticket-summary">
                <div class="uc-ticket-summary__head">
                    <span class="material-icons-outlined">fact_check</span>
                    <strong>#{t("提交前确认")}</strong>
                    <span class="uc-ticket-summary__live"><i></i>#{t("实时更新")}</span>
                </div>
                <div class="uc-ticket-summary__rows">
                    <div class="uc-ticket-summary__type">
                        <span>#{t("工单类型")}</span>
                        <div><span class="material-icons-outlined">question_answer</span><strong>#{t("售前咨询")}</strong></div>
                    </div>
                    <div><span>#{t("优先级")}</span><strong data-summary="priority">#{t("中")}</strong></div>
                    <div><span>#{t("关联内容")}</span><strong data-summary="relation">#{t("尚未选择")}</strong></div>
                    <div><span>#{t("购买凭证")}</span><strong data-summary="proof">#{t("无需上传")}</strong></div>
                </div>
            </section>
            </aside>

            <div class="uc-ticket-submit-row">
                <span><span class="material-icons-outlined">shield</span>#{t("工单由管理员处理，请勿提交密码或完整卡密")}</span>
                <button type="button" class="uc-ticket-submit"><span class="material-icons-outlined">post_add</span><span>#{t("提交工单")}</span></button>
            </div>
        </form>
    </div>
</div>

#{ready("/assets/user/controller/user/ticket.create.js")}
#{include file="../Common/Footer.html"}