@extends('layouts.app')
<style>
.thumbnail {
	width:100%;
}
</style>

@section('content')
    <style>
        .footer {
            display:none;
        }
    </style>
    @include('script.googleMap')

    <!-- 검색 스크립트 -->
    @include('script/searchScript')

    @include('script/getParameter')
    <script>
        $(document).ready(function() {
            // 검색 키워드가 넘어왔을 경우
            var searchKeyword = getUrlParameter('keyword');
            if ( searchKeyword != '' && searchKeyword != undefined ) {
                $("#searchKeyword").val(searchKeyword);
                $('#btnSearchHost').trigger('click');
            }
            else {
                $('#btnSearchHost').trigger('click');
            }
        });
    </script>


    <div class="container row">
        <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>
        <div class="searchContainer mt20 col-md-8" style="position:absolute; right:0;">

            {{--search--}}
            <div class="bs-panel">
                <h2>@lang('menu.searchHost')</h2>
                <div class="input-group">
                    <input id="searchKeyword" type="text" class="form-control" placeholder="@lang('menu.searchHostPlaceholder')">
                    <span class="input-group-btn">
                        <button id="btnSearchHost" class="btn btn-default" type="button"> @lang('menu.searchBtn') </button>
                    </span>
                </div>
                <button type="button" class="btn btn-default dropdown-toggle mt10" onclick="$('#detailOption').slideToggle();"> @lang('menu.searchDtlOpt') <span class="caret"></span></button>
            </div>

            {{--search detail--}}
            <div id="detailOption" class="bs-panel" style="display:none;">
                <h3>@lang('menu.filterBy')</h3>
                <div class="form-group">
                    <label class="control-label">
                        state
                    </label>
                    <select id="selectHostState" class="form-control">
                        <option value="0">@lang('menu.selectDefault')</option>
                        @foreach ($ar_usa_states as $key => $value)
                            <option value="{{$key}}">{{$value}}</option>
                        @endforeach
                    </select>
                </div>

                <div class="form-group mt30">
                    <label class="control-label">@lang('menu.houseHoldLanguage')</label>
                    <div class="row mt10">
                        <div class="checkbox-custom mb5 col-md-4">
                            <input type="checkbox" id="checkboxEnglish" value="T">
                            <label for="checkboxEnglish">English</label>
                        </div>
                        <div class="checkbox-custom mb5 col-md-4">
                            <input type="checkbox" id="checkboxSpanish" value="T">
                            <label for="checkboxSpanish">Spanish</label>
                        </div>
                        <div class="checkbox-custom mb5 col-md-4">
                            <input type="checkbox" id="checkboxChinese" value="T">
                            <label for="checkboxChinese">Chinese (All Variants)</label>
                        </div>
                        <div class="checkbox-custom mb5 col-md-4">
                            <input type="checkbox" id="checkboxFrench" value="T">
                            <label for="checkboxFrench">French</label>
                        </div>
                        <div class="checkbox-custom mb5 col-md-4">
                            <input type="checkbox" id="checkboxGerman" value="T">
                            <label for="checkboxGerman">German</label>
                        </div>
                        <div class="checkbox-custom mb5 col-md-4">
                            <input type="checkbox" id="checkboxItalian" value="T">
                            <label for="checkboxItalian">Italian</label>
                        </div>
                        <div class="checkbox-custom mb5 col-md-4">
                            <input type="checkbox" id="checkboxRussian" value="T">
                            <label for="checkboxRussian">Russian</label>
                        </div>
                        <div class="checkbox-custom mb5 col-md-4">
                            <input type="checkbox" id="checkboxOtherLanguage" value="T">
                            <label for="checkboxOtherLanguage">Other</label>
                        </div>
                    </div>
                </div>

                <div class="form-group mt15">
                    <label class="control-label">@lang('menu.typeOfHome')</label>
                    <div class="row mt5">
                        <div class="radio-custom col-md-4">
                            <input type="radio" id="radioHomeTypeAll" name="radioHomeType" value="All" checked>
                            <label for="radioHomeTypeAll">@lang('menu.typeOfHomeAll')</label>
                        </div>
                        <div class="radio-custom col-md-4">
                            <input type="radio" id="radioHomeTypeSingle" name="radioHomeType" value="Single Family Home">
                            <label for="radioHomeTypeSingle">@lang('menu.typeOfHomeSFH')</label>
                        </div>
                        <div class="radio-custom col-md-4">
                            <input type="radio" id="radioHomeTypeCondominium" name="radioHomeType" value="Condominium">
                            <label for="radioHomeTypeCondominium">@lang('menu.typeOfHomeCondo')</label>
                        </div>
                        <div class="radio-custom col-md-4">
                            <input type="radio" id="radioHomeTypeDuplex" name="radioHomeType" value="Duplex">
                            <label for="radioHomeTypeDuplex">@lang('menu.typeOfHomeDuplex')</label>
                        </div>
                        <div class="radio-custom col-md-4">
                            <input type="radio" id="radioHomeTypeApartment" name="radioHomeType" value="Apartment">
                            <label for="radioHomeTypeApartment">@lang('menu.typeOfHomeApt')</label>
                        </div>
                        <div class="radio-custom col-md-4">
                            <input type="radio" id="radioHomeTypeMobile" name="radioHomeType" value="Mobile Home">
                            <label for="radioHomeTypeMobile">@lang('menu.typeOfHomeMobile')</label>
                        </div>
                    </div>
                </div>

                <div class="row mt15">
                    <div class="form-group col-md-6">
                        <label class="control-label">@lang('menu.numOfBedrooms')</label>
                        <select id="selectNumBed" class="form-control">
                            <option value="0">select</option>
                            @for ($i = 1; $i < 10; $i++)
                                <option value="{{$i}}">{{$i}}</option>
                            @endfor
                            <option value="more">10+</option>
                        </select>
                    </div>
                    <div class="form-group col-md-6">
                        <label class="control-label">@lang('menu.numOfBathrooms')</label>
                        <select id="selectNumBath" class="form-control">
                            <option value="0">select</option>
                            @for ($i = 1; $i < 10; $i++)
                                <option value="{{$i}}">{{$i}}</option>
                            @endfor
                            <option value="more">10+</option>
                        </select>
                    </div>
                </div>
            </div>

            {{--search result--}}
            <div class="bs-panel mt20">
                <h3><span id="txtCntHost">0</span> @lang('menu.hosts')</h3>
                <div id="searchResultHost"></div>
                <div style="text-align:center;">
                    <button id="showMoreHostList" class="btn btn-lg btn-default" style="width:70%"> @lang('menu.showMore') </button>
                </div>
            </div>

        </div>
    </div>

@endsection