@extends('website.layout.master')

@section('title')
    Property Details
@endsection

@section('content')

    <style>
        .page-header__inner {
            position: relative;
            display: block;
            text-align: center;
            padding: 200px 0 100px;
            z-index: 15;
        }

        @media only screen and (max-width: 768px) {
            #myChart {
                display: none;
            }

            #myChart1D {
                display: block !important;
            }
        }
        @media only screen and (max-width: 767px) {
            .section-title__title {
                font-size: 28px;
                line-height: 44px;
            }
        }
    </style>

    <!--Page Header Start-->
    <section class="page-header">
        <div class="page-header-bg"
             style="background-image: url({{ URL::asset('website/images/backgrounds/property.jpg')}})">
        </div>
        <div class="page-header__overly"></div>
        <div class="container">
            <div class="page-header__inner">
                <ul class="thm-breadcrumb list-unstyled">
                    <li><a href="{{route("home")}}">Home</a></li>
                    <li><span>/</span></li>
                    <li> Property Details</li>
                </ul>
                <h2> Property Details</h2>
            </div>
        </div>
    </section>

    <!--Apartments Two Page Start-->
    <section class="apartment-details-one" style="background-color: black;padding: 0px !important;">
        <div class="container">
            <div class="row py-5">
                <div class="col-md-9">
                    <h3 class="apartment-details-one__content-title" style="color: white">{{ $property->name }}</h3>
                    <h6 style="color:white" class="mb-3">{{ $property->location }}</h6>
                </div>
                <div class="col-md-3">
                    <h3 style="color: white !important;"><b>{{ $property->property_type }}</b></h3>
                </div>
            </div>
            <div class="row">

                <div class="col-xl-12">
                    <div class="brand-one__inner">
                        <div class="thm-swiper__slider swiper-container" data-swiper-options='{"spaceBetween": 100, "slidesPerView": 5, "autoplay": { "delay": 5000 }, "breakpoints": {
                        "0": {
                            "spaceBetween": 30,
                            "slidesPerView": 1
                        },
                        "375": {
                            "spaceBetween": 30,
                            "slidesPerView": 1
                        },
                        "575": {
                            "spaceBetween": 30,
                            "slidesPerView": 1
                        },
                        "767": {
                            "spaceBetween": 50,
                            "slidesPerView": 1
                        },
                        "991": {
                            "spaceBetween": 50,
                            "slidesPerView": 1
                        },
                        "1199": {
                            "spaceBetween": 100,
                            "slidesPerView": 1
                        }
                    }}'>
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <a href="{{URL::asset('admin/assets/uploads/properties/'.$property->main_image)}}" target="_blank">
                                        <img src="{{URL::asset('admin/assets/uploads/properties/'.$property->main_image)}}"
                                             style="opacity: 1;width: 100%;height:500px">
                                    </a>
                                </div>
                                @forelse($property->property_images as $p=>$partner)
                                    <div class="swiper-slide">
                                        <a href="{{ url::asset('admin/assets/uploads/properties/'.$partner->image) }}" target="_blank">
                                            <img src="{{ url::asset('admin/assets/uploads/properties/'.$partner->image) }}"
                                                 style="opacity: 1;width: 100%;height:500px">
                                        </a>
                                    </div>
                                @empty
                                @endforelse
                            </div>
                            <div class="swiper-button-next" style="color: white !important;font-weight: bold !important;"></div>
                            <div class="swiper-button-prev" style="color: white !important;font-weight: bold !important;"></div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-12">
                    {{--                    <div class="apartment-details-one__img-box">--}}
                    {{--                        <div class="apartment-details-one__img">--}}
                    {{--                            <img src="{{URL::asset('admin/assets/uploads/properties/'.$property->main_image)}}"--}}
                    {{--                                 alt="">--}}
                    {{--                        </div>--}}
                    {{--                    </div>--}}
                    <div class="apartment-details-one__list-box">

                        <ul class="apartment-details-one__list" style="align-items: start !important;">
                            @if(isset($property->area) && !empty($property->area))
                                <li>
                                    <div class="apartment-details-one__list-content">
                                        <h3>{{ ($property->area) ? $property->area : '--' }}</h3>
                                        <h5>SQUARE AREAS</h5>
                                    </div>
                                </li>
                            @endif
                            @if(isset($property->floors) && !empty($property->floors))
                                <li>
                                    <div class="apartment-details-one__list-content">
                                        <h3>{{ ($property->floors) ? $property->floors : '--' }}</h3>
                                        <h5>floor</h5>
                                    </div>
                                </li>
                            @endif
                            @if(isset($property->bedrooms) && !empty($property->bedrooms))
                                <li>
                                    <div class="apartment-details-one__list-content">
                                        <h3>{{ ($property->bedrooms) ? $property->bedrooms : '--' }}</h3>
                                        <h5>Bedrooms</h5>
                                    </div>
                                </li>
                            @endif
                            @if(isset($property->details) && !empty($property->details))
                                <li>
                                    <div class="apartment-details-one__list-content">
                                        <h3>{{ ($property->bathrooms) ? $property->bathrooms : '--' }}</h3>
                                        <h5>bathrooms</h5>
                                    </div>
                                </li>
                            @endif
                            @if(isset($property->terrace) && !empty($property->terrace))
                                <li>
                                    <div class="apartment-details-one__list-content">
                                        <h3>{{ ($property->terrace) ? $property->terrace : '--' }}</h3>
                                        <h5>terrace</h5>
                                    </div>
                                </li>
                            @endif
                            @if(isset($property->parking) && !empty($property->parking))
                                <li>
                                    <div class="apartment-details-one__list-content">
                                        <h3>{{ ($property->parking) ? $property->parking : '--' }}</h3>
                                        <h5>Parking's</h5>
                                    </div>
                                </li>
                            @endif
                        </ul>
                    </div>
                    <div class="apartment-details-one__content-box" style="padding-bottom: 0px !important;">
                        <p class="apartment-details-one__text-1 MyWhite">{{ $property->short_description }}</p>

                        <section class="floor-plan mt-5" style="background-color: black;padding-bottom: 0px !important">
                            <div class="container-fluid">
                                <div class="floor-plan__top">
                                    <div class="row">
                                        <div class="col-xl-12 col-lg-12">
                                            <div class="floor-plan__top-left">
                                                <div class="section-title text-left">
                                                    <h2 class="section-title__title"><b>Estimated P & L</b></h2>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="floor-plan__main-tab-box tabs-box">
                                    <div class="tabs-content">
                                        <!--tab-->
                                        <div class="tab active-tab" id="penthouse">
                                            <div class="floor-plan__tab-content-inner">
                                                <div class="floor-plan__tab-content-left">
                                                    <ul class="list-unstyled floor-plan__tab-content-details">
                                                        <li>
                                                            <p class="MyWhite">Average Monthly Revenue</p>
                                                            <span class="MyWhite">£{{ $property->average_monthly_revenue }}</span>
                                                        </li>
                                                        <li>
                                                            <p class="MyWhite">Monthly cleaning cost </p>
                                                            <span class="MyWhite">£{{ $property->estimated_monthly_cleaning_cost }}</span>
                                                        </li>
                                                        <li>
                                                            <p class="MyWhite">Monthly Utility & Council Tax</p>
                                                            <span class="MyWhite">£{{ $property->utility_council_tax }}</span>
                                                        </li>
                                                        <li>
                                                            <p class="MyWhite">Fixed Rent</p>
                                                            <span class="MyWhite">£{{ $property->fixed_rent }}</span>
                                                        </li>
                                                        <li>
                                                            <p class="MyWhite"
                                                               style="font-size: 20px !important;font-weight: bold !important;">
                                                                Estimated Profit</p>
                                                            <span class="MyWhite"
                                                                  style="font-size: 20px !important;font-weight: bold !important;">£{{ $property->estimated_profit }}</span>
                                                        </li>
                                                    </ul>
                                                </div>
                                                <div style="margin-left: 150px !important;margin-top: 20px">
                                                    <div id="myChart"
                                                         style="width:100%;max-width:1000px; height:450px"></div>
                                                </div>
                                                <div style="display: none;margin-top: 20px" id="myChart1D">
                                                    <div id="myChart1"></div>
                                                </div>
                                            </div>
                                        </div>

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

                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--Apartments Two Page End-->


    <section class="apartment-details-one" style="background-color: black;padding: 0px !important;">
        <div class="container">
            <div class="row">
                <div class="col-xl-12">
                    <div class="apartment-details-one__list-box">
                        <ul class="list-unstyled apartment-details-one__list" style="align-items: start !important;">
                            @if(isset($property->reference_number) && !empty($property->reference_number))
                                <li>
                                    <div class="apartment-details-one__list-content">
                                        <h3>{{ ($property->reference_number) ? $property->reference_number : '--' }}</h3>
                                        <h5>Reference Number</h5>
                                    </div>
                                </li>
                            @endif
                            @if(isset($property->available_date) && !empty($property->available_date))
                                <li>
                                    <div class="apartment-details-one__list-content">
                                        <h3>{{ ($property->available_date) ? \Carbon\Carbon::parse($property->available_date)->format('d M Y') : '--' }}</h3>
                                        <h5>Available Date</h5>
                                    </div>
                                </li>
                            @endif
                            @if(isset($property->rent) && !empty($property->rent))
                                <li>
                                    <div class="apartment-details-one__list-content">
                                        <h3>£{{ ($property->rent) ? $property->rent : '--' }}</h3>
                                        <h5>Rent</h5>
                                    </div>
                                </li>
                            @endif
                            @if(isset($property->sourcing_fee) && !empty($property->sourcing_fee))
                                <li>
                                    <div class="apartment-details-one__list-content">
                                        <h3>£{{ ($property->sourcing_fee) ? $property->sourcing_fee : '--' }}</h3>
                                        <h5>Sourcing Fee</h5>
                                    </div>
                                </li>
                            @endif
                            @if(isset($property->monthly_occupancy_rate) && !empty($property->monthly_occupancy_rate))

                                @if($property->type=="SA")
                                    <li>
                                        <div class="apartment-details-one__list-content">
                                            <h3>
                                                £{{ ($property->monthly_occupancy_rate) ? $property->monthly_occupancy_rate : '--' }}</h3>
                                            <h5>Monthly Occupancy Rate</h5>
                                        </div>
                                    </li>
                                @endif

                            @endif
                        </ul>
                    </div>
                    {!! $property->overview !!}
                    <br><br><br>
                </div>
            </div>
        </div>
    </section>

{{--    <section class="gallery-one gallery-four" style="background-color: black">--}}
{{--        <div class="container">--}}
{{--            <div class="gallery-one__carousel owl-carousel owl-theme thm-owl__carousel owl-loaded owl-drag"--}}
{{--                 data-owl-options="{--}}
{{--                    &quot;loop&quot;: true,--}}
{{--                    &quot;autoplay&quot;: true,--}}
{{--                    &quot;margin&quot;: 20,--}}
{{--                    &quot;nav&quot;: false,--}}
{{--                    &quot;dots&quot;: false,--}}
{{--                    &quot;smartSpeed&quot;: 500,--}}
{{--                    &quot;autoplayTimeout&quot;: 10000,--}}
{{--                    &quot;navText&quot;: [&quot;<span class=\&quot;fa fa-angle-left\&quot;></span>&quot;,&quot;<span class=\&quot;fa fa-angle-right\&quot;></span>&quot;],--}}
{{--                    &quot;responsive&quot;: {--}}
{{--                        &quot;0&quot;: {--}}
{{--                            &quot;items&quot;: 1--}}
{{--                        },--}}
{{--                        &quot;768&quot;: {--}}
{{--                            &quot;items&quot;: 3--}}
{{--                        },--}}
{{--                        &quot;992&quot;: {--}}
{{--                            &quot;items&quot;: 4--}}
{{--                        },--}}
{{--                        &quot;1200&quot;: {--}}
{{--                            &quot;items&quot;: 5--}}
{{--                        }--}}
{{--                    }--}}
{{--                }">--}}

{{--                <div class="owl-stage-outer">--}}
{{--                    <div class="owl-stage"--}}
{{--                         style="transform: translate3d(-1286px, 0px, 0px); transition: all 0.5s ease 0s; width: 3345px;">--}}
{{--                        @forelse($property->property_images as $p=>$partner)--}}
{{--                            <div class="owl-item cloned" style="width: 237.3px; margin-right: 20px;">--}}
{{--                                <div class="item">--}}
{{--                                    <div class="gallery-one__single">--}}
{{--                                        <div class="gallery-one__img-box">--}}
{{--                                            <div class="gallery-one__img">--}}
{{--                                                <img--}}
{{--                                                        src="{{ url::asset('admin/assets/uploads/properties/'.$partner->image) }}"--}}
{{--                                                        alt="" style="width: 100%;height:350px">--}}
{{--                                            </div>--}}
{{--                                            <div class="gallery-one__content">--}}
{{--                                                <p class="gallery-one__sub-title">{{ $property->type }}</p>--}}
{{--                                                <h3 class="gallery-one__title"><a>{{ $property->name }}</a></h3>--}}
{{--                                            </div>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        @empty--}}
{{--                        @endif--}}
{{--                    </div>--}}
{{--                </div>--}}

{{--                <div class="owl-dots disabled"></div>--}}
{{--            </div>--}}
{{--        </div>--}}
{{--    </section>--}}
    <!--Google Map Start-->
    <section class="contact-page-google-map" style="background-color: black">
        <div id="map" style="width:100%;height:500px"></div>

    </section>
    <!--Google Map End-->
@endsection
@section('script')
    <script src="https://www.gstatic.com/charts/loader.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyABXn0Dg5Bkbn8UnQFbMaaqbAQBMAsivEc&callback=initMap"
            async defer></script>
    <script>

        function initMap() {

            // Address you want to display on the map
            const address = "{{ $property->location }}";

            // Create a map object centered on a default location
            const map = new google.maps.Map(document.getElementById('map'), {
                zoom: 15,
                center: {lat: -34.397, lng: 150.644} // Default location, will be updated after geocoding
            });

            // Geocode the address
            const geocoder = new google.maps.Geocoder();
            geocodeAddress(geocoder, map, address);
        }

        function geocodeAddress(geocoder, map, address) {
            geocoder.geocode({'address': address}, (results, status) => {
                if (status === 'OK') {
                    map.setCenter(results[0].geometry.location);
                    new google.maps.Marker({
                        map: map,
                        position: results[0].geometry.location
                    });
                } else {
                    alert('Geocode was not successful for the following reason: ' + status);
                }
            });
        }

        google.charts.load('current', {'packages': ['corechart']});
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {
            const data = google.visualization.arrayToDataTable([
                ['Contry', 'Mhl'],
                ['Average Monthly Revenue', {{ $property->average_monthly_revenue }}],
                ['Monthly cleaning cost', {{ $property->estimated_monthly_cleaning_cost }}],
                ['Estimated Monthly Utility & Council Tax ', {{ $property->utility_council_tax }}],
                ['Fixed Rent ', {{ $property->fixed_rent }}]
            ]);
            const options = {
                title: ''
            };
            const chart = new google.visualization.PieChart(document.getElementById('myChart'));
            chart.draw(data, options);

        }

        google.charts.load('current', {'packages': ['corechart']});
        google.charts.setOnLoadCallback(drawChart1);

        function drawChart1() {
            const data = google.visualization.arrayToDataTable([
                ['Contry', 'Mhl'],
                ['Average Monthly Revenue', {{ $property->average_monthly_revenue }}],
                ['Monthly cleaning cost', {{ $property->estimated_monthly_cleaning_cost }}],
                ['Estimated Monthly Utility & Council Tax ', {{ $property->utility_council_tax }}],
                ['Fixed Rent ', {{ $property->fixed_rent }}]
            ]);
            const options = {
                title: ''
            };
            const chart = new google.visualization.PieChart(document.getElementById('myChart1'));
            chart.draw(data, options);

        }

    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var swiperContainers = document.querySelectorAll('.swiper-container');

            swiperContainers.forEach(function (container) {
                var swiper = new Swiper(container, {
                    spaceBetween: 100,
                    slidesPerView: 5,
                    autoplay: {
                        delay: 5000
                    },
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev'
                    },
                    breakpoints: {
                        0: {
                            spaceBetween: 30,
                            slidesPerView: 1
                        },
                        375: {
                            spaceBetween: 30,
                            slidesPerView: 1
                        },
                        575: {
                            spaceBetween: 30,
                            slidesPerView: 1
                        },
                        767: {
                            spaceBetween: 50,
                            slidesPerView: 1
                        },
                        991: {
                            spaceBetween: 50,
                            slidesPerView: 1
                        },
                        1199: {
                            spaceBetween: 100,
                            slidesPerView: 1
                        }
                    }
                });
            });
        });
    </script>

@endsection