@extends('frontend.layouts.registration')

@section('title', $title)
@section('description', $description)

@section('content')
    @php
        $steps = [
            'details' => 'Event',
            'form' => 'Register',
            'done' => 'Done',
        ];
        $step_keys = array_keys($steps);
        $current_index = (int) array_search($step, $step_keys, true);
        $completed_count = max(0, $current_index);
        $total_steps = count($steps);
        $progress_pct = (int) round(($completed_count / max(1, $total_steps - 1)) * 100);
        if ($step === 'done') {
            $progress_pct = 100;
            $completed_count = $total_steps;
        }

        $countdown_target = $event->start_date?->toIso8601String();
        $social_links = collect($social_links ?? []);
    @endphp

    <div class="reg-split reg-split--step-{{ $step }}">
        <aside
            class="reg-hero {{ !empty($hero_image_url) ? 'has-image' : '' }}"
            @if(!empty($hero_image_url))
                style="background-image: url('{{ $hero_image_url }}');"
            @endif
        >
            <div class="reg-hero__overlay" aria-hidden="true"></div>
            <div class="reg-hero__mesh" aria-hidden="true"></div>

            <div class="reg-hero__top">
                <a href="{{ $home_url }}" class="reg-hero__brand">
                    @if(!empty($logo_url))
                        <img src="{{ $logo_url }}" alt="{{ $site_name ?? config('app.name') }}">
                    @else
                        <strong>{{ $site_name ?? config('app.name') }}</strong>
                    @endif
                </a>

                @if($social_links->isNotEmpty())
                    <div class="reg-hero__social">
                        @foreach($social_links as $social)
                            <a href="{{ $social['url'] }}" target="_blank" rel="noopener noreferrer" aria-label="{{ $social['label'] }}">
                                @if($social['key'] === 'facebook_url')
                                    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M14 8.5h2.5V5H14c-2.4 0-4 1.5-4 4v2H7.5v3.5H10V20h3.5v-5.5h2.6L16.7 11H13.5V9c0-.4.4-.5.5-.5z"/></svg>
                                @elseif($social['key'] === 'twitter_url')
                                    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M18.2 3H21l-6.5 7.4L22 21h-6.2l-4.4-5.5L6.2 21H3.4l7-8L2 3h6.3l4 5.1L18.2 3zm-1.1 16.2h1.7L7 4.7H5.2l11.9 14.5z"/></svg>
                                @else
                                    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M7 3h10a4 4 0 0 1 4 4v10a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V7a4 4 0 0 1 4-4zm0 2a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2H7zm5 2.8A4.2 4.2 0 1 1 7.8 12 4.2 4.2 0 0 1 12 7.8zm0 2A2.2 2.2 0 1 0 14.2 12 2.2 2.2 0 0 0 12 9.8zM17.4 6.4a1 1 0 1 1-1 1 1 1 0 0 1 1-1z"/></svg>
                                @endif
                            </a>
                        @endforeach
                    </div>
                @endif
            </div>

            <div class="reg-hero__main">
                <p class="reg-hero__kicker">{{ $event->category?->name ?? 'Event registration' }}</p>
                <h1 class="reg-hero__title">{{ $event->title }}</h1>
                <p class="reg-hero__date">
                    {{ $event->start_date->format('d F Y') }}
                    @if($event->start_date->format('H:i') !== '00:00')
                        · {{ $event->start_date->format('g:i A') }}
                    @endif
                </p>

                @if($countdown_target && $event->start_date->isFuture())
                    <div
                        class="reg-countdown"
                        data-countdown
                        data-target="{{ $countdown_target }}"
                        aria-label="Countdown to event"
                    >
                        <div class="reg-countdown__item">
                            <span class="reg-countdown__value" data-days>00</span>
                            <span class="reg-countdown__label">day</span>
                        </div>
                        <div class="reg-countdown__item">
                            <span class="reg-countdown__value" data-hours>00</span>
                            <span class="reg-countdown__label">hours</span>
                        </div>
                        <div class="reg-countdown__item">
                            <span class="reg-countdown__value" data-minutes>00</span>
                            <span class="reg-countdown__label">minutes</span>
                        </div>
                        <div class="reg-countdown__item">
                            <span class="reg-countdown__value" data-seconds>00</span>
                            <span class="reg-countdown__label">seconds</span>
                        </div>
                    </div>
                @endif
            </div>

            <div class="reg-hero__bottom">
                <a href="{{ $event_url }}" class="reg-hero__link">
                    Program and Info
                    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
                        <path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </a>
            </div>
        </aside>

        <section class="reg-panel">
            <div class="reg-panel__inner">
                @if($step !== 'details')
                    <div class="reg-panel__mobile-brand">
                        <a href="{{ $home_url }}" class="reg-panel__mobile-brand-link">
                            @if(!empty($logo_url))
                                <img src="{{ $logo_url }}" alt="{{ $site_name ?? config('app.name') }}">
                            @else
                                <strong>{{ $site_name ?? config('app.name') }}</strong>
                            @endif
                        </a>
                    </div>
                @endif
                <div class="reg-panel__top">
                    <div class="reg-progress" aria-label="Registration progress">
                        <p class="reg-progress__text">
                            {{ $completed_count }} of {{ $total_steps }} completed
                        </p>
                        <div class="reg-progress__track">
                            <div class="reg-progress__bar" style="width: {{ $progress_pct }}%;"></div>
                        </div>
                    </div>
                </div>

                <div class="reg-panel__body">
                    @if(session('error'))
                        <div class="reg-alert error">{{ session('error') }}</div>
                    @endif

                    @if(!$event->isRegistrationOpen() && $step !== 'done')
                        <p class="reg-kicker">{{ $event->category?->name ?? 'Event registration' }}</p>
                        <h2 class="reg-title">{{ $event->title }}</h2>
                        <div class="reg-alert warning" style="margin-bottom:0;">
                            @if($event->isFull())
                                This event is full.
                            @elseif($event->registration_deadline && now() > $event->registration_deadline)
                                Registration for this event has closed.
                            @else
                                Registration is not available for this event.
                            @endif
                        </div>
                    @elseif($step === 'details')
                        @include('frontend.events.partials.public-register-details')
                    @elseif($step === 'form')
                        @include('frontend.events.partials.public-register-form')
                    @elseif($step === 'done')
                        @include('frontend.events.partials.public-register-done')
                    @endif
                </div>

                <div class="reg-panel__footer">
                    <span>&copy; {{ $site_name ?? config('app.name') }}</span>
                    <a href="{{ $help_url }}">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                            <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="1.8"/>
                            <path d="M9.6 9.2a2.4 2.4 0 1 1 3.5 2.1c-.7.4-1.1.9-1.1 1.7v.3" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
                            <circle cx="12" cy="16.8" r="1" fill="currentColor"/>
                        </svg>
                        Help
                    </a>
                </div>
            </div>
        </section>
    </div>
@endsection

@push('scripts')
<script>
(function () {
    var root = document.querySelector('[data-countdown]');
    if (!root) return;

    var target = Date.parse(root.getAttribute('data-target') || '');
    if (!target || Number.isNaN(target)) return;

    var days_el = root.querySelector('[data-days]');
    var hours_el = root.querySelector('[data-hours]');
    var minutes_el = root.querySelector('[data-minutes]');
    var seconds_el = root.querySelector('[data-seconds]');

    function pad(value) {
        return String(Math.max(0, value)).padStart(2, '0');
    }

    function tick() {
        var diff = Math.max(0, target - Date.now());
        var total_seconds = Math.floor(diff / 1000);
        var days = Math.floor(total_seconds / 86400);
        var hours = Math.floor((total_seconds % 86400) / 3600);
        var minutes = Math.floor((total_seconds % 3600) / 60);
        var seconds = total_seconds % 60;

        days_el.textContent = pad(days);
        hours_el.textContent = pad(hours);
        minutes_el.textContent = pad(minutes);
        seconds_el.textContent = pad(seconds);

        if (diff <= 0) {
            clearInterval(timer_id);
        }
    }

    tick();
    var timer_id = setInterval(tick, 1000);
})();
</script>
@endpush