@extends('_layouts.app-public')

@section('content')
  <div class="content-wrapper page-quran">
    <div class="content-header">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <h1 class="mt-3 text-center">Quran</h1>
          </div>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="container">
        <div class="row">
          @foreach ($surah as $item)
            <div class="col-md-4">
              <a href="{{ route('quran-surah', ['id' => $item['id'] . '-' . Str::slug($item['transliteration'])]) }}" class="quran-ayah">
                <div class="card">
                  <div class="card-body">
                    <span class="badge badge-secondary text-sm mb-4">{{ $item['id'] }}</span>
                    <h3 class="float-right">{{ $item['arabic'] }}</h3>
                    <h5 class="text-left">{{ $item['latin'] }}</h5>
                    <small class="text-muted">{{ $item['num_ayah'] }} Ayat</small>
                  </div>
                </div>
              </a>
            </div>
          @endforeach
        </div>
      </div>
    </div>
  </div>
@endsection

@section('title')
  Quran
@endsection