@extends('frontend.layouts.app')

@section('title', 'Quiz Instructions')
@php
    $hideFooter = true;
@endphp

@section('content')
    <!-- Soft, muted neutral background layout -->
    <section class="section-padding py-5 d-flex align-items-center min-vh-100" style="background-color: #f8fafc;">
        <div class="container-fluid px-md-5">
            <div class="row">
                <div class="col-12">

                    <!-- Main Container Card with Clean Drop Shadow -->
                    <div class="card border-0 rounded-4 overflow-hidden shadow" style="box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02) !important;">
                        <div class="row g-0">
                            
                            <!-- Left Side Panel: Deep Luxury Indigo & Clean Typography -->
                            <div class="col-lg-5 p-4 p-md-5 d-flex flex-column justify-content-between" style="background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);">
                                <div>
                                    <div class="mb-4">
                                        <!-- Sophisticated light pill indicator -->
                                        <span class="badge px-3 py-2 rounded-pill text-uppercase fw-bold tracking-wider small" style="background-color: rgba(255, 255, 255, 0.12); color: #e0e7ff; font-size: 0.75rem;">
                                            Active Contest
                                        </span>
                                    </div>
                                    
                                    <h1 class="fw-bold display-5 mb-3 text-white" style="letter-spacing: -0.03em;">{{ $contest->title }}</h1>
                                    <p class="lead mb-5" style="color: #c7d2fe; font-size: 1.05rem; line-height: 1.6;">
                                        Review the parameters on the right carefully. Your timer begins the moment you initialize the session.
                                    </p>
                                </div>

                                <!-- Metric Counters in Muted Tones -->
                                <div class="row g-3 pt-4 mt-auto" style="border-top: 1px solid rgba(255, 255, 255, 0.1);">
                                    <div class="col-4">
                                        <div class="small text-uppercase fw-semibold tracking-wide" style="color: #93c5fd;">Questions</div>
                                        <div class="display-6 fw-bold text-white">{{ $contest->questions()->count() }}</div>
                                    </div>
                                    <div class="col-4 ps-3" style="border-left: 1px solid rgba(255, 255, 255, 0.1);">
                                        <div class="small text-uppercase fw-semibold tracking-wide" style="color: #93c5fd;">Duration</div>
                                        <div class="display-6 fw-bold text-white">{{ $contest->quiz_start_time->diffInMinutes($contest->quiz_end_time) }}m</div>
                                    </div>
                                    <div class="col-4 ps-3" style="border-left: 1px solid rgba(255, 255, 255, 0.1);">
                                        <div class="small text-uppercase fw-semibold tracking-wide" style="color: #93c5fd;">Entry Fee</div>
                                        <div class="display-6 fw-bold">
                                            @if ($contest->entry_fee > 0)
                                                <span class="text-white">₹{{ number_format($contest->entry_fee, 0) }}</span>
                                            @else
                                                <span style="color: #34d399;">Free</span>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Right Side Panel: Clean Rules & Polished Actions -->
                            <div class="col-lg-7 bg-white p-4 p-md-5 d-flex flex-column justify-content-center">
                                <div class="mb-4">
                                    <h3 class="fw-bold mb-1" style="color: #0f172a;">Quiz Instructions</h3>
                                    <p class="text-muted small">Please adhere to the academic integrity guidelines below.</p>
                                </div>

                                <!-- Soft Cool-Gray Rules Container Box -->
                                <div class="card border-0 rounded-3 p-4 mb-4" style="background-color: #f8fafc;">
                                    <h5 class="fw-bold mb-3 d-flex align-items-center" style="color: #334155;">
                                        <i class="bi bi-exclamation-triangle-fill me-2" style="color: #f59e0b;"></i> Important Rules & Regulations
                                    </h5>
                                    
                                    <ul class="list-group list-group-flush gap-3">
                                        <li class="list-group-item d-flex align-items-start border-0 px-0 bg-transparent py-0">
                                            <i class="bi bi-check2-circle fs-5 me-3 mt-0.5" style="color: #4f46e5;"></i>
                                            <span style="color: #475569;">Read every question thoroughly before committing to an option.</span>
                                        </li>
                                        <li class="list-group-item d-flex align-items-start border-0 px-0 bg-transparent py-0">
                                            <i class="bi bi-arrow-clockwise fs-5 me-3 mt-0.5" style="color: #ef4444;"></i>
                                            <span class="fw-semibold" style="color: #1e293b;">Do not refresh, reload, or navigate away from the page during the live quiz window.</span>
                                        </li>
                                        <li class="list-group-item d-flex align-items-start border-0 px-0 bg-transparent py-0">
                                            <i class="bi bi-ui-checks fs-5 me-3 mt-0.5" style="color: #4f46e5;"></i>
                                            <span style="color: #475569;">Each item is single-choice; exactly one response format is correct.</span>
                                        </li>
                                        <li class="list-group-item d-flex align-items-start border-0 px-0 bg-transparent py-0">
                                            <i class="bi bi-alarm fs-5 me-3 mt-0.5" style="color: #4f46e5;"></i>
                                            <span style="color: #475569;">The structural countdown sequence initializes instantly upon clicking start.</span>
                                        </li>
                                        <li class="list-group-item d-flex align-items-start border-0 px-0 bg-transparent py-0">
                                            <i class="bi bi-lock-fill fs-5 me-3 mt-0.5" style="color: #64748b;"></i>
                                            <span style="color: #475569;">Answers cannot be modified or re-evaluated post-submission.</span>
                                        </li>
                                    </ul>
                                </div>

                                <!-- CTA Action Row featuring Jade/Emerald Accents -->
                                <div class="row align-items-center g-3">
                                    <div class="col-md-7 text-muted small">
                                        By clicking "Start Quiz Now", you agree to complete this assessment independently.
                                    </div>
                                    <div class="col-md-5 text-md-end">
                                        <a href="{{ route('quiz.start', $contest) }}" 
                                           class="btn btn-lg px-4 py-3 rounded-3 fw-bold border-0 text-white w-100 d-flex align-items-center justify-content-center"
                                           style="background-color: #059669; transition: background 0.2s ease;"
                                           onmouseover="this.style.backgroundColor='#047857'"
                                           onmouseout="this.style.backgroundColor='#059669'">
                                            Start Quiz Now <i class="bi bi-arrow-right ms-2"></i>
                                        </a>
                                    </div>
                                </div>

                            </div>

                        </div>
                    </div>

                </div>
            </div>
        </div>
    </section>
@endsection