@extends('layouts.app')

@section('title', $conference->title)

@section('meta')
<meta name="description" content="{{ Str::limit($conference->short_description, 160) }}">
@if($conference->image_url)
<meta property="og:image" content="{{ asset($conference->image_url) }}">
@endif
@endsection

@section('content')
<!-- Page Header Start -->
<div class="container-fluid page-header py-6 my-6 mt-0 wow fadeIn" data-wow-delay="0.1s">
    <div class="container text-center">
        <h1 class="display-4 text-white animated slideInDown mb-4">{{ $conference->title }}</h1>
        <nav aria-label="breadcrumb animated slideInDown">
            <ol class="breadcrumb justify-content-center mb-0">
                <li class="breadcrumb-item"><a class="text-white" href="{{ route('home', ['locale' => app()->getLocale()]) }}">{{ __('navigation.home') }}</a></li>
                <li class="breadcrumb-item"><a class="text-white" href="{{ route('conferences.index', ['locale' => app()->getLocale()]) }}">{{ __('navigation.conferences') }}</a></li>
                <li class="breadcrumb-item text-primary active" aria-current="page">{{ Str::limit($conference->title, 30) }}</li>
            </ol>
        </nav>
    </div>
</div>
<!-- Page Header End -->

<!-- Conference Detail Start -->
<div class="container-xxl py-6">
    <div class="container">
        <div class="row g-5">
            <div class="col-lg-8 wow fadeInUp" data-wow-delay="0.1s">
                <!-- Conference Image -->
                @if($conference->banner_url)
                <div class="mb-4">
                    <img class="img-fluid w-100 rounded" src="{{ asset($conference->banner_url) }}" alt="{{ $conference->title }}">
                </div>
                @endif

                <!-- Conference Info -->
                <div class="mb-5">
                    <h2 class="mb-4">{{ __('navigation.conference_details') }}</h2>
                    <div class="row g-4 mb-4">
                        <div class="col-md-6">
                            <div class="d-flex align-items-center">
                                <i class="fa fa-calendar fa-2x text-primary me-3"></i>
                                <div>
                                    <h6 class="mb-0">{{ __('navigation.date') }}</h6>
                                    <p class="mb-0">{{ $conference->formatted_date }}</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="d-flex align-items-center">
                                <i class="fa fa-clock fa-2x text-primary me-3"></i>
                                <div>
                                    <h6 class="mb-0">{{ __('navigation.time') }}</h6>
                                    <p class="mb-0">{{ $conference->time ? $conference->time->format('H:i') : '' }}
                                        @if($conference->end_time)
                                        - {{ $conference->end_time->format('H:i') }}
                                        @endif
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="d-flex align-items-center">
                                <i class="fa fa-map-marker fa-2x text-primary me-3"></i>
                                <div>
                                    <h6 class="mb-0">{{ __('navigation.location') }}</h6>
                                    <p class="mb-0">{{ $conference->location }}</p>
                                    @if($conference->venue)
                                    <small class="text-muted">{{ $conference->venue }}</small>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="d-flex align-items-center">
                                <i class="fa fa-user fa-2x text-primary me-3"></i>
                                <div>
                                    <h6 class="mb-0">{{ __('navigation.organizer') }}</h6>
                                    <p class="mb-0">{{ $conference->organizer }}</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Price and Registration -->
                    <div class="bg-light p-4 rounded mb-4">
                        <div class="row align-items-center">
                            <div class="col-md-6">
                                <h4 class="text-primary mb-0">{{ $conference->formatted_price }}</h4>
                                @if($conference->discounted_price && $conference->discounted_price < $conference->price)
                                <small class="text-muted"><s>${{ number_format($conference->price, 2) }}</s></small>
                                @endif
                            </div>
                            <div class="col-md-6 text-md-end">
                                @if($conference->registration_status === 'open')
                                <a href="{{ route('conferences.register', ['locale' => app()->getLocale(), 'id' => $conference->id]) }}" class="btn btn-primary">{{ __('navigation.register_now') }}</a>
                                @elseif($conference->registration_status === 'not_open')
                                <span class="text-muted">{{ __('navigation.registration_not_open') }}</span>
                                @else
                                <span class="text-muted">{{ __('navigation.registration_closed') }}</span>
                                @endif
                            </div>
                        </div>
                    </div>

                    <!-- Description -->
                    <div class="mb-5">
                        <h3 class="mb-3">{{ __('navigation.description') }}</h3>
                        <div>{!! $conference->description !!}</div>
                    </div>

                    <!-- Speakers -->
                    @if($conference->speakers->count() > 0)
                    <div class="mb-5">
                        <h3 class="mb-4">{{ __('navigation.speakers') }}</h3>
                        <div class="row g-4">
                            @foreach($conference->speakers as $speaker)
                            <div class="col-md-6">
                                <div class="d-flex align-items-center">
                                    @if($speaker->photo_url)
                                    <img class="rounded-circle me-3" src="{{ asset($speaker->photo_url) }}" alt="{{ $speaker->name }}" style="width: 60px; height: 60px; object-fit: cover;">
                                    @else
                                    <div class="bg-primary rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 60px; height: 60px;">
                                        <i class="fa fa-user text-white"></i>
                                    </div>
                                    @endif
                                    <div>
                                        <h6 class="mb-0">{{ $speaker->name }}</h6>
                                        <small class="text-muted">{{ $speaker->title }}</small>
                                        @if($speaker->organization)
                                        <br><small class="text-muted">{{ $speaker->organization }}</small>
                                        @endif
                                    </div>
                                </div>
                                @if($speaker->bio)
                                <p class="mt-2 small">{{ Str::limit($speaker->bio, 150) }}</p>
                                @endif
                            </div>
                            @endforeach
                        </div>
                    </div>
                    @endif

                    <!-- Sponsors -->
                    @if($conference->sponsors->count() > 0)
                    <div class="mb-5">
                        <h3 class="mb-4">{{ __('navigation.sponsors') }}</h3>
                        <div class="row g-4">
                            @foreach($conference->sponsors as $sponsor)
                            <div class="col-md-4 text-center">
                                @if($sponsor->logo_url)
                                <a href="{{ $sponsor->website_url }}" target="_blank" class="d-block">
                                    <img class="img-fluid mb-2" src="{{ asset($sponsor->logo_url) }}" alt="{{ $sponsor->name }}" style="max-height: 80px;">
                                </a>
                                @endif
                                <h6 class="mb-1">{{ $sponsor->name }}</h6>
                                @if($sponsor->sponsor_level)
                                <small class="text-muted">{{ $sponsor->sponsor_level }}</small>
                                @endif
                            </div>
                            @endforeach
                        </div>
                    </div>
                    @endif
                </div>
            </div>

            <!-- Sidebar -->
            <div class="col-lg-4 wow fadeInUp" data-wow-delay="0.5s">
                <!-- Registration Card -->
                <div class="bg-primary text-white p-4 mb-4 rounded">
                    <h4 class="mb-3">{{ __('navigation.register_now') }}</h4>
                    <p class="mb-3">{{ __('navigation.join_conference') }}</p>
                    @if($conference->registration_status === 'open')
                    <a href="{{ route('conferences.register', ['locale' => app()->getLocale(), 'id' => $conference->id]) }}" class="btn btn-light">{{ __('navigation.register_now') }}</a>
                    @elseif($conference->registration_status === 'not_open')
                    <span class="text-warning">{{ __('navigation.registration_not_open') }}</span>
                    @else
                    <span class="text-danger">{{ __('navigation.registration_closed') }}</span>
                    @endif
                </div>

                <!-- Conference Stats -->
                <div class="bg-light p-4 mb-4 rounded">
                    <h5 class="mb-3">{{ __('navigation.conference_stats') }}</h5>
                    <div class="d-flex justify-content-between mb-2">
                        <span>{{ __('navigation.registered') }}:</span>
                        <span class="fw-bold">{{ $conference->registration_count }}</span>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span>{{ __('navigation.views') }}:</span>
                        <span class="fw-bold">{{ $conference->views_count }}</span>
                    </div>
                    @if($conference->start_registration_date)
                    <div class="d-flex justify-content-between">
                        <span>{{ __('navigation.registration_deadline') }}:</span>
                        <span class="fw-bold">{{ $conference->end_registration_date ? $conference->end_registration_date->format('M d, Y') : __('navigation.open') }}</span>
                    </div>
                    @endif
                </div>

                <!-- Related Conferences -->
                @if($relatedConferences->count() > 0)
                <div class="bg-light p-4 rounded">
                    <h5 class="mb-3">{{ __('navigation.related_conferences') }}</h5>
                    @foreach($relatedConferences as $related)
                    <div class="mb-3 pb-3 border-bottom">
                        <a href="{{ route('conferences.show', ['locale' => app()->getLocale(), 'slug' => $related->slug]) }}" class="text-decoration-none">
                            <h6 class="mb-1">{{ Str::limit($related->title, 40) }}</h6>
                            <small class="text-muted">{{ $related->formatted_date }}</small>
                        </a>
                    </div>
                    @endforeach
                </div>
                @endif
            </div>
        </div>
    </div>
</div>
<!-- Conference Detail End -->
@endsection