@extends('admin.layouts.admin')

@section('title', '发卡行管理')
@section('page-title', '发卡行管理')

@push('styles')
<style>
    .issuer-logo {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        object-fit: contain;
        padding: 4px;
        border: 1px solid #dee2e6;
    }
    .issuer-logo-placeholder {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 12px;
        font-weight: bold;
        border: 1px solid #dee2e6;
    }
    .color-indicator {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 2px solid #fff;
        box-shadow: 0 0 0 1px #dee2e6;
        display: inline-block;
    }
    .table-actions {
        white-space: nowrap;
    }
    .table-actions .btn {
        margin-right: 0.25rem;
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }
    .search-filters {
        background-color: #f8f9fa;
        padding: 1rem;
        border-radius: 0.5rem;
        margin-bottom: 1rem;
    }

    .import-section {
        background-color: #e3f2fd;
        border: 1px dashed #2196f3;
        border-radius: 0.5rem;
        padding: 1rem;
        margin-bottom: 1rem;
    }
</style>
@endpush

@section('content')
<div class="container-fluid">

    <!-- 搜索和操作区域 -->
    <div class="search-filters">
        <div class="row align-items-end">
            <div class="col-md-8">
                <div class="row">
                    <div class="col-md-6">
                        <label for="search" class="form-label small text-muted">搜索发卡行</label>
                        <input type="text" class="form-control" id="search" placeholder="输入名称、代码或BID搜索...">
                    </div>
                    <div class="col-md-3">
                        <label for="per-page" class="form-label small text-muted">每页显示</label>
                        <select class="form-select" id="per-page">
                            <option value="15">15</option>
                            <option value="30">30</option>
                            <option value="50">50</option>
                            <option value="100">100</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="d-flex gap-2 justify-content-end">
                    <button type="button" class="btn btn-outline-secondary" id="reset-filters">
                        <i class="fas fa-undo"></i> 重置
                    </button>
                    <button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#bulkImportModal">
                        <i class="fas fa-upload"></i> 批量导入
                    </button>
                    <button type="button" class="btn btn-primary" id="add-issuer-btn">
                        <i class="fas fa-plus"></i> 添加发卡行
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 数据表格 -->
    <div class="card">
        <div class="card-body">
            <!-- 加载指示器 -->
            <div id="loading" class="text-center py-4" style="display: none;">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
                <p class="mt-2 text-muted">加载中...</p>
            </div>

            <!-- 错误提示 -->
            <div id="error-message" class="alert alert-danger" style="display: none;"></div>

            <!-- 表格 -->
            <div class="table-responsive">
                <table class="table table-hover" id="issuers-table" style="display: none;">
                    <thead class="table-light">
                        <tr>
                            <th width="60px">
                                <button class="btn btn-sm btn-outline-secondary sort-btn" data-field="id">
                                    ID <i class="fas fa-sort text-muted"></i>
                                </button>
                            </th>
                            <th width="80px">LOGO</th>
                            <th>
                                <button class="btn btn-sm btn-outline-secondary sort-btn" data-field="code">
                                    代码 <i class="fas fa-sort text-muted"></i>
                                </button>
                            </th>
                            <th>
                                <button class="btn btn-sm btn-outline-secondary sort-btn" data-field="name">
                                    名称 <i class="fas fa-sort text-muted"></i>
                                </button>
                            </th>
                            <th>
                                <button class="btn btn-sm btn-outline-secondary sort-btn" data-field="bid">
                                    BID <i class="fas fa-sort text-muted"></i>
                                </button>
                            </th>
                            <th width="80px">主题色</th>
                            <th width="100px">
                                <button class="btn btn-sm btn-outline-secondary sort-btn" data-field="channel_enabled">
                                    渠道状态 <i class="fas fa-sort text-muted"></i>
                                </button>
                            </th>
                            <th>
                                <button class="btn btn-sm btn-outline-secondary sort-btn" data-field="created_at">
                                    创建时间 <i class="fas fa-sort text-muted"></i>
                                </button>
                            </th>
                            <th width="120px">操作</th>
                        </tr>
                    </thead>
                    <tbody id="issuers-tbody">
                        <!-- 数据行将通过JavaScript动态填充 -->
                    </tbody>
                </table>
            </div>

            <!-- 分页 -->
            <div class="d-flex justify-content-between align-items-center mt-3">
                <div class="text-muted">
                    <span id="pagination-info">显示第 0 到 0 条，共 0 条记录</span>
                </div>
                <nav>
                    <ul class="pagination pagination-sm mb-0" id="pagination">
                        <!-- 分页按钮将通过JavaScript动态生成 -->
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</div>

<!-- 添加/编辑发卡行模态框 -->
<div class="modal fade" id="issuerModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="issuerModalTitle">添加发卡行</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="issuerForm">
                <div class="modal-body">
                    <input type="hidden" id="issuer-id">
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="issuer-code" class="form-label">发卡行代码 <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="issuer-code" required maxlength="20">
                                <div class="form-text">用于系统内部识别的唯一代码</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="issuer-bid" class="form-label">BID <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="issuer-bid" required maxlength="20">
                                <div class="form-text">发卡行唯一标识号</div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="issuer-card-issuer-code" class="form-label">卡片过滤代码</label>
                                <input type="text" class="form-control" id="issuer-card-issuer-code" maxlength="20" placeholder="留空则使用发卡行代码">
                                <div class="form-text">
                                    <i class="fas fa-info-circle text-info me-1"></i>
                                    用于过滤卡片的发卡行代码。例如 BOCAPP 渠道可设置为 BOC，使其使用 BOC 的卡片
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6"></div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="issuer-name" class="form-label">发卡行名称 <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="issuer-name" required maxlength="100">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="issuer-name-short" class="form-label">简称 <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="issuer-name-short" required maxlength="50">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="issuer-name-shortest" class="form-label">最短名称</label>
                                <input type="text" class="form-control" id="issuer-name-shortest" maxlength="20">
                                <div class="form-text">用于显示空间有限的场景</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="issuer-color" class="form-label">主题色</label>
                                <div class="input-group">
                                    <input type="color" class="form-control form-control-color" id="issuer-color" value="#ffffff">
                                    <input type="text" class="form-control" id="issuer-color-text" placeholder="#ffffff" maxlength="20">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="issuer-logo-url" class="form-label">LOGO URL</label>
                        <input type="url" class="form-control" id="issuer-logo-url" maxlength="500">
                        <div class="form-text">发卡行LOGO图片地址</div>
                        <!-- Logo预览 -->
                        <div class="mt-2">
                            <small class="text-muted">预览效果：</small>
                            <div id="logo-preview" class="d-inline-block ms-2">
                                <div class="issuer-logo-placeholder" style="background-color: #ffffff;">
                                    <i class="fas fa-image text-muted"></i>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="issuer-country-code" class="form-label">国家代码</label>
                                <input type="text" class="form-control" id="issuer-country-code" maxlength="10" placeholder="如：CN, US, HK">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="issuer-country-name" class="form-label">国家名称</label>
                                <input type="text" class="form-control" id="issuer-country-name" maxlength="50" placeholder="如：中国, 美国, 香港">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="issuer-channel-enabled">
                                    <label class="form-check-label" for="issuer-channel-enabled">
                                        <strong>开通渠道</strong>
                                    </label>
                                    <div class="form-text">
                                        <i class="fas fa-info-circle text-info me-1"></i>
                                        开通后，该发卡行将出现在活动管理的渠道配置中，可以关联到具体活动
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary" id="save-issuer-btn">
                        <i class="fas fa-save"></i> 保存
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 批量导入模态框 -->
<div class="modal fade" id="bulkImportModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">批量导入发卡行</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="import-section">
                    <h6><i class="fas fa-info-circle text-info"></i> 导入说明</h6>
                    <ul class="mb-3 small">
                        <li>支持JSON格式的批量导入</li>
                        <li>每个发卡行对象必须包含：code, name, name_short, bid</li>
                        <li>可选字段：name_shortest, logo_url, color, country_code, country_name</li>
                        <li>如果发卡行已存在（相同code或bid），将会跳过</li>
                    </ul>
                </div>
                
                <form id="bulkImportForm">
                    <div class="mb-3">
                        <label for="bulk-import-data" class="form-label">JSON数据</label>
                        <textarea class="form-control font-monospace" id="bulk-import-data" rows="12" placeholder='示例格式:
[
  {
    "code": "BOC",
    "name": "中国银行",
    "name_short": "中国银行",
    "name_shortest": "中行",
    "bid": "10021293",
    "logo_url": "https://example.com/logo.png",
    "color": "#C00000",
    "country_code": "CN",
    "country_name": "中国"
  }
]'></textarea>
                    </div>
                    <div id="bulk-import-result" class="alert" style="display: none;"></div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="bulk-import-btn">
                    <i class="fas fa-upload"></i> 开始导入
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 删除确认模态框 -->
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">确认删除</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>确定要删除发卡行 "<span id="delete-issuer-name"></span>" 吗？</p>
                <p class="text-danger small">
                    <i class="fas fa-exclamation-triangle"></i> 
                    此操作不可撤销。如果该发卡行下有关联的卡片，删除操作将失败。
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger" id="confirm-delete-btn">
                    <i class="fas fa-trash"></i> 确认删除
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    console.log('发卡行管理页面已加载');
    console.log('jQuery版本:', $.fn.jquery);
    
    let currentPage = 1;
    let currentSort = { field: 'created_at', direction: 'desc' };
    let deleteIssuerId = null;

    // 初始化
    // 检查关键DOM元素
    const requiredElements = ['#loading', '#issuers-table', '#error-message', '#total-count'];
    requiredElements.forEach(selector => {
        const element = $(selector);
        if (element.length === 0) {
            console.error('❌ 缺少DOM元素:', selector);
        } else {
            console.log('✅ 找到DOM元素:', selector);
        }
    });
    
    console.log('开始初始化...');
    loadIssuers();
    loadStats();

    // 颜色选择器同步
    $('#issuer-color').on('change', function() {
        $('#issuer-color-text').val($(this).val());
        updateLogoPreview();
    });
    
    $('#issuer-color-text').on('input', function() {
        $('#issuer-color').val($(this).val());
        updateLogoPreview();
    });

    // Logo URL变化时更新预览
    $('#issuer-logo-url').on('input', function() {
        updateLogoPreview();
    });

    // 名称变化时更新预览（用于占位符文字）
    $('#issuer-name, #issuer-name-short, #issuer-name-shortest').on('input', function() {
        updateLogoPreview();
    });

    // 搜索功能
    let searchTimeout;
    $('#search').on('input', function() {
        clearTimeout(searchTimeout);
        searchTimeout = setTimeout(function() {
            currentPage = 1;
            loadIssuers();
        }, 500);
    });

    // 每页显示数量变化
    $('#per-page').on('change', function() {
        currentPage = 1;
        loadIssuers();
    });

    // 重置筛选器
    $('#reset-filters').on('click', function() {
        $('#search').val('');
        $('#per-page').val('15');
        currentPage = 1;
        currentSort = { field: 'created_at', direction: 'desc' };
        updateSortButtons();
        loadIssuers();
    });

    // 排序按钮
    $(document).on('click', '.sort-btn', function() {
        const field = $(this).data('field');
        if (currentSort.field === field) {
            currentSort.direction = currentSort.direction === 'asc' ? 'desc' : 'asc';
        } else {
            currentSort.field = field;
            currentSort.direction = 'asc';
        }
        currentPage = 1;
        updateSortButtons();
        loadIssuers();
    });

    // 添加发卡行按钮
    $('#add-issuer-btn').on('click', function() {
        resetForm();
        $('#issuerModalTitle').text('添加发卡行');
        updateLogoPreview(); // 初始化预览
        const modal = new bootstrap.Modal(document.getElementById('issuerModal'));
        modal.show();
    });

    // 表单提交
    $('#issuerForm').on('submit', function(e) {
        e.preventDefault();
        saveIssuer();
    });

    // 编辑按钮
    $(document).on('click', '.edit-btn', function() {
        const issuerId = $(this).data('id');
        editIssuer(issuerId);
    });

    // 删除按钮
    $(document).on('click', '.delete-btn', function() {
        deleteIssuerId = $(this).data('id');
        const issuerName = $(this).data('name');
        $('#delete-issuer-name').text(issuerName);
        const modal = new bootstrap.Modal(document.getElementById('deleteModal'));
        modal.show();
    });

    // 确认删除
    $('#confirm-delete-btn').on('click', function() {
        if (deleteIssuerId) {
            deleteIssuer(deleteIssuerId);
        }
    });

    // 批量导入
    $('#bulk-import-btn').on('click', function() {
        bulkImport();
    });

    // 分页按钮
    $(document).on('click', '.page-link', function(e) {
        e.preventDefault();
        const page = $(this).data('page');
        if (page && page !== currentPage) {
            currentPage = page;
            loadIssuers();
        }
    });

    // 加载发卡行列表
    function loadIssuers() {
        console.log('开始加载发卡行列表...');
        $('#loading').show();
        $('#issuers-table').hide();
        $('#error-message').hide();

        const params = {
            page: currentPage,
            per_page: $('#per-page').val(),
            search: $('#search').val(),
            sort_field: currentSort.field,
            sort_direction: currentSort.direction
        };

        console.log('请求参数:', params);
        $.get('/api/admin/issuers/api', params)
            .done(function(response) {
                console.log('API响应:', response);
                if (response.success) {
                    console.log('成功获取', response.data.length, '条发卡行数据');
                    renderIssuersTable(response.data);
                    renderPagination(response.pagination);
                    $('#issuers-table').show();
                } else {
                    console.error('API返回错误:', response.message);
                    showError('加载数据失败: ' + response.message);
                }
            })
            .fail(function(xhr, status, error) {
                console.error('API请求失败:', {xhr, status, error});
                showError('网络错误，请稍后重试');
            })
            .always(function() {
                $('#loading').hide();
            });
    }

    // 加载统计信息
    function loadStats() {
        $.get('/api/admin/issuers/counts')
            .done(function(response) {
                if (response.success) {
                    $('#total-count').text(response.data.total);
                }
            });
    }

    // 渲染表格
    function renderIssuersTable(issuers) {
        console.log('开始渲染表格，数据条数:', issuers.length);
        const tbody = $('#issuers-tbody');
        tbody.empty();

        if (issuers.length === 0) {
            tbody.append(`
                <tr>
                    <td colspan="8" class="text-center text-muted py-4">
                        <i class="fas fa-inbox fa-2x mb-2"></i><br>
                        暂无数据
                    </td>
                </tr>
            `);
            return;
        }

        issuers.forEach(function(issuer) {
            const issuerColor = issuer.color || '#6c757d'; // 默认灰色
            const logoHtml = issuer.logo_url ? 
                `<img src="${issuer.logo_url}" class="issuer-logo" alt="${issuer.name}" 
                      style="background-color: ${issuerColor};" 
                      onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                 <div class="issuer-logo-placeholder" style="background-color: ${issuerColor}; display: none;">
                    ${issuer.name_shortest || issuer.name_short.charAt(0) || issuer.name.charAt(0)}
                 </div>` :
                `<div class="issuer-logo-placeholder" style="background-color: ${issuerColor};">
                    ${issuer.name_shortest || issuer.name_short.charAt(0) || issuer.name.charAt(0)}
                </div>`;

            const colorHtml = issuer.color ? 
                `<span class="color-indicator" style="background-color: ${issuer.color}" title="${issuer.color}"></span>` :
                `<span class="text-muted">-</span>`;

            const row = `
                <tr>
                    <td>${issuer.id}</td>
                    <td>${logoHtml}</td>
                    <td>
                        <strong>${issuer.code}</strong>
                    </td>
                    <td>
                        <div>
                            <strong>${issuer.name}</strong>
                            ${issuer.name_short !== issuer.name ? `<br><small class="text-muted">${issuer.name_short}</small>` : ''}
                            ${issuer.name_shortest ? `<br><small class="text-muted">${issuer.name_shortest}</small>` : ''}
                        </div>
                    </td>
                    <td>
                        <code>${issuer.bid}</code>
                    </td>
                    <td>${colorHtml}</td>
                    <td>
                        ${issuer.channel_enabled ?
                            '<span class="badge bg-success"><i class="fas fa-check"></i> 已开通</span>' :
                            '<span class="badge bg-secondary"><i class="fas fa-times"></i> 未开通</span>'
                        }
                    </td>
                    <td>
                        <small>${formatDate(issuer.created_at)}</small>
                    </td>
                    <td class="table-actions">
                        <button type="button" class="btn btn-sm btn-outline-primary edit-btn" 
                                data-id="${issuer.id}" title="编辑">
                            <i class="fas fa-edit"></i>
                        </button>
                        <button type="button" class="btn btn-sm btn-outline-danger delete-btn" 
                                data-id="${issuer.id}" data-name="${issuer.name}" title="删除">
                            <i class="fas fa-trash"></i>
                        </button>
                    </td>
                </tr>
            `;
            tbody.append(row);
        });
    }

    // 渲染分页
    function renderPagination(pagination) {
        const paginationContainer = $('#pagination');
        paginationContainer.empty();

        if (pagination.last_page <= 1) {
            $('#pagination-info').text(`显示第 ${pagination.from || 0} 到 ${pagination.to || 0} 条，共 ${pagination.total} 条记录`);
            return;
        }

        // 上一页
        const prevDisabled = pagination.current_page === 1 ? 'disabled' : '';
        paginationContainer.append(`
            <li class="page-item ${prevDisabled}">
                <a class="page-link" href="#" data-page="${pagination.current_page - 1}">上一页</a>
            </li>
        `);

        // 页码
        const start = Math.max(1, pagination.current_page - 2);
        const end = Math.min(pagination.last_page, pagination.current_page + 2);

        if (start > 1) {
            paginationContainer.append(`<li class="page-item"><a class="page-link" href="#" data-page="1">1</a></li>`);
            if (start > 2) {
                paginationContainer.append(`<li class="page-item disabled"><span class="page-link">...</span></li>`);
            }
        }

        for (let i = start; i <= end; i++) {
            const active = i === pagination.current_page ? 'active' : '';
            paginationContainer.append(`
                <li class="page-item ${active}">
                    <a class="page-link" href="#" data-page="${i}">${i}</a>
                </li>
            `);
        }

        if (end < pagination.last_page) {
            if (end < pagination.last_page - 1) {
                paginationContainer.append(`<li class="page-item disabled"><span class="page-link">...</span></li>`);
            }
            paginationContainer.append(`<li class="page-item"><a class="page-link" href="#" data-page="${pagination.last_page}">${pagination.last_page}</a></li>`);
        }

        // 下一页
        const nextDisabled = pagination.current_page === pagination.last_page ? 'disabled' : '';
        paginationContainer.append(`
            <li class="page-item ${nextDisabled}">
                <a class="page-link" href="#" data-page="${pagination.current_page + 1}">下一页</a>
            </li>
        `);

        $('#pagination-info').text(`显示第 ${pagination.from} 到 ${pagination.to} 条，共 ${pagination.total} 条记录`);
    }

    // 更新排序按钮状态
    function updateSortButtons() {
        $('.sort-btn i').removeClass('fa-sort-up fa-sort-down').addClass('fa-sort text-muted');
        $(`.sort-btn[data-field="${currentSort.field}"] i`)
            .removeClass('fa-sort text-muted')
            .addClass(currentSort.direction === 'asc' ? 'fa-sort-up' : 'fa-sort-down')
            .removeClass('text-muted');
    }

    // 编辑发卡行
    function editIssuer(issuerId) {
        $.get(`/api/admin/issuers/${issuerId}`)
            .done(function(response) {
                if (response.success) {
                    const issuer = response.data;
                    $('#issuer-id').val(issuer.id);
                    $('#issuer-code').val(issuer.code);
                    $('#issuer-card-issuer-code').val(issuer.card_issuer_code || '');
                    $('#issuer-name').val(issuer.name);
                    $('#issuer-name-short').val(issuer.name_short);
                    $('#issuer-name-shortest').val(issuer.name_shortest);
                    $('#issuer-bid').val(issuer.bid);
                    $('#issuer-logo-url').val(issuer.logo_url);
                    $('#issuer-color').val(issuer.color || '#ffffff');
                    $('#issuer-color-text').val(issuer.color || '#ffffff');
                    $('#issuer-country-code').val(issuer.country_code);
                    $('#issuer-country-name').val(issuer.country_name);
                    $('#issuer-channel-enabled').prop('checked', issuer.channel_enabled || false);
                    
                    // 更新预览
                    updateLogoPreview();
                    
                    $('#issuerModalTitle').text('编辑发卡行');
                    const modal = new bootstrap.Modal(document.getElementById('issuerModal'));
                    modal.show();
                } else {
                    showError('获取发卡行信息失败: ' + response.message);
                }
            })
            .fail(function() {
                showError('网络错误，请稍后重试');
            });
    }

    // 保存发卡行
    function saveIssuer() {
        const issuerId = $('#issuer-id').val();
        const isEdit = !!issuerId;
        const url = isEdit ? `/api/admin/issuers/${issuerId}` : '/api/admin/issuers';
        const method = isEdit ? 'PUT' : 'POST';

        const data = {
            code: $('#issuer-code').val(),
            card_issuer_code: $('#issuer-card-issuer-code').val() || null,
            name: $('#issuer-name').val(),
            name_short: $('#issuer-name-short').val(),
            name_shortest: $('#issuer-name-shortest').val(),
            bid: $('#issuer-bid').val(),
            logo_url: $('#issuer-logo-url').val(),
            color: $('#issuer-color').val(),
            country_code: $('#issuer-country-code').val(),
            country_name: $('#issuer-country-name').val(),
            channel_enabled: $('#issuer-channel-enabled').prop('checked') ? 1 : 0
        };

        console.log('Sending data:', data); // 调试信息
        console.log('isEdit:', isEdit, 'issuerId:', issuerId, 'url:', url); // 调试编辑状态

        $('#save-issuer-btn').prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> 保存中...');

        $.ajax({
            url: url,
            method: method,
            data: data,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        })
        .done(function(response) {
            console.log('Save issuer response:', response);
            if (response.success) {
                bootstrap.Modal.getInstance(document.getElementById('issuerModal')).hide();
                loadIssuers();
                loadStats();
                showSuccess(isEdit ? '发卡行更新成功' : '发卡行创建成功');
            } else {
                console.error('Save failed with response:', response);
                showError('保存失败: ' + response.message);
                if (response.debug) {
                    console.error('Debug info:', response.debug);
                }
            }
        })
        .fail(function(xhr, status, error) {
            console.error('Save issuer failed:', {
                xhr: xhr,
                status: status,
                error: error,
                responseText: xhr.responseText,
                statusCode: xhr.status,
                responseJSON: xhr.responseJSON
            });

            let message = '网络错误，请稍后重试';
            if (xhr.responseJSON) {
                if (xhr.responseJSON.message) {
                    message = xhr.responseJSON.message;
                }
                if (xhr.responseJSON.errors) {
                    const errors = Object.values(xhr.responseJSON.errors).flat();
                    message += '<br>' + errors.join('<br>');
                }
                if (xhr.responseJSON.debug) {
                    console.error('Server debug:', xhr.responseJSON.debug);
                }
            }
            showError(message);
        })
        .always(function() {
            $('#save-issuer-btn').prop('disabled', false).html('<i class="fas fa-save"></i> 保存');
        });
    }

    // 删除发卡行
    function deleteIssuer(issuerId) {
        $('#confirm-delete-btn').prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> 删除中...');

        $.ajax({
            url: `/api/admin/issuers/${issuerId}`,
            method: 'DELETE'
        })
        .done(function(response) {
            if (response.success) {
                bootstrap.Modal.getInstance(document.getElementById('deleteModal')).hide();
                loadIssuers();
                loadStats();
                showSuccess('发卡行删除成功');
            } else {
                showError('删除失败: ' + response.message);
            }
        })
        .fail(function() {
            showError('网络错误，请稍后重试');
        })
        .always(function() {
            $('#confirm-delete-btn').prop('disabled', false).html('<i class="fas fa-trash"></i> 确认删除');
        });
    }

    // 批量导入
    function bulkImport() {
        const data = $('#bulk-import-data').val().trim();
        if (!data) {
            showError('请输入要导入的JSON数据');
            return;
        }

        let issuers;
        try {
            issuers = JSON.parse(data);
        } catch (e) {
            showError('JSON格式错误: ' + e.message);
            return;
        }

        if (!Array.isArray(issuers)) {
            showError('数据格式错误，必须是数组格式');
            return;
        }

        $('#bulk-import-btn').prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> 导入中...');
        $('#bulk-import-result').hide();

        $.ajax({
            url: '/api/admin/issuers/bulk-import',
            method: 'POST',
            data: { issuers: issuers }
        })
        .done(function(response) {
            if (response.success) {
                const result = response.data;
                let resultHtml = `
                    <h6>导入完成</h6>
                    <ul>
                        <li>成功创建: ${result.created} 条</li>
                        <li>跳过: ${result.skipped} 条</li>
                    </ul>
                `;

                if (result.errors.length > 0) {
                    resultHtml += `
                        <h6 class="text-danger">错误信息:</h6>
                        <ul class="text-danger small">
                            ${result.errors.map(error => `<li>${error}</li>`).join('')}
                        </ul>
                    `;
                }

                $('#bulk-import-result')
                    .removeClass('alert-danger')
                    .addClass('alert-success')
                    .html(resultHtml)
                    .show();

                if (result.created > 0) {
                    loadIssuers();
                    loadStats();
                }
            } else {
                $('#bulk-import-result')
                    .removeClass('alert-success')
                    .addClass('alert-danger')
                    .html('导入失败: ' + response.message)
                    .show();
            }
        })
        .fail(function(xhr) {
            let message = '网络错误，请稍后重试';
            if (xhr.responseJSON && xhr.responseJSON.errors) {
                const errors = Object.values(xhr.responseJSON.errors).flat();
                message = errors.join('<br>');
            }
            $('#bulk-import-result')
                .removeClass('alert-success')
                .addClass('alert-danger')
                .html('导入失败: ' + message)
                .show();
        })
        .always(function() {
            $('#bulk-import-btn').prop('disabled', false).html('<i class="fas fa-upload"></i> 开始导入');
        });
    }

    // 更新Logo预览
    function updateLogoPreview() {
        const logoUrl = $('#issuer-logo-url').val().trim();
        const color = $('#issuer-color').val() || '#6c757d';
        const nameText = $('#issuer-name-shortest').val() || 
                        ($('#issuer-name-short').val() ? $('#issuer-name-short').val().charAt(0) : '') ||
                        ($('#issuer-name').val() ? $('#issuer-name').val().charAt(0) : '');
        
        const previewContainer = $('#logo-preview');
        
        if (logoUrl) {
            // 有Logo URL时显示图片预览
            previewContainer.html(`
                <img src="${logoUrl}" class="issuer-logo" alt="Logo预览" 
                     style="background-color: ${color};" 
                     onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                <div class="issuer-logo-placeholder" style="background-color: ${color}; display: none;">
                    ${nameText || '?'}
                </div>
            `);
        } else {
            // 没有Logo URL时显示占位符
            previewContainer.html(`
                <div class="issuer-logo-placeholder" style="background-color: ${color};">
                    ${nameText || '?'}
                </div>
            `);
        }
    }

    // 重置表单
    function resetForm() {
        $('#issuerForm')[0].reset();
        $('#issuer-id').val('');
        $('#issuer-card-issuer-code').val('');
        $('#issuer-color').val('#ffffff');
        $('#issuer-color-text').val('#ffffff');
        $('#issuer-channel-enabled').prop('checked', false);
        updateLogoPreview();
    }

    // 显示错误消息
    function showError(message) {
        $('#error-message').html(message).show();
    }

    // 显示成功消息
    function showSuccess(message) {
        // 可以使用toast或其他方式显示成功消息
        alert(message);
    }

    // 格式化日期
    function formatDate(dateString) {
        if (!dateString) return '-';
        const date = new Date(dateString);
        return date.toLocaleDateString('zh-CN') + ' ' + date.toLocaleTimeString('zh-CN', { hour12: false });
    }

    // 初始化时更新排序按钮状态
    updateSortButtons();
    
    // 添加全局测试函数
    window.testIssuerAPI = function() {
        console.log('=== 测试发卡行API ===');
        
        // 测试API连接
        $.get('/api/admin/issuers/counts')
            .done(function(response) {
                console.log('✅ 统计API正常:', response);
            })
            .fail(function(xhr) {
                console.error('❌ 统计API失败:', xhr);
            });
            
        // 测试数据API
        $.get('/api/admin/issuers/api?page=1&per_page=5')
            .done(function(response) {
                console.log('✅ 数据API正常:', response);
            })
            .fail(function(xhr) {
                console.error('❌ 数据API失败:', xhr);
            });
    };
    
    console.log('💡 提示：在浏览器控制台输入 testIssuerAPI() 来测试API连接');
});
</script>
@endpush