@extends('layouts.app')



@section('content')

    @include('script.googleMap')
    <script>
        $(document).ready(function() {
        
        	var geocoder=new google.maps.Geocoder();
        	var address='{{ $host_data['inputStreetAddress'] }}'+', '+'{{ $host_data['inputCity'] }}'+', '+'{{ $host_data['selectAddrState'] }}'+', '+'{{ $host_data['inputZipCode'] }}';
        	var address_location_lat;
        	var address_location_lng;
        	console.log('host address'+address);
        	geocoder.geocode({'address':address},function(results, status){
        	
        	if(status=='OK'){
        	//results[0].geometry.location 로는 전체 위도 경도 위치가 나옴
        	
        	
        	
        		console.log('geocoding success : lat : '+results[0].geometry.location.lat());
        		console.log('geocoding success : lng : '+results[0].geometry.location.lng());
        		address_location_lat=results[0].geometry.location.lat();
        		address_location_lng=results[0].geometry.location.lng();
        		
        		
        		
        		
        		
        		  // 해당 위치 지도 표시
            var thisLocation = {
                lat:0, lng:0
            };
            thisLocation.lat = '{{ $host_data['map_lat'] }}';
            thisLocation.lat = Number(thisLocation.lat);
            thisLocation.lng = '{{ $host_data['map_lng'] }}';
            thisLocation.lng = Number(thisLocation.lng);
            
            console.log('this location : lat -'+thisLocation.lat);
            console.log('this location : lng -'+thisLocation.lng);
            var thisZoom = 15;
            thisLocation.lat=address_location_lat;
            thisLocation.lng=address_location_lng;
            locations.push(['The {{ $host_data['inputHostMotherLastName'] }}\'s Family',thisLocation.lat,thisLocation.lng,'','{{ $host_data['inputFile_HomeExterior'] }}','H','{{ $host_data['inputZipCode'] }}, {{ $host_data['inputCity'] }}, {{  $host_data['selectAddrState'] }}']);
            mapInitialize(thisLocation, thisZoom);
            
        		
        		
        		
        		
        		
        	}
        	else{
        		console.log('Geocode was not successful for the following reason : '+status);
        	}
        	
        	
        	});
        
        
        
        
        
        
        
        
        
          
            
            
            
            
        });
    </script>

    <div class="container">

        <div class="row panel" style="padding: 15px;">
            <div class="col-lg-4">
                <img style="max-width:300px; height:auto;" class="media-object mw150" src="{{ $host_data['inputFile_HomeExterior'] }}" onerror="this.src='/assets/img/userimg/house-default.jpg'">
            </div>
            <div class="col-lg-8">
                <h1>The {{ $host_data['inputHostMotherLastName'] }}'s Family</h1>
                <h3> {{ $host_data['inputCity'] }}, {{  $host_data['selectAddrState'] }}, {{ $host_data['inputZipCode'] }}</h3>
            </div>
        </div>


        <div class="row">
            <div class="col-lg-8">
                <div class="tab-block mb25">
                    <ul class="nav nav-tabs">
                        <li class="active">
                            <a href="#tab6_1" data-toggle="tab">On the map</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div id="tab6_1" class="tab-pane active">
                            <div id="mapDefault" class="detailMap"></div>
                        </div>
                    </div>
                </div>

                <div class="tab-block mb25">
                    <ul class="nav nav-tabs">
                        <li class="active">
                            <a href="#tab6_2" data-toggle="tab">Photos</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div id="tab6_2" class="tab-pane active">

                            <div class="tab-block mb25">
                                {{--상단 사진 보기--}}
                                <div class="tab-content" style="text-align: center;">
                                    @if ( $photo_cnt != 0 )
                                                                                @foreach($ar_photo_list as $key => $value)
                                            <div id="tab16_{{$photo_idx}}" class="tab-pane @if($photo_idx == 1) active @endif">
                                                <img src="{{$value}}" onerror="this.src='/assets/img/userimg/house-default.jpg'" style="width:auto; max-height:300px;">
                                            </div>
                                                                                    @endforeach
                                    @else
                                        <div id="tab16_1" class="tab-pane active">
                                            <p>No Photo</p>
                                        </div>
                                    @endif
                                </div>

                                {{--하단 탭바--}}
                                <ul class="nav nav-tabs nav-justified">
                                    @if ( $photo_cnt != 0 )
                                                                                @foreach($ar_photo_list as $key => $value)
                                            <li class="@if($photo_idx == 1) active @endif">
                                                <a href="#tab16_{{$photo_idx}}" data-toggle="tab"><img src="{{$value}}" onerror="this.src='/assets/img/userimg/house-default.jpg'" style="max-width:100px; max-height:50px;"></a>
                                            </li>
                                                                                    @endforeach
                                    @else
                                        <li class="active">

                                        </li>
                                    @endif
                                </ul>

                            </div>

                        </div>
                    </div>
                </div>

                <div class="tab-block mb25">
                    <ul class="nav nav-tabs">
                        <li class="active">
                            <a href="#tab6_2" data-toggle="tab">Host Family Flyer</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div id="tab6_2" class="tab-pane active" style="text-align:center;">

                            <a href="/host/{{ $host_data['user_id'] }}/flyer"><button class="btn btn-primary btn-lg mt20">flyer download</button></a>

                        </div>
                    </div>
                </div>
            </div>


            <div class="col-lg-4">
                <div class="tab-block mb25">
                    <ul class="nav nav-tabs">
                        <li class="active">
                            <a href="#tab2_1" data-toggle="tab">Option Detail</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div id="tab2_1" class="tab-pane active">
                            <div class="row">
                                <div class="col-lg-3">
                                    <h3>hosts</h3>
                                </div>
                                <div class="col-lg-9">
                                    <p>
                                        Type: {{$host_data['radioHomeType']}}<br/>
                                        <br/>
                                        Bedroom: {{$host_data['inputBedNo']}}<br/>
                                        Bathroom: {{$host_data['inputBathNo']}}<br/>
                                        <br/>
                                        Ethnic Background(s): <br/>
                                        @foreach ($ar_ethnic_background_list as $key => $value)
                                            @if($key != 0),@endif {{$value}}
                                        @endforeach
                                        <br/><br/>
                                        Languages : <br/>
                                        @foreach ($ar_language_list as $key => $value)
                                            @if($key != 0),@endif {{$value}}
                                        @endforeach
                                        <br/><br/>
                                        <!--
                                        ****** 2018.04.23, Dorothy 
                                        ****** 이 부분은 mail씨의 요청으로 Number of Children 안보이도록 주석처리함
                                        ****** start    
                                        Number of Children: {{ $host_data['selectNumberOfChildren'] }}
                                        ****** end
                                        -->
                                    </p>
                                </div>
                            </div>
                            <hr>
                            <div class="row">
                                <div class="col-lg-3">
                                    <h3>other</h3>
                                </div>
                                <div class="col-lg-9">
                                    <p>
                                        student has access: <br/>
                                        @foreach ($ar_amenities_list as $key => $value)
                                            @if($key != 0),@endif {{$value}}
                                        @endforeach<br/>
                                        <br/>
                                        student’s bedroom: <br/>
                                        @foreach ($ar_stdbedroom_list as $key => $value)
                                            @if($key != 0),@endif {{$value}}
                                        @endforeach<br/>
                                        <br/>
                                        Household Pets : {{ !empty($host_data['selectDogNo'])&&$host_data['selectDogNo']!=0? $host_data['selectDogNo'].'dogs,':''}} {{ !empty($host_data['selectCatNo'])&&$host_data['selectCatNo']!=0? $host_data['selectCatNo'].'cats,':'' }} {{ !empty($host_data['selectOtherPetsNo'])&&$host_data['selectOtherPetsNo']!=0? $host_data['selectOtherPetsNo'].'other pets':'' }} {{!empty( $host_data['inputOtherPetexplain'])?'('.$host_data['inputOtherPetexplain'].')':''}}
                                        <br/><br/>
                                        Family Activities :
                                        @foreach ($ar_activities_list as $key => $value)
                                            @if($key != 0),@endif {{$value}}
                                        @endforeach
                                        <br/>
                                    </p>
                                </div>
                            </div>
                            <hr>
                            <div class="row">
                                <div class="col-lg-3">
                                    <h3>school</h3>
                                </div>
                                <div class="col-lg-9">
                                    <p>
                                        Near: {{ $host_data['selectEduSchoolList'] }}<br/>
                                        Distance: {{ $host_data['selectDistSchool'] }} min.<br/>
                                        Transportation: <br/>
                                        @foreach ($ar_trans_list as $key => $value)
                                            @if($key != 0),@endif {{$value}}
                                        @endforeach
                                    </p>
                                </div>
                            </div>
                            <hr>
                            <div class="row">
                                <div class="col-lg-3">
                                    <h3>community</h3>
                                </div>
                                <div class="col-lg-9">
                                    <p>
                                        Type: {{ $host_data['radioCommunityLive'] }}<br/>
                                        Distance Major City: {{ $host_data['inputNearestMajorCityName'] }} / {{ $host_data['selectNearestMajorCityDistance']}} miles<br/>
                                        Nearest Major International Airport: <br/>
                                        {{ $host_data['inputNearestMajorInternationalAirport1'] }} / {{ $host_data['selectNearestMajorInternationalAirportDistance1'] }} miles<br/>
                                        Interest point : <br/>
                                        @foreach ($ar_interest_list as $key => $value)
                                            @if($key != 0),@endif {{$value}}
                                        @endforeach
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>



        <div class="row">
            <div class="tab-block mb25 col-lg-8">
                <ul class="nav nav-tabs">
                    <li class="active">
                        <a href="#tab2_1" data-toggle="tab">Reviews</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div id="tab2_1" class="tab-pane active">
                        @foreach($host_data->reviews as $review)
                        <div class="media mt25">
                            <div class="media-body mb5">
                                <h5 class="media-heading fw700 mbn">{{ $review->user->firstname }} {{ $review->user->lastname }}
                                    <span class="fw300 light-text">
                                    - Jul/05/2025 15:21                                    </span>
                                    &nbsp;
                                    <div class="pull-right dropdown">
                                        <button data-toggle="dropdown" class="dropdown-toggle btn-white btn-xs" aria-expanded="false">
                                            <i class="fa fa-angle-down"></i>
                                        </button>
                                        <ul class="dropdown-menu m-t-xs">
                                            <li><a class="btn_review_delete" href="javascript:" data-value="{{$review->id}}">Delete</a></li>
                                        </ul>
                                    </div>
                                </h5>
                                <p class="mt3 fw700 light-text"> {{ $review->comment }}</p>
                            </div>
                        </div>
                        @endforeach


                        {{--<p> + more reviews (total 100 reviews)</p>--}}


                        @if( ($auth) && $auth->grade_id == 2 )
                        <div class="admin-form theme-system" style="padding:16px;">

                            <div class="section" id="spy3">
                                <label for="comment" class="field prepend-icon">
                                    <textarea class="gui-textarea" id="comment" name="comment" placeholder="Your comment" aria-required="true" aria-invalid="false"></textarea>
                                    <label for="comment" class="field-icon">
                                        <i class="fa fa-comments"></i>
                                    </label>
                                </label>
                            </div>

                            <div class="text-right">
                                <button id="btn_review_write" class="button btn-system submit-btn">Write Review</button>
                            </div>

                            <input type="hidden" id="hostReviewId" value="{{ $host_data['user_id'] }}">
                        </div>
                        @endif


                    </div>
                </div>
            </div>

            {{--<div class="tab-block mb25 col-lg-4">
                <ul class="nav nav-tabs">
                    <li class="active">
                        <a href="#" data-toggle="tab">Near School</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div id="" class="tab-pane active">
                        <h6 class="light-text">Experience</h6>

                        <h4 class="fs17">Facebook Internship</h4>
                        <p class="lh20 light-text"> University of Missouri, Columbia
                            <br> Student Health Center, June 2010 - 2012
                        </p>

                        <hr class="short br-lighter">

                        <h6 class="light-text">Education</h6>

                        <h4 class="fs17">Bachelor of Science, PhD</h4>
                        <p class="lh20 light-text"> University of Missouri, Columbia
                            <br> Student Health Center, June 2010 through Aug 2011
                        </p>

                        <hr class="short br-lighter">

                        <h6 class="light-text">Accomplishments</h6>

                        <h4 class="fs17">Successful Business</h4>
                        <p class="light-text lh20 pb10"> University of Missouri, Columbia
                            <br> Student Health Center, June 2010 through Aug 2011
                        </p>
                    </div>
                </div>
            </div>--}}

        </div>

    </div>

@endsection

@section('script')
    @include('script.comment')
@endsection