@extends('admin.layouts.app')
@section('content')
<div class="main-content" id="panel">
    <!-- Topnav -->
    @include('admin.layouts.navbar')
    <!-- Header -->

    <!-- Page content -->
    <div class="container-fluid mt-6">

        <div class="row">
            <div class="col-xl-12">
            <div class="card bg-default">
                <div class="card-header bg-transparent">
                <div class="row align-items-center">
                    <div class="col">
                    <h6 class="text-light text-uppercase ls-1 mb-1">Notifications</h6>
                    <h5 class="h3 text-white mb-0">Your Notification is here......</h5>
                    </div>
                </div>
                </div>
            </div>
        </div>
        {{-- @dd($unread) --}}
        @forelse (Auth::user()->notifications as $notification)
        @php
            $type = App\UserType::find($notification->data['type']);
        @endphp
        <div class="toast bg-white w-100 p-2 border-bottom" role="alert" aria-live="assertive" aria-atomic="true" @if(in_array($notification->id,$un_id)) style="background:#9fc3ff !important; @endif">
            <div class="toast-header">
                <div class="row">
                    <div class="col-md-3">
                        <img src="{{ asset('storage/'.App\User::find($notification->data['id'])->image ) }}" class="rounded mr-2 w-50" alt="...">
                    </div>
                    <div class="col-md-7 text-left">
                        <div class="toast-body">
                            <strong class="mr-auto text-blue ">New {{$type->type_name}} Registraion</strong>
                            <p style="font-family:serif">Hello, Admin! {{$notification->data['fname'].' '.$notification->data['lname']}} is register as a  {{$type->type_name}} at {{ Carbon\Carbon::parse($notification->created_at)->diffForHumans()}}.</p>
                            <a href="#" class="badge bg-gray text-dark"><span class="text-dark font-weight-bold">Name</span> : {{$notification->data['fname'].' '.$notification->data['lname']}}</a>
                            <a href="#" class="badge bg-gray text-dark"><span class="text-dark font-weight-bold">Email</span> : {{$notification->data['email']}}</a>
                            <a href="#" class="badge bg-gray text-dark"><span class="text-dark font-weight-bold">Type</span> : {{$type->type_name}}</a>

                        </span>
                        </div>
                    </div>
                    <div class="col-md-2 text-right">
                        <small class="text-right font-weight-bold" data-toggle="tooltip" data-placement="top" title="{{ $notification->created_at }}">{{ Carbon\Carbon::parse($notification->created_at)->diffForHumans()}}</small>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 text-right">
                        <a href="#"><i class="fa fa-trash p-2 text-danger " aria-hidden="true"  data-toggle="tooltip" data-placement="top" title="Delete Notification"></i></a>
                    <a href="#"><i class="fa fa-user p-2 text-dark" aria-hidden="true"  data-toggle="tooltip" data-placement="top" title="Assign Coach"></i></a>
                    </div>
                </div>
            </div>

        </div>
        @empty
        <a href="#!" class="list-group-item list-group-item-action">
            <div class="row align-items-center">
              <div class="col-auto">
                <!-- Avatar -->

              </div>
              <div class="col ml--2">
                <div class="d-flex justify-content-between align-items-center">
                  <div>
                    <h4 class="mb-0 text-sm"></h4>
                  </div>
                  <div class="text-right text-muted">

                  </div>
                </div>
                <p class="text-sm mb-0 text-center font-weight-bold"> You dont have any any notifications.</p>
              </div>
            </div>
          </a>
        @endforelse

      </div>
    </div>

      <!-- Footer -->
     @include('coach.layouts.footer')
    </div>
  </div>
@endsection