@extends('.frontend.default')

@section('content')
    <div id="education_resource_page">
        <div id="education_resource_page_banner"></div>

        <div class="container">
            <form id="education_resource_page_form" style="margin-top: -90px;z-index:2">
                <div class="card background-base-color-5 border-radius-15" style="padding: 30px 25px">
                    <div>
                        <div class="d-inline-block" style="width: 79%;vertical-align: bottom">
                            <input type="text" id="education_resource_page_selector_keyword"
                                   class="form-control border-input-1-base-2 background-base-color-5" placeholder="有關教學資源的關鍵字" name="keyword"/>
                        </div>
                        <div class="d-inline-block text-right" style="width: 20%">
                            <div id="education_resource_page_filter_submit" class="btn btn-primary border-radius-10 w-75 h-100 py-3">
                                <i class="fas fa-search d-inline-block mr-1"></i>
                                <div class="d-inline-block"> 搜尋資源</div>
                            </div>
                        </div>
                    </div>

                    <div style="margin-top: 30px;">
                        <div style="margin-bottom:15px">
                            <div id="education_resource_page_filter_show" class="d-inline mr-2">

                            </div>
                            <div id="education_resource_page_filter_clear" class="d-inline text-primary cursor-pointer">
                                <i class="far fa-times-circle mr-1"></i>重新搜尋
                            </div>
                        </div>
                        <div class="text-center">
                            <div id="education_resource_page_filter_open" class="cursor-pointer" data-status="false">
                                <div class="text-primary text-size-l"><i class="fas fa-angle-down mr-1"></i>進階搜尋</div>
                            </div>
                        </div>
                    </div>

                    <div id="education_resource_page_selectors" style="margin-top: 30px;display:none">
                        <div class="mb-4">
                            <div class="d-inline-block" style="width: 8%">資源對象：</div>
                            <div class="d-inline-block" style="width: 91%">
                                <select class="select2 form-control" name="education_resource_target[]" multiple="multiple">
                                    @foreach($resource_targets as $resource_target)
                                        <option value="{{$resource_target->id}}">{{$resource_target->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="mb-4">
                            <div class="d-inline-block" style="width: 8%">學習範疇：</div>
                            <div class="d-inline-block" style="width: 91%">
                                <select class="select2 form-control" name="education_resource_class[]" multiple="multiple">
                                    @foreach($resource_classes as $resource_class)
                                        <option value="{{$resource_class->id}}">{{$resource_class->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="mb-4">
                            <div class="d-inline-block" style="width: 8%">資源附件：</div>
                            <div class="d-inline-block" style="width: 91%">
                                <select class="select2 form-control" name="education_resource_attachment_type[]" multiple="multiple">
                                    @foreach($attachment_types as $attachment_type)
                                        <option value="{{$attachment_type->id}}">{{$attachment_type->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div>
                            <div class="d-inline-block" style="width: 8%">提供單位：</div>
                            <div class="d-inline-block" style="width: 91%">
                                @include('frontend.template.unit.list',[
                                                    'id'=>'education_resource_unit_id',
                                                    'class'=>'education_resource_unit_id select2 text-center',
                                                    'first_option' => false,
                                                    'label' => '所有單位',
                                                    'is_multiple' => true
                                                    ])
                            </div>
                        </div>
                    </div>
                </div>
            </form>

            <div style="margin-top:90px;margin-bottom: 50px">
                <h1 id="education_resource_page_result_title" class="d-inline-block static-title" style="width: 49%">最新資源</h1>
                <div class="sort_select m-0 d-inline-block">
                    <select id="education_resource_page_sort_selector" class="form-select background-base-color-5">
                        <option value="desc" selected="">按新至舊排序</option>
                        <option value="asc">按舊至新排序</option>
                    </select>
                </div>
            </div>

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

            <div id="education_resource_null_message" style="display:none">
                <h1>未找到相關教學資源</h1>
            </div>

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

                <i id="education_resource_more_btn_loading" class="fa fa-spinner fa-pulse fa-2x" style="display:none"></i>
            </div>

        </div>
        <template id="education_resource_page_filter_show_template">
            <div class="d-inline-block mr-2 background-secondary p-1 border-radius-5 cursor-pointer education_resource_page_filter_label">
                <i class="far fa-times-circle mr-1"></i>
                <div class="d-inline label_text">

                </div>
            </div>
        </template>
    </div>
@endsection

@section('pagescript')
    <script>
        var education_resource_page = {
            'ready': function () {
                $('.select2').select2({
                    allowClear: true,
                    width: '100%'
                });

                if (window.location.href.split('?').length > 1) {
                    let options = window.location.href.split('?')[1].split('&')
                    options.forEach(function (option) {
                        let data = option.split('=');

                        let selector = $('#education_resource_page_form').find("[name='" + data[0].replace("%5B%5D", '[]') + "']")

                        if (selector.is('input:text')) {
                            selector.val(data[1]);
                        }

                        if (selector.is('select')) {
                            selector.find('option[value="' + data[1] + '"]').prop('selected', true);
                            selector.trigger('change');
                        }


                    })
                    
                    education_resource_page.updateFilterLabel();
                    education_resource_page.submitForm();
                } else {
                    education_resource_page.getEducationResource();
                }


                $('#education_resource_page_filter_submit').click(function () {
                    education_resource_page.submitForm();
                });

                $('.more_btn').click(function () {
                    education_resource_page.getEducationResource();
                });

                $('#education_resource_page_filter_clear').click(function () {
                    $('.select2').val(null).trigger('change');

                    $('#education_resource_page_selector_keyword').val(null);

                    $('#education_resource_page_filter_show').html('');
                });

                $('#education_resource_page_filter_open').click(function () {
                    if ($(this).data('status')) {
                        $(this).data('status', false);

                        $('#education_resource_page_selectors').hide();
                        $('#education_resource_page_filter_show').show();
                    } else {
                        $(this).data('status', true);

                        $('#education_resource_page_selectors').show();
                        $('#education_resource_page_filter_show').hide();
                    }
                });

                $('#education_resource_page_filter_show').on("click", '.education_resource_page_filter_label', function () {
                    let selector = $('#education_resource_page_form').find("[name='" + $(this).data('selector') + "']")

                    let array = selector.val();
                    let index = array.indexOf($(this).data('value'));
                    if (index !== -1) {
                        array.splice(index, 1);
                    }
                    selector.val(array).trigger('change');
                })

                $('.select2').change(function () {
                    education_resource_page.updateFilterLabel();
                });

                $('#education_resource_page_sort_selector').change(function () {
                    let url = new URL(education_resource_page.base_next_page_url);
                    url.searchParams.set("order_by", $(this).val());
                    education_resource_page.base_next_page_url = url.toString();

                    education_resource_page.submitForm();
                });
            },
            'base_next_page_url': "{{route('.api.education_resource.paginate')}}",
            'next_page_url': "{{route('.api.education_resource.paginate')}}",
            'getEducationResource': function () {
                $('#education_resource_more').hide();
                $('#education_resource_null_message').hide();
                $('#education_resource_more_btn_loading').show();

                //update current url but no reload
                window.history.replaceState(null, document.title, window.location.href.split('?')[0] + (education_resource_page.next_page_url.split('?').length > 1 ? "?" + education_resource_page.next_page_url.split('?')[1] : ''));
                $.get(education_resource_page.next_page_url, function (data) {
                    if (data['status'] === 'success' && data['html_array'].length > 0) {
                        data['html_array'].forEach(function (html) {
                            $('#education_resource_page_list').append('<div class="col-12 col-sm-6 col-lg-4">' + html + '</div>')
                        })

                        if (data['next_page_url'] != null) {
                            education_resource_page.next_page_url = data['next_page_url'];

                            $('#education_resource_more').show();
                        }
                    } else {
                        $('#education_resource_null_message').show();
                    }

                    $('#education_resource_more_btn_loading').hide();
                })
            },
            'submitForm': function () {
                let page_form = $('#education_resource_page_form').serializeArray();
                let url = new URL(education_resource_page.base_next_page_url);
                $.each(page_form, function(index, field) {
                    url.searchParams.append(field.name, field.value);
                });
                education_resource_page.next_page_url = url.toString();

                $('#education_resource_page_list').html('');
                education_resource_page.getEducationResource();

                $('#education_resource_page_filter_open').data('status', 'true');
                $('#education_resource_page_filter_open').click();
                $('#education_resource_page_result_title').html('搜尋結果');
            },
            'updateFilterLabel': function () {
                let form_array = $('#education_resource_page_form').serializeArray();

                let template = $('#education_resource_page_filter_show_template')[0];

                $('#education_resource_page_filter_show').html('');
                form_array.forEach(function (form_item) {
                    if (form_item.value && form_item.value != 'null') {
                        let clone_template = template.content.cloneNode(true);
                        let form_item_label = $('#education_resource_page_form').find("[name='" + form_item.name + "'] option[value='" + form_item.value + "']").text()

                        $(clone_template).find('.label_text').text(form_item_label);

                        $(clone_template).find('.education_resource_page_filter_label').data('selector', form_item.name);
                        $(clone_template).find('.education_resource_page_filter_label').data('value', form_item.value);

                        $('#education_resource_page_filter_show').append(clone_template);
                    }
                });
            }
        };
        $(document).ready(function () {
            education_resource_page.ready()
        });
    </script>
@endsection

@section('pagecss')
    <style>
      #education_resource_page_banner {
        background-image: url("{{asset('/images/education_resource_banner-01.jpg')}}");
        width: 100%;
        height: 300px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
      }

      #education_resource_page_selector_keyword {
        border-top: none !important;
        border-left: none !important;
        border-right: none !important;
        border-radius: 0 !important;
        padding-left: 0;
      }

      .select2-results {
        padding: 0;
      }
    </style>
@endsection