@extends('layouts.app')

@section('styles')
@endsection

@section('content')	      
		   <!-- .page -->
          <div class="page">
            <!-- .page-cover -->
            <header class="page-cover">
              <div class="text-center">
                <div class="user-avatar user-avatar-xl">
                  <img src="{{ $avatarlink }}" alt="User Avatar">
                </div>
                <h2 class="h4 mt-3 mb-0">{{ $user->name }}</h2>
			    @if (Auth::user()->hasRole('admin'))
					<span class="account-description">{{ __('Admin') }}</span>
				@elseif (Auth::user()->hasRole('regioadmin'))
					<span class="account-description">{{ __('Regio Admin') }}</span>
				@elseif (Auth::user()->hasRole('orgadmin'))
					<span class="account-description">{{ __('Organisation Admin') }}</span>	
				@elseif (Auth::user()->hasRole('facilitator'))
					<span class="account-description">{{ __('Facilitator') }}</span>
				@endif
              </div>
            </header>
            <!-- /.page-cover -->
            <!-- .page-navs -->
            <nav class="page-navs">
              <!-- .nav-scroller -->
              <div class="nav-scroller">
                <!-- .nav -->
                <div class="nav nav-center nav-tabs border-0">
                  <a class="nav-link" href="/accounts">{{ __('Account') }}</a>
                  
                  @role('admin|facilitator|payupfront')
                    <a class="nav-link" href="/accounts/facilitator">{{ __('Facilitator') }}</a>
                  @endrole

                  <a class="nav-link" href="/accounts/privacy">{{ __('Privacy') }}</a>
				  
				  <a class="nav-link active" href="/accounts/invoices">{{ __('Invoices') }}</a>
                </div>
                <!-- /.nav -->
              </div>
              <!-- /.nav-scroller -->
            </nav>
            <!-- /.page-navs -->
            <!-- .page-inner -->
            <div class="page-inner">
              <!-- .page-section -->
              <div class="page-section">
	            <!-- .card -->
	            <div class="card card-fluid">
	              <h6 class="card-header">{{ __('Invoices') }}</h6>
	              <!-- .card-body -->
	              <div class="card-body">
	                  <!-- grid row -->
	                  <div class="row">
	                    <!-- grid column -->
	                    <div class="col-lg-6">
	                      <!-- .list-group -->
	                      <ul class="list-group mb-3">
							@if (count($myinvoices) > 0)
	                        	<li class="list-group-header">{{ __('The following invoices are available:') }}</li>
								<div class="row">
				                    <!-- grid column -->
				                    <div class="col-lg-6">
										<li class="list-group-item d-flex justify-content-between align-items-center">{{ __('Invoice number') }}</li>
									</div>
									<div class="col-lg-6">
										<li class="list-group-item d-flex justify-content-between align-items-center">{{ __('Invoice date') }}</li>
									</div>
								</div>
								@foreach ($myinvoices as $myinvoice)
			                        <div class="row">
					                    <!-- grid column -->
					                    <div class="col-lg-6">
											<li class="list-group-item d-flex justify-content-between align-items-center"><a href="/accounts/invoices/{{ $myinvoice->id }}">{{ $myinvoice->invoicenumber }}</a></li>
										</div>
										<div class="col-lg-6">
											<li class="list-group-item d-flex justify-content-between align-items-center">{{ $myinvoice->invoicedate }}</li>
										</div>
									</div>
								@endforeach
							@else
								<li class="list-group-header">{{ __('There are no invoices for you') }}</li>
							@endif
	                      </ul>
	                      <!-- /.list-group -->
	                    </div>
	                    <!-- /grid column -->
					  </div>
	              </div>
	              <!-- /.card-body -->
	            </div>
	            <!-- /.card -->
              </div>
              <!-- /.page-section -->
            </div>
            <!-- /.page-inner -->	
          </div>
          <!-- /.page -->
@endsection

@push('scripts')
@endpush