@extends('layouts.portal')

@section('title', 'Services & Pricing Catalog — Abu Dhabi Auto Care')

@section('content')
<div class="space-y-6" x-data="{ deleteModalOpen: false, deleteAction: '', serviceToDelete: '' }">
    
    <!-- Header with Add Service CTA -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
            <div class="flex items-center space-x-2 text-xs text-sky-400 font-bold uppercase tracking-wider mb-1">
                <span>Workshop Offerings</span>
                <span>•</span>
                <span>{{ $services->count() }} Configured Services</span>
            </div>
            <h1 class="text-2xl font-black text-white tracking-tight">Services & Pricing Catalog</h1>
            <p class="text-xs text-slate-400 mt-1">Manage workshop offerings, packages, starting rates, vehicle category pricing and public visibility.</p>
        </div>
        <div class="flex items-center space-x-3">
            <a href="{{ route('admin.settings', 'services-video') }}" class="px-3.5 py-2.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-300 font-bold text-xs border border-slate-700 transition flex items-center">
                <svg class="w-3.5 h-3.5 mr-1.5 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
                <span>Video Showcase</span>
            </a>
            <a href="{{ route('admin.services.create') }}" class="px-5 py-2.5 rounded-xl bg-sky-600 hover:bg-sky-500 text-white font-black text-xs shadow-xl shadow-sky-600/30 transition flex items-center">
                <span class="mr-1.5 text-sm">+</span> Add New Service
            </a>
        </div>
    </div>

    @if($errors->has('service'))
        <div class="p-4 rounded-2xl bg-rose-950/80 border border-rose-500/40 text-rose-300 text-xs flex items-center space-x-2">
            <svg class="w-5 h-5 shrink-0" 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>
            <span>{{ $errors->first('service') }}</span>
        </div>
    @endif

    <!-- Services Table -->
    <div class="bg-slate-900 rounded-3xl border border-slate-800 overflow-hidden shadow-2xl">
        <div class="overflow-x-auto">
            <table class="w-full text-xs text-left">
                <thead class="bg-slate-950/80 border-b border-slate-800 text-slate-400 uppercase font-bold tracking-wider text-[11px]">
                    <tr>
                        <th class="px-6 py-4">Service & Photograph</th>
                        <th class="px-5 py-4">Category</th>
                        <th class="px-5 py-4">Baseline Rate</th>
                        <th class="px-5 py-4">Packages</th>
                        <th class="px-5 py-4">Status & Visibility</th>
                        <th class="px-6 py-4 text-right">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-800/80 text-slate-300">
                    @forelse($services as $svc)
                        <tr class="hover:bg-slate-800/30 transition">
                            <td class="px-6 py-4">
                                <div class="flex items-center space-x-3.5">
                                    <div class="relative w-20 h-14 rounded-xl overflow-hidden bg-slate-950 shrink-0 border border-slate-800">
                                        <img src="{{ $svc->image_url }}" alt="{{ $svc->name }}" class="w-full h-full object-cover">
                                        @if($svc->badge)
                                            <span class="absolute bottom-1 right-1 px-1.5 py-0.5 rounded text-[8px] font-black bg-amber-500 text-slate-950 uppercase">
                                                {{ $svc->badge }}
                                            </span>
                                        @endif
                                    </div>
                                    <div>
                                        <div class="font-black text-white text-sm hover:text-sky-300 transition">
                                            <a href="{{ route('admin.services.edit', $svc->id) }}">{{ $svc->name }}</a>
                                        </div>
                                        <div class="text-[11px] text-slate-400 max-w-sm truncate mt-0.5">{{ $svc->short_description }}</div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-5 py-4">
                                <span class="px-2.5 py-1 rounded-lg text-[10px] font-bold bg-sky-500/10 text-sky-400 border border-sky-500/20">
                                    {{ $svc->category_title }}
                                </span>
                            </td>
                            <td class="px-5 py-4">
                                @if($svc->starting_price > 0)
                                    <span class="font-mono font-extrabold text-amber-400 text-sm">
                                        AED {{ number_format($svc->starting_price) }}
                                    </span>
                                @else
                                    <span class="text-xs font-bold text-slate-400">Quote on Inspection</span>
                                @endif
                            </td>
                            <td class="px-5 py-4">
                                <div class="flex items-center space-x-1.5 text-xs">
                                    <span class="font-bold text-white font-mono">{{ $svc->prices->count() }}</span>
                                    <span class="text-slate-400 text-[11px]">Tiers</span>
                                </div>
                            </td>
                            <td class="px-5 py-4">
                                <form action="{{ route('admin.services.toggle_status', $svc->id) }}" method="POST">
                                    @csrf
                                    <button type="submit" class="inline-flex items-center px-2.5 py-1 rounded-full text-[11px] font-bold transition {{ $svc->is_active ? 'bg-emerald-500/15 text-emerald-400 hover:bg-emerald-500/25 border border-emerald-500/20' : 'bg-slate-800 text-slate-400 hover:bg-slate-700 border border-slate-700' }}" title="Click to toggle visibility">
                                        <span class="w-1.5 h-1.5 rounded-full mr-1.5 {{ $svc->is_active ? 'bg-emerald-400 animate-pulse' : 'bg-slate-500' }}"></span>
                                        <span>{{ $svc->is_active ? 'Active (Live)' : 'Hidden' }}</span>
                                    </button>
                                </form>
                            </td>
                            <td class="px-6 py-4 text-right">
                                <div class="inline-flex items-center space-x-2">
                                    <a href="{{ route('services.show', $svc->slug) }}" target="_blank" class="p-2 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-400 hover:text-white transition" title="Preview Public Page">
                                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
                                    </a>
                                    <a href="{{ route('admin.services.edit', $svc->id) }}" class="px-3 py-1.5 rounded-xl bg-sky-600 hover:bg-sky-500 text-white font-bold text-xs transition shadow-md shadow-sky-600/20">
                                        Edit Rates & Info
                                    </a>
                                    <button type="button" 
                                            @click="deleteModalOpen = true; deleteAction = '{{ route('admin.services.destroy', $svc->id) }}'; serviceToDelete = '{{ addslashes($svc->name) }}'"
                                            class="p-2 rounded-xl bg-slate-800 hover:bg-rose-500/20 text-slate-400 hover:text-rose-400 transition" 
                                            title="Delete Service">
                                        <svg class="w-3.5 h-3.5" 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>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="px-6 py-12 text-center text-slate-400 text-xs">
                                <p class="text-sm font-bold text-white mb-1">No services found in database.</p>
                                <a href="{{ route('admin.services.create') }}" class="text-sky-400 font-bold hover:underline">+ Add your first workshop service</a>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- Quick Delete Confirmation Modal -->
    <div x-show="deleteModalOpen" 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">Delete Workshop Service?</h3>
                <p class="text-xs text-slate-400 mt-1 leading-relaxed">
                    Are you sure you want to delete <strong class="text-white" x-text="serviceToDelete"></strong>? This will remove all associated package prices.
                </p>
            </div>
            <div class="flex items-center justify-end space-x-3 pt-2">
                <button type="button" @click="deleteModalOpen = false" class="px-4 py-2 rounded-xl bg-slate-800 text-slate-300 font-bold text-xs">
                    Cancel
                </button>
                <form :action="deleteAction" 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>
@endsection