@extends(env('APP_NAME').'.layout')

@push('head')
	{!! resource('main/asset/main.css') !!}
    <script type="text/javascript" src="/js/edmuhak/programs/submain.js"></script>
    <script type="text/javascript" src="/js/edmuhak/programs/autocomplete.js"></script>
@endpush

@section('content')
    <div class="submain-programs">
        <!-- 페이지타이틀 -->
        <div class="programs-top-banner">
            <div class="max-width">
                <h1 class="programs-title">
                    @if($country == '1')
                        미국
                    @elseif($country == '2')
                        영국
                    @elseif($country == '3')
                        캐나다
                    @elseif($country == '4')
                        호주
                    @elseif($country == '5')
                        필리핀
                    @elseif($country == '6')
                        아일랜드
                    @elseif($country == '7')
                        뉴질랜드
                    @elseif($country == '8')
                        몰타
                    @elseif($country == '9')
                        네덜란드
                    @elseif($country == '10')
                        스위스
                    @elseif($country == '11')
                        싱가포르
                    @else
                    @endif

                    @if($type == '1')
                        어학연수
                    @elseif($type == '2')
                        해외대학
                    @elseif($type == '3')
                        조기유학
                    @elseif($type == '5')
                        아트유학
                    @else
                    @endif

                    @if($country == '' && $type == '')
                        나에게 맞는
                    @endif

                    프로그램 찾기
                </h1>
                <p class="programs-text">국내 1위 edm유학센터가 엄선한 <br>최고의 프로그램들을 소개합니다.</p>
            </div>
        </div>

        <!-- 상품검색필터 -->
        <div class="area-programs-condition" id="programsSearchWrap">
            <div class="max-width">
                <!-- types -->
                <div class="apc-category">
                    {{-- <div class="apc-cate-list">
                        <a href="/programs" class="@active(!$type)">모든프로그램</a>
                        @foreach ($types as $val)
                            <a href="/programs/{{ $val['code'] }}" class="@active($val['active'])">{{ $val['name'] }}</a>
                        @endforeach
                    </div> --}}

                    <div class="categoryWrap">
                        <a href="#" onclick="submitForm()" class="{{ $type == '' ? 'active' : '' }}">전체</a>
                        <a href="#" onclick="submitForm('1')" class="{{ $type == '1' ? 'active' : '' }}">어학연수</a>
                        <a href="#" onclick="submitForm('2')" class="{{ $type == '2' ? 'active' : '' }}">해외대학</a>
                        <a href="#" onclick="submitForm('3')" class="{{ $type == '3' ? 'active' : '' }}">조기유학</a>
                        <a href="#" onclick="submitForm('5')" class="{{ $type == '5' ? 'active' : '' }}">아트유학</a>
                    </div>

                    <form action="/programs" method="GET" id="select-form">
                        {{-- <input type="text" name="type" id="type" value="{{ $type }}"> --}}
                        <input type="hidden" name="country" id="country" value="{{ request()->country }}">
                        <input type="hidden" name="theme" id="theme" value="{{ request()->theme }}">
                    </form>
                    <div class="filterWrap_pc">
                        <div>
                            <select onChange="setVal(this, 'country', this.value);">
                                <option value="">모든 국가</option>
                                @foreach ($countries as $val)
                                <option value="{{ $val['id'] }}" @if ($val['id'] == request()->country ) selected @endif>{{ $val['name'] }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <select onChange="setVal(this, 'theme', this.value);">
                                <option value="">모든 테마</option>
                                @foreach ($themes as $val)
                                <option value="{{ $val['id'] }}" @if ($val['id'] == request()->theme) selected @endif>{{ $val['name'] }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="filterWrap_mo @active(!empty(request()->country))">
                        <button type="button" class="closeBtn">닫기<span></span><span></span></button>
                        <div class="filterContents">
                            <div class="country">
                                <p>국가</p>
                                <div class="list">
                                    @php
                                        $selected_country = '국가';
                                        $selected_theme = '테마';
                                    @endphp
                                    @foreach ($countries as $val)
                                    @php
                                        if (request()->country == $val['id']) $selected_country = $val['name'];
                                    @endphp
                                    <button type="button" class="@active(request()->country == $val['id'])" onClick="setVal(this, 'country', {{ $val['id'] }});">{{ $val['name'] }}</button>
                                    @endforeach
                                </div>
                            </div>
                            <div class="theme">
                                <p>테마</p>
                                <div class="list">
                                    @foreach ($themes as $val)
                                    @php
                                        if (request()->theme == $val['id']) $selected_theme = $val['name'];
                                    @endphp
                                    <button type="button" class="@active(request()->theme == $val['id'])" onClick="setVal(this, 'theme', {{ $val['id'] }});">{{ $val['name'] }}</button>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                        <div class="completeBtn">선택완료(총 <span>{{ number_format($programs['count']) }}</span>개)</div>
                    </div>
                </div>
                <div class="fake_button_mo">
                    <div class="country" style="background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/common/programsSearch_country.svg');">{{ $selected_country }}</div>
                    <div class="theme" style="background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/common/programsSearch_theme.svg');">{{ $selected_theme }}</div>
                </div>
            </div>
        </div>

        <!-- Content -->
        <div class="area-pages-content max-width" id="program-search">
            @if (isAdmin and $user->level == 255)
                <div class="area-admin">
                    <a href="/program-manager" target="_blank" class="button point">프로그램 관리</a>
                </div>
            @endif

            <div class="area-programs-wrap">
                <div class="result-info">
                    <h2 class="ri-tit">총 <span id="total-count">{{ number_format($programs['count']) }}</span>개의 결과</h2>
                </div>
            </div>
            {{-- 프로그램 리스트가 뿌려지는 부분 --}}
            <div class="area-programs-wrap">
                <div class="result-list">
                    @include('edmuhak.component.programs.submain-programs', [
                        'programs' => $programs
                    ])
                </div>
            </div>
        </div>
    </div>

    <script>
        // title tag 변경
        let programsTitle = document.querySelector('.programs-title').innerText;
        document.title = programsTitle;

        const selectForm = document.getElementById('select-form');
        const programTypeSelect = document.getElementById('type');
        const countrySelect = document.getElementById('country');
        const themeSelect = document.getElementById('theme');

        function submitForm(typeValue) {
            let actionUrl = '/programs';

            switch(typeValue) {
                case '1':
                    actionUrl = '/programs-language-abroad';
                    break;
                case '2':
                    actionUrl = '/programs-university-abroad';
                    break;
                case '3':
                    actionUrl = '/programs-junior-abroad';
                    break;
                case '5':
                    actionUrl = '/programs-art-uhak';
                    break;
                default:
                    actionUrl = '/programs';
            }

            selectForm.action = actionUrl;
            // programTypeSelect.value = typeValue || '';

            // $('#type').val('');
            $('#country').val('');
            $('#theme').val('');

            selectForm.submit();
        }

        function setVal(obj, cat, val) {
            // 현재 선택된 버튼
            var $currentButton = $(obj);

            // 선택된 카테고리의 모든 버튼
            var $buttons = $currentButton.closest('.list').find('button');

            // 선택된 버튼이 이미 활성화된 상태인지 체크
            var isActive = $currentButton.hasClass('active');

            // 모든 버튼의 활성화 상태 해제
            $buttons.removeClass('active');

            // 선택된 버튼이 이미 활성화된 상태면 값 제거 후 반환
            if (isActive) {
                if (cat == 'country') $('#country').val('');
                if (cat == 'theme') $('#theme').val('');
                return;
            }

            // 선택된 버튼에만 활성화 클래스 추가
            $currentButton.addClass('active');

            // 값 설정
            if (cat == 'country') $('#country').val(val);
            if (cat == 'theme') $('#theme').val(val);

            // 둘 다 선택했을 때만 submit을 할 거면 하단 주석 사용.
            //if ($('#country').val() != '' && $('#theme').val() != '')

            const db = @json($db);
            selectForm.action = '/' + db;
            selectForm.submit();
        }

        $(function(){
            $('.fake_button_mo').on('click',function(){
                $('.filterWrap_mo').addClass('active');
                $('html,body').css({
                    'overflow':'hidden'
                });
            });

            $('.filterWrap_mo .closeBtn, .filterWrap_mo .completeBtn').on('click',function(){
                $('.filterWrap_mo').removeClass('active');
                $('html,body').css({
                    'overflow':'auto'
                });
            });
        });

    </script>
@endsection