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

@section('content')

    <!-- Hero Section -->
    <div id="admissionHeroCarousel" class="carousel slide" data-bs-ride="carousel" data-aos="fade-in" style="margin-top: 100px">
        <div class="carousel-inner">
            <div class="carousel-item-admission active">
                <img src="{{asset("assets/images/programs_hero.png")}}" class="hero-image d-block w-100"
                     alt="Banner Image">
                <div class="hero-gradient-overlay-program"></div>
                <div class="carousel-caption-admission text-start">
                    <div class="container">
                        <div class="row">
                            <div class="col-lg-6 col-md-8 col-sm-12">
                                <div class="hero-text-box" data-aos="fade-up" data-aos-delay="200">
                                    <h1 class="hero-title-text" data-aos="zoom-in" data-aos-delay="300">
                                        <span class="highlight" style="font-family: 'Poppins', sans-serif;">Where Your Journey<br>to Success Begins</span>
                                    </h1>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
{{--                <a href="{{route('onlineApplication')}}" class="hero-apply-btn text-decoration-none"--}}
{{--                   data-aos-delay="400" style="font-family: 'Poppins', sans-serif;">Apply Now</a>--}}
            </div>
        </div>
    </div>

    <div class="container-md container-fluid py-5" data-aos="fade-up" data-aos-duration="1000">
        <h2 class="section-title text-center mb-4 text-black" data-aos="fade-down" data-aos-delay="100" style="font-family: 'Poppins', sans-serif;">Programs Offered</h2>

        <p class="section-program-description text-center mx-auto mb-5 text-black" data-aos="fade-up" data-aos-delay="200" style="font-family: 'Poppins', sans-serif;">
            At Aliz College, we offer a wide range of programs designed to equip students with knowledge, skills,
            and real-world experience. Our curriculum blends academic excellence with innovation, preparing
            graduates to thrive in their chosen fields.
        </p>

        <div class="row justify-content-center g-4">

            <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-10" data-aos="zoom-in" data-aos-delay="250">
                <div class="program-card" data-aos="flip-left" data-aos-delay="300">
                    <div class="program-icon-wrapper">
                        <img src="{{asset("assets/images/Group211.png")}}" alt="">
                    </div>
                    <div class="program-title text-black" style="font-family: 'Poppins', sans-serif;">F.Sc. (Pre-Eng)</div>
                </div>
            </div>

            <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-10" data-aos="zoom-in" data-aos-delay="300">
                <div class="program-card" data-aos="flip-left" data-aos-delay="350">
                    <div class="program-icon-wrapper">
                        <img src="{{asset("assets/images/pre-med.png")}}" alt="">
                    </div>
                    <div class="program-title text-black" style="font-family: 'Poppins', sans-serif;">F.Sc. (Pre-Med)</div>
                </div>
            </div>

            <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-10" data-aos="zoom-in" data-aos-delay="350">
                <div class="program-card" data-aos="flip-left" data-aos-delay="400">
                    <div class="program-icon-wrapper">
                        <img src="{{asset("assets/images/ics.png")}}" alt="">
                    </div>
                    <div class="program-title text-black" style="font-family: 'Poppins', sans-serif;">ICs</div>
                </div>
            </div>

            <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-10" data-aos="zoom-in" data-aos-delay="400">
                <div class="program-card" data-aos="flip-left" data-aos-delay="450">
                    <div class="program-icon-wrapper">
                        <img src="{{asset("assets/images/icom.png")}}" alt="">
                    </div>
                    <div class="program-title text-black" style="font-family: 'Poppins', sans-serif;">I.Com</div>
                </div>
            </div>

            <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-10" data-aos="zoom-in" data-aos-delay="450">
                <div class="program-card" data-aos="flip-left" data-aos-delay="500">
                    <div class="program-icon-wrapper">
                        <img src="{{asset("assets/images/fa.png")}}" alt="">
                    </div>
                    <div class="program-title text-black" style="font-family: 'Poppins', sans-serif;">F.A</div>
                </div>
            </div>

        </div>
    </div>

    <!-- Why Choose Us Section -->
    <section class="why-choose-section" data-aos="fade-up" data-aos-duration="1000">
        <div class="container">
            <h2 class="section-title mb-4 text-black" data-aos="fade-down" data-aos-delay="100" style="font-family: 'Poppins', sans-serif;">Why Choose Us?</h2>
            <p class="section-description text-black" data-aos="fade-up" data-aos-delay="200" style="font-family: 'Poppins', sans-serif;">
                Aliz College stands out as a premier educational institution committed to excellence, innovation, and
                student success. Our experienced faculty, modern infrastructure, and student-centered approach create an
                environment where learners thrive academically, socially, and personally. We believe in nurturing not
                just students, but future leaders.
            </p>

            <div class="container">
                <div class="image-wrapper">
                    <img src="{{ asset('assets/images/whychooseus.png') }}" alt="Why Choose Us">

                    <button class="clickable-btn btn-interactive" onclick="openModal('modal1')"
                            title="Interactive Classrooms">+
                    </button>
                    <button class="clickable-btn btn-inside" onclick="openModal('modal2')" title="Inside Campus Life">
                        +
                    </button>
                    <button class="clickable-btn btn-cocurricular" onclick="openModal('modal3')"
                            title="Co-Curricular Activities">+
                    </button>
                    <button class="clickable-btn btn-library" onclick="openModal('modal4')" title="Library">+</button>
                    <button class="clickable-btn btn-attendance" onclick="openModal('modal5')"
                            title="Attendance Policy">+
                    </button>
                    <button class="clickable-btn btn-examination" onclick="openModal('modal6')"
                            title="Examination Policy">+
                    </button>
                    <button class="clickable-btn btn-digital" onclick="openModal('modal7')"
                            title="Digital Learning Support">+
                    </button>
                    <button class="clickable-btn btn-laboratory" onclick="openModal('modal8')" title="Laboratory">+
                    </button>
                    <button class="clickable-btn btn-uniform" onclick="openModal('modal9')" title="Uniform Policy">+
                    </button>
                    <button class="clickable-btn btn-growth" onclick="openModal('modal10')" title="Student Growth">+
                    </button>
                </div>
            </div>

            <!-- Modals -->
            <div id="modal1" class="modal" onclick="closeModal('modal1')">
                <div class="modal-content" onclick="event.stopPropagation()">
                    <div class="modal-header">
                        <h2 class="modal-title" style="font-family: 'Poppins', sans-serif;">Interactive Classrooms</h2>
                        <button class="modal-close" onclick="closeModal('modal1')">&times;</button>
                    </div>
                    <div class="modal-body">
                        <p class="text-black" style="font-family: 'Poppins', sans-serif;">Our technology-integrated classrooms promote active and engaging learning through multimedia
                            and interactive experiences.</p>
                    </div>
                </div>
            </div>

            <div id="modal2" class="modal" onclick="closeModal('modal2')">
                <div class="modal-content" onclick="event.stopPropagation()">
                    <div class="modal-header">
                        <h2 class="modal-title" style="font-family: 'Poppins', sans-serif;">Inside Campus Life</h2>
                        <button class="modal-close" onclick="closeModal('modal2')">&times;</button>
                    </div>
                    <div class="modal-body">
                        <p class="text-black" style="font-family: 'Poppins', sans-serif;">Vibrant and inclusive, campus life at ALIZ offers a rich mix of academic and co-curricular
                            opportunities. From club activities to career-focused functions and themed projects, every
                            student finds their place to thrive.</p>
                    </div>
                </div>
            </div>

            <div id="modal3" class="modal" onclick="closeModal('modal3')">
                <div class="modal-content" onclick="event.stopPropagation()">
                    <div class="modal-header">
                        <h2 class="modal-title" style="font-family: 'Poppins', sans-serif;">Co-Curricular Activities</h2>
                        <button class="modal-close" onclick="closeModal('modal3')">&times;</button>
                    </div>
                    <div class="modal-body">
                        <p class="text-black" style="font-family: 'Poppins', sans-serif;">
                            While priority at College is highly attributed to academic programs, the administration also
                            realizes the significance of co-curricular activities that play an important role in
                            building confidence, leadership, and teamwork among students. The College provides
                            opportunities for:
                        </p>

                        <ul>
                            <li>Debates and speeches</li>
                            <li>Essay and writing competitions</li>
                            <li>Cultural celebrations</li>
                            <li>Class presentations, social and fun activities</li>
                        </ul>

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

            <div id="modal4" class="modal" onclick="closeModal('modal4')">
                <div class="modal-content" onclick="event.stopPropagation()">
                    <div class="modal-header">
                        <h2 class="modal-title" style="font-family: 'Poppins', sans-serif;">Library</h2>
                        <button class="modal-close" onclick="closeModal('modal4')">&times;</button>
                    </div>
                    <div class="modal-body">
                        <p class="text-black" style="font-family: 'Poppins', sans-serif;">In order to promote academic culture, students are encouraged to develop reading habits and
                            undertake research through the well-resourced library located in college premises.</p>
                        <p class="text-black" style="font-family: 'Poppins', sans-serif;">The library provides students with an improved environment to broaden their particular areas
                            of study.</p>
                    </div>
                </div>
            </div>

            <div id="modal5" class="modal" onclick="closeModal('modal5')">
                <div class="modal-content" onclick="event.stopPropagation()">
                    <div class="modal-header">
                        <h2 class="modal-title" style="font-family: 'Poppins', sans-serif;">Attendance Policy</h2>
                        <button class="modal-close" onclick="closeModal('modal5')">&times;</button>
                    </div>
                    <div class="modal-body">
                        <p class="text-black" style="font-family: 'Poppins', sans-serif;">A student is required to have attended at least 80% of the total lectures in each course and
                            morning session per subject to be allowed to appear in examinations.</p>
                        <p class="text-black" style="font-family: 'Poppins', sans-serif;">Students not meeting this criterion shall be dealt with according to the rules regarding the
                            final examination.</p>
                    </div>
                </div>
            </div>

            <div id="modal6" class="modal" onclick="closeModal('modal6')">
                <div class="modal-content" onclick="event.stopPropagation()">
                    <div class="modal-header">
                        <h2 class="modal-title" style="font-family: 'Poppins', sans-serif;">Examination Policy</h2>
                        <button class="modal-close" onclick="closeModal('modal6')">&times;</button>
                    </div>
                    <div class="modal-body">
                        <p class="text-black" style="font-family: 'Poppins', sans-serif;">
                            The academic year is divided into four terms. The performance of students is judged through
                            examinations:
                        </p>

                        <ul>
                            <li>Mid-term assessment tests</li>
                            <li>Monthly assessment tests</li>
                            <li>Terminal examination</li>
                        </ul>

                        <p class="text-black" style="font-family: 'Poppins', sans-serif;">
                            Assessment based on results of each student is sent to the parents regularly.
                        </p>

                        <p class="text-black" style="font-family: 'Poppins', sans-serif;"><em>“Change is the key result of all true learning”</em></p>

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

            <div id="modal7" class="modal" onclick="closeModal('modal7')">
                <div class="modal-content" onclick="event.stopPropagation()">
                    <div class="modal-header">
                        <h2 class="modal-title" style="font-family: 'Poppins', sans-serif;">Digital Learning Support</h2>
                        <button class="modal-close" onclick="closeModal('modal7')">&times;</button>
                    </div>
                    <div class="modal-body">
                        <p class="text-black" style="font-family: 'Poppins', sans-serif;">With access to digital platforms and online resources, students are encouraged for research,
                            remote learning, and innovation. The tools help expand access to academically aligned
                            personal learning.</p>
                    </div>
                </div>
            </div>

            <div id="modal8" class="modal" onclick="closeModal('modal8')">
                <div class="modal-content" onclick="event.stopPropagation()">
                    <div class="modal-header">
                        <h2 class="modal-title" style="font-family: 'Poppins', sans-serif;">Laboratory</h2>
                        <button class="modal-close" onclick="closeModal('modal8')">&times;</button>
                    </div>
                    <div class="modal-body">
                        <p class="text-black" style="font-family: 'Poppins', sans-serif;">
                            For laboratory-based studies, four laboratories relevant to different disciplines have been
                            assigned for better learning outcomes at the college. The following laboratories are
                            available:
                        </p>

                        <ul>
                            <li style="font-family: 'Poppins', sans-serif;">Physics</li>
                            <li style="font-family: 'Poppins', sans-serif;">Chemistry</li>
                            <li style="font-family: 'Poppins', sans-serif;">Biology</li>
                            <li style="font-family: 'Poppins', sans-serif;">Computer Science</li>
                        </ul>
                    </div>
                </div>
            </div>

            <div id="modal9" class="modal" onclick="closeModal('modal9')">
                <div class="modal-content" onclick="event.stopPropagation()">
                    <div class="modal-header">
                        <h2 class="modal-title" style="font-family: 'Poppins', sans-serif;">Uniform Policy</h2>
                        <button class="modal-close" onclick="closeModal('modal9')">&times;</button>
                    </div>
                    <div class="modal-body">
                        <ul>
                            <li class="text-black" style="font-family: 'Poppins', sans-serif;">Uniform is compulsory.</li>
                            <li class="text-black" style="font-family: 'Poppins', sans-serif;">Students are required to strictly follow college hours, punctuality, and discipline.
                            </li>
                            <li class="text-black" style="font-family: 'Poppins', sans-serif;">Uniform sample included in the prospectus.</li>
                        </ul>
                    </div>
                </div>
            </div>

            <div id="modal10" class="modal" onclick="closeModal('modal10')">
                <div class="modal-content" onclick="event.stopPropagation()">
                    <div class="modal-header">
                        <h2 class="modal-title" style="font-family: 'Poppins', sans-serif;">Student Growth</h2>
                        <button class="modal-close" onclick="closeModal('modal10')">&times;</button>
                    </div>
                    <div class="modal-body">
                        <p class="text-black" style="font-family: 'Poppins', sans-serif;">At ALIZ College, we believe growth is more than academic success. We prepare our students to
                            become lifelong learners, creative thinkers, and responsible individuals who are ready to
                            make a difference.</p>
                    </div>
                </div>
            </div>

        </div>
    </section>

    <div id="modal10" class="modal" onclick="closeModal('modal10')">
        <div class="modal-content" onclick="event.stopPropagation()">
            <div class="modal-header">
                <h2 class="modal-title" style="font-family: 'Poppins', sans-serif;">Student Growth</h2>
                <button class="modal-close" onclick="closeModal('modal10')">&times;</button>
            </div>
            <div class="modal-body">
                <p class="text-black" style="font-family: 'Poppins', sans-serif;">Student growth is at the heart of our educational mission. This is placeholder content for your
                    student development and achievement information.</p>
                <p class="text-black" style="font-family: 'Poppins', sans-serif;">We are committed to nurturing well-rounded individuals prepared for future success.</p>
            </div>
        </div>
    </div>

@endsection

@push('footer-scripts')
    <script>
        function openModal(modalId) {
            const modal = document.getElementById(modalId);
            modal.classList.add('active');
        }

        function closeModal(modalId) {
            const modal = document.getElementById(modalId);
            modal.classList.remove('active');
        }

        // Close modal when pressing Escape key
        document.addEventListener('keydown', function (event) {
            if (event.key === 'Escape') {
                const modals = document.querySelectorAll('.modal.active');
                modals.forEach(modal => {
                    modal.classList.remove('active');
                });
            }
        });
    </script>
@endpush