@extends('layouts.layout')
@section('content')
    {{-- @include('residence-single.hero-image-gallery', ['residence' => $residence]) --}}
    @include('residence-single.hero-image', ['residence' => $residence])
    @include('residence-single.scroll-nav-bar')

    <section class="gray-bg no-top-padding">
        <div class="container">
            <div class="breadcrumbs inline-breadcrumbs fl-wrap">
                <a href="{{ route('home.index') }}">Home</a>
                <a href="{{ route('residences.index') }}">Residences</a>
                <span>{{ $residence->name }}</span>
            </div>
            <div class="clearfix"></div>
            <div class="row">
                <!-- list-single-main-wrapper-col -->
                <div class="col-md-8">
                    <!-- list-single-main-wrapper -->
                    <div class="list-single-main-wrapper fl-wrap" id="sec2">
                        <div class="list-single-main-media fl-wrap">
                            <img src="{{ $residence->image }}" class="respimg" alt="{{ $residence->name }} image">
                            <a href="https://vimeo.com/70851162" class="promo-link   image-popup">
                                <i class="fal fa-video"></i>
                                <span>Promo Video</span>
                            </a>
                        </div>

                        @include('residence-single.residence-gallery', ['residence' => $residence])

                        @include('residence-single.residence-visuals', ['residence' => $residence])

                        <!-- list-single-main-item -->
                        <div class="list-single-main-item fl-wrap block_box">
                            <div class="list-single-main-item-title">
                                <h3>Description</h3>
                            </div>
                            <div class="list-single-main-item_content fl-wrap">
                                {!! $residence->description !!}
                            </div>
                        </div>
                        <!-- list-single-main-item end -->

                        <!-- list-single-main-item -->
                        <div class="list-single-main-item fl-wrap block_box">
                            <div class="list-single-main-item-title">
                                <h3>Listing Features</h3>
                            </div>
                            <div class="list-single-main-item_content fl-wrap">
                                <div class="listing-features fl-wrap">
                                    <ul class="no-list-style">
                                        @forelse ($residence->features ?? [] as $feature)
                                            <li><a role="button">
                                                    <img width="16px" class="me-2"
                                                        src="{{ asset('assets/images/svg/' . str_replace('icon-', '', $feature->icon) . '.svg') }}"
                                                        alt="{{ $feature->icon }}"><span>{{ $feature->name }}</span></a>
                                            </li>
                                        @empty
                                        @endforelse
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <!-- list-single-main-item end -->
                        @if (count($residence->promotions))
                            <!-- list-single-main-item -->
                            <div class="list-single-main-item fl-wrap block_box ">
                                <div class="list-single-main-item-title">
                                    <h3>Promotions</h3>
                                </div>
                                @forelse ($residence->promotions ?? [] as $promotion)
                                    <div class="list-single-main-item_content fl-wrap alert alert-success">
                                        <div class="listing-features fl-wrap">
                                            <div class="row">
                                                <div class="col-6">
                                                    <h5 class="text-start"> {{ $promotion->name }}</h5>
                                                </div>
                                                <div class="col-6">
                                                    <div class="text-end">
                                                        @if ($promotion->type == 'percentage')
                                                            {{ '%' }}
                                                        @else
                                                            {{ '£' }}
                                                        @endif
                                                        {{ $promotion->amount }}
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-6"></div>
                                                <div class="col-6">
                                                    <h3 class="mb-0 text-end fw-bold">
                                                        £{{ $promotion->discounted_price }}<span class="fs-6 fw-light">
                                                            /Week</span></h3>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                @empty
                                @endforelse
                            </div>
                            <!-- list-single-main-item end -->
                        @endif
                        <!-- list-single-main-item-->
                        <div class="list-single-main-item fl-wrap block_box" id="sec4">
                            <div class="list-single-main-item-title">
                                <h3>Available Rooms</h3>
                            </div>
                            <div class="list-single-main-item_content fl-wrap" id="rooms">
                            </div>
                        </div>
                        <!-- list-single-main-item end -->
                        @isset($residence->coordinates)
                            <!-- list-single-main-item-->
                            <div class="list-single-main-item fl-wrap block_box" id="location">
                                <div class="list-single-main-item-title">
                                    <h3>Location</h3>
                                </div>
                                <div class="list-single-main-item_content fl-wrap">
                                    <div class="menu-filters">
                                        <a role="button" class="gallery-filter menu-filters-active"
                                            data-filter="universities">Universities</a>
                                        <a role="button" class="gallery-filter" data-filter="busstations">Bus Stations</a>
                                        <a role="button" class="gallery-filter" data-filter="trainstations">Train Stations</a>
                                        <a role="button" class="gallery-filter" data-filter="supermarkets">Supermarkets</a>
                                        <a role="button" class="gallery-filter" data-filter="pharmacies">Pharmacies</a>
                                    </div>
                                    <div class="map-container">
                                        <div id="residenceDetailsMap" data-latitude="{{ $residence->coordinates->lat }}"
                                            data-longitude="{{ $residence->coordinates->lng }}" data-mapTitle="Our Location">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- list-single-main-item end -->
                        @endisset
                    </div>
                </div>
                <!-- list-single-main-wrapper-col end -->
                <!-- list-single-sidebar -->
   <div class="col-md-4">
            <div class="sticky-wrapper" style="top: 20px;">
                <div class="sticky-top" style="top: 20px;">
                    <div class="box-widget-item fl-wrap block_box mb-3">
                        <div class="box-widget-item-header">
                            <h3>Working Hours</h3>
                        </div>
                        <div class="box-widget opening-hours fl-wrap">
                                <div class="box-widget-content">
                                    <ul class="no-list-style">
                                        <li class="mon"><span class="opening-hours-day">Monday </span><span
                                                class="opening-hours-time">9 AM - 5 PM</span></li>
                                        <li class="tue"><span class="opening-hours-day">Tuesday </span><span
                                                class="opening-hours-time">9 AM - 5 PM</span></li>
                                        <li class="wed"><span class="opening-hours-day">Wednesday </span><span
                                                class="opening-hours-time">9 AM - 5 PM</span></li>
                                        <li class="thu"><span class="opening-hours-day">Thursday </span><span
                                                class="opening-hours-time">9 AM - 5 PM</span></li>
                                        <li class="fri"><span class="opening-hours-day">Friday </span><span
                                                class="opening-hours-time">9 AM - 5 PM</span></li>
                                        <li class="sat"><span class="opening-hours-day">Saturday </span><span
                                                class="opening-hours-time">9 AM - 3 PM</span></li>
                                        <li class="sun"><span class="opening-hours-day">Sunday </span><span
                                                class="opening-hours-time">Closed</span></li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                    <!--box-widget-item end -->
                    <!--box-widget-item -->
                    <div class="box-widget-item fl-wrap block_box">
                        <div class="box-widget-item-header">
                            <h3>Location / Contacts </h3>
                        </div>
                        <div class="box-widget">

                            <div class="box-widget-content bwc-nopad">
                                <div class="list-author-widget-contacts list-item-widget-contacts bwc-padside">
                                    <ul class="no-list-style">
                                        <li><span><i class="fal fa-map-marker"></i> Adress :</span> <a href="#">USA
                                                27TH Brooklyn NY</a></li>
                                        <li><span><i class="fal fa-phone"></i> Phone :</span> <a
                                                href="#">+7(123)987654</a></li>
                                        <li><span><i class="fal fa-envelope"></i> Mail :</span> <a
                                                href="#">AlisaNoory@domain.com</a></li>
                                        <li><span><i class="fal fa-browser"></i> Website :</span> <a
                                                href="#">themeforest.net</a></li>
                                    </ul>
                                </div>
                                <div class="list-widget-social bottom-bcw-box  fl-wrap">
                                    <ul class="no-list-style">
                                        <li><a href="#" target="_blank"><i class="fab fa-facebook-f"></i></a></li>
                                        <li><a href="#" target="_blank"><i class="fab fa-twitter"></i></a></li>
                                        <li><a href="#" target="_blank"><i class="fab fa-vk"></i></a></li>
                                        <li><a href="#" target="_blank"><i class="fab fa-instagram"></i></a></li>
                                    </ul>
                                    <div class="bottom-bcw-box_link"><a href="#"
                                            class="show-single-contactform tolt" data-microtip-position="top"
                                            data-tooltip="Write Message"><i class="fal fa-envelope"></i></a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--box-widget-item end -->
                    <!--box-widget-item -->
                    <div class="box-widget-item fl-wrap block_box">
                        <div class="box-widget-item-header">
                            <h3>Book a Reservation </h3>
                        </div>
                        <div class="box-widget">
                            <div class="box-widget-content">
                                <form class="add-comment custom-form">
                                    <fieldset>
                                        <label><i class="fal fa-user"></i></label>
                                        <input type="text" placeholder="Your Name *" value="" />
                                        <div class="clearfix"></div>
                                        <label><i class="fal fa-envelope"></i> </label>
                                        <input type="text" placeholder="Email Address*" value="" />
                                        <div class="quantity fl-wrap">
                                            <span><i class="fal fa-user-plus"></i>Persons : </span>
                                            <div class="quantity-item">
                                                <input type="button" value="-" class="minus">
                                                <input type="text" name="quantity" title="Qty"
                                                    class="qty color-bg" data-min="1" data-max="3" data-step="1"
                                                    value="1">
                                                <input type="button" value="+" class="plus">
                                            </div>
                                        </div>
                                        <div class="listsearch-input-item clact date-container">
                                            <select data-placeholder="Room" class="chosen-select no-search-select">
                                                <option>Standard Family Room</option>
                                                <option>Superior Double Room</option>
                                                <option>Deluxe Single Room</option>
                                            </select>
                                        </div>
                                        <textarea cols="40" rows="3" placeholder="Additional Information:"></textarea>
                                    </fieldset>
                                    <button class="btn color2-bg url_btn float-btn"
                                        onclick="window.location.href='booking.html'">Book Room Now <i
                                            class="fal fa-bookmark"></i></button>
                                </form>
                            </div>
                        </div>
                    </div>
                    <!--box-widget-item end -->
                    <!--box-widget-item -->
                    <div class="box-widget-item fl-wrap block_box">
                        <div class="box-widget-item-header">
                            <h3> Price Range </h3>
                        </div>
                        <div class="box-widget">
                            <div class="box-widget-content">
                                <div class="claim-price-wdget fl-wrap">
                                    <div class="claim-price-wdget-content fl-wrap">
                                        <div class="pricerange fl-wrap"><span>Price : </span> 81$ - 320$ </div>
                                        <div class="claim-widget-link fl-wrap"><span>Own or work here?</span><a
                                                href="#">Claim Now!</a></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--box-widget-item end -->

                    <!--box-widget-item -->
                    <div class="box-widget-item fl-wrap block_box">
                        <div class="box-widget-item-header">
                            <h3>Hosted by : </h3>
                        </div>
                        <div class="box-widget">
                            <div class="box-widget-author fl-wrap">
                                <div class="box-widget-author-title">
                                    <div class="box-widget-author-title-img">
                                        <img src="images/avatar/1.jpg" alt="">
                                    </div>
                                    <div class="box-widget-author-title_content">
                                        <a href="user-single.html">Alisa Noory</a>
                                        <span>4 Places Hosted</span>
                                    </div>
                                    <div class="box-widget-author-title_opt">
                                        <a href="user-single.html" class="tolt green-bg" data-microtip-position="top"
                                            data-tooltip="View Profile"><i class="fas fa-user"></i></a>
                                        <a href="#" class="tolt color-bg cwb" data-microtip-position="top"
                                            data-tooltip="Chat With Owner"><i class="fas fa-comments-alt"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--box-widget-item end -->
                    <!--box-widget-item -->
                    <div class="box-widget-item fl-wrap block_box">
                        <div class="box-widget-item-header">
                            <h3>Similar listings :</h3>
                        </div>
                        <div class="box-widget  fl-wrap">
                            <div class="box-widget-content">
                                <!--widget-posts-->
                                <div class="widget-posts  fl-wrap">
                                    <ul class="no-list-style">
                                        <li>
                                            <div class="widget-posts-img"><a href="listing-single.html"><img
                                                        src="images/gallery/thumbnail/1.png" alt=""></a>
                                            </div>
                                            <div class="widget-posts-descr">
                                                <h4><a href="listing-single.html">Iconic Cafe</a></h4>
                                                <div class="geodir-category-location fl-wrap"><a href="#"><i
                                                            class="fas fa-map-marker-alt"></i> 40 Journal Square Plaza, NJ,
                                                        USA</a></div>
                                                <div class="widget-posts-descr-link"><a href="listing.html">Restaurants
                                                    </a> <a href="listing.html">Cafe</a></div>
                                                <div class="widget-posts-descr-score">4.1</div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="widget-posts-img"><a href="listing-single.html"><img
                                                        src="images/gallery/thumbnail/1.png" alt=""></a>
                                            </div>
                                            <div class="widget-posts-descr">
                                                <h4><a href="listing-single.html">MontePlaza Hotel</a></h4>
                                                <div class="geodir-category-location fl-wrap"><a href="#"><i
                                                            class="fas fa-map-marker-alt"></i> 70 Bright St New York, USA
                                                    </a></div>
                                                <div class="widget-posts-descr-link"><a href="listing.html">Hotels </a>
                                                </div>
                                                <div class="widget-posts-descr-score">5.0</div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="widget-posts-img"><a href="listing-single.html"><img
                                                        src="images/gallery/thumbnail/1.png" alt=""></a>
                                            </div>
                                            <div class="widget-posts-descr">
                                                <h4><a href="listing-single.html">Rocko Band in Marquee Club</a></h4>
                                                <div class="geodir-category-location fl-wrap"><a href="#"><i
                                                            class="fas fa-map-marker-alt"></i>75 Prince St, NY, USA</a>
                                                </div>
                                                <div class="widget-posts-descr-link"><a href="listing.html">Events</a>
                                                </div>
                                                <div class="widget-posts-descr-score">4.2</div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="widget-posts-img"><a href="listing-single.html"><img
                                                        src="images/gallery/thumbnail/1.png" alt=""></a>
                                            </div>
                                            <div class="widget-posts-descr">
                                                <h4><a href="listing-single.html">Premium Fitness Gym</a></h4>
                                                <div class="geodir-category-location fl-wrap"><a href="#"><i
                                                            class="fas fa-map-marker-alt"></i> W 85th St, New York, USA</a>
                                                </div>
                                                <div class="widget-posts-descr-link"><a href="listing.html">Fitness</a> <a
                                                        href="listing.html">Gym</a> </div>
                                                <div class="widget-posts-descr-score">5.0</div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                                <!-- widget-posts end-->
                            </div>
                        </div>
                    </div>
                    <!--box-widget-item end -->
                    <!--box-widget-item -->
                    <div class="box-widget-item fl-wrap block_box">
                        <div class="box-widget-item-header">
                            <h3>Tags</h3>
                        </div>
                        <div class="box-widget opening-hours fl-wrap">
                            <div class="box-widget-content">
                                <div class="list-single-tags tags-stylwrap">
                                    @forelse ($residence->highlights ?? [] as $highlight)
                                        <a href="#">{{ $highlight }}</a>
                                    @empty
                                    @endforelse
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--box-widget-item end -->
                    {{-- <!--box-widget-item -->
                    <div class="box-widget-item fl-wrap block_box">
                        <div class="box-widget-item-header">
                            <h3>Nearby Univeristies</h3>
                        </div>
                        <div class="box-widget opening-hours fl-wrap">
                            <div class="box-widget-content">
                                <div class="list-single-tags tags-stylwrap">
                                    @forelse ($residence->universities ?? [] as $university)
                                        <a href="#">{{ $university->title }}</a>
                                    @empty
                                    @endforelse
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--box-widget-item end --> --}}

                    <!--box-widget-item -->
                    <div class="box-widget-item fl-wrap block_box">
                        <div class="box-widget-item-header">
                            <h3>Nearest Locations</h3>
                        </div>
                        <div class="box-widget opening-hours fl-wrap">
                            <div class="box-widget-content">
                                <div class="list-single-tags tags-stylwrap">
                                    @forelse ($residence->nearest_locations ?? [] as $location)
                                        <a href="#">{{ $location->location }} - {{ $location->distance }}</a>
                                    @empty
                                    @endforelse
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--box-widget-item end -->
                    </div>
            </div>
                </div>
                <!-- list-single-sidebar end -->
                <div class="limit-box fl-wrap"></div>
            </div>
            <div class="row">
                <div class="col-12">
                    <!--section  -->
                    <section class="slw-sec" id="smilar-residences">
                        <div class="section-title">
                            <h2>Smilar Residences</h2>
                            <div class="section-subtitle">Find Smilar Residences</div>
                            <span class="section-separator"></span>
                        </div>
                        <div class="listing-slider-wrap fl-wrap">
                            <div class="listing-slider fl-wrap">
                                <div class="swiper-container">
                                    <div class="swiper-wrapper">
                                        @forelse ($smilarResidences as $key => $residence)
                                            <!--  swiper-slide  -->
                                            @include('components.property-card-slider-item', [
                                                'residence' => $residence,
                                            ])
                                        @empty
                                        @endforelse
                                    </div>
                                </div>
                                <div class="listing-carousel-button listing-carousel-button-next2"><i
                                        class="fas fa-caret-right"></i>
                                </div>
                                <div class="listing-carousel-button listing-carousel-button-prev2"><i
                                        class="fas fa-caret-left"></i>
                                </div>
                            </div>
                        </div>

                    </section>
                    <!--section end-->

                </div>
            </div>
        </div>
    </section>
    <div class="limit-box fl-wrap"></div>
@endsection

@section('css')
    <style>
        #smilar-residences .swiper-wrapper img {
            max-height: 235px !important;
        }
        .list-single-main-item_content i{
            color: var(--white-color);
        }

    </style>
@endsection

@section('js')
    <script>
        $(document).ready(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            });
            let id = "{{ $residence->id }}"
            $.ajax({
                url: "{{ route('residence.getrooms', ['id' => ':id']) }}".replace(':id', id),
                type: "GET",
                success: function(response) {
                    $('#rooms').html(response);
                },
                error: function(xhr) {
                    console.error(xhr.responseText);
                    alert("Odalar yüklenirken hata oluştu!");
                }
            });
        });
    </script>
@endsection