@extends('layouts.app')
@section('content')
    <section class="position-relative">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12 pl-0 pr-0">
                    <div class="map" id="map"></div>
                    <a href="#scrolldata-section" class="arrow-box d-block" data-aos="fade-up" data-aos-delay="200">
                        <div class="new-arrow-box" id="show">
                            <img src="{{ asset('app-assets/images/arrow-bottom.svg') }}" alt="">
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </section>

    <section class="specialists scroll-section" id="scrolldata-section">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="threeCollection owl-carousel">
                        <div class="item">
                            <div class="tree-box">
                                <div class="tree-boxmain">
                                    <div class="img-box">
                                        <p>{{ __('static.open_soon') }}</p>
                                        <h1>{{ __('static.ghaf_plantation') }}</h1>
                                    </div>
                                    <div class="tree-boximg">
                                        <img src="{{ asset('app-assets/images/top-tree.png') }}" alt="">
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6 col-6 pr-0">
                                            <h4>{{ __('static.trees_planted') }} <br> 0/600 </h4>
                                            <h6>{{ __('static.Oman') }}</h6>
                                        </div>
                                        <div class="col-md-6 col-6 pl-0">
                                            <button type="button"
                                                class="btn visit-btn btn-block ">{{ __('button.visit_start_planting') }}</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="tree-box ">
                                <div class="tree-boxmain">
                                    <div class="img-box">
                                        <p>{{ __('static.on_going_project') }}</p>
                                        <h1>{{ __('static.king_county_parks') }}</h1>
                                    </div>
                                    <div class="tree-boximg">
                                        <img src="{{ asset('app-assets/images/top-tree2.png') }}" alt="">
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6 col-6 pr-0">
                                            <h4>{{ __('static.trees_planted') }} <br> 670/4000 </h4>
                                            <h6>{{ __('static.saudi_arabia') }}</h6>
                                        </div>
                                        <div class="col-md-6 pl-0 col-6">
                                            <button type="button"
                                                class="btn visit-btn btn-block ">{{ __('button.visit_start_planting') }}</button>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="item">
                            <div class="tree-box">
                                <div class="tree-boxmain">
                                    <div class="img-box">
                                        <p>{{ __('static.on_going_project') }}</p>
                                        <h1>{!! __('static.plantation_at_rasta') !!}</h1>
                                    </div>
                                    <div class="tree-boximg">
                                        <img src="{{ asset('app-assets/images/top-tree3.png') }}" alt="">
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6 col-6 pr-0">
                                            <h4>{{ __('static.trees_planted') }} <br> 560/5000 </h4>
                                            <h6>{{ __('static.bahrain') }}</h6>
                                        </div>
                                        <div class="col-md-6 pl-0 col-6">
                                            <button type="button"
                                                class="btn visit-btn btn-block ">{{ __('button.visit_start_planting') }}</button>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="item">
                            <div class="tree-box">
                                <div class="tree-boxmain">
                                    <div class="img-box">
                                        <p>{{ __('static.on_going_project') }}</p>
                                        <h1>{{ __('static.donate_your_favorite') }}</h1>
                                    </div>
                                    <div class="tree-boximg">
                                        <img src="{{ asset('app-assets/images/top-tree.png') }}" alt="">
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6 col-6 pr-0">
                                            <h4>{{ __('static.trees_planted') }} <br> 360/4000 </h4>
                                            <h6>Kuwait</h6>
                                        </div>
                                        <div class="col-md-6 pl-0 col-6">
                                            <button type="button"
                                                class="btn visit-btn btn-block ">{{ __('button.visit_start_planting') }}</button>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>

                        <div class="item">
                            <div class="tree-box">
                                <div class="tree-boxmain">
                                    <div class="img-box">
                                        <p>{{ __('static.open_soon') }}</p>
                                        <h1>{{ __('static.ghaf_plantation') }}</h1>
                                    </div>
                                    <div class="tree-boximg">
                                        <img src="{{ asset('app-assets/images/top-tree.png') }}" alt="">
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6 col-6 pr-0">
                                            <h4>{{ __('static.trees_planted') }} <br> 0/600 </h4>
                                            <h6>{{ __('static.Oman') }}</h6>
                                        </div>
                                        <div class="col-md-6 col-6 pl-0">
                                            <button type="button"
                                                class="btn visit-btn btn-block ">{{ __('button.visit_start_planting') }}</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="tree-box ">
                                <div class="tree-boxmain">
                                    <div class="img-box">
                                        <p>{{ __('static.on_going_project') }}</p>
                                        <h1>{{ __('static.king_county_parks') }}</h1>
                                    </div>
                                    <div class="tree-boximg">
                                        <img src="{{ asset('app-assets/images/top-tree2.png') }}" alt="">
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6 col-6 pr-0">
                                            <h4>{{ __('static.trees_planted') }} <br> 670/4000 </h4>
                                            <h6>{{ __('static.saudi_arabia') }}</h6>
                                        </div>
                                        <div class="col-md-6 pl-0 col-6">
                                            <button type="button"
                                                class="btn visit-btn btn-block ">{{ __('button.visit_start_planting') }}</button>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="item">
                            <div class="tree-box">
                                <div class="tree-boxmain">
                                    <div class="img-box">
                                        <p>{{ __('static.on_going_project') }}</p>
                                        <h1>{!! __('static.plantation_at_rasta') !!}</h1>
                                    </div>
                                    <div class="tree-boximg">
                                        <img src="{{ asset('app-assets/images/top-tree3.png') }}" alt="">
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6 col-6 pr-0">
                                            <h4>{{ __('static.trees_planted') }} <br> 560/5000 </h4>
                                            <h6>{{ __('static.bahrain') }}</h6>
                                        </div>
                                        <div class="col-md-6 pl-0 col-6">
                                            <button type="button"
                                                class="btn visit-btn btn-block ">{{ __('button.visit_start_planting') }}</button>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="item">
                            <div class="tree-box">
                                <div class="tree-boxmain">
                                    <div class="img-box">
                                        <p>{{ __('static.on_going_project') }}</p>
                                        <h1>{{ __('static.donate_your_favorite') }}</h1>
                                    </div>
                                    <div class="tree-boximg">
                                        <img src="{{ asset('app-assets/images/top-tree.png') }}" alt="">
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6 col-6 pr-0">
                                            <h4>{{ __('static.trees_planted') }} <br> 360/4000 </h4>
                                            <h6>{{ __('static.kuwait') }}</h6>
                                        </div>
                                        <div class="col-md-6 pl-0 col-6">
                                            <button type="button"
                                                class="btn visit-btn btn-block ">{{ __('button.visit_start_planting') }}</button>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>

                    </div>

                </div>
            </div>

        </div>
    </section>

    <section class="pt-4 pb-5 py-sm-5">
        <div class="container">
            <div class="row">
                <div class="col-md-4" data-aos="fade-right" data-aos-delay="100">
                    <div class="nature-sec">
                        <div class="head-text">
                            <h1>{!! __('static.why_plant_my_tree') !!} </h1>
                            <p>{!! __('static.climate_change') !!}</p>
                            <p>{!! __('static.join_us') !!}</p>
                            <div class="climate-img"><img src="{{ asset('app-assets/images/nature.png') }}"
                                    alt=""></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-8" data-aos="fade-up" data-aos-delay="500">
                    <div class="nature-rightsec" data-toggle="modal" data-target="#exampleModal">
                        <img src="{{ asset('app-assets/images/nature-right.png') }}" class="big-img" alt="">
                        <span>
                            <img src="{{ asset('app-assets/images/play.svg') }}" alt="">
                        </span>
                    </div>

                </div>
            </div>

            <div class="row mt-5">
                <div class="col-md-3 pr-sm-1" data-aos="fade-up" data-aos-delay="500">

                    <div class="why-nature why-nature-firstbox">
                        <div class="why-nature-layer">
                            <h1>{{ __('static.individual') }}</h1>
                            <p>{!! __('static.natural_arrangements') !!}</p>
                        </div>
                        <div class="oneCollectionNew owl-carousel">
                            <div class="item">
                                <div class="why-natureboxbottomimg">
                                    <img src="{{ asset('app-assets/images/nature-right2.png') }}" alt="">
                                </div>
                            </div>
                            <div class="item">
                                <div class="why-natureboxbottomimg">
                                    <img src="{{ asset('app-assets/images/nature-midle.png') }}" alt="">
                                </div>
                            </div>
                            <div class="item">
                                <div class="why-natureboxbottomimg">
                                    <img src="{{ asset('app-assets/images/nature-right.png') }}" alt="">
                                </div>
                            </div>
                            <div class="item">
                                <div class="why-natureboxbottomimg">
                                    <img src="{{ asset('app-assets/images/nature-right2.png') }}" alt="">
                                </div>
                            </div>
                            <div class="item">
                                <div class="why-natureboxbottomimg">
                                    <img src="{{ asset('app-assets/images/nature-right2.png') }}" alt="">
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

                <div class="col-md-6 px-sm-0" data-aos="fade-down" data-aos-delay="800">

                    <div class="why-nature">
                        <div class="why-nature-layer">
                            <h1>{{ __('static.business') }}</h1>
                            <p>{!! __('static.forests_are_domestic') !!}</p>
                        </div>

                        <div class="oneCollectionmiddle owl-carousel">
                            <div class="item">
                                <div class="why-natureboxbottomimg">
                                    <img src="{{ asset('app-assets/images/nature-midle.png') }}" alt="">
                                </div>
                            </div>
                            <div class="item">
                                <div class="why-natureboxbottomimg">
                                    <img src="{{ asset('app-assets/images/activities1.png') }}" alt="">
                                </div>
                            </div>
                            <div class="item">
                                <div class="why-natureboxbottomimg">
                                    <img src="{{ asset('app-assets/images/activities2.png') }}" alt="">
                                </div>
                            </div>
                            <div class="item">
                                <div class="why-natureboxbottomimg">
                                    <img src="{{ asset('app-assets/images/activities3.png') }}" alt="">
                                </div>
                            </div>
                            <div class="item">
                                <div class="why-natureboxbottomimg">
                                    <img src="{{ asset('app-assets/images/nature-right.png') }}" alt="">
                                </div>
                            </div>
                        </div>

                    </div>

                </div>

                <div class="col-md-3 pl-sm-1" data-aos="fade-up" data-aos-delay="1200">

                    <div class="why-nature why-nature-lastbox">
                        <div class="why-nature-layer">
                            <h1>{{ __('static.gifting') }}</h1>
                            <p>{!! __('static.of_the_worlds') !!}</p>
                        </div>

                        <div class="oneCollectionright owl-carousel">
                            <div class="item">
                                <div class="why-natureboxbottomimg">
                                    <img src="{{ asset('app-assets/images/nature-left.png') }}" alt="">
                                </div>
                            </div>
                            <div class="item">
                                <div class="why-natureboxbottomimg">
                                    <img src="{{ asset('app-assets/images/activities4.png') }}" alt="">
                                </div>
                            </div>
                            <div class="item">
                                <div class="why-natureboxbottomimg">
                                    <img src="{{ asset('app-assets/images/activities5.png') }}" alt="">
                                </div>
                            </div>
                            <div class="item">
                                <div class="why-natureboxbottomimg">
                                    <img src="{{ asset('app-assets/images/activities6.png') }}" alt="">
                                </div>
                            </div>
                            <div class="item">
                                <div class="why-natureboxbottomimg">
                                    <img src="{{ asset('app-assets/images/nature-midle.png') }}" alt="">
                                </div>
                            </div>

                        </div>

                    </div>

                </div>

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

    <section class="py-5 recent-sec">
        <div class="container">
            <div class="row justify-content-center" data-aos="fade-down" data-aos-delay="200">
                <div class="col-md-7">
                    <div class="head-text white-headtext text-center ">
                        <h2>{{ __('static.our_projects') }}</h2>
                        <p>{!! __('static.have_deep_dive') !!}</p>
                        <button type="button"
                            class="btn btn-login new-btnpadding mt-5">{{ __('button.start_planting') }}</button>
                    </div>
                </div>
            </div>

            <div class="row" data-aos="fade-up" data-aos-delay="600">
                <div class="col-md-12 new-slider">
                    <div class="oneCollection owl-carousel">
                        <div class="item">
                            <div class="product">
                                <div class="product-layer">
                                    <p>{{ __('static.open_soon') }}</p>
                                    <h1>{{ __('static.ghaf_plantation') }}</h1>
                                </div>
                                <div class="recent-activities">
                                    <img src="{{ asset('app-assets/images/activities1.png') }}" alt="">
                                </div>
                            </div>

                        </div>
                        <div class="item">
                            <div class="product">
                                <div class="product-layer">
                                    <p>{{ __('static.open_soon') }}</p>
                                    <h1>{{ __('static.ghaf_plantation') }}</h1>
                                </div>
                                <div class="recent-activities">
                                    <img src="{{ asset('app-assets/images/activities6.png') }}" alt="">
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="product">
                                <div class="product-layer">
                                    <p>{{ __('static.open_soon') }}</p>
                                    <h1>{{ __('static.ghaf_plantation') }}</h1>
                                </div>
                                <div class="recent-activities">
                                    <img src="{{ asset('app-assets/images/activities2.png') }}" alt="">
                                </div>
                            </div>

                        </div>
                        <div class="item">
                            <div class="product">
                                <div class="product-layer">
                                    <p>{{ __('static.open_soon') }}</p>
                                    <h1>{{ __('static.ghaf_plantation') }}</h1>
                                </div>
                                <div class="recent-activities">
                                    <img src="{{ asset('app-assets/images/activities4.png') }}" alt="">
                                </div>
                            </div>

                        </div>
                        <div class="item">

                            <div class="product">
                                <div class="product-layer">
                                    <p>{{ __('static.open_soon') }}</p>
                                    <h1>{{ __('static.ghaf_plantation') }}</h1>
                                </div>
                                <div class="recent-activities">
                                    <img src="{{ asset('app-assets/images/activities5.png') }}" alt="">
                                </div>
                            </div>

                        </div>

                        <div class="item">
                            <div class="product">
                                <div class="product-layer">
                                    <p>{{ __('static.open_soon') }}</p>
                                    <h1>{{ __('static.ghaf_plantation') }}</h1>
                                </div>
                                <div class="recent-activities">
                                    <img src="{{ asset('app-assets/images/activities1.png') }}" alt="">
                                </div>
                            </div>

                        </div>
                        <div class="item">
                            <div class="product">
                                <div class="product-layer">
                                    <p>{{ __('static.open_soon') }}</p>
                                    <h1>{{ __('static.ghaf_plantation') }}</h1>
                                </div>
                                <div class="recent-activities">
                                    <img src="{{ asset('app-assets/images/activities6.png') }}" alt="">
                                </div>
                            </div>

                        </div>
                        <div class="item">
                            <div class="product">
                                <div class="product-layer">
                                    <p>{{ __('static.open_soon') }}</p>
                                    <h1>{{ __('static.ghaf_plantation') }}</h1>
                                </div>
                                <div class="recent-activities">
                                    <img src="{{ asset('app-assets/images/activities2.png') }}" alt="">
                                </div>
                            </div>

                        </div>
                        <div class="item">
                            <div class="product">
                                <div class="product-layer">
                                    <p>{{ __('static.open_soon') }}</p>
                                    <h1>{{ __('static.ghaf_plantation') }}</h1>
                                </div>
                                <div class="recent-activities">
                                    <img src="{{ asset('app-assets/images/activities4.png') }}" alt="">
                                </div>
                            </div>

                        </div>
                        <div class="item">
                            <div class="product">
                                <div class="product-layer">
                                    <p>{{ __('static.open_soon') }}</p>
                                    <h1>{{ __('static.ghaf_plantation') }}</h1>
                                </div>
                                <div class="recent-activities">
                                    <img src="{{ asset('app-assets/images/activities5.png') }}" alt="">
                                </div>
                            </div>

                        </div>

                        <div class="item">
                            <div class="product">
                                <div class="product-layer">
                                    <p>{{ __('static.open_soon') }}</p>
                                    <h1>{{ __('static.ghaf_plantation') }}</h1>
                                </div>
                                <div class="recent-activities">
                                    <img src="{{ asset('app-assets/images/activities1.png') }}" alt="">
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="product">
                                <div class="product-layer">
                                    <p>{{ __('static.open_soon') }}</p>
                                    <h1>{{ __('static.ghaf_plantation') }}</h1>
                                </div>
                                <div class="recent-activities">
                                    <img src="{{ asset('app-assets/images/activities6.png') }}" alt="">
                                </div>
                            </div>

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

        <video autoplay muted>
            <source src="{{ asset('app-assets/images/video.mp4') }}" type="video/mp4">
            <source src="{{ asset('app-assets/images/video.mp4') }}" type="video/ogg">
            {{ __('static.your_browser_does_not_support') }}
        </video>
    </section>

    <section class="mobile-sec">
        <div class="bottom-bgmobilesec  py-5">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-md-6 mb-2 mb-sm-0" data-aos="fade-right" data-aos-delay="100">
                        <div class="row justify-content-center">
                            <div class="col-md-10">
                                <div class="head-text new-left">
                                    <h1>{!! __('static.your_planting') !!}</h1>
                                </div>

                                <div class="row mt-3 mt-sm-5 flex-column flex-sm-row">
                                    <div class="col-md-5 col-6">
                                        <a href="###">
                                            <div class="footbtn">
                                                <div class="row align-items-center">
                                                    <div class="col-md-3 pr-0 col-3">
                                                        <img src="{{ asset('app-assets/images/google-play.svg') }}"
                                                            alt="">
                                                    </div>
                                                    <div class="col-md-9 pl-2 col-9">
                                                        <h5> {{ __('static.get_in_on') }} <br>
                                                            <span>{{ __('static.google_play') }}</span>
                                                        </h5>
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                    <div class="col-md-5 col-6">
                                        <a href="####">
                                            <div class="footbtn">
                                                <div class="row align-items-center">
                                                    <div class="col-md-3 pr-0 col-3">
                                                        <img src="{{ asset('app-assets/images/apple.svg') }}"
                                                            alt="">
                                                    </div>
                                                    <div class="col-md-9 pl-2 col-9">
                                                        <h5> {{ __('static.download_on_the') }} <br>
                                                            <span>{{ __('static.app_store') }}</span>
                                                        </h5>
                                                    </div>
                                                </div>
                                            </div>
                                        </a>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6" data-aos="fade-down" data-aos-delay="700">
                        <img src="{{ asset('app-assets/images/mobile-right.png') }}" alt="">
                    </div>
                </div>
            </div>
        </div>
    </section>
    @include('partials.subscribe-news-letter')
@endsection
@section('scripts')
    @include('partials.bing-map-scripts')
    <script type="text/javascript">
        let map;
        let clusterLayer;
        let treeLayer;
        let treeLocations = [];
        let clusterIcon = [];

        function initMap() {
            map = new Microsoft.Maps.Map('#map', {
                credentials: "{{ env('BING_MAPS_API_KEY') }}",
                center: new Microsoft.Maps.Location({{ $centerLatitude }}, {{ $centerLongitude }}),
                mapTypeId: Microsoft.Maps.MapTypeId.aerial,
                zoom: 6
            });

            // Draw boundaries with polygon
            @foreach ($projectsData as $project)
                var boundaryCoordinates = [
                    @foreach ($project['boundaryPoints'] as $point)
                        new Microsoft.Maps.Location({{ $point['lat'] }}, {{ $point['lng'] }}),
                    @endforeach
                ];

                var boundaryPolygon = new Microsoft.Maps.Polygon(boundaryCoordinates, {
                    fillColor: 'rgba(255, 0, 0, 0.3)', // Red with 30% opacity
                    strokeColor: 'red',
                    strokeThickness: 2
                });

                map.entities.push(boundaryPolygon);

                // Add tree images (planting locations)
                var treeIcon = "{{ asset('app-assets/images/green-img.svg') }}";

                // // Prepare data for clustering

                var projectTreeLocations = [
                    @foreach ($project['locations'] as $location)
                        new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location({{ $location['lat'] }},
                                {{ $location['lng'] }}), {
                                icon: treeIcon,
                                anchor: new Microsoft.Maps.Point(12,
                                    32
                                ) // Adjust the anchor based on the tree image size for correct positioning
                            }),
                    @endforeach
                ];
                treeLocations.push(...projectTreeLocations);
            @endforeach

            Microsoft.Maps.loadModule('Microsoft.Maps.Clustering', function() {
                createCluster(treeLocations);

            });

            Microsoft.Maps.Events.addHandler(map, 'viewchange', function() {
                var zoomLevel = map.getZoom();
                if (zoomLevel >= 18) {
                    // When zoomed in completely, show individual tree locations
                    updateMapWithTreeLocations(treeLocations);
                } else {
                    // When not fully zoomed in, show clusters
                    createCluster(treeLocations);
                }
            });


        }

        function createCluster(treeLocations) {
            if (clusterLayer) {
                map.layers.remove(clusterLayer);
            }
            if (treeLayer) {
                map.layers.remove(treeLayer);
            }
            clusterLayer = new Microsoft.Maps.ClusterLayer(treeLocations, {
                clusteredPinCallback: createCustomClusteredPin,
                gridSize: 80
            });

            map.layers.insert(clusterLayer);

            Microsoft.Maps.Events.addHandler(clusterLayer, 'click', function(e) {
                if (e.targetType === 'layer') {
                    var target = e.target;
                    if (target instanceof Microsoft.Maps.ClusterPushpin) {
                        // Zoom to the clicked cluster
                        map.setView({
                            center: target.getLocation(),
                            zoom: map.getZoom() + 2 // Zoom in by 2 levels
                        });
                    }
                }
                // Check if the map is fully zoomed in (zoom level 18 or higher)
                if (map.getZoom() >= 18) {
                    // Update the map to show individual tree locations and remove the cluster layer
                    updateMapWithTreeLocations(treeLocations);
                } else {
                    createCluster(treeLocations);
                }
            });

        }

        function updateMapWithTreeLocations(treeLocations) {
            if (clusterLayer) {
                map.layers.remove(clusterLayer);
            }
            if (treeLayer) {
                map.layers.remove(treeLayer);
            }
            treeLayer = new Microsoft.Maps.Layer();
            treeLocations.forEach(function(location) {
                treeLayer.add(location);
            });
            map.layers.insert(treeLayer);
        }

        function createCustomClusteredPin(cluster) {
            var minRadius = 12;
            var outlineWidth = 7;
            //Get the number of pushpins in the cluster
            var clusterSize = cluster.containedPushpins.length;
            //Calculate the radius of the cluster based on the number of pushpins in the cluster, using a logarithmic scale.
            var radius = Math.log(clusterSize) / Math.log(10) * 5 + minRadius;

            //Default cluster color is green.
            fillColor = '#28a745';
            if (clusterSize < 10) {
                fillColor = '#c97cd5';
            } else if (clusterSize < 100) {
                fillColor = '#b85517';
            }

            //Create an SVG string of two circles, one on top of the other, with the specified radius and color.
            var svg = ['<svg xmlns="http://www.w3.org/2000/svg" width="', (radius * 2), '" height="', (radius *
                    2), '">',
                '<circle cx="', radius, '" cy="', radius, '" r="', radius, '" fill="', fillColor, '"/>',
                '<circle cx="', radius, '" cy="', radius, '" r="', radius - outlineWidth, '" fill="',
                fillColor, '"/>',
                '</svg>'
            ];

            // //Customize the clustered pushpin using the generated SVG and anchor on its center.
            cluster.setOptions({
                icon: svg.join(''),
                anchor: new Microsoft.Maps.Point(radius, radius),
                textOffset: new Microsoft.Maps.Point(0, radius -
                    8) //Subtract 8 to compensate for height of text.
            });
        }
    </script>
@endsection