@extends('theme::layouts.app', ['alias' => 'Account'])
@section('theme::title', __('seo.home'))
@section('theme::sidebar')
    @include('theme::frontend.account.sidebar', ['account_alias' => '4T-App'])
@endsection

@section('theme::content')
    <div class="col-xl-9 col-lg-9 col-md-12 col-sm-12 col-12 main-content">
        <div class="container App-4t">
            <div class="card">
                <div class="card-header">
                    <h4>4T App</h4>
                </div>
                <div class="card-body">
                    <div class="row">

                        {{-- Display Current Character Name --}}
                        @if ($currentChar)
                            <div class="gold-frame">
                                <strong>Current Character Name:</strong>
                                <div class="charname-glow">
                                    {{ $currentChar }}
                                </div>
                            </div>
                        @endif

                        {{-- Display Remaining Time --}}
                        @if ($remainingTimeInSeconds)
                            <div id="countdown" class="countdown-frame countdown-green">
                                <strong>Remaining Time for the Event:</strong>
                                <div class="countdown-time">
                                    <div id="hours">00</div> :
                                    <div id="minutes">00</div> :
                                    <div id="seconds">00</div>
                                </div>
                            </div>
                        @endif

                        @if ($availableChars->isNotEmpty())
                            <form id="charForm" action="{{ route('4t-app.addCharacter') }}" method="POST"
                                class="App-4t-choose-char">
                                @csrf
                                <h5 id="charActionText">
                                    @if ($currentChar)
                                        Replace with new char in 4T App
                                    @else
                                        App New Char in 4T App
                                    @endif
                                </h5>

                                <div class="form-group">
                                    <select name="charID" id="charID" required>
                                        @if ($currentChar)
                                            <option value="" disabled selected>{{ $currentChar }} (Current)</option>
                                        @else
                                            <option value="" disabled selected>Choose Your Char</option>
                                        @endif
                                        @foreach ($availableChars as $char)
                                            <option value="{{ $char->CharID }}">{{ $char->CharName16 }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <button type="submit" id="charButton">
                                    @if ($currentChar)
                                        Replace
                                    @else
                                        Join
                                    @endif
                                </button>
                            </form>
                        @else
                            <div class="alert alert-warning">
                                No available characters for this account.
                            </div>
                        @endif

                    </div>
                </div>
            </div>
        </div>
    </div>


    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const hoursElement = document.getElementById('hours');
            const minutesElement = document.getElementById('minutes');
            const secondsElement = document.getElementById('seconds');
            const frameElement = document.getElementById('countdown');


            let remainingTimeInSeconds = parseInt('{{ $remainingTimeInSeconds ?? 7200 }}');

            // Countdown Timer
            function updateCountdown() {
                if (remainingTimeInSeconds > 0) {
                    remainingTimeInSeconds--;

                    const hours = Math.floor(remainingTimeInSeconds / 3600);
                    const minutes = Math.floor((remainingTimeInSeconds % 3600) / 60);
                    const seconds = remainingTimeInSeconds % 60;

                    hoursElement.textContent = String(hours).padStart(2, '0');
                    minutesElement.textContent = String(minutes).padStart(2, '0');
                    secondsElement.textContent = String(seconds).padStart(2, '0');

                    if (remainingTimeInSeconds > 64800) {
                        frameElement.className = 'countdown-frame countdown-green';
                    } else if (remainingTimeInSeconds > 36000) {
                        frameElement.className = 'countdown-frame countdown-yellow';
                    } else if (remainingTimeInSeconds > 18000) {
                        frameElement.className = 'countdown-frame countdown-orange';
                    } else if (remainingTimeInSeconds > 3600) {
                        frameElement.className = 'countdown-frame countdown-dark-orange';
                    } else {
                        frameElement.className = 'countdown-frame countdown-red';
                    }
                } else {
                    clearInterval(countdownInterval);
                    frameElement.innerHTML = '<strong>Event Started!</strong>';
                }
            }

            const countdownInterval = setInterval(updateCountdown, 1000);
            updateCountdown();

            // Form Submission with AJAX




        });
        let countdownInterval = null;  // متغير للعداد الرئيسي
let overlayCountdownInterval = null;  // متغير للعداد المؤقت
let remainingTimeInSeconds = 0;  // الوقت المتبقي الرئيسي

// عداد مؤقت بديل يظهر مباشرة
function startOverlayCountdownTimer(newRemainingTime) {
    let overlayRemainingTime = Math.floor(newRemainingTime);  // تقريب الثواني

    // إنشاء العداد المؤقت إذا لم يكن موجوداً
    let overlayCountdown = document.getElementById('overlay-countdown');
    if (!overlayCountdown) {
        const overlay = document.createElement('div');
        overlay.id = 'overlay-countdown';
        overlay.classList.add('countdown-frame', 'countdown-green', 'mb-3');  // إضافة مسافة بسيطة
        overlay.innerHTML = `
            <strong>Remaining Time for the Event:</strong>
            <div class="countdown-time">
                <div id="overlay-hours">00</div> :
                <div id="overlay-minutes">00</div> :
                <div id="overlay-seconds">00</div>
            </div>
        `;
        const formElement = document.querySelector('#charForm');
        formElement.parentNode.insertBefore(overlay, formElement);  // إضافة العداد فوق الفورم
    }

    // إخفاء العداد الرئيسي مؤقتاً
    let mainCountdown = document.getElementById('countdown');
    if (mainCountdown) {
        mainCountdown.style.display = 'none';
    }

    // إلغاء العداد القديم (إن وجد)
    if (overlayCountdownInterval) {
        clearInterval(overlayCountdownInterval);
    }

    // تحديث الوقت في العداد المؤقت
    function updateOverlayCountdown() {
        if (overlayRemainingTime > 0) {
            overlayRemainingTime--;

            const hours = Math.floor(overlayRemainingTime / 3600);
            const minutes = Math.floor((overlayRemainingTime % 3600) / 60);
            const seconds = overlayRemainingTime % 60;

            document.getElementById('overlay-hours').textContent = String(hours).padStart(2, '0');
            document.getElementById('overlay-minutes').textContent = String(minutes).padStart(2, '0');
            document.getElementById('overlay-seconds').textContent = String(seconds).padStart(2, '0');

            // تغيير لون الإطار بناءً على الوقت المتبقي
            if (overlayRemainingTime > 64800) {
                overlayCountdown.className = 'countdown-frame countdown-green mb-3';
            } else if (overlayRemainingTime > 36000) {
                overlayCountdown.className = 'countdown-frame countdown-yellow mb-3';
            } else if (overlayRemainingTime > 18000) {
                overlayCountdown.className = 'countdown-frame countdown-orange mb-3';
            } else if (overlayRemainingTime > 3600) {
                overlayCountdown.className = 'countdown-frame countdown-dark-orange mb-3';
            } else {
                overlayCountdown.className = 'countdown-frame countdown-red mb-3';
            }
        } else {
            clearInterval(overlayCountdownInterval);
            overlayCountdown.innerHTML = '<strong>Event Started!</strong>';
        }
    }

    // بدء العداد المؤقت
    overlayCountdownInterval = setInterval(updateOverlayCountdown, 1000);
    updateOverlayCountdown();
}

// التعامل مع الفورم (إرسال الشخصية)
document.querySelector('#charForm').addEventListener('submit', function (e) {
    e.preventDefault();

    let form = this;
    let formData = new FormData(form);

    fetch(form.action, {
        method: form.method,
        body: formData,
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(response => {
        const contentType = response.headers.get("content-type");
        if (contentType && contentType.includes("application/json")) {
            return response.json();
        } else {
            throw new Error("Unexpected response format");
        }
    })
    .then(data => {
        if (data.messages) {
            let delay = 0;
            let hasSuccess = false;

            data.messages.forEach(msg => {
                setTimeout(() => {
                    if (msg.type === 'success') {
                        toastr.success(msg.message);
                        hasSuccess = true;

                        // تحديث اسم الشخصية الحالية
                        updateCharacterName(data.charName);

                        // بدء عداد مؤقت جديد
                        startOverlayCountdownTimer(data.remainingTimeInSeconds);
                    } else {
                        toastr.error(msg.message);
                    }
                }, delay);
                delay += 1000;
            });
        }
    })
    .catch(error => {
        toastr.error('An error occurred while processing the request.');
        console.error("Fetch error:", error);
    });
});

// تحديث اسم الشخصية
function updateCharacterName(charName) {
    const charFrame = document.querySelector('.gold-frame');

    if (!charFrame) {
        const newFrame = document.createElement('div');
        newFrame.classList.add('gold-frame');
        newFrame.innerHTML = `
            <strong>Current Character Name:</strong>
            <div class="charname-glow">${charName}</div>
        `;
        const container = document.querySelector('.App-4t .card-body .row');
        container.insertBefore(newFrame, container.firstChild);
    } else {
        charFrame.querySelector('.charname-glow').textContent = charName;
    }
}
    </script>

@endsection