@extends('frontend.layouts.app')

@section('content')
    @php
        use Carbon\Carbon;

        $now = Carbon::now();
        $registrationNotStarted = $now->lt($contest->registration_start);
        $registrationOpen = $now->between($contest->registration_start, $contest->registration_end);
        $registrationEnded = $now->gt($contest->registration_end);
        $quizLive = $now->between($contest->quiz_start_time, $contest->quiz_end_time);
    @endphp


    <!-- Breadcrumb -->
    <section class="main-banner" style="background-image:url('{{ asset('public/frontend/assets/img/bg/course-bg.jpg') }}');">
        <div class="container">
            <div class="text-center text-white position-relative z-1">
                <h2>{{ $contest->title }}</h2>
                <p>
                    <a href="{{ route('home') }}">Home</a> /
                    <a href="">Contests</a> /
                    {{ $contest->title }}
                </p>
            </div>
        </div>
    </section>

    <section class="section-padding">
        <div class="container">
            <div class="row">
                <div class="col-lg-7">
                    <img src="{{ asset('storage/' . $contest->banner) }}" class="img-fluid rounded shadow-sm mb-4"
                        alt="{{ $contest->title }}">
                </div>

                <div class="col-lg-5">
                    <div class="card shadow-sm border-0">
                        <div class="card-body">
                            <span class="badge bg-primary">
                                {{ $contest->category->name }}
                            </span>

                            @if ($contest->quiz_status == 0)
                                <span class="badge bg-warning float-end">Upcoming</span>
                            @elseif($contest->quiz_status == 1)
                                <span class="badge bg-success float-end">Live</span>
                            @elseif($contest->quiz_status == 2)
                                <span class="badge bg-dark float-end">Completed</span>
                            @elseif($contest->quiz_status == 3)
                                <span class="badge bg-warning text-dark float-end">
                                    Waiting
                                </span>
                            @endif

                            <h3 class="mt-3">{{ $contest->title }}</h3>

                            <table class="table mt-3">
                                <tr>
                                    <th>Entry Fee</th>
                                    <td>
                                        @if ($contest->entry_fee > 0)
                                            &#8377;{{ number_format($contest->entry_fee, 2) }}
                                        @else
                                            Free
                                        @endif
                                    </td>
                                </tr>

                                {{-- <tr>
                                    <th>Prize Pool</th>
                                    <td>&#8377;{{ number_format($contest->prize_pool ?? 0, 2) }}</td>
                                </tr> --}}

                                <tr>
                                    <th>Questions</th>
                                    <td>{{ $contest->questions_count ?? 0 }}</td>
                                </tr>

                                <tr>
                                    <th>Duration</th>
                                    <td>{{ $durationMinutes !== null ? $durationMinutes . ' Minutes' : '-' }}</td>
                                </tr>

                                <tr>
                                    <th>Participants</th>
                                    <td>{{ $contest->registrations()->count() }}
                                        @if ($contest->max_participants)
                                            / {{ $contest->max_participants }}
                                        @endif
                                    </td>
                                </tr>

                                <tr>
                                    <th>Registration Starts</th>
                                    <td>{{ $contest->registration_start->format('d M Y h:i A') }}</td>
                                </tr>

                                <tr>
                                    <th>Registration Ends</th>
                                    <td>{{ $contest->registration_end->format('d M Y h:i A') }}</td>
                                </tr>

                                <tr>
                                    <th>Quiz Starts</th>
                                    <td>{{ $contest->quiz_start_time->format('d M Y h:i A') }}</td>
                                </tr>

                                <tr>
                                    <th>Quiz Ends</th>
                                    <td>{{ $contest->quiz_end_time->format('d M Y h:i A') }}</td>
                                </tr>
                            </table>


                            <div id="registration-area">
                                @if ($registrationNotStarted)
                                    <div class="alert alert-info text-center">
                                        <h6 class="mb-2">Registration Starts In</h6>
                                        <h4 id="countdown" class="fw-bold text-primary"></h4>

                                        <button id="registrationButton" class="btn btn-secondary w-100" disabled>
                                            Registration Coming Soon
                                        </button>
                                    </div>
                                @elseif($registrationOpen)
                                    @guest
                                        <a href="{{ route('login', ['redirect' => url()->current()]) }}"
                                            class="btn btn-primary w-100">
                                            Login to Register
                                        </a>
                                    @else
                                        @if ($alreadyRegistered)
                                            <button class="btn btn-success w-100" disabled>
                                                ✓ Already Registered
                                            </button>
                                        @else
                                            <form action="{{ route('contest.register', $contest->id) }}" method="POST">
                                                @csrf
                                                <button type="submit" class="btn btn-primary w-100">
                                                    Register Now
                                                </button>
                                            </form>
                                        @endif
                                    @endguest
                                @elseif($quizLive)
                                    @if ($alreadyRegistered)
                                        @if ($quizSubmitted)
                                            @if ($showResultAfterQuiz)
                                                <a href="{{ route('quiz.result', $contest->id) }}"
                                                    class="btn btn-success w-100">
                                                    View Result
                                                </a>
                                            @else
                                                <button class="btn btn-success w-100" disabled>
                                                    ✓ Quiz Submitted
                                                </button>
                                            @endif
                                        @else
                                            <a href="{{ route('quiz.instructions', $contest->id) }}"
                                                class="btn btn-success w-100">
                                                Play Now
                                            </a>
                                        @endif
                                    @else
                                        <a href="#" class="btn btn-secondary w-100">
                                            Quiz is Live
                                        </a>
                                    @endif
                                @elseif($registrationEnded)
                                    <a href="#" class="btn btn-secondary w-100">
                                        Registration Closed
                                    </a>
                                @else
                                    <a href="#" class="btn btn-secondary w-100">
                                        View Result
                                    </a>
                                @endif
                            </div>

                            {{-- @if ($registrationNotStarted)
                                <div class="alert alert-info text-center">
                                    <h6 class="mb-2">Registration Starts In</h6>
                                    <h4 id="countdown" class="fw-bold text-primary"></h4>
                                    <button id="registrationButton" class="btn btn-secondary w-100" disabled>
                                        Registration Coming Soon
                                    </button>
                                </div>
                            @elseif($registrationOpen)
                                @guest
                                    <a href="{{ route('login', ['redirect' => url()->current()]) }}"
                                        class="btn btn-primary w-100">
                                        Login to Register
                                    </a>
                                @else
                                    @if ($alreadyRegistered ?? false)
                                        <button class="btn btn-success w-100" disabled>
                                            ✓ Already Registered
                                        </button>
                                    @else
                                        <form action="{{ route('contest.register', $contest->id) }}" method="POST">
                                            @csrf

                                            <button type="submit" class="btn btn-primary w-100">
                                                Register Now
                                            </button>
                                        </form>
                                    @endif

                                @endguest
                            @elseif($quizLive)
                                @if ($alreadyRegistered ?? false)
                                    @if (!empty($quizSubmitted))
                                        @if (!empty($showResultAfterQuiz))
                                            <a href="{{ route('quiz.result', $contest->id) }}"
                                                class="btn btn-success w-100">
                                                View Result
                                            </a>
                                        @else
                                            <button class="btn btn-success w-100" disabled>
                                                ✓ Quiz Submitted
                                            </button>
                                        @endif
                                    @else
                                        <a href="{{ route('quiz.instructions', $contest->id) }}"
                                            class="btn btn-success w-100">
                                            Play Now
                                        </a>
                                    @endif
                                @else
                                    <a href="#" class="btn btn-secondary w-100">Quiz is Live</a>
                                @endif
                            @elseif($registrationEnded)
                                <a href="#" class="btn btn-secondary w-100">Registration Closed</a>
                            @else
                                <a href="#" class="btn btn-secondary w-100">View Result</a>
                            @endif --}}

                            <div class="alert alert-warning mt-4 mb-0">
                                <strong>Important Notice:</strong><br>

                                The contest will start automatically when more than
                                <strong>50% of the maximum participants</strong> have registered.

                                If the required participation is not reached at the scheduled
                                start time, the contest will remain in
                                <strong>Waiting</strong> status until more participants join
                                or the admin starts the contest.
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row mt-5">
                <div class="col-lg-8">
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-body">
                            <h4>Contest Description</h4>
                            {!! $contest->description !!}
                        </div>
                    </div>

                    <div class="card border-0 shadow-sm">
                        <div class="card-body">
                            <h4>Rules & Instructions</h4>

                            <ul>
                                <li>Register before registration ends.</li>
                                <li>Each participant can join only once.</li>
                                <li>Keep a stable internet connection.</li>
                                <li>Late submissions are not accepted.</li>
                                <li>Organizer's decision will be final.</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4">
                    <div class="card shadow-sm border-0">
                        <div class="card-body">
                            <h5>Prize Distribution</h5>

                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>Rank Range</th>
                                        <th>Prize / Rank</th>
                                        <th>Total</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($contest->prizes as $prize)
                                        <tr>
                                            <td>{{ $prize->range_label }}</td>
                                            <td>&#8377;{{ number_format($prize->prize_amount, 2) }}</td>
                                            <td>&#8377;{{ number_format($prize->total_amount, 2) }}</td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="3">No prizes added.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- <script>
        (function() {
            const countdown = document.getElementById('countdown');
            const registrationButton = document.getElementById('registrationButton');

            if (!countdown || !registrationButton) {
                return;
            }

            const target = new Date(@json($contest->registration_start->toIso8601String())).getTime();
            let timer = null;

            function formatTime(diff) {
                const days = Math.floor(diff / (1000 * 60 * 60 * 24));
                const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
                const seconds = Math.floor((diff % (1000 * 60)) / 1000);

                return days + 'd ' + hours + 'h ' + minutes + 'm ' + seconds + 's';
            }

            function activateRegistration() {
                registrationButton.textContent = 'Register Now';
                registrationButton.classList.remove('btn-secondary');
                registrationButton.classList.add('btn-primary');
                registrationButton.disabled = false;
                countdown.textContent = '0d 0h 0m 0s';
            }

            function tick() {
                const diff = target - Date.now();

                if (diff <= 0) {
                    activateRegistration();

                    if (timer) {
                        clearInterval(timer);
                    }

                    return;
                }

                countdown.textContent = formatTime(diff);
            }

            tick();
            timer = setInterval(tick, 1000);
        })();
    </script> --}}

    {{-- <script>
        (function() {
            const countdown = document.getElementById('countdown');
            const registrationArea = document.getElementById('registration-area');

            if (!countdown || !registrationArea) {
                return;
            }

            const target = new Date(
                @json($contest->registration_start->toIso8601String())
            ).getTime();

            const isAuthenticated = @json(auth()->check());
            const alreadyRegistered = @json($alreadyRegistered);
            const loginUrl = @json(route('login', ['redirect' => url()->current()]));
            const registerUrl = @json(route('contest.register', $contest->id));

            let timer = null;

            function formatTime(diff) {
                const days = Math.floor(diff / (1000 * 60 * 60 * 24));
                const hours = Math.floor(
                    (diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
                );
                const minutes = Math.floor(
                    (diff % (1000 * 60 * 60)) / (1000 * 60)
                );
                const seconds = Math.floor(
                    (diff % (1000 * 60)) / 1000
                );

                return days + 'd ' +
                    hours + 'h ' +
                    minutes + 'm ' +
                    seconds + 's';
            }

            function showRegisterButton() {
                countdown.textContent = 'Registration is now open';

                if (!isAuthenticated) {
                    registrationArea.innerHTML = `
                <a href="${loginUrl}" class="btn btn-primary w-100">
                    Login to Register
                </a>
            `;
                    return;
                }

                if (alreadyRegistered) {
                    registrationArea.innerHTML = `
                <button class="btn btn-success w-100" disabled>
                    ✓ Already Registered
                </button>
            `;
                    return;
                }

                registrationArea.innerHTML = `
            <form action="${registerUrl}" method="POST">
                @csrf
                <button type="submit" class="btn btn-primary w-100">
                    Register Now
                </button>
            </form>
        `;
            }

            function tick() {
                const diff = target - Date.now();

                if (diff <= 0) {
                    showRegisterButton();

                    if (timer) {
                        clearInterval(timer);
                    }

                    return;
                }

                countdown.textContent = formatTime(diff);
            }

            tick();
            timer = setInterval(tick, 1000);
        })();
    </script> --}}

    <script>
        (function() {

            const registrationArea = document.getElementById('registration-area');

            if (!registrationArea) {
                return;
            }

            // Contest timings
            const registrationStart = new Date(
                @json($contest->registration_start->toIso8601String())
            ).getTime();

            const registrationEnd = new Date(
                @json($contest->registration_end->toIso8601String())
            ).getTime();

            const quizStart = new Date(
                @json($contest->quiz_start_time->toIso8601String())
            ).getTime();

            const quizEnd = new Date(
                @json($contest->quiz_end_time->toIso8601String())
            ).getTime();

            // Current user status
            let isAuthenticated = @json(auth()->check());
            let alreadyRegistered = @json($alreadyRegistered);
            let quizSubmitted = @json($quizSubmitted ?? false);
            let showResultAfterQuiz = @json($showResultAfterQuiz ?? false);

            let quizStatus = @json($contest->quiz_status);

            // URLs
            const loginUrl = @json(route('login', ['redirect' => url()->current()]));
            const registerUrl = @json(route('contest.register', $contest->id));
            const playUrl = @json(route('quiz.instructions', $contest->id));
            const resultUrl = @json(route('quiz.result', $contest->id));

            const statusUrl = @json(route('contest.status', $contest->id));

            // Countdown
            const countdown = document.getElementById('countdown');

            let lastState = '';

            function getState() {

                const now = Date.now();

                if (quizStatus == 3) {
                    return 'contest_waiting';
                }

                if (quizStatus == 2) {
                    return 'quiz_completed';
                }

                if (now < registrationStart) {
                    return 'registration_not_started';
                }

                if (
                    now >= registrationStart &&
                    now <= registrationEnd &&
                    quizStatus == 0
                ) {
                    return 'registration_open';
                }

                if (
                    quizStatus == 1 &&
                    now >= quizStart &&
                    now <= quizEnd
                ) {
                    return 'quiz_live';
                }

                if (
                    quizStatus == 1 &&
                    now > quizEnd
                ) {
                    return 'quiz_completed';
                }

                return 'registration_closed';
            }

            // function getState() {

            //     const now = Date.now();

            //     if (now < registrationStart) {
            //         return 'registration_not_started';
            //     }

            //     if (
            //         now >= registrationStart &&
            //         now <= registrationEnd
            //     ) {
            //         return 'registration_open';
            //     }

            //     if (
            //         now >= quizStart &&
            //         now <= quizEnd
            //     ) {
            //         return 'quiz_live';
            //     }

            //     if (now > quizEnd) {
            //         return 'quiz_completed';
            //     }

            //     return 'registration_closed';
            // }



            function formatTime(diff) {

                if (diff <= 0) {
                    return '0d 0h 0m 0s';
                }

                const days = Math.floor(
                    diff / (1000 * 60 * 60 * 24)
                );

                const hours = Math.floor(
                    (diff % (1000 * 60 * 60 * 24)) /
                    (1000 * 60 * 60)
                );

                const minutes = Math.floor(
                    (diff % (1000 * 60 * 60)) /
                    (1000 * 60)
                );

                const seconds = Math.floor(
                    (diff % (1000 * 60)) /
                    1000
                );

                return days + 'd ' +
                    hours + 'h ' +
                    minutes + 'm ' +
                    seconds + 's';
            }


            function renderRegistrationNotStarted() {

                const diff = registrationStart - Date.now();

                registrationArea.innerHTML = `
                <div class="alert alert-info text-center">
                    <h6 class="mb-2">Registration Starts In</h6>

                    <h4 id="countdown"
                        class="fw-bold text-primary">
                        ${formatTime(diff)}
                    </h4>

                    <button class="btn btn-secondary w-100" disabled>
                        Registration Coming Soon
                    </button>
                </div>
            `;
            }


            function renderRegistrationOpen() {

                if (!isAuthenticated) {

                    registrationArea.innerHTML = `
                    <a href="${loginUrl}"
                       class="btn btn-primary w-100">
                        Login to Register
                    </a>
                `;

                    return;
                }


                if (alreadyRegistered) {

                    registrationArea.innerHTML = `
                    <button class="btn btn-success w-100" disabled>
                        ✓ Already Registered
                    </button>
                `;

                    return;
                }


                registrationArea.innerHTML = `
                <form id="contestRegisterForm"
                      action="${registerUrl}"
                      method="POST">

                    @csrf

                    <button type="submit"
                            class="btn btn-primary w-100">
                        Register Now
                    </button>

                </form>
            `;


                // Registration ke baad page reload ki zarurat nahi
                const form = document.getElementById('contestRegisterForm');

                if (form) {

                    form.addEventListener('submit', function() {

                        const button = form.querySelector('button');

                        button.disabled = true;
                        button.innerHTML = `
                        <span class="spinner-border spinner-border-sm me-1"></span>
                        Registering...
                    `;

                    });

                }
            }


            function renderQuizLive() {

                // User registered nahi hai
                if (!alreadyRegistered) {

                    registrationArea.innerHTML = `
                    <button class="btn btn-secondary w-100" disabled>
                        Quiz is Live
                    </button>

                    <div class="alert alert-warning mt-3 mb-0 text-center">
                        You are not registered for this contest.
                    </div>
                `;

                    return;
                }


                // Quiz already submitted
                if (quizSubmitted) {

                    if (showResultAfterQuiz) {

                        registrationArea.innerHTML = `
                        <a href="${resultUrl}"
                           class="btn btn-success w-100">
                            View Result
                        </a>
                    `;

                    } else {

                        registrationArea.innerHTML = `
                        <button class="btn btn-success w-100" disabled>
                            ✓ Quiz Submitted
                        </button>
                    `;
                    }

                    return;
                }


                // Main Play Now button
                registrationArea.innerHTML = `
                <a href="${playUrl}"
                   class="btn btn-success w-100">
                    <i class="fa-solid fa-play me-1"></i>
                    Play Now
                </a>
            `;
            }


            function renderQuizCompleted() {

                if (!alreadyRegistered) {

                    registrationArea.innerHTML = `
                    <button class="btn btn-secondary w-100" disabled>
                        Quiz Completed
                    </button>
                `;

                    return;
                }


                if (quizSubmitted && showResultAfterQuiz) {

                    registrationArea.innerHTML = `
                    <a href="${resultUrl}"
                       class="btn btn-success w-100">
                        View Result
                    </a>
                `;

                } else {

                    registrationArea.innerHTML = `
                    <button class="btn btn-secondary w-100" disabled>
                        Quiz Completed
                    </button>
                `;
                }
            }


            function renderRegistrationClosed() {

                registrationArea.innerHTML = `
                <button class="btn btn-secondary w-100" disabled>
                    Registration Closed
                </button>
            `;
            }

            function renderContestWaiting() {

                registrationArea.innerHTML = `
        <div class="card border-warning bg-light">
            <div class="card-body text-center py-4">

                <div class="mb-3">
                    <span class="d-inline-flex align-items-center justify-content-center
                                 rounded-circle bg-warning text-dark"
                          style="width:60px;height:60px;">

                        <i class="fa-solid fa-hourglass-half fa-lg"></i>

                    </span>
                </div>

                <h5 class="fw-bold text-dark mb-2">
                    Contest is Currently Waiting
                </h5>

                <p class="text-muted mb-2">
                    The required number of participants was not reached
                    at the scheduled start time.
                </p>

                <p class="small text-muted mb-0">
                    The contest will start only after further
                    confirmation from the admin.
                </p>

            </div>
        </div>
    `;
            }


            function updateUI() {

                const state = getState();

                if (state !== lastState) {

                    lastState = state;

                    if (state === 'registration_not_started') {

                        renderRegistrationNotStarted();

                    } else if (state === 'registration_open') {

                        renderRegistrationOpen();

                    } else if (state === 'contest_waiting') {

                        renderContestWaiting();

                    } else if (state === 'quiz_live') {

                        renderQuizLive();

                    } else if (state === 'quiz_completed') {

                        renderQuizCompleted();

                    } else {

                        renderRegistrationClosed();
                    }
                }

                if (state === 'registration_not_started') {

                    const countdownElement =
                        document.getElementById('countdown');

                    if (countdownElement) {

                        countdownElement.textContent =
                            formatTime(
                                registrationStart - Date.now()
                            );
                    }
                }
            }


            // First load
            updateUI();


            async function fetchContestStatus() {

                try {

                    const response = await fetch(statusUrl, {
                        method: 'GET',
                        headers: {
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest'
                        },
                        cache: 'no-store'
                    });

                    if (!response.ok) {
                        return;
                    }

                    const data = await response.json();

                    if (!data.success) {
                        return;
                    }

                    /*
                     * Database se latest status
                     */
                    const newStatus = Number(data.quiz_status);

                    /*
                     * Status change hua hai tabhi UI update
                     */
                    if (newStatus !== quizStatus) {

                        quizStatus = newStatus;

                        /*
                         * State reset
                         * taki same state dobara render ho sake
                         */
                        lastState = '';

                        updateUI();
                    }

                } catch (error) {

                    console.error(
                        'Contest status check failed:',
                        error
                    );
                }
            }


            /*
             * Har 1 second database se latest
             * contest status check hoga.
             */
            setInterval(fetchContestStatus, 1000);

        })();
    </script>

@endsection