@php
    $footer_info=App\Models\SiteSetting::first();
@endphp
<footer id="footer" class="footer bg-black-222" data-bg-img="{{asset('images/footer-bg.png')}}">
    <div class="container pt-70 pb-40">
        <div class="row">
            <div class="col-sm-6 col-md-5">
                <div class="widget dark">
                    @if($footer_info->image)
                        <img class="mt-2 mb-15" alt="" src="{{$footer_info->image->getUrl()}}" style="max-width:220px">
                    @endif
                    <div class="text_justify">
                        <p class="font-14 font-weight-400 mb-10">The Relief and Rehabilitation Commission (RRC) is an
                            agency of the Government of South Sudan operating under the Ministry of Humanitarian Affairs
                            and Disaster Management. Together with partner organizations, the RRC plays a vital role in
                            addressing the humanitarian crisis in South Sudan.</p>
                    </div>
                    <ul class="styled-icons icon-dark mt-20">
                        <li class="wow fadeInLeft" data-wow-duration="1.5s" data-wow-delay=".1s" data-wow-offset="10"><a
                                href="{{ $footer_info->social_link['facebook'] }}" data-bg-color="#3B5998"><i
                                    class="fa fa-facebook"></i></a></li>
                        <li class="wow fadeInLeft" data-wow-duration="1.5s" data-wow-delay=".2s" data-wow-offset="10"><a
                                href="{{ $footer_info->social_link['twitter'] }}" data-bg-color="#02B0E8"><i
                                    class="fa fa-twitter"></i></a></li>
                        <li class="wow fadeInLeft" data-wow-duration="1.5s" data-wow-delay=".3s" data-wow-offset="10"><a
                                href="{{ $footer_info->social_link['skype'] }}" data-bg-color="#05A7E3"><i
                                    class="fa fa-skype"></i></a></li>
                        <li class="wow fadeInLeft" data-wow-duration="1.5s" data-wow-delay=".4s" data-wow-offset="10"><a
                                href="{{ $footer_info->social_link['linkedin'] }}" data-bg-color="#A11312"><i
                                    class="fa fa-linkedin"></i></a></li>
                        <li class="wow fadeInLeft" data-wow-duration="1.5s" data-wow-delay=".4s" data-wow-offset="10"><a
                                href="{{ $footer_info->social_link['instagram'] }}" data-bg-color="#A11312"><i
                                    class="fa fa-instagram"></i></a></li>
                        <li class="wow fadeInLeft" data-wow-duration="1.5s" data-wow-delay=".5s" data-wow-offset="10"><a
                                href="{{ $footer_info->social_link['youtube'] }}" data-bg-color="#C22E2A"><i
                                    class="fa fa-youtube"></i></a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-sm-6 col-md-2">
                <div class="widget dark">
                    <h5 class="widget-title line-bottom">Weather Update Juba</h5>
                    <div class="latest-posts">
                        <ul class="list angle-double-right list-border list_weather">
                            <li>
                                <img src="{{asset('images/hot.png')}}" alt="" width="25px">
                                <span class="temp"></span>
                            </li>
                            <li>
                                <img src="{{asset('images/wind-turbine.png')}}" alt="" width="25px">
                                <span class="wind"></span>km/h
                            </li>
                            <li>
                                <img src="{{asset('images/sunrise.png')}}" alt="" width="25px">
                                <span class="sunrise"></span>
                            </li>
                            <li>
                                <img src="{{asset('images/sunset.png')}}" alt="" width="25px">
                                <span class="sunset"></span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-2">
                <div class="widget dark">
                    <h5 class="widget-title line-bottom">Useful Links</h5>
                    <ul class="list angle-double-right list-border">
                        <li><a href="#">Privacy Policy</a></li>
                        <li><a href="#">Donor Privacy Policy</a></li>
                        <li><a href="#">Disclaimer</a></li>
                        <li><a href="#">Terms of Use</a></li>
                        <li><a href="#">Media Center</a></li>
                    </ul>
                </div>
            </div>
            <div class="col-sm-6 col-md-3">
                <div class="widget dark">
                    <h5 class="widget-title line-bottom">Quick Contact</h5>
                    <ul class="list list-border">
                        <li><a href="#" class="lineheight-20">South Sudan Relief & Rehabilitation Commission (RRC)</a>
                        </li>
                        <li><a href="#" class="lineheight-20">Federal government office in Juba, South Sudan</a></li>
                        <li><a href="#">Address: {{ $footer_info->address?? "" }}</a></li>
                        <li><a href="#">{{ $footer_info->email?? "" }}</a></li>
                        <li><a href="#">{{ $footer_info->phone?? "" }}</a></li>
                        </a></li>
                    </ul>
                    {{-- <p class="font-16 text-white mb-5 mt-15">Subscribe to our newsletter</p>
                    <form id="footer-mailchimp-subscription-form" class="newsletter-form mt-10">
                        <label class="display-block" for="mce-EMAIL"></label>
                        <div class="input-group">
                            <input type="email" value="" name="EMAIL" placeholder="Your Email"
                                class="form-control" data-height="37px" id="mce-EMAIL">
                            <span class="input-group-btn">
                                <button type="submit" class="btn btn-colored btn-theme-colored m-0"><i
                                        class="fa fa-paper-plane-o text-white"></i></button>
                            </span>
                        </div>
                    </form> --}}
                </div>
            </div>
        </div>
        <div class="row mt-0 mb-4">
            <div class="col-sm-12 col-md-10 mx-auto">
                <div class="widget dark">
                    <div class="col-md-12 mx-auto">
                        <div class="d-flex align-items-center justify-content-center">
                            <h5 class="text-white text-center mr-3">Supported By : </h5>
                            <!-- Added d-inline-block class for inline display -->
                            <img class="img-fluid mr-2" width="80px" src="/images/flag-of-south-sudan.png"
                                 alt="Image 1">
                            <img class="img-fluid" width="150px" src="/images/ftr-rrc-logo.png" alt="Image 3">
                            <img class="img-fluid mr-2" width="30px" src="{{ asset('images/undplogo.png') }}"
                                 alt="Image 2">
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>
    <div class="footer-bottom bg-black-333">
        <div class="container pt-20 pb-20">
            <div class="row">
                <div class="col-md-12">
                    <p class="font-11 text-center text-black-777 m-0">Copyright &copy;<span id="copyright_year"></span>
                        South Sudan Relief & Rehabilitation Commission (RRC). All Rights Reserved</p>
                </div>
            </div>
        </div>
    </div>
</footer>

<script async>
    $(document).ready(function () {
        $.ajax({
            url: '/get-weather-data',
            method: 'GET',
            dataType: 'json', // Set the expected data type
            success: function (response) {
                console.log(response);
                if (response) {
                    $('.temp').text(response.temp);
                    $('.wind').text(response.wind_speed);
                    $('.sunrise').text(response.sunrise);
                    $('.sunset').text(response.sunset);
                } else {
                    // Handle errors or display a message if needed
                    console.error('Failed to fetch weather data.');
                }
            },
            error: function (xhr, textStatus, errorThrown) {
                console.error('Request failed:', errorThrown);
            }
        });
    });
</script>