@php
    $item = $item ?? null;
    $mainImageUrl = $item?->main_image ? asset($item->main_image) : asset('assets/media/svg/files/blank-image.svg');
    $galleryImages = old('existing_images', $item?->images ?? []);
    $features = old('features', $item?->features ?? [['name' => ['ar' => '', 'en' => ''], 'value' => ['ar' => '', 'en' => '']]]);
@endphp

<div class="card card-flush py-4">
    <div class="card-header">
        <div class="card-title">
            <h2>{{ trans('inventory.items.media_section') }}</h2>
        </div>
    </div>
    <div class="card-body pt-0">
        <div class="row g-8">
            <div class="col-md-4">
                <label class="form-label">{{ trans('inventory.items.main_image') }}</label>
                <div class="image-input image-input-outline {{ $item?->main_image ? '' : 'image-input-empty' }} mb-3" data-kt-image-input="true">
                    <div class="image-input-wrapper w-150px h-150px" style="background-image: url('{{ $mainImageUrl }}')"></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('inventory.items.change_image') }}">
                        <i class="ki-duotone ki-pencil fs-7"><span class="path1"></span><span class="path2"></span></i>
                        <input type="file" name="main_image" accept=".png,.jpg,.jpeg,.webp" />
                        <input type="hidden" name="remove_main_image" value="0" />
                    </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('inventory.items.cancel_image') }}">
                        <i class="ki-duotone ki-cross fs-2"><span class="path1"></span><span class="path2"></span></i>
                    </span>
                    <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
                          data-kt-image-input-action="remove" data-bs-toggle="tooltip" title="{{ trans('inventory.items.remove_image') }}">
                        <i class="ki-duotone ki-cross fs-2"><span class="path1"></span><span class="path2"></span></i>
                    </span>
                </div>
                @error('main_image')
                    <div class="text-danger fs-7">{{ $message }}</div>
                @enderror
            </div>

            <div class="col-md-8">
                <div class="mb-10 fv-row">
                    <label class="form-label">{{ trans('inventory.items.gallery_images') }}</label>
                    <input type="file" name="images[]" class="form-control mb-2 @error('images.*') is-invalid @enderror" accept=".png,.jpg,.jpeg,.webp" multiple />
                    @error('images.*')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                @if(!empty($galleryImages))
                    <div class="d-flex flex-wrap gap-4 mb-10">
                        @foreach($galleryImages as $image)
                            <label class="border rounded p-2 text-center">
                                <img src="{{ asset($image) }}" alt="" class="w-100px h-100px object-fit-cover rounded mb-2">
                                <input type="checkbox" name="existing_images[]" value="{{ $image }}" checked class="form-check-input me-1">
                                <span class="fs-8 text-muted">{{ trans('inventory.items.keep_image') }}</span>
                            </label>
                        @endforeach
                    </div>
                @endif

                <div class="mb-10 fv-row">
                    <label class="form-label">{{ trans('inventory.items.video_link') }}</label>
                    <input type="url" name="video_link" class="form-control mb-2 @error('video_link') is-invalid @enderror" value="{{ old('video_link', $item?->video_link) }}" placeholder="https://example.com/video" />
                    @error('video_link')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card card-flush py-4">
    <div class="card-header">
        <div class="card-title">
            <h2>{{ trans('inventory.items.seo_section') }}</h2>
        </div>
    </div>
    <div class="card-body pt-0">
        <div class="row g-5">
            <div class="col-md-6">
                <label class="form-label">{{ trans('inventory.items.seo_title_ar') }}</label>
                <input type="text" name="seo_title[ar]" class="form-control @error('seo_title.ar') is-invalid @enderror" value="{{ old('seo_title.ar', $item?->getTranslation('seo_title', 'ar', false)) }}">
                @error('seo_title.ar')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
            <div class="col-md-6">
                <label class="form-label">{{ trans('inventory.items.seo_title_en') }}</label>
                <input type="text" name="seo_title[en]" class="form-control @error('seo_title.en') is-invalid @enderror" value="{{ old('seo_title.en', $item?->getTranslation('seo_title', 'en', false)) }}">
                @error('seo_title.en')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
            <div class="col-md-6">
                <label class="form-label">{{ trans('inventory.items.seo_description_ar') }}</label>
                <textarea name="seo_description[ar]" rows="3" class="form-control @error('seo_description.ar') is-invalid @enderror">{{ old('seo_description.ar', $item?->getTranslation('seo_description', 'ar', false)) }}</textarea>
                @error('seo_description.ar')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
            <div class="col-md-6">
                <label class="form-label">{{ trans('inventory.items.seo_description_en') }}</label>
                <textarea name="seo_description[en]" rows="3" class="form-control @error('seo_description.en') is-invalid @enderror">{{ old('seo_description.en', $item?->getTranslation('seo_description', 'en', false)) }}</textarea>
                @error('seo_description.en')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
            <div class="col-md-6">
                <label class="form-label">{{ trans('inventory.items.seo_keywords_ar') }}</label>
                <input type="text" name="seo_keywords[ar]" class="form-control @error('seo_keywords.ar') is-invalid @enderror" value="{{ old('seo_keywords.ar', $item?->getTranslation('seo_keywords', 'ar', false)) }}">
                @error('seo_keywords.ar')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
            <div class="col-md-6">
                <label class="form-label">{{ trans('inventory.items.seo_keywords_en') }}</label>
                <input type="text" name="seo_keywords[en]" class="form-control @error('seo_keywords.en') is-invalid @enderror" value="{{ old('seo_keywords.en', $item?->getTranslation('seo_keywords', 'en', false)) }}">
                @error('seo_keywords.en')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
        </div>
    </div>
</div>

<div class="card card-flush py-4">
    <div class="card-header">
        <div class="card-title">
            <h2>{{ trans('inventory.items.features_section') }}</h2>
        </div>
    </div>
    <div class="card-body pt-0">
        <div id="item_features_repeater">
            <div data-repeater-list="features">
                @foreach($features ?: [['name' => ['ar' => '', 'en' => ''], 'value' => ['ar' => '', 'en' => '']]] as $feature)
                    <div data-repeater-item class="row g-5 align-items-end mb-5">
                        <div class="col-md-3">
                            <label class="form-label">{{ trans('inventory.items.feature_name_ar') }}</label>
                            <input type="text" name="name[ar]" class="form-control" value="{{ $feature['name']['ar'] ?? '' }}" />
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">{{ trans('inventory.items.feature_name_en') }}</label>
                            <input type="text" name="name[en]" class="form-control" value="{{ $feature['name']['en'] ?? '' }}" />
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">{{ trans('inventory.items.feature_value_ar') }}</label>
                            <input type="text" name="value[ar]" class="form-control" value="{{ $feature['value']['ar'] ?? '' }}" />
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">{{ trans('inventory.items.feature_value_en') }}</label>
                            <input type="text" name="value[en]" class="form-control" value="{{ $feature['value']['en'] ?? '' }}" />
                        </div>
                        <div class="col-md-1">
                            <button type="button" data-repeater-delete class="btn btn-sm btn-light-danger">
                                {{ trans('inventory.items.remove_feature') }}
                            </button>
                        </div>
                    </div>
                @endforeach
            </div>
            <button type="button" data-repeater-create class="btn btn-sm btn-light-primary">
                {{ trans('inventory.items.add_feature') }}
            </button>
        </div>
    </div>
</div>