<div class="row">
    <x-forms col="6" label="{{ __('dashboard.name_en') }}" name="name[en]" :value="$banner?->getTranslation('name', 'en') ?? ''" required />
    <x-forms col="6" label="{{ __('dashboard.name_ar') }}" name="name[ar]" :value="$banner?->getTranslation('name', 'ar') ?? ''" />
</div>

<div class="row">
    <div class="col-md-6">
        <label class="form-label">{{ __('dashboard.description_en') }}</label>
        <textarea name="description[en]" class="form-control" rows="3">{{ $banner?->getTranslation('description', 'en') ?? '' }}</textarea>
    </div>
    <div class="col-md-6">
        <label class="form-label">{{ __('dashboard.description_ar') }}</label>
        <textarea name="description[ar]" class="form-control" rows="3">{{ $banner?->getTranslation('description', 'ar') ?? '' }}</textarea>
    </div>
</div>

<div class="row">

    <x-image label="{{ __('dashboard.image') }}" name="image" :value="$banner?->image ?? null" />
    <x-forms col="6" label="{{ __('dashboard.button_text') }}" name="button_text" :value="$banner?->button_text ?? ''" />
</div>

<div class="row">
    <div class="col-md-6 mb-3">
        <label class="form-label" for="banner-linkable-type">{{ __('dashboard.banner_link_type') }}</label>
        <select name="linkable_type" id="banner-linkable-type" class="form-select">
            <option value="">{{ __('dashboard.banner_link_none') }}</option>
            @foreach($linkableTypeChoices as $choice)
                <option value="{{ $choice['class'] }}" @selected(old('linkable_type', $banner?->linkable_type ?? '') === $choice['class'])>
                    {{ $choice['label'] }}
                </option>
            @endforeach
        </select>
        <p class="text-muted small mb-0 mt-1">{{ __('dashboard.banner_link_type_help') }}</p>
    </div>
    <div class="col-md-6 mb-3">
        <label class="form-label" for="banner-linkable-id">{{ __('dashboard.banner_link_target') }}</label>
        <select name="linkable_id" id="banner-linkable-id" class="form-select">
            <option value="">{{ __('dashboard.banner_link_select_target') }}</option>
            @foreach($linkableOptions as $opt)
                <option
                    value="{{ $opt['id'] }}"
                    data-type-class="{{ e($opt['type_class']) }}"
                    @selected((string) old('linkable_id', $banner?->linkable_id ?? '') === (string) $opt['id'] && old('linkable_type', $banner?->linkable_type ?? '') === $opt['type_class'])
                >{{ $opt['label'] }}</option>
            @endforeach
        </select>
    </div>
</div>

@push('scripts')
<script>
(function () {
    const typeSel = document.getElementById('banner-linkable-type');
    const idSel = document.getElementById('banner-linkable-id');
    if (!typeSel || !idSel) return;

    function syncLinkableTargetOptions() {
        const t = typeSel.value;
        let firstVisible = '';
        for (const opt of idSel.options) {
            if (!opt.value) {
                opt.hidden = false;
                continue;
            }
            const match = t !== '' && opt.getAttribute('data-type-class') === t;
            opt.hidden = !match;
            if (match && firstVisible === '') firstVisible = opt.value;
        }
        if (t === '') {
            idSel.value = '';
            return;
        }
        const current = idSel.options[idSel.selectedIndex];
        if (!current || current.hidden || current.getAttribute('data-type-class') !== t) {
            idSel.value = firstVisible || '';
        }
    }

    typeSel.addEventListener('change', syncLinkableTargetOptions);
    syncLinkableTargetOptions();
})();
</script>
@endpush

