@extends('admin.layouts.app')
@section('title', 'Add Service')
@section('page-title', 'Create New Service')

@section('content')
<div class="max-w-5xl mx-auto">
    <div class="glass-strong rounded-3xl p-8 border border-white/5 shadow-2xl">
        <form action="{{ route('admin.services.store') }}" method="POST" enctype="multipart/form-data" class="space-y-8">
            @csrf
            
            <div class="grid md:grid-cols-2 gap-8">
                <div class="space-y-4">
                    <div class="space-y-2">
                        <label class="text-sm font-bold text-slate-400">Service Title</label>
                        <input type="text" name="title" placeholder="e.g. Engine Diagnostics" class="w-full bg-white/5 border border-white/10 rounded-2xl py-4 px-6 text-white" required>
                    </div>
                    
                    <div class="space-y-2">
                        <label class="text-sm font-bold text-slate-400">Short Description</label>
                        <textarea name="description" rows="3" placeholder="Brief overview of the service..." class="w-full bg-white/5 border border-white/10 rounded-2xl py-4 px-6 text-white"></textarea>
                    </div>

                    <div class="flex items-center space-x-3 pt-4">
                        <input type="checkbox" name="is_active" value="1" id="is_active" checked class="w-5 h-5 rounded border-white/10 bg-white/5 text-accent">
                        <label for="is_active" class="text-sm font-bold text-white">Active & Searchable</label>
                    </div>

                    <div class="space-y-2">
                        <label class="text-sm font-bold text-slate-400">FontAwesome Icon Class</label>
                        <input type="text" name="icon" placeholder="fa-tools" class="w-full bg-white/5 border border-white/10 rounded-2xl py-4 px-6 text-white text-sm">
                        <p class="text-[10px] text-slate-500 italic ml-1">Example: fa-wrench, fa-oil-can, fa-car</p>
                    </div>
                </div>

                <div class="space-y-6">
                    <div class="space-y-2">
                        <label class="text-sm font-bold text-slate-400">Est. Starting Price</label>
                        <input type="text" name="price_starting_from" placeholder="From $100" class="w-full bg-white/5 border border-white/10 rounded-2xl py-4 px-6 text-white text-sm">
                    </div>

                    <div class="space-y-2">
                        <label class="text-sm font-bold text-slate-400">Service Image</label>
                        <input type="file" name="image" class="w-full bg-white/5 border border-white/10 rounded-2xl py-2 px-6 text-white text-sm">
                    </div>
                </div>
            </div>

            <div class="grid md:grid-cols-2 gap-8">
                {{-- Benefits Section --}}
                <div class="space-y-4" x-data="{ benefits: [] }">
                    <label class="text-sm font-bold text-slate-400">Key Benefits</label>
                    <div class="space-y-2">
                        <template x-for="(benefit, index) in benefits" :key="index">
                            <div class="flex items-center space-x-2">
                                <input type="text" :name="'benefits['+index+']'" x-model="benefits[index]" class="flex-1 bg-white/5 border border-white/10 rounded-xl py-2 px-4 text-white text-sm">
                                <button type="button" @click="benefits.splice(index, 1)" class="text-neon-rose"><i class="fas fa-times-circle"></i></button>
                            </div>
                        </template>
                        <button type="button" @click="benefits.push('')" class="text-accent text-xs font-bold uppercase tracking-widest">+ Add Benefit</button>
                    </div>
                </div>

                {{-- Features Section --}}
                <div class="space-y-4" x-data="{ features: [] }">
                    <label class="text-sm font-bold text-slate-400">What's Included</label>
                    <div class="space-y-2">
                        <template x-for="(feature, index) in features" :key="index">
                            <div class="flex items-center space-x-2">
                                <input type="text" :name="'features['+index+']'" x-model="features[index]" class="flex-1 bg-white/5 border border-white/10 rounded-xl py-2 px-4 text-white text-sm">
                                <button type="button" @click="features.splice(index, 1)" class="text-neon-rose"><i class="fas fa-times-circle"></i></button>
                            </div>
                        </template>
                        <button type="button" @click="features.push('')" class="text-accent text-xs font-bold uppercase tracking-widest">+ Add Feature</button>
                    </div>
                </div>
            </div>

            {{-- Full Content --}}
            <div class="space-y-2">
                <label class="text-sm font-bold text-slate-400">Full Service Content (HTML Support)</label>
                <textarea name="content" rows="10" placeholder="Detailed service information..." class="w-full bg-white/5 border border-white/10 rounded-2xl py-4 px-6 text-white font-mono text-sm"></textarea>
            </div>

            {{-- SEO Section --}}
            <div class="p-8 bg-accent/5 rounded-[2rem] border border-accent/10 space-y-6">
                <h3 class="text-xl font-black text-accent flex items-center">
                    <i class="fas fa-search-dollar mr-3"></i> Search Engine Optimization
                </h3>
                
                <div class="grid md:grid-cols-2 gap-6">
                    <div class="space-y-2">
                        <label class="text-sm font-bold text-slate-400">URL Slug</label>
                        <input type="text" name="slug" placeholder="engine-diagnostics (auto-gen if empty)" class="w-full bg-dark-700 border border-white/10 rounded-2xl py-4 px-6 text-white">
                    </div>
                    <div class="space-y-2">
                        <label class="text-sm font-bold text-slate-400">Meta Title</label>
                        <input type="text" name="meta_title" class="w-full bg-dark-700 border border-white/10 rounded-2xl py-4 px-6 text-white">
                    </div>
                    <div class="col-span-2 space-y-2">
                        <label class="text-sm font-bold text-slate-400">Meta Description</label>
                        <textarea name="meta_description" rows="2" class="w-full bg-dark-700 border border-white/10 rounded-2xl py-4 px-6 text-white"></textarea>
                    </div>
                </div>
            </div>

            <div class="flex space-x-4 pt-4">
                <button type="submit" class="flex-1 bg-accent hover:bg-accent-dark text-white py-4 rounded-2xl font-bold text-lg transition-all shadow-xl shadow-accent/20">
                    Save New Service
                </button>
                <a href="{{ route('admin.services.index') }}" class="px-8 py-4 rounded-2xl bg-white/5 text-slate-400 font-bold hover:bg-white/10 transition-all border border-white/10">
                    Cancel
                </a>
            </div>
        </form>
    </div>
</div>
@endsection