@extends('frontend.layouts.app')
@section('page_title')
    {{(!empty($page_title) && isset($page_title)) ? $page_title : ''}}
@endsection
@section('description', 'Explore Intermediate programs at Aliz College. Admissions are now open, apply today and start your exciting journey toward academic success today.')
@section('keywords', 'Intermediate programs,Best intermediate programs,Intermediate programs in Faisalabad,Academic excellence in intermediate education')
@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-8 col-md-10">
                                <div class="hero-content hero-text-box" data-aos="fade-up" data-aos-delay="200">
                                    <p class="hero-slogan-wrapper mb-0">
                                        <span class="h3-style d-block underline-blue" data-aos="fade-right" data-aos-delay="300">Empowering Your Future</span>
                                        <span class="h1-style d-block highlight " data-aos="zoom-in" data-aos-delay="400">Through Excellence</span>
                                        <span class="h3-style d-block" data-aos="fade-left" data-aos-delay="500">in <span class="highlight">Intermediate Education</span></span>
                                    </p>
                                </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">
        <h1 class="section-title text-center mb-4 text-black" data-aos="fade-down" data-aos-delay="100" style="font-family: 'Poppins', sans-serif; font-size: 2.5rem;">
            Discover Intermediate Programs at Aliz College, Faisalabad
        </h1>
        <p class="section-program-description mx-auto mb-5 text-black" data-aos="fade-up" data-aos-delay="200">
            Aliz College offers a comprehensive selection of Intermediate programs specifically designed to empower students with foundational
            knowledge and practical expertise. Recognizing the competitive education in Faisalabad, our curriculum integrates academic excellence
            with modern innovation, ensuring every student is fully prepared to excel in their future careers and university studies.
        </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>
                    <h3 class="program-title text-black" style="font-family: 'Poppins', sans-serif;">F.Sc. (Pre-Eng)</h3>
                </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>
                    <h3 class="program-title text-black" style="font-family: 'Poppins', sans-serif;">F.Sc. (Pre-Med)</h3>
                </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>
                    <h3 class="program-title text-black" style="font-family: 'Poppins', sans-serif;">ICs</h3>
                </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>
                    <h3 class="program-title text-black" style="font-family: 'Poppins', sans-serif;">I.Com</h3>
                </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>
                    <h3 class="program-title text-black" style="font-family: 'Poppins', sans-serif;">F.A</h3>
                </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