@extends('layouts.app')

@section('title', $service->name . ' — Abu Dhabi Auto Care')

@section('content')
<div class="py-16 bg-slate-950 border-b border-slate-800">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Breadcrumb -->
        <div class="flex items-center space-x-2 text-xs text-slate-400 mb-8">
            <a href="{{ route('home') }}" class="hover:text-white">Home</a>
            <span>/</span>
            <a href="{{ route('services.index') }}" class="hover:text-white">Services</a>
            <span>/</span>
            <span class="text-sky-400 font-semibold">{{ $service->name }}</span>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-12 gap-12">
            <!-- Left Info -->
            <div class="lg:col-span-8 space-y-8">
                <img src="{{ $service->image_url }}" alt="{{ $service->media?->alt_text ?? $service->name }}" class="w-full aspect-video object-cover rounded-2xl" width="1000" height="562" fetchpriority="high">
                <div>
                    <span class="px-3 py-1 rounded-md text-xs font-bold bg-sky-500/10 text-sky-400 border border-sky-500/20 mb-3 inline-block">
                        {{ $service->badge ?: $service->category_title }}
                    </span>
                    <h1 class="text-3xl sm:text-4xl font-black text-white tracking-tight mt-1 mb-4">
                        {{ $service->name }}
                    </h1>
                    <p class="text-slate-300 text-sm sm:text-base leading-relaxed">
                        {{ $service->short_description }}
                    </p>
                    @if($service->full_description)
                        <div class="mt-4 text-xs sm:text-sm text-slate-300 leading-relaxed whitespace-pre-line">
                            {{ $service->full_description }}
                        </div>
                    @endif
                </div>

                <!-- Gallery Showcase (Multiple Media) -->
                @php
                    $gallery = $service->galleryMedia();
                @endphp
                @if($gallery->isNotEmpty())
                    <div class="p-6 rounded-2xl bg-slate-900 border border-slate-800 space-y-4">
                        <div class="flex items-center justify-between">
                            <h2 class="text-base font-bold text-white flex items-center">
                                <svg class="w-4 h-4 mr-2 text-sky-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                                <span>Project Gallery & Showcase</span>
                            </h2>
                            <span class="text-xs font-semibold text-slate-400">{{ $gallery->count() }} Photos</span>
                        </div>
                        <div class="grid grid-cols-2 sm:grid-cols-3 gap-3">
                            @foreach($gallery as $photo)
                                <a href="{{ $photo->url }}" target="_blank" class="group relative aspect-video rounded-xl overflow-hidden bg-slate-950 border border-slate-800 hover:border-sky-500/50 transition block shadow-sm">
                                    <img src="{{ $photo->url }}" alt="{{ $photo->alt_text ?? $service->name }}" class="w-full h-full object-cover group-hover:scale-105 transition duration-300" loading="lazy">
                                    <div class="absolute inset-0 bg-slate-950/40 opacity-0 group-hover:opacity-100 transition flex items-center justify-center">
                                        <span class="p-2 rounded-full bg-slate-900/90 text-sky-400 shadow-lg">
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7"/></svg>
                                        </span>
                                    </div>
                                </a>
                            @endforeach
                        </div>
                    </div>
                @endif

                <!-- Features & Quality -->
                <div class="p-6 rounded-2xl bg-slate-900 border border-slate-800 space-y-4">
                    <h2 class="text-base font-bold text-white">What's Included in This Service</h2>
                    @if($service->features && is_array($service->features))
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 text-xs text-slate-300">
                            @foreach($service->features as $f)
                                <div class="flex items-start">
                                    <svg class="w-4 h-4 text-emerald-400 mr-2 rtl:ml-2 rtl:mr-0 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                                    <span>{{ $f }}</span>
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>

                <!-- Pricing Table -->
                @if($service->prices && $service->prices->count() > 0)
                    <div class="rounded-2xl bg-slate-900 border border-slate-800 p-6">
                        <h2 class="text-base font-bold text-white mb-4">Rates by Vehicle Type</h2>
                        <div class="overflow-x-auto">
                            <table class="w-full text-xs text-left">
                                <thead class="border-b border-slate-800 text-slate-400 font-bold uppercase">
                                    <tr>
                                        <th class="py-3">Package / Option</th>
                                        <th class="py-3">Vehicle Category</th>
                                        <th class="py-3">Price</th>
                                        <th class="py-3 text-right">Action</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-slate-800/80 text-slate-300">
                                    @foreach($service->prices as $p)
                                        <tr>
                                            <td class="py-3 font-semibold text-white">{{ $p->package_name }}</td>
                                            <td class="py-3">{{ $p->vehicle_category }}</td>
                                            <td class="py-3 font-extrabold text-amber-400">AED {{ number_format($p->price) }}</td>
                                            <td class="py-3 text-right">
                                                <a href="{{ route('orders.create', ['service_id' => $service->id, 'package' => $p->package_name, 'vehicle' => $p->vehicle_category]) }}" class="px-3 py-1.5 rounded-lg bg-sky-600 hover:bg-sky-500 text-white font-bold text-xs transition">
                                                    Order Now
                                                </a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                @endif
            </div>

            <!-- Right Sidebar CTA -->
            <div class="lg:col-span-4 space-y-6">
                <div class="p-6 rounded-2xl bg-slate-900 border border-slate-800 sticky top-28 space-y-6">
                    <div>
                        <span class="text-xs text-slate-400 uppercase font-bold tracking-wider block">Starting Rate</span>
                        <div class="text-3xl font-black text-white mt-1">
                            @if($service->starting_price > 0)
                                AED {{ number_format($service->starting_price) }}
                            @else
                                Free Inspection
                            @endif
                        </div>
                    </div>

                    <a href="{{ route('orders.create', ['service_id' => $service->id]) }}" class="w-full block text-center py-3.5 rounded-xl bg-sky-600 hover:bg-sky-500 text-white font-bold text-sm shadow-xl shadow-sky-600/30 transition">
                        Order This Service Now
                    </a>

                    <a href="https://api.whatsapp.com/send?phone=971545143060&text={{ urlencode('Hello Abu Dhabi Auto Care, I want to inquire about ' . $service->name) }}" target="_blank" class="w-full flex items-center justify-center py-3.5 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white font-bold text-sm transition">
                        <svg class="w-4 h-4 mr-2 rtl:ml-2 rtl:mr-0 fill-current" viewBox="0 0 24 24"><path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z"/></svg>
                        WhatsApp Inquiry
                    </a>

                    <div class="text-xs text-slate-400 space-y-2 pt-2 border-t border-slate-800">
                        <div class="flex items-center text-slate-300 font-semibold">
                            <span class="w-2 h-2 rounded-full bg-emerald-400 mr-2 rtl:ml-2 rtl:mr-0"></span>
                            Free Abu Dhabi Pickup Available
                        </div>
                        <div class="flex items-center text-slate-300 font-semibold">
                            <span class="w-2 h-2 rounded-full bg-amber-400 mr-2 rtl:ml-2 rtl:mr-0"></span>
                            Up to 3-Year Warranty on Painting
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection