{extend name="admin/layout" /}

{block name="main"}
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">添加数据</h3>
    </div>
    <div class="panel-body">
        <form class="form-horizontal" id="dataForm" onsubmit="return false;">
            <div class="form-group">
                <label class="col-sm-3 control-label">所属项目</label>
                <div class="col-sm-9">
                    <select name="pid" class="form-control" required>
                        <option value="">请选择项目</option>
                        {foreach $projects as $vo}
                        <option value="{$vo.pid}">{$vo.name}</option>
                        {/foreach}
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">数据标题</label>
                <div class="col-sm-9">
                    <input type="text" name="name" placeholder="请输入数据标题..." class="form-control" required/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">跳转链接</label>
                <div class="col-sm-9">
                    <input type="text" name="url" placeholder="请输入跳转链接..." class="form-control" required/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">Logo图片</label>
                <div class="col-sm-9">
                    <input type="file" name="logo" id="logoInput" class="form-control" accept="image/*" onchange="previewImage(this, 'logoPreview')"/>
                    <div id="logoPreview" style="margin-top: 10px; max-width: 200px;"></div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-3 col-sm-9">
                    <button type="submit" class="btn btn-primary" onclick="submitForm()">保存</button>
                    <a href="/admin/projectData" class="btn btn-default">返回</a>
                </div>
            </div>
        </form>
    </div>
</div>
{/block}

{block name="script"}
<script>
function previewImage(input, previewId) {
    const preview = document.getElementById(previewId);
    preview.innerHTML = '';
    
    if (input.files && input.files[0]) {
        const reader = new FileReader();
        reader.onload = function(e) {
            const img = document.createElement('img');
            img.src = e.target.result;
            img.className = 'img-thumbnail';
            img.style.maxWidth = '100%';
            preview.appendChild(img);
        }
        reader.readAsDataURL(input.files[0]);
    }
}

function submitForm() {
    const formData = new FormData(document.getElementById('dataForm'));
    
    $.ajax({
        url: '/admin/projectDataAdd',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(res) {
            if (res.code === 200) {
                layer.msg(res.message, {icon: 1});
                setTimeout(function() {
                    window.location.href = '/admin/projectData';
                }, 1000);
            } else {
                layer.msg(res.message, {icon: 2});
            }
        }
    });
}
</script>
{/block}