@extends('admin.layouts.app')

@section('page_title', $service->exists ? 'Edit service' : 'New service')

@section('content')
    @php
        $editing = $service->exists;
        $icons = [
            'Graduation cap' => 'M22 10 12 5 2 10l10 5 10-5ZM6 12v5c0 1 2.5 3 6 3s6-2 6-3v-5',
            'Document' => 'M4 4h16v16H4zM4 9h16M9 4v16',
            'Star' => 'M12 2l2.4 7.4H22l-6 4.6 2.3 7.4L12 17l-6.3 4.4L8 14 2 9.4h7.6z',
            'Briefcase' => 'M20 7h-4V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2Z',
            'Heart' => 'M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1a5.5 5.5 0 1 0-7.8 7.8L12 21l8.8-8.5a5.5 5.5 0 0 0 0-7.9Z',
            'Shield' => 'M12 2 4 6v6c0 5 3.4 8.5 8 10 4.6-1.5 8-5 8-10V6z',
            'People' => 'M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z',
            'Plane' => 'M17.8 19.2 16 11l3.5-3.5a2.1 2.1 0 0 0-3-3L13 8 4.8 6.2a1 1 0 0 0-.9 1.7L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 4.1 5.1a1 1 0 0 0 1.7-.9Z',
        ];
        $current = old('icon', $service->icon);
        $isCustom = $current && ! in_array($current, $icons, true);
    @endphp
    <a href="{{ route('admin.services.index') }}" class="mb-6 inline-flex items-center gap-2 text-sm text-slate-500 hover:text-brand-600">
        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M19 12H5M11 18l-6-6 6-6"/></svg>
        Back to services
    </a>

    <form action="{{ $editing ? route('admin.services.update', $service) : route('admin.services.store') }}" method="POST"
          class="mx-auto max-w-2xl space-y-6 rounded-2xl border border-slate-200 bg-white p-6 sm:p-8">
        @csrf
        @if ($editing) @method('PUT') @endif

        <x-admin.field label="Title" name="title" :value="old('title', $service->title)" required />
        <x-admin.field label="Description" name="description" type="textarea" :value="old('description', $service->description)" required rows="3" />

        <div>
            <label for="icon-select" class="mb-1.5 block text-sm font-medium text-slate-600">Icon</label>
            <div class="flex items-center gap-4">
                <span class="grid h-14 w-14 shrink-0 place-items-center rounded-2xl bg-brand-600 text-white">
                    <svg id="icon-preview" class="h-7 w-7" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="{{ $current ?: $icons['Graduation cap'] }}"/></svg>
                </span>
                <select id="icon-select" name="icon" class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm outline-none focus:border-brand-400 focus:ring-2 focus:ring-brand-100">
                    @if ($isCustom)<option value="{{ $current }}" selected>Current custom icon</option>@endif
                    @foreach ($icons as $label => $path)
                        <option value="{{ $path }}" @selected($current === $path)>{{ $label }}</option>
                    @endforeach
                </select>
            </div>
            <p class="mt-1 text-xs text-slate-400">Pick an icon — the preview updates instantly.</p>
        </div>

        <x-admin.field label="Sort order" name="sort_order" type="number" :value="old('sort_order', $service->sort_order ?? 0)" hint="Lower numbers appear first." />

        <x-admin.toggle label="Published" name="is_published" :checked="old('is_published', $service->is_published ?? true)" hint="Show this service on the website." />

        <div class="flex items-center gap-3 border-t border-slate-100 pt-6">
            <button type="submit" class="rounded-full bg-brand-600 px-6 py-3 text-sm font-semibold text-white hover:bg-brand-700">{{ $editing ? 'Save changes' : 'Create service' }}</button>
            <a href="{{ route('admin.services.index') }}" class="rounded-full border border-slate-200 px-6 py-3 text-sm font-semibold text-slate-600 hover:border-slate-300">Cancel</a>
        </div>
    </form>

    @push('scripts')
    <script>
        const iconSelect = document.getElementById('icon-select');
        const iconPreview = document.getElementById('icon-preview')?.querySelector('path');
        iconSelect?.addEventListener('change', (e) => {
            if (iconPreview) iconPreview.setAttribute('d', e.target.value);
        });
    </script>
    @endpush
@endsection
