@extends('frontend.layouts.app')
@section('title', 'Service Details')
@section('content')
    <!-- header area -->
    @include('frontend.includes.headers.headerOne')
    <!-- header area end -->

    <div id="smooth-content">


                <!-- Services Details Start -->
                <section class="service-details py-120">
                    <div class="container">
                          <h2 class="text-3xl mb-4 font-bold text-center mb-12">Our Services</h2>

                        <div class="row gy-4">

                                @foreach ($services as $service)
        <div class="col-md-4 mb-4">
            <div class="card h-100">
                <!-- Thumbnail -->
                @if($service->thumbnail)
                    <img src="{{ asset('storage/' . $service->thumbnail) }}" class="card-img-top" alt="{{ $service->title }}" style="height:200px; object-fit:cover;">
                @else
                    <img src="{{ asset('images/default.png') }}" class="card-img-top" alt="No Image" style="height:200px; object-fit:cover;">
                @endif

                <div class="card-body">
                    <!-- Service Title -->
                    <h5 class="card-title">{{ $service->title }}</h5>

                    <!-- Service Price -->
                    <p class="card-text">Price: ৳{{ number_format($service->price, 2) }}</p>

                    <!-- Optional: View Button -->
                    <a href="{{ route('services.show', $service->id) }}" class="btn btn-primary btn-sm">View Service</a>
                </div>
            </div>
        </div>
    @endforeach
                        </div>
                    </div>
                </section>
                <!-- Services Details end -->


                <!-- footer area -->
                @include('frontend.includes.footers.footerOne')
                <!-- footer area end -->
            </div>
        </div>

@endsection