@if ($errors->any())
    <div class="alert alert-danger"><ul class="mb-0">@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul></div>
@endif

@php
    $hasLocaleError = fn (string $locale) => $errors->has("title.$locale") || $errors->has("description.$locale");
    $activeLocale = $hasLocaleError('ar') || ! $hasLocaleError('en') ? 'ar' : 'en';
@endphp

<form action="{{ $action }}" method="POST" enctype="multipart/form-data" id="serviceForm">
    @csrf
    @if ($method !== 'POST')
        @method($method)
    @endif

    <div class="row g-7">
        <div class="col-xl-8">
            <div class="card card-flush">
                <div class="card-header card-header-stretch">
                    <ul class="nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bold" role="tablist">
                        @foreach (['ar' => 'العربية', 'en' => 'English'] as $locale => $language)
                            <li class="nav-item" role="presentation">
                                <a class="nav-link text-active-primary py-5 me-6 {{ $activeLocale === $locale ? 'active' : '' }}" data-bs-toggle="tab" href="#service_tab_{{ $locale }}" role="tab">
                                    {{ $language }}
                                    @if ($hasLocaleError($locale))<span class="bullet bullet-dot bg-danger h-6px w-6px ms-2"></span>@endif
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </div>
                <div class="card-body">
                    <div class="tab-content">
                        @foreach (['ar', 'en'] as $locale)
                            <div class="tab-pane fade {{ $activeLocale === $locale ? 'show active' : '' }}" id="service_tab_{{ $locale }}" role="tabpanel" dir="{{ $locale === 'ar' ? 'rtl' : 'ltr' }}">
                                <div class="mb-7">
                                    <label class="required form-label">{{ trans('dash_site.title') }} ({{ strtoupper($locale) }})</label>
                                    <input type="text" name="title[{{ $locale }}]" value="{{ old("title.$locale", $service->getTranslation('title', $locale, false)) }}" class="form-control @error("title.$locale") is-invalid @enderror">
                                    @error("title.$locale")<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                                <div>
                                    <label class="required form-label">{{ trans('dash_site.description') }} ({{ strtoupper($locale) }})</label>
                                    <textarea name="description[{{ $locale }}]" rows="7" class="form-control @error("description.$locale") is-invalid @enderror">{{ old("description.$locale", $service->getTranslation('description', $locale, false)) }}</textarea>
                                    <div class="form-text">{{ trans('dash_site.service_description_hint') }}</div>
                                    @error("description.$locale")<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-4">
            <div class="card card-flush mb-7">
                <div class="card-header"><div class="card-title"><h3 class="fw-bold">{{ trans('dash_site.image') }}</h3></div></div>
                <div class="card-body pt-0">
                    <img id="serviceImagePreview" src="{{ $service->exists ? $service->image_path : asset('assets/media/svg/files/blank-image.svg') }}" class="w-100 rounded mb-4 object-fit-cover bg-light" style="aspect-ratio: 4 / 3;" alt="">
                    <input type="file" name="image" accept=".jpg,.jpeg,.png,.webp" class="form-control @error('image') is-invalid @enderror" id="serviceImageInput">
                    <div class="form-text">{{ trans('dash_site.service_image_hint') }}</div>
                    @error('image')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
            </div>

            <div class="card card-flush">
                <div class="card-header"><div class="card-title"><h3 class="fw-bold">{{ trans('dash_site.service_settings') }}</h3></div></div>
                <div class="card-body pt-0">
                    <div class="mb-7">
                        <label class="form-label">{{ trans('dash_site.service_specialty') }}</label>
                        <select name="specialty_id" class="form-select @error('specialty_id') is-invalid @enderror" data-control="select2" data-allow-clear="true" data-placeholder="{{ trans('dash_site.service_no_specialty') }}">
                            <option value=""></option>
                            @foreach ($specialties as $specialty)
                                <option value="{{ $specialty->id }}" @selected((string) old('specialty_id', $service->specialty_id) === (string) $specialty->id)>{{ $specialty->name }}</option>
                            @endforeach
                        </select>
                        <div class="form-text">{{ trans('dash_site.service_specialty_hint') }}</div>
                        @error('specialty_id')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                    </div>
                    <div class="mb-7">
                        <label class="form-label">{{ trans('dash_site.service_sort_order') }}</label>
                        <input type="number" min="0" name="sort_order" value="{{ old('sort_order', $service->sort_order ?? 0) }}" class="form-control @error('sort_order') is-invalid @enderror">
                        <div class="form-text">{{ trans('dash_site.service_sort_hint') }}</div>
                        @error('sort_order')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="form-check form-switch form-check-custom form-check-solid">
                        <input type="hidden" name="is_active" value="0">
                        <input class="form-check-input" type="checkbox" name="is_active" value="1" id="serviceActive" @checked(old('is_active', $service->is_active ?? true))>
                        <label class="form-check-label fw-semibold" for="serviceActive">{{ trans('dash_site.service_active') }}</label>
                    </div>
                </div>
            </div>

            <button type="submit" class="btn btn-primary w-100 mt-7">{{ trans('dash_site.Save') }}</button>
        </div>
    </div>
</form>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        var input = document.getElementById('serviceImageInput');
        input.addEventListener('change', function () {
            if (this.files && this.files[0]) {
                document.getElementById('serviceImagePreview').src = URL.createObjectURL(this.files[0]);
            }
        });

        // Title/description errors inside the hidden language tab would be invisible, so open that tab.
        $('#serviceForm').on('invalid-form.validate', function (event, validator) {
            var first = validator.errorList.length ? validator.errorList[0].element : null;
            var pane = first ? $(first).closest('.tab-pane') : $();
            if (pane.length && !pane.hasClass('active')) {
                bootstrap.Tab.getOrCreateInstance(document.querySelector('a[href="#' + pane.attr('id') + '"]')).show();
            }
        });
    });
</script>