@extends('front.layouts.app')
@section('content')
<!-- START INNER BANNER SECTION -->
<div class="inner-banner" @if(@$metaArr['main_banner_img_type'] == "image") style="background-image: url({!! getCmsFileUrl(@$metaArr['main_banner_img']) !!});" @endif>
    <div class="container h-100">
        <div class="d-flex h-100 align-items-center justify-content-center">
            <div class="col-12">
                <div class="inner-banner-content">
                    <h4>{!! @$metaArr['main_banner_subtitle'] !!}</h4>
                    <h1>{!! @$metaArr['main_banner_title'] !!}</h1>
                </div>
            </div>
        </div>
    </div>
    @if(@$metaArr['main_banner_img_type'] == "video")
    <video autoplay loop muted playsinline>
        <source src="{!! getCmsFileUrl(@$metaArr['main_banner_img']) !!}" type="video/mp4">
        <source src="{!! getCmsFileUrl(@$metaArr['main_banner_img']) !!}" type="video/ogg">
        Your browser does not support the video tag.
    </video>
    @endif
</div>
<!-- END INNER BANNER SECTION -->

<!-- START MK-ABOUT SECTION -->
<section class="au-page-sec sec-py">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 artical-col">
                <div class="artical-img right">
                    @if(@$metaArr['content_img_type'] == "video")
                    <x-video-js-player :src="$metaArr['content_img']" id="content_img" />
                    @else
                    <div class="mk-about-img">
                        <img src="{!! getCmsFileUrl(@$metaArr['content_img']) !!}" class="img-fluid" alt="{!! @$metaArr['content_img_alt'] !!}">
                    </div>
                    @endif
                </div>
                <div class="au-learn-content artical-content">
                    <div class="sec-title line-left">
                        <strong>{!! @$metaArr['content_subtitle'] !!}</strong>
                        <h2>{!! @$metaArr['content_title'] !!}</h2>
                    </div>
                    <p>{!! @$metaArr['content_description'] !!}</p>
                    @if(isset($data['eventLink']) && $data['eventLink'] != "")
                    <a href="{!! $data['eventLink'] !!}" class="btn btn-theme-blue mt-4">Get Started</a>
                    @endif
                </div>
            </div>
        </div>
    </div>
</section>
<!-- END MK-ABOUT SECTION -->

<section class="upcmig-clses-sec sec-py bg-lightgray">
    <div class="container">
        <div class="row gx-lg-5">
            <div class="col-md-12 mb-4">
                <div class="sec-title mb-4 text-center text-dark">
                    <h2>Missions Partners</h2>
                </div>
            </div>
            <div class="col-xxl-3 col-lg-4 filter-col" id="partners">
                <div class="filter-view">
                    <div class="filter-title">Filters</div>
                    <div class="filter-innerview">
                        <div class="filter-sec-title">Partner Type</div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="clsTypeAll" @if(request()->has('typeids') && request()->typeids == "") checked @endif>
                            <label class="form-check-label" for="clsClassCatAll">
                                All
                            </label>
                        </div>
                        @if(isset($data['missionpartnerTypes']) && $data['missionpartnerTypes']->count() > 0)
                        @foreach($data['missionpartnerTypes'] as $missionpartnerType)
                        <div class="form-check">
                            <input class="form-check-input clsClassType" type="checkbox" value="{!! $missionpartnerType->id !!}" id="class_cat_{!! $missionpartnerType->id !!}" @if(request()->has('typeids') && (in_array($missionpartnerType->id,explode(",",request()->typeids)) || request()->typeids == "")) checked @endif>
                            <label class="form-check-label" for="class_cat_{!! $missionpartnerType->id !!}">
                                {!! $missionpartnerType->name !!}
                            </label>
                        </div>
                        @endforeach
                        @endif
                    </div>
                    <div class="row w-100 mx-auto p-3 pt-0">
                        <button type="button" class="btn btn-theme-blue" onclick="javascript:filterClass()" style="flex: 1;margin-right: 3px; min-width:auto;">Apply</button>
                        &nbsp;
                        <button type="button" class="btn btn-theme-blue" onclick="javascript:resetClassFilter()" style="flex:1;margin-left: 3px;min-width:auto;">Clear</button>
                    </div>
                </div>
                <button type="button" class="filter-btn filter-backdrop"></button>
            </div>
            <div class="col-xxl-9 col-lg-8">
                <div class="text-end mb-3">
                    <button type="button" class="btn btn-theme-blue d-lg-none filter-btn mission-filter-btn">
                        <i class="bi bi-filter-left"></i>
                    </button>
                </div>
                @if(isset($data['missionpartners']) && $data['missionpartners']->total() > 0)
                @foreach($data['missionpartners'] as $missionpartner)
                <div class="classes-card horizontal">
                    <div class="classes-card-img">
                        <a href="{!! $missionpartner->page_url !!}"><img src="{!! $missionpartner->image_url !!}" alt="{!! $missionpartner->image_alt !!}"></a>
                    </div>
                    <div class="classes-card-content">
                        <h6>{!! $missionpartner->type->name ?? "" !!}</h6>
                        <h3><a href="{!! $missionpartner->page_url !!}">{!! $missionpartner->name !!}</a></h3>
                        @if($missionpartner->location)
                        <p><i class="bi bi-geo-alt-fill"></i> {!! $missionpartner->location !!}</p>
                        @endif
                        <!-- <p class="description">{!! $missionpartner->description ?? "" !!}</p> -->
                    </div>
                </div>
                @endforeach
                <div class="row">
                    {!! $data['missionpartners']->withQueryString()->links() !!}
                </div>
                @endif
            </div>
        </div>
    </div>
</section>

<!-- START SERVE TEAM SECTION -->
<section class="serve-team-sec sec-py" style="background-image:url({!! getCmsFileUrl(@$metaArr['banner_bg_img']) !!});">
    <div class="serve-team-row">
        <div class="icon-view">
            <img src="{!! getCmsFileUrl(@$metaArr['banner_img']) !!}" class="img-fluid" alt="{!! @$metaArr['banner_img_alt'] !!}">
        </div>
        <div class="content">
            <div>
                <div class="sec-title">
                    <strong>{!! @$metaArr['banner_subtitle'] !!}</strong>
                    <h2>{!! @$metaArr['banner_title'] !!}</h2>
                </div>
                @if(@$metaArr['banner_btn_caption'] && @$metaArr['banner_btn_link'])
                <a href="{!! @$metaArr['banner_btn_link'] !!}" class="btn btn-theme-blue" @if(@$metaArr['banner_btn_link_open_in_new_tab']) target="_blank" @endif>{!! @$metaArr['banner_btn_caption'] !!}</a>
                @endif
            </div>
        </div>
    </div>
</section>
<!-- END SERVE TEAM SECTION -->

<!-- START OUR PARTNERS SECTION -->
<!-- <section class="our-partners-sec sec-py pb-0">
    <div class="container">
        <div class="sec-title text-center">
            <h2>Missions 2.0 Around the World</h2>
        </div>
        <div class="links-view">
            <h4>OUR PARTNERS</h4>
            <div class="d-none d-md-block">
                <div class="btn-group">
                    <button type="button" class="btn" data-bs-toggle="dropdown" aria-expanded="false">
                        NORTH AMERICA
                    </button>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#">Children's Hope Alliance</a></li>
                        <li><a class="dropdown-item" href="#">Hope Vibes</a></li>
                    </ul>
                    <button type="button" class="btn" data-bs-toggle="dropdown" aria-expanded="false">
                        SOUTH AMERICA
                    </button>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#">SOUTH AMERICA list</a></li>
                    </ul>
                    <button type="button" class="btn" data-bs-toggle="dropdown" aria-expanded="false">
                        WESTERN EUROPE
                    </button>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#">WESTERN EUROPE list</a></li>
                    </ul>
                    <button type="button" class="btn" data-bs-toggle="dropdown" aria-expanded="false">
                        SOUTH AFRICA
                    </button>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#">SOUTH AFRICA list</a></li>
                    </ul>
                    <button type="button" class="btn" data-bs-toggle="dropdown" aria-expanded="false">
                        SOUTHEAST ASIA
                    </button>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#">SOUTHEAST ASIA List</a></li>
                    </ul>
                </div>
            </div>



            <div class="d-md-none">
                <select class="select2 our-partners-select" name="ourPartners" id="ourPartners">
                    <optgroup label="NORTH AMERICA">
                        <option value="Children's Hope Alliance" selected>Children's Hope Alliance</option>
                        <option value="Hope Vibes">Hope Vibes</option>
                    </optigroup>
                    <optgroup label="SOUTH AMERICA">
                        <option value="SOUTH AMERICA list">South America list</option>
                    </optigroup>
                    <optgroup label="WESTERN EUROPE">
                        <option value="Western Europe list">Western Europe list</option>
                    </optigroup>
                    <optgroup label="SOUTH AFRICA">
                        <option value="South Africa list">South Africa list</option>
                    </optigroup>
                    <optgroup label="SOUTHEAST ASIA">
                        <option value="Southest Asia list">Southest Asia list</option>
                    </optigroup>
                </select>
            </div>

        </div>
    </div>
    <div class="op-map-view">
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3254.9356557361916!2d-83.21585328439677!3d35.33241928027706!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8859150750174689%3A0xe39c29031c15e7a2!2sChildren&#39;s%20Hope%20Alliance!5e0!3m2!1sen!2sin!4v1662385147525!5m2!1sen!2sin" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
    </div>
</section> -->
<!-- END OUR PARTNERS SECTION -->


@includeIf('front.includes.elexio_form')
@includeIf('front.includes.current-week-events')
@includeIf('front.includes.faq')

@endsection
@section('js')
<script>
    // function formatState (state) {
    //     if (!state.id) {
    //         return state.text;
    //     }
    //     var baseUrl = "/user/pages/images/flags";
    //     var $state = $(
    //         '<span><img src="' + baseUrl + '/' + state.element.value.toLowerCase() + '.png" class="img-flag" /> ' + state.text + '</span>'
    //     );
    //     return $state;
    // };
    //
    // $("#ourPartners").select2({
    //     placeholder : "Select Place",
    //     templateResult: formatState,
    //     allowClear : true
    // });
    $(document).ready(function(){
    	var maxLength = 275;
    	$(".description").each(function(){
    		var myStr = $(this).text();
    		if($.trim(myStr).length > maxLength){
    			var newStr = myStr.substring(0, maxLength);
    			var removedStr = myStr.substring(maxLength, $.trim(myStr).length);
    			$(this).empty().html(newStr);
    			$(this).append(' <a href="javascript:void(0);" class="read-more">...read more</a>');
    			$(this).append('<span class="more-text" style="display:none">' + removedStr + '</span>');
    		}
    	});
    	$(".read-more").click(function(){
    		$(this).siblings(".more-text").contents().unwrap();
    		$(this).remove();
    	});
    });

    $(document).on('click', "#clsTypeAll", function () {
        $('.clsClassType').not(this).prop('checked', this.checked);
    })
    $(document).on('click', ".clsClassType", function () {
        if (!($(this).is(":checked"))) {
            $('#clsTypeAll').prop('checked', this.checked);
        }
    })
    $(document).on('click', ".filter-btn", function () {
        $('.filter-col').toggleClass('active');
        $('body').toggleClass('stop-scroll');
    })
    function filterClass() {
        $(".loader").show();
        var url = baseUrl + segments[1];
        var qstr = "";
        qstr += '?';
        if ($('.clsClassType:checked').length > 0 && !($("#clsTypeAll").is(":checked"))) {
            var typeids = [];
            $('.clsClassType').each(function () {
                if ($(this).is(':checked')) {
                    typeids.push($(this).val());
                }
            });
            qstr += "&typeids=" + typeids.join(',');
            // console.log(typeids);
        }
        qstr += '&sto=partners';
        window.location.href = url + qstr;
    }
    function resetClassFilter() {
        $(".loader").show();
        window.location.href = baseUrl + segments[1] + '?sto=partners';
    }
    @if(request()->get('sto'))
    scrollToDiv('{!! request()->get('sto') !!}')
    @endif
    if (window.location.href.indexOf('?') > -1) {
        history.pushState('', document.title, window.location.pathname);
    }
    // window.location.replace(window.location.pathname)

</script>
@stack('js')
@endsection