@extends('layouts.front')

@section('content')
<div class="jel-portal-page jel-contest-page">
    @include('front.partials.flash-messages')

    <section class="jel-contest-hero">
        <div class="jel-contest-hero-copy">
            @if ($contestPage['assignment'])
                <span class="jel-portal-pill">{{ $contestPage['assignment']->groupclassname }}</span>
            @endif

            <span class="jel-portal-kicker">Competition Details</span>
            <h1>{{ $matchcobntests->contesttitile }}</h1>
            <p>
                Prize pool, participation progress, exam timeline aur reward ranks yahan clearly dikh rahe hain.
                Join karne se pehle pura structure verify kar sakte hain.
            </p>

            <div class="jel-contest-price-row">
                <div>
                    <small>Join Amount</small>
                    <strong>&#8377;{{ number_format((float) $matchcobntests->joinamt, 2) }}</strong>
                </div>
                <div>
                    <small>Total Seats</small>
                    <strong>{{ $matchcobntests->contestseat }}</strong>
                </div>
            </div>

            <div class="jel-portal-progress">
                <div class="jel-portal-progress-bar">
                    <div class="jel-portal-progress-fill" style="width: {{ $contestPage['joined_percent'] }}%"></div>
                </div>
                <div class="jel-portal-progress-meta">
                    <span>{{ round($contestPage['joined_percent']) }}% joined</span>
                    <span>{{ $contestPage['remaining_seat'] }} seats left</span>
                </div>
            </div>
        </div>

        <aside class="jel-contest-hero-panel">
            <div class="jel-contest-panel-card">
                <h2>Exam Timeline</h2>
                <div class="jel-portal-meta-grid jel-portal-meta-grid-tight">
                    <div>
                        <span>Result Date</span>
                        <strong>{{ $contestPage['result_date_display'] ?? '-' }}</strong>
                    </div>
                    <div>
                        <span>Exam Date</span>
                        <strong>{{ $contestPage['exam_date_display'] ?? '-' }}</strong>
                    </div>
                    <div>
                        <span>Exam Time</span>
                        <strong>{{ $contestPage['exam_end_time_display'] ?? '-' }}</strong>
                    </div>
                    <div>
                        <span>Answer Sheet</span>
                        <strong>{{ $contestPage['answer_sheet_date_display'] ?? '-' }}</strong>
                    </div>
                </div>

                <div class="jel-contest-action-stack">
                    @if ($contestPage['show_already_joined'])
                        <span class="jel-portal-button jel-portal-button-muted">Already Joined</span>
                    @elseif ($contestPage['show_join_button'])
                        <button class="jel-portal-button" type="button" data-bs-toggle="modal" data-bs-target="#joinContestModal">
                            Join This Exam
                        </button>
                    @elseif ($contestPage['show_wallet_button'])
                        <a class="jel-portal-button jel-portal-button-secondary" href="{{ $contestPage['wallet_url'] }}">
                            Add Wallet Balance
                        </a>
                    @endif

                    @if ($contestPage['has_gameplay'])
                        @if ($contestPage['has_submitted_answer'])
                            <button class="jel-portal-button jel-portal-button-warning" type="button" data-bs-toggle="modal" data-bs-target="#submittedContestModal">
                                Exam Submitted
                            </button>
                            @if ($contestPage['answersheet_available'])
                                <a class="jel-portal-button jel-portal-button-secondary" href="{{ $contestPage['answer_sheet_url'] }}">Open Answer Sheet</a>
                            @elseif ($contestPage['answer_sheet_date_display'])
                                <span class="jel-contest-note">Answer sheet on {{ $contestPage['answer_sheet_date_display'] }}</span>
                            @endif
                            @if ($contestPage['result_available'])
                                <a class="jel-portal-button jel-portal-button-dark" href="{{ $contestPage['result_url'] }}">Open Result</a>
                            @endif
                        @elseif ($contestPage['can_start_exam'])
                            <a class="jel-portal-button" href="{{ $contestPage['exam_start_url'] }}">Start Exam</a>
                        @endif
                    @endif

                    @if ($contestPage['join_disabled_reason'])
                        <span class="jel-contest-note jel-contest-note-block">{{ $contestPage['join_disabled_reason'] }}</span>
                    @endif

                    @if ($contestPage['show_wallet_button'] && $contestPage['wallet_shortfall'] > 0)
                        <span class="jel-contest-note jel-contest-note-block">
                            Additional &#8377;{{ number_format((float) $contestPage['wallet_shortfall'], 2) }} wallet balance required.
                        </span>
                    @endif

                    @if ($contestPage['exam_status_message'])
                        <span class="jel-contest-note jel-contest-note-block">{{ $contestPage['exam_status_message'] }}</span>
                    @endif

                    <a class="jel-portal-button jel-portal-button-muted" href="{{ route('competitionlist') }}">Back to Dashboard</a>
                </div>
            </div>
        </aside>
    </section>

    <section class="jel-contest-stat-grid">
        <article class="jel-contest-stat-card">
            <img src="{{ asset('public/frontend/images/firstprize.png') }}" alt="First Prize">
            <span>1st Prize</span>
            <strong>&#8377;{{ number_format((float) $contestPage['first_prize'], 2) }}</strong>
        </article>
        <article class="jel-contest-stat-card">
            <img src="{{ asset('public/frontend/images/trophyicons.png') }}" alt="Winning Percentage">
            <span>Winning %</span>
            <strong>{{ $matchcobntests->winpertange }}%</strong>
        </article>
        <article class="jel-contest-stat-card">
            <img src="{{ asset('public/frontend/images/sideicons.png') }}" alt="Winners">
            <span>Winner Range</span>
            <strong>{{ $contestPage['last_rank'] ?? '-' }}</strong>
        </article>
    </section>

    <section class="jel-contest-reward-layout">
        <div class="jel-contest-reward-card">
            <div class="jel-contest-section-head">
                <div>
                    <span class="jel-portal-kicker">Scholarship Rewards</span>
                    <h2>Top Winners</h2>
                </div>
            </div>

            <div class="jel-contest-rank-stack">
                @foreach ($contestPage['top_rank_rows'] as $rankRow)
                    <article class="jel-contest-rank-card jel-contest-rank-card-featured rank-{{ $loop->iteration }}">
                        <div>
                            <span class="jel-contest-rank-label">
                                @if (($rankRow['end_rank'] ?? $rankRow['start_rank']) > $rankRow['start_rank'])
                                    Rank {{ $rankRow['start_rank'] }} - {{ $rankRow['end_rank'] }}
                                @else
                                    Rank {{ $rankRow['start_rank'] }}
                                @endif
                            </span>
                        </div>
                        <strong>&#8377;{{ number_format((float) $rankRow['prize_amount'], 2) }}</strong>
                    </article>
                @endforeach
            </div>
        </div>

        <div class="jel-contest-reward-card">
            <div class="jel-contest-section-head">
                <div>
                    <span class="jel-portal-kicker">Reward Ladder</span>
                    <h2>Scholarship Details</h2>
                </div>
            </div>

            <div class="jel-contest-banner">
                <img src="{{ asset('public/frontend/images/scholarship_banner.png') }}" alt="Scholarship Rewards">
            </div>

            @if (! empty($contestPage['other_rank_rows']))
                <div class="jel-contest-rank-stack jel-contest-rank-stack-compact">
                    @foreach ($contestPage['other_rank_rows'] as $rankRow)
                        <article class="jel-contest-rank-card">
                            <span class="jel-contest-rank-label">
                                @if (($rankRow['end_rank'] ?? $rankRow['start_rank']) > $rankRow['start_rank'])
                                    Rank {{ $rankRow['start_rank'] }} - {{ $rankRow['end_rank'] }}
                                @else
                                    Rank {{ $rankRow['start_rank'] }}
                                @endif
                            </span>
                            <strong>&#8377;{{ number_format((float) $rankRow['prize_amount'], 2) }}</strong>
                        </article>
                    @endforeach
                </div>
            @endif
        </div>
    </section>
</div>

<div id="joinContestModal" class="modal fade" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content jel-portal-modal">
            <div class="modal-header border-0">
                <h5 class="modal-title">Join Confirmation</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center">
                <p>You are about to join this competition.</p>
                <strong class="jel-portal-modal-amount">&#8377;{{ number_format((float) $matchcobntests->joinamt, 2) }}</strong>
                <p class="jel-contest-note mt-3 mb-0">Secure confirmation ke baad hi wallet se amount deduct hoga aur seat reserve hogi.</p>
            </div>
            <div class="modal-footer border-0">
                @if ($contestPage['join_url'])
                    <form action="{{ $contestPage['join_url'] }}" method="POST" class="d-inline-flex">
                        @csrf
                        <button class="jel-portal-button" type="submit">Confirm Join</button>
                    </form>
                @endif
                <button type="button" class="jel-portal-button jel-portal-button-muted" data-bs-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>

<div id="submittedContestModal" class="modal fade" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content jel-portal-modal">
            <div class="modal-header border-0">
                <h5 class="modal-title">Exam Submitted</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center">
                <p>You have already submitted this competition exam. Best of luck for the result.</p>
            </div>
            <div class="modal-footer border-0">
                <button type="button" class="jel-portal-button jel-portal-button-muted" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
@endsection
