@extends('index')

@section('content')
<div class="scroll-container d-flex h-m-100">
    {{-- <div class="col-5 scroll-item ms-3 me-2 d-flex">
        <a href="" class="card flex-grow-1 d-flex flex-column" style="text-decoration: none;">
            <div class="card-body">
                <img src="{{ asset('media/logo-perak-color.png') }}" class="card-img-top card-img-info h-img-info" alt="...">
                <h5>Event 1</h5>
            </div>
        </a>
    </div>

    <div class="col-5 scroll-item ms-3 me-2 d-flex">
        <a href="" class="card flex-grow-1 d-flex flex-column" style="text-decoration: none;">
            <div class="card-body">
                <img src="{{ asset('media/logo-perak-color.png') }}" class="card-img-top card-img-info h-img-info" alt="...">
                <h5>Event 1</h5>
            </div>
        </a>
    </div> --}}
</div>

<div class="container mb-5">
    @forelse ($schedules as $schedule)
    <a href="{{ route('schedule.show', $schedule->slug) }}" class="card mb-3" style="text-decoration: none;">
        <div class="card-body p-3">
            <div class="d-flex">
                <img src="{{ $schedule->UrlCover }}" class="card-thumbnail-schedule">

                <div class="ms-3">
                    <h5 class="mb-0" style="font-size: 16px;">{{ $schedule->title }}</h5>
                    <h5 class="mb-3" style="font-size: 16px;">{{ $schedule->date->format("d F Y") }}</h5>

                    <p class="text-muted mb-0" style="font-size: 12px;">{{ $schedule->location }}</p>
                </div>
            </div>
        </div>
    </a>
    @empty
    <div class="card">
        <div class="card-body text-center">
            <img src="{{ asset('media/logo-perak-color.png') }}" class="w-50">
            <h5 class="mt-5">Belum ada informasi</h5>
        </div>
    </div>
    @endforelse
</div>
@endsection