@extends('frontend.layouts.partials.app')
@section('title', 'Calendar')
@section('meta', 'Welcome to Goodwill Finance Pvt. Ltd.')
@section('content')
    <section>
        <div class="relative w-full h-[150px] lg:h-[150px] flex justify-center items-center">
            <div class="absolute left-0 right-0 top-0 bottom-0"></div>
            <img style="background-size: cover" src="{{ asset('assets/img/breadcrumb-about.jpg') }}" class="h-full w-full"
                alt="" />

            <!-- absolute top-16 left-5 lg:top-32 lg:left-10 -->
            <div class="absolute flex justify-center">
                <div class="flex flex-col space-y-5 items-center text-[#fff]">
                    <p class="uppercase text-6xl font-extrabold">Calendar</p>
                    <div class="flex space-x-2 items-center">
                        <a href="index.html" class="capitalize font-semibold">Home</a>
                        <p class="tracking-tight">>></p>
                        <a href="#" class="text-[#ffffff99] font-bold">Calendar</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="m-2p lg:m-12 min-h-[200px]">
        {{-- Slider --}}
        @if ($yearlyCalendar->isNotEmpty())
            <swiper-container class="mySwiper" pagination="true" pagination-clickable="true" navigation="true"
                space-between="30" centered-slides="true" autoplay-delay="2500" autoplay-disable-on-interaction="false">
                @foreach ($yearlyCalendar as $calendar)
                    <swiper-slide
                        class="relative w-full h-auto md:w-[600px] md:h-[400px] lg:w-[800px] lg:h-[600px] mx-auto p-[45px] md:p-[80px] lg:p-[120px]">
                        <img src="{{ asset('storage/' . $calendar->photo) }}" class="w-full h-full object-contain"
                            alt="{{ $calendar->calendar_name }}">
                        <div class="absolute inset-0 bg-black/10"></div>
                    </swiper-slide>
                @endforeach
            </swiper-container>
        @else
            <p>No calendar available at the moment.</p>
        @endif
    </section>



@endsection
@push('scripts')
    <script src="{{ asset('assets/js/carousel.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.0.2/glide.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-element-bundle.min.js"></script>
    <script>
        var glide01 = new Glide('.glide-01', {
            type: 'slider',
            focusAt: 'center',
            perView: 4,
            autoplay: 3000,
            animationDuration: 700,
            classes: {
                activeNav: '[&>*]:bg-slate-700',
            },

        });

        glide01.mount();
    </script>
@endpush