@extends('layouts.public')

@section('title', ($event->seo_title ?: $event->title) . ' - ' . config('app.name'))
@section('meta_description', $event->seo_description ?: ($event->excerpt ?: 'Event details'))

@push('styles')
<style>
    .event-wrap { max-width: 1120px; margin: 0 auto; }
    .event-pill { border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; }
    .event-form-input { width: 100%; border: 1px solid #d1d5db; border-radius: 10px; padding: 10px 12px; font-size: 14px; }
    .event-form-input:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 18%, transparent); border-color: var(--brand-primary); }
    .event-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 24px; box-shadow: 0 12px 28px rgba(15,23,42,.07); }
    .event-section-title { font-size: 34px; line-height: 1.1; font-weight: 900; color: var(--brand-secondary); }
    .event-countdown { background: var(--page-head-gradient); color: #fff; border-radius: 16px; padding: 14px 18px; margin-bottom: 24px; }
    .event-countdown-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
    .event-countdown-label { font-weight: 700; }
    .event-countdown-grid { display: grid; grid-template-columns: repeat(4, minmax(68px, 1fr)); gap: 12px; text-align: center; }
    .event-countdown-value { font-size: 20px; line-height: 1; font-weight: 800; color: #fff; }
    .event-countdown-unit { font-size: 11px; font-weight: 600; color: #cbd5e1; margin-top: 4px; }
    @media (max-width: 992px) {
        .event-section-title { font-size: 30px; }
    }
    @media (max-width: 640px) {
        .event-countdown-grid { grid-template-columns: repeat(2, minmax(68px, 1fr)); width: 100%; }
    }
</style>
@endpush

@section('content')
<section class="bg-gray-50 py-10 md:py-14">
    <div class="event-wrap px-4">
        <article class="event-card overflow-hidden">
            @if($event->cover_image)
                <div class="h-56 md:h-72 bg-gray-100">
                    <img src="{{ $event->cover_url }}" alt="{{ $event->title }}" class="w-full h-full object-cover">
                </div>
            @endif

            <div class="p-5 md:p-8">
                <div class="event-countdown">
                    <div class="event-countdown-row">
                        <p class="event-countdown-label">Event Starts in:</p>
                        <div id="countdown" class="event-countdown-grid">
                            <div><p data-cd="days" class="event-countdown-value">00</p><p class="event-countdown-unit">Days</p></div>
                            <div><p data-cd="hours" class="event-countdown-value">00</p><p class="event-countdown-unit">Hours</p></div>
                            <div><p data-cd="minutes" class="event-countdown-value">00</p><p class="event-countdown-unit">Minutes</p></div>
                            <div><p data-cd="seconds" class="event-countdown-value">00</p><p class="event-countdown-unit">Seconds</p></div>
                        </div>
                    </div>
                </div>

                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                    <div>
                        <p class="text-sm text-red-600 font-semibold mb-2 accent">{{ $event->starts_at ? $event->starts_at->format('d M Y, h:i A') : 'Date coming soon' }}</p>
                        <h1 class="event-section-title mb-4">{{ $event->title }}</h1>

                        <div class="text-gray-700 leading-relaxed whitespace-pre-line mb-5">
                            {{ $event->content }}
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-3 gap-3 mb-4">
                            <div class="event-pill p-3">
                                <p class="text-xs text-gray-400 uppercase">Date</p>
                                <p class="text-sm font-semibold text-gray-800">{{ $event->starts_at ? $event->starts_at->format('d/m/Y') : '-' }}</p>
                            </div>
                            <div class="event-pill p-3">
                                <p class="text-xs text-gray-400 uppercase">Time</p>
                                <p class="text-sm font-semibold text-gray-800">{{ $event->starts_at ? $event->starts_at->format('h:i A') : '-' }}</p>
                            </div>
                            <div class="event-pill p-3">
                                <p class="text-xs text-gray-400 uppercase">Venue</p>
                                <p class="text-sm font-semibold text-gray-800">{{ $event->venue ?: '-' }}</p>
                            </div>
                        </div>

                        <div class="text-sm text-gray-700">
                            @if($event->location)<p><strong>Location:</strong> {{ $event->location }}</p>@endif
                            @if($event->excerpt)<p class="mt-2">{{ $event->excerpt }}</p>@endif
                        </div>
                    </div>

                    <div>
                        <div class="bg-[#f7f7fb] border border-gray-200 rounded-2xl p-5">
                            <h2 class="text-2xl font-black text-gray-900 mb-4">Event Registration</h2>

                            @if(session('success'))
                                <div class="mb-4 bg-green-50 border border-green-200 text-green-700 px-3 py-2 rounded-lg text-sm">
                                    {{ session('success') }}
                                </div>
                            @endif

                            <form method="POST" action="{{ route('events.register', $event->slug) }}" class="space-y-3">
                                @csrf
                                <input type="text" name="full_name" value="{{ old('full_name') }}" required class="event-form-input @error('full_name') !border-red-400 @enderror" placeholder="Full Name *">
                                @error('full_name')<p class="text-xs text-red-500">{{ $message }}</p>@enderror

                                <input type="email" name="email" value="{{ old('email') }}" required class="event-form-input @error('email') !border-red-400 @enderror" placeholder="Email *">
                                @error('email')<p class="text-xs text-red-500">{{ $message }}</p>@enderror

                                <input type="tel" name="phone" value="{{ old('phone') }}" required data-phone-input autocomplete="tel" class="event-form-input @error('phone') !border-red-400 @enderror" placeholder="Phone Number *">
                                @error('phone')<p class="text-xs text-red-500">{{ $message }}</p>@enderror

                                <select name="last_qualification" required class="event-form-input @error('last_qualification') !border-red-400 @enderror">
                                    <option value="">Last Academic Qualification *</option>
                                    @foreach(['SSC/O Level', 'HSC/A Level', 'Diploma', 'Bachelor', 'Masters/Professional'] as $item)
                                        <option value="{{ $item }}" {{ old('last_qualification') === $item ? 'selected' : '' }}>{{ $item }}</option>
                                    @endforeach
                                </select>
                                @error('last_qualification')<p class="text-xs text-red-500">{{ $message }}</p>@enderror

                                <input type="text" name="undergraduate_result" value="{{ old('undergraduate_result') }}" class="event-form-input" placeholder="Undergraduate Result (CGPA)">

                                <select name="ielts_status" class="event-form-input">
                                    <option value="">IELTS / PTE Status</option>
                                    @foreach(['Have Score', 'Booked Test Date', 'Planning To Take', 'Not Applicable'] as $item)
                                        <option value="{{ $item }}" {{ old('ielts_status') === $item ? 'selected' : '' }}>{{ $item }}</option>
                                    @endforeach
                                </select>

                                <input type="text" name="english_score" value="{{ old('english_score') }}" class="event-form-input" placeholder="Your English Proficiency Score">

                                <button type="submit" class="w-full bg-red-600 hover:bg-red-700 text-white font-semibold py-2.5 rounded-lg transition">
                                    Submit Registration
                                </button>
                            </form>
                        </div>
                    </div>
                </div>

                <div class="mt-10">
                    <div class="text-center mb-4">
                        <h3 class="text-3xl font-black text-gray-900">Event Location</h3>
                        <p class="text-sm text-gray-500">Find us at this venue</p>
                    </div>
                    @php $mapQuery = urlencode($event->location ?: ($event->venue ?: 'Dhaka')); @endphp
                    <iframe
                        src="https://www.google.com/maps?q={{ $mapQuery }}&output=embed"
                        width="100%"
                        height="330"
                        style="border:0;border-radius:16px;"
                        loading="lazy"
                        referrerpolicy="no-referrer-when-downgrade">
                    </iframe>
                </div>
            </div>
        </article>
    </div>
</section>

<section class="py-14 bg-gray-50">
    <div class="event-wrap px-4">
        <div class="text-center mb-8">
            <h2 class="text-4xl font-black text-gray-900">Browse Other Events</h2>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach($otherEvents as $item)
                <article class="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">
                    <a href="{{ route('events.show', $item->slug) }}">
                        <div class="h-44 bg-gray-100">
                            @if($item->cover_image)
                                <img src="{{ $item->cover_url }}" alt="{{ $item->title }}" class="w-full h-full object-cover">
                            @endif
                        </div>
                    </a>
                    <div class="p-5">
                        <p class="text-xs text-red-600 font-semibold mb-2 accent">{{ $item->starts_at ? $item->starts_at->format('d M Y, h:i A') : 'Date coming soon' }}</p>
                        <h3 class="text-lg font-bold text-gray-900 mb-3">{{ $item->title }}</h3>
                        <a href="{{ route('events.show', $item->slug) }}" class="inline-flex items-center justify-center w-full border border-gray-300 rounded-full py-2.5 text-sm font-semibold text-gray-800 hover:bg-gray-50">View Details</a>
                    </div>
                </article>
            @endforeach
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script>
(() => {
    const startsAtRaw = @json(optional($event->starts_at)->toIso8601String());
    const cdRoot = document.getElementById('countdown');
    if (!cdRoot || !startsAtRaw) return;

    const target = new Date(startsAtRaw).getTime();
    const daysEl = cdRoot.querySelector('[data-cd="days"]');
    const hoursEl = cdRoot.querySelector('[data-cd="hours"]');
    const minsEl = cdRoot.querySelector('[data-cd="minutes"]');
    const secsEl = cdRoot.querySelector('[data-cd="seconds"]');

    function render() {
        const now = Date.now();
        let diff = Math.max(0, target - now);
        const d = Math.floor(diff / (1000 * 60 * 60 * 24));
        diff -= d * (1000 * 60 * 60 * 24);
        const h = Math.floor(diff / (1000 * 60 * 60));
        diff -= h * (1000 * 60 * 60);
        const m = Math.floor(diff / (1000 * 60));
        diff -= m * (1000 * 60);
        const s = Math.floor(diff / 1000);

        daysEl.textContent = String(d).padStart(2, '0');
        hoursEl.textContent = String(h).padStart(2, '0');
        minsEl.textContent = String(m).padStart(2, '0');
        secsEl.textContent = String(s).padStart(2, '0');
    }

    render();
    setInterval(render, 1000);
})();
</script>
@endpush