@extends('.frontend.default')

@section('content')
    <div id="event_for_teacher_index_page" class="container">

        <div id="event_for_teacher_index_page_header" style="margin-top: 87px;">
            <div class="w-100 text-center">
                <div class="event_tag text-center text-color-base-1 background-primary border-radius-15 cursor-pointer bold"
                     data-tag-id="">
                    全部
                </div>
                @foreach(App\Models\Event\ForTeacher\EventTags::orderBy('sort')->get() as $eventTag)
                    <div class="event_tag text-center text-color-base-1 border-radius-15 cursor-pointer bold"
                         data-tag-id="{{$eventTag->id}}">
                        {{$eventTag->name}}
                    </div>
                @endforeach
            </div>
        </div>

        <div id="event_for_teacher_index_page_body" style=";margin-top: 45px">
            <div class="row" style="margin-bottom: 30px">
                <div class="col-12">
                    <div class="sort_select text-right m-0" style="margin-bottom: 30px">
                        <select id="event_for_teacher_index_page_body_sort_selector" class="form-select background-base-color-5">
                            <option value="from_new_to_old" selected="">按新至舊排序</option>
                            <option value="from_old_to_new">按舊至新排序</option>
                        </select>
                    </div>
                </div>
            </div>
            
            <h1 style="margin-bottom: 40px;font-size: 30px">最新支援</h1>

            <h1 id="event_for_teacher_index_page_body_teacher_event_list_null_message" style="display:none">
                未找到相關活動
            </h1>

            <div class="text-center">
                <i id="event_for_teacher_index_page_body_teacher_event_list_spanner" class="fa fa-spinner fa-pulse fa-2x laoading-icon" style="display:none"></i>
            </div>

            <div id="event_for_teacher_index_page_body_teacher_event_list" class="row">
            </div>

            <div class="text-center" style="margin-bottom: 200px">
                <div id="event_for_teacher_index_page_body_teacher_event_more" class="more_btn" style="display:none">
                    <a class="text-color-base-5" style="">更多</a>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('pagecss')
    <style>
      .event_tag {
        margin-right: 45px;
        cursor: pointer;
        display: inline-block;
        padding: 17px 50px;
        margin-bottom: 15px;
      }

      .event_tag:hover {
        opacity: 0.8;
      }

      #event_for_teacher_index_page_body_teacher_event_list{
        margin-bottom: 200px
      }
    </style>
@endsection

@section('pagescript')
    <script>
        var event_for_teacher_index_page = {
            'ready': function () {

                if(!event_for_teacher_index_page.current_tag_id){
                    event_for_teacher_index_page.current_tag_id = $('.event_tag:first-child').data('tag-id');
                    event_for_teacher_index_page.update_next_page_url();
                }

                event_for_teacher_index_page.getEvent();

                $('.event_tag').on('click',function(){
                    $('.event_tag').removeClass('background-primary');
                    $(this).addClass('background-primary');

                    event_for_teacher_index_page.current_tag_id = $(this).data('tag-id');
                    event_for_teacher_index_page.update_next_page_url();

                    $('#event_for_teacher_index_page_body_teacher_event_list').html('');

                    event_for_teacher_index_page.getEvent();
                });

                $('#event_for_teacher_index_page_body_sort_selector').change(function(){
                    event_for_teacher_index_page.current_sort_by = $(this).val();
                    event_for_teacher_index_page.update_next_page_url();

                    $('#event_for_teacher_index_page_body_teacher_event_list').html('');

                    event_for_teacher_index_page.getEvent();
                });

                $('#event_for_teacher_index_page_body_teacher_event_more').click(function(){
                    event_for_teacher_index_page.getEvent();
                });
            },
            'base_next_page_url': "{{route('.api.event.for_teacher.getEventAsHtml')}}",
            'next_page_url': "{{route('.api.event.for_teacher.getEventAsHtml')}}",
            'current_tag_id':'',
            'current_sort_by':'',
            'getEvent': function(){
                $('#event_for_teacher_index_page_body_teacher_event_list_spanner').show();
                $('#event_for_teacher_index_page_body_teacher_event_list_null_message').hide();

                let teacher_event_list = $('#event_for_teacher_index_page_body_teacher_event_list');

                $.get(event_for_teacher_index_page.next_page_url, function (data) {
                    if (data['status'] === 'success' && data['html_array'].length > 0) {
                        data['html_array'].forEach(function (html) {
                            html = '<div class="col-12 col-md-6 col-lg-4" style="margin-top: 30px">' + html + '</div>';
                            teacher_event_list.append(html)
                        });

                        if(data['next_page_url']){
                            event_for_teacher_index_page.next_page_url = data['next_page_url'];
                        }else{
                            event_for_teacher_index_page.next_page_url = event_for_teacher_index_page.base_next_page_url;

                            $('#event_for_teacher_index_page_body_teacher_event_more').hide();
                        }
                    }else{
                        $('#event_for_teacher_index_page_body_teacher_event_list_null_message').show();
                    }

                    $('#event_for_teacher_index_page_body_teacher_event_list_spanner').hide();
                });
            },
            'update_next_page_url': function(){
                //update current url but no reload
                let url = new URL(window.location.href);
                let base_url = url.origin + url.pathname;
                window.history.replaceState(null, document.title, event_for_teacher_index_page.add_query_to_url(base_url));

                event_for_teacher_index_page.next_page_url = event_for_teacher_index_page.add_query_to_url(event_for_teacher_index_page.base_next_page_url);
            },
            'add_query_to_url': function (url_string) {

                let url = new URL(url_string);
                if (event_for_teacher_index_page.current_tag_id) {
                    url.searchParams.set("tag_id", event_for_teacher_index_page.current_tag_id);
                }

                if (event_for_teacher_index_page.current_sort_by) {
                    url.searchParams.set("sort_by", event_for_teacher_index_page.current_sort_by);
                }

                return url.toString();
            }
        };

        $(document).ready(function () {
            event_for_teacher_index_page.ready();
        });
    </script>
@endsection