@extends('master')

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

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

    <section id="verhuur-campers" class="pb-5 bg-white">
        <camper-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
                            camper{{ count($campers) > 1 ? 's' : '' }}</h5>
                        <a href="#" @click.prevent="addNewCamper" class="btn btn-green mx-auto mx-md-0">Nieuwe camper
                            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 camper" 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 camper" 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="removeCamper()">Camper verwijderen</button>
                     </div>

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