@extends('layouts.front')
@section('content')
    <div class="main-content">
        <!-- Section: home -->
        @include('frontend.homepage.hero')
        @include('frontend.homepage.newsticker')
        @include('frontend.homepage.counter')
        @include('frontend.homepage.map')
        {{-- @include('frontend.homepage.textvideo') --}}
        {{-- @include('frontend.homepage.events') --}}
        @include('frontend.homepage.work')
        {{-- @include('frontend.homepage.donor') --}}
        @include('frontend.homepage.gallery')
        @include('frontend.homepage.news')
        @include('frontend.homepage.iconbox')
        @include('frontend.homepage.client')
    </div>
@endsection
@push('script')
    {{-- <script src="https://code.jquerygeo.com/jquery.geo-1.1.0.min.js"></script> --}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
    <script src="{{asset('js/jquery.counterup.js')}}"></script>
   {{-- <script>
        $(document).ready(function() {
          const settings = {
            async: true,
            crossDomain: true,
            url: 'https://news-api14.p.rapidapi.com/top-headlines?country=ss&language=en&pageSize=10&category=business&sortBy=timestamp',
            method: 'GET',
            headers: {
              'X-RapidAPI-Key': '15e37dbb42mshaf31a6271b3af90p13dae1jsn3fefb5444e4b',
              'X-RapidAPI-Host': 'news-api14.p.rapidapi.com'
            }
          };

          $.ajax(settings).done(function (response) {
            $('#lateast_news').html('');
              $.each(response.articles, function (indexInArray, valueOfElement) {
                 $('#lateast_news').append('<span class="news-ticker-item"><a href="#">'+valueOfElement.title+'</a></span>')
              });
          });
        });
    </script>--}}

    <script>
        var regions = [{
                "region_name": "North Bahr-al-Ghazal",
                "region_code": "lom",
                "fill":"rgba(70, 174, 180, 0.8)",
                "population": 9794525
            },{
                "region_name": "Lakes",
                "region_code": "lom",
                "fill":"rgba(40, 10, 1, 0.8)",
                "population": 9794525
            },
            {
                "region_name": "West Equatoria",
                "region_code": "lom",
                "fill":"rgba(0, 4, 128, 0.8)",
                "population": 9794525
            },
            {
                "region_name": "Central Equatoria",
                "region_code": "lom",
                "fill":"rgba(250, 174, 180, 0.8)",
                "population": 9794525
            },
            {
                "region_name": "Upper Nile",
                "region_code": "lom",
                "fill":"rgba(70, 94, 180, 0.8)",
                "population": 9794525
            },
            {
                "region_name": "Jungoli",
                "region_code": "lom",
                "fill":"rgba(220, 104, 180, 0.8)",
                "population": 9794525
            },
            {
                "region_name": "Unity",
                "region_code": "lom",
                "fill":"rgba(250, 44, 90, 0.6)",
                "population": 5236
            },
            {
                "region_name": "Warap",
                "region_code": "lom",
                "fill":"rgba(170, 104, 40, 0.8)",
                "population": 9794525
            },
            {
                "region_name": "West Bahr-al-Ghazal",
                "region_code": "lom",
                "fill":"rgba(250, 54, 180, 0.8)",
                "population": 54256
            },
            {
                "region_name": "East Equatoria",
                "region_code": "lom",
                "fill":"rgba(170, 220, 180, 0.8)",
                "population": 9794525
            }
        ];


        var temp_array = regions.map(function(item) {
            return item.population;
        });
        var highest_value = Math.max.apply(Math, temp_array);
        var listItem = $('.map g path');
        $(function() {

            for (i = 0; i < regions.length; i++) {
                    if($(listItem[i]).attr('name') == regions[i].region_name){
                        $(listItem[i]).css('fill',regions[i].fill)
                        .data('region', regions[i]);
                    }
            }

            $('.map g path').mouseover(function(e) {
                    var region_data = $(this).attr('name');
                    console.log($(this).offset().top);
                    var findInfo = [];
                    for (var j = 0; j < regions.length; j++) {
                        if($(this).attr('name') == regions[j].region_name){
                            findInfo = regions[j];
                        }
                    }
                    $('<div class="info_panel">' +region_data + '<br>Population: ' +findInfo["population"] + '<br>Region Code: ' +findInfo["region_code"] + '<br></div>').appendTo('body');
                    $('.info_panel').css({
                        top: $(this).offset().top,
                        left: $(this).offset().left + $(this).outerWidth()
                    });
                })
                .mouseleave(function() {
                    $('.info_panel').remove();
                })
                .mousemove(function(e) {
                    var mouseX = e.pageX, //X coordinates of mouse
                        mouseY = e.pageY; //Y coordinates of mouse
                });

        });
    </script>

    <script>
        $("#copyright_year").text(new Date().getFullYear());
    </script>
    <script>
        $(document).ready(function () {
            $('.nav-link').on('click', function(){
                $('.count-num').counterUp({
                    delay: 10,
                    time: 1000
                });
            })
            $('.count-num').counterUp({
                delay: 10,
                time: 1000
            });
        });
    </script>


<script>
    $(document).ready(function () {
        $('.recent_work').owlCarousel({
            loop:true,
            margin:10,
            nav:true,
            responsive:{
                0:{
                    items:1
                },
                600:{
                    items:2
                },
                1000:{
                    items:4
                }
            }
        })

    });
</script>

    <script>
        const data_state = {!! json_encode($formattedmapData) !!};
        $.each(data_state, function( index, value ) {
            if(value.return_state == 'Lakes State'){
                $('.state_name').text(value.return_state);
                $('.total_male').text(value.total_male);
                $('.total_female').text(value.total_female);
                $('.total_family_members').text(value.total_family_members);
                $('.total_female_family_members').text(value.total_female_family_members);
                $('.total_childrens').text(value.total_childrens);
                $('.total_female_childrens').text(value.total_female_childrens);
                $('.total_members_in_co_a').text(value.total_members_in_co_a);
            }
        });
        console.log('Data state:', data_state); // Debug output to check the data_state array
        $(document).ready(function() {
            const tooltip_map = $('#tooltip_map');
            const clickablePaths = $('#sudan_map path'); // Update with your actual path selector

            clickablePaths.click(function() {
                const name = $(this).attr('data-name');
                console.log('Clicked name:', name); // Debug output to check the clicked name
                $.each(data_state, function( index, value ) {
                    console.log(value)
                    if(value.return_state == name){
                        $('.state_name').text(value.return_state);
                        $('.total_male').text(value.total_male);
                        $('.total_female').text(value.total_female);
                        $('.total_family_members').text(value.total_family_members);
                        $('.total_female_family_members').text(value.total_female_family_members);
                        $('.total_childrens').text(value.total_childrens);
                        $('.total_female_childrens').text(value.total_female_childrens);
                        $('.total_members_in_co_a').text(value.total_members_in_co_a);
                    }
                });
            });
        });
    </script>
@endpush