@php
    $benefitsValue = old('benefits', isset($service) ? $service->benefit_items : ['', '', '', '']);

    if (is_string($benefitsValue)) {
        $benefitsValue = preg_split('/[\r\n,]+/', $benefitsValue) ?: [];
    }

    $benefitsValue = array_pad(array_values(array_filter(array_map('trim', $benefitsValue), fn ($value) => $value !== '')), 6, '');
@endphp

<div class="admin-grid">
    <div class="admin-card">
        <p class="admin-section-title">Service identity</p>
        <div class="mt-4 admin-form-grid admin-form-grid--two">
            <div class="admin-field">
                <label for="service-title">Title</label>
                <input id="service-title" type="text" name="title" value="{{ old('title', $service->title ?? '') }}" required>
            </div>
            <div class="admin-field">
                <label for="service-slug">Slug</label>
                <input id="service-slug" type="text" name="slug" value="{{ old('slug', $service->slug ?? '') }}" required>
            </div>
            <div class="admin-field">
                <label for="service-category">Category</label>
                <input id="service-category" type="text" name="category" value="{{ old('category', $service->category ?? '') }}">
            </div>
            <div class="admin-field">
                <label for="service-tags">Tags</label>
                <input id="service-tags" type="text" name="tags" value="{{ old('tags', isset($service) && is_array($service->tags) ? implode(', ', $service->tags) : ($service->tags ?? '')) }}">
                <p class="admin-field__hint">Comma-separated tags for filtering.</p>
            </div>
            <div class="admin-field">
                <label for="service-sort">Sort order</label>
                <input id="service-sort" type="number" name="sort_order" value="{{ old('sort_order', $service->sort_order ?? 0) }}">
            </div>
            <div class="admin-field md:col-span-2">
                <label for="service-short-description">Short description</label>
                <input id="service-short-description" type="text" name="short_description" value="{{ old('short_description', $service->short_description ?? '') }}">
            </div>
            <div class="admin-field md:col-span-2">
                <label for="service-hero-title">Hero title</label>
                <input id="service-hero-title" type="text" name="hero_title" value="{{ old('hero_title', $service->hero_title ?? '') }}">
            </div>
        </div>
    </div>

    <div class="admin-card">
        <p class="admin-section-title">Content</p>
        <div class="mt-4 admin-form-grid">
            <div class="admin-field">
                <label for="service-long-description">Long description</label>
                @include('admin.partials.rich-text-editor', [
                    'id' => 'service-long-description',
                    'name' => 'long_description',
                    'value' => old('long_description', $service->long_description ?? ''),
                ])
            </div>
        </div>
    </div>

    <div class="admin-card">
        <p class="admin-section-title">Benefits</p>
        <div class="mt-4 admin-grid admin-grid--two">
            @foreach($benefitsValue as $index => $benefit)
                <div class="admin-field">
                    <label for="service-benefit-{{ $index }}">Benefit {{ $index + 1 }}</label>
                    <input id="service-benefit-{{ $index }}" type="text" name="benefits[]" value="{{ $benefit }}">
                </div>
            @endforeach
        </div>
    </div>

    <div class="admin-grid admin-grid--two">
        <div class="admin-card">
            <p class="admin-section-title">Service image</p>
            <div class="mt-4">
                @include('admin.partials.media-picker', [
                    'label' => 'Main service image',
                    'name' => 'image_media_id',
                    'fieldId' => 'service-image-media',
                    'value' => old('image_media_id', $service->image_media_id ?? null),
                    'hint' => 'Used on cards and the service detail page.',
                ])
            </div>
            <div class="mt-4 admin-field">
                <label for="service-image-path">Legacy fallback path</label>
                <input id="service-image-path" type="text" name="image" value="{{ old('image', $service->image ?? '') }}">
            </div>
        </div>

        <div class="admin-card">
            <p class="admin-section-title">Service icon</p>
            <div class="mt-4">
                @include('admin.partials.media-picker', [
                    'label' => 'Card icon',
                    'name' => 'icon_media_id',
                    'fieldId' => 'service-icon-media',
                    'value' => old('icon_media_id', $service->icon_media_id ?? null),
                ])
            </div>
            <div class="mt-4 admin-field">
                <label for="service-icon-path">Legacy fallback path</label>
                <input id="service-icon-path" type="text" name="icon" value="{{ old('icon', $service->icon ?? '') }}">
            </div>
        </div>
    </div>

    <div class="admin-card">
        <p class="admin-section-title">SEO</p>
        <div class="mt-4 admin-form-grid admin-form-grid--two">
            <div class="admin-field md:col-span-2">
                <label for="service-seo-title">SEO title</label>
                <input id="service-seo-title" type="text" name="seo_title" value="{{ old('seo_title', $service->seo_title ?? '') }}">
            </div>
            <div class="admin-field md:col-span-2">
                <label for="service-seo-description">SEO description</label>
                <textarea id="service-seo-description" name="seo_description" rows="4">{{ old('seo_description', $service->seo_description ?? '') }}</textarea>
            </div>
        </div>
    </div>
</div>
