@extends('layouts.front_app')
@section('content')
    <!-- Main Hero Section -->
    <section class="inner-page">
        <div class="container">
            <h2 class="heading">Spotlight Comics</h2>
        </div>
    </section>
    <!-- ! Main Hero Section -->

    <!-- Upcoming Show Section -->
    <section class="meet-section">
        <div class="container">
            <h2 class="heading text-center mb-lg-5">MEET THE COMICS</h2>
            <p class="text-center text-white">Austin's comedy stars are ready to crack you up,
                so get to know them here—it’s a real stand-up
                move!</p>
            <div class="row">
                @foreach($data as $val)
                    <div class="col-md-4">
                        <a href="{{ route('comic.detail', $val->id) }}" class="meetcard">
                            <figure>
                                @foreach ($val->image as $image)
                                    <img src="{{ $image->getUrl() }}" alt="{{ $image->name }}" width="318" height="318" class="img-fluid" alt="">
                                @endforeach
                                @if ($val->image->isEmpty())
                                    <img src="{{ asset('uploads/placeholder.png') }}" class="img-fluid">
                                @endif
                            </figure>
                            <h4>{{ $val->name }}</h4>
                        </a>
                    </div>
                @endforeach

            </div>
        </div>
    </section>
    <!-- ! Upcoming Show Section -->
@endsection