<!-- resources/views/info/services.blade.php -->

@extends('layouts.app')

@section('title', 'Our Services')

@section('content')
    <div class="text-center mb-10 fade-in">
        <h1 class="text-3xl sm:text-4xl font-bold text-white mb-3">Our Services</h1>
        <p class="text-white max-w-md mx-auto">
            Explore our tailoring services
        </p>
    </div>

    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-16">
        @forelse($services as $service)
            <div class="card-hover rounded-2xl bg-white p-6 shadow-md border border-gray-100 fade-in">
                <div class="flex items-center mb-4">
                    <div class="flex items-center justify-center h-10 w-10 rounded-lg bg-green-100 text-green-600 mr-3">
                        <i class="fas fa-tshirt"></i>
                    </div>
                    <h3 class="font-semibold text-lg text-gray-800">{{ $service->name }}</h3>
                </div>

                <div class="mb-4">
                    <span class="text-xl font-bold text-primary-600">
                        @if($service->price_min && $service->price_max)
                            Rs. {{ $service->price_min }} - Rs. {{ $service->price_max }}
                        @elseif($service->price_min)
                            From Rs. {{ $service->price_min }}
                        @else
                            Price on request
                        @endif
                    </span>
                </div>

                @if($service->features)
                    <h4 class="font-medium text-gray-700 mb-2">Features:</h4>
                    <ul class="space-y-2">
                        @foreach(json_decode($service->features) as $feature)
                            <li class="flex items-start">
                                <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                <span class="text-gray-700">{{ $feature }}</span>
                            </li>
                        @endforeach
                    </ul>
                @endif
            </div>
        @empty
            <div class="col-span-full rounded-2xl bg-white p-8 text-center text-gray-600 shadow-md fade-in">
                <i class="fas fa-concierge-bell text-gray-400 text-3xl mb-3"></i>
                <p class="text-lg font-medium">No services available.</p>
            </div>
        @endforelse
    </div>
@endsection
