@extends('layouts.app',['ver' => 2])

@section('content')
    <style>
        .card {
            transition: transform 0.3s, box-shadow 0.3s;
            border: none;
            border-radius: 15px;
            overflow: hidden;
        }

        .card:hover {
            transform: scale(1.05);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        }

        .card-img-top {
            object-fit: cover;
            height: 200px;
        }

        .card-body {
            text-align: center;
            background-color: #f8f9fa;
        }

        .btn-custom {
            background-color: #007bff;
            color: white;
            border: none;
        }

        .btn-custom:hover {
            background-color: #0056b3;
            color: white;
        }
    </style>
<!-- mastartclass area start hare  -->
        
        <section class="masterclass-area">
            <div class="container">
                <div class="masterclass-wapper">
                    <div class="top-content">
                        <h3>Masterclass Sufi Héritage</h3>
                 
                    </div>
                            <form method="GET" action="#" class="d-flex justify-content-between align-items-center">
                                <div class="d-flex">
                                   
                        
                               
                                 
                                </div>
                            </form>
                        </div>
                        
                        <!-- Masterclass Grid -->
                         <div class="row mt-3">
                            @forelse ($masterclasses as $masterclass)
                               <div class="col-md-4 mb-4">
                                  <div class="card h-100 shadow-lg rounded-3 overflow-hidden">
                                    <img src="{{ $masterclass->image ? asset($masterclass->image) : asset('images/placeholder.jpg') }}"
                                         class="card-img-top mx-auto d-block"
                                         alt="Masterclass Image"
                                         style="object-fit: contain; height: 200px;">
                                    <div class="card-body d-flex flex-column bg-light text-dark">
                                      <h5 class="card-title">{{ $masterclass->titre }}</h5>
                                      <p class="card-text">
                                        {!! \Illuminate\Support\Str::limit(strip_tags($masterclass->description), 50, '...') !!}
                                      </p>
                                      <div class="mt-auto">
                                        <a href="{{ route('masterclass.show', ['slug' => $masterclass->slug]) }}" class="btn btn-dark">En savoir plus</a>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                            @empty
                                <div class="col-12 text-center">
                                    <p class="text-muted">Aucune masterclass disponible pour le moment.</p>
                                </div>
                            @endforelse
                              	{{ $masterclasses->links('layouts.partials.public.pagination.masterclass') }}
                          </div>
                    
        </section>

        <div class="masterclass-img-box">
            <img src="{{ asset('public_assets/images/mastarclass-img.png')}}" alt="">
        </div>
       

@endsection