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

{% block title %}服务授权{% endblock %}
{% block breadcrumb %}服务授权{% endblock %}

{% block extra_css %}
<style>
    .steps-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-bottom: 24px; }
    .step-card { background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); border: 1px solid var(--gray-200); position: relative; }
    .step-number { position: absolute; top: -12px; left: 20px; background: var(--primary); color: #fff; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
    .step-title { font-size: 16px; font-weight: 700; color: var(--gray-900); margin-bottom: 16px; padding-top: 8px; }
    .step-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
    .btn-action { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; border: none; transition: all 0.2s; }
    .btn-primary { background: var(--primary); color: #fff; }
    .btn-primary:hover { background: var(--primary-hover); }
    .btn-outline { background: #fff; color: var(--gray-700); border: 1px solid var(--gray-300); }
    .btn-outline:hover { background: var(--gray-50); border-color: var(--gray-400); }
    .step-desc { font-size: 13px; color: var(--gray-500); line-height: 1.6; }
    .form-group { margin-bottom: 16px; }
    .form-label { display: block; font-size: 14px; font-weight: 600; color: var(--gray-700); margin-bottom: 6px; }
    .form-label .required { color: var(--red); margin-left: 2px; }
    .form-input { width: 100%; padding: 10px 12px; border: 1px solid var(--gray-300); border-radius: 8px; font-size: 14px; color: var(--gray-900); background: #fff; transition: border-color 0.2s, box-shadow 0.2s; }
    .form-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
    .form-input::placeholder { color: var(--gray-400); }
    textarea.form-input { min-height: 80px; resize: vertical; }
    .btn-save { display: inline-flex; align-items: center; gap: 6px; background: var(--primary); color: #fff; border: none; padding: 10px 24px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
    .btn-save:hover { background: var(--primary-hover); }
    .upload-area { border: 2px dashed var(--gray-300); border-radius: 8px; padding: 20px; text-align: center; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
    .upload-area:hover { border-color: var(--primary); background: var(--primary-light); }
    .upload-icon { font-size: 24px; margin-bottom: 8px; }
    .upload-text { font-size: 14px; color: var(--gray-500); }
    .upload-hint { font-size: 12px; color: var(--gray-400); margin-top: 4px; }
    @media screen and (max-width: 768px) { .steps-container { grid-template-columns: 1fr; } }
</style>
{% endblock %}
{% block content %}
<div class="section-head"><h2 class="section-title">🔑 服务授权</h2></div>
<div class="steps-container">
    <div class="step-card">
        <div class="step-number">1</div>
        <div class="step-title">申请服务授权</div>
        <div class="step-actions">
            <button class="btn-action btn-outline" onclick="handleDownload('activation')">📥 下载激活文件</button>
            <button class="btn-action btn-primary" onclick="document.getElementById('auth-file').click()">📤 上传授权文件</button>
            <input type="file" id="auth-file" style="display:none" accept=".lic,.key,.dat" onchange="handleAuthUpload(this)">
        </div>
        <div class="upload-area" onclick="document.getElementById('auth-file').click()">
            <div class="upload-icon">📁</div>
            <div class="upload-text">点击或拖拽上传授权文件</div>
            <div class="upload-hint">支持 .lic / .key / .dat 格式</div>
        </div>
        <div class="step-desc" style="margin-top: 12px;">下载激活文件后发送给厂商获取授权，收到授权文件后上传即可完成授权申请。</div>
    </div>
    <div class="step-card">
        <div class="step-number">2</div>
        <div class="step-title">填写项目信息</div>
        <form id="project-form" onsubmit="handleSaveProject(event)">
            <div class="form-group"><label class="form-label">项目销售 <span class="required">*</span></label><input type="text" class="form-input" placeholder="请输入项目的销售" required></div>
            <div class="form-group"><label class="form-label">部署人员 <span class="required">*</span></label><input type="text" class="form-input" placeholder="请输入项目部署或更新人员" required></div>
            <div class="form-group"><label class="form-label">下单时间 <span class="required">*</span></label><input type="datetime-local" class="form-input" required></div>
            <div class="form-group"><label class="form-label">服务器密码 <span class="required">*</span></label><input type="password" class="form-input" placeholder="请输入服务器密码" required></div>
            <div class="form-group"><label class="form-label">项目概述 <span class="required">*</span></label><textarea class="form-input" placeholder="请输入项目概述" required></textarea></div>
            <button type="submit" class="btn-save">💾 保存</button>
        </form>
    </div>
    <div class="step-card">
        <div class="step-number">3</div>
        <div class="step-title">填写并提交部署视图</div>
        <div class="step-actions"><button class="btn-action btn-outline" onclick="handleDownload('deploy-view')">📥 下载部署视图</button></div>
        <div class="upload-area" onclick="document.getElementById('deploy-file').click()">
            <div class="upload-icon">📄</div>
            <div class="upload-text">点击上传已填写的部署视图</div>
            <div class="upload-hint">支持 .xlsx / .xls / .pdf 格式</div>
        </div>
        <input type="file" id="deploy-file" style="display:none" accept=".xlsx,.xls,.pdf" onchange="handleDeployUpload(this)">
        <div class="step-desc" style="margin-top: 12px;">下载部署视图模板，填写后上传提交。</div>
    </div>
    <div class="step-card">
        <div class="step-number">4</div>
        <div class="step-title">填写并提交自检文档</div>
        <div class="step-actions"><button class="btn-action btn-outline" onclick="handleDownload('self-check')">📥 下载自检文档</button></div>
        <div class="upload-area" onclick="document.getElementById('check-file').click()">
            <div class="upload-icon">📋</div>
            <div class="upload-text">点击上传已填写的自检文档</div>
            <div class="upload-hint">支持 .docx / .doc / .pdf 格式</div>
        </div>
        <input type="file" id="check-file" style="display:none" accept=".docx,.doc,.pdf" onchange="handleCheckUpload(this)">
        <div class="step-desc" style="margin-top: 12px;">下载自检文档模板，填写后上传提交。</div>
    </div>
</div>
{% endblock %}
{% block extra_js %}
<script>
function handleDownload(type) { alert("下载功能开发中，敬请期待"); }
function handleAuthUpload(input) { if (input.files.length > 0) alert("授权文件上传功能开发中，敬请期待"); }
function handleDeployUpload(input) { if (input.files.length > 0) alert("部署视图上传功能开发中，敬请期待"); }
function handleCheckUpload(input) { if (input.files.length > 0) alert("自检文档上传功能开发中，敬请期待"); }
function handleSaveProject(e) { e.preventDefault(); alert("项目信息保存功能开发中，敬请期待"); }
</script>
{% endblock %}