@extends('layouts.usermaster')

@section('title')
Voice Sync: {{ $user->first_name }} {{ $user->last_name }}
@endsection


@section('content')
<section class="content">
  <div class="container-fluid">
    <div class="row">
      <!-- left column -->
      <div class="col-md-9">
        <div class="card">
          <div class="card-body">
            <h1 class="display-4">{{ $user->first_name }} {{ $user->last_name }}</h1>
            <p class="lead"><strong>VSID: </strong>{{ $user->vsid }}</p>
            <p class="lead">Welcome to your VoiceSync profile management screen.</p>
            <hr class="my-4">
            <p>You can see your transactions, add more minutes and upgrade your VoiceSync account from this page.</p>
            <p></p>
            <p></p>
            <div class="btn-toolbar mb-3" role="toolbar" aria-label="Transactions groups">
              <div class="btn-group mr-2" role="group" aria-label="Groups">
                <a class="btn btn-primary btn-lg" href="{{ route('user-minutes') }}" role="button">Add Minutes</a>
                <a class="btn btn-warning btn-lg" href="{{ route('history-trans') }}" role="button">View
                  Transactions</a>
                <a class="btn btn-danger btn-lg" href="{{ route('user-upgrade') }}" role="button">Upgrade Account</a>
              </div>
            </div>
            <p></p>
          </div>
        </div>
        <!-- /.card -->
      </div>
      <div class="col-md-3">
        <div class="card" style="width: 18rem;">
          <div class="card-header">
            Profile Info
          </div>
          <ul class="list-group list-group-flush">
            <li class="list-group-item"><i class="fas fa-id-badge nav-icon btn-outline-success btn-sm disabled"></i>
              {{ $profile->account_type }}</li>
            <li class="list-group-item"><i class="fas fa-at nav-icon btn-outline-success btn-sm disabled"></i>
              {{ $user->email }}</li>

            <li class="list-group-item"><i class="fas fa-phone nav-icon btn-outline-success btn-sm disabled"></i>
              {{ $user->phone_num }}</li>
            <li class="list-group-item"><i class="far fa-clock nav-icon btn-outline-success btn-sm disabled"></i>
              {{ $profile->monthly_usage}}
            </li>
            <li class="list-group-item"><small class="text-muted">Renewal Date:
                {{ \Carbon\Carbon::parse($profile->renewal_date)->format('F, jS Y')}}
              </small>
            </li>
            <li class="list-group-item"><small class="text-muted">Expiration Date:
                {{ \Carbon\Carbon::parse($profile->expiration_date)->format('F, jS Y')}} </small>
            </li>
            <li class="list-group-item"><small class="text-muted">Member since
                {{ \Carbon\Carbon::parse($profile->created_at)->format('F, jS Y')}}
              </small>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- /.row -->
  </div><!-- /.container-fluid -->
</section>
@endsection('content')