{% extends "base.html" %}
{% block content %}
<div class="manual_container">

    <div class="form_tips">
        <p>注意事项</p>
        <ul>
            <li>本页面用于填写用户来电申报或者巡检途中发现的故障、移机，申报前请确保在途工单中没有重复故障</li>
            <li>新装设备、移机等请在申报类型选择“新装”或“移机”</li>
            <li>现场照片最多可上传5张，支持jpg、jpeg、png</li>
            <li>距离支局公里数请填写支局办公室到故障地点实际距离</li>
            <li>带 <span class="required">*</span> 的字段为必填项</li>
        </ul>
    </div>
    <form method="POST" enctype="multipart/form-data" class="manual_form">
        <div class="form-group">
            <label for="project_type">项目类型<span class="required">*</span></label>
            <select id="project_type" name="project_type" required>
                <option value="">请选择项目类型</option>
                <option value='校园安防"4+N"项目'>校园安防"4+N"项目</option>
                <option value="综治视联网">综治视联网</option>
                <option value="教育城域网">教育城域网</option>
                <option value="其他">其他</option>
            </select>
        </div>
        
        <div class="form-group">
            <label for="device_id">施工设备类型<span class="required">*</span></label>
            <input type="text" id="device_id" name="device_id" required placeholder="如：摄像头、一键报警盒、光猫等">
        </div>
        
        <div class="form-group">
            <label for="device_location">施工单位名称<span class="required">*</span></label>
            <input type="text" id="device_location" name="device_location" required placeholder="请填写前往施工的单位名称如：古河村委、都阳镇中心小学等">
        </div>
        
        <div class="form-group">
            <label for="fault_time">施工完成时间<span class="required">*</span></label>
            <input type="datetime-local" id="fault_time" name="fault_time" required>
        </div>
        
        <div class="form-group">
            <label for="handler">施工处理人<span class="required">*</span></label>
            <input type="text" id="handler" name="handler" value="{{ current_user.name }}" required>
        </div>
        
        <div class="form-group">
            <label for="fault_type">申报类型<span class="required">*</span></label>
            <select id="fault_type" name="fault_type" required>
                <option value="">请选择申报类型</option>
                <option value="光猫故障">光猫故障</option>
                <option value="设备故障">设备故障</option>
                <option value="电源故障">电源故障</option>
                <option value="电路故障">电路故障</option>
                <option value="网线故障">网线故障</option>
                <option value="皮线故障">皮线故障</option>
                <option value="数据问题">数据问题</option>
                <option value="用户欠费">用户欠费</option>
                <option value="移机">移机申报</option>
                <option value="新增">新装申报</option>
                <option value="其他">其他</option>
            </select>
        </div>
        
        <div class="form-group">
            <label for="handle_description">处理描述<span class="required">*</span></label>
            <textarea id="handle_description" name="handle_description" placeholder="请简述处理过程，如：光猫电源适配器坏，更好光猫电源适配器后恢复。" required></textarea>
        </div>
        
        <div class="form-group">
            <label for="photo">现场照片（最多5张）</label>
            <input type="file" id="photo" name="photo" multiple accept="image/*">
        </div>
        
        <div class="form-group">
            <label for="contact_person">施工对接人<span class="required">*</span></label>
            <input type="text" id="contact_person" name="contact_person" placeholder="请输入本次施工单位对接人" required>
        </div>
        
        <div class="form-group">
            <label for="contact_phone">对接人联系电话</label>
            <input type="tel" id="contact_phone" name="contact_phone" placeholder="请输入本次施工单位对接人联系电话">
        </div>
        
        <div class="form-group">
            <label for="distance_from_branch">距离支局公里数<span class="required">*</span></label>
            <input type="number" step="0.1" id="distance_from_branch" name="distance_from_branch" required placeholder="请输入实际路程距离，如：5.5、50">
        </div>
        
        <div class="form-group">
            <label for="remark">备注</label>
            <textarea id="remark" name="remark" placeholder="如有其他需要说明的信息，请在此填写"></textarea>
        </div>
        
        <button type="submit" class="manual_submit">提交</button>
    </form>
</div>
<style>
    .form_tips {
        background-color: #f8f9fa;
        padding: 15px;
        border-radius: 4px;
        margin-bottom: 20px;
    }
    
    .form_tips ul {
        margin: 10px 0 0 20px;
        padding: 0;
    }
    
    .form_tips li {
        margin-bottom: 5px;
        color: #666;
    }
    
    .required {
        color: #dc3545;
        margin-left: 3px;
    }
    
    .manual_form input::placeholder,
    .manual_form textarea::placeholder {
        color: #999;
        font-size: 13px;
    }
    
    .manual_form select option:first-child {
        color: #999;
    }
    </style>
{% endblock %}