@extends('master')

@section('head')
    <title>{{config('app.name')}} | Mijn Caravans</title>
    <meta name="description" content="">
@endsection

@section('content')
    @include('dashboard.partials._header')

    <section id="verhuur-campers" class="pb-5 bg-white">
        <caravan-form-wrapper inline-template ref="camperWrapper">
            <div>
                <loader></loader>

                <div class="container py-4" v-if="indexView">
                    <div class="d-flex justify-content-between align-items-center camper-step-title flex-wrap">
                        <h5 class="dashboard-title p-0 m-0 mb-3 mb-md-0 mx-auto mx-md-0">Statistieken</h5>
                    </div>

                    <hr class="dashboard-title-divider pb-3">
                    
                    <div class="row">
	                    <div class="col-sm-4">
		                    <div class="statistic border d-flex flex-column text-center mb-2">
		                    	<span class="is-dark-gray text-spaced text-15 mb-3 mt-4">Totaal aantal dagen verhuurd</span>
								<span class="is-green is-bold text-30 mb-4">{{$arr_statistics['tot_booking']}}</span>
		                    </div>
	                    </div>
	                    
	                    <div class="col-sm-4">
		                    <div class="statistic border d-flex flex-column text-center mb-2">
		                    	<span class="is-dark-gray text-spaced text-15 mb-3 mt-4">Totaal aantal keer verhuurd</span>
								<span class="is-green is-bold text-30 mb-4">{{$arr_statistics['ncount']}}</span>
		                    </div>
	                    </div>
	                    
	                    <div class="col-sm-4">
		                    <div class="statistic border d-flex flex-column text-center mb-2">
		                    	<span class="is-dark-gray text-spaced text-15 mb-3 mt-4">Totale huuropbrengst</span>
								<span class="is-green is-bold text-30 mb-4">{{formatPrice($arr_statistics['rental_income'])}}</span>
		                    </div>
	                    </div>
                    </div>
                    
                    <div class="d-flex justify-content-between align-items-center camper-step-title flex-wrap">
                        <h5 class="dashboard-title p-0 m-0 mb-3 mb-md-0 mx-auto mx-md-0">Mijn caravan{{ count($campers) > 1 ? 's' : ''}}</h5>
                        <a href="#" @click.prevent="addNewCamper" class="btn btn-green mx-auto mx-md-0">Nieuwe caravan toevoegen</a>
                    </div>

                    <hr class="dashboard-title-divider pb-3">

                    <div class="row">
                        @foreach($campers as $camper)
                            @php
                               $camper_tot_booking = isset($arr_rent_campers[$camper->id]) ? (!$arr_rent_campers[$camper->id]->tot ? 0 : $arr_rent_campers[$camper->id]->tot) : 0;
                               $camper_rental_income = isset($arr_rent_campers[$camper->id]) ? (!$arr_rent_campers[$camper->id]->rental_income ? 0 : $arr_rent_campers[$camper->id]->rental_income) : 0;
                               $camper_income = $camper_tot_booking - ($camper_tot_booking * Auth::user()->fee_percentage / 100) + $camper_rental_income;

                            @endphp
                            <div class="col-md-6 mb-4">
                                <a href="{{ $camper->is_concept ? '#' : $camper->url }}">
                                    <div class="camper-card d-flex flex-column">
                                        <div class="title text-18 is-black is-light text-capitalize">
                                            {{ $camper->title }}

                                            <h5 class="d-inline">
                                                @if($camper->is_concept)
                                                    <span class="badge badge-dark ml-3">Concept</span>
                                                @else
                                                    <span class="badge badge-success ml-3">Gepubliceerd</span>
                                                @endif
                                            </h5>
                                        </div>

                                        <div class="image">
                                            @if($images = $camper->getFirstMediaUrl('camper', 'overview'))
                                                <img src="{{ $camper->getFirstMediaUrl('camper', 'overview') }}" class="img-fluid">
                                            @else
                                                <img src="{{ asset('images/home-key.jpg') }}" class="img-fluid">
                                            @endif
                                            <button class="btn btn-green" @click.prevent="editCamper('{{$camper->slug}}')"><i class="far fa-pencil-alt"></i> Bewerken</button>
                                        </div>

                                        <div class="description bg-white is-dark-gray text-spaced text-15">
                                            <div class="row">
	                                            <div class="col-9 col-sm-6">
		                                            <span>Totaal aantal dagen verhuurd:</span>
	                                            </div>
	                                            <div class="col-3 col-sm-6">
		                                            <span class="is-green is-bold">{{isset($arr_rent_campers[$camper->id]) ? (!$arr_rent_campers[$camper->id]->tot_booking ? 0 : $arr_rent_campers[$camper->id]->tot_booking) : 0}}</span>
	                                            </div>
	                                            <div class="col-9 col-sm-6">
		                                            <span>Totaal aantal keer verhuurd:</span>
	                                            </div>
	                                            <div class="col-3 col-sm-6">
		                                            <span class="is-green is-bold">{{isset($arr_rent_campers[$camper->id]) ? (!$arr_rent_campers[$camper->id]->cnt ? 0 : $arr_rent_campers[$camper->id]->cnt) : 0}}</span>
	                                            </div>
	                                            <div class="col-9 col-sm-6">
		                                            <span>Totale huuropbrengst:</span>
	                                            </div>
	                                            <div class="col-3 col-sm-6">
		                                            <span class="is-green is-bold">{{formatPrice($camper_income)}}</span>
	                                            </div>
                                            </div>
                                        </div>
                                    </div>
                                </a>

                            </div>
                        @endforeach
                    </div>
                </div>

                <div class="camper-edit-wrapper container py-4" v-else>
                    <stepper name="Plaats nieuwe Caravan" ref="camperDescription" active="true" type="description" number="1">
                        <camper-description></camper-description>
                    </stepper>

                    <stepper name="Foto's" type="images" number="2">
                        <camper-images svg="{{ file_get_contents(public_path('images/custom-add.svg')) }}"></camper-images>
                    </stepper>


                     <stepper name="Extra beschikbaarheid" type="bookingRestrictions" number="3">
                        <camper-restrictions-form></camper-restrictions-form>
                    </stepper>

                    <stepper name="Beschikbaarheid" type="periods" number="4">
                        <camper-period-form></camper-period-form>
                    </stepper>

                    <stepper name="Standaard prijzen" type="pricing" number="5">
                        <camper-pricing></camper-pricing>
                    </stepper>

                    <stepper name="Speciale prijzen" type="specialPrices" number="6">
                        <camper-special-prices></camper-special-prices>
                    </stepper>

                    <stepper name="Korting" type="discount" number="7">
                       <camper-discount></camper-discount>
                    </stepper>

                    <stepper name="Jouw caravan" type="specifications" number="8">
                        <camper-specification></camper-specification>
                    </stepper>

                    <stepper name="Huisregels" type="rules" number="9">
                        <camper-rules></camper-rules>
                    </stepper>

                    <stepper name="Verzekeren, pechhulp & vervangend vervoer" type="insurance" number="10">
                        <camper-insurance></camper-insurance>
                    </stepper>

                    <stepper name="Stop boekings- en publicatiedatums" type="dates" number="11">
                        <camper-dates></camper-dates>
                    </stepper>
                    <button class="btn btn-green ml-5 mt-4" @click="changeStatus('review')" :disabled="notCompleted" v-if="camper.is_concept" v-cloak v-html="submitButtonText"></button>
                    <button class="btn btn-red ml-5 mt-4" @click="changeStatus('depublish')" :disabled="notCompleted" v-else v-cloak>Depubliceer (niet meer tonen)</button>
                    <button class="btn btn-red ml-5 mt-4" @click="removeCaravan()">Caravan verwijderen</button>
                </div>

                @include('partials.modals.submitted-for-review-modal')
            </div>
        </caravan-form-wrapper>
    </section>
@endsection