@extends('layouts.portal')

@section('title', 'Add New Workshop Service — Abu Dhabi Auto Care')

@section('content')
<div class="max-w-4xl mx-auto space-y-6">
    
    <!-- Top Breadcrumbs & 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">New Service</span>
            </div>
            <h1 class="text-2xl font-black text-white tracking-tight">Add New Workshop Service</h1>
            <p class="text-xs text-slate-400 mt-1">Configure service title, baseline pricing, photo and vehicle package rates.</p>
        </div>
        <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>

    @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="{
             packages: [
                 { name: 'Same-Color Sedan Refinishing', category: 'Sedan', price: 1299 },
                 { name: 'Same-Color SUV / 4x4 Refinishing', category: 'SUV / 4x4', price: 1599 }
             ],
             addPackage() {
                 this.packages.push({ name: '', category: 'Sedan', price: '' });
             },
             removePackage(index) {
                 this.packages.splice(index, 1);
             }
         }">
        
        <form action="{{ route('admin.services.store') }}" method="POST" enctype="multipart/form-data" class="space-y-6 text-xs">
            @csrf

            <!-- Section 1: Basic Service Information -->
            <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') }}" required placeholder="e.g. Complete Full-Body Car Painting" 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') }}" 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') === $key)>{{ $title }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block font-semibold text-slate-300 mb-1">Starting Baseline Rate (AED) *</label>
                    <input type="number" step="0.01" name="starting_price" value="{{ old('starting_price', 1299) }}" 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">Highlight Badge Tagline</label>
                    <input type="text" name="badge" value="{{ old('badge', 'German Oven Baked') }}" placeholder="e.g. Most Popular" 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-4">
                <x-image-dropzone 
                    name="image" 
                    id="service_create_image" 
                    label="Main Featured Photograph" 
                    :required="false" 
                    help="Primary thumbnail & hero image for this service. Supports PNG, JPG, WebP, AVIF, SVG, GIF, HEIC up to 5 MB." 
                    :maxSizeMb="5" />

                @if($images->isNotEmpty())
                    <div class="flex items-center space-x-2 text-[11px] text-slate-400">
                        <span>Or link existing media for main image:</span>
                        <select name="media_id" class="px-2 py-1 rounded bg-slate-950 border border-slate-800 text-white text-[11px]">
                            <option value="">-- None (use uploaded image or category fallback) --</option>
                            @foreach($images as $img)
                                <option value="{{ $img->id }}" @selected(old('media_id') == $img->id)>{{ $img->title }}</option>
                            @endforeach
                        </select>
                    </div>
                @endif

                <div class="pt-2 border-t border-slate-800/80">
                    <x-image-dropzone 
                        name="gallery_images[]" 
                        id="service_create_gallery" 
                        label="Service Gallery & Portfolio Photos (Multi-Upload)" 
                        :multiple="true"
                        :required="false" 
                        help="Select or drag multiple showcase pictures (workshop booth, before/after, finished results). Supports PNG, JPG, WebP, AVIF, HEIC." 
                        :maxSizeMb="5" />
                </div>
            </div>

            <!-- Section 3: Descriptions & Features -->
            <div>
                <label class="block font-semibold text-slate-300 mb-1">Short Summary (Shown on Cards) *</label>
                <textarea name="short_description" rows="2" required placeholder="Concise 1-2 sentence overview of what this service covers." 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') }}</textarea>
            </div>

            <div>
                <label class="block font-semibold text-slate-300 mb-1">Full Description & Technical Specifications</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') }}</textarea>
            </div>

            <div>
                <label class="block font-semibold text-slate-300 mb-1">Key Features (One feature per line)</label>
                <textarea name="features" rows="3" placeholder="German Thermal Paint Booth&#10;Spectrophotometer Color Code Match&#10;Free Pickup & Delivery in Abu Dhabi&#10;Up to 3-Year Official Warranty" 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') }}</textarea>
            </div>

            <!-- Section 4: Dynamic Vehicle Package Pricing Builder -->
            <div class="pt-4 border-t border-slate-800">
                <div class="flex items-center justify-between mb-3">
                    <div>
                        <h2 class="text-sm font-bold text-white uppercase tracking-wider text-sky-400">Package Pricing by Vehicle Category</h2>
                        <p class="text-[11px] text-slate-400">Add tiered package rates (e.g. Sedan vs SUV vs Luxury).</p>
                    </div>
                    <button type="button" @click="addPackage()" 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 Package Tier
                    </button>
                </div>

                <div class="space-y-2.5">
                    <template x-for="(pkg, index) in packages" :key="index">
                        <div class="p-3 rounded-xl bg-slate-950 border border-slate-800 flex flex-wrap sm:flex-nowrap items-center gap-3">
                            <div class="flex-1 min-w-[180px]">
                                <input type="text" :name="'package_names[' + index + ']'" x-model="pkg.name" required placeholder="Package Name (e.g. Standard Sedan Paint)" 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="'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="'package_prices[' + index + ']'" x-model="pkg.price" required placeholder="1299" 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="removePackage(index)" class="p-1.5 rounded-lg text-slate-500 hover:text-rose-400 hover:bg-rose-500/10 transition" title="Delete Package Tier">
                                <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                            </button>
                        </div>
                    </template>
                </div>
            </div>

            <!-- Visibility Toggle & Submit -->
            <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" value="1" checked class="rounded bg-slate-950 border-slate-700 text-sky-500 focus:ring-0">
                    <span class="font-bold text-slate-200 text-xs">Publish Live & Visible on Website</span>
                </label>

                <div class="flex items-center space-x-3">
                    <a href="{{ route('admin.services') }}" class="px-5 py-2.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-300 font-bold text-xs transition">
                        Cancel
                    </a>
                    <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 flex items-center">
                        <span class="mr-1.5">+</span> Create & Publish Service
                    </button>
                </div>
            </div>

        </form>
    </div>

</div>
@endsection