@extends('master')

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

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

    <section id="helpdesk">
        <div class="container overflow-x-auto">
            <div class="my-5">
                @if(auth()->user()->isAdmin())
                    @if(count($messages))
                        <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">
                                                {{ ucfirst($message->type) }}
                                            </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>
                                            @if(count($message->messages))
                                                <p class="col-6 col-md-3">{{ $message->messages->last()->created_at->format('d-m-Y') }}</p>
                                            @else
                                                <p class="col-6 col-md-3">{{ $message->created_at->format('d-m-Y') }}</p>
                                            @endif
                                        </div>
                                    </template>
                                    <div class="p-4">
                                        <open-chat :type="'helpdesk'" :messages="{{ $message->messages }}"></open-chat>
                                    </div>
                                </el-collapse-item>
                            </el-collapse>
                        @endforeach
                    @else
                        <div class="alert alert-secondary my-5" role="alert">
                            Geen ontvangen berichten.
                        </div>
                    @endif
                @else
                    <h4 class="text-uppercase font-weight-normal">Helpdesk</h4>
                    <hr>

                    <div class="row mt-5">
                        <div class="col-12 col-md-4 offset-md-1 mx-auto">
                            <div class="row text-center">
                                <div class="col-6">
                                    <img src="{{ asset('/images/luuk.jpg') }}" alt="Luuk" class="helpdesk__user-image">
                                    <p class="mt-3 text-success font-weight-bold">Luuk</p>
                                </div>
                                <div class="col-6">
                                    <img src="{{ asset('/images/belinda.jpg') }}" alt="Berry" class="helpdesk__user-image">
                                    <p class="mt-3 text-success font-weight-bold">Belinda</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-md-6 offset-md-1 mx-auto text-center">
	                        <div class="row mb-4">
		                        <div class="col-md-6 text-right">
			                        <a id="call-helpdesk" href="tel:+(0)53-4348528 " class="btn btn-purple-outline mr-lg-2 mb-lg-0 w-100 send-message">
		                                <i class="fa fa-phone mr-2"></i>053 - 4348528 
		                            </a>
		                        </div>
		                        
		                        <div class="col-md-6 text-left">
		                            <div id="message-helpdesk">
		                            	<open-chat :type="'helpdesk'" :messages="{{ $messages }}" :contact_request_id="{{ $contactRequestId or 'null' }}"></open-chat>
		                        	</div>
		                        </div>
	                        </div>
                                
                            <h5 class="font-weight-normal">Of ga direct naar</h5>
                            <hr>
                            <ul>
                                <li class="mt-3">
                                    <a href="/hoe-werkt-het-huren-van-een-camper" class="text-muted">> Hoe werkt huren</a>
                                </li>
                                <li class="mt-3">
                                    <a href="/faq-huurders" class="text-muted">> Veelgestelde vragen</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </section>
@endsection