@extends("frontend.includes.layout")

@section('links')
    <link href="/vendor/animate.css/animate.min.css" rel="stylesheet" media="all">
@endsection

@section('content')
<!-- MAIN -->
<main id="main" class="academic-offers-page">
    @if (count($academic_offers) > 0)
        <!-- Header Section -->
        <section class="academic-offer-section">
            <div class="academic-offer-grid">
                <div class="academic-offer-header">
                    <span class="section-label">Oferta Académica</span>
                    <h1 class="section-title">{{ $academic_offers[0]->level ?? 'Programas' }}</h1>
                </div>
            </div>
        </section>
    @endif

    @php($side = 'left')
    @foreach ($academic_offers as $index => $academic_offer)
    @if ($academic_offer->show)
    <!-- Academic Offer Card -->
    <section class="academic-offer-section">
        <div class="academic-offer-grid">
            <article class="academic-offer-card">
                <div class="card-wrapper card-wrapper-{{ $side }}">
                    <!-- Image Container -->
                    <figure class="card-image">
                        <a
                            href="{{ route('academic_offer.single', [strtolower(str_replace(' ', '', $academic_offer->level)), $academic_offer->uri]) }}">
                            <img src="{{ $academic_offer->banner_uri ?? '/images/bg-video.png' }}"
                                alt="{{ $academic_offer->title }}"
                                style="object-position: {{ $academic_offer->banner_position_x ?? 50 }}% {{ $academic_offer->banner_position_y ?? 50 }}%;">
                            <div class="card-overlay"></div>
                        </a>
                    </figure>

                    <!-- Content Container -->
                    <div class="card-content">
                        <span class="card-level">{{ $academic_offer->level }}</span>
                        <h2 class="card-title">{{ $academic_offer->title }}</h2>

                        @if ($academic_offer->career_plan && $academic_offer->career_plan !== 'null')
                            <div class="card-description">
                                {!! $academic_offer->career_plan !!}
                            </div>
                        @endif

                        <a class="card-btn"
                            href="{{ route('academic_offer.single', [strtolower(str_replace(' ', '', $academic_offer->level)), $academic_offer->uri]) }}">
                            <span>{{ $academic_offer->title }}</span>
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                <path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z" />
                            </svg>
                        </a>
                    </div>
                </div>
            </article>
        </div>
    </section>
    @php($side = $side === 'right' ? 'left' : 'right')
    @endif
    @endforeach
</main>
@endsection