@extends('layouts.app')

@section('title', $event->title . ' | AICDS Events')

@section('content')

<x-breadcrumb :title="$event->title" :breadcrumbs="['Events' => route('events.index'), $event->category->name => route('events.category', $event->event_type), 'Details' => '#']" />

<div class="event__details__area sp_top_100 sp_bottom_100">
    <div class="container">
        <div class="row">
            <!-- Main Content -->
            <div class="col-xl-8 col-lg-8" data-aos="fade-up">
                <div class="event__details__img mb-4 rounded-4 overflow-hidden shadow">
                    <img loading="lazy" src="{{ asset($event->featured_image ?? 'img/program/ai_1.jpg') }}" alt="{{ $event->title }}" class="w-100" style="max-height: 420px; object-fit: cover;">
                </div>

                <div class="d-flex flex-wrap gap-2 mb-3">
                    <span class="badge bg-primary text-uppercase px-3 py-2 fs-6">{{ $event->event_type }}</span>
                    <span class="badge bg-secondary text-uppercase px-3 py-2 fs-6">{{ $event->mode }}</span>
                    @if($event->hasSeatsAvailable())
                        <span class="badge bg-success-subtle text-success border px-3 py-2 fs-6">
                            <i class="icofont-ticket"></i> {{ $event->capacity - $event->registered_count }} Seats Available
                        </span>
                    @else
                        <span class="badge bg-danger px-3 py-2 fs-6">Sold Out / Full</span>
                    @endif
                </div>

                <h2 class="fw-bold mb-3">{{ $event->title }}</h2>
                <p class="fs-5 text-muted mb-4">{{ $event->short_description }}</p>

                <div class="border-top pt-4 mb-4">
                    <h4 class="fw-bold mb-3">Summit Overview</h4>
                    <div class="text-dark lh-lg">
                        {!! nl2br(e($event->description)) !!}
                    </div>
                </div>

                @if($event->speaker_name)
                    <div class="p-4 bg-light rounded-4 border mb-4">
                        <div class="d-flex align-items-center gap-3 mb-2">
                            <div class="rounded-circle bg-primary text-white p-3 fs-3"><i class="icofont-user"></i></div>
                            <div>
                                <h5 class="fw-bold mb-0">{{ $event->speaker_name }}</h5>
                                <small class="text-primary fw-semibold">{{ $event->speaker_designation }}</small>
                            </div>
                        </div>
                        <p class="text-muted small mb-0 mt-2">{{ $event->speaker_bio }}</p>
                    </div>
                @endif
            </div>

            <!-- Sidebar / Registration Form -->
            <div class="col-xl-4 col-lg-4" data-aos="fade-up">
                <div class="p-4 bg-light rounded-4 border shadow-sm sticky-top" style="top: 100px;">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <span class="text-muted small">Registration Fee:</span>
                        @if($event->registration_fee > 0)
                            <span class="fs-4 fw-bold text-primary">₹{{ number_format($event->registration_fee, 2) }}</span>
                        @else
                            <span class="badge bg-success fs-6 px-3 py-2 fw-bold">FREE ADMISSION</span>
                        @endif
                    </div>

                    <ul class="list-unstyled mb-4 small border-top pt-3">
                        <li class="py-2 border-bottom d-flex justify-content-between">
                            <span class="text-muted"><i class="icofont-calendar text-primary me-1"></i> Start Date:</span>
                            <strong>{{ $event->start_date->format('M d, Y') }}</strong>
                        </li>
                        <li class="py-2 border-bottom d-flex justify-content-between">
                            <span class="text-muted"><i class="icofont-clock-time text-primary me-1"></i> Time:</span>
                            <strong>{{ $event->start_date->format('h:i A') }} - {{ $event->end_date->format('h:i A') }}</strong>
                        </li>
                        <li class="py-2 border-bottom d-flex justify-content-between">
                            <span class="text-muted"><i class="icofont-location-pin text-primary me-1"></i> Venue / Mode:</span>
                            <span class="text-end">{{ $event->venue ?? ucfirst($event->mode) }}</span>
                        </li>
                        @if($event->registration_deadline)
                            <li class="py-2 border-bottom d-flex justify-content-between">
                                <span class="text-muted"><i class="icofont-stopwatch text-danger me-1"></i> Deadline:</span>
                                <strong class="text-danger">{{ $event->registration_deadline->format('M d, Y') }}</strong>
                            </li>
                        @endif
                        <li class="py-2 border-bottom d-flex justify-content-between">
                            <span class="text-muted"><i class="icofont-users text-primary me-1"></i> Total Capacity:</span>
                            <span>{{ $event->registered_count }} / {{ $event->capacity }}</span>
                        </li>
                        <li class="py-2 d-flex justify-content-between">
                            <span class="text-muted"><i class="icofont-certificate-alt-1 text-primary me-1"></i> Certificate:</span>
                            <span class="text-success fw-bold">{{ $event->certificate_available ? 'Eligible for Certificate' : 'Not Applicable' }}</span>
                        </li>
                    </ul>

                    @if($event->isRegistrationOpen())
                        <div class="border-top pt-3">
                            <h5 class="fw-bold mb-3 text-dark">Register for this Event</h5>
                            <form action="{{ route('events.register', $event->slug) }}" method="POST">
                                @csrf
                                <div class="mb-3">
                                    <label class="form-label small fw-semibold">Full Name <span class="text-danger">*</span></label>
                                    <input type="text" name="full_name" value="{{ old('full_name', auth()->user()?->name) }}" required class="form-control form-control-sm" placeholder="Your Name">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label small fw-semibold">Email Address <span class="text-danger">*</span></label>
                                    <input type="email" name="email" value="{{ old('email', auth()->user()?->email) }}" required class="form-control form-control-sm" placeholder="Email for confirmation">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label small fw-semibold">Phone Number <span class="text-danger">*</span></label>
                                    <input type="text" name="phone" value="{{ old('phone', auth()->user()?->phone) }}" required class="form-control form-control-sm" placeholder="+91 98765 43210">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label small fw-semibold">College / Organization <span class="text-danger">*</span></label>
                                    <input type="text" name="institution_or_company" value="{{ old('institution_or_company', auth()->user()?->organization) }}" required class="form-control form-control-sm" placeholder="e.g. Apex Institute">
                                </div>

                                <button type="submit" class="default__button w-100 py-3 text-center">
                                    Confirm Registration
                                </button>
                            </form>
                        </div>
                    @else
                        <div class="alert alert-warning text-center small mb-0">
                            <i class="icofont-warning-alt me-1"></i> Registrations for this summit are currently closed or full.
                        </div>
                    @endif
                </div>
            </div>
        </div>

        @if($relatedEvents->count() > 0)
            <div class="row pt-5 mt-5 border-top">
                <div class="col-12 mb-4">
                    <h3 class="fw-bold">Other Events in this Category</h3>
                </div>
                @foreach($relatedEvents as $rel)
                    <x-event-card :event="$rel" />
                @endforeach
            </div>
        @endif
    </div>
</div>

@endsection