@extends('layouts.default', [
    'activatedNavItem' => 'PROGRAMS',
])

@push('head')
    <link rel="stylesheet" type="text/css" href="/css/programs/programs.css?ver=20200715"/>
    <script type="text/javascript" src="/js/programs/submain.js"></script>
    <script type="text/javascript" src="/js/programs/autocomplete.js"></script>
@endpush

@section('content')
    <div class="container submain-programs">
        <!-- 페이지타이틀 -->
        <div class="area-pages-top">
            @php
                $navVerified = false;
            @endphp
            @foreach ($types as $type)
                @if ($type["active"])
                    @php
                        $navVerified = true;
                    @endphp
                    <h1 class="page-title">
                        {{ $type["name"] }} 프로그램 찾기
                    </h1>
                @endif
            @endforeach        
            @if (!$navVerified)
                <h1 class="page-title">나에게 맞는 프로그램 찾기</h1>
            @endif
        </div>

        <!-- Content -->
        <div class="area-pages-content" id="program-search">
            <div class="flex-wrap">
                @if($isAdmin)
                    <div class="area-admin">
                        <a href="{{ route('program-manager.index') }}" target="_blank" class="button point">프로그램 관리</a>
                    </div>
                @endif
                <!-- 상품검색필터 -->
                <div class="area-programs-condition">
                    <!-- search -->
                    <div class="apc-search">
                        <h2 class="hidden"><label for="apc-search">유학프로그램 검색</label></h2>
                        <form method="GET" action="{{ route('programs.submain') }}">
                            <input type="text" id="apc-search" name="search" value="{{ $search }}" placeholder="유학프로그램 검색"/>
                            <button type="submit" class="btn-search">검색</button>
                        </form>
                    </div>
                    <!-- types -->
                    <div class="apc-category">
                        <div class="apc-title-wrap">
                            <h2 class="apc-title">과정별 프로그램</h2>
                        </div>
                        <div class="apc-cate-list">
                            <a href="{{ route('programs.submain') }}" class="@active(!$type)">모든프로그램</a>
                            @foreach ($types as $val)
                                <a href="{{ route('programs.submain.'.$val['code']) }}" class="@active($val['active'])">{{ $val['name'] }}</a>
                            @endforeach
                        </div>
                    </div>
                    <!-- filters -->
                    <div class="apc-filter">
                        <div class="mo-filter-close"><i class="ui-layout-close">필터닫기</i></div>
                        <div class="apc-title-wrap">
                            <h2 class="apc-title">필터</h2>
                            <p class="mo-filter-num m-filter-count">({{ $filter['count'] }})</p>
                            <span class="mo-clear-all">모든필터제거</span>
                        </div>
                        <div class="filter-item country @display(count($filter['countries']))">
                            <p class="fi-tit">국가</p>
                            <div class="chk-custom-wrap">
                                @foreach($filter['countries'] as $val)
                                    <span class="filter-item-country">
                                        <input type="checkbox" id="filter-item-country-{{ $val['id'] }}" name="country" value="{{ $val['id'] }}" data-themes="{{ implode(',', $val['theme_id']) }}" @checked($val['active'])>
                                        <label for="filter-item-country-{{ $val['id'] }}">{{ $val['name'] }}</label>
                                    </span>
                                @endforeach
                            </div>
                        </div>
                        <div class="filter-item theme @display($filter['count'] && count($filter['themes']))">
                            <p class="fi-tit">테마</p>
                            <div class="chk-custom-wrap">
                                @foreach($filter['themes'] as $val)
                                    <span class="filter-item-theme">
                                        <input type="checkbox" id="filter-item-theme-{{ $val['id'] }}" name="theme" value="{{ $val['id'] }}" @checked($val['active'])>
                                        <label for="filter-item-theme-{{ $val['id'] }}">{{ $val['name'] }}</label>
                                    </span>
                                @endforeach
                            </div>
                        </div>
                        <div class="filter-close-btn">
                            <button class="button color wide">닫기</button>
                        </div>
                    </div>
                    <div class="apc-filter-dim"></div>
                </div>

                <div class="area-programs-wrap">
                    <div class="mo-filter-wrap">
                        <button class="mo-filter-open"><i class="ui-kit-filter"></i> 필터 <span class="num m-filter-count">({{ $filter['count'] }})</span></button>
                    </div>
                    <div class="result-info">
                        <h2 class="ri-tit">총 <span id="total-count">{{ number_format($programs['count']) }}</span>개의 결과</h2>
                        <div class="filter-area selected-tag-wrap">
{{--                            {{$filter['countries']}}--}}
                            @foreach ($filter['countries'] as $val)
                                <span class="tag @display($val['active'])" data-filter="country" data-filter-value="{{ $val['id'] }}">{{ $val['name'] }}<i class="ui-kit-x">삭제</i></span>
                            @endforeach
                            @foreach ($filter['themes'] as $val)
                                <span class="tag @display($val['active'])" data-filter="theme" data-filter-value="{{ $val['id'] }}">{{ $val['name'] }}<i class="ui-kit-x">삭제</i></span>
                            @endforeach
                            <span class="tag clear-all @display($filter['count'])">모든필터제거</span>
                        </div>
                        <div class="view-array">
                            <select class="choose" name="sort">
                                <option value="latest" @selected($sort, 'latest')>최신순</option>
                                <option value="read" @selected($sort, 'read')>조회순</option>
                                <option value="alphabet" @selected($sort, 'alphabet')>가나다순</option>
                            </select>
                        </div>
                    </div>
                </div>
                {{-- 프로그램 리스트가 뿌려지는 부분 --}}
                <div class="area-programs-wrap">
                    <div class="result-list">
                        @include('programs.submain-programs', [
                            'programs' => $programs
                        ])
                    </div>
                </div>
                {{-----------------------------}}
            </div>

            <div class="fix-wrap program-hit">
                <h2 class="hit-title">edm유학센터 인기프로그램</h2>
                <div class="area-pg-list full">
                    <div class="swiper-wrapper">
                        @foreach ($popularPrograms as $program)
                            <div class="swiper-slide pg-item">
                                @include('programs.item', ['program' => $program])
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">

        $(function() {

            var loadPrograms = function(url) {

                var container = $('.result-list').addClass('loading');
                var countries = ProgramCtrl.getActiveItems('country');
                var themes = ProgramCtrl.getActiveItems('theme');

                ProgramCtrl.setFilterTags();
                ProgramCtrl.setFilterUrl(url);

                return ProgramCtrl.loadPrograms(url).done(function(response) {
                    if (response.data) {
                        $('#total-count').html(response.data.count);
                        $('.m-filter-count').html('(' + (countries.length + themes.length) + ')');
                        container.html(response.data.view);
                        setProgramPagination();
                        pgItemTitleRes();
                    }
                    container.removeClass('loading');
                }).fail(function(jqXHR, textStatus) {
                    if (textStatus != 'abort') {
                        container.removeClass('loading');
                    }
                });
            };

            var setProgramPagination = function() {
                $('.result-list .area-pagination a').click(function() {
                    var href = $(this).attr('href');
                    if (href !== '#') {
                        loadPrograms(href).done(function() {
                            window.scrollTo(0, $('.area-pages-top').offset().top);
                        });
                    }
                    return false;
                });
            };

            setProgramPagination();

            // Init
            ProgramCtrl.setContainers({
                country: $('.filter-item .filter-item-country'),
                theme: $('.filter-item .filter-item-theme'),
                sort: $('.result-info select[name="sort"]'),
                filterTag: $('.result-info .filter-area .tag')
            });

            // Country filter
            $('.filter-item input[name="country"]').click(function() { // 국가를 눌러서 선택 할 때

                // 단일 선택
                $('.filter-item input[name="country"]').not(this).prop('checked', false);

                var countries = ProgramCtrl.getActiveItems('country');
                ProgramCtrl.resetThemes();

                if ($('.filter-item.theme .filter-item-theme:not(.d-none)').length) {
                    $('.filter-item.theme').removeClass('d-none');
                } else {
                    $('.filter-item.theme').addClass('d-none');
                }
                loadPrograms();
            });

            // Theme filter
            $('.filter-item input[name="theme"]').click(function() {
                loadPrograms();
            });

            // Sort
            $('.result-info select[name="sort"]').change(function() {
                loadPrograms();
            });

            // Filter tag
            $('.result-info .filter-area .tag:not(.clear-all)').click(function() {
                var $this = $(this);
                var type = $this.data('filter');

                if (type == 'country') {
                    $('.filter-item.theme').addClass('d-none');
                    ProgramCtrl.getActiveItems('country').filter('[value="' + $this.data('filter-value') + '"]').prop('checked', false);
                    ProgramCtrl.resetThemes();
                } else if (type == 'theme') {
                    ProgramCtrl.getActiveItems('theme').filter('[value="' + $this.data('filter-value') + '"]').prop('checked', false);
                }

                loadPrograms();
            });

            // Filter toggle events
            $('.mo-filter-open').click(function() {
                $('.apc-filter').addClass('open');
            });
            $('.mo-filter-close, .filter-close-btn').click(function() {
                $('.apc-filter').removeClass('open');
            });

            // All filter remove
            $('.result-info .clear-all, .apc-filter .mo-clear-all').click(function() {
                $('.filter-item.theme').addClass('d-none');
                ProgramCtrl.getActiveItems('country').prop('checked', false);
                ProgramCtrl.resetThemes();
                loadPrograms();
            });

            $('#apc-search').autocomplete({
                url: '{{ route('programs.search') }}'
            });

            $('.apc-search form').submit(function() {
                $.ajax({
                    method: 'POST',
                    url: '{{ route('programs.search-log.store') }}',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    data: $(this).serialize()
                });
            });
        });

        new Swiper('.program-hit .area-pg-list', {
            loop: false,
            slidesPerView: 'auto',
            slideClass: 'pg-item',
            speed: 200
        });
    </script>
@endsection