<?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_services 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'] ?? '';
        $description = $_POST['description'] ?? '';
        $icon = $_POST['icon'] ?? 'layui-icon-app';
        $sort = $_POST['sort'] ?? 0;
        
        if (empty($title)) json_error('服务名称不能为空');
        
        if ($id) {
            $stmt = $pdo->prepare("UPDATE nxz_services SET title=?, description=?, icon=?, sort=? WHERE id=?");
            $stmt->execute([$title, $description, $icon, $sort, $id]);
        } else {
            $stmt = $pdo->prepare("INSERT INTO nxz_services (title, description, icon, sort) VALUES (?, ?, ?, ?)");
            $stmt->execute([$title, $description, $icon, $sort]);
        }
        json_success('保存成功');
    }
    if ($_GET['api'] == 'del') {
        $id = $_POST['id'] ?? 0;
        $pdo->prepare("DELETE FROM nxz_services 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; }</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="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>

<script type="text/html" id="iconTpl">
    <i class="layui-icon {{d.icon}}"></i> {{d.icon}}
</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="description" 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="icon" id="iconPicker" lay-filter="iconPicker" 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>
layui.use(['table', 'form', 'layer', 'jquery'], function(){
    var table = layui.table;
    var form = layui.form;
    var layer = layui.layer;
    var $ = layui.jquery;
    
    // 简单的图标选择器
    var icons = [
        'layui-icon-app', 'layui-icon-code-circle', 'layui-icon-engine', 'layui-icon-robot', 'layui-icon-chart',
        'layui-icon-set', 'layui-icon-template-1', 'layui-icon-component', 'layui-icon-user', 'layui-icon-website',
        'layui-icon-console', 'layui-icon-face-smile', 'layui-icon-diamond', 'layui-icon-fire', 'layui-icon-heart',
        'layui-icon-star', 'layui-icon-water', 'layui-icon-theme', 'layui-icon-camera', 'layui-icon-picture',
        'layui-icon-video', 'layui-icon-play', 'layui-icon-headset', 'layui-icon-voice', 'layui-icon-read',
        'layui-icon-location', 'layui-icon-earth', 'layui-icon-wifi', 'layui-icon-gift', 'layui-icon-find-fill'
    ];
    
    var iconHtml = '<div style="padding: 15px; display: flex; flex-wrap: wrap; gap: 10px;">';
    for(var i=0; i<icons.length; i++){
        iconHtml += '<div class="icon-item" data-icon="'+icons[i]+'" style="width: 40px; height: 40px; line-height: 40px; text-align: center; border: 1px solid #eee; border-radius: 4px; cursor: pointer; transition: all 0.3s;"><i class="layui-icon '+icons[i]+'" style="font-size: 20px;"></i></div>';
    }
    iconHtml += '</div>';
    
    $('body').on('mouseenter', '.icon-item', function(){
        $(this).css('background', '#f2f2f2');
    }).on('mouseleave', '.icon-item', function(){
        $(this).css('background', '#fff');
    });

    $('#iconPicker').on('click', function(){
        layer.open({
            type: 1,
            title: '选择图标',
            area: ['400px', '300px'],
            content: iconHtml,
            success: function(layero, index){
                layero.find('.icon-item').on('click', function(){
                    $('#iconPicker').val($(this).data('icon'));
                    layer.close(index);
                });
            }
        });
    });
    
    table.render({
        elem: '#dataTable',
        url: '?api=list',
        cols: [[
            {field:'id', title:'ID', width:80},
            {field:'title', title:'服务名称'},
            {field:'description', title:'描述'},
            {field:'icon', title:'图标', templet: '#iconTpl', width: 200},
            {field:'sort', title:'排序', width:80},
            {title:'操作', toolbar: '#barDemo', width:150}
        ]]
    });
    
    var openForm = function(data){
        form.val('dataForm', data || {id:'', title:'', description:'', icon:'layui-icon-app', sort:0});
        layer.open({
            type: 1,
            title: data ? '编辑服务' : '添加服务',
            area: ['500px', '450px'],
            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>