@extends('layouts.app')


@section('content')
    <style>
        .footer {
            display:none;
        }
    </style>
    @include('script.googleMap')
    <!-- 검색 스크립트 -->
    @include('script/searchScript')


    <!--파라미터 가져오기-->
    @include('script/getParameter')

    <!-- 초기화 스크립트 -->
    <script>
        searchParam.page_size = 3;

        $(document).ready(function() {
            // detail 로 들어올 경우
            var searchKeyword = getUrlParameter('keyword');
            if ( getUrlParameter('detail') == 'yes' ) {
                $("#detailOption").show();
            }
            // 검색 키워드가 넘어왔을 경우
            if ( searchKeyword != '' && searchKeyword != undefined ) {
                $("#searchKeyword").val(searchKeyword);
                $('#btnSearch').trigger('click');
            }
        });
    </script>


    <div class="container row">
        <!-- google map -->
        <div class="mapContainer col-md-4" style="position:fixed; height:100%; z-index:500; top:0; padding-left:0;">
            <div id="mapDefault" style="width:100%; height:100%;"></div>
        </div>

        <!-- search container -->
        <div class="searchContainer mt20 col-md-8" style="position:absolute; right:0;">
            {{--search--}}
            <div class="bs-panel">
                <h2>Search HOST or SCHOOL</h2>
                <div class="input-group">
                    <input id="searchKeyword" type="text" class="form-control" placeholder="Search HOST or SCHOOL">
                    <span class="input-group-btn">
                        <button id="btnSearch" class="btn btn-default" type="button">Search</button>
                    </span>
                </div>
                {{--<button type="button" class="btn btn-default dropdown-toggle mt10" onclick="$('#detailOption').slideToggle();"> Detail Option <span class="caret"></span></button>--}}
            </div>

            {{--search result--}}
            <!-- school -->
            <div class="bs-panel mt20">
                <h3><span id="txtCntSchool">0</span> Schools</h3>
                <div id="searchResultSchool"></div>
                <div>
                    <button id="btnShowMoreSchool" class="btn btn-primary btn-lg">show more schools</button>
                </div>
            </div>


            <!-- host -->
            <div class="bs-panel mt20">
                <h3><span id="txtCntHost">0</span> Hosts</h3>
                <div id="searchResultHost"></div>
                <div>
                    <button id="btnShowMoreHost" class="btn btn-primary btn-lg">show more hosts</button>
                </div>
            </div>

        </div>
    </div>


@endsection