@extends('frontend.layouts.app')
@section('page_title')
    {{(!empty($page_title) && isset($page_title)) ? $page_title : ''}}
@endsection

@push('head-scripts')

@endpush
@section('content')

    <!-- Hero Section -->
    <div class="container-fluid position-relative p-0">
        <img src="{{ asset('assets/img/Home_Slider.jpg') }}" alt="Home Slider" class="img-fluid rounded mb-4 hero-img"
             data-aos="fade-down">
        <div class="position-absolute register-button-position" data-aos="fade-down">
            <a href="{{ route('admission') }}"
               class="btn btn-lg fw-bold text-white register-button-position-it">
                Register Now
            </a>
        </div>
    </div>

{{--Events Calendar--}}

    <div class="container-fluid"  style="background-size: auto 100%; background-image: url('{{ asset('assets/img/60-lines.png') }}');">
<div class="container-xl container-fluid py-5" data-aos="fade-down" data-aos-duration="800">
    <div class="text-center mb-4">
        <h2 class="text-warning fw-bold" style="font-size: 24px;" data-aos="fade-up" data-aos-duration="800">Ignite School System</h2>
        <h3 class="text-dark mb-2" data-aos="flip-left" data-aos-duration="800">Academic & Events Calendar</h3>
        <p class="text-muted" data-aos="flip-left" data-aos-duration="800">
            A list of all the days off on account of Public holidays, Academic Events, School Exams and so on.
        </p>
    </div>
    <div class="container-xl container-fluid py-5" data-aos="fade-right" data-aos-duration="800">
        <div class="card shadow-sm rounded-3">
            <div id="calendar" class="p-3"></div>
        </div>
    </div>
</div>
    </div>


    {{--    Model of Facilities Section--}}

    <!-- Modal -->
    <div class="modal fade" id="imageModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-fullscreen">
            <div class="modal-content bg-transparent border-0">
                <div class="modal-body p-0 d-flex justify-content-center align-items-center position-relative">
                    <img src="" id="modalImage"
                         class="img-fluid"
                         alt="Full Screen Image"
                         style="max-width: 95%; max-height: 90vh; object-fit: contain; border-radius: 8px;">

                    <button type="button"
                            class="btn-close btn-close-white position-absolute top-0 end-0 m-3"
                            data-bs-dismiss="modal"
                            aria-label="Close"></button>
                </div>
            </div>
        </div>
    </div>


    <!-- Facilities Section -->


    <section class="facilities py-5 bg-white" data-aos="fade-up" data-aos-duration="800">
        <div class="container-xl container-fluid">
            <h3 class="text-center mb-5 fw-bold" data-aos="zoom-in" data-aos-delay="100">
                <img src="{{ asset('assets/img/Asset_28.png') }}" alt="" style="height:90px;" data-aos="zoom-in"
                     data-aos-delay="200">
                <br>
                Facilities at Campus</h3>
            <div class="row g-4">


                <div class="col-12 col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="100">
                    <div class="card h-100 text-center text-white border-0 mb-3 img-clickable"
                         data-bs-toggle="modal" data-bs-target="#imageModal"
                         data-full-img="{{ asset('assets/img/purpose_built2.jpg') }}"
                         data-aos="zoom-in" data-aos-delay="200" style="background-color: #5A9BD4;cursor: pointer" >
                        <div class="card-body d-flex flex-column justify-content-center align-items-center">
                            <img src="{{ asset('assets/img/card-1.png') }}" alt="Classroom Icon"
                                 style="height: 60px;" class="mb-3 img-clickable"
                                 data-bs-toggle="modal" data-bs-target="#imageModal"
                                 data-full-img="{{ asset('assets/img/purpose_built2.jpg') }}"
                                 data-aos="zoom-in" data-aos-delay="300">
                            <h6 class="fw-bold mb-1" data-aos="fade-right" data-aos-delay="300">Classrooms Rooms</h6>
                            <p class="small mb-0" data-aos="fade-left" data-aos-delay="400">Class with interactive
                                boards</p>
                        </div>
                    </div>
                </div>


                <div class="col-12 col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="200">
                    <div class="card h-100 text-center text-white border-0 mb-3 img-clickable"
                                 data-bs-toggle="modal" data-bs-target="#imageModal"
                                 data-full-img="{{ asset('assets/img/purpose_built_campus.jpg') }}"
                                 data-aos="zoom-in" data-aos-delay="300" style="background-color: #007B8F;cursor: pointer">
                        <div class="card-body d-flex flex-column justify-content-center align-items-center">
                            <img src="{{asset('assets/img/card-2.png')}}" alt="Purpose Built"
                                 style="height: 60px;" class="mb-3 img-clickable"
                                 data-bs-toggle="modal" data-bs-target="#imageModal"
                                 data-full-img="{{ asset('assets/img/purpose_built_campus.jpg') }}"
                                 data-aos="zoom-in" data-aos-delay="300">
                            <h6 class="fw-bold mb-1" data-aos="fade-right" data-aos-delay="400">Purpose Built</h6>
                            <p class="small mb-0" data-aos="fade-left" data-aos-delay="500">Air-conditioned Campus</p>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="200">
                    <div class="card h-100 text-center text-white border-0 mb-3 img-clickable"
                                 data-bs-toggle="modal" data-bs-target="#imageModal"
                                 data-full-img="{{ asset('assets/img/computer_lab.jpg') }}"
                                 data-aos="zoom-in" data-aos-delay="300" style="background-color: #D965A1;cursor: pointer">
                        <div class="card-body d-flex flex-column justify-content-center align-items-center">
                            <img src="{{asset('assets/img/card-3.png')}}" alt="Computer Lab"
                                 style="height: 60px;" class="mb-3 img-clickable"
                                 data-bs-toggle="modal" data-bs-target="#imageModal"
                                 data-full-img="{{ asset('assets/img/computer_lab.jpg') }}"
                                 data-aos="zoom-in" data-aos-delay="300">
                            <h6 class="fw-bold mb-1" data-aos="fade-right" data-aos-delay="400">Computer Lab</h6>
                            <p class="small mb-0" data-aos="fade-left" data-aos-delay="500">State-of-the-art technology for coding, digital literacy, and multimedia projects.</p>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="200">
                    <div class="card h-100 text-center text-white border-0 mb-3 img-clickable"
                                 data-bs-toggle="modal" data-bs-target="#imageModal"
                                 data-full-img="{{ asset('assets/img/library_3.jpg') }}"
                                 data-aos="zoom-in" data-aos-delay="300" style="background-color: #F4A742;cursor: pointer">
                        <div class="card-body d-flex flex-column justify-content-center align-items-center">
                            <img src="{{asset('assets/img/card-4.png')}}" alt="" style="height: 60px;"
                                 class="mb-3 img-clickable"
                                 data-bs-toggle="modal" data-bs-target="#imageModal"
                                 data-full-img="{{ asset('assets/img/library_3.jpg') }}" data-aos="zoom-in"
                                 data-aos-delay="300">
                            <h6 class="fw-bold mb-1" data-aos="fade-right" data-aos-delay="400">Library</h6>
                            <p class="small mb-0" data-aos="fade-left" data-aos-delay="500">A wide range of books, digital resources, and quiet reading areas to support research and literacy.</p>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="200">
                    <div class="card h-100 text-center text-white border-0 mb-3 img-clickable"
                                 data-bs-toggle="modal" data-bs-target="#imageModal"
                                 data-full-img="{{ asset('assets/img/activity_room_pic1.jpg') }}"
                                 data-aos="zoom-in" data-aos-delay="300" style="background-color: #EF7C8E;cursor: pointer ">
                        <div class="card-body d-flex flex-column justify-content-center align-items-center">
                            <img src="{{asset('assets/img/card-5.png')}}" alt="Activity Room<"
                                 style="height: 60px;" class="mb-3 img-clickable"
                                 data-bs-toggle="modal" data-bs-target="#imageModal"
                                 data-full-img="{{ asset('assets/img/activity_room_pic1.jpg') }}" data-aos="zoom-in"
                                 data-aos-delay="300">
                            <h6 class="fw-bold mb-1" data-aos="fade-right" data-aos-delay="400">Activity Room</h6>
                            <p class="small mb-0" data-aos="fade-left" data-aos-delay="500">Well equipped with Sensorial, Stem apparatus and interacted with Montessori material.</p>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="200">
                    <div class="card h-100 text-center text-white border-0 mb-3 img-clickable"
                                 data-bs-toggle="modal" data-bs-target="#imageModal"
                                 data-full-img="{{ asset('assets/img/activity_room.jpg') }}"
                                 data-aos="zoom-in" data-aos-delay="300" style="background-color: #34495E;cursor: pointer">
                        <div class="card-body d-flex flex-column justify-content-center align-items-center">
                            <img src="{{asset('assets/img/card-6.png')}}" alt="Science Laboratories"
                                 style="height: 60px;" class="mb-3 img-clickable"
                                 data-bs-toggle="modal" data-bs-target="#imageModal"
                                 data-full-img="{{ asset('assets/img/activity_room.jpg') }}" data-aos="zoom-in"
                                 data-aos-delay="300">
                            <h6 class="fw-bold mb-1" data-aos="fade-right" data-aos-delay="400">Science
                                Laboratories</h6>
                            <p class="small mb-0" data-aos="fade-left" data-aos-delay="500">Fully equipped for hands-on experiments and fostering scientific inquiry.</p>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="200">
                    <div class="card h-100 text-center text-white border-0 mb-3 img-clickable"
                                 data-bs-toggle="modal" data-bs-target="#imageModal"
                                 data-full-img="{{ asset('assets/img/music_room1.jpg') }}"
                                 data-aos="zoom-in" data-aos-delay="300" style="background-color: #17A589;cursor: pointer">
                        <div class="card-body d-flex flex-column justify-content-center align-items-center">
                            <img src="{{asset('assets/img/card-7.png')}}" alt="Art and Music Studios"
                                 style="height: 60px;" class="mb-3 img-clickable"
                                 data-bs-toggle="modal" data-bs-target="#imageModal"
                                 data-full-img="{{ asset('assets/img/music_room1.jpg') }}" data-aos="zoom-in"
                                 data-aos-delay="300">
                            <h6 class="fw-bold mb-1" data-aos="fade-right" data-aos-delay="400">Art and Music
                                Studios</h6>
                            <p class="small mb-0" data-aos="fade-left" data-aos-delay="500">Dedicated spaces for creativity and expression through art, music, and drama.</p>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="200">
                    <div class="card h-100 text-center text-white border-0 mb-3 img-clickable"
                                 data-bs-toggle="modal" data-bs-target="#imageModal"
                                 data-full-img="{{ asset('assets/img/gym_room2.jpg') }}"
                                 data-aos="zoom-in" data-aos-delay="300" style="background-color: #6C3483;cursor: pointer">
                        <div class="card-body d-flex flex-column justify-content-center align-items-center">
                            <img src="{{asset('assets/img/card-8.png')}}" alt="Specialized Gym"
                                 style="height: 60px;" class="mb-3 img-clickable"
                                 data-bs-toggle="modal" data-bs-target="#imageModal"
                                 data-full-img="{{ asset('assets/img/gym_room2.jpg') }}" data-aos="zoom-in"
                                 data-aos-delay="300">
                            <h6 class="fw-bold mb-1" data-aos="fade-right" data-aos-delay="400">Specialized Gym</h6>
                            <p class="small mb-0" data-aos="fade-left" data-aos-delay="500">Offers a safe, structured space for students of all ages to stay active and build fitness. It promotes physical health, teamwork, and self-confidence.</p>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>


    {{--    News & Events--}}

    <section class="news-events py-5 bg-white" data-aos="fade-up" data-aos-duration="800">
        <div class="container-xl container-fluid">
            <h2 class="text-center mb-5 fw-bold" style="color: #002f6c" data-aos="fade-down" data-aos-delay="100">
                <img src="{{ asset('assets/img/Asset_28.png') }}" alt="" style="height:90px;" data-aos="zoom-in"
                     data-aos-delay="200">
                <br>
                News & Events
            </h2>

            <div class="row g-4 justify-content-center mb-5">
                @forelse($events as $index => $event)
                    <div class="col-12 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="{{ 100 * ($index+1) }}">
                        <a href="{{ route('newsEventDetail', $event['id']) }}" class="text-decoration-none">
                            <div class="card border-0 shadow-sm h-100 news-card" data-aos="zoom-in"
                                 data-aos-delay="{{ 150 * ($index+1) }}">
                                <img src="{{ $event['image'] }}" class="card-img-top" alt="Event Image"
                                     data-aos="zoom-in" data-aos-delay="{{ 200 * ($index+1) }}">

                                <div class="card-body bg-danger text-white position-relative"
                                     data-aos="fade-up" data-aos-delay="{{ 250 * ($index+1) }}">
                                    <h5 class="fw-bold text-center"
                                        data-aos="fade-down" data-aos-delay="{{ 300 * ($index+1) }}">
                                        {{ $event['title'] }}
                                    </h5>
                                    <p class="mb-0 small"
                                       data-aos="fade-up" data-aos-delay="{{ 350 * ($index+1) }}">
                                        {{ Str::limit($event['short_description'], 100) }}
                                    </p>
                                    <div class="date-ribbon" data-aos="zoom-in" data-aos-delay="{{ 400 * ($index+1) }}">
                                        <span class="day">{{ date('d', strtotime($event['date'])) }}</span>
                                        <span class="month">{{ strtoupper(date('M', strtotime($event['date']))) }}</span>
                                        <span class="year">{{ date('Y', strtotime($event['date'])) }}</span>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                @empty
                    <div class="text-center py-5">
                        <i class="cui-bell text-secondary" style="font-size: 80px;"></i>
                        <h4 class="text-muted mt-3">No News or Events Found</h4>
                        <p class="text-secondary">Stay tuned — new updates will be posted soon.</p>
                    </div>
                @endforelse
            </div>

            <div class="text-center mt-5" data-aos="zoom-in" data-aos-delay="600">
                <a href="{{ route('newsEvent') }}" class="btn px-4 py-2 rounded-pill text-white fw-bold"
                   style="background-color: #002f6c">
                    More Updates
                </a>
            </div>
        </div>
    </section>

{{--Rules & Regulation--}}

    <section class="container-xl container-fluid py-5 position-relative" id="rulesregulation" data-aos="fade-up"
             data-aos-duration="800">
        <h3 class="text-center mb-4" data-aos="fade-down" data-aos-delay="100">
            <img src="{{ asset('assets/img/Asset_28.png') }}" alt="" style="height:90px;" data-aos="zoom-in"
                 data-aos-delay="200">
            <br>
            Rules & Regulation
        </h3>
        <div class="row g-3">

            <div class="col-12 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="200">
                <div class="position-relative rounded overflow-hidden" style="height: 300px;">
                    <img src="{{asset('assets/img/g_img-2.jpg')}}" alt="Rule 1" class="w-100 h-100 object-fit-cover">
                    <div
                        class="position-absolute top-0 start-0 w-100 h-100 bg-danger bg-opacity-75 d-flex flex-column justify-content-center align-items-center text-white text-center px-3">
                        <img src="{{asset('assets/img/rules-1.png')}}" alt="Google Classroom"
                             style="width: 60px; height: 60px;" class="mb-3" data-aos="zoom-in" data-aos-delay="350">
                        <p class="mb-0" data-aos="fade-up" data-aos-delay="400">
                            Parents will be promptly notified<br>
                            of any changes in timing through<br>
                            <strong>Google Classroom.</strong>
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-12 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="300">
                <div class="position-relative rounded overflow-hidden" style="height: 300px;">
                    <img src="{{asset('assets/img/g_img-2.jpg')}}" alt="Rule 2" class="w-100 h-100 object-fit-cover">
                    <div
                        class="position-absolute top-0 start-0 w-100 h-100 bg-danger bg-opacity-75 d-flex flex-column justify-content-center align-items-center text-white text-center px-3">
                        <img src="{{asset('assets/img/rule-2.png')}}" alt="Google Classroom"
                             style="width: 60px; height: 60px;" class="mb-3" data-aos="zoom-in" data-aos-delay="450">
                        <p class="mb-0" data-aos="fade-up" data-aos-delay="500">
                            After school hours, children will<br>
                            remain under the supervision of<br>
                            teachers for half an hour only. Please<br>
                            ensure that your child is picked up<br>
                            promptly after school hours.
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-12 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="400">
                <div class="position-relative rounded overflow-hidden" style="height: 300px;">
                    <img src="{{asset('assets/img/g_img-2.jpg')}}" alt="Rule 3" class="w-100 h-100 object-fit-cover">
                    <div
                        class="position-absolute top-0 start-0 w-100 h-100 bg-danger bg-opacity-75 d-flex flex-column justify-content-center align-items-center text-white text-center px-3">
                        <img src="{{asset('assets/img/rule-3.png')}}" alt="Google Classroom"
                             style="width: 60px; height: 60px;" class="mb-3" data-aos="zoom-in" data-aos-delay="550">
                        <p class="mb-0" data-aos="fade-up" data-aos-delay="600">
                            Uniforms are compulsory<br>
                            for students from Nursery<br>
                            through A levels.
                        </p>
                    </div>
                </div>
            </div>

        </div>
    </section>

@endsection
@push('footer-scripts')
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="{{asset('assets/frontend/js/index.global.min.js')}}" ></script>


    <script>
        // Open the full-screen image defined in data-full-img
        document.querySelectorAll('.img-clickable').forEach(img => {
            img.addEventListener('click', function () {
                const modalImage = document.getElementById('modalImage');
                modalImage.src = this.dataset.fullImg; // Use the full image, not the card image
            });
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var calendarEl = document.getElementById('calendar');

            function getHeaderToolbar() {
                if (window.innerWidth < 480) {
                    // On mobile: hide month button, only show list view
                    return {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'listWeek'
                    };
                } else {
                    // On larger screens: show both
                    return {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'dayGridMonth,listWeek'
                    };
                }
            }

            var calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: window.innerWidth < 480 ? 'listWeek' : 'dayGridMonth',
                headerToolbar: getHeaderToolbar(),
                events: @json($events_cal),
                dayMaxEventRows: 3,
                fixedWeekCount: false,
                height: 'auto',
                windowResize: function() {
                    calendar.setOption('headerToolbar', getHeaderToolbar());
                    if (window.innerWidth < 480) {
                        calendar.changeView('listWeek');
                    } else {
                        calendar.changeView('dayGridMonth');
                    }
                },
                eventClick: function(info) {
                    var eventUrl = '{{ route("events.show", ":id") }}'.replace(':id', info.event.id);
                    window.location.href = eventUrl;
                }
            });

            calendar.render();
        });

    </script>



@endpush