{{-- Reusable service form. Usage:
        @include('admin._service_form', ['service' => $service ?? null])
--}}
@php
    $svc = $service ?? null;
    $featuresAr = $svc && is_array($svc->features_ar) ? implode("\n", $svc->features_ar) : '';
    $featuresEn = $svc && is_array($svc->features_en) ? implode("\n", $svc->features_en) : '';
    $types = [
        ['robot',     '🤖', 'Robot'],
        ['indicator', '📊', 'Indicator'],
        ['course',    '🎓', 'Course'],
        ['copier',    '📡', 'Copier'],
    ];
@endphp

<div class="grid sm:grid-cols-2 gap-3">
    <label class="block">
        <span class="block text-xs font-semibold text-gray-300 mb-1.5">{{ __('messages.name_ar') }}</span>
        <input name="name_ar" required value="{{ old('name_ar', $svc->name_ar ?? '') }}"
            class="w-full rounded-lg bg-bgapp border border-white/10 px-3 py-2.5 text-sm text-white focus:border-teal-500 focus:ring-2 focus:ring-teal-500/30" />
    </label>
    <label class="block">
        <span class="block text-xs font-semibold text-gray-300 mb-1.5">Service name (English)</span>
        <input name="name_en" required value="{{ old('name_en', $svc->name_en ?? '') }}" dir="ltr"
            class="w-full rounded-lg bg-bgapp border border-white/10 px-3 py-2.5 text-sm text-white focus:border-teal-500 focus:ring-2 focus:ring-teal-500/30" />
    </label>
    <label class="block">
        <span class="block text-xs font-semibold text-gray-300 mb-1.5">{{ __('messages.description_ar') }}</span>
        <textarea name="description_ar" rows="3" required class="w-full rounded-lg bg-bgapp border border-white/10 px-3 py-2.5 text-sm text-white focus:border-teal-500 focus:ring-2 focus:ring-teal-500/30">{{ old('description_ar', $svc->description_ar ?? '') }}</textarea>
    </label>
    <label class="block">
        <span class="block text-xs font-semibold text-gray-300 mb-1.5">Description (English)</span>
        <textarea name="description_en" rows="3" required dir="ltr" class="w-full rounded-lg bg-bgapp border border-white/10 px-3 py-2.5 text-sm text-white focus:border-teal-500 focus:ring-2 focus:ring-teal-500/30">{{ old('description_en', $svc->description_en ?? '') }}</textarea>
    </label>
    <label class="block">
        <span class="block text-xs font-semibold text-gray-300 mb-1.5">{{ __('messages.features_ar') }}</span>
        <textarea name="features_ar" rows="4" placeholder="{{ app()->getLocale() === 'ar' ? 'ميزة 1&#10;ميزة 2&#10;ميزة 3' : 'Feature 1&#10;Feature 2&#10;Feature 3' }}" class="w-full rounded-lg bg-bgapp border border-white/10 px-3 py-2.5 text-sm text-white focus:border-teal-500 focus:ring-2 focus:ring-teal-500/30">{{ old('features_ar', $featuresAr) }}</textarea>
    </label>
    <label class="block">
        <span class="block text-xs font-semibold text-gray-300 mb-1.5">Features (English — one per line)</span>
        <textarea name="features_en" rows="4" dir="ltr" placeholder="Feature 1&#10;Feature 2" class="w-full rounded-lg bg-bgapp border border-white/10 px-3 py-2.5 text-sm text-white focus:border-teal-500 focus:ring-2 focus:ring-teal-500/30">{{ old('features_en', $featuresEn) }}</textarea>
    </label>
    <label class="block">
        <span class="block text-xs font-semibold text-gray-300 mb-1.5">{{ __('messages.how_to_get_ar') }}</span>
        <textarea name="how_to_get_ar" rows="3" class="w-full rounded-lg bg-bgapp border border-white/10 px-3 py-2.5 text-sm text-white focus:border-teal-500 focus:ring-2 focus:ring-teal-500/30">{{ old('how_to_get_ar', $svc->how_to_get_ar ?? '') }}</textarea>
    </label>
    <label class="block">
        <span class="block text-xs font-semibold text-gray-300 mb-1.5">How to get (English)</span>
        <textarea name="how_to_get_en" rows="3" dir="ltr" class="w-full rounded-lg bg-bgapp border border-white/10 px-3 py-2.5 text-sm text-white focus:border-teal-500 focus:ring-2 focus:ring-teal-500/30">{{ old('how_to_get_en', $svc->how_to_get_en ?? '') }}</textarea>
    </label>
</div>

<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-3 mt-3">
    <label class="block sm:col-span-2">
        <span class="block text-xs font-semibold text-gray-300 mb-1.5">{{ __('messages.tutorial_link') }}</span>
        <input name="tutorial_link" type="url" value="{{ old('tutorial_link', $svc->tutorial_link ?? '') }}" placeholder="https://…" dir="ltr"
            class="w-full rounded-lg bg-bgapp border border-white/10 px-3 py-2.5 text-sm text-white focus:border-teal-500 focus:ring-2 focus:ring-teal-500/30" />
    </label>
    <label class="block">
        <span class="block text-xs font-semibold text-gray-300 mb-1.5">{{ __('messages.icon') }}</span>
        <input name="icon" maxlength="6" value="{{ old('icon', $svc->icon ?? '🤖') }}"
            class="w-full text-center rounded-lg bg-bgapp border border-white/10 px-3 py-2.5 text-base text-white focus:border-teal-500 focus:ring-2 focus:ring-teal-500/30" />
    </label>
    <label class="block">
        <span class="block text-xs font-semibold text-gray-300 mb-1.5">{{ __('messages.sort_order') }}</span>
        <input name="sort_order" type="number" min="0" value="{{ old('sort_order', $svc->sort_order ?? 0) }}"
            class="w-full rounded-lg bg-bgapp border border-white/10 px-3 py-2.5 text-sm text-white focus:border-teal-500 focus:ring-2 focus:ring-teal-500/30" />
    </label>
</div>

{{-- Type radio --}}
<div class="mt-4">
    <span class="block text-xs font-semibold text-gray-300 mb-2">{{ __('messages.type') }}</span>
    <div class="grid grid-cols-2 sm:grid-cols-4 gap-2">
        @foreach($types as [$val, $emoji, $label])
            @php $checked = old('type', $svc->type ?? 'robot') === $val; @endphp
            <label class="cursor-pointer">
                <input type="radio" name="type" value="{{ $val }}" class="peer sr-only" @checked($checked) />
                <div class="rounded-xl bg-white/5 border border-white/10 p-3 text-center hover:bg-white/10 peer-checked:bg-teal-500/15 peer-checked:border-teal-500 peer-checked:text-teal-300 transition">
                    <div class="text-2xl">{{ $emoji }}</div>
                    <div class="text-xs font-bold mt-1">{{ $label }}</div>
                </div>
            </label>
        @endforeach
    </div>
</div>

{{-- Plan radio --}}
<div class="mt-4">
    <span class="block text-xs font-semibold text-gray-300 mb-2">{{ __('messages.plan') }}</span>
    <div class="grid grid-cols-2 gap-2 max-w-sm">
        @foreach([['free','Free','blue'],['vip','👑 VIP','teal']] as [$val, $label, $color])
            @php $checked = old('plan', $svc->plan ?? 'free') === $val; @endphp
            <label class="cursor-pointer">
                <input type="radio" name="plan" value="{{ $val }}" class="peer sr-only" @checked($checked) />
                <div class="rounded-xl bg-white/5 border border-white/10 p-3 text-center hover:bg-white/10
                            peer-checked:bg-{{ $color }}-500/15 peer-checked:border-{{ $color }}-500 peer-checked:text-{{ $color }}-300 transition">
                    <div class="text-sm font-extrabold">{{ $label }}</div>
                </div>
            </label>
        @endforeach
    </div>
</div>