@extends('master')

@section('head')
    <title>{{config('app.name')}} | Mijn aanvragen</title>
@endsection

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

    <section id="mijn-aanvragen">
        <div class="container overflow-x-auto">
            @if(count($aanvragen))
                <div class="bg-white my-5">
                    <div class="row px-2 px-lg-4 mx-0 bg-light py-4">
                        <p class="d-none d-md-block col-1 px-0">#</p>
                        <p class="col-6 col-md-2 px-0">
                            @if($type == 'verhuren')
                                <span class="d-lg-none">Door</span><span class="d-none d-lg-table-cell">Aangevraagd door</span>
                            @else
                                Eigenaar
                            @endif
                        </p>
                        <p class="d-none d-md-block col-4 col-md-2 px-0">Kenteken</p>
                        <p class="d-none d-md-block col-4 col-md-2 px-0">Van</p>
                        <p class="d-none d-md-block col-4 col-md-2 px-0">Tot</p>
                        <p class="col-6 col-md-2 px-0">Status</p>
                    </div>

                    @foreach($aanvragen as $key => $aanvraag)
                        <el-collapse accordion v-cloak>
                            <el-collapse-item name="{{ count($aanvragen) - $key }}">
                                <template slot="title">
                                    <div class="row px-2 mx-0 w-100">
                                        <p class="d-none d-md-block col-1">{{ $aanvraag->id }}</p>
                                        <p class="col-6 col-md-2">
                                            @if($type == 'verhuren')
                                                {{$aanvraag->rentalRequestUser->name}} {{ $aanvraag->rentalRequestUser->lastname}}
                                            @else
                                                {{$aanvraag->camperOwner->name}}
                                            @endif

                                            @if (count($notifications) && $notifications->where('request_type', 'rent')->contains('request_id', $aanvraag->id))
                                                <span class="badge badge-success d-inline">Nieuw<span class="d-none d-lg-inline"> bericht</span></span>
                                            @endif
                                        </p>
                                        <p class="d-none d-md-block col-2">{{$aanvraag->camper->plate_number}}</p>
                                        <p class="d-none d-md-block col-2">{{$aanvraag->period->from->format('d-m-Y')}}</p>
                                        <p class="d-none d-md-block col-2">{{$aanvraag->period->untill->format('d-m-Y')}}</p>
                                        <p class="status__{{$aanvraag->status}} col-6 col-md-2">{{statusTranslation($aanvraag->status)}}</p>
                                    </div>
                                </template>
                                <div class="p-4">
                                    <loader></loader>
                                    <aanvraag-detail data="{{$aanvraag->toJson()}}" type="{{ $type }}"></aanvraag-detail>
                                </div>
                            </el-collapse-item>
                        </el-collapse>
                    @endforeach
                </div>
            @else
                <div class="alert alert-secondary my-5" role="alert">
                    Er zijn (nog) geen aanvragen.
                </div>
            @endif
        </div>
    </section>
@endsection