@extends('layouts.mypage')


@section('page-header')
<h1 class="page-header">My Host </h1>
@endsection

@if ( empty($host_data) )
    @section('content')
        <div class="row">
            <div class="col-sm-12" style="text-align:center;">
                <p style="margin-top:50px;font-weight: bold; color:#aaa;font-size:20px;">No Host Family connected.</p>
            </div>
        </div>
    @endsection
@else
    @section('content')

    <div class="container" style="width:100%">

        <div class="row panel" style="padding: 15px;">
            <div class="col-lg-4">
                <img style="max-width:270px; 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->user->lastname }}'s Family</h1>
                <h3>{{ $host_data['inputCity'] }}, {{  $host_data['selectAddrState'] }}, {{ $host_data['inputZipCode'] }}</h3>
            </div>
        </div>

        <div class="col-lg-12">
            <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/>
                                    Number of Children: {{ $host_data['selectNumberOfChildren'] }}
                                </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 : {{ $host_data['selectDogNo'] }} dogs, {{ $host_data['selectCatNo'] }} cats, {{ $host_data['selectOtherPetsNo'] }} other pets,
                                    <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'] }} mile<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['selectNearestMajorCityDistance'] }} min.<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 class="">
            <div class="col-lg-12">
                <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"> <!--target ="_blank" 추가시 , IE 11에서 다운로드 클릭시 아무런 작동 하지 않는 문제 발생함. 또한 태그 순서 관련해서 <a tag><button/> </a> 이런식으로 a tag가 겉을 감싸야함.-->
                            <button class="btn btn-primary btn-lg mt20">flyer download</button></a>

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

        <div class="tab-block mb25 col-lg-12">
            <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 23:30                                </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>

@endsection
@endif


@section('script')
    @include('script.googleMap')
    <script>
        $(document).ready(function() {
            // 해당 위치 지도 표시
           /* 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);
            var thisZoom = 15;
            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);*/



            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>
    @include('script.comment')
@endsection