@extends('frontend.layouts.app')
@section('page_title')
    {{(!empty($page_title) && isset($page_title)) ? $page_title : ''}}
@endsection
@section('description', 'Explore quality education and programs at Aliz College. Admissions are now open, apply today to start your rewarding academic journey successfully.')
@section('keywords', 'Aliz College,Best intermediate colleges in Faisalabad,Private colleges in Faisalabad,Intermediate education in Faisalabad')
@section('content')
    <!-- Hero Section -->
    <div id="bannerCarousel" class="carousel slide" data-bs-ride="carousel" data-aos="fade-in" style="margin-top: 100px">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="{{asset('assets/images/young-arabian-female-student-library.png')}}" class="d-block w-100"
                     alt="Banner Image">
                <div class="hero-overlay"></div>
                <div class="carousel-caption text-start">
                    <div class="container">
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="hero-content" data-aos="fade-up" data-aos-delay="200">
                                    <p class="hero-slogan-wrapper mb-0" style="font-family: 'Poppins', sans-serif;">
                                        <span class="h3-style d-block underline-blue" data-aos="fade-right" data-aos-delay="300">WHERE</span>
                                        <span class="h1-style d-block highlight" data-aos="zoom-in" data-aos-delay="400">STARS RISE</span>
                                        <span class="h3-style d-block" data-aos="fade-left" data-aos-delay="500">TO <span class="highlight">SHINE</span></span>
                                    </p>
                                    <p class="mt-4 text-white hero-description" data-aos="fade-up" data-aos-delay="600" style="font-family: 'Poppins', sans-serif;">
                                       {{ !empty($general['hero']) ? $general['hero'] : 'Aliz College offers quality education in a supportive and 
                                       professional environment where students develop skills, gain knowledge and move toward success.' }}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Intro Section-->
    <section class="py-5" data-aos="fade-up" data-aos-duration="1000">
        <div class="container-md container-fluid">
            <div class="row">
                <div class="col-lg-10 mx-auto">
                    <div class="intro-box" data-aos="zoom-in" data-aos-delay="100">
                        <div class="intro-icon" data-aos="flip-left" data-aos-delay="200">
                            <img src="{{ asset('assets/images/graduation-cap-solid.png') }}" alt="Graduation Cap" class="intro-icon">
                        </div>
                        <h1 style="font-family: 'Poppins', sans-serif; font-weight: 700;" data-aos="fade-down" data-aos-delay="300">Aliz College</h1>
                        <p style="text-align: justify !important; font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 18px;" class="text-black" data-aos="fade-up" data-aos-delay="400">
                           {{ !empty($general['intro']) ? $general['intro'] : 'At Aliz College, we offer high-quality, professional education that helps students 
                           build the skills and confidence they need for a successful career. As one of the best intermediate colleges in Faisalabad, 
                           we focus on innovation and growth, creating a learning environment that inspires excellence and brings out the best in every student.
                           We believe education is more than just academics, it’s about shaping future leaders who are ready to thrive and succeed in their careers.
                           Our commitment to intermediate education in Faisalabad ensures that every student receives the support and resources needed to achieve success.' }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Vission/Mission Section-->
    <section class="vision-mission mb-5" data-aos="fade-up" data-aos-duration="1000">
        <div class="container-md container-fluid">
            <div class="row g-4">
                @foreach($visionMissionConfig as $config)
                    <x-vision-mission-card :icon="$config['icon']" :title="$config['title']" :desc="$config['desc']"/>
                @endforeach
            </div>
        </div>
    </section>
    <!-- Leadership Messages Section-->
    <div class="container mb-5" data-aos="fade-up" data-aos-duration="1000">
        <div class="row g-4 justify-content-center">
            @foreach($leadershipCards as $card)
                <x-leadership-card :iteration="$loop->iteration" :title="$card['title']" :name="$card['name']" :image="$card['image']" :message="$card['message']"/>
            @endforeach
        </div>
    </div>
    <!-- Program Apply Section -->
    <section class="programs-cta-wrapper" data-aos="fade-in">
        <div class="cta-content-area">
            <img src="{{asset('assets/images/programs_hero.png')}}" class="cta-bg-img" alt="Programs">
            <div class="hero-gradient-overlay-program"></div>
            <div class="cta-overlay-content">
                <div class="container">
                    <div class="row align-items-center">
                        <div class="col-lg-8 col-md-12 text-start" data-aos="fade-right">
                            <h2 class="main-heading-container">
                                <span class="small-title d-block">Explore Our</span>
                                <span class="main-title d-block">Educational Program</span>
                            </h2>
                            <p class="cta-desc">
                                {{ !empty($general['body']) ? $general['body'] : 'At Aliz College, we offer a variety of programs designed to help you build the skills and knowledge 
                                needed for a successful career. Explore our educational offerings and find the perfect path to achieve your goals.' }}
                            </p>
                        </div>
                        <div class="col-lg-4 col-md-12 text-lg-end text-start mt-4 mt-lg-0" data-aos="zoom-in">
                            <a href="{{ route('programs') }}" class="btn-explore mt-3 text-decoration-none">
                                Explore Programs <i class="ri-play-fill ms-2" style="font-size: 0.7rem;"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Four Pillars Section -->
    <section class="four-pillars-section mt-5" data-aos="fade-up" data-aos-duration="1000">
        <div class="container py-5">
            <div class="row mb-4 mt-2">
                <div class="col-12">
                    <h2 class="fw-bold text-black text-start" data-aos="fade-down" data-aos-delay="100" style="font-family: 'Poppins', sans-serif;">
                        The four pillars shaping education at Aliz College.
                    </h2>
                </div>
            </div>
            <div class="row g-4 mb-4">
                @foreach($pillars as $index => $pillar)
                    <x-pillar-card :index="$index" :icon="$pillar['icon']" :title="$pillar['title']" :desc="$pillar['desc']"/>
                @endforeach
            </div>
        </div>
    </section>
    <!-- Gallery Section -->
    <x-home-gallery :images="$galleryImages" />
    <!-- Address Section -->
    <x-campus-map :mapData="$mapData" />

@endsection

@push('footer-scripts')
    {{--    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>--}}
    <script src="{{asset('assets/frontend/leaflet.js')}}"></script>
    <script>
        // Initialize the map with a world view
        const map = L.map('map').setView([31.45, 73.10], 10); // center near Faisalabad

        // Add OpenStreetMap tiles (CARTO Light)
        L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
            attribution: '&copy; <a href="https://carto.com/">CARTO</a> contributors',
            subdomains: 'abcd',
            maxZoom: 19
        }).addTo(map);

        // Get pins from Laravel
        const pins = @json($pins);

        // Add markers dynamically
        pins.forEach(pin => {
            const marker = L.marker([pin.lat, pin.lng]).addTo(map);

            // Use template literals correctly (need backticks)
            marker.bindPopup(`<b>${pin.name}</b><br>Lat: ${pin.lat}<br>Lng: ${pin.lng}`);
        });

        // Auto-fit map to show all markers
        if (pins.length > 0) {
            const bounds = L.latLngBounds(pins.map(p => [p.lat, p.lng]));
            map.fitBounds(bounds, {padding: [50, 50]});
        }
    </script>
@endpush