@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-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
    {{-- Page Header --}}
    <div class="flex flex-col md:flex-row md:items-end md:justify-between mb-12">
      <div>
        <div class="inline-flex items-center gap-2 bg-kru-blue/10 text-kru-blue px-4 py-2 rounded-full text-sm font-medium mb-4">
          <svg class="w-4 h-4 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>
          ปฏิทินการศึกษา
        </div>
        <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-kru-dark mb-3">
          โบรชัวร์<span class="text-kru-blue">ปฏิทินการศึกษา</span>
        </h1>
        <p class="text-gray-600 max-w-2xl">
          รวมปฏิทินการเรียนการสอน วันสอบ และกิจกรรมสำคัญของน้อง ๆ
          เพื่อให้ผู้ปกครองสามารถวางแผนได้อย่างสะดวก
        </p>
      </div>
    </div>

    {{-- Cards Grid --}}
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
      @foreach($academicCalendars as $calendar)
        <a
          href="{{ route('frontend.academic-calendar.detail', $calendar['id']) }}"
          class="group block rounded-2xl border border-gray-200 bg-white shadow-md overflow-hidden transition-all duration-300 hover:shadow-xl hover:-translate-y-1 h-full flex flex-col"
        >
          {{-- Image / Hero (ใช้รูปจริงถ้ามี) --}}
          <div
            class="relative h-[13rem] flex items-center justify-center text-white overflow-hidden"
          >
            {{-- รูปโบรชัวร์ปฏิทินการศึกษา (เตรียมไฟล์ที่ public/modules/frontend/images/academic-calendar.png) --}}
            <img
              src="{{ asset('modules/frontend/images/mockup/academic-calendar-cover.jpg') }}"
              alt="..."
              class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
              loading="lazy"
              onerror="this.style.display='none'"
            />
          </div>

          {{-- Content --}}
          <div class="p-6 flex-1 flex flex-col">
            <div class="flex items-center justify-between mb-3">
              <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-kru-blue/10 text-kru-blue border-0">
                {{ $calendar['termRange'] }}
              </span>
            </div>
            <h2 class="font-bold text-lg text-kru-dark mb-2 group-hover:text-kru-blue transition-colors">
              {{ $calendar['title'] }}
            </h2>
            <p class="text-sm text-gray-600 line-clamp-2 mb-4">
              {{ $calendar['description'] }}
            </p>
            <div class="mt-auto flex items-center justify-between text-kru-blue text-sm font-medium">
              <span>ดูรายละเอียด</span>
              <svg class="w-4 h-4 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/>
              </svg>
            </div>
          </div>
        </a>
      @endforeach
    </div>
    @if(isset($paginator) && $paginator->hasPages())
      <nav class="mt-12 flex flex-wrap items-center justify-center gap-2" aria-label="การแบ่งหน้าปฏิทินการศึกษา">
        {{-- Previous --}}
        @if($paginator->onFirstPage())
          <span class="inline-flex items-center gap-1 px-4 py-2 rounded-lg border border-gray-200 text-gray-400 cursor-not-allowed" aria-disabled="true">
            <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>
            ก่อนหน้า
          </span>
        @else
          <a href="{{ $paginator->previousPageUrl() }}" class="inline-flex items-center gap-1 px-4 py-2 rounded-lg border border-gray-200 text-kru-blue hover:bg-kru-blue/10 hover:border-kru-blue transition-colors" aria-label="หน้าก่อนหน้า">
            <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>
        @endif

        {{-- Page numbers --}}
        <div class="flex items-center gap-1">
          @foreach($paginator->getUrlRange(1, $paginator->lastPage()) as $page => $url)
            @if($page == $paginator->currentPage())
              <span class="inline-flex w-10 h-10 items-center justify-center rounded-lg bg-kru-blue text-white font-medium" aria-current="page">{{ $page }}</span>
            @else
              <a href="{{ $url }}" class="inline-flex w-10 h-10 items-center justify-center rounded-lg border border-gray-200 text-kru-dark hover:bg-kru-blue/10 hover:border-kru-blue transition-colors">{{ $page }}</a>
            @endif
          @endforeach
        </div>

        {{-- Next --}}
        @if($paginator->hasMorePages())
          <a href="{{ $paginator->nextPageUrl() }}" class="inline-flex items-center gap-1 px-4 py-2 rounded-lg border border-gray-200 text-kru-blue hover:bg-kru-blue/10 hover:border-kru-blue transition-colors" aria-label="หน้าถัดไป">
            ถัดไป
            <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="M9 5l7 7-7 7"/></svg>
          </a>
        @else
          <span class="inline-flex items-center gap-1 px-4 py-2 rounded-lg border border-gray-200 text-gray-400 cursor-not-allowed" aria-disabled="true">
            ถัดไป
            <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="M9 5l7 7-7 7"/></svg>
          </span>
        @endif
      </nav>
    @endif
  </div>
</main>
@endsection