@extends('layouts.appUi')

@section('title') อัตราจ่าย @endsection

@section('header')
  <div class="appHeader">
    <div class="left">
      <a href="javascript:;" onclick="goBack()" class="headerButton goBack">
        <ion-icon name="chevron-back-outline"></ion-icon>
      </a>
    </div>
    <div class="pageTitle">
      อัตราจ่าย
    </div>
  </div>
@endsection

@section('customStyle')
  <style>
    img {
      max-width: 100%;
    }

  </style>
@endsection

@section('content')
  <div class="section mt-4 mb-3">
    {{-- <div class="section-heading padding">
      <h2 class="title">อัตราจ่าย</h2>
    </div> --}}

    @if (!$payRates->count())
      <p class="text-center fw-light text-muted">ไม่มีข้อมูลอัตราจ่าย</p>
    @endif

    <div class="article-list row g-2 g-sm-3">
      @foreach ($payRates as $payRate)
        <div class="col-6">
          <a href="{{ route('front.show.article', $payRate->id) }}">
            <div class="blog-card">
              <img class="images w-100"
                src="{{ asset("storage/{$payRate->picture}") }}">
              <div class="text">
                <h4 class="title">{{ lotteryName($payRate->title) }}</h4>
              </div>
            </div>
          </a>
        </div>
      @endforeach
    </div>

    <!-- carousel single -->
    {{-- <div class="carousel-single splide">
      <div class="splide__track">
        <ul class="splide__list">
          @foreach ($payRates as $payRate)
            <li class="splide__slide">
              <a href="{{ route('front.show.article', $payRate->id) }}">
                <div class="card">
                  <img src="{{ asset("storage/{$payRate->picture}") }}" class="card-img-top" alt="image">
                  <div class="card-body">
                    <h5 class="card-title text-center">{{ lotteryName($payRate->title) }}</h5>
                  </div>
                </div>
              </a>
            </li>
          @endforeach
        </ul>
      </div>
    </div> --}}
  </div>
@endsection

{{-- @section('footer')
    
@endsection --}}