@extends('layouts.admin')

@section('title', 'Chỉnh sửa BattlePass')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <!-- Header -->
            <div class="page-header">
                <div class="page-header-content">
                    <h1 class="page-title">⚔️ Chỉnh sửa BattlePass</h1>
                    <p class="page-subtitle">Cập nhật thông tin và kéo dài thời gian BattlePass</p>
                </div>
                <div class="page-actions">
                    <a href="{{ route('admin.battle-pass.index') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left"></i> Quay lại
                    </a>
                </div>
            </div>

            <!-- Battle Pass Info -->
            <div class="info-card">
                <div class="info-header">
                    <h3>📋 Thông tin BattlePass</h3>
                </div>
                <div class="info-content">
                    <div class="info-grid">
                        <div class="info-item">
                            <label>Tên BattlePass:</label>
                            <span>{{ $battlePass->package_name }}</span>
                        </div>
                        <div class="info-item">
                            <label>Giá:</label>
                            <span>${{ number_format($battlePass->price, 2) }} / {{ number_format($battlePass->coins_price ?? 0) }} coins</span>
                        </div>
                        <div class="info-item">
                            <label>Thời gian:</label>
                            <span>{{ $battlePass->duration_days }} ngày</span>
                        </div>
                        <div class="info-item">
                            <label>Loại:</label>
                            <span class="status-badge">
                                @if($battlePass->is_template)
                                    📋 Template/Season (Edit không ảnh hưởng user đã mua)
                                @else
                                    👤 User Purchase (Chỉ extend/cancel)
                                @endif
                            </span>
                        </div>
                        <div class="info-item">
                            <label>Trạng thái:</label>
                            <span class="status-badge status-{{ $battlePass->status }}">
                                @if($battlePass->status === 'template')
                                    📋 Template
                                @elseif($battlePass->status === 'active')
                                    ✅ Đang hoạt động
                                @elseif($battlePass->status === 'expired')
                                    ⏰ Đã hết hạn
                                @else
                                    ❌ Đã hủy
                                @endif
                            </span>
                        </div>
                        @if($battlePass->is_template)
                        <div class="info-item">
                            <label>Hiển thị từ:</label>
                            <span>{{ $battlePass->display_start_date }}</span>
                        </div>
                        <div class="info-item">
                            <label>Hiển thị đến:</label>
                            <span>{{ $battlePass->display_end_date }}</span>
                        </div>
                        @else
                        <div class="info-item">
                            <label>Người chơi:</label>
                            <span>{{ $battlePass->username }}</span>
                        </div>
                        <div class="info-item">
                            <label>Ngày mua:</label>
                            <span>{{ $battlePass->purchased_at }}</span>
                        </div>
                        <div class="info-item">
                            <label>Hết hạn:</label>
                            <span>{{ $battlePass->expires_at }}</span>
                        </div>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Sync Messages -->
            @if(session('sync_info'))
            <div class="alert alert-success">
                <i class="fas fa-check-circle"></i>
                {{ session('sync_info') }}
            </div>
            @endif

            @if(session('sync_errors'))
            <div class="alert alert-warning">
                <i class="fas fa-exclamation-triangle"></i>
                {{ session('sync_errors') }}
            </div>
            @endif

            <!-- Edit Forms -->
            <div class="edit-forms">
                @if($battlePass->is_template)
                <!-- Template/Season Edit Form -->
                <div class="form-card">
                    <div class="form-header">
                        <h3>🔧 Chỉnh sửa Template/Season</h3>
                        <p>Cập nhật thông tin - User đã mua không bị ảnh hưởng</p>
                    </div>
                    <form action="{{ route('admin.battle-pass.update', $battlePass->id) }}" method="POST">
                        @csrf
                        @method('PUT')
                        <input type="hidden" name="action" value="update_template">
                        
                        <div class="form-row">
                            <div class="form-group">
                                <label for="package_name">Tên BattlePass *</label>
                                <input type="text" name="package_name" id="package_name" class="form-control" 
                                       value="{{ old('package_name', $battlePass->package_name) }}" required>
                            </div>
                            <div class="form-group">
                                <label for="usd_price">Giá USD *</label>
                                <input type="number" name="usd_price" id="usd_price" class="form-control" 
                                       value="{{ old('usd_price', $battlePass->price) }}" required min="0" step="0.01">
                            </div>
                            <div class="form-group">
                                <label for="coins_price">Giá Coins *</label>
                                <input type="number" name="coins_price" id="coins_price" class="form-control"
                                       value="{{ old('coins_price', $battlePass->coins_price) }}" required min="0" step="1000">
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group">
                                <label for="duration_days">Thời hạn (ngày) *</label>
                                <input type="number" name="duration_days" id="duration_days" class="form-control"
                                       value="{{ old('duration_days', $battlePass->duration_days) }}" required min="1" max="365">
                                <div class="help-text">Số ngày BattlePass có hiệu lực sau khi mua</div>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group">
                                <label for="display_start_date">
                                    <i class="fas fa-calendar-alt"></i>
                                    Hiển thị từ *
                                </label>
                                <input type="datetime-local" name="display_start_date" id="display_start_date" class="form-control"
                                       value="{{ old('display_start_date', date('Y-m-d\TH:i', strtotime($battlePass->display_start_date))) }}" required>
                                <div class="help-text">Thời điểm bắt đầu hiển thị BattlePass cho user</div>
                            </div>
                            <div class="form-group">
                                <label for="display_end_date">
                                    <i class="fas fa-calendar-times"></i>
                                    Hiển thị đến *
                                </label>
                                <div class="date-input-group">
                                    <input type="datetime-local" name="display_end_date" id="display_end_date" class="form-control"
                                           value="{{ old('display_end_date', date('Y-m-d\TH:i', strtotime($battlePass->display_end_date))) }}" required>
                                    <div class="date-shortcuts">
                                        <button type="button" class="btn-shortcut" onclick="setEndDate(7)">+7 ngày</button>
                                        <button type="button" class="btn-shortcut" onclick="setEndDate(15)">+15 ngày</button>
                                        <button type="button" class="btn-shortcut" onclick="setEndDate(30)">+30 ngày</button>
                                        <button type="button" class="btn-shortcut" onclick="setEndDateFromNow(7)">7 ngày từ hôm nay</button>
                                        <button type="button" class="btn-shortcut" onclick="setEndDateFromNow(15)">15 ngày từ hôm nay</button>
                                        <button type="button" class="btn-shortcut" onclick="setEndDateFromNow(30)">30 ngày từ hôm nay</button>
                                    </div>
                                </div>
                                <div class="help-text">Thời điểm ngừng hiển thị BattlePass (user không thể mua nữa)</div>
                            </div>
                        </div>

                        <!-- Display Duration Info -->
                        <div class="duration-info">
                            <div class="info-card">
                                <h4><i class="fas fa-info-circle"></i> Thông tin thời gian</h4>
                                <div class="info-grid">
                                    <div class="info-item">
                                        <label>Thời gian hiển thị:</label>
                                        <span id="display-duration">Đang tính toán...</span>
                                    </div>
                                    <div class="info-item">
                                        <label>Trạng thái hiện tại:</label>
                                        <span id="current-status">
                                            @php
                                                $now = now();
                                                $start = \Carbon\Carbon::parse($battlePass->display_start_date);
                                                $end = \Carbon\Carbon::parse($battlePass->display_end_date);

                                                if ($now < $start) {
                                                    echo '<span class="status-pending">Chưa bắt đầu</span>';
                                                } elseif ($now > $end) {
                                                    echo '<span class="status-expired">Đã kết thúc</span>';
                                                } else {
                                                    echo '<span class="status-active">Đang hoạt động</span>';
                                                }
                                            @endphp
                                        </span>
                                    </div>
                                    <div class="info-item">
                                        <label>Thời gian còn lại:</label>
                                        <span id="time-remaining">Đang tính toán...</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="description">Mô tả</label>
                            <textarea name="description" id="description" class="form-control" rows="3">{{ old('description', $battlePass->description) }}</textarea>
                        </div>

                        <!-- Đồng bộ thời gian với user đã mua -->
                        <div class="sync-options">
                            <div class="sync-card">
                                <h4><i class="fas fa-sync-alt"></i> Đồng bộ với User đã mua</h4>
                                <div class="form-group">
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input" id="sync_user_time" name="sync_user_time" value="1" checked>
                                        <label class="custom-control-label" for="sync_user_time">
                                            <strong>Đồng bộ thời gian với tất cả user đã mua Battle Pass này</strong>
                                        </label>
                                    </div>
                                    <div class="help-text">
                                        <i class="fas fa-info-circle text-info"></i>
                                        Khi bật tùy chọn này, thời gian hết hạn của tất cả user đã mua sẽ được điều chỉnh theo thời gian session mới.
                                        <br>
                                        <strong>Ví dụ:</strong> Nếu bạn rút ngắn session từ 30 ngày xuống 20 ngày, user đã mua cũng sẽ bị rút ngắn 10 ngày tương ứng.
                                    </div>
                                </div>

                                <!-- Hiển thị số user sẽ bị ảnh hưởng -->
                                <div class="affected-users" id="affected-users-info" style="display: none;">
                                    <div class="alert alert-warning">
                                        <i class="fas fa-users"></i>
                                        <span id="affected-count">0</span> user đã mua sẽ bị ảnh hưởng bởi thay đổi này.
                                        <br>
                                        <small>Hệ thống sẽ đảm bảo không ai bị hết hạn trước ngày mai.</small>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-actions">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i> Cập nhật Template/Season
                            </button>
                        </div>
                    </form>
                </div>
                @else
                <!-- User Purchase Edit Form -->
                <div class="form-card">
                    <div class="form-header">
                        <h3>⏰ Kéo dài thời gian</h3>
                        <p>Gia hạn BattlePass cho người chơi</p>
                    </div>
                    <form action="{{ route('admin.battle-pass.extend', $battlePass->id) }}" method="POST">
                        @csrf
                        <div class="form-row">
                            <div class="form-group">
                                <label for="extend_days">Số ngày kéo dài *</label>
                                <input type="number" name="extend_days" id="extend_days" class="form-control" 
                                       placeholder="VD: 30" value="{{ old('extend_days') }}" required min="1" max="365">
                                <div class="help-text">Số ngày muốn gia hạn thêm</div>
                            </div>
                            <div class="form-group">
                                <label for="reason">Lý do gia hạn *</label>
                                <input type="text" name="reason" id="reason" class="form-control" 
                                       placeholder="VD: Bù đắp lỗi server" value="{{ old('reason') }}" required>
                                <div class="help-text">Lý do gia hạn để ghi log</div>
                            </div>
                        </div>

                        <div class="extend-preview">
                            <div class="preview-item">
                                <label>Hết hạn hiện tại:</label>
                                <span>{{ $battlePass->expires_at }}</span>
                            </div>
                            <div class="preview-item">
                                <label>Hết hạn sau khi gia hạn:</label>
                                <span id="new-expiry">Nhập số ngày để xem</span>
                            </div>
                        </div>

                        <div class="form-actions">
                            <button type="submit" class="btn btn-warning">
                                <i class="fas fa-clock"></i> Gia hạn BattlePass
                            </button>
                        </div>
                    </form>
                </div>

                <!-- Cancel Form -->
                <div class="form-card danger-card">
                    <div class="form-header">
                        <h3>❌ Hủy BattlePass</h3>
                        <p>Hủy BattlePass của người chơi (không thể hoàn tác)</p>
                    </div>
                    <form action="{{ route('admin.battle-pass.cancel', $battlePass->id) }}" method="POST" 
                          onsubmit="return confirm('Bạn có chắc muốn hủy BattlePass này? Hành động này không thể hoàn tác!')">
                        @csrf
                        <div class="form-group">
                            <label for="cancel_reason">Lý do hủy *</label>
                            <input type="text" name="reason" id="cancel_reason" class="form-control" 
                                   placeholder="VD: Vi phạm quy định" value="{{ old('reason') }}" required>
                        </div>

                        <div class="form-actions">
                            <button type="submit" class="btn btn-danger">
                                <i class="fas fa-ban"></i> Hủy BattlePass
                            </button>
                        </div>
                    </form>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>

<style>
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding: 20px 0;
    border-bottom: 1px solid #e2e8f0;
}

.page-title {
    font-size: 2rem;
    font-weight: 700;
    color: #1a202c;
    margin: 0;
}

.page-subtitle {
    color: #6b7280;
    margin: 5px 0 0 0;
}

.info-card, .form-card {
    background: white;
    border-radius: 18px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    border: 1px solid #e2e8f0;
    margin-bottom: 25px;
    overflow: hidden;
}

.info-header, .form-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px 25px;
}

.info-header h3, .form-header h3 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 600;
}

.form-header p {
    margin: 5px 0 0 0;
    opacity: 0.9;
    font-size: 0.9rem;
}

.info-content {
    padding: 25px;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.info-item label {
    font-weight: 600;
    color: #374151;
    font-size: 0.9rem;
}

.info-item span {
    color: #6b7280;
    font-size: 0.95rem;
}

.status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.status-template { background: #dbeafe; color: #1e40af; }
.status-active { background: #dcfce7; color: #166534; }
.status-expired { background: #fef3c7; color: #92400e; }
.status-cancelled { background: #fee2e2; color: #dc2626; }

.form-card form {
    padding: 25px;
}

.danger-card .form-header {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-weight: 600;
    color: #374151;
    font-size: 0.9rem;
}

.form-control {
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.form-control:focus {
    outline: none;
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.help-text {
    font-size: 0.8rem;
    color: #6b7280;
    margin-top: 4px;
}

.extend-preview {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
}

.preview-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.preview-item:last-child {
    margin-bottom: 0;
}

.preview-item label {
    font-weight: 600;
    color: #374151;
}

.preview-item span {
    color: #6b7280;
    font-family: monospace;
}

/* Date Input Enhancements */
.date-input-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.date-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.btn-shortcut {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-shortcut:hover {
    background: #e2e8f0;
    border-color: #94a3b8;
    color: #334155;
}

.btn-shortcut:active {
    background: #cbd5e1;
    transform: translateY(1px);
}

/* Duration Info Card */
.duration-info {
    margin: 1.5rem 0;
    padding: 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.info-card h4 {
    margin: 0 0 1rem 0;
    color: #374151;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.info-card h4 i {
    color: #3b82f6;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.info-item label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #6b7280;
}

.info-item span {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
}

.status-active {
    color: #059669 !important;
    background: #d1fae5;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
}

.status-pending {
    color: #d97706 !important;
    background: #fef3c7;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
}

.status-expired {
    color: #dc2626 !important;
    background: #fee2e2;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
}

.form-actions {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}

.btn {
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.btn-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

.btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

.btn-secondary {
    background: #f3f4f6;
    color: #374151;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

/* Sync Options Styles */
.sync-options {
    margin: 1.5rem 0;
}

.sync-card {
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.sync-card h4 {
    margin: 0 0 1rem 0;
    color: #374151;
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sync-card h4 i {
    color: #3b82f6;
}

.custom-control {
    position: relative;
    display: block;
    min-height: 1.5rem;
    padding-left: 1.5rem;
}

.custom-control-input {
    position: absolute;
    left: 0;
    z-index: -1;
    width: 1rem;
    height: 1.25rem;
    opacity: 0;
}

.custom-control-label {
    position: relative;
    margin-bottom: 0;
    vertical-align: top;
    cursor: pointer;
    font-weight: 500;
    color: #374151;
}

.custom-control-label::before {
    position: absolute;
    top: 0.25rem;
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    pointer-events: none;
    content: "";
    background-color: #fff;
    border: 2px solid #cbd5e1;
    border-radius: 0.25rem;
    transition: all 0.2s ease;
}

.custom-control-input:checked ~ .custom-control-label::before {
    color: #fff;
    border-color: #3b82f6;
    background-color: #3b82f6;
}

.custom-control-label::after {
    position: absolute;
    top: 0.25rem;
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    content: "";
    background: no-repeat 50%/50% 50%;
    transition: all 0.2s ease;
}

.custom-control-input:checked ~ .custom-control-label::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='m6.564.75-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
}

.affected-users {
    margin-top: 1rem;
}

.alert {
    position: relative;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.375rem;
}

.alert-warning {
    color: #92400e;
    background-color: #fef3c7;
    border-color: #fde68a;
}

.alert-success {
    color: #065f46;
    background-color: #d1fae5;
    border-color: #a7f3d0;
}

.alert i {
    margin-right: 0.5rem;
}
</style>

<script>
// Date shortcut functions
function setEndDate(daysFromStart) {
    const startInput = document.getElementById('display_start_date');
    const endInput = document.getElementById('display_end_date');

    if (startInput.value) {
        const startDate = new Date(startInput.value);
        const endDate = new Date(startDate.getTime() + (daysFromStart * 24 * 60 * 60 * 1000));

        // Format to datetime-local format
        const year = endDate.getFullYear();
        const month = String(endDate.getMonth() + 1).padStart(2, '0');
        const day = String(endDate.getDate()).padStart(2, '0');
        const hours = String(endDate.getHours()).padStart(2, '0');
        const minutes = String(endDate.getMinutes()).padStart(2, '0');

        endInput.value = `${year}-${month}-${day}T${hours}:${minutes}`;
        updateDurationInfo();
    } else {
        alert('Vui lòng chọn ngày bắt đầu trước!');
    }
}

function setEndDateFromNow(daysFromNow) {
    const endInput = document.getElementById('display_end_date');
    const now = new Date();
    const endDate = new Date(now.getTime() + (daysFromNow * 24 * 60 * 60 * 1000));

    // Format to datetime-local format
    const year = endDate.getFullYear();
    const month = String(endDate.getMonth() + 1).padStart(2, '0');
    const day = String(endDate.getDate()).padStart(2, '0');
    const hours = String(endDate.getHours()).padStart(2, '0');
    const minutes = String(endDate.getMinutes()).padStart(2, '0');

    endInput.value = `${year}-${month}-${day}T${hours}:${minutes}`;
    updateDurationInfo();
}

function updateDurationInfo() {
    const startInput = document.getElementById('display_start_date');
    const endInput = document.getElementById('display_end_date');
    const durationSpan = document.getElementById('display-duration');
    const timeRemainingSpan = document.getElementById('time-remaining');

    if (startInput.value && endInput.value) {
        const startDate = new Date(startInput.value);
        const endDate = new Date(endInput.value);
        const now = new Date();

        // Calculate display duration
        const durationMs = endDate.getTime() - startDate.getTime();
        const durationDays = Math.ceil(durationMs / (1000 * 60 * 60 * 24));

        if (durationDays > 0) {
            durationSpan.textContent = `${durationDays} ngày`;
        } else {
            durationSpan.textContent = 'Ngày kết thúc phải sau ngày bắt đầu!';
            durationSpan.style.color = '#dc2626';
            return;
        }

        // Calculate time remaining
        if (now < startDate) {
            const timeToStart = startDate.getTime() - now.getTime();
            const daysToStart = Math.ceil(timeToStart / (1000 * 60 * 60 * 24));
            timeRemainingSpan.textContent = `Bắt đầu sau ${daysToStart} ngày`;
            timeRemainingSpan.style.color = '#d97706';
        } else if (now > endDate) {
            timeRemainingSpan.textContent = 'Đã kết thúc';
            timeRemainingSpan.style.color = '#dc2626';
        } else {
            const timeRemaining = endDate.getTime() - now.getTime();
            const daysRemaining = Math.ceil(timeRemaining / (1000 * 60 * 60 * 24));
            timeRemainingSpan.textContent = `Còn ${daysRemaining} ngày`;
            timeRemainingSpan.style.color = '#059669';
        }

        // Reset color if no error
        if (durationDays > 0) {
            durationSpan.style.color = '#374151';
        }
    }
}

// Calculate new expiry date for extend form
if (document.getElementById('extend_days')) {
    document.getElementById('extend_days').addEventListener('input', function() {
        const days = parseInt(this.value);
        const currentExpiry = new Date('{{ $battlePass->expires_at }}');

        if (days && days > 0) {
            const newExpiry = new Date(currentExpiry.getTime() + (days * 24 * 60 * 60 * 1000));
            document.getElementById('new-expiry').textContent = newExpiry.toLocaleString('vi-VN');
        } else {
            document.getElementById('new-expiry').textContent = 'Nhập số ngày để xem';
        }
    });
}

// Lấy số user bị ảnh hưởng
function getAffectedUsersCount() {
    const templateId = {{ $battlePass->id }};

    fetch(`/admin/battle-pass/get-affected-users/${templateId}`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                document.getElementById('affected-count').textContent = data.count;

                const affectedInfo = document.getElementById('affected-users-info');
                const syncCheckbox = document.getElementById('sync_user_time');

                if (data.count > 0 && syncCheckbox.checked) {
                    affectedInfo.style.display = 'block';
                } else {
                    affectedInfo.style.display = 'none';
                }
            }
        })
        .catch(error => {
            console.error('Error fetching affected users count:', error);
        });
}

// Initialize duration info and add event listeners
document.addEventListener('DOMContentLoaded', function() {
    const startInput = document.getElementById('display_start_date');
    const endInput = document.getElementById('display_end_date');
    const syncCheckbox = document.getElementById('sync_user_time');

    if (startInput && endInput) {
        updateDurationInfo();

        startInput.addEventListener('change', updateDurationInfo);
        endInput.addEventListener('change', updateDurationInfo);
    }

    // Sync checkbox event listener
    if (syncCheckbox) {
        syncCheckbox.addEventListener('change', function() {
            if (this.checked) {
                getAffectedUsersCount();
            } else {
                document.getElementById('affected-users-info').style.display = 'none';
            }
        });

        // Load affected users count on page load
        getAffectedUsersCount();
    }
});
</script>
@endsection