@php($record = $record ?? null)

<div class="text-center mb-7">
    <style>
        .image-input-placeholder {
            background-image: url('{{ asset('assets/media/svg/files/blank-image.svg') }}');
        }
        [data-bs-theme="dark"] .image-input-placeholder {
            background-image: url('{{ asset('assets/media/svg/files/blank-image-dark.svg') }}');
        }
    </style>
    <div class="image-input image-input-outline {{ ($record->photo_path ?? null) ? '' : 'image-input-empty image-input-placeholder' }} mb-3"
         data-kt-image-input="true">
        <div class="image-input-wrapper w-150px h-150px"
             style="background-image:url({{ ($record->photo_path ?? null) ? asset($record->photo_path) : asset('assets/media/avatars/blank.png') }})"></div>
        <label class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
               data-kt-image-input-action="change" data-bs-toggle="tooltip" title="{{ trans('clinic.common.change_photo') }}">
            <i class="ki-duotone ki-pencil fs-6"><span class="path1"></span><span class="path2"></span></i>
            <input type="file" name="photo" accept=".png,.jpg,.jpeg,.webp"/>
        </label>
        <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
              data-kt-image-input-action="cancel" data-bs-toggle="tooltip" title="{{ trans('clinic.common.cancel_photo') }}">
            <i class="ki-duotone ki-cross fs-2"><span class="path1"></span><span class="path2"></span></i>
        </span>
    </div>
    @error('photo')<div class="text-danger fs-7">{{ $message }}</div>@enderror
</div>

<div class="mb-7">
    <label class="form-label">{{ trans('clinic.specialties.icon') }}</label>
    <div class="d-flex align-items-center gap-4">
        <span class="symbol symbol-50px symbol-circle border">
            <span class="symbol-label bg-white">
                <img id="specialtyIconPreview" src="{{ $record?->iconUrl() ?? asset('assets/media/svg/files/blank-image.svg') }}" class="w-25px h-25px object-fit-contain" alt="">
            </span>
        </span>
        <input type="file" name="icon" accept=".png,.jpg,.jpeg,.webp,.svg" class="form-control @error('icon') is-invalid @enderror"
               onchange="if (this.files[0]) document.getElementById('specialtyIconPreview').src = URL.createObjectURL(this.files[0])">
    </div>
    <div class="form-text">{{ trans('clinic.specialties.icon_hint') }}</div>
    @error('icon')<div class="text-danger fs-7">{{ $message }}</div>@enderror
</div>

<div class="row g-9 mb-7">
    <div class="col-md-6">
        <label class="required form-label">{{ trans('clinic.common.name_ar') }}</label>
        <input type="text" name="name[ar]" class="form-control @error('name.ar') is-invalid @enderror"
               value="{{ old('name.ar', $record?->getTranslation('name', 'ar') ?? '') }}">
        @error('name.ar')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>
    <div class="col-md-6">
        <label class="required form-label">{{ trans('clinic.common.name_en') }}</label>
        <input type="text" name="name[en]" class="form-control @error('name.en') is-invalid @enderror"
               value="{{ old('name.en', $record?->getTranslation('name', 'en') ?? '') }}">
        @error('name.en')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>
</div>

<div class="row g-9 mb-7">
    <div class="col-md-6">
        <label class="form-label">{{ trans('clinic.common.description_ar') }}</label>
        <textarea name="description[ar]" rows="5" class="form-control @error('description.ar') is-invalid @enderror">{{ old('description.ar', $record?->getTranslation('description', 'ar', false) ?? '') }}</textarea>
        @error('description.ar')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>
    <div class="col-md-6">
        <label class="form-label">{{ trans('clinic.common.description_en') }}</label>
        <textarea name="description[en]" rows="5" class="form-control @error('description.en') is-invalid @enderror">{{ old('description.en', $record?->getTranslation('description', 'en', false) ?? '') }}</textarea>
        @error('description.en')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>
</div>

<div class="mb-7">
    <div class="form-check 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="is_active"
               {{ old('is_active', $record->is_active ?? true) ? 'checked' : '' }}>
        <label class="form-check-label" for="is_active">{{ trans('clinic.common.active') }}</label>
    </div>
</div>