@extends('.frontend.default')

@section('content')
    <div id="venue_reservation_details_page" class="details_page">
        <div class="container">
            <div id="venue_reservation_details_page_header">
                <a class="back_button cursor-pointer" onclick="history.back()"><i class="fa fa-angle-left" aria-hidden="true"></i> 返回搜尋結果</a>
            </div>

            <div id="venue_reservation_details_page_content">
                <div class="row">
                    <div class="col-12 col-md-4 text-center">
                        <img src="{{$venue_reservation->imagePathDetailUrl}}" alt="">
                    </div>
                    <div class="col-12 col-md-6 mt-3 mt-md-0 align-self-end">
                        <div class="row" style="margin-bottom: 40px">
                            <div class="col">
                                <div class="text-center border-radius-5 text-secondary venue_reservation_details_page_content_tag">
                                    <p class="">{{ __('venue_reservation/venue_reservation.type.'.$venue_reservation->type) }}</p>
                                    <p class="text-hint">場地類型</p>
                                </div>
                            </div>
                            <div class="col">
                                <div class="text-center border-radius-5 text-secondary venue_reservation_details_page_content_tag">
                                    <p class="text-size-l">{{ $venue_reservation->max_member }}人</p>
                                    <p class="text-hint">最多容纳人數</p>
                                </div>
                            </div>
                            <div class="col">
                                <div class="text-center border-radius-5 text-secondary venue_reservation_details_page_content_tag">
                                    <p class="">{{ $venue_reservation->venue_size }}呎</p>
                                    <p class="text-hint">面積</p>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col">
                                <div class="text-center">
                                    @if(empty($venue_reservation->url))
                                        <div class="border-radius-15 btn btn-disable" style="width: 100%;height: 50px;line-height: 38px;">目前未能預訂</div>
                                    @else
                                        <a class="border-radius-15 btn btn-primary" href="{{$venue_reservation->url}}"
                                           target="_blank" style="width: 100%;height: 50px;line-height: 38px;">查看預訂詳情</a>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="mb-2" style="margin-top: 30px">
                    <div class="d-inline-block text-size-l" style="width: 84%">
                        <h1>{{$venue_reservation->title}}</h1>
                    </div>

                    <div class="d-inline-block text-right" style="width: 15%">
                        <a class="text-primary st-custom-button cursor-pointer" data-network="sharethis"
                           data-url="{{ route('.venue_reservation.details', ['venue_reservation_id' => $venue_reservation->id]) }}" href="#">
                            分享 <i class="fas fa-share-alt"></i>
                        </a>
                    </div>
                </div>

                <div class="mt-3">
                    @php
                        $address_text = __('backpack::venue_reservation.active_address_options.'.$venue_reservation->active_address);
                        if(!empty($venue_reservation->other_active_address)){
                            $address_text .= ' - '.$venue_reservation->other_active_address;
                        }
                    @endphp
                    <div class="icon_title">
                        <i class="fas fa-map-marker-alt" style="width:20px;"></i> 地點：
                    </div>
                    <div class="icon_title_content">
                        <p>{{$address_text}}</p>
                    </div>
                </div>

                <div class="mt-3">
                    <div class="icon_title">
                        <i class="fas fa-city" style="width:20px;"></i> 提供單位：
                    </div>
                    <div class="icon_title_content" style="max-width: calc(100% - 110px);word-break: break-all">
                        <p>{{$venue_reservation->unit->c_unitname}}</p>
                    </div>
                </div>

                <div class="mt-3 row">
                    <div class="icon_title col-auto pr-0">
                        <i class="far fa-clipboard" style="width:20px;"></i> 場地簡介：
                    </div>
                    <div class="icon_title_content col-12 col-md pl-md-0" style="width: calc(100% - 110px);word-break: break-all">
                        <p>@nl2br($venue_reservation->content ?? '-')</p>
                    </div>
                </div>

                <div class="mt-3 row">
                    <div class="icon_title col-auto pr-0">
                        <i class="fas fa-bookmark" style="width:20px;"></i> 備註：
                    </div>
                    <div class="icon_title_content col-12 col-md pl-md-0" style="width: calc(100% - 80px);word-break: break-all">
                        <p>@nl2br($venue_reservation->remark ?? '-')</p>
                    </div>
                </div>

            </div>

            <div id="venue_reservation_details_page_footer">
                <div class="row">
                    <div class="col-12 text-center" style="margin-bottom: 41px">
                        <h1>你可能會感興趣</h1>
                    </div>
                    <div class="col-12">
                        <div id="featured" class="owl-carousel venue_reservation_details_page_footer_may_be_you_will_like_owlCarousel_setting">
                            @foreach($mayBeYouWillLikes as $mayBeYouWillLike)
                                @include('frontend.template.venue_reservation.card',['venue_reservation' => $mayBeYouWillLike])
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('pagescript')
    <script>
        $(window).bind("pageshow", function() {
            $("html, body").animate({
                scrollTop: 0
            });
        });
    </script>
@endpush

@section('pagecss')
    <style>
      .venue_reservation_details_page_content_tag {
        height: 50px;
        background-color: rgba(251, 143, 103, 0.3);
        border: 2px solid #fb8f67
      }

      .icon_title {
        display: inline-block;
        vertical-align: top;
      }

      .icon_title_content {
        display: inline-block;
        width: 89%;
      }

      #venue_reservation_details_page_header {
        margin-bottom: 40px;
      }

      #venue_reservation_details_page_footer {
        margin-top: 200px;
        margin-bottom: 190px;
      }
    </style>
@endsection