@php
    use App\Enums\LandingItemTypeEnum;
@endphp
<div class="row">
    <div class="col-md-6 mb-3" {{ request('type') ? 'style=display:none' : '' }}>
        <label class="form-label">{{ trans('admin.type') }}</label>
        <select name="type" class="form-select select2" required>
            @foreach(LandingItemTypeEnum::cases() as $type_case)
                <option value="{{ $type_case->value }}" {{ (old('type', $item->type?->value) == $type_case->value || request('type') == $type_case->value) ? 'selected' : '' }}>
                    {{ $type_case->name() }}
                </option>
            @endforeach
        </select>
        @if(request('type'))
            <input type="hidden" name="type" value="{{ request('type') }}">
        @endif
    </div>

    <div class="col-md-12 mb-4">
        <div class="nav-tabs-custom">
            <ul class="nav nav-tabs mb-3" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" data-bs-toggle="tab" href="#tab_en" role="tab">English</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="tab" href="#tab_ar" role="tab">العربية</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="tab" href="#tab_hi" role="tab">हिन्दी</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="tab" href="#tab_ur" role="tab">اردو</a>
                </li>
            </ul>
            <div class="tab-content border p-3 rounded">
                @foreach(['en' => 'English', 'ar' => 'العربية', 'hi' => 'हिन्दी', 'ur' => 'اردو'] as $locale => $name)
                    <div class="tab-pane {{ $locale == 'en' ? 'active' : '' }}" id="tab_{{ $locale }}" role="tabpanel">
                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <x-input-component 
                                    type="text"
                                    :label="trans('admin.title') . ' (' . $name . ')'" 
                                    id="title_{{ $locale }}" 
                                    name="title_{{ $locale }}" 
                                    :value="old('title_' . $locale, $item->{'title_' . $locale})" 
                                />
                            </div>
                            <div class="col-md-12 mb-3">
                                <x-textarea-component 
                                    :label="trans('admin.description') . ' (' . $name . ')'" 
                                    id="description_{{ $locale }}" 
                                    name="description_{{ $locale }}" 
                                    :value="old('description_' . $locale, $item->{'description_' . $locale})" 
                                />
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    <div class="col-md-12 mb-3">
        <label class="form-label">{{ trans('admin.icon_file') }}</label>
        <input type="file" name="image" class="form-control" accept="image/*" {{ isset($item->id) ? '' : 'required' }}>
        <small class="text-muted">Fixed dimension will be applied on the landing page.</small>
        @if($item->image)
            <div class="mt-2">
                <img src="{{ asset('storage/' . $item->image) }}" height="60" class="rounded bg-light p-2">
            </div>
        @endif
    </div>

    <div class="col-md-6 mb-3">
        <x-input-component
            type="number"
            :label="trans('admin.sort_order')"
            id="sort_order"
            name="sort_order"
            :value="old('sort_order', $item->sort_order ?? 0)"
            addAttribute="required"
        />
    </div>

    <div class="col-md-6 mb-3">
        <label class="form-label">{{ trans('admin.status') }}</label>
        <select name="is_active" class="form-select">
            <option value="1" {{ old('is_active', $item->is_active ?? 1) == 1 ? 'selected' : '' }}>{{ trans('admin.active') }}</option>
            <option value="0" {{ old('is_active', $item->is_active ?? 1) == 0 ? 'selected' : '' }}>{{ trans('admin.not_active') }}</option>
        </select>
    </div>
</div>

@section('vendor-script')
    @parent
    <link rel="stylesheet" href="{{ asset('admin_assets/vendor/libs/select2/select2.css') }}" />
    <script src="{{ asset('admin_assets/vendor/libs/select2/select2.js') }}"></script>
    <script>
        $(document).ready(function() {
            $('.select2').select2({
                placeholder: '{{ trans('admin.search...') }}'
            });
        });
    </script>
@endsection