@extends('.frontend.default')
@section('content')
    <div class="container" style="padding-top: 40px">

        <div id="venue_reservation_index">

            <div id="venue_reservation_index_header" class="row" style="padding-bottom: 45px;">
                <div id="venue_reservation_index_search_area" class="col-12">
                    <div class="row justify-content-between">
                        <div class="col-12 col-lg-10" style="padding-top: 30px">
                            <input type="text" class="form-control border-primary" name="keyword" placeholder="輸入場地關鍵字"/>
                        </div>

                        <div class="col-12 col-lg-2 mt-2">
                            <div id="venue_reservation_index_search_area_submit" class="btn btn-primary border-radius-10 w-100 h-100">
                                <i class="fas fa-search d-inline-block mr-1"></i>
                                <div class="d-inline-block"> 搜尋場地</div>
                            </div>
                        </div>
                    </div>

                    <div class="row mt-4">
                        <div class="col-12 col-sm-4 select_box">
                            <select class="select-item" name="active_address" id="venue_reservation_index_search_area_active_address">
                                <option value="">
                                    地區
                                </option>
                                @foreach(\App\Models\VenueReservation\VenueReservation::ACTIVE_ADDRESS_ALL as $option)
                                    <option value="{{$option}}">
                                        {{ __('backpack::venue_reservation.active_address_options.'.$option) }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-12 col-sm-4 select_box">
                            <select class="select-item" name="type" id="venue_reservation_index_search_area_type">
                                <option value="">
                                    類型
                                </option>
                                @foreach(\App\Models\VenueReservation\VenueReservation::TYPE_ALL as $option)
                                    <option value="{{$option}}">
                                        {{ __('venue_reservation/venue_reservation.type.'.$option) }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-12 col-sm-4 select_box">
                            <select class="select-item" name="max_member" id="venue_reservation_index_search_area_max_member">
                                <option value="">
                                    容纳人數
                                </option>
                                @foreach((new \App\Models\VenueReservation\VenueReservation())->getMemberRangeOptions() as $option)
                                <option value="{{implode('-',$option)}}">
                                    {{ trans_choice('venue_reservation/venue_reservation.member_range',$option['to'],['from' => $option['from'], 'to' => $option['to']]) }}
                                </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="text-right text-primary text-right" id="venue_reservation_index_search_area_reset_button" style="">
                        <div class="btn">
                            <i class="far fa-times-circle d-inline-block"></i>
                            <div class="d-inline-block">重新搜尋</div>
                        </div>
                    </div>

                </div>

                <div class="col-12">
                    <h1 id="venue_reservation_index_search_area_result_title" class="static-title" style="vertical-align: -webkit-baseline-middle;vertical-align: center;display: inline-block;">最新場地  </h1>
                </div>
            </div>

            <div id="venue_reservation_index_body">
                <div id="venue_reservation_index_body_venue_reservation_list" class="row"></div>
            </div>

            <h1 id="venue_reservation_index_footer_null_venue_reservation_message"
                style="display:none">
                未找到相關最新場地
            </h1>

            <div id="venue_reservation_index_footer" class="text-center" style="height: 150px">
                <div id="venue_reservation_index_footer_content" class="more_btn text-center">
                    <a class="text-color-base-5">
                        更多
                    </a>
                </div>
                <i id="venue_reservation_index_footer_more_btn_loading" class="fa fa-spinner fa-pulse fa-2x" style="display:none"></i>
            </div>
        </div>
    </div>
@endsection

@section('pagescript')
    <script>
        var venue_reservation_index_page = {
            'ready': function () {
                venue_reservation_index_page.next_venue_reservation_url = venue_reservation_index_page.default_next_venue_reservation_url;

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

                        //form updated
                        let selector = $('#venue_reservation_index_search_area').find("[name='" + data[0].replace("%5B%5D", '[]') + "']");

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

                        if (selector.is('select')) {
                            let target_option = selector.find('option[value="' + data[1] + '"]');
                            target_option.prop('selected', true);
                            selector.find('~.select-styled .select-styled-text').text(target_option.text())
                        }
                    })

                    venue_reservation_index_page.search()
                }else{
                    venue_reservation_index_page.getMore();
                }

                $('#venue_reservation_index_footer .more_btn').click(function () {
                    venue_reservation_index_page.getMore();
                });

                $('#venue_reservation_index_search_area_submit').click(function(){
                    venue_reservation_index_page.search()
                });

                $('#venue_reservation_index_search_area_reset_button').click(function(){
                    venue_reservation_index_page.searchReset();
                });
            },
            'venue_reservation_index_body_venue_reservation_list_name': '#venue_reservation_index_body_venue_reservation_list',
            'default_next_venue_reservation_url': "{{ route('.api.venue_reservation.paginate') }}",
            'next_venue_reservation_url': "",
            'next_venue_reservation_page': 1,
            'searchReset': function(){
                location.href = location.protocol + '//' + location.host + location.pathname
            },
            'search': function(){
                venue_reservation_index_page.next_venue_reservation_page = 1;
                venue_reservation_index_page.next_venue_reservation_url = venue_reservation_index_page.default_next_venue_reservation_url;

                let search_area = $('#venue_reservation_index_search_area');
                let keyword = search_area.find("[name='keyword']").val();
                let active_address = search_area.find("[name='active_address']").val();
                let type = search_area.find("[name='type']").val();
                let max_member = search_area.find("[name='max_member']").val();

                let url = new URL(venue_reservation_index_page.next_venue_reservation_url);
                if(keyword !== ''){
                    url.searchParams.set("keyword", keyword);
                }

                if(active_address !== ''){
                    url.searchParams.set("active_address", active_address);
                }

                if(type !== ''){
                    url.searchParams.set("type", type);
                }

                if(max_member !== ''){
                    url.searchParams.set("max_member", max_member);
                }
                venue_reservation_index_page.next_venue_reservation_url = url.toString();

                venue_reservation_index_page.clearVenueReservations(venue_reservation_index_page.venue_reservation_index_body_venue_reservation_list_name)
                $('#venue_reservation_index_search_area_result_title').html('搜尋結果');
                venue_reservation_index_page.getMore()
            },
            'getMore': function () {
                $('#venue_reservation_index_footer .more_btn').hide();
                $('#venue_reservation_index_footer_more_btn_loading').show();
                $('#venue_reservation_index_footer_null_venue_reservation_message').hide();

                //update current url but no reload
                window.history.replaceState(null, document.title, window.location.href.split('?')[0] + (venue_reservation_index_page.next_venue_reservation_url.split('?').length > 1 ? "?" + venue_reservation_index_page.next_venue_reservation_url.split('?')[1] : ''));
                $.get(venue_reservation_index_page.next_venue_reservation_url, function (data) {

                    setTimeout(500);

                    if (!data['html_array'] || data['html_array'].length == 0) {
                        $('#venue_reservation_index_footer_null_venue_reservation_message').show();
                        $('#venue_reservation_index_footer_more_btn_loading').hide();
                        return;
                    }

                    data['html_array'].forEach(function (html) {
                        venue_reservation_index_page.addVenueReservations(venue_reservation_index_page.venue_reservation_index_body_venue_reservation_list_name, html)
                    });

                    if (data['next_page'] != 0) {
                        let url = new URL(venue_reservation_index_page.next_venue_reservation_url);
                        url.searchParams.set("page", data['next_page']);
                        venue_reservation_index_page.next_venue_reservation_url = url.toString();
                        venue_reservation_index_page.next_venue_reservation_page = data['next_page'];

                        $('#venue_reservation_index_footer .more_btn').show();
                        $('#venue_reservation_index_footer_more_btn_loading').hide();

                    } else {
                        $('#venue_reservation_index_footer .more_btn').hide();
                        $('#venue_reservation_index_footer_more_btn_loading').hide();
                    }
                })
            },
            'addVenueReservations': function (target_name, venue_reservation_html) {
                let target = $(target_name);

                venue_reservation_html = '<div class="col-12 col-sm-6 col-lg-4 mb-3"">' + venue_reservation_html + '</div>';
                target.append(venue_reservation_html)
            },
            'clearVenueReservations': function(target_name){
                let target = $(target_name);
                target.html('');
            }
        };

        $(document).ready(function () {
            venue_reservation_index_page.ready();
        });
    </script>
@endsection
@section('pagecss')
    <style>
      #venue_reservation_index_search_area input {
        border-top: none !important;
        border-left: none !important;
        border-right: none !important;
        border-radius: 0 !important;

        padding-left: 0;
      }

      #venue_reservation_index_search_area_submit {
        height: 45px;
        line-height: 45px;
      }
    </style>
@endsection