@extends('base.base')
@section('base')
    <!-- 内容区域 -->
    <div class="main-panel">
        <div class="content-wrapper">
            <div class="page-header">
                <h3 class="page-title">
                     <span class="page-title-icon bg-gradient-primary text-white mr-2">
                        <i class="mdi mdi-cash-multiple"></i>
                    </span>
                    提现渠道配置
                </h3>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="#">茶叶管理</a></li>
                        <li class="breadcrumb-item active" aria-current="page">提现渠道配置</li>
                    </ol>
                </nav>
            </div>
            <div class="row">
                <div class="col-lg-12 grid-margin stretch-card">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h4 class="card-title mb-0">配置渠道权重</h4>
                                <button type="button" onclick="addChannel()" class="btn btn-sm btn-gradient-success btn-icon-text">
                                    <i class="mdi mdi-plus btn-icon-prepend"></i>
                                    新增渠道
                                </button>
                            </div>
                            
                            <div class="alert alert-info" role="alert">
                                <i class="mdi mdi-information"></i>
                                <strong>说明:</strong>
                                <ul class="mb-0">
                                    <li>开启的渠道权重总和必须为 100%</li>
                                    <li>关闭的渠道权重将自动设置为 0</li>
                                    <li>系统会根据权重比例自动分配提现订单到各渠道</li>
                                </ul>
                            </div>

                            <form action="" method="post" class="form-inline form-ajax">
                                {!! csrf_field() !!}
                                @foreach($list as $k => $v)
                                    <div style="margin: 10px 0; padding: 10px; border: 1px solid #e8e8e8; border-radius: 4px; width: 100%; background: {{ $v->status == 1 ? '#f8fff8' : '#f8f8f8' }};">
                                        <div class="form-group" style="width: 100%;">
                                            <div class="row align-items-center" style="width: 100%;">
                                                <div class="col-md-2">
                                                    <label for="">渠道名称(name):</label>
                                                    <input class="form-control" type="text" disabled value="{{ $v->name }}">
                                                </div>
                                                <div class="col-md-2">
                                                    <label for="">渠道值(config_value):</label>
                                                    <input class="form-control" type="text" disabled value="{{ $v->config_value }}">
                                                </div>
                                                <div class="col-md-2">
                                                    <label for="">权重(sort) (%):</label>
                                                    <input class="form-control" type="number" min="0" max="100"
                                                           name="config[{{$v->id}}][sort]" value="{{$v->sort}}">
                                                </div>
                                                <div class="col-md-2">
                                                    <label for="">状态(status):</label>
                                                    @component('components.select', [
                                                        'name' => "config[{$v->id}][status]",
                                                        'class' => $v->status == 1 ? 'btn-primary' : 'btn-danger',
                                                        'options' => [1 => '开启', -1 => '关闭'],
                                                        'default' => $v->status])
                                                    @endcomponent
                                                </div>
                                                <div class="col-md-2">
                                                    <label for="">操作人(admin_id):</label>
                                                    <input class="form-control" type="text" disabled value="{{ $v->account ?? '-' }}">
                                                </div>
                                                <div class="col-md-2">
                                                    <label for="">&nbsp;</label>
                                                    <button type="button" onclick="editChannel({{ $v->id }})" class="btn btn-sm btn-gradient-info btn-block">
                                                        <i class="mdi mdi-pencil"></i> 编辑
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                                <div style="width: 100%; margin-top: 15px;">
                                    <button class="btn btn-gradient-primary">
                                        <i class="mdi mdi-check"></i> 提交保存
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        function addChannel() {
            layer.open({
                type: 2,
                title: '新增提现渠道',
                shadeClose: true,
                shade: 0.8,
                area: ['60%', '70%'],
                content: '/admin/withdrawal/cashier_channel_add'
            });
        }
        
        function editChannel(id) {
            layer.open({
                type: 2,
                title: '修改提现渠道',
                shadeClose: true,
                shade: 0.8,
                area: ['60%', '70%'],
                content: '/admin/withdrawal/cashier_channel_update/' + id
            });
        }
        
        // 实时计算权重总和
        $(document).ready(function() {
            function calculateTotal() {
                let total = 0;
                $('input[name*="[sort]"]').each(function() {
                    let statusSelect = $(this).closest('.row').find('select[name*="[status]"]');
                    if (statusSelect.val() == 1) {
                        total += parseInt($(this).val()) || 0;
                    }
                });
                
                // 显示总和提示
                let alertClass = total === 100 ? 'alert-success' : 'alert-warning';
                let message = total === 100 ? 
                    '<i class="mdi mdi-check-circle"></i> 权重配置正确' : 
                    '<i class="mdi mdi-alert-circle"></i> 当前开启渠道权重总和: ' + total + '% (需要100%)';
                
                if ($('.weight-alert').length === 0) {
                    $('form').before('<div class="alert weight-alert ' + alertClass + '">' + message + '</div>');
                } else {
                    $('.weight-alert').removeClass('alert-success alert-warning').addClass(alertClass).html(message);
                }
            }
            
            // 监听权重输入变化
            $('input[name*="[sort]"]').on('input', calculateTotal);
            
            // 监听状态变化
            $('select[name*="[status]"]').on('change', calculateTotal);
            
            // 初始计算
            calculateTotal();
        });
    </script>
@endsection