@extends('layouts.app') 
@section('content')
  @include('achievement.header')

<section class="">
  <div class="row">
    <div class="col s12">
      <div class="card white">
        <div class="card-content white">
          <p class="card-title inline valign-wrapper">
            <img src="{{ $achievement->image }}" alt="" width="40" height="40" class="circle">
            <span> {!! $achievement->name !!}</span> @if ($achievement->status)
            <span class="green-text"><i class="material-icons left">check_circle</i>Enabled</span> @else
            <span class="red-text"><i class="material-icons left">cancel</i>Disabled</span> @endif
          </p>
          <hr>
          <div class="row">
            <div class="col s12">
            

              <div class="row">
                <div class="col s12 m6">
                  <small>Description</small>
                  <p>
                    {{ $achievement->description }}
                  </p>
                </div>
                <div class="col s12 m6">
                  <small>Background Colour</small>
                <p style="color:#{{$achievement->bgcolour}}">
                    {{ $achievement->bgcolour }}
                  </p>
                </div>

              </div>

              <div class="row">
                <div class="col s12">
                  <table class="highlight">
                    <thead>
                      <tr>
                        <th>Image</th>
                        <th>Name</th>
                        <th>Description</th>
                        <th>Points</th>
                        <th>Gems</th>
                        
                      </tr>
                    </thead>

                    <tbody>
                      @foreach ($tiers as $tier)
                      <tr>
                        <td><img src="{{ $tier->image }}" alt="" width="40" height="40" class="circle"></td>
                        <td>{{ $tier->name }}</td>
                        <td>{{ $tier->description }}</td>
                        <td>{{ $tier->points }}</td>
                        <td>{{ isset($tier->gems) ? $tier->gems : 0 }}</td>
                      </tr>
                      @endforeach
                    </tbody>
                  </table>
                </div>
              </div>

             
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
@endsection