{% extends 'main/base.html' %}

{% block title %}Event - Promotions{% endblock %}

{% block content %}
    <div class="content-card section-inner" style="width: 100%; max-width: 500px; margin: 0 auto; padding: 0; position: relative; overflow: hidden;">
        <!-- Slide Container -->
        <div id="slides-container" style="position: relative; width: 100%; height: 600px; overflow: hidden; border-radius: 28px;">
            <!-- Slide 1: Working Consecutive Allowance -->
            <div class="slide" id="slide-1" style="position: absolute; width: 100%; height: 100%; opacity: 1; transition: opacity 0.6s ease-in-out; top: 0; left: 0; background: linear-gradient(135deg, #1f2937 0%, #111827 100%);">
                <div style="position: absolute; inset: 0; background: radial-gradient(circle at top left, rgba(59,130,246,0.35), transparent 30%), radial-gradient(circle at bottom right, rgba(251,191,36,0.25), transparent 30%); z-index: 1;"></div>
                <div style="position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 2; color: white; text-align: center; padding: 2rem;">
                    <div style="max-width: 520px; width: 100%; backdrop-filter: blur(10px); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 28px; padding: 2rem;">
                        <h1 style="margin: 0 0 0.75rem; font-size: 2.5rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em;">Working Consecutive</h1>
                        <h2 style="margin: 0 0 1.5rem; font-size: 1.9rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em; color: #fbbf24;">Allowance</h2>
                        <div style="display: grid; gap: 1rem; text-align: left;">
                            <p style="margin: 0; font-size: 1rem; line-height: 1.8;">Consecutive working <strong>3 days</strong> get <span style="color: #fbbf24; font-weight: 700;">200</span></p>
                            <p style="margin: 0; font-size: 1rem; line-height: 1.8;">Consecutive working <strong>7 days</strong> get <span style="color: #fbbf24; font-weight: 700;">350</span></p>
                            <p style="margin: 0; font-size: 1rem; line-height: 1.8;">Consecutive working <strong>15 days</strong> get <span style="color: #fbbf24; font-weight: 700;">500</span></p>
                            <p style="margin: 0; font-size: 1rem; line-height: 1.8;">Consecutive working <strong>30 days</strong> get <span style="color: #fbbf24; font-weight: 700;">750</span></p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Slide 2: New Members Bonus -->
            <div class="slide" id="slide-2" style="position: absolute; width: 100%; height: 100%; opacity: 0; transition: opacity 0.6s ease-in-out; top: 0; left: 0; background: linear-gradient(135deg, #0f172a 0%, #111827 100%);">
                <div style="position: absolute; inset: 0; background: radial-gradient(circle at top right, rgba(43,111,255,0.32), transparent 35%), radial-gradient(circle at bottom left, rgba(0,35,91,0.35), transparent 30%); z-index: 1;"></div>
                <div style="position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 2; color: white; text-align: center; padding: 2rem;">
                    <div style="max-width: 520px; width: 100%; backdrop-filter: blur(10px); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 28px; padding: 2rem;">
                        <h1 style="margin: 0 0 1rem; font-size: 2rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em;">For Every New Member</h1>
                        <p style="margin: 0 0 1.5rem; font-size: 1.1rem;">A better experience begins with a welcome bonus.</p>
                        <div style="background: rgba(255,255,255,0.08); border-radius: 20px; padding: 1.5rem;">
                            <p style="margin: 0 0 1rem; font-size: 1rem;">The platform will provide an</p>
                            <p style="margin: 0; font-size: 2rem; font-weight: 900;"><span style="color: #fbbf24;">Additional 20</span></p>
                            <p style="margin: 1rem 0 0; font-size: 1rem;">to new joiners who make their <strong>first deposit</strong>.</p>
                        </div>
                        <p style="margin: 1.5rem 0 0; font-size: 0.95rem; font-weight: 600;">PLEASE NOTE: This bonus may only be claimed once.</p>
                    </div>
                </div>
            </div>

            <!-- Slide 3: Deposit Bonus -->
            <div class="slide" id="slide-3" style="position: absolute; width: 100%; height: 100%; opacity: 0; transition: opacity 0.6s ease-in-out; top: 0; left: 0; background: linear-gradient(135deg, #111827 0%, #111827 100%);">
                <div style="position: absolute; inset: 0; background: radial-gradient(circle at top left, rgba(16,185,129,0.24), transparent 35%), radial-gradient(circle at bottom right, rgba(59,130,246,0.18), transparent 35%); z-index: 1;"></div>
                <div style="position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 2; color: white; padding: 2rem;">
                    <div style="max-width: 520px; width: 100%; backdrop-filter: blur(10px); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 28px; padding: 2rem;">
                        <h1 style="margin: 0 0 1rem; font-size: 2.5rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em;">Deposit Bonus</h1>
                        <div style="background: rgba(255,255,255,0.94); border-radius: 20px; padding: 1.5rem; color: #0a1f44;">
                            <table style="width: 100%; border-collapse: collapse; color: #0a1f44;">
                                <tr style="border-bottom: 2px solid rgba(15,23,42,0.15);">
                                    <td style="padding: 0.75rem; font-weight: 700; background: #e8eef9;">Deposit</td>
                                    <td style="padding: 0.75rem; font-weight: 700; background: #e8eef9;">Bonus</td>
                                </tr>
                                <tr style="border-bottom: 1px solid rgba(15,23,42,0.12);"><td style="padding: 0.75rem; text-align: center;">100</td><td style="padding: 0.75rem; text-align: center;">20</td></tr>
                                <tr style="border-bottom: 1px solid rgba(15,23,42,0.12);"><td style="padding: 0.75rem; text-align: center;">300</td><td style="padding: 0.75rem; text-align: center;">60</td></tr>
                                <tr style="border-bottom: 1px solid rgba(15,23,42,0.12);"><td style="padding: 0.75rem; text-align: center;">500</td><td style="padding: 0.75rem; text-align: center;">120</td></tr>
                                <tr style="border-bottom: 1px solid rgba(15,23,42,0.12);"><td style="padding: 0.75rem; text-align: center;">1000</td><td style="padding: 0.75rem; text-align: center;">300</td></tr>
                                <tr style="border-bottom: 1px solid rgba(15,23,42,0.12);"><td style="padding: 0.75rem; text-align: center;">2500</td><td style="padding: 0.75rem; text-align: center;">700</td></tr>
                                <tr><td style="padding: 0.75rem; text-align: center;">5000</td><td style="padding: 0.75rem; text-align: center;">1500</td></tr>
                            </table>
                        </div>
                        <p style="margin: 1.25rem 0 0; font-size: 0.9rem; background: rgba(255,255,255,0.12); padding: 1rem; border-radius: 12px;">Note: Each deposit using crypto wallet can be claimed once per day.</p>
                    </div>
                </div>
            </div>

            <!-- Slide 4: Reset Bonus -->
            <div class="slide" id="slide-4" style="position: absolute; width: 100%; height: 100%; opacity: 0; transition: opacity 0.6s ease-in-out; top: 0; left: 0; background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);">
                <div style="position: absolute; inset: 0; background: radial-gradient(circle at top left, rgba(251,191,36,0.2), transparent 32%), radial-gradient(circle at bottom right, rgba(16,185,129,0.18), transparent 35%); z-index: 1;"></div>
                <div style="position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 2; color: white; padding: 2rem;">
                    <div style="max-width: 520px; width: 100%; backdrop-filter: blur(10px); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 28px; padding: 2rem;">
                        <h1 style="margin: 0 0 1.25rem; font-size: 2.3rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em;">Reset Bonus</h1>
                        <div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; margin-bottom: 1.5rem;">
                            <div style="background: rgba(255,255,255,0.08); padding: 1rem; border-radius: 16px; border: 1px solid rgba(255,255,255,0.14); text-align: center;">
                                <p style="margin: 0 0 0.5rem; font-weight: 700;">Reset 6 times</p>
                                <p style="margin: 0; font-size: 1.5rem; color: #fbbf24; font-weight: 900;">15</p>
                            </div>
                            <div style="background: rgba(255,255,255,0.08); padding: 1rem; border-radius: 16px; border: 1px solid rgba(255,255,255,0.14); text-align: center;">
                                <p style="margin: 0 0 0.5rem; font-weight: 700;">Reward 15</p>
                                <p style="margin: 0; font-size: 1.5rem; color: #34d399; font-weight: 900;">✓</p>
                            </div>
                            <div style="background: rgba(255,255,255,0.08); padding: 1rem; border-radius: 16px; border: 1px solid rgba(255,255,255,0.14); text-align: center;">
                                <p style="margin: 0 0 0.5rem; font-weight: 700;">Reset 9 times</p>
                                <p style="margin: 0; font-size: 1.5rem; color: #fbbf24; font-weight: 900;">30</p>
                            </div>
                            <div style="background: rgba(255,255,255,0.08); padding: 1rem; border-radius: 16px; border: 1px solid rgba(255,255,255,0.14); text-align: center;">
                                <p style="margin: 0 0 0.5rem; font-weight: 700;">Reward 30</p>
                                <p style="margin: 0; font-size: 1.5rem; color: #34d399; font-weight: 900;">✓</p>
                            </div>
                            <div style="background: rgba(255,255,255,0.08); padding: 1rem; border-radius: 16px; border: 1px solid rgba(255,255,255,0.14); text-align: center;">
                                <p style="margin: 0 0 0.5rem; font-weight: 700;">Reset 12 times</p>
                                <p style="margin: 0; font-size: 1.5rem; color: #fbbf24; font-weight: 900;">45</p>
                            </div>
                            <div style="background: rgba(255,255,255,0.08); padding: 1rem; border-radius: 16px; border: 1px solid rgba(255,255,255,0.14); text-align: center;">
                                <p style="margin: 0 0 0.5rem; font-weight: 700;">Reward 45</p>
                                <p style="margin: 0; font-size: 1.5rem; color: #34d399; font-weight: 900;">✓</p>
                            </div>
                            <div style="grid-column: 1 / -1; background: rgba(255,255,255,0.08); padding: 1rem; border-radius: 16px; border: 1px solid rgba(255,255,255,0.14); text-align: center;">
                                <p style="margin: 0 0 0.5rem; font-weight: 700;">Reset 15 times</p>
                                <p style="margin: 0; font-size: 1.5rem; color: #fbbf24; font-weight: 900;">60</p>
                            </div>
                        </div>
                        <p style="margin: 0; font-size: 0.9rem; background: rgba(255,255,255,0.12); padding: 1rem; border-radius: 12px; text-align: center;">Once 15 resets are reached, a recalculation will be performed.</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Slide Navigation -->
        <div style="position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; gap: 0.5rem;">
            <button onclick="prevSlide()" style="width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.2); border: 2px solid rgba(255,255,255,0.4); color: white; font-size: 1.2rem; cursor: pointer; transition: all 0.2s ease;" onmouseover="this.style.background='rgba(255,255,255,0.3)'" onmouseout="this.style.background='rgba(255,255,255,0.2)'">❮</button>
            <div id="slide-indicators" style="display: flex; gap: 0.5rem; align-items: center;"></div>
            <button onclick="nextSlide()" style="width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.2); border: 2px solid rgba(255,255,255,0.4); color: white; font-size: 1.2rem; cursor: pointer; transition: all 0.2s ease;" onmouseover="this.style.background='rgba(255,255,255,0.3)'" onmouseout="this.style.background='rgba(255,255,255,0.2)'">❯</button>
        </div>
    </div>

    {% include 'main/_bottomnav.html' with active='event' %}

    <script>
        (function() {
            var currentSlide = 1;
            var totalSlides = 4;
            var autoSlideInterval = null;

            function updateIndicators() {
                var container = document.getElementById('slide-indicators');
                if (!container) return;
                container.innerHTML = '';
                for (var i = 1; i <= totalSlides; i++) {
                    var dot = document.createElement('button');
                    dot.style.cssText = 'width: 10px; height: 10px; border-radius: 50%; background: ' + (i === currentSlide ? 'rgba(255,255,255,0.9)' : 'rgba(255,255,255,0.3)') + '; border: none; cursor: pointer; transition: all 0.2s ease;';
                    dot.onclick = (function(index) {
                        return function() {
                            showSlide(index);
                            resetAutoSlide();
                        };
                    })(i);
                    container.appendChild(dot);
                }
            }

            function showSlide(n) {
                if (n > totalSlides) n = 1;
                if (n < 1) n = totalSlides;
                currentSlide = n;
                
                for (var i = 1; i <= totalSlides; i++) {
                    var slide = document.getElementById('slide-' + i);
                    if (!slide) continue;
                    slide.style.display = 'block';
                    slide.style.opacity = i === currentSlide ? '1' : '0';
                    slide.style.visibility = i === currentSlide ? 'visible' : 'hidden';
                    slide.style.zIndex = i === currentSlide ? '2' : '1';
                    slide.style.pointerEvents = i === currentSlide ? 'auto' : 'none';
                }
                updateIndicators();
            }

            function nextSlide() {
                showSlide(currentSlide + 1);
                resetAutoSlide();
            }

            function prevSlide() {
                showSlide(currentSlide - 1);
                resetAutoSlide();
            }

            function autoSlide() {
                showSlide(currentSlide + 1);
            }

            function resetAutoSlide() {
                if (autoSlideInterval) {
                    clearInterval(autoSlideInterval);
                }
                autoSlideInterval = setInterval(autoSlide, 5000);
            }

            function initSlider() {
                showSlide(currentSlide);
                resetAutoSlide();
            }

            window.nextSlide = nextSlide;
            window.prevSlide = prevSlide;

            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', initSlider);
            } else {
                initSlider();
            }
        })();
    </script>
{% endblock %}