@extends('layouts.admin')

@section('title', 'Quản lý Giftcode - MU Admin Panel')

@section('styles')
<style>
    .breadcrumb {
        color: white;
        margin-bottom: 20px;
        opacity: 0.8;
    }
    .breadcrumb a {
        color: white;
        text-decoration: none;
    }
    .breadcrumb a:hover {
        text-decoration: underline;
    }
    .page-header {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(16px);
        border-radius: 15px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        padding: 30px;
        margin-bottom: 30px;
        color: white;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .page-title {
        font-size: 28px;
        font-weight: 700;
        margin-bottom: 10px;
    }
    .page-subtitle {
        opacity: 0.8;
        font-size: 16px;
    }
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
        margin-bottom: 30px;
    }
    .stat-card {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(16px);
        border-radius: 15px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        padding: 25px;
        color: white;
        text-align: center;
    }
    .stat-icon {
        font-size: 32px;
        margin-bottom: 15px;
    }
    .stat-value {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 5px;
    }
    .stat-label {
        opacity: 0.8;
        font-size: 14px;
    }
    .filter-section {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(16px);
        border-radius: 15px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        padding: 25px;
        margin-bottom: 30px;
    }
    .filter-form {
        display: flex;
        gap: 15px;
        align-items: end;
        flex-wrap: wrap;
    }
    .form-group {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }
    .form-group label {
        color: white;
        font-weight: 500;
        font-size: 14px;
    }
    .form-control {
        padding: 12px 16px;
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.1);
        color: white;
        font-size: 14px;
        min-width: 150px;
    }
    .form-control:focus {
        outline: none;
        border-color: #3b82f6;
        background: rgba(255, 255, 255, 0.15);
    }
    .btn {
        padding: 12px 24px;
        border: none;
        border-radius: 8px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        text-decoration: none;
        display: inline-block;
        text-align: center;
        font-size: 14px;
    }
    .btn-primary {
        background: linear-gradient(45deg, #3b82f6, #2563eb);
        color: white;
    }
    .btn-success {
        background: linear-gradient(45deg, #10b981, #059669);
        color: white;
    }
    .btn-danger {
        background: linear-gradient(45deg, #ef4444, #dc2626);
        color: white;
    }
    .btn:hover {
        transform: translateY(-2px);
    }
    .giftcode-table {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(16px);
        border-radius: 15px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        overflow: hidden;
    }
    .table-header {
        background: rgba(255, 255, 255, 0.1);
        padding: 20px 25px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .table-title {
        color: white;
        font-size: 18px;
        font-weight: 600;
    }
    .table-responsive {
        overflow-x: auto;
        max-height: 70vh;
        overflow-y: auto;
    }
    table {
        width: 100%;
        border-collapse: collapse;
        min-width: 1000px;
    }
    th, td {
        padding: 15px 20px;
        text-align: left;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        white-space: nowrap;
    }
    th {
        background: rgba(255, 255, 255, 0.15);
        color: white;
        font-weight: 600;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        position: sticky;
        top: 0;
        z-index: 10;
        backdrop-filter: blur(16px);
    }
    td {
        color: white;
        font-size: 14px;
    }
    tr:hover {
        background: rgba(255, 255, 255, 0.05);
    }
    .status-badge {
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .status-active {
        background: rgba(16, 185, 129, 0.2);
        color: #10b981;
        border: 1px solid rgba(16, 185, 129, 0.3);
    }
    .status-expired {
        background: rgba(239, 68, 68, 0.2);
        color: #ef4444;
        border: 1px solid rgba(239, 68, 68, 0.3);
    }
    .status-inactive {
        background: rgba(107, 114, 128, 0.2);
        color: #9ca3af;
        border: 1px solid rgba(107, 114, 128, 0.3);
    }
    .type-badge {
        padding: 4px 8px;
        border-radius: 6px;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
    }
    .type-public {
        background: rgba(59, 130, 246, 0.2);
        color: #3b82f6;
        border: 1px solid rgba(59, 130, 246, 0.3);
    }
    .type-vip {
        background: rgba(139, 92, 246, 0.2);
        color: #8b5cf6;
        border: 1px solid rgba(139, 92, 246, 0.3);
    }
    .type-event {
        background: rgba(245, 158, 11, 0.2);
        color: #f59e0b;
        border: 1px solid rgba(245, 158, 11, 0.3);
    }
    .type-limited {
        background: rgba(239, 68, 68, 0.2);
        color: #ef4444;
        border: 1px solid rgba(239, 68, 68, 0.3);
    }
    .type-guild {
        background: rgba(16, 185, 129, 0.2);
        color: #10b981;
        border: 1px solid rgba(16, 185, 129, 0.3);
    }
    .code-text {
        font-family: 'Courier New', monospace;
        background: rgba(255, 255, 255, 0.1);
        padding: 4px 8px;
        border-radius: 4px;
        font-weight: 600;
    }
    .progress-bar {
        width: 100px;
        height: 8px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 4px;
        overflow: hidden;
    }
    .progress-fill {
        height: 100%;
        background: linear-gradient(45deg, #10b981, #059669);
        transition: width 0.3s ease;
    }
    .action-buttons {
        display: flex;
        gap: 8px;
    }
    .btn-sm {
        padding: 6px 12px;
        font-size: 12px;
    }
    .no-data {
        text-align: center;
        padding: 60px 20px;
        color: white;
        opacity: 0.7;
    }

    /* Mobile Responsive */
    @media (max-width: 768px) {
        .page-header {
            flex-direction: column;
            gap: 20px;
            text-align: center;
        }
        .filter-form {
            flex-direction: column;
            align-items: stretch;
        }
        .form-control {
            min-width: auto;
            width: 100%;
        }
        .btn {
            width: 100%;
            margin-top: 10px;
        }
        .stats-grid {
            grid-template-columns: 1fr;
            gap: 15px;
        }
        th, td {
            padding: 10px 8px;
            font-size: 12px;
        }
        .action-buttons {
            flex-direction: column;
        }
    }
</style>
@endsection

@section('content')
<div class="container">
    <!-- Breadcrumb -->
    <div class="breadcrumb">
        <a href="/admin/dashboard">Dashboard</a> /
        Quản lý Giftcode
    </div>

    <!-- Page Header -->
    <div class="page-header">
        <div>
            <h1 class="page-title">🎁 Quản lý Giftcode</h1>
            <p class="page-subtitle">Tạo và quản lý các mã giftcode cho người chơi</p>
        </div>
        <a href="{{ route('admin.giftcode.create') }}" class="btn btn-success">➕ Tạo Giftcode mới</a>
    </div>

    <!-- Statistics -->
    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-icon">📊</div>
            <div class="stat-value">{{ number_format($stats['total_codes']) }}</div>
            <div class="stat-label">Tổng số giftcode</div>
        </div>
        <div class="stat-card">
            <div class="stat-icon">✅</div>
            <div class="stat-value">{{ number_format($stats['active_codes']) }}</div>
            <div class="stat-label">Đang hoạt động</div>
        </div>
        <div class="stat-card">
            <div class="stat-icon">⏰</div>
            <div class="stat-value">{{ number_format($stats['expired_codes']) }}</div>
            <div class="stat-label">Đã hết hạn</div>
        </div>
        <div class="stat-card">
            <div class="stat-icon">🎯</div>
            <div class="stat-value">{{ number_format($stats['total_usage']) }}</div>
            <div class="stat-label">Lượt sử dụng</div>
        </div>
    </div>

    <!-- Filter Section -->
    <div class="filter-section">
        <form method="GET" action="{{ route('admin.giftcode.index') }}" class="filter-form">
            <div class="form-group">
                <label>Tìm kiếm</label>
                <input type="text" name="search" class="form-control" placeholder="Mã code, tên..." value="{{ $search }}">
            </div>
            <div class="form-group">
                <label>Trạng thái</label>
                <select name="status" class="form-control">
                    <option value="all" {{ $statusFilter == 'all' ? 'selected' : '' }}>Tất cả</option>
                    <option value="active" {{ $statusFilter == 'active' ? 'selected' : '' }}>Hoạt động</option>
                    <option value="expired" {{ $statusFilter == 'expired' ? 'selected' : '' }}>Hết hạn</option>
                    <option value="inactive" {{ $statusFilter == 'inactive' ? 'selected' : '' }}>Vô hiệu hóa</option>
                </select>
            </div>
            <div class="form-group">
                <label>Loại</label>
                <select name="type" class="form-control">
                    <option value="all" {{ $typeFilter == 'all' ? 'selected' : '' }}>Tất cả</option>
                    <option value="1" {{ $typeFilter == '1' ? 'selected' : '' }}>Công khai</option>
                    <option value="2" {{ $typeFilter == '2' ? 'selected' : '' }}>Riêng tư</option>
                    <option value="0" {{ $typeFilter == '0' ? 'selected' : '' }}>Theo nhân vật</option>
                </select>
            </div>
            <button type="submit" class="btn btn-primary">🔍 Tìm kiếm</button>
        </form>
    </div>

    <!-- Giftcode Table -->
    <div class="giftcode-table">
        <div class="table-header">
            <h3 class="table-title">📋 Danh sách Giftcode</h3>
            <a href="{{ route('admin.giftcode.usage-report') }}" class="btn btn-primary btn-sm">📊 Báo cáo sử dụng</a>
        </div>

        @if($giftcodes->count() > 0)
            <div class="table-responsive">
                <table>
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Mã Code</th>
                            <th>Tên</th>
                            <th>Loại</th>
                            <th>Sử dụng</th>
                            <th>Tiến độ</th>
                            <th>Trạng thái</th>
                            <th>Hết hạn</th>
                            <th>Hành động</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($giftcodes as $giftcode)
                            @php
                                $isExpired = $giftcode->period > 0 && \Carbon\Carbon::parse($giftcode->created_at)->addDays($giftcode->period)->isPast();
                                $isUsedUp = $giftcode->limit > 0 && $giftcode->usage_count >= $giftcode->limit;
                                $progressPercent = $giftcode->limit > 0 ? ($giftcode->usage_count / $giftcode->limit) * 100 : 0;

                                // Handle multiple codes display
                                $codes = $giftcode->getCodesArray();
                                $codeDisplay = '';

                                if (!empty($codes) && is_array($codes)) {
                                    $codeDisplay = count($codes) > 1 ? $codes[0] . ' (+' . (count($codes)-1) . ' khác)' : $codes[0];
                                } else {
                                    $codeDisplay = 'N/A';
                                }

                                // Type display
                                $typeText = '';
                                $typeClass = '';
                                switch($giftcode->type) {
                                    case 1:
                                        $typeText = 'Công khai';
                                        $typeClass = 'public';
                                        break;
                                    case 2:
                                        $typeText = 'Riêng tư';
                                        $typeClass = 'vip';
                                        break;
                                    case 0:
                                        $typeText = 'Theo NV';
                                        $typeClass = 'event';
                                        break;
                                    case 3:
                                        $typeText = 'Bang hội';
                                        $typeClass = 'guild';
                                        break;
                                    default:
                                        $typeText = 'Khác';
                                        $typeClass = 'limited';
                                }
                            @endphp
                            <tr>
                                <td>{{ $giftcode->id }}</td>
                                <td>
                                    <span class="code-text">{{ $codeDisplay }}</span>
                                </td>
                                <td>{{ $giftcode->name ?: $giftcode->content }}</td>
                                <td>
                                    <span class="type-badge type-{{ $typeClass }}">
                                        {{ $typeText }}
                                    </span>
                                </td>
                                <td>{{ number_format($giftcode->usage_count) }}/{{ $giftcode->limit > 0 ? number_format($giftcode->limit) : '∞' }}</td>
                                <td>
                                    <div class="progress-bar">
                                        <div class="progress-fill" style="width: {{ $progressPercent }}%"></div>
                                    </div>
                                </td>
                                <td>
                                    @if(!$giftcode->is_active)
                                        <span class="status-badge status-inactive">Vô hiệu hóa</span>
                                    @elseif($isExpired)
                                        <span class="status-badge status-expired">Hết hạn</span>
                                    @elseif($isUsedUp)
                                        <span class="status-badge status-expired">Hết lượt</span>
                                    @else
                                        <span class="status-badge status-active">Hoạt động</span>
                                    @endif
                                </td>
                                <td>
                                    @if($giftcode->period > 0)
                                        {{ \Carbon\Carbon::parse($giftcode->created_at)->addDays($giftcode->period)->format('d/m/Y H:i') }}
                                    @else
                                        Không giới hạn
                                    @endif
                                </td>
                                <td>
                                    <div class="action-buttons">
                                        <a href="{{ route('admin.giftcode.show', $giftcode->id) }}" class="btn btn-primary btn-sm" title="Xem chi tiết">👁️</a>
                                        <a href="{{ route('admin.giftcode.edit', $giftcode->id) }}" class="btn btn-primary btn-sm" title="Chỉnh sửa">✏️</a>
                                        @if($giftcode->type == 2)
                                            <button onclick="manageAccounts({{ $giftcode->id }}, '{{ $giftcode->name ?: $giftcode->content }}')" class="btn btn-success btn-sm" title="Quản lý tài khoản">👥</button>
                                        @endif
                                        <button onclick="deleteGiftcode({{ $giftcode->id }})" class="btn btn-danger btn-sm" title="Xóa">🗑️</button>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <!-- Pagination -->
            <div style="padding: 20px 25px;">
                {{ $giftcodes->appends(request()->query())->links() }}
            </div>
        @else
            <div class="no-data">
                <h3>📋 Không có giftcode nào</h3>
                <p>Hãy tạo giftcode đầu tiên để bắt đầu.</p>
                <a href="{{ route('admin.giftcode.create') }}" class="btn btn-success" style="margin-top: 20px;">➕ Tạo Giftcode mới</a>
            </div>
        @endif
    </div>
</div>

<!-- Account Management Modal -->
<div id="accountModal" class="modal" style="display: none;">
    <div class="modal-content">
        <div class="modal-header">
            <h3 id="modalTitle">Quản lý tài khoản được phép</h3>
            <span class="close" onclick="closeAccountModal()">&times;</span>
        </div>
        <div class="modal-body">
            <!-- Add Single Account -->
            <div class="add-account-section">
                <h4>Thêm tài khoản đơn lẻ</h4>
                <div class="add-form">
                    <input type="text" id="singleAccountName" placeholder="Tên tài khoản" class="form-control">
                    <input type="text" id="singleAccountNote" placeholder="Ghi chú (tùy chọn)" class="form-control">
                    <button onclick="addSingleAccount()" class="btn btn-success">Thêm</button>
                </div>
            </div>

            <!-- Add Multiple Accounts -->
            <div class="add-account-section">
                <h4>Thêm nhiều tài khoản</h4>
                <div class="bulk-form">
                    <textarea id="bulkAccounts" placeholder="Nhập tên tài khoản, cách nhau bằng dấu phẩy&#10;Ví dụ: user1,user2,user3" class="form-control" rows="3"></textarea>
                    <input type="text" id="bulkNote" placeholder="Ghi chú chung (tùy chọn)" class="form-control">
                    <button onclick="addBulkAccounts()" class="btn btn-success">Thêm tất cả</button>
                </div>
            </div>

            <!-- Account List -->
            <div class="account-list-section">
                <h4>Danh sách tài khoản hiện tại</h4>
                <div id="accountList" class="account-list">
                    <!-- Will be populated by JavaScript -->
                </div>
            </div>
        </div>
    </div>
</div>

<style>
/* Modal Styles */
.modal {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    backdrop-filter: blur(5px);
}

.modal-content {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    margin: 5% auto;
    padding: 0;
    border-radius: 15px;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

.modal-header {
    padding: 25px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
}

.modal-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}

.close {
    color: white;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}

.close:hover {
    opacity: 0.7;
}

.modal-body {
    padding: 25px;
}

.add-account-section {
    background: rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid rgba(255,255,255,0.2);
}

.add-account-section h4 {
    color: white;
    margin: 0 0 15px 0;
    font-size: 16px;
    font-weight: 600;
}

.add-form, .bulk-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: end;
}

.add-form .form-control, .bulk-form .form-control {
    flex: 1;
    min-width: 150px;
}

.account-list {
    max-height: 300px;
    overflow-y: auto;
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
    padding: 15px;
}

.account-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: rgba(255,255,255,0.1);
    border-radius: 8px;
    margin-bottom: 10px;
    color: white;
}

.account-info {
    flex: 1;
}

.account-name {
    font-weight: 600;
    font-size: 14px;
}

.account-details {
    font-size: 12px;
    opacity: 0.8;
    margin-top: 2px;
}

.account-status {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    margin-right: 10px;
}

.status-exists {
    background: rgba(16, 185, 129, 0.3);
    color: #10b981;
}

.status-not-exists {
    background: rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.remove-account-btn {
    background: #ef4444;
    color: white;
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

.remove-account-btn:hover {
    background: #dc2626;
}

.empty-list {
    text-align: center;
    color: rgba(255,255,255,0.7);
    padding: 30px;
    font-style: italic;
}

@media (max-width: 768px) {
    .modal-content {
        width: 95%;
        margin: 2% auto;
    }

    .add-form, .bulk-form {
        flex-direction: column;
    }

    .add-form .form-control, .bulk-form .form-control {
        min-width: auto;
        width: 100%;
    }
}
</style>

<script>
let currentGiftcodeId = null;

function deleteGiftcode(id) {
    if (!confirm('Bạn có chắc chắn muốn xóa giftcode này?')) {
        return;
    }

    fetch(`/admin/giftcode/${id}`, {
        method: 'DELETE',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert(data.message);
            location.reload();
        } else {
            alert('Lỗi: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Có lỗi xảy ra khi xóa giftcode');
    });
}

// Account Management Functions
function manageAccounts(giftcodeId, giftcodeName) {
    currentGiftcodeId = giftcodeId;
    document.getElementById('modalTitle').textContent = `Quản lý tài khoản - ${giftcodeName}`;
    document.getElementById('accountModal').style.display = 'block';
    loadAccounts();
}

function closeAccountModal() {
    document.getElementById('accountModal').style.display = 'none';
    currentGiftcodeId = null;
    // Clear forms
    document.getElementById('singleAccountName').value = '';
    document.getElementById('singleAccountNote').value = '';
    document.getElementById('bulkAccounts').value = '';
    document.getElementById('bulkNote').value = '';
}

function loadAccounts() {
    if (!currentGiftcodeId) return;

    fetch(`/admin/giftcode/${currentGiftcodeId}/accounts`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                displayAccounts(data.accounts);
            } else {
                alert('Lỗi khi tải danh sách tài khoản: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Lỗi kết nối khi tải danh sách tài khoản');
        });
}

function displayAccounts(accounts) {
    const accountList = document.getElementById('accountList');

    if (accounts.length === 0) {
        accountList.innerHTML = '<div class="empty-list">Chưa có tài khoản nào được thêm</div>';
        return;
    }

    accountList.innerHTML = accounts.map(account => `
        <div class="account-item">
            <div class="account-info">
                <div class="account-name">${account.account_name}</div>
                <div class="account-details">
                    <span class="account-status ${account.account_exists ? 'status-exists' : 'status-not-exists'}">
                        ${account.account_exists ? 'Tồn tại' : 'Chưa tồn tại'}
                    </span>
                    Thêm bởi: ${account.added_by || 'N/A'} | ${account.created_at}
                    ${account.note ? `| Ghi chú: ${account.note}` : ''}
                </div>
            </div>
            <button onclick="removeAccount(${account.id})" class="remove-account-btn">Xóa</button>
        </div>
    `).join('');
}

function addSingleAccount() {
    const accountName = document.getElementById('singleAccountName').value.trim();
    const note = document.getElementById('singleAccountNote').value.trim();

    if (!accountName) {
        alert('Vui lòng nhập tên tài khoản');
        return;
    }

    if (!currentGiftcodeId) return;

    fetch(`/admin/giftcode/${currentGiftcodeId}/accounts`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify({
            account_name: accountName,
            note: note
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert(data.message);
            if (data.warning) {
                alert('Cảnh báo: ' + data.warning);
            }
            // Clear form
            document.getElementById('singleAccountName').value = '';
            document.getElementById('singleAccountNote').value = '';
            // Reload accounts
            loadAccounts();
        } else {
            alert('Lỗi: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Lỗi kết nối khi thêm tài khoản');
    });
}

function addBulkAccounts() {
    const accounts = document.getElementById('bulkAccounts').value.trim();
    const note = document.getElementById('bulkNote').value.trim();

    if (!accounts) {
        alert('Vui lòng nhập danh sách tài khoản');
        return;
    }

    if (!currentGiftcodeId) return;

    fetch(`/admin/giftcode/${currentGiftcodeId}/accounts/bulk-add`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify({
            accounts: accounts,
            note: note
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert(data.message);
            if (data.warning) {
                alert('Cảnh báo: ' + data.warning);
            }
            // Clear form
            document.getElementById('bulkAccounts').value = '';
            document.getElementById('bulkNote').value = '';
            // Reload accounts
            loadAccounts();
        } else {
            alert('Lỗi: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Lỗi kết nối khi thêm tài khoản');
    });
}

function removeAccount(accountId) {
    if (!confirm('Bạn có chắc muốn xóa tài khoản này khỏi danh sách?')) {
        return;
    }

    if (!currentGiftcodeId) return;

    fetch(`/admin/giftcode/${currentGiftcodeId}/accounts/${accountId}`, {
        method: 'DELETE',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert(data.message);
            loadAccounts();
        } else {
            alert('Lỗi: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Lỗi kết nối khi xóa tài khoản');
    });
}

// Close modal when clicking outside
window.onclick = function(event) {
    const modal = document.getElementById('accountModal');
    if (event.target == modal) {
        closeAccountModal();
    }
}
</script>
@endsection