{% extends "user/base.html" %}

{% block title %}售后服务 - {{ config.SITE_NAME or '软件授权管理系统' }}{% endblock %}

{% block extra_css %}
<style>
    .ticket-form {
        background: #f8f9fa;
        border-radius: 10px;
        padding: 2rem;
    }
    
    .ticket-history {
        border-left: 3px solid #667eea;
    }
    
    .ticket-item {
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 1.5rem;
        margin-bottom: 1rem;
    }
    
    .ticket-status-open {
        background-color: #d1ecf1;
        border-color: #bee5eb;
    }
    
    .ticket-status-closed {
        background-color: #d4edda;
        border-color: #c3e6cb;
    }
    
    .emergency-contact {
        background: linear-gradient(135deg, #ff6b6b, #ee5a24);
        color: white;
        border-radius: 10px;
        padding: 2rem;
        text-align: center;
    }
</style>
{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="row">
        <div class="col-12">
            <h1 class="mb-4">售后服务</h1>
        </div>
    </div>

    <!-- 选项卡导航 -->
    <div class="row">
        <div class="col-12">
            <ul class="nav nav-tabs" id="serviceTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="ticket-tab" data-bs-toggle="tab" data-bs-target="#ticket-panel" type="button" role="tab">
                        <i class="fas fa-ticket-alt me-2"></i>工单查询
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="order-tab" data-bs-toggle="tab" data-bs-target="#order-panel" type="button" role="tab">
                        <i class="fas fa-file-invoice me-2"></i>订单查询
                    </button>
                </li>
            </ul>
        </div>
    </div>

    <!-- 选项卡内容 -->
    <div class="row">
        <div class="col-12">
            <div class="tab-content" id="serviceTabContent">
                <!-- 工单查询面板 -->
                <div class="tab-pane fade show active" id="ticket-panel" role="tabpanel">
                    <div class="row mt-3">
                        <!-- 紧急通道 -->
                        <div class="col-lg-4 mb-4">
                            <div class="emergency-contact">
                                <h3 class="mb-3">
                                    <i class="fas fa-exclamation-circle me-2"></i>
                                    紧急通道
                                </h3>
                                <p class="mb-4">遇到紧急问题？立即联系我们</p>
                                <button class="btn btn-light" data-bs-toggle="modal" data-bs-target="#wechatModal">
                                    <i class="fab fa-weixin me-2"></i>微信紧急联系
                                </button>
                            </div>
                        </div>

                        <!-- 工单提交表单 -->
                        <div class="col-lg-8 mb-4">
                            <div class="card shadow-sm">
                                <div class="card-header">
                                    <h5 class="mb-0">提交工单</h5>
                                </div>
                                <div class="card-body">
                                    <form id="ticketForm" class="ticket-form">
                                        <div class="mb-3">
                                            <label for="contactName" class="form-label">联系人姓名</label>
                                            <input type="text" class="form-control" id="contactName" required>
                                        </div>

                                        <div class="mb-3">
                                            <label for="contactPhone" class="form-label">联系电话</label>
                                            <input type="tel" class="form-control" id="contactPhone" required>
                                        </div>

                                        <div class="mb-3">
                                            <label for="contactEmail" class="form-label">联系邮箱</label>
                                            <input type="email" class="form-control" id="contactEmail" required>
                                        </div>

                                        <div class="mb-3">
                                            <label for="productSelect" class="form-label">相关产品</label>
                                            <select class="form-select" id="productSelect" required>
                                                <option value="">请选择相关产品</option>
                                                <option value="1">产品一</option>
                                                <option value="2">产品二</option>
                                                <option value="3">产品三</option>
                                            </select>
                                        </div>

                                        <div class="mb-3">
                                            <label for="ticketTitle" class="form-label">工单标题</label>
                                            <input type="text" class="form-control" id="ticketTitle" required>
                                        </div>

                                        <div class="mb-3">
                                            <label for="ticketContent" class="form-label">问题描述</label>
                                            <textarea class="form-control" id="ticketContent" rows="5" required></textarea>
                                        </div>

                                        <div class="mb-3">
                                            <label for="prioritySelect" class="form-label">优先级</label>
                                            <select class="form-select" id="prioritySelect">
                                                <option value="1">低</option>
                                                <option value="2" selected>中</option>
                                                <option value="3">高</option>
                                                <option value="4">紧急</option>
                                            </select>
                                        </div>

                                        <button type="submit" class="btn btn-primary w-100" id="submitTicketBtn">
                                            <i class="fas fa-paper-plane me-2"></i>提交工单
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 工单历史 -->
                    <div class="row">
                        <div class="col-12">
                            <div class="card shadow-sm">
                                <div class="card-header">
                                    <h5 class="mb-0">工单历史</h5>
                                </div>
                                <div class="card-body">
                                    <!-- 工单查询输入框 -->
                                    <div class="mb-3">
                                        <label for="ticketQueryPhone" class="form-label">手机号查询</label>
                                        <div class="input-group">
                                            <input type="tel" class="form-control" id="ticketQueryPhone" placeholder="请输入手机号查询工单历史">
                                            <button class="btn btn-outline-primary" type="button" id="queryTicketsBtn" onclick="queryTicketsHistory()">
                                                <i class="fas fa-search me-1"></i>查询
                                            </button>
                                        </div>
                                        <div class="form-text">输入手机号查询该手机号的所有工单记录</div>
                                    </div>

                                    <!-- 工单列表 -->
                                    <div id="ticketsContainer">
                                        <!-- 工单列表将通过JavaScript动态加载 -->
                                        <div class="text-center py-5">
                                            <i class="fas fa-info-circle fa-2x text-muted mb-3"></i>
                                            <h4 class="text-muted">请输入手机号查询工单历史</h4>
                                            <p class="text-muted">输入手机号后将显示该手机号的所有工单记录</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 订单查询面板 -->
                <div class="tab-pane fade" id="order-panel" role="tabpanel">
                    <div class="row mt-3">
                        <div class="col-12">
                            <div class="card shadow-sm">
                                <div class="card-header">
                                    <h5 class="mb-0">查询订单</h5>
                                </div>
                                <div class="card-body">
                                    <form id="orderQueryForm">
                                        <div class="row">
                                            <div class="col-md-7 mb-3">
                                                <label for="queryPhone" class="form-label">手机号</label>
                                                <input type="tel" class="form-control" id="queryPhone" placeholder="请输入手机号" required>
                                                <div class="form-text">输入手机号查询该手机号的所有订单</div>
                                            </div>
                                            <div class="col-md-3 mb-3 d-flex align-items-end">
                                                <button type="submit" class="btn btn-primary w-100" id="queryOrderBtn">
                                                    <i class="fas fa-search me-1"></i>查询所有订单
                                                </button>
                                            </div>
                                            <div class="col-md-2 mb-3 d-flex align-items-end">
                                                <button type="button" class="btn btn-outline-secondary w-100" id="clearOrderBtn" onclick="clearOrderQuery()">
                                                    <i class="fas fa-eraser me-1"></i>清空
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 订单查询结果 -->
                    <div class="row">
                        <div class="col-12">
                            <div id="orderResultContainer" class="mt-3">
                                <div class="text-center py-5">
                                    <i class="fas fa-info-circle fa-2x text-muted mb-3"></i>
                                    <h4 class="text-muted">请输入手机号查询订单</h4>
                                    <p class="text-muted">输入手机号后将显示该手机号的所有订单记录</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 微信二维码模态框 -->
<div class="modal fade" id="wechatModal" tabindex="-1" aria-labelledby="wechatModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="wechatModalLabel">紧急联系</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center">
                <p>扫码添加微信，快速响应紧急需求</p>
                <img src="/static/images/wechat-qrcode.jpg" alt="微信二维码" class="img-fluid mb-3" style="max-width: 200px;">
                <p class="text-muted small">微信ID: TaiYiSupport</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // 售后服务页面JavaScript
    document.addEventListener('DOMContentLoaded', function() {
        console.log('售后服务页面加载完成');
        
        // 初始化产品列表
        loadProducts();

        // 工单提交表单事件
        document.getElementById('ticketForm').addEventListener('submit', function(e) {
            e.preventDefault();
            submitTicket();
        });

        // 订单查询表单事件
        document.getElementById('orderQueryForm').addEventListener('submit', function(e) {
            e.preventDefault();
            queryOrder();
        });

        // 工单历史查询输入框回车事件
        document.getElementById('ticketQueryPhone').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                queryTicketsHistory();
            }
        });
    });
    
    // 提交工单
    function submitTicket() {
        const formData = {
            product_id: document.getElementById('productSelect').value,
            contact_person: document.getElementById('contactName').value.trim(),
            phone: document.getElementById('contactPhone').value.trim(),
            title: document.getElementById('ticketTitle').value.trim(),
            description: document.getElementById('ticketContent').value.trim(),
            priority: document.getElementById('prioritySelect').value
        };
        
        // 基础验证
        if (!formData.contact_person || !formData.phone || !formData.product_id || 
            !formData.title || !formData.description) {
            showNotification('请填写所有必填字段', 'warning');
            return;
        }
        
        // 验证手机号格式
        const phoneRegex = /^1[3-9]\d{9}$/;
        if (!phoneRegex.test(formData.phone)) {
            showNotification('请输入正确的手机号码', 'warning');
            return;
        }
        
        // 显示加载状态
        const submitBtn = document.getElementById('submitTicketBtn');
        const originalText = submitBtn.innerHTML;
        submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status"></span>提交中...';
        submitBtn.disabled = true;
        
        // 调用API提交工单
        apiRequest('/api/v1/user/tickets', {
            method: 'POST',
            body: JSON.stringify(formData)
        })
        .then(data => {
            if (data.success) {
                showNotification('工单提交成功！', 'success');
                document.getElementById('ticketForm').reset();
                // 工单提交成功后，如果工单查询框有手机号，则刷新工单历史
                const queryPhone = document.getElementById('ticketQueryPhone').value.trim();
                if (queryPhone) {
                    loadTickets(queryPhone);
                }
            } else {
                showNotification('工单提交失败: ' + data.message, 'error');
            }
        })
        .catch(error => {
            showNotification('工单提交失败，请稍后重试', 'error');
            console.error('提交工单失败:', error);
        })
        .finally(() => {
            submitBtn.innerHTML = originalText;
            submitBtn.disabled = false;
        });
    }
    
    // 加载工单历史（带手机号参数）
    function loadTickets(phone) {
        // 验证手机号格式
        const phoneRegex = /^1[3-9]\d{9}$/;
        if (!phoneRegex.test(phone)) {
            document.getElementById('ticketsContainer').innerHTML = `
                <div class="text-center py-5">
                    <i class="fas fa-exclamation-circle fa-2x text-warning mb-3"></i>
                    <h4 class="text-warning">手机号格式不正确</h4>
                    <p class="text-muted">请输入正确的11位手机号码</p>
                </div>
            `;
            return;
        }

        // 显示加载状态
        document.getElementById('ticketsContainer').innerHTML = `
            <div class="text-center py-5">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">加载中...</span>
                </div>
                <p class="mt-2">正在加载工单历史...</p>
            </div>
        `;

        // 调用API获取工单列表
        apiRequest(`/api/v1/user/tickets?phone=${phone}`)
            .then(data => {
                if (data.success) {
                    renderTickets(data.data);
                } else {
                    showNotification('加载工单历史失败: ' + data.message, 'error');
                }
            })
            .catch(error => {
                showNotification('加载工单历史失败，请稍后重试', 'error');
                console.error('加载工单历史失败:', error);
            });
    }

    // 查询工单历史（处理查询按钮点击）
    function queryTicketsHistory() {
        const phone = document.getElementById('ticketQueryPhone').value.trim();

        // 验证输入
        if (!phone) {
            showNotification('请输入手机号', 'warning');
            return;
        }

        // 验证手机号格式并加载工单
        loadTickets(phone);
    }
    
    // 渲染工单列表
    function renderTickets(tickets) {
        const container = document.getElementById('ticketsContainer');
        
        if (tickets.length === 0) {
            container.innerHTML = `
                <div class="text-center py-5">
                    <i class="fas fa-ticket-alt fa-3x text-muted mb-3"></i>
                    <h4 class="text-muted">暂无工单记录</h4>
                    <p class="text-muted">您还没有提交过工单</p>
                </div>
            `;
            return;
        }
        
        let ticketsHtml = '';
        tickets.forEach(ticket => {
            const statusClass = ticket.status === 1 ? 'ticket-status-open' : 'ticket-status-closed';
            const statusText = ticket.status === 1 ? '处理中' : '已关闭';
            const priorityText = ['未知', '低', '中', '高', '紧急'][ticket.priority] || '未知';
            
            ticketsHtml += `
                <div class="ticket-item ${statusClass}">
                    <div class="row">
                        <div class="col-md-9">
                            <h5 class="mb-2">${ticket.title}</h5>
                            <p class="mb-2">${ticket.description.substring(0, 100)}${ticket.description.length > 100 ? '...' : ''}</p>
                            <div class="d-flex flex-wrap gap-3 text-muted">
                                <small><i class="fas fa-calendar me-1"></i> ${formatDate(ticket.create_time)}</small>
                                <small><i class="fas fa-user me-1"></i> ${ticket.contact_person}</small>
                                <small><i class="fas fa-box me-1"></i> ${ticket.product_name || '未知产品'}</small>
                                <small><i class="fas fa-exclamation-circle me-1"></i> ${priorityText}</small>
                            </div>
                        </div>
                        <div class="col-md-3 text-md-end">
                            <span class="badge ${ticket.status === 1 ? 'bg-info' : 'bg-success'}">
                                ${statusText}
                            </span>
                            <div class="mt-2">
                                <button class="btn btn-sm btn-outline-primary" onclick="viewTicket('${ticket.ticket_number}')">
                                    <i class="fas fa-eye me-1"></i>查看
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            `;
        });
        
        container.innerHTML = ticketsHtml;
    }
    
    // 查看工单详情
    function viewTicket(ticketId) {
        showNotification('查看工单详情功能待实现', 'info');
        // 这里可以跳转到工单详情页面或显示模态框
    }
    
    // 加载产品列表
    function loadProducts() {
        // 调用API获取产品列表
        apiRequest('/api/v1/user/products')
            .then(data => {
                if (data.success) {
                    renderProducts(data.data.products || []);
                } else {
                    showNotification('加载产品列表失败: ' + data.message, 'error');
                }
            })
            .catch(error => {
                showNotification('加载产品列表失败，请稍后重试', 'error');
                console.error('加载产品列表失败:', error);
            });
    }
    
    // 渲染产品列表
    function renderProducts(products) {
        const select = document.getElementById('productSelect');
        
        // 清空现有选项（保留默认选项）
        select.innerHTML = '<option value="">请选择相关产品</option>';
        
        // 添加产品选项
        products.forEach(product => {
            const option = document.createElement('option');
            option.value = product.product_id;
            option.textContent = product.product_name;
            select.appendChild(option);
        });
    }
    
    // 移除之前的监听器，因为现在有了专门的工单查询输入框

    // 查询订单
    function queryOrder() {
        const phone = document.getElementById('queryPhone').value.trim();

        // 验证输入
        if (!phone) {
            showNotification('请输入手机号', 'warning');
            return;
        }

        // 验证手机号格式
        const phoneRegex = /^1[3-9]\d{9}$/;
        if (!phoneRegex.test(phone)) {
            showNotification('请输入正确的手机号码', 'warning');
            return;
        }

        // 显示加载状态
        const container = document.getElementById('orderResultContainer');
        container.innerHTML = `
            <div class="text-center py-5">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">加载中...</span>
                </div>
                <p class="mt-2">正在查询订单...</p>
            </div>
        `;

        // 调用API查询订单（通过手机号查询所有订单）
        apiRequest(`/api/v1/user/orders?phone=${phone}`)
            .then(data => {
                if (data.success) {
                    renderOrderList(data.data.orders);
                } else {
                    container.innerHTML = `
                        <div class="text-center py-5">
                            <i class="fas fa-times-circle fa-3x text-danger mb-3"></i>
                            <h4 class="text-danger">查询失败</h4>
                            <p class="text-muted">${data.message || '暂无订单记录'}</p>
                        </div>
                    `;
                }
            })
            .catch(error => {
                container.innerHTML = `
                    <div class="text-center py-5">
                        <i class="fas fa-exclamation-triangle fa-3x text-warning mb-3"></i>
                        <h4 class="text-warning">查询失败</h4>
                        <p class="text-muted">网络错误，请稍后重试</p>
                    </div>
                `;
                console.error('查询订单失败:', error);
            });
    }

    // 清空订单查询
    function clearOrderQuery() {
        document.getElementById('queryPhone').value = '';
        const container = document.getElementById('orderResultContainer');
        container.innerHTML = `
            <div class="text-center py-5">
                <i class="fas fa-info-circle fa-2x text-muted mb-3"></i>
                <h4 class="text-muted">请输入手机号查询订单</h4>
                <p class="text-muted">输入手机号后将显示该手机号的所有订单记录</p>
            </div>
        `;
    }

    // 渲染订单列表
    function renderOrderList(orders) {
        const container = document.getElementById('orderResultContainer');

        if (orders.length === 0) {
            container.innerHTML = `
                <div class="text-center py-5">
                    <i class="fas fa-file-invoice fa-3x text-muted mb-3"></i>
                    <h4 class="text-muted">暂无订单记录</h4>
                    <p class="text-muted">该手机号下暂无订单记录</p>
                </div>
            `;
            return;
        }

        const statusClass = {
            0: 'warning',
            1: 'success',
            2: 'danger',
            3: 'secondary'
        };
        const statusText = {
            0: '待支付',
            1: '已支付',
            2: '已取消',
            3: '已完成'
        };

        let ordersHtml = '';
        orders.forEach(order => {
            ordersHtml += `
                <div class="card shadow-sm mb-3">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-8">
                                <h5 class="card-title">
                                    <i class="fas fa-file-invoice me-2"></i>
                                    ${order.order_number}
                                    <span class="badge bg-${statusClass[order.status]} ms-2">
                                        ${statusText[order.status]}
                                    </span>
                                </h5>
                                <div class="row mt-3">
                                    <div class="col-sm-6">
                                        <p class="mb-2">
                                            <strong>产品:</strong> ${order.product_name || '未知产品'}
                                        </p>
                                        <p class="mb-2">
                                            <strong>套餐:</strong> ${order.package_id}
                                        </p>
                                        <p class="mb-2">
                                            <strong>数量:</strong> ${order.quantity}
                                        </p>
                                    </div>
                                    <div class="col-sm-6">
                                        <p class="mb-2">
                                            <strong>联系人:</strong> ${order.contact_person}
                                        </p>
                                        <p class="mb-2">
                                            <strong>手机号:</strong> ${order.phone}
                                        </p>
                                        <p class="mb-2">
                                            <strong>创建时间:</strong> ${order.create_time || '-'}
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 text-md-end">
                                <div class="mb-3">
                                    <h4 class="text-success mb-0">¥${order.amount.toFixed(2)}</h4>
                                    <small class="text-muted">订单金额</small>
                                </div>
                                <div class="mb-3">
                                    <p class="mb-1">
                                        <strong>支付方式:</strong> ${order.payment_method || '未支付'}
                                    </p>
                                    <p class="mb-1">
                                        <strong>支付时间:</strong> ${order.payment_time || '未支付'}
                                    </p>
                                </div>
                                <div class="d-grid gap-2">
                                    <button class="btn btn-outline-primary btn-sm" onclick="viewOrderDetail('${order.order_number}')">
                                        <i class="fas fa-eye me-1"></i>查看详情
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `;
        });

        container.innerHTML = `
            <div class="card shadow-sm">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-list me-2"></i>
                        订单列表 (共 ${orders.length} 条记录)
                    </h5>
                </div>
                <div class="card-body">
                    ${ordersHtml}
                </div>
            </div>
        `;
    }

    // 查看订单详情
    function viewOrderDetail(orderNumber) {
        // 这里可以跳转到订单详情页面或显示模态框
        showNotification(`订单详情功能待实现，订单号: ${orderNumber}`, 'info');
    }
</script>
{% endblock %}