@extends('layouts/main')
@push('styles')
<link rel="stylesheet" href="{{ asset('assets/css/profile.css') }}">
@endpush
@include('components/admin-menu')
<style>

    .card-dashboard {
      border: 1px solid #dee2e6;
      border-radius: 6px;
      background-color: #fff;
      padding: 1rem;
      margin-bottom: 1rem;
    }
    .card-dashboard h5 {
      color: #6c757d;
      margin-bottom: 0.5rem;
    }
    .card-dashboard h2 {
      margin-bottom: 0.5rem;
    }

    ::-webkit-scrollbar {
      width: 6px;
    }
    ::-webkit-scrollbar-track {
      background: #f1f1f1;
    }
    ::-webkit-scrollbar-thumb {
      background: #bbb;
      border-radius: 3px;
    }
  </style>
<div class="main-wrapper">
    <div class="container-fluid mt-4">
      @include('components/user-nav')

    </div>
    <div class="container-fluid mt-4">
        <div class="row">
            <h1>Certificate "{{$ase->ase_id}}"</h1>
        </div>
        <div class="row background-white m-1 p-4">
            <div class="row">
                <div class="col-md-3">
                    <div class="card-dashboard">
                        <h5>Owner</h5>
                        <span>{{ $ase->name }} {{ $ase->middlename }} {{ $ase->lastname }}</span>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card-dashboard">
                        <h5>zipcode</h5>
                        <span>{{ $ase->zip }}</span>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card-dashboard">
                        <h5>Expiration date</h5>
                        <span>{{ $ase->expiration_date }}</span>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card-dashboard">
                        <h5>Assign to</h5>
                        @if ($ase->used)
                            <span>{{ $ase->owner->name }} {{ $ase->owner->lastname }}</span>
                        @else
                            <span class="text-danger">Nobody</span>
                        @endif
                    </div>
                </div>
            </div>
        </div>
        <hr>
        <div class="row">
            <h2>Certifications awarded</h2>
        </div>
        <div class="row px-4">
            @if ($ase->awards->count() > 0)    
                <div class="table-responsive">
                    <table class="table table-striped table-hover">
                        <thead class="table-dark">
                            <th>Award id</th>
                            <th>Name</th>
                            <th>Category</th>
                        </thead>
                        <tbody>
                            @foreach ($ase->awards as $award)
                                <tr>
                                    <td>{{ $award->award_id }}</td>
                                    <td>{{ $award->name }}</td>
                                    <td>{{ $award->category->name }}</td>
                                </tr>
                            @endforeach 
                        </tbody>
                    </table>
                </div>
            @else   
                Not certifications jet
            @endif
        </div>
    </div>
</div>


@error('success')
    @section('alert')
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        {!! $message !!}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>
    @endsection
@enderror

@error('errors')
    @section('alert')
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        {!! $message !!}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>
    @endsection
@enderror