<?php
/**
 * Name: Nxz官网系统
 * URI: https://www.nxzlm.com/
 * Description: 逆行者官网系统源码，简单好用带后台
 * Version: 1.0.0
 * Author: 逆行者联盟
 */
require_once '../includes/common.php';
check_admin_login();

// 处理API请求
if (isset($_GET['api'])) {
    if ($_GET['api'] == 'list') {
        $stmt = $pdo->query("SELECT * FROM nxz_sliders ORDER BY sort ASC, id DESC");
        $data = $stmt->fetchAll();
        echo json_encode(['code' => 0, 'msg' => '', 'count' => count($data), 'data' => $data]);
        exit;
    }
    if ($_GET['api'] == 'save') {
        $id = $_POST['id'] ?? 0;
        $title = $_POST['title'] ?? '';
        $image = $_POST['image'] ?? '';
        $link = $_POST['link'] ?? '#';
        $sort = $_POST['sort'] ?? 0;
        
        if (empty($title) || empty($image)) json_error('标题和图片地址不能为空');
        
        if ($id) {
            $stmt = $pdo->prepare("UPDATE nxz_sliders SET title=?, image=?, link=?, sort=? WHERE id=?");
            $stmt->execute([$title, $image, $link, $sort, $id]);
        } else {
            $stmt = $pdo->prepare("INSERT INTO nxz_sliders (title, image, link, sort) VALUES (?, ?, ?, ?)");
            $stmt->execute([$title, $image, $link, $sort]);
        }
        json_success('保存成功');
    }
    if ($_GET['api'] == 'del') {
        $id = $_POST['id'] ?? 0;
        $pdo->prepare("DELETE FROM nxz_sliders WHERE id=?")->execute([$id]);
        json_success('删除成功');
    }
}
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>轮播图管理</title>
    <link rel="stylesheet" href="../assets/layui/css/layui.css">
    <style>
        body { background-color: #f2f2f2; padding: 15px; }
        .img-preview { max-height: 50px; border-radius: 4px; }
    </style>
</head>
<body>

<div class="layui-card">
    <div class="layui-card-header">轮播图管理</div>
    <div class="layui-card-body">
        <div style="padding-bottom: 10px;">
            <button class="layui-btn layui-btn-normal" id="btnAdd">添加轮播图</button>
        </div>
        <table id="dataTable" lay-filter="dataTable"></table>
    </div>
</div>

<script type="text/html" id="imgTpl">
    <img src="{{d.image}}" class="img-preview" onclick="showImg('{{d.image}}')">
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<!-- 弹窗表单 -->
<div id="formBox" style="display:none; padding: 20px;">
    <form class="layui-form" lay-filter="dataForm">
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">标题</label>
            <div class="layui-input-block">
                <input type="text" name="title" lay-verify="required" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">图片地址</label>
            <div class="layui-input-block">
                <input type="text" name="image" lay-verify="required" placeholder="http:// 或 https://" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">链接</label>
            <div class="layui-input-block">
                <input type="text" name="link" value="#" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-block">
                <input type="number" name="sort" value="0" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveData">保存</button>
            </div>
        </div>
    </form>
</div>

<script src="../assets/layui/layui.js"></script>
<script>
function showImg(url) {
    layer.open({
        type: 1,
        title: false,
        closeBtn: 1,
        area: ['80%', '80%'],
        skin: 'layui-layer-nobg',
        shadeClose: true,
        content: '<div style="text-align:center;height:100%;display:flex;align-items:center;justify-content:center;"><img src="'+url+'" style="max-width:100%;max-height:100%;"></div>'
    });
}

layui.use(['table', 'form', 'layer', 'jquery'], function(){
    var table = layui.table;
    var form = layui.form;
    var layer = layui.layer;
    var $ = layui.jquery;
    
    table.render({
        elem: '#dataTable',
        url: '?api=list',
        cols: [[
            {field:'id', title:'ID', width:80},
            {field:'title', title:'标题'},
            {field:'image', title:'预览图', templet: '#imgTpl', width: 150},
            {field:'link', title:'链接'},
            {field:'sort', title:'排序', width:80},
            {title:'操作', toolbar: '#barDemo', width:150}
        ]]
    });
    
    var openForm = function(data){
        form.val('dataForm', data || {id:'', title:'', image:'', link:'#', sort:0});
        layer.open({
            type: 1,
            title: data ? '编辑轮播图' : '添加轮播图',
            area: ['600px', '400px'],
            content: $('#formBox')
        });
    };
    
    $('#btnAdd').on('click', function(){
        openForm();
    });
    
    table.on('tool(dataTable)', function(obj){
        if(obj.event === 'del'){
            layer.confirm('确定删除该轮播图吗？', function(index){
                $.post('?api=del', {id: obj.data.id}, function(res){
                    if(res.code === 0){
                        layer.msg('删除成功');
                        table.reload('dataTable');
                    } else {
                        layer.msg(res.msg);
                    }
                }, 'json');
                layer.close(index);
            });
        } else if(obj.event === 'edit'){
            openForm(obj.data);
        }
    });
    
    form.on('submit(saveData)', function(data){
        $.post('?api=save', data.field, function(res){
            if(res.code === 0){
                layer.closeAll('page');
                layer.msg('保存成功');
                table.reload('dataTable');
            } else {
                layer.msg(res.msg);
            }
        }, 'json');
        return false;
    });
});
</script>
</body>
</html>