@extends('layouts/blankLayout')

@section('title', $event->event_name ?? 'Event View')

@section('page-style')
<link rel="stylesheet" href="{{asset('assets/vendor/css/pages/page-help-center.css')}}" />
<style>
  body {
    background: #f6f6fa;
  }
  .event-hero-img {
    width: 100%;
    max-width: 700px;
    height: 280px;
    object-fit: cover;
    border-radius: 24px;
    margin: 32px auto 0 auto;
    display: block;
    background: #fafafa;
  }
  .event-info-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 2px 12px rgba(16,30,54,0.08);
    padding: 2rem 2.5rem 2rem 2.5rem;
    margin: -60px auto 32px auto;
    max-width: 720px;
    position: relative;
    z-index: 2;
  }
  .event-info-title {
    font-size: 2rem;
    font-weight: 800;
    color: #273142;
    margin-bottom: 0.3rem;
    word-break: break-word;
  }
  .event-info-date {
    color: #6c757d;
    font-size: 1.1rem;
    margin-bottom: 1.2rem;
    font-weight: 500;
  }
  .event-info-details {
    font-size: 1.12rem;
    color: #3b3f5c;
    margin-bottom: 0.5rem;
    white-space: pre-line;
  }
  .event-photo-gallery-section {
    background: #f6f6fa;
    padding: 24px 0 32px 0;
  }
  .event-photo-gallery-container {
    max-width: 1120px;
    margin: 0 auto;
  }
  .event-gallery-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 1.2rem;
    color: #26314f;
  }
  .event-gallery-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    justify-content: flex-start;
  }
  .event-gallery-img {
    width: 220px;
    height: 160px;
    object-fit: cover;
    border-radius: 12px;
    background: #f2f2f2;
    box-shadow: 0 2px 8px rgba(16,30,54,0.06);
    cursor: pointer;
    transition: transform 0.12s;
  }
  .event-gallery-img:hover {
    transform: scale(1.04);
  }
  @media (max-width: 900px) {
    .event-photo-gallery-container { max-width: 98vw; }
    .event-gallery-img { width: 45vw; max-width: 220px; }
  }
  @media (max-width: 600px) {
    .event-info-card { padding: 1.2rem 1rem; max-width: 96vw;}
    .event-hero-img { max-width: 98vw; height: 160px;}
    .event-gallery-img { width: 98vw; height: 120px; max-width: 98vw;}
    .event-photo-gallery-container { padding: 0 2vw;}
  }
</style>
@endsection

@section('content')
<!-- Event Hero Image -->
@if($event->event_cover)
  <img src="{{ $event->event_cover }}" alt="{{ $event->event_name }}" class="event-hero-img">
@else
  <div class="event-hero-img d-flex align-items-center justify-content-center" style="background:#f5f5f7;height:280px;">
    <span class="text-muted">No Cover Image</span>
  </div>
@endif

<!-- Event Info Card -->
<div class="event-info-card text-center">
  <div class="event-info-title">{{ $event->event_name }}</div>
  <div class="event-info-date">
    {{ \Carbon\Carbon::parse($event->event_date)->format('l, F d, Y') }}
  </div>
  @if(!empty($event->event_details))
    <div class="event-info-details">
      {{ $event->event_details }}
    </div>
  @endif
</div>

<!-- Event Photos Gallery -->
@if(isset($event_photos) && count($event_photos))
<div class="event-photo-gallery-section">
  <div class="event-photo-gallery-container">
    <div class="event-gallery-title">Photos from this Event</div>
    <div class="event-gallery-grid">
      @foreach($event_photos as $photo_url)
        <a href="{{ $photo_url }}" target="_blank">
          <img src="{{ $photo_url }}" alt="Event Photo" class="event-gallery-img" loading="lazy">
        </a>
      @endforeach
    </div>
  </div>
</div>
@endif

<!-- Help Area -->
<div class="help-center-contact-us help-center-bg-alt">
  <div class="container-xl">
    <div class="row justify-content-center py-5">
      <div class="col-md-8 col-lg-6 text-center mt-4">
        <h3>Still need help?</h3>
        <p class="mb-3"> Our specialists are always happy to help. Contact us during standard business hours or email us 24/7 and we'll get back to you. </p>
        <div class="d-flex justify-content-center flex-wrap gap-4">
          <a href="javascript:void(0);" class="btn btn-primary">Visit our community</a>
          <a href="javascript:void(0);" class="btn btn-primary">Contact us</a>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- /Help Area -->
@endsection