@extends('front.layouts.app')
@section('content')

@php
$registration_source = "content_series_list";
$registration_source_elexio_group_id = config('constants.REGISTRATION_SOURCE.content_series_list');
@endphp

<div class="campus-view on-demand-sec">
    <!--// START LEFT VIEW //-->
    <div class="campus-view-left">
        <div class="row header-row">
            <div class="col-xxl-12 col-xl-12 col-lg-4 mb-xxl-0 mb-3">
                <h3 class="view-title">{!! $ministry->name !!}</h3>
            </div>
        </div>
        <div class="row">
            <div class="col-xxl-9 col-xl-9 col-lg-6 mb-xxl-0">
                <p class="breadcrumb-text"><a href="{!! route('media') !!}">On-Demand Library</a> > {!! $ministry->name !!}</p>
            </div>
            <div class="col-xxl-3 col-xl-3 col-lg-6 col-sm-6 text-end">
                @if($categories->count())
                <form class="form events-classes-form">
                    <select class="form-select" name="category_id" onchange="javascript:$('.loader').show();this.form.submit()">
                        <option selected value="">Category</option>
                        @foreach($categories as $category)
                        <option value="{!! $category->id !!}" @if(request()->get('category_id') == $category->id) selected @endif>{!! $category->name !!}</option>
                        @endforeach
                    </select>
                </form>
                @endif
            </div>
        </div>
        @if($contents->count())
        <!-- <div class="row header-row mt-5">
            <div class="col-xxl-12 col-xl-12 col-lg-4 mb-xxl-0">
                <h3 class="view-title">Contents</h3>
            </div>
        </div> -->
        <div class="row on-demand-cards-row pb-3">
        @foreach($contents as $content)
            {!! getContentBlock($content) !!}
        @endforeach
        </div>
        @endif

        <!-- series By Category -->
        @if(count($seriesByCategories))
        @foreach($seriesByCategories as $seriesByCategory)
        @if(isset($seriesByCategory['seriess']) && is_array($seriesByCategory['seriess']) && count($seriesByCategory['seriess']))
        <div class="row header-row mt-3 mb-3">
            <div class="col-xxl-12 col-xl-12 col-lg-4 mb-xxl-0">
                <h3 class="view-title row-title">{!! $seriesByCategory['name'] !!} <span class="count-drp remove-slick">({!! count($seriesByCategory['seriess']) !!})</span></h3>
            </div>
        </div>
        <div class="row on-demand-cards-row ondemand-cards-slider">
            @foreach($seriesByCategory['seriess'] as $series)
            <div class="col-xxl-3 col-xl-3 col-lg-4 col-sm-6 mb-3">
                <div class="odl-card readMoreContent">
                    @if(false && $series->is_registration_required && !auth('web')->check())
                    <a href="javascript:void(0)" class="odl-card-img" onclick="javascript:$('#register_login_popup').modal('show');">
                        <img src="{!! $series->avatar_url !!}" class="img-fluid" alt="{!! $series->image_alt !!}" />
                        <div class="overlay_lock"><i class="lock-icon"></i></div>
                    </a>
                    <a href="javascript:void(0)" onclick="javascript:$('#register_login_popup').modal('show');"><h4>{!! $series->name !!}</h4></a>
                    @else
                    <a href="{!! $series->page_url !!}" class="odl-card-img">
                        <img src="{!! $series->avatar_url !!}" class="img-fluid" alt="{!! $series->image_alt !!}" />
                    </a>
                    <a href="{!! $series->page_url !!}"><h4>{!! $series->name !!}</h4></a>
                    @endif

                    <p>{!! displayShortDescriptionInCmsBox($series->description,200,"moredetails_byseriescat_".$series->id) !!}</p>
                </div>
            </div>
            @endforeach
        </div>
        @endif
        @foreach($seriesByCategory['seriess'] as $series)
        {!! getMoreDetailPopupBlock($series,"moredetails_byseriescat_".$series->id) !!}
        @endforeach
        @endforeach
        @endif

        @if($seriess->count() > 0)
        <div class="row header-row mt-3 mb-3">
            <div class="col-xxl-12 col-xl-12 col-lg-4 mb-xxl-0">
                <h3 class="view-title row-title">View by Series <span class="count-drp remove-slick">({!! $seriess->count() !!})</span></h3>
            </div>
        </div>
        <div class="row on-demand-cards-row ondemand-cards-slider">
            @foreach($seriess as $series)
            <div class="col-xxl-3 col-xl-3 col-lg-4 col-sm-6 mb-3">
                <div class="odl-card readMoreContent">
                    @if(false && $series->is_registration_required && !auth('web')->check())
                    <a href="javascript:void(0)" class="odl-card-img" onclick="javascript:$('#register_login_popup').modal('show');">
                        <img src="{!! $series->avatar_url !!}" class="img-fluid" alt="{!! $series->image_alt !!}" />
                        <div class="overlay_lock"><i class="lock-icon"></i></div>
                    </a>
                    <a href="javascript:void(0)" onclick="javascript:$('#register_login_popup').modal('show');"><h4>{!! $series->name !!}</h4></a>
                    @else
                    <a href="{!! $series->page_url !!}" class="odl-card-img">
                        <img src="{!! $series->avatar_url !!}" class="img-fluid" alt="{!! $series->image_alt !!}" />
                    </a>
                    <a href="{!! $series->page_url !!}"><h4>{!! $series->name !!}</h4></a>
                    @endif
                    <p>{!! displayShortDescriptionInCmsBox($series->description,200,"moredetails_byseries_".$series->id) !!}</p>
                </div>
            </div>
            @endforeach
        </div>
        @foreach($seriess as $series)
        {!! getMoreDetailPopupBlock($series,"moredetails_byseries_".$series->id) !!}
        @endforeach
        @endif
    </div>
    <!--// END LEFT VIEW //-->
</div>
@includeIf('front.includes.register_login_popup')
@endsection

@section('js')
<script src="{!! asset('assets/frontend/js/pages/auth.js') !!}?v=2"></script>
<script>
$(document).ready(function (e) {
    if($(".invalid-feedback").length > 0)
    {
        $('#register_login_popup').modal('show');
    }
    initSlider();

    if(segments[2] == "weekly-messages" || segments[2] == "mecks-daily-devos") {
        console.log(segments);
        $(".count-drp:first").click();
    }
})
var slickOptions = {
    dots: false,
    infinite: false,
    speed: 300,
    slidesToShow: 4,
    slidesToScroll: 1,
    responsive: [
        {
            breakpoint: 1200,
            settings: {
                slidesToShow: 3,
                slidesToScroll: 1,

            }
        },
        {
            breakpoint: 999,
            settings: {
                slidesToShow: 2,
                slidesToScroll: 1
            }
        },
        {
            breakpoint: 480,
            settings: {
                slidesToShow: 1,
                slidesToScroll: 1
            }
        }
        // You can unslick at a given breakpoint now by adding:
        // settings: "unslick"
        // instead of a settings object
    ]
};
function initSlider()
{
    $('.ondemand-cards-slider').slick(slickOptions);
}
$(document).on('click', '.remove-slick', function () {
    var nextSlider = $(this).closest(".header-row").nextAll(".ondemand-cards-slider").first();
    // console.log(nextSlider); // Logs the next ondemand-cards-slider div
    nextSlider.slick('unslick');
    $(this).removeClass('remove-slick');
    $(this).addClass('add-slick');
})
$(document).on('click', '.add-slick', function () {
    var nextSlider = $(this).closest(".header-row").nextAll(".ondemand-cards-slider").first();
    // console.log(nextSlider);
    nextSlider.slick(slickOptions);
    $(this).removeClass('add-slick');
    $(this).addClass('remove-slick');
})
</script>
@stop