@extends('frontend.layout.app')
@section('content')

<div class="breadcumb-wrapper" data-bg-src="{{ asset('frontend/assets/img/breadcumb/breadcumb-bg.jpg') }}">
    <div class="container z-index-common">
        <div class="breadcumb-content">
            <h1 class="breadcumb-title">Classes</h1>
            <div class="breadcumb-menu-wrap">
                <ul class="breadcumb-menu">
                    <li><a href="{{ route('index') }}">Home</a></li>
                    <li>Classes</li>
                </ul>
            </div>
        </div>
    </div>
</div>

<div class="container py-5">
    <div class="row g-4 justify-content-center">
        @forelse($classes as $class)
            <div class="col-12 col-sm-6 col-md-4 col-lg-3 d-flex">
                <div class="card flex-fill h-100 border-0 shadow p-2 class-card" style="max-width: 320px; margin: 0 auto; background: #f5f7fa;">
                    <div class="d-flex justify-content-center align-items-center pt-3">
                        <span class="d-inline-block mb-2" style="font-size: 3rem; color: #526480;">
                            <i class="fa fa-graduation-cap"></i>
                        </span>
                    </div>
                    <div class="card-body text-center">
                        <h5 class="card-title mb-2" style="font-size: 1.1rem; font-weight: 700; color: #526480;">
                            {{ \Illuminate\Support\Str::limit($class->name, 40) }}
                        </h5>
                        
                        <a href="{{ route('store') }}" class="btn btn-sm class-button px-4 rounded-pill shadow-sm mt-2" style="font-weight:600;">
                            View Products
                        </a>
                    </div>
                </div>
            </div>
        @empty
            <div class="col-12">
                <div class="alert alert-warning text-center shadow-sm py-4 rounded">
                    <i class="fas fa-exclamation-circle fa-lg me-2"></i> No classes found.
                </div>
            </div>
        @endforelse
    </div>
</div>

@endsection