@extends('layouts.home')

@section('title', 'Home')


@section('scriptsHeader')
<script src="https://maps.googleapis.com/maps/api/js?key={{ config('services.maps.key') }}&v=beta&libraries=marker" async defer></script>

<script>
    let map;
    let markers = [];
    let infoWindow;

    function initMap() {
        const mapCenter = {
            lat: 53.80229568481445,
            lng: -1.5481679439544678
        };

        map = new google.maps.Map(document.getElementById('map'), {
            zoom: 12,
            center: mapCenter,
            mapId: '893b912cdc663835'
        });

        const locations = [
            @forelse($schools as $school) {
                position: {
                    lat: {!! $school -> lat !!},
                    lng: {!! $school -> long !!}
                },
                title: "{{ $school->name }}",
                slug: "./school/{{ $school->slug }}",
                address: "{{ $school->address }}"
            },

            @empty
            @endforelse
        ];

        infoWindow = new google.maps.InfoWindow();

        const bounds = new google.maps.LatLngBounds();

        locations.forEach((location) => {
            const marker = new google.maps.marker.AdvancedMarkerElement({
                position: location.position,
                map: map,
                title: location.title
            });
            // Store extra data on the marker object for easy retrieval
            marker.extraData = {
                slug: location.slug,
                address: location.address
            };


            marker.addListener('gmp-click', () => {
                showInfoWindow(marker);

            });

            markers.push(marker);

            bounds.extend(location.position);
        });
        // Fit the map to show all markers
        map.fitBounds(bounds);
    }

    function showInfoWindow(marker) {
        // Create a new InfoWindow for each marker (to allow multiple open windows)
        const infoWindow = new google.maps.InfoWindow({
            content: `<div class="school-popout"><a href="${marker.extraData.slug}">${marker.title}</a><br>${marker.extraData.address}</div>`
        });

        infoWindow.open({
            anchor: marker,
            map
        });
    }

    function searchByTitle() {
        const query = document.getElementById('search-input').value.trim();
        if (!query) return;

        // Filter all markers that partially match the query (case-insensitive)
        const matchedMarkers = markers.filter(m => m.title.toLowerCase().includes(query.toLowerCase()));

        if (matchedMarkers.length > 0) {
            // Fit the map to show all matched markers
            const bounds = new google.maps.LatLngBounds();
            matchedMarkers.forEach(marker => {
                bounds.extend(marker.position);
            });
            map.fitBounds(bounds);

            // Open an InfoWindow for each matched marker
            matchedMarkers.forEach(marker => {
                showInfoWindow(marker);
            });
        } else {
            alert("No markers found matching that query.");
        }
    }
    window.onload = initMap;
</script>
@endsection

@section('styles')
<style>
    #map {
        height: 400px;
    }

    .gm-style-iw {
        text-align: left !important;
    }

    .gm-style-iw-chr {
        padding: 12px;
    }

    .gm-ui-hover-effect {
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
    }
</style>
@endsection

@section('content')
<main id="main" role="main" class="clearfix main main-homepage">
    <a id="main-content" tabindex="-1"></a>
    <section class="hero-outer solid section">
        <div class="hero">
            <figure class="hero-image">
                <span>
                    <picture>
                        <img loading="lazy" src="{{ Vite::asset('resources/images/leeds-neu-banner.webp') }}" width="480" height="270" alt="Leeds NEU Banner" />
                    </picture>
                </span>
            </figure>
            <header class="hero-info">
                <div class="hero-inner">
                    <p class="media-block-title" role="heading" aria-level="1">
                        {!! getPageSection('text','home_h1') !!}
                    </p>
                    <div class="hero-summary">
                        {!! getPageSection('text','home_first_section') !!}
                        <h2 class="mt-5 media-block-title">{!! getPageSection('text','home_second_heading') !!}</h2>
                        {!! getPageSection('text','home_second_section') !!}
                    </div>
                </div>
            </header>
        </div>
    </section>

    <section class="media-block-outer left section">
        <div class="container">
            <div class="media-block">
                <figure class="media-block-element">
                    <span>
                        <picture>
                            <img loading="lazy" src="{{ Vite::asset('resources/images/home-first.webp') }}" width="450" height="253" alt="Homepage Image 2" />
                        </picture>
                    </span>
                </figure>
                <div class="media-block-info">
                    <div class="hero-summary">
                        <h2 class="mb-5">{!! getPageSection('text','home_map_heading') !!}</h2>
                        {!! getPageSection('text','home_map_section') !!}
                        <a href="#" id="openFullscreenButton" class="button">View Map</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="cards-outer purple promo-cards-alt section">
        <div class="container">
            <div id="search-container">
                <input id="search-input" type="text" placeholder="Search School Name" />
                <button id="search-button" onclick="searchByTitle()" class="btn btn-primary">Search</button>
            </div>
            <div id="map"></div>
        </div>
    </section>

    <section class="hero-outer solid section">
        <div class="hero" style="min-height: 15rem !important;">
            <header class="hero-info">
                <div class="hero-inner" style="">
                    <p class="hero-title" role="heading" aria-level="1" style="width: 100% !important;">
                        {!! getPageSection('text','home_third_heading') !!}
                    </p>
                        {!! getPageSection('text','home_third_section') !!}
                    <a href="{{ route('table') }}" target="" class="button ">View Table</a>
                </div>
            </header>
        </div>
    </section>

    <section class="hero-outer solid section">
        <div class="">
            <header class="hero-info">
                <h4 class="mt-8 text-center">You can download the latest versions of the Blue, Green and Burgundy Books here</h4>
                <div class="flex flex-col lg:flex-row lg:gap-8">
                    <a href="{{ asset('downloads/blue-book-september-2024.pdf') }}" target="_blank" class="button download-btn" download>STPCD<br>(Blue Book)</a>
                    <a href="{{ asset('downloads/green-book-april-2022.pdf') }}" target="_blank" class="button download-btn">NJC Agreement<br>(Green Book)</a>
                    <a href="{{ asset('downloads/burgundy-book-june-2023.pdf') }}" target="_blank" class="button download-btn">Teacher Conditions of Service<br>(Burgundy Book)</a>
                    <a href="{{ asset('downloads/red-book-may-2018.pdf') }}" target="_blank" class="button download-btn">Sixth Form Teaching Staff<br>(Red Book)</a>
                    <a href="{{ asset('downloads/lilac-book-may-2018.pdf') }}" target="_blank" class="button download-btn">Sixth Form Support Staff<br>(Lilac Book)</a>
                </div>
            </header>
        </div>
    </section>

    <!--div class="scroll-container">
        <span class="scroll-top" role="button" aria-label="Scroll to top">Back to top</span>
    </div-->
</main>
@endsection

@section('scripts')<script>
    function triggerMapFullscreen() {
      // Wait for the Google Maps fullscreen control to be available
      const interval = setInterval(() => {
        const fullscreenBtn = document.querySelector('.gm-fullscreen-control');
    
        if (fullscreenBtn) {
          fullscreenBtn.click();  // Simulate a click on the fullscreen button
          clearInterval(interval); // Stop checking
        }
      }, 200); // Check every 200ms
    }
  
    document.getElementById('openFullscreen').addEventListener('click', function(e) {
      e.preventDefault();
      triggerMapFullscreen();
    });
  
    document.getElementById('openFullscreenButton').addEventListener('click', function(e) {
      e.preventDefault();
      triggerMapFullscreen();
    });
  </script>
  
@endsection