@extends('site.layout')

@section('content')
    @php($publicStorage = \Illuminate\Support\Facades\Storage::disk('public'))
    <section class="bg-gradient-to-b from-red-50 to-white">
        <div class="relative bg-cover bg-center bg-no-repeat min-h-[330px] sm:min-h-[350px]" style="background-image: url('https://cdn.sheba.xyz/sheba_xyz/images/webp/home-banner.webp');">
            <div class="absolute inset-0 bg-gradient-to-b from-white/70 via-white/40 to-white/90"></div>
            <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-14">
                <div class="text-center">
                    <h1 class="text-3xl sm:text-4xl font-semibold tracking-tight">Discover Your Perfect Service</h1>
                    <p class="mt-3 text-gray-600">Book trusted professionals for home and business services.</p>
                    <form method="GET" action="{{ route('services.index') }}" class="mt-8 max-w-3xl mx-auto flex gap-2">
                        <input type="text" name="q" value="{{ request('q') }}" class="w-full rounded-full border-gray-300 focus:border-red-500 focus:ring-red-500" placeholder="Search services" />
                        <button type="submit" class="rounded-full bg-red-700 px-6 py-3 text-white font-semibold hover:bg-red-800">Search</button>
                    </form>
                </div>
            </div>
        </div>

        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-14 -mt-16 sm:-mt-20 relative z-10">
            <div x-data="{ openCategory: null }">
                <div class="bg-white rounded-2xl shadow p-6">
                    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-7 gap-4">
                        @foreach ($categories as $category)
                            <button type="button" class="group rounded-xl border border-gray-200 p-4 hover:border-red-200 hover:bg-red-50 text-left" @click="openCategory = {{ $category->id }}">
                                <div class="flex flex-col items-center gap-3">
                                    <div class="w-20 h-20 sm:w-24 sm:h-24 rounded-xl  flex items-center justify-center overflow-hidden">
                                        @if ($category->icon_path && $publicStorage->exists($category->icon_path))
                                            <img src="{{ asset('storage/'.$category->icon_path) }}" alt="{{ $category->name }}" class="w-full h-full object-contain" />
                                        @else
                                            <svg xmlns="http://www.w3.org/2000/svg" class="w-9 h-9 text-red-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m12 4a2 2 0 100-4m0 4a2 2 0 110-4M6 12H4m2 0a2 2 0 11-4 0m4 0a2 2 0 10-4 0m16 0h2m-2 0a2 2 0 104 0m-4 0a2 2 0 114 0M12 18v2m0-2a2 2 0 100-4m0 4a2 2 0 110-4" />
                                            </svg>
                                        @endif
                                    </div>
                                    <div class="text-xs sm:text-sm font-semibold text-gray-900 text-center group-hover:text-red-700">{{ $category->name }}</div>
                                </div>
                            </button>
                        @endforeach
                    </div>
                </div>

                @foreach ($categories as $category)
                    <div x-show="openCategory === {{ $category->id }}" x-cloak class="fixed inset-0 z-50 flex items-center justify-center">
                        <div class="absolute inset-0 bg-black/40" @click="openCategory = null"></div>
                        <div class="relative bg-white w-full max-w-4xl mx-4 rounded-xl shadow-lg max-h-[80vh] overflow-hidden">
                            <div class="flex items-center justify-between px-6 py-4 border-b border-gray-200">
                                <div class="text-lg font-semibold">Discover Your Perfect {{ $category->name }}</div>
                                <button type="button" class="w-10 h-10 inline-flex items-center justify-center rounded-md hover:bg-gray-100" @click="openCategory = null">
                                    <span class="sr-only">Close</span>
                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                                    </svg>
                                </button>
                            </div>
                            <div class="p-6 overflow-y-auto max-h-[calc(80vh-64px)]">
                                <div class="space-y-4">
                                    @foreach ($category->services as $service)
                                        <div x-data="{ open: false, qty: 1 }" class="rounded-lg border border-gray-200 overflow-hidden">
                                            <button type="button" class="w-full flex items-center justify-between px-4 py-4 bg-red-50" @click="open = !open">
                                                <div class="flex items-center gap-3">
                                                    <div class="w-12 h-12 sm:w-14 sm:h-14 rounded-lg bg-white border border-gray-200 flex items-center justify-center overflow-hidden">
                                                        @if ($service->icon_path && $publicStorage->exists($service->icon_path))
                                                            <img src="{{ asset('storage/'.$service->icon_path) }}" alt="{{ $service->name }}" class="w-full h-full object-contain" />
                                                        @else
                                                            <svg xmlns="http://www.w3.org/2000/svg" class="w-7 h-7 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                                                            </svg>
                                                        @endif
                                                    </div>
                                                    <div class="text-sm font-semibold tracking-wide uppercase">{{ $service->name }}</div>
                                                </div>
                                                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                    <path x-show="!open" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                                                    <path x-show="open" x-cloak stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
                                                </svg>
                                            </button>
                                            <div x-show="open" x-cloak class="p-4 bg-white">
                                                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                                                    <div>
                                                        <div class="text-sm font-semibold">{{ $service->name }}</div>
                                                        <div class="text-sm text-gray-600">
                                                            Price: ৳{{ number_format((float) $service->price, 2) }}
                                                            @if ($service->compare_at_price)
                                                                <span class="ml-2 line-through text-gray-400">৳{{ number_format((float) $service->compare_at_price, 2) }}</span>
                                                            @endif
                                                        </div>
                                                    </div>
                                                    <div class="flex items-center gap-3">
                                                        <div class="inline-flex items-center rounded-md border border-gray-200">
                                                            <button type="button" class="w-9 h-9 inline-flex items-center justify-center" @click="qty = Math.max(1, qty - 1)">-</button>
                                                            <input type="number" min="1" max="100" class="w-14 h-9 border-x border-gray-200 text-center" x-model.number="qty" />
                                                            <button type="button" class="w-9 h-9 inline-flex items-center justify-center" @click="qty = Math.min(100, qty + 1)">+</button>
                                                        </div>
                                                        <form method="POST" action="{{ route('cart.items.store') }}">
                                                            @csrf
                                                            <input type="hidden" name="service_id" value="{{ $service->id }}" />
                                                            <input type="hidden" name="quantity" :value="qty" />
                                                            <input type="hidden" name="redirect" value="checkout" />
                                                            <button type="submit" class="rounded-md bg-red-700 px-5 py-2 text-white text-sm font-semibold hover:bg-red-800">Order Now</button>
                                                        </form>
                                                        <form method="POST" action="{{ route('cart.items.store') }}">
                                                            @csrf
                                                            <input type="hidden" name="service_id" value="{{ $service->id }}" />
                                                            <input type="hidden" name="quantity" :value="qty" />
                                                            <input type="hidden" name="redirect" value="back" />
                                                            <button type="submit" class="w-10 h-10 inline-flex items-center justify-center rounded-md bg-red-700 text-white hover:bg-red-800" aria-label="Add to cart">
                                                                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13l-1.5 7h13L17 13M7 13h10M9 21a1 1 0 100-2 1 1 0 000 2zm8 0a1 1 0 100-2 1 1 0 000 2z" />
                                                                </svg>
                                                            </button>
                                                        </form>
                                                    </div>
                                                </div>

                                                <div class="mt-6">
                                                    <div class="text-sm text-gray-700 font-semibold">Service Include :</div>
                                                    @if ($service->includes->count())
                                                        <ul class="mt-3 space-y-2 text-gray-700 list-disc pl-6">
                                                            @foreach ($service->includes as $include)
                                                                <li>{{ $include->text }}</li>
                                                            @endforeach
                                                        </ul>
                                                    @else
                                                        <div class="mt-3 text-sm text-gray-500">Details will be provided by the technician.</div>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="mt-10 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                <div class="bg-white border border-gray-200 rounded-xl p-5 flex items-center gap-3">
                    <div class="w-10 h-10 rounded-lg bg-red-50 flex items-center justify-center">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-red-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                    </div>
                    <div class="text-sm font-semibold">Support 24/7</div>
                </div>
                <div class="bg-white border border-gray-200 rounded-xl p-5 flex items-center gap-3">
                    <div class="w-10 h-10 rounded-lg bg-red-50 flex items-center justify-center">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-red-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                    </div>
                    <div class="text-sm font-semibold">30 days warranty</div>
                </div>
                <div class="bg-white border border-gray-200 rounded-xl p-5 flex items-center gap-3">
                    <div class="w-10 h-10 rounded-lg bg-red-50 flex items-center justify-center">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-red-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                        </svg>
                    </div>
                    <div class="text-sm font-semibold">100% time committed</div>
                </div>
                <div class="bg-white border border-gray-200 rounded-xl p-5 flex items-center gap-3">
                    <div class="w-10 h-10 rounded-lg bg-red-50 flex items-center justify-center">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-red-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8V6m0 12v2m9-10a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                    </div>
                    <div class="text-sm font-semibold">Quality Service</div>
                </div>
            </div>
        </div>
    </section>

    <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-14">
        <div class="flex items-end justify-between gap-6">
            <div>
                <div class="text-2xl font-semibold">Blog</div>
                <div class="mt-1 text-sm text-gray-600">Our latest updates</div>
            </div>
            <a href="{{ route('blog.index') }}" class="text-sm font-semibold text-red-700 hover:text-red-800">View all</a>
        </div>

        <div class="mt-8 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            @foreach ($blogPosts as $post)
                <a href="{{ route('blog.show', $post) }}" class="group bg-white border border-gray-200 rounded-xl overflow-hidden hover:shadow">
                    <div class="aspect-[16/9] bg-gray-100 overflow-hidden">
                        @if ($post->cover_image_path)
                            <img src="{{ asset('storage/'.$post->cover_image_path) }}" alt="{{ $post->title }}" class="w-full h-full object-cover group-hover:scale-105 transition" />
                        @else
                            <div class="w-full h-full flex items-center justify-center text-gray-400 text-sm">No image</div>
                        @endif
                    </div>
                    <div class="p-5">
                        <div class="font-semibold text-gray-900 group-hover:text-red-700 line-clamp-2">{{ $post->title }}</div>
                        <div class="mt-2 text-sm text-gray-600 line-clamp-2">{{ $post->excerpt }}</div>
                        <div class="mt-4 inline-flex items-center rounded-md bg-red-700 px-4 py-2 text-white text-sm font-semibold">Read More</div>
                    </div>
                </a>
            @endforeach
        </div>
    </section>

    <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-14">
        <div class="text-center">
            <div class="text-2xl font-semibold">Clients</div>
        </div>
        <div class="mt-8 flex flex-wrap items-center justify-center gap-8">
            @foreach ($clients as $client)
                <div class="w-28 h-16 flex items-center justify-center">
                    @if ($client->logo_path)
                        <img src="{{ asset('storage/'.$client->logo_path) }}" alt="{{ $client->name }}" class="max-w-full max-h-full object-contain" />
                    @else
                        <div class="text-sm text-gray-500">{{ $client->name }}</div>
                    @endif
                </div>
            @endforeach
        </div>
    </section>
@endsection