@php
    $isEdit = (bool) $practiceArea;
@endphp

<form method="POST" action="{{ $isEdit ? route('admin.practice-areas.update', $practiceArea) : route('admin.practice-areas.store') }}" enctype="multipart/form-data">
    @csrf
    @if ($isEdit) @method('PUT') @endif

    <div class="card p-4 mb-3">
        <h6 class="mb-3" style="color: var(--admin-mute); text-transform: uppercase; font-size: 12px;">Content</h6>
        <div class="row g-3">
            <div class="col-12">
                <label class="form-label">Slug</label>
                <input type="text" name="slug" class="form-control @error('slug') is-invalid @enderror" value="{{ old('slug', $practiceArea->slug ?? '') }}">
                <div class="form-text">Used in the page URL, e.g. /en/practice-areas/{slug}</div>
                @error('slug') <div class="invalid-feedback">{{ $message }}</div> @enderror
            </div>

            <div class="col-md-6">
                <label class="form-label">Title (English)</label>
                <input type="text" name="title_en" class="form-control @error('title_en') is-invalid @enderror" value="{{ old('title_en', $practiceArea->title_en ?? '') }}">
                @error('title_en') <div class="invalid-feedback">{{ $message }}</div> @enderror
            </div>
            <div class="col-md-6">
                <label class="form-label">Title (Arabic)</label>
                <input type="text" name="title_ar" dir="rtl" class="form-control @error('title_ar') is-invalid @enderror" value="{{ old('title_ar', $practiceArea->title_ar ?? '') }}">
                @error('title_ar') <div class="invalid-feedback">{{ $message }}</div> @enderror
            </div>

            <div class="col-md-6">
                <label class="form-label">Short Teaser (English)</label>
                <input type="text" name="short_teaser_en" class="form-control @error('short_teaser_en') is-invalid @enderror" value="{{ old('short_teaser_en', $practiceArea->short_teaser_en ?? '') }}">
                <div class="form-text">First sentence — used on the homepage/overview cards.</div>
                @error('short_teaser_en') <div class="invalid-feedback">{{ $message }}</div> @enderror
            </div>
            <div class="col-md-6">
                <label class="form-label">Short Teaser (Arabic)</label>
                <input type="text" name="short_teaser_ar" dir="rtl" class="form-control" value="{{ old('short_teaser_ar', $practiceArea->short_teaser_ar ?? '') }}">
            </div>

            <div class="col-md-6">
                <label class="form-label">Intro Paragraph (English)</label>
                <textarea name="intro_paragraph_en" rows="4" class="form-control @error('intro_paragraph_en') is-invalid @enderror">{{ old('intro_paragraph_en', $practiceArea->intro_paragraph_en ?? '') }}</textarea>
                @error('intro_paragraph_en') <div class="invalid-feedback">{{ $message }}</div> @enderror
            </div>
            <div class="col-md-6">
                <label class="form-label">Intro Paragraph (Arabic)</label>
                <textarea name="intro_paragraph_ar" dir="rtl" rows="4" class="form-control">{{ old('intro_paragraph_ar', $practiceArea->intro_paragraph_ar ?? '') }}</textarea>
            </div>

            <div class="col-md-6">
                <label class="form-label">Closing Statement (English)</label>
                <textarea name="closing_statement_en" rows="3" class="form-control">{{ old('closing_statement_en', $practiceArea->closing_statement_en ?? '') }}</textarea>
            </div>
            <div class="col-md-6">
                <label class="form-label">Closing Statement (Arabic)</label>
                <textarea name="closing_statement_ar" dir="rtl" rows="3" class="form-control">{{ old('closing_statement_ar', $practiceArea->closing_statement_ar ?? '') }}</textarea>
            </div>
        </div>
    </div>

    <div class="card p-4 mb-3">
        <h6 class="mb-3" style="color: var(--admin-mute); text-transform: uppercase; font-size: 12px;">Settings</h6>
        <div class="row g-3">
            <div class="col-md-6">
                @include('admin.partials.image-field', ['name' => 'image', 'label' => 'Image', 'current' => $practiceArea->image ?? null])
            </div>
            <div class="col-md-3">
                <label class="form-label">Order</label>
                <input type="number" name="order" class="form-control @error('order') is-invalid @enderror" value="{{ old('order', $practiceArea->order ?? 0) }}">
                @error('order') <div class="invalid-feedback">{{ $message }}</div> @enderror
            </div>
            <div class="col-md-3 d-flex align-items-end">
                <div class="form-check">
                    <input type="hidden" name="is_active" value="0">
                    <input type="checkbox" name="is_active" id="is_active" class="form-check-input" value="1" @checked(old('is_active', $practiceArea->is_active ?? true))>
                    <label for="is_active" class="form-check-label">Active</label>
                </div>
            </div>
        </div>
    </div>

    <div class="card p-4 mb-3" x-data="servicesRepeater({{ Js::from($services->map(fn ($s) => ['id' => $s->id, 'text_en' => $s->text_en, 'text_ar' => $s->text_ar, 'order' => $s->order])) }})">
        <h6 class="mb-3" style="color: var(--admin-mute); text-transform: uppercase; font-size: 12px;">Service Bullet List</h6>

        <template x-for="(row, index) in rows" :key="index">
            <div class="admin-repeater-row" x-show="!row.deleted">
                <input type="hidden" :name="'services[' + index + '][id]'" :value="row.id">
                <input type="hidden" :name="'services[' + index + '][order]'" :value="index">
                <input type="hidden" :name="'services[' + index + '][delete]'" :value="row.deleted ? 1 : 0">
                <div class="row g-2 align-items-center">
                    <div class="col-md-5">
                        <input type="text" :name="'services[' + index + '][text_en]'" x-model="row.text_en" class="form-control" placeholder="Service (English)">
                    </div>
                    <div class="col-md-5">
                        <input type="text" :name="'services[' + index + '][text_ar]'" dir="rtl" x-model="row.text_ar" class="form-control" placeholder="Service (Arabic)">
                    </div>
                    <div class="col-md-2 text-end">
                        <button type="button" class="btn btn-outline-danger btn-sm" @click="removeRow(index)"><i class="far fa-trash"></i></button>
                    </div>
                </div>
            </div>
        </template>

        <button type="button" class="btn btn-sm btn-outline-secondary" @click="addRow()">+ Add service</button>
    </div>

    @include('admin.partials.seo-fields', ['seo' => $seo])

    <div class="d-flex gap-2">
        <button type="submit" class="btn btn-primary text-white">{{ $isEdit ? 'Save Changes' : 'Create' }}</button>
        <a href="{{ route('admin.practice-areas.index') }}" class="btn btn-outline-secondary">Cancel</a>
    </div>
</form>