@extends('layouts.admin')

@section('title', 'Tạo Battle Pass - MU Admin Panel')

@section('styles')
<style>
        .nav-links a:hover, .nav-links a.active {
            background: rgba(255, 255, 255, 0.1);
        }
        .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;
            text-align: center;
        }
        .page-title {
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 10px;
        }
        .page-subtitle {
            opacity: 0.8;
            font-size: 16px;
        }
        .form-container {
            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;
        }
        .form-group {
            margin-bottom: 25px;
        }
        .form-group label {
            display: block;
            color: white;
            font-weight: 600;
            margin-bottom: 8px;
            font-size: 14px;
        }
        .form-control {
            width: 100%;
            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;
            transition: all 0.2s;
        }
        .form-control:focus {
            outline: none;
            border-color: #8b5cf6;
            background: rgba(255, 255, 255, 0.15);
            box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
        }
        .form-control::placeholder {
            color: rgba(255, 255, 255, 0.6);
        }
        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
        .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, #8b5cf6, #7c3aed);
            color: white;
        }
        .btn-secondary {
            background: rgba(255, 255, 255, 0.1);
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.3);
        }
        .btn:hover {
            transform: translateY(-2px);
        }
        .btn-group {
            display: flex;
            gap: 15px;
            justify-content: center;
            margin-top: 30px;
        }
        .alert alert-error {
            background: rgba(239, 68, 68, 0.2);
            border: 1px solid rgba(239, 68, 68, 0.3);
            color: white;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        .help-text {
            font-size: 12px;
            color: rgba(255, 255, 255, 0.7);
            margin-top: 5px;
        }

</style>

@section('content')

    <!-- Main Content -->
    <div class="container">
        <!-- Page Header -->
        <div class="page-header">
            <h1 class="page-title">⚔️ Tạo Battle Pass</h1>
            <p class="page-subtitle">Tạo gói battle pass cho tất cả user có thể mua</p>
        </div>

        <!-- Error Messages -->
        @if($errors->any())
            <div class="alert alert-error">
                <strong>❌ Có lỗi xảy ra:</strong>
                <ul style="margin: 10px 0 0 20px;">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <!-- Form -->
        <div class="form-container">
            <form action="{{ route('admin.battle-pass.store') }}" method="POST" id="createForm">
                @csrf
                
                <!-- Hidden field to mark as template -->
                <input type="hidden" name="is_template" value="1">

                <!-- Season Details -->
                <div class="form-row">
                    <div class="form-group">
                        <label for="season_name">Tên BattlePass *</label>
                        <input type="text" name="season_name" id="season_name" class="form-control" placeholder="VD: BattlePass Premium" value="{{ old('season_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" placeholder="50" value="{{ old('usd_price', 50) }}" required min="0" step="0.01">
                        <div class="help-text">Giá bằng đô la Mỹ (USD)</div>
                    </div>
                    <div class="form-group">
                        <label for="coins_price">Giá Coins *</label>
                        <input type="number" name="coins_price" id="coins_price" class="form-control" placeholder="1250000" value="{{ old('coins_price', 1250000) }}" required min="0" step="1000">
                        <div class="help-text">Giá bằng coins trong game</div>
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label for="duration_days">Thời hạn season (ngày) *</label>
                        <input type="number" name="duration_days" id="duration_days" class="form-control" placeholder="60" value="{{ old('duration_days', 60) }}" min="1" max="365" required>
                        <div class="help-text">Số ngày season có hiệu lực</div>
                    </div>
                    <div class="form-group">
                        <label for="max_level">Cấp độ tối đa *</label>
                        <input type="number" name="max_level" id="max_level" class="form-control" placeholder="50" value="{{ old('max_level', 50) }}" min="1" max="100" required>
                        <div class="help-text">Số cấp độ trong battle pass</div>
                    </div>
                </div>

                <!-- Description -->
                <div class="form-group">
                    <label for="rewards_config">Mô tả phần thưởng *</label>
                    <textarea name="rewards_config" id="rewards_config" class="form-control" rows="4" placeholder="VD: Nhận phần thưởng hàng ngày, tăng EXP, items độc quyền..." required>{{ old('rewards_config') }}</textarea>
                    <div class="help-text">
                        <strong>Mô tả những gì user nhận được khi mua BattlePass</strong><br>
                        Ví dụ: Daily rewards, EXP boost, exclusive items, special privileges...
                    </div>
                </div>

                <div class="form-group">
                    <label for="description">Mô tả (tùy chọn)</label>
                    <textarea name="description" id="description" class="form-control" rows="3" placeholder="Mô tả chi tiết về battle pass season...">{{ old('description') }}</textarea>
                </div>

                <!-- Thời gian hiển thị -->
                <div class="form-group">
                    <label for="display_start_date">Thời gian bắt đầu hiển thị *</label>
                    <input type="datetime-local" name="display_start_date" id="display_start_date" class="form-control" value="{{ old('display_start_date') }}" required>
                    <div class="help-text">Thời gian bắt đầu hiển thị BattlePass cho tất cả user</div>
                </div>

                <div class="form-group">
                    <label for="display_end_date">Thời gian kết thúc hiển thị *</label>
                    <input type="datetime-local" name="display_end_date" id="display_end_date" class="form-control" value="{{ old('display_end_date') }}" required>
                    <div class="help-text">Thời gian ngừng hiển thị BattlePass cho tất cả user</div>
                </div>

                <!-- Buttons -->
                <div class="btn-group">
                    <a href="{{ route('admin.battle-pass.index') }}" class="btn btn-secondary">❌ Hủy</a>
                    <button type="submit" class="btn btn-primary">✅ Tạo Battle Pass Season</button>
                </div>
            </form>
        </div>
    </div>

    <script>
        // Set default dates and rewards config
        document.addEventListener('DOMContentLoaded', function() {
            const now = new Date();
            const tomorrow = new Date(now.getTime() + 24 * 60 * 60 * 1000);
            const nextMonth = new Date(now.getTime() + 30 * 24 * 60 * 60 * 1000);

            document.getElementById('display_start_date').value = tomorrow.toISOString().slice(0, 16);
            document.getElementById('display_end_date').value = nextMonth.toISOString().slice(0, 16);

            // Set default rewards description if empty
            const rewardsConfig = document.getElementById('rewards_config');
            if (!rewardsConfig.value.trim()) {
                rewardsConfig.value = 'Nhận phần thưởng hàng ngày, tăng EXP 50%, items độc quyền, và nhiều đặc quyền khác trong suốt thời gian BattlePass.';
            }
        });
    </script>
@endsection

@endsection