@extends('v1.enduser.genericpage')

@push('subContents')
    <br/>
    @if(!empty($pageInfo['subContent']['ourmission']['title']) && !empty($pageInfo['subContent']['ourmission']['content']))
        <h2>{{ $pageInfo['subContent']['ourmission']['title'] }}</h2>
        <p>{!! $pageInfo['subContent']['ourmission']['content'] !!}</p>
        <br/>
    @endif
    @if(count($pageInfo['subContent']['ourmotto']['other_info']['motto'])>0)
        <h2>{{ $pageInfo['subContent']['ourmotto']['title'] }}</h2>
        <div class="mottoCon">
            @php
                $counter = 1;
            @endphp
            @foreach($pageInfo['subContent']['ourmotto']['other_info']['motto'] as $motto)
                @include('v1.enduser.ourstory.motto')
                @php
                    $counter++;
                @endphp
            @endforeach
        </div>
    @endif
    @if(!empty($pageInfo['subContent']['nationDistri']['title']) && !empty($pageInfo['subContent']['nationDistri']['content']))
        <h2>{{ $pageInfo['subContent']['nationDistri']['title'] }}</h2>
        <p>{!! $pageInfo['subContent']['nationDistri']['content'] !!}</p>
    @endif

    <div id="map" style="height: 500px;"></div>
@endpush

@push("footerScript")
    <script>
        var map;
        var locations = JSON.parse('{!! json_encode($pageInfo['subContent']['nationDistri']['other_info']['marker']) !!}');

        function initMap() {
            map = new google.maps.Map(
                document.getElementById('map'),
                {center: new google.maps.LatLng(19.4205407, 95.8633735), zoom: 5}
            );

            for (var i = 0; i < locations.length; i++) {
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(locations[i].lat, locations[i].lng),
                    icon: "{{ url('images/logo/map-icon.png') }}",
                    title: locations[i].title,
                    map: map
                });
            }
        }
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAQPURIQzo16EIpMmVDtFPHRiLzWLxY-78&callback=initMap"></script>
@endpush