@extends('frontend')

@section('content')
    <!-- Slider
================================================== -->
    <div class="listing-slider mfp-gallery-container margin-bottom-0">
        @php $images = json_decode($hostel->images, true); @endphp

        @if(is_array($images))
            @foreach($images as $image)
                <a href="/files/{{$image}}" data-background-image="/files/{{$image}}"
                   class="item mfp-gallery"></a>
            @endforeach
        @endif
    </div>


    <!-- Content
    ================================================== -->
    <div class="container">
        <div class="row sticky-wrapper">
            <div class="col-lg-8 col-md-8 padding-right-30">

                <!-- Titlebar -->
                <div id="titlebar" class="listing-titlebar">
                    <div class="listing-titlebar-title">
                        <h2>{{ $hostel->name }}
                            {{--<span class="listing-tag">Eat & Drink</span>--}}
                        </h2>
                        <span>
						<a href="#listing-location" class="listing-address">
							<i class="fa fa-map-marker"></i>
                            {{ $hostel->address }}
						</a>
					</span>
                        <div class="star-rating" data-rating="5">
                            <div class="rating-counter"><a href="#listing-reviews">(31 reviews)</a></div>
                        </div>
                    </div>
                </div>

                <!-- Listing Nav -->
                <div id="listing-nav" class="listing-nav-container">
                    <ul class="listing-nav">
                        <li><a href="#listing-overview" class="active">Thông tin chung</a></li>
                        <li><a href="#listing-room-type">Loại phòng</a></li>
                        <li><a href="#listing-location">Vị trí</a></li>
                        <li><a href="#listing-reviews">Đánh giá</a></li>
                        <li><a href="#add-review">Thêm đánh giá</a></li>
                    </ul>
                </div>

                <!-- Overview -->
                <div id="listing-overview" class="listing-section">

                    <!-- Description -->

                {!! $hostel->desc !!}

                <!-- Amenities -->
                    <h3 class="listing-desc-headline">Tiện ích</h3>
                    <ul class="listing-features margin-top-0">
                        @foreach($amenities as $amenity)
                            <li><img style="max-width: 20px"
                                     src="/files/{{ $amenity->web_image }}">  {{ $amenity->name }}</li>
                        @endforeach
                    </ul>
                </div>


                <!-- Food Menu -->
                <div id="listing-room-type" class="listing-section">
                    <h3 class="listing-desc-headline margin-top-70 margin-bottom-30">Các loại phòng sẵn có</h3>

                    <div class="show-more">
                        <div class="pricing-list-container">

                            <!-- Food List -->
                            @foreach($roomTypes as $roomType)
                                <h4>{{ $roomType->name }}</h4>
                                <ul>
                                    <li>
                                        <h5>Diện tích</h5>
                                        <p>{{ $roomType->size }}m2</p>
                                    </li>
                                    <li>
                                        <h5>Giá</h5>
                                        <p>{{ number_format($roomType->price, 0, '.', '.') }}</p>
                                    </li>
                                    <li>
                                        <h5>Tiện nghi</h5>

                                        <ul class="listing-features checkboxes margin-top-0">
                                            @php $rAme = json_decode($roomType->features, true);
                                            @endphp
                                            @if(!empty($rAme) && is_array($rAme))
                                                @php $roomAmenities = \App\Models\Amenity::whereIn('id', $rAme)->get(); @endphp
                                                @foreach($roomAmenities as $roomAmenity)
                                                    <li><img style="max-width: 20px"
                                                             src="/files/{{ $roomAmenity->web_image }}"> {{ $roomAmenity->name }}
                                                    </li>
                                                @endforeach
                                            @endif
                                        </ul>
                                    </li>
                                </ul>
                            @endforeach

                        </div>
                    </div>
                    <a href="#" class="show-more-button" data-more-title="Xem thêm" data-less-title="Rút gọn"><i
                                class="fa fa-angle-down"></i></a>
                </div>
                <!-- Food Menu / End -->

            </div>
            <!-- Sidebar
            ================================================== -->
            <div class="col-lg-4 col-md-4 margin-top-75 sticky">


                <!-- Verified Badge -->
                <div class="verified-badge with-tip"
                     data-tip-content="Nhà trọ được xác minh bởi itro. Nếu có thông tin nào không đúng, vui lòng phản ánh ngay với chúng tôi. Xin cảm ơn!">
                    <i class="sl sl-icon-check"></i> Đã xác nhận bởi itro
                </div>

            {{--<!-- Book Now -->--}}
            {{--<div class="boxed-widget booking-widget margin-top-35">--}}
            {{--<h3><i class="fa fa-calendar-check-o "></i> Đăng ký phòng</h3>--}}
            {{--<div class="row with-forms  margin-top-0">--}}

            {{--<!-- Date Picker - docs: http://www.vasterad.com/docs/listeo/#!/date_picker -->--}}
            {{--<div class="col-lg-6 col-md-12">--}}
            {{--<input type="text" id="booking-date" data-lang="en" data-large-mode="true"--}}
            {{--data-large-default="true" data-min-year="2017" data-max-year="2020"--}}
            {{--data-disabled-days="08/17/2017,08/18/2017">--}}
            {{--</div>--}}

            {{--<!-- Time Picker - docs: http://www.vasterad.com/docs/listeo/#!/time_picker -->--}}
            {{--<div class="col-lg-6 col-md-12">--}}
            {{--<input type="text" id="booking-time" value="9:00 am">--}}
            {{--</div>--}}

            {{--<!-- Panel Dropdown -->--}}
            {{--<div class="col-lg-12">--}}
            {{--<div class="panel-dropdown">--}}
            {{--<a href="#">Guests <span class="qtyTotal" name="qtyTotal">1</span></a>--}}
            {{--<div class="panel-dropdown-content">--}}

            {{--<!-- Quantity Buttons -->--}}
            {{--<div class="qtyButtons">--}}
            {{--<div class="qtyTitle">Adults</div>--}}
            {{--<input type="text" name="qtyInput" value="1">--}}
            {{--</div>--}}

            {{--<div class="qtyButtons">--}}
            {{--<div class="qtyTitle">Childrens</div>--}}
            {{--<input type="text" name="qtyInput" value="0">--}}
            {{--</div>--}}

            {{--</div>--}}
            {{--</div>--}}
            {{--</div>--}}
            {{--<!-- Panel Dropdown / End -->--}}

            {{--</div>--}}

            {{--<!-- progress button animation handled via custom.js -->--}}
            {{--<a href="pages-booking.html" class="button book-now fullwidth margin-top-5">Book Now</a>--}}
            {{--</div>--}}
            {{--<!-- Book Now / End -->--}}


            <!-- Contact -->
                <div class="boxed-widget margin-top-35">
                {{--<div class="hosted-by-title">--}}
                {{--<h4><span>Chủ trọ</span> <a href="pages-user-profile.html">{{ $hostel->owner->name }}</a></h4>--}}
                {{--<a href="pages-user-profile.html" class="hosted-by-avatar"><img--}}
                {{--src="images/dashboard-avatar.jpg" alt=""></a>--}}
                {{--</div>--}}
                {{--<ul class="listing-details-sidebar">--}}
                {{--<li><i class="sl sl-icon-phone"></i> {{ $hostel->owner->phone }}</li>--}}
                {{--<!-- <li><i class="sl sl-icon-globe"></i> <a href="#">http://example.com</a></li> -->--}}
                {{--<li><i class="fa fa-envelope-o"></i> <a href="#"><span class="__cf_email__"--}}
                {{--data-cfemail="3e4a51537e5b465f534e525b105d5153">{{ $hostel->owner->email }}</span></a>--}}
                {{--</li>--}}
                {{--</ul>--}}

                {{--<ul class="listing-details-sidebar social-profiles">--}}
                {{--<li><a href="#" class="facebook-profile"><i class="fa fa-facebook-square"></i> Facebook</a></li>--}}
                {{--<li><a href="#" class="twitter-profile"><i class="fa fa-twitter"></i> Twitter</a></li>--}}
                {{--<!-- <li><a href="#" class="gplus-profile"><i class="fa fa-google-plus"></i> Google Plus</a></li> -->--}}
                {{--</ul>--}}

                <!-- Reply to review popup -->
                    <div id="small-dialog" class="zoom-anim-dialog mfp-hide">
                        <div class="small-dialog-header">
                            <h3>Gửi tin nhắn</h3>
                        </div>
                        <div class="message-reply margin-top-0">
                            <textarea cols="40" rows="3" placeholder="Tin nhắn của bạn tới chủ trọ"></textarea>
                            <button class="button">Gửi</button>
                        </div>
                    </div>

                    <a href="#small-dialog" class="send-message-to-owner button popup-with-zoom-anim"><i
                                class="sl sl-icon-envelope-open"></i> Gửi tin nhắn tới chủ trọ</a>
                </div>
                <!-- Contact / End-->


                <!-- Share / Like -->
                <div class="listing-share margin-top-40 margin-bottom-40 no-border">
                    <button class="like-button"><span class="like-icon"></span> Đánh dấu nhà trọ này</button>
                    <span>159 cũng đánh dấu địa điểm này</span>

                    <!-- Share Buttons -->
                    <ul class="share-buttons margin-top-40 margin-bottom-0">
                        <li><a class="fb-share" href="#"><i class="fa fa-facebook"></i> Chia sẻ</a></li>
                        <li><a class="twitter-share" href="#"><i class="fa fa-twitter"></i> Tweet</a></li>
                        <li><a class="gplus-share" href="#"><i class="fa fa-google-plus"></i> Chia sẻ</a></li>
                        <!-- <li><a class="pinterest-share" href="#"><i class="fa fa-pinterest-p"></i> Pin</a></li> -->
                    </ul>
                    <div class="clearfix"></div>
                </div>

            </div>
            <!-- Sidebar / End -->
            <div class="row">
                <div class="col-md-12 col-lg-12">

                <!-- Location -->
                <div id="listing-location" class="listing-section">
                    <h3 class="listing-desc-headline margin-top-60 margin-bottom-30">Vị trí</h3>

                    @if(!empty($hostel->lat) && !empty($hostel->lng))
                    <div id="singleListingMap-container">
                        <div id="singleListingMap" data-latitude="{{ $hostel->lat }}"
                             data-longitude="{{ $hostel->lng }}"
                             data-map-icon="im im-icon-Hamburger"></div>
                        {{--<a href="#" id="streetView">Street View</a>--}}
                    </div>
                        @endif
                </div>

            </div>
            </div>
                <div class="row">
                <div class="col-md-8 col-lg-8">
                <!-- Reviews -->
                <div id="listing-reviews" class="listing-section">

                    <!-- Pagination / End -->
                </div>


                <!-- Add Review Box -->
                <div id="add-review" class="add-review-box">

                    <!-- Add Review -->
                    <h3 class="listing-desc-headline margin-bottom-20">Thêm đánh giá</h3>

                    <span class="leave-rating-title">Bạn đánh giá nhà trọ này thế nào ?</span>

                    <!-- Rating / Upload Button -->
                    <form id="add-comment" class="add-comment">
                        <div class="row">
                            <div class="col-md-6">
                                <!-- Leave Rating -->
                                <div class="clearfix"></div>
                                <div class="leave-rating margin-bottom-30">
                                    <input type="radio" name="rating" id="rating-1" value="1"/>
                                    <label for="rating-1" class="fa fa-star"></label>
                                    <input type="radio" name="rating" id="rating-2" value="2"/>
                                    <label for="rating-2" class="fa fa-star"></label>
                                    <input type="radio" name="rating" id="rating-3" value="3"/>
                                    <label for="rating-3" class="fa fa-star"></label>
                                    <input type="radio" name="rating" id="rating-4" value="4"/>
                                    <label for="rating-4" class="fa fa-star"></label>
                                    <input type="radio" name="rating" id="rating-5" value="5"/>
                                    <label for="rating-5" class="fa fa-star"></label>
                                </div>
                                <div class="clearfix"></div>
                            </div>

                            {{--<div class="col-md-6">--}}
                            {{--<!-- Uplaod Photos -->--}}
                            {{--<div class="add-review-photos margin-bottom-30">--}}
                            {{--<div class="photoUpload">--}}
                            {{--<span><i class="sl sl-icon-arrow-up-circle"></i> Upload Photos</span>--}}
                            {{--<input type="file" class="upload"/>--}}
                            {{--</div>--}}
                            {{--</div>--}}
                            {{--</div>--}}
                        </div>

                        <!-- Review Comment -->

                        <fieldset>
                            <input type="hidden" name="hostel_id" value="{{ $hostel->id }}">
                            <div class="row">
                                <div class="col-md-6">
                                    <label>Tên:</label>
                                    <input type="text" value="" name="name"/>
                                </div>

                                <div class="col-md-6">
                                    <label>SĐT:</label>
                                    <input type="text" value="" name="phone"/>
                                </div>
                            </div>

                            <div>
                                <label>Đánh giá:</label>
                                <textarea cols="40" rows="3" name="comment"></textarea>
                            </div>

                        </fieldset>

                        <button class="button" type="button" id="submit-comment">Gửi</button>
                        <div class="clearfix"></div>
                    </form>

                </div>
                <!-- Add Review Box / End -->


            </div>




        </div>
    </div>

@endsection

@push('scripts')
<!-- Maps -->
<script type="text/javascript"
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCydLs7dhJPuozABFQjJO-uk1PITW18oo8"></script>
<script type="text/javascript" src="/frontend/scripts/infobox.min.js"></script>
<script type="text/javascript" src="/frontend/scripts/markerclusterer.js"></script>
<script type="text/javascript" src="/frontend/scripts/maps.js"></script>

<script>
    $(document).ready(function() {

        $.ajax({
            url: '{{ url('get-rating') }}',
            data: {
                hostel_id: '{{ $hostel->id }}'
            },
            type: 'get',
            dataType: 'json',
            success: function (response) {
               $('#listing-reviews').html(response.html);
            }
        });

    });

    $(document).on('click', '#submit-comment', function () {
        var form = $('#add-comment');
        var data = form.serialize();

        $.ajax({
            url: '{{ url('add-rating') }}',
            data: data,
            type: 'post',
            success: function (response) {
                form[0].reset();
            }
        });
    });

    $(document).on('click', '.link-pagination', function (e) {
        e.preventDefault();

        var href = $(this).attr('data-href');

        $.ajax({
            url: href,
            type: 'get',
            dataType: 'json',
            success: function (response) {
                $('#listing-reviews').html(response.html);
            }
        });
    });

</script>
@endpush