@extends('master')

@section('head')
   @php
   $camperTitle ='camper';

    if ($camper->camper_type == 1) {
      $camperTitle = 'caravan';
    }
   @endphp
    <title>{{$camper->brand}} {{$camperTitle}} huren in {{$camper->location['city']}} | {{config('app.name')}}</title>
    <meta name="description" content="Wil je een {{$camperTitle}}  huren? GoSharing is het platform die {{$camperTitle}}  huurders en verhuurders samen brengt!  ✓ Eenvoudig ✓ Veilig ✓ Betrouwbaar | Bekijk ons aanbod">
@endsection

@section('content')
    <div id="camper">
        <div class="container">
            <div class="camper-title">{{$camper->title}}</div>
             @php
             $isDiscount = 0;

                 $isDiscount = 0;
                  if ($camper->discounts != null){
                      $d = $camper->discounts;
                      if((isset($d['lastMin1']) && $d['lastMin1'] > 0) || (isset($d['lastMin2']) && $d['lastMin2'] > 0) || (isset($d['week1']) && $d['week1'] > 0) || (isset($d['week2']) && $d['week2'] > 0) || (isset($d['week3']) && $d['week3'] > 0) || (isset($d['week4']) && $d['week4'] > 0)){
                          $isDiscount = 1;
                      }
                  }
             @endphp
             @if($isDiscount)
            <span class="label discount is-white">korting</span>
             @endif

            <sticky inline-template>
                <div class="camper-top-nav">
	                <a href="/" class="show-sticky d-none d-sm-flex">
                    	<img src="{{ asset('images/logo.png') }}" alt="Henk Pen" class="img-fluid logo">
                	</a>
                    <a href="#camper-description" id="section1" v-smooth-scroll="{ duration: 600, offset: -250 }" class="active link d-none d-sm-flex"><i class="fal fa-list-alt"></i> <span>Overzicht</span></a>
                    <a href="#faciliteiten" id="section2" class="link d-none d-sm-flex" v-smooth-scroll="{ duration: 600, offset: -250 }"><i class="fal fa-clipboard-list"></i> <span>Faciliteiten</span></a>
                    <a href="#agenda" id="section3" class="link d-none d-sm-flex" v-smooth-scroll="{ duration: 600, offset: -250 }"><i class="fal fa-euro-sign"></i> <span>Beschikbaarheid en prijzen</span></a>
                    <a href="#over-verhuurder" id="section4" class="link d-none d-sm-flex" v-smooth-scroll="{ duration: 600, offset: -250 }"><i class="fal fa-user"></i> <span>Over ons</span></a>
                    <a href="#fotos" id="section5" class="link d-none d-sm-flex" v-smooth-scroll="{ duration: 600, offset: -150 }"><i class="fal fa-camera-alt"></i> <span>Foto's</span></a>
                    <!--<a href=""><i class="fal fa-star"></i> <span>Beoordelingen</span></a>-->

                    <a href="/campers" class="is-normal is-dark-gray breadcrumb-back show-sticky d-none d-sm-flex">
                        <i class="fal fa-angle-left"></i>
                        <span>Terug naar overzicht</span>
                    </a>

                    <div class="row show-sticky">
	                    @foreach($camper->media->sortBy('order_column')->take(1) as $image)
	                        <img src="{{ $image->getUrl('camper') }}" alt="{{ $camper->title }}" class="d-none d-sm-flex">
	                    @endforeach

	                    <div class="is-dark-gray price d-none d-sm-block">
		                    <span class="small">Nachtprijs vanaf</span>
		                    <div class="text-spaced font-normal text-15">
		                        <span class="day-price">{{formatPrice($camper->cheapestAvailablePeriodDayPrice())}}</span>
		                    </div>
	                    </div>

	                    <a href="#agenda" v-smooth-scroll="{ duration: 600, offset: -250 }" class="btn btn-green btn-icon mb-3">
	                        <i class="fas fa-key"></i> Reserveer vrijblijvend deze {{$camperTitle}}
	                    </a>

	                    <button
	                        type="button"
	                        class="btn btn-black-outline btn-icon d-none d-sm-flex"
	                        data-toggle="modal"
	                        data-target="#sendMessageModal"
	                        id="open"
	                    >
	                        <i class="fas fa-comment"></i> Stel een vraag over deze {{$camperTitle}}
	                    </button>
                    </div>
            	</div>
            </sticky>
        </div>

        <div class="camper-breadcrumbs bg-white">
            <div class="container">
                <div class="d-flex justify-content-between align-items-center">
                    <ul class="breadcrumbs-list">
                        <li class="camper-breadcrumb-item">
                            <a href="/">Home</a>
                        </li>
                        <li class="camper-breadcrumb-item">
                            <a href="/campers">Huur een camper of caravan</a>
                        </li>
                        <li class="camper-breadcrumb-item">
                            <span>{{$camper->title}}</span>
                        </li>
                    </ul>

                    <a href="/campers" class="is-normal is-dark-gray breadcrumb-back">
                        <i class="fal fa-angle-left"></i>
                        <span>Terug naar overzicht</span>
                    </a>
                </div>
            </div>
        </div>

        <section id="overzicht">
            <div class="camper-header">
                <div class="camper-header-image">
                    @foreach($camper->media->sortBy('order_column')->take(2) as $image)
                        <img src="{{ $image->getUrl('camper') }}" alt="{{ $camper->title }}">
                    @endforeach
                </div>
                <div class="camper-header-info-wrapper">
                    <div class="camper-header-info">
                        <span class="small">Nachtprijs vanaf</span>
                        <div class="d-flex align-items-center mt-2 mb-5">
                            <span class="day-price">{{formatPrice($camper->cheapestAvailablePeriodDayPrice())}}</span>
                        </div>

                        <a href="#agenda" v-smooth-scroll="{ duration: 600, offset: -250 }" class="btn btn-green btn-icon mb-3">
                            <div class="row">
                                <div class="col-3">
                                    <i class="fas fa-key"></i>
                                </div>
                                Reserveer vrijblijvend deze {{$camperTitle}}
                            </div>
                        </a>

                        <a href="#agenda" v-smooth-scroll="{ duration: 600, offset: -250 }" class="btn btn-orange btn-icon">
	                        <div class="row">
                                <div class="col-3">
                                    <i class="fas fa-calendar-alt"></i>
                                </div>
                                Bekijk beschikbaarheid
                            </div>
                        </a>

                        <button
                            type="button"
                            class="btn btn-black-outline btn-icon"
                            data-toggle="modal"
                            data-target="#sendMessageModal"
                            id="open"
                        >
                            <div class="row">
                                <div class="col-3">
                                    <i class="fas fa-comment"></i>
                                </div>
	                            Stel een vraag over deze {{$camperTitle}}
                            </div>
                        </button>

                        <div class="mt-5 align-self-end">
                            <a href="#fotos" class="btn btn-transparant" v-smooth-scroll="{ duration: 600, offset: -150 }">Bekijk alle foto's</a>
                    </div>
                </div>
            </div>
        </section>

        <send-message-form :owner="{{ $camper->user }}"></send-message-form>

        <section id="camper-description">
            <div class="container">
                <div class="row">
                    <div class="col-md-3">
                        <div class="user-info-aside">
                            @if(empty($camper->user->profile->avatar))
                                <img src="/images/avatar.png" class="mt-0" alt="{{ $camper->user->name }}">
                            @else
                                <img src="{{ $camper->user->profile->avatar }}" class="mt-0" alt="{{ $camper->user->name }}">
                            @endif
                            <span class="is-dark-gray text-18 is-bold">{{$camper->user->name}}</span>

	                        <button
	                            type="button"
	                            class="btn btn-black-outline btn-icon"
	                            data-toggle="modal"
	                            data-target="#sendMessageModal"
	                            id="open"
	                        >
	                            <div class="row">
	                                <div class="col-3">
	                                    <i class="fas fa-comment"></i>
	                                </div>
	                                Stel vrijblijvend een vraag
	                            </div>
	                        </button>
                        </div>

                    </div>
                    <div class="col-md-7 col-lg-8 col-md-offset-1">
                        <div class="camper-description">
                            <div class="camper-description-header">
                                <div class="social-media mt-3 d-none d-sm-flex">
                                    <i class="fas fa-share-alt"></i>
                                    <i class="fab fa-facebook-f"></i>
                                    <i class="fab fa-youtube"></i>
                                </div>
                            </div>
                            <div class="camper-description-title">
                                <h1 class="is-black text-24 is-bold pb-3">{{$camper->title}}</h1>
                                <hr>
                            </div>
                            <div class="camper-description-content">
                                {!! $camper->description !!}
                            </div>
                            <div class="camper-description-specs">
                                <div>
                                    <i class="fas fa-certificate"></i>
                                    <span class="text-capitalize">{{$camper->brand}}</span>
                                </div>
                                @php if (!$camper->camper_type) { @endphp
                                <div>
                                    <i class="fas fa-cogs"></i>
                                    <span class="text-capitalize">
                                        {{$camper->transmission}}
                                        @if($pks = $camper->pk)
                                            <small>({{ $pks}} PK)</small>
                                        @endif
                                    </span>
                                </div>
                                @php } @endphp
                                <div>
                                    <i class="fas fa-users"></i>
                                    <span class="text-capitalize">{{$camper->seats}} personen</span>
                                </div>
                                @php if (!$camper->camper_type) { @endphp
                                <div>
                                    <i class="fas fa-fire"></i>
                                    <span class="text-capitalize">{{$camper->fuel}}</span>
                                </div>
                                @php } @endphp
                                <div>
                                    <i class="fas fa-map-marker-alt"></i>
                                    <span class="text-capitalize">{{$camper->location['city']}}</span>
                                </div>
                                @if (!empty($camper->rules))
                                <div>
                                    <i class="fas fa-paw"></i>
                                    <span>Huisdieren {{($camper->rules['huisdieren']) ? 'toegestaan' : 'niet toegestaan'}}</span>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="faciliteiten" style="background-image: url('{{asset('images/camper-faciliteiten.jpeg')}}')">
            <div class="container">
                <h2 class="text-uppercase text-24 is-white">Faciliteiten</h2>
                <hr class="bg-dark-gray">
                <div class="faciliteiten-grid">

                    <div class="voorzieningen">
                        <div class="bg-white">
                            <h3 class="font-weight-light is-black text-20 mb-3">Voorzieningen</h3>
                            <ul>
                                @foreach($camper->availableFacilities() as $facility)
                                    @if ($facility == 'tweepersoons_bed_Frans_bed')
                                      <li class="text-15 is-dark-gray">{{formatOption('Tweepersoons bed/Frans bed')}}</li>
                                    @else
                                      <li class="text-15 is-dark-gray">{{formatOption($facility)}}</li>
                                    @endif
                                @endforeach
                            </ul>
                        </div>
                    </div>

                    <div class="kenmerken">
                        <div class="bg-white">
                            <h3 class="font-weight-light is-black text-20 mb-3">Kenmerken</h3>
                            <ul>
                               
                                @foreach($camper->availableOptions() as $name => $value)
                                    <li class="text-15 is-dark-gray">

                                      @if ($name == 'voor_het_besturen')
                                         {{ formatOption($value) }}
                                      @else
                                            @if ($name == 'liggewicht')
                                                {{ formatOption('Leeggewicht') }}
                                                @else
                                                {{ formatOption($name) }}
                                            @endif
                                            
                                         @if ($value != 'true' && $value !== '1')
                                            @if ($name == 'lengte' || $name == 'hoogte' || $name == 'breedte')
                                                ({{ $value }} mtr.)
                                            @elseif ($name == 'maxgewicht' || $name == 'liggewicht')
                                            ({{ $value }} kg.)  
                                            @else
                                                ({{ $value }})
                                            @endif
                                        @endif
                                      @endif
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>

                    <div class="huisregels">
                        <div class="bg-white">
                            <h3 class="font-weight-light is-black text-20 mb-3">Huisregels</h3>
                            <div class="regels">
                                <ul>
                                   @if (!empty($camper->rules))
                                    @foreach($camper->availableRules() as $rule => $value)
                                        <li class="grid-2 text-15 is-dark-gray">
                                            <span class="rule is-bold">{{$rule}}</span>
                                            <span class="rule-value">{{$rule == 'voor het besturen' ? formatOption($value)  : $value}}</span>
                                        </li>
                                    @endforeach
                                    @endif
                                </ul>
                            </div>
                            <div class="overig">
                                <h3 class="font-weight-light is-black text-20 mb-3 mt-5">Overig</h3>
                                <ul>
                                    @foreach($camper->insuranceAvailable() as $rule => $value)
                                        <li class="grid-2 text-15 is-dark-gray">
                                            <span class="rule text-capitalize is-bold">{{$rule}}</span>
                                            <span class="rule-value">{{ formatOption($value) }}</span>
                                        </li>
                                    @endforeach
                                </ul>

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


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

        <section id="agenda">

                 <!-- pending="{{$camper->pendingPeriods()->toJson()}}"  by sivakumar chnaged accepted right now, we can ask client to handle this in search query-->
            <camper-period-select v-cloak
                periods="{{$camper->availablePeriods()->toJson()}}"
                {{-- last-day="{{$camper->lastDateOfAvailablePeriods()}}" --}}
                blocked-periods="{{$camper->blockedPeriods()}}"
                custom-periods="{{$camper->customPeriods()}}"
                accepted-periods="{{$camper->acceptedPeriods()}}"
                dates-to-disable="{{$camper->datesToDisable()}}"
                pending="{{$camper->pendingPeriods()->toJson()}}" 
                title="{{$camper->title}}"
                slug="{{$camper->slug}}"
                id="{{ $camper->id }}"
                camper="{{$camper->toJson()}}"
                special-prices="{{ $camper->specialPrices->toJson() }}"
               
            >
                <h2 class="text-uppercase is-black text-24 is-bold mb-4" slot="title">Beschikbaarheid en prijzen</h2>
                <h3 class="is-green is-bold text-24 mb-3" slot="left-title">Beschikbaarheid van deze {{$camperTitle}}</h3>
                <p class="is-dark-gray text-spaced text-15 mb-4" slot="left-content">
                    Bekijk de beschikbaarheid van deze {{$camperTitle}} en selecteer de jouw gewenste ophaal- en inleverdatum.
                </p>
            </camper-period-select>
        </section>

        <section id="over-verhuurder" class="bg-purple">
            <div class="container">
                <div class="row">

                    <div class="col-md-4">
                        <div class="over-verhuurder-box d-flex flex-column">
                            <span class="is-dark-gray text-18 is-bold">{{$camper->user->name}}</span>

                            @if(empty($camper->user->profile->avatar))
                                <img src="/images/avatar.png" class="mt-0" alt="{{ $camper->user->name }}">
                            @else
                                <img src="{{ $camper->user->profile->avatar }}" class="mt-0" alt="{{ $camper->user->name }}">
                            @endif
                        </div>
                    </div>

                    <div class="col-md-6 offset-md-1">
                        <div class="over-verhuurder-content d-flex flex-column">
                            <p class="is-white text-spaced text-15">
                                {{$camper->user->profile->description}}
                            </p>
                        </div>
                    </div>

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

        <section id="fotos" class="bg-white">
            <div class="container">
                <div class="camper-description-title">
                    <h2 class="is-black text-24 is-bold pb-3 text-uppercase">Foto's</h2>
                    <hr>
                </div>
                <div class="camper-thumbnail-wrapper">
                    @foreach($camper->getMedia('camper') as $image)
                        <div class="camper-thumbnail d-flex position-relative">
                            <a href="{{$image->getUrl('camper')}}" data-fancybox="images" data-loop="true">
                                <img src="{{$image->getUrl('thumb')}}" alt="{{$camper->title}}" class="img-fluid">
                                <div class="camper-overlay"><i class="fal fa-plus is-white fa-2x"></i></div>
                            </a>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>
     @if(count($reviews))
        <section id="reviews" class="bg-white">
            <div class="container">
                <div class="camper-description-title">
                    <h2 class="is-black text-24 is-bold pb-3 text-uppercase">Recensies</h2>
                    <hr>
                </div>
            </div>

            <div class="col-sm-4 offset-sm-4">
	            <div id="reviewCarousel" class="carousel slide" data-ride="carousel">
					<div class="carousel-inner">
                    @php
                    $active = 'active'
                    @endphp
                     @foreach($reviews as $review)

				    	<div class="carousel-item {{$active}} ">
							<div class="review d-flex flex-column">
								<div class="mt-5" {{$review->review_rating}}>
                                  @for ($i = $review->review_rating ; $i  > 0 ; $i--)
                                     <i class="fa fa-star is-green text-20"></i>
                                  @endfor

                                  @for ($i = 5-$review->review_rating ; $i  > 0 ; $i--)
                                    <i class="fa fa-star-o is-green text-20"></i>
                                  @endfor

								</div>

								<span class="is-dark-gray text-spaced text-20 mb-4 mt-4">
                                {{ $review->rentalRequestUser->name}}</span>

								<p class="is-dark-gray text-spaced text-14 mb-5"><em>"{{$review->review_description}}"</em></p>
							</div>
				    	</div>
                         {{ $active = ''}}
                       @endforeach

					</div>
					<a class="carousel-control-prev" href="#reviewCarousel" role="button" data-slide="prev">
				    	<i class="fa fa-chevron-left is-dark-gray text-24" aria-hidden="true"></i>
						<span class="sr-only">Previous</span>
					</a>
					<a class="carousel-control-next" href="#reviewCarousel" role="button" data-slide="next">
				    	<i class="fa fa-chevron-right is-dark-gray text-24" aria-hidden="true"></i>
						<span class="sr-only">Next</span>
					</a>
				</div>
            </div>
        </section>
     @endif
        <section id="overview" class="bg-white">
            <div class="container">
                <div class="camper-description-title">
                    <h2 class="is-black text-24 is-bold pb-3 text-uppercase">Anderen bekeken ook</h2>
                    <hr>
                </div>
                <div class="row">

                    @foreach($campers as $camper)
                    <div class="col-lg-3">
                        @include('partials.camper', [
                            'image' => $camper->getFirstMediaUrl('camper', 'thumb-overview'),
                            'persons' => $camper->sleeping_number,
                            'url' => $camper->url,
                            'transmission' => ucfirst($camper->transmission),
                            'title' => strip_tags(str_limit($camper->title, 57)),
                            'location' => $camper->location['city'],
                            'price' => formatPrice($camper->cheapestAvailablePeriodDayPrice())
                        ])
                    </div>
                    @endforeach


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

        @include('home.sections.info')
        @include('home.sections.usps')
        @include('partials.footer_newsletter')
    </div>


    <script type="application/ld+json">
	{
	  "@context": "http://schema.org/",
	  "@type": "Product",
	  "name": "{{$camper->title}}",
	  "image": [
        @foreach($camper->getMedia('camper') as $image)
            "{{$image->getUrl('camper')}}",
        @endforeach
	   ],
	  "description": "{!! $camper->description !!}",
	  "brand": {
	    "@type": "Thing",
	    "name": "{{$camper->brand}}"
	  },
	  "offers": {
	    "@type": "Offer",
	    "priceCurrency": "EUR",
	    "price": "{{formatPrice($camper->cheapestAvailablePeriodDayPrice())}}"

	  }
	}
	</script>
@endsection

@section('scripts')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.1/jquery.fancybox.min.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.1/jquery.fancybox.min.js"></script>
    <script>

        const applyClickable = () => {
            const clickableDays = document.querySelectorAll(".c-day-background")
            clickableDays.forEach(day => {
                if(day.style.backgroundColor == "rgb(191, 201, 202)") {
                    day.closest(".c-day-popover").classList.add("clickable")
                }
            })
        }

        window.addEventListener("load", (event) => {
            applyClickable()
        })

        const arrows = document.querySelectorAll(".c-arrow") 
        arrows.forEach(arrow => {
            arrow.addEventListener("click",  applyClickable)
        })

    </script>
@endsection