@extends('master')

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

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

    <section id="mijn-aanvragen">
        <div class="container overflow-x-auto">
            @if(count($messages))
                <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="d-none d-md-block col-4 col-md-2 px-0">Soort</p>
                        <p class="col-6 col-md-3 px-0">Van</p>
                        <p class="col-6 col-md-3 px-0">Ontvangen op</p>
                    </div>

                    @foreach($messages as $key => $message)
                        <el-collapse accordion v-cloak>
                            <el-collapse-item name="{{ count($messages) - $key }}">
                                <template slot="title">
                                    <div class="row px-2 mx-0 w-100">
                                        <p class="d-none d-md-block col-1">{{ count($messages) - $key }}</p>
                                        <p class="d-none d-md-block col-4 col-md-2">
                                            {{ $message->type == 'question' ? 'Vraag' : 'Helpdesk' }}
                                        </p>
                                        <p class="col-6 col-md-3">
                                            {{ $message->creator->name or 'Bezoeker' }}

                                            @if (count($notifications) && $notifications->where('request_type', $message->type)->contains('request_id', $message->id))
                                                <span class="badge badge-success d-inline">Nieuw<span class="d-none d-lg-inline"> bericht</span></span>
                                            @endif
                                        </p>
                                        <p class="col-6 col-md-3">{{ $message->created_at->format('d-m-Y') }}</p>
                                    </div>
                                </template>
                                <div class="p-4">
                                    <open-chat type="{{ $message->type }}" :messages="{{ $message->messages }}"></open-chat>
                                </div>
                            </el-collapse-item>
                        </el-collapse>
                    @endforeach
                </div>
            @else
                <div class="alert alert-secondary my-5" role="alert">
                    Geen ontvangen berichten.
                </div>
            @endif
        </div>
    </section>
@endsection