@extends('base.base')
@section('base')
<div class="main-panel">
    <div class="content-wrapper">
        <div class="row">
            <div class="col-12 grid-margin stretch-card">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title">Bonus购买回报配置</h4>
                        <p class="card-description">配置Bonus购买时的倍率和权重</p>

<style>
    .table-wrapper {
        max-height: calc(100vh - 250px);
        overflow-y: auto;
        position: relative;
        border: 1px solid #ddd;
    }
    
    .config-table {
        width: 100%;
        border-collapse: collapse;
        margin: 0;
        background: #fff;
    }
    
    .config-table th,
    .config-table td {
        border: 1px solid #ddd;
        padding: 10px;
        text-align: center;
        font-size: 14px;
    }
    
    .config-table thead {
        position: sticky;
        top: 0;
        z-index: 100;
    }
    
    .config-table th {
        background-color: #4CAF50;
        color: white;
        font-weight: bold;
        position: sticky;
        top: 0;
        box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
    }
    
    .config-table tbody tr:nth-child(even) {
        background-color: #f9f9f9;
    }
    
    .config-table tbody tr:hover {
        background-color: #f0f0f0;
    }
    
    .config-table input[type="number"],
    .config-table input[type="text"] {
        width: 95%;
        padding: 5px;
        border: 1px solid transparent;
        border-radius: 3px;
        text-align: center;
        background: transparent;
        cursor: pointer;
    }
    
    .config-table input[type="number"]:focus,
    .config-table input[type="text"]:focus {
        border: 1px solid #4CAF50;
        background: #fff;
        outline: none;
        box-shadow: 0 0 5px rgba(76, 175, 80, 0.3);
    }
    
    .config-table input[type="number"]:read-only,
    .config-table input[type="text"]:read-only {
        cursor: pointer;
    }
    
    .editable-cell {
        cursor: pointer;
        position: relative;
    }
    
    .editable-cell:hover::after {
        content: '✎';
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
        color: #4CAF50;
        font-size: 14px;
    }
    
    .field-label {
        color: #ccc;
        font-size: 11px;
    }
    
    /* 滚动条美化 */
    .table-wrapper::-webkit-scrollbar {
        width: 8px;
    }
    
    .table-wrapper::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 4px;
    }
    
    .table-wrapper::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 4px;
    }
    
    .table-wrapper::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
</style>

<form id="configForm">
    <div class="table-wrapper">
        <table class="config-table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>倍率最小<br><span class="field-label">(MultiMin)</span></th>
                    <th>倍率最大<br><span class="field-label">(MultiMax)</span></th>
                    <th>权重<br><span class="field-label">(Weight)</span></th>
                    <th>权重调节<br><span class="field-label">(WeightAdjust)</span></th>
                </tr>
            </thead>
            <tbody>
            @foreach($configs as $config)
                <tr>
                    <td>{{ $config->ConfigID }}</td>
                    <td>
                        <input type="number" 
                               name="configs[{{ $config->ConfigID }}][MultiMin]" 
                               value="{{ number_format($config->MultiMin, 2, '.', '') }}" 
                               min="0" 
                               step="0.01">
                    </td>
                    <td>
                        <input type="number" 
                               name="configs[{{ $config->ConfigID }}][MultiMax]" 
                               value="{{ number_format($config->MultiMax, 2, '.', '') }}" 
                               min="0" 
                               step="0.01">
                    </td>
                    <td>
                        <input type="number" 
                               name="configs[{{ $config->ConfigID }}][Weight]" 
                               value="{{ $config->Weight }}" 
                               min="0" 
                               step="1">
                    </td>
                    <td>
                        <input type="text" 
                               name="configs[{{ $config->ConfigID }}][WeightAdjust]" 
                               value="{{ $config->WeightAdjust }}" 
                               placeholder="如: 10Z"
                               style="width: 120px;">
                    </td>
                </tr>
            @endforeach
            </tbody>
        </table>
    </div>

    <div style="text-align: center; margin: 20px 0;">
        <button type="button" class="btn btn-primary btn-lg" onclick="saveConfig()">保存配置</button>
    </div>
</form>

<script>
// 保存原始数据
const originalData = {};

$(document).ready(function() {
    // 记录所有字段的原始值
    $('input[name^="configs"]').each(function() {
        const name = $(this).attr('name');
        originalData[name] = $(this).val();
        // 设置为只读，点击后才能编辑
        $(this).attr('readonly', true);
    });
    
    // 点击input时移除只读，进入编辑模式
    $('input[type="number"], input[type="text"]').on('click', function() {
        $(this).attr('readonly', false);
        $(this).select();  // 选中内容，方便修改
    });
    
    // 失去焦点时恢复只读
    $('input[type="number"], input[type="text"]').on('blur', function() {
        $(this).attr('readonly', true);
    });
});

function saveConfig() {
    // 收集有变动的数据
    const changedData = {};
    let hasChanges = false;
    
    $('input[name^="configs"]').each(function() {
        const name = $(this).attr('name');
        const currentValue = $(this).val();
        
        // 只添加有变动的字段
        if (originalData[name] !== currentValue) {
            changedData[name] = currentValue;
            hasChanges = true;
        }
    });
    
    if (!hasChanges) {
        layer.msg('没有数据被修改', {icon: 0});
        return;
    }
    
    // 构建只包含变动数据的表单
    const formData = $.param(changedData);
    
    layer.msg('正在保存 ' + Object.keys(changedData).length + ' 个变动...', {icon: 16, time: 0, shade: 0.3});
    
    $.ajax({
        url: '/admin/game-buy-bonus-config/update',
        type: 'POST',
        data: formData,
        dataType: 'json',
        success: function(res) {
            layer.closeAll();
            if (res.code === 200) {
                layer.msg('配置更新成功！', {icon: 1});
                setTimeout(function() {
                    location.reload();
                }, 1000);
            } else {
                layer.msg('更新失败: ' + (res.msg || '未知错误'), {icon: 2});
            }
        },
        error: function(xhr) {
            layer.closeAll();
            layer.msg('请求失败: ' + xhr.statusText, {icon: 2});
        }
    });
}
</script>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection