@extends('frontend::layouts.master')

@section('title', 'รายละเอียดปฏิทิน | ศูนย์ความรู้ อ.อ๊อบ')

@section('content')
<main class="pt-[80px] sm:pt-[88px] bg-gradient-to-b from-white to-kru-light-strong min-h-screen">
  <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
    <a
      href="{{ route('frontend.academic-calendar') }}"
      class="inline-flex items-center gap-2 text-kru-blue hover:underline text-sm font-medium mb-8"
    >
      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
      </svg>
      ย้อนกลับไปหน้าโบรชัวร์ปฏิทินการศึกษา
    </a>

    <div class="overflow-hidden border-2 border-gray-200 rounded-xl shadow-lg bg-white">
      {{-- Hero (รูปแบบเดียวกับหน้าลิส) --}}
      <div
        class="relative h-[15rem] sm:h-[24rem] flex items-center justify-center text-white overflow-hidden"
      >
        <img
          src="{{ asset('modules/frontend/images/mockup/academic-calendar-cover.jpg') }}"
          alt="ปฏิทินการศึกษา"
          class="absolute inset-0 w-full h-full object-cover"
          loading="lazy"
          onerror="this.style.display='none'"
        />
      </div>

      <div class="p-6 sm:p-8">
        <div class="flex flex-wrap items-center gap-3 mb-4">
          <h1 class="text-2xl sm:text-3xl font-bold text-kru-dark">
            {{ $calendar['title'] }}
          </h1>
        </div>

        <div class="flex flex-wrap gap-3 mb-6 text-sm text-gray-600">
          <div class="flex items-center gap-2">
            <svg class="w-4 h-4 text-kru-blue flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
            </svg>
            <span>{{ $calendar['termRange'] }}</span>
          </div>
        </div>

        <p class="text-gray-700 mb-6">{{ $calendar['description'] }}</p>

        <!-- Start Text Editor -->
        <div>
          <div class="space-y-3 mb-8">
            <h2 class="font-semibold text-kru-dark mb-2">
              ไฮไลต์สำคัญในปฏิทินฉบับนี้
            </h2>
            <ul class="space-y-2 text-sm text-gray-700">
              @foreach($calendar['highlights'] as $item)
                <li class="flex items-center gap-2">
                  <svg class="w-4 h-4 text-kru-green flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                  </svg>
                  <span>{{ $item }}</span>
                </li>
              @endforeach
            </ul>
          </div>

          <div class="mb-8">
            <div class="relative overflow-hidden rounded-2xl border border-kru-orange/10 bg-white shadow-md">
              <img
                src="{{ asset('modules/frontend/images/mockup/academic-calendar-01.jpg') }}"
                alt="..."
                class="w-full h-full object-cover"
                loading="lazy"
                onerror="this.style.display='none'"
              />
            </div>
          </div>
        </div>
        <!-- End Text Editor -->

        <div class="flex flex-wrap gap-3 pt-4 border-t border-gray-200">
          <a
            href="#"
            class="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-gradient-to-r from-kru-blue to-kru-purple text-white font-medium hover:opacity-90 transition-opacity"
            target="_blank"
          >
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
            </svg>
            ดาวน์โหลดปฏิทินการศึกษา (PDF)
          </a>
          <!-- <a
            href="{{ route('frontend.contact') }}"
            class="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg border-2 border-gray-300 text-gray-700 font-medium hover:bg-gray-50 transition-colors"
          >
            ติดต่อเพื่อสอบถามเพิ่มเติม
          </a> -->
        </div>
      </div>
    </div>
  </div>
</main>
@endsection