@extends('layouts.portal')

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

@section('content')
<div class="max-w-4xl mx-auto space-y-6">
    
    <!-- Top Breadcrumb & Heading -->
    <div class="flex items-center justify-between">
        <div>
            <div class="flex items-center space-x-2 text-xs text-slate-400 mb-1">
                <a href="{{ route('admin.services') }}" class="hover:text-white">Services Catalog</a>
                <span>/</span>
                <span class="text-sky-400 font-bold">Edit #{{ $service->id }}</span>
            </div>
            <h1 class="text-2xl font-black text-white tracking-tight">{{ $service->name }}</h1>
            <p class="text-xs text-slate-400 mt-1">Update rates, vehicle package options, descriptions, and photograph.</p>
        </div>
        <div class="flex items-center space-x-2">
            <a href="{{ route('services.show', $service->slug) }}" target="_blank" class="px-3 py-2 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-300 text-xs font-semibold border border-slate-700 transition flex items-center">
                <span>View Public Page</span>
                <span class="ml-1 text-sky-400">↗</span>
            </a>
            <a href="{{ route('admin.services') }}" class="px-4 py-2 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-300 text-xs font-semibold border border-slate-700 transition">
                Back to Catalog
            </a>
        </div>
    </div>

    @if($errors->any())
        <div class="p-4 rounded-2xl bg-rose-950/80 border border-rose-500/40 text-rose-300 text-xs space-y-1">
            <strong class="font-bold block">Please fix the following errors:</strong>
            <ul class="list-disc pl-5">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="p-8 rounded-3xl bg-slate-900 border border-slate-800 shadow-2xl"
         x-data="{
             newPackages: [],
             addNewPackage() {
                 this.newPackages.push({ name: '', category: 'Sedan', price: '' });
             },
             removeNewPackage(index) {
                 this.newPackages.splice(index, 1);
             },
             showDeleteModal: false
         }">
        
        <form action="{{ route('admin.services.update', $service->id) }}" method="POST" enctype="multipart/form-data" class="space-y-6 text-xs">
            @csrf

            <!-- Section 1: Titles & Category -->
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label class="block font-semibold text-slate-300 mb-1">Service Title (English) *</label>
                    <input type="text" name="name" value="{{ old('name', $service->name) }}" required class="w-full px-4 py-2.5 rounded-xl bg-slate-950 border border-slate-800 text-white text-xs focus:outline-none focus:border-sky-500">
                </div>
                <div>
                    <label class="block font-semibold text-slate-300 mb-1">Service Title (Arabic Optional)</label>
                    <input type="text" name="name_ar" value="{{ old('name_ar', $service->name_ar) }}" dir="rtl" placeholder="العنوان باللغة العربية" class="w-full px-4 py-2.5 rounded-xl bg-slate-950 border border-slate-800 text-white text-xs focus:outline-none focus:border-sky-500">
                </div>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                <div>
                    <label class="block font-semibold text-slate-300 mb-1">Workshop Category *</label>
                    <select name="category" required class="w-full px-4 py-2.5 rounded-xl bg-slate-950 border border-slate-800 text-white text-xs focus:outline-none focus:border-sky-500">
                        @foreach($categories as $key => $title)
                            <option value="{{ $key }}" @selected(old('category', $service->category) === $key)>{{ $title }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block font-semibold text-slate-300 mb-1">Starting Baseline Price (AED) *</label>
                    <input type="number" step="0.01" name="starting_price" value="{{ old('starting_price', $service->starting_price) }}" required class="w-full px-4 py-2.5 rounded-xl bg-slate-950 border border-slate-800 text-amber-400 font-extrabold text-sm focus:outline-none focus:border-sky-500">
                </div>
                <div>
                    <label class="block font-semibold text-slate-300 mb-1">Badge Tagline (Optional)</label>
                    <input type="text" name="badge" value="{{ old('badge', $service->badge) }}" placeholder="e.g. Most Popular / Certified Technicians" class="w-full px-4 py-2.5 rounded-xl bg-slate-950 border border-slate-800 text-white text-xs focus:outline-none focus:border-sky-500">
                </div>
            </div>

            <!-- Section 2: Drag & Drop Multi-Format Photograph Upload -->
            <div class="pt-2 space-y-5">
                <x-image-dropzone 
                    name="image" 
                    id="service_edit_image" 
                    label="Main Featured Photograph" 
                    :currentImage="$service->image_url"
                    :required="false" 
                    help="Upload a new photo to replace current main image. Supports PNG, JPG, WebP, AVIF, SVG, GIF, HEIC (Max 5 MB)." 
                    :maxSizeMb="5" />

                @if($images->isNotEmpty())
                    <div class="flex items-center space-x-2 text-[11px] text-slate-400">
                        <span>Or select from Media Library:</span>
                        <select name="media_id" class="px-2 py-1 rounded bg-slate-950 border border-slate-800 text-white text-[11px]">
                            <option value="">-- Keep current photo / upload above --</option>
                            @foreach($images as $img)
                                <option value="{{ $img->id }}" @selected(old('media_id', $service->media_id) == $img->id)>{{ $img->title }}</option>
                            @endforeach
                        </select>
                    </div>
                @endif

                <div class="pt-3 border-t border-slate-800/80 space-y-3">
                    <label class="block font-semibold text-slate-300 text-xs">Service Gallery & Showcase Photos</label>
                    @php
                        $existingGallery = $service->galleryMedia();
                    @endphp
                    @if($existingGallery->isNotEmpty())
                        <div class="p-3.5 rounded-2xl bg-slate-950 border border-slate-800 space-y-2">
                            <span class="text-[11px] text-slate-400 block font-medium">Current Gallery Photos (Check to remove):</span>
                            <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
                                @foreach($existingGallery as $gItem)
                                    <div class="relative group rounded-xl overflow-hidden border border-slate-800 bg-slate-900">
                                        <img src="{{ $gItem->url }}" alt="{{ $gItem->title }}" class="w-full h-24 object-cover">
                                        <label class="absolute inset-x-0 bottom-0 bg-slate-950/90 px-2 py-1 text-[10px] text-rose-400 flex items-center justify-between cursor-pointer hover:bg-rose-950/80 transition">
                                            <span>Remove</span>
                                            <input type="checkbox" name="remove_gallery_ids[]" value="{{ $gItem->id }}" class="rounded bg-slate-900 border-slate-700 text-rose-500 focus:ring-0">
                                        </label>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif

                    <x-image-dropzone 
                        name="gallery_images[]" 
                        id="service_edit_gallery" 
                        label="Add More Gallery Photos (Multi-Upload)" 
                        :multiple="true"
                        :required="false" 
                        help="Select or drag additional showcase pictures to append to this service gallery. Supports PNG, JPG, WebP, AVIF, HEIC (Max 5 MB)." 
                        :maxSizeMb="5" />
                </div>
            </div>

            <!-- Section 3: Descriptions & Features -->
            <div>
                <label class="block font-semibold text-slate-300 mb-1">Short Description (Cards) *</label>
                <textarea name="short_description" rows="2" required class="w-full px-4 py-2.5 rounded-xl bg-slate-950 border border-slate-800 text-white text-xs focus:outline-none focus:border-sky-500">{{ old('short_description', $service->short_description) }}</textarea>
            </div>

            <div>
                <label class="block font-semibold text-slate-300 mb-1">Full Detailed Description & Specs</label>
                <textarea name="full_description" rows="4" placeholder="Detailed workshop workflow, German paint specs, booth temperature, warranty eligibility, etc." class="w-full px-4 py-2.5 rounded-xl bg-slate-950 border border-slate-800 text-white text-xs focus:outline-none focus:border-sky-500">{{ old('full_description', $service->full_description) }}</textarea>
            </div>

            <div>
                <label class="block font-semibold text-slate-300 mb-1">Key Features (One per line)</label>
                <textarea name="features" rows="3" class="w-full px-4 py-2.5 rounded-xl bg-slate-950 border border-slate-800 text-white text-xs focus:outline-none focus:border-sky-500 font-mono">{{ old('features', is_array($service->features) ? implode("\n", $service->features) : $service->features) }}</textarea>
            </div>

            <!-- Section 4: Vehicle Pricing Package Rates Manager -->
            <div class="pt-4 border-t border-slate-800 space-y-4">
                <div class="flex items-center justify-between">
                    <div>
                        <h2 class="text-sm font-bold text-white uppercase tracking-wider text-sky-400">Package Rates by Vehicle Type</h2>
                        <p class="text-[11px] text-slate-400">Edit existing vehicle tiers or add new packages.</p>
                    </div>
                    <button type="button" @click="addNewPackage()" class="px-3 py-1.5 rounded-lg bg-sky-600/20 text-sky-400 hover:bg-sky-600 hover:text-white border border-sky-500/30 text-xs font-bold transition flex items-center">
                        <span class="mr-1">+</span> Add Another Package Tier
                    </button>
                </div>

                <!-- Existing Packages -->
                @if($service->prices && $service->prices->count() > 0)
                    <div class="space-y-2.5">
                        <span class="text-[10px] font-bold text-slate-500 uppercase tracking-wider block">Existing Vehicle Packages</span>
                        @foreach($service->prices as $priceItem)
                            <div class="p-3.5 rounded-xl bg-slate-950 border border-slate-800 flex flex-wrap sm:flex-nowrap items-center justify-between gap-3">
                                <div>
                                    <span class="font-bold text-white text-xs">{{ $priceItem->package_name }}</span>
                                    <span class="text-slate-400 text-[11px] block">{{ $priceItem->vehicle_category }}</span>
                                </div>
                                <div class="flex items-center space-x-3">
                                    <div class="flex items-center space-x-1.5">
                                        <span class="text-slate-400 font-semibold text-[11px]">AED</span>
                                        <input type="number" step="0.01" name="prices[{{ $priceItem->id }}]" value="{{ $priceItem->price }}" class="w-32 px-3 py-1.5 rounded-lg bg-slate-900 border border-slate-700 text-amber-400 font-bold text-xs focus:outline-none focus:border-sky-500 text-right">
                                    </div>
                                    <label class="flex items-center space-x-1 text-[11px] text-rose-400 hover:text-rose-300 cursor-pointer" title="Check to delete this package">
                                        <input type="checkbox" name="delete_price_ids[]" value="{{ $priceItem->id }}" class="rounded bg-slate-900 border-slate-700 text-rose-500 focus:ring-0">
                                        <span>Delete</span>
                                    </label>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif

                <!-- Dynamic New Packages (Alpine) -->
                <div x-show="newPackages.length > 0" class="space-y-2.5 pt-2">
                    <span class="text-[10px] font-bold text-sky-400 uppercase tracking-wider block">New Package Tiers to Add</span>
                    <template x-for="(pkg, index) in newPackages" :key="index">
                        <div class="p-3 rounded-xl bg-slate-950 border border-sky-500/30 flex flex-wrap sm:flex-nowrap items-center gap-3">
                            <div class="flex-1 min-w-[180px]">
                                <input type="text" :name="'new_package_names[' + index + ']'" x-model="pkg.name" required placeholder="Package Name (e.g. Matte Paint Option)" class="w-full px-3 py-1.5 rounded-lg bg-slate-900 border border-slate-800 text-white text-xs">
                            </div>
                            <div class="w-36">
                                <select :name="'new_package_categories[' + index + ']'" x-model="pkg.category" class="w-full px-3 py-1.5 rounded-lg bg-slate-900 border border-slate-800 text-white text-xs">
                                    <option value="Sedan">Sedan</option>
                                    <option value="SUV / 4x4">SUV / 4x4</option>
                                    <option value="Coupe / Sports">Coupe / Sports</option>
                                    <option value="Luxury / Exotic">Luxury / Exotic</option>
                                    <option value="Van / Commercial">Van / Commercial</option>
                                </select>
                            </div>
                            <div class="flex items-center space-x-1.5 w-32">
                                <span class="text-slate-400 font-semibold text-[11px]">AED</span>
                                <input type="number" step="0.01" :name="'new_package_prices[' + index + ']'" x-model="pkg.price" required placeholder="1499" class="w-full px-3 py-1.5 rounded-lg bg-slate-900 border border-slate-800 text-amber-400 font-bold text-xs text-right">
                            </div>
                            <button type="button" @click="removeNewPackage(index)" class="p-1.5 rounded-lg text-slate-500 hover:text-rose-400 hover:bg-rose-500/10 transition" title="Cancel this row">
                                <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="M6 18L18 6M6 6l12 12"/></svg>
                            </button>
                        </div>
                    </template>
                </div>
            </div>

            <!-- Section 5: Visibility Toggle & Actions -->
            <div class="pt-4 border-t border-slate-800 flex flex-wrap items-center justify-between gap-4">
                <label class="flex items-center space-x-2 cursor-pointer">
                    <input type="checkbox" name="is_active" id="is_active" value="1" {{ $service->is_active ? 'checked' : '' }} class="rounded bg-slate-950 border-slate-700 text-sky-500 focus:ring-0">
                    <span class="font-bold text-slate-200 text-xs">Visible & Active on Website</span>
                </label>

                <div class="flex items-center space-x-3">
                    <button type="button" @click="showDeleteModal = true" class="px-4 py-2.5 rounded-xl bg-rose-500/15 hover:bg-rose-500/25 text-rose-400 border border-rose-500/30 text-xs font-bold transition">
                        Delete Service
                    </button>
                    <button type="submit" class="px-6 py-2.5 rounded-xl bg-sky-600 hover:bg-sky-500 text-white font-bold text-xs shadow-xl shadow-sky-600/30 transition">
                        Save Service Changes
                    </button>
                </div>
            </div>
        </form>

        <!-- Delete Confirmation Modal -->
        <div x-show="showDeleteModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/80 backdrop-blur-sm">
            <div class="max-w-md w-full p-6 rounded-3xl bg-slate-900 border border-slate-800 shadow-2xl space-y-4">
                <div class="w-12 h-12 rounded-2xl bg-rose-500/15 text-rose-400 flex items-center justify-center border border-rose-500/20">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
                </div>
                <div>
                    <h3 class="text-base font-bold text-white">Permanently Remove Service?</h3>
                    <p class="text-xs text-slate-400 mt-1 leading-relaxed">
                        Are you sure you want to remove <strong class="text-white">"{{ $service->name }}"</strong>? This will delete its pricing package tiers. Services with active in-progress workshop orders cannot be deleted.
                    </p>
                </div>
                <div class="flex items-center justify-end space-x-3 pt-2">
                    <button type="button" @click="showDeleteModal = false" class="px-4 py-2 rounded-xl bg-slate-800 text-slate-300 font-bold text-xs">
                        Cancel
                    </button>
                    <form action="{{ route('admin.services.destroy', $service->id) }}" method="POST">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="px-4 py-2 rounded-xl bg-rose-600 hover:bg-rose-500 text-white font-bold text-xs shadow-lg shadow-rose-600/30 transition">
                            Yes, Delete Service
                        </button>
                    </form>
                </div>
            </div>
        </div>

    </div>

</div>
@endsection