@php
    $blankImage = asset('assets/media/svg/files/blank-image.svg');
    $mainImagePreview = $blog->main_image_path ?: $blankImage;
    $seoImagePreview = $blog->seo_image_path ?: $blankImage;
@endphp

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

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

    <ul class="nav nav-tabs nav-line-tabs nav-line-tabs-2x mb-7 fs-6">
        <li class="nav-item">
            <a class="nav-link active" data-bs-toggle="tab" href="#blog_main_data">{{ trans('dash_site.mainData') }}</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="tab" href="#blog_seo_data">{{ trans('dash_site.seo_data') }}</a>
        </li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane fade show active" id="blog_main_data" role="tabpanel">
            <div class="row g-7">
                <div class="col-xl-4">
                    <div class="card mb-7">
                        <div class="card-header"><div class="card-title"><h2>{{ trans('dash_site.main_image') }}</h2></div></div>
                        <div class="card-body">
                            @include('dashboard.admin.Site.partials.image-input', [
                                'name' => 'main_image',
                                'id' => 'blog_main_image',
                                'preview' => $mainImagePreview,
                            ])
                            @error('main_image')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header"><div class="card-title"><h2>{{ trans('dash_site.General') }}</h2></div></div>
                        <div class="card-body">
                            <div class="mb-6">
                                <input type="hidden" name="is_active" value="0">
                                <label class="form-check form-switch form-check-custom form-check-solid form-check-success">
                                    <input class="form-check-input h-25px w-45px" type="checkbox" name="is_active" value="1" @checked(old('is_active', $blog->exists ? $blog->is_active : true))>
                                    <span class="form-check-label fw-semibold text-gray-700">{{ trans('dash_site.blog_show_on_site') }}</span>
                                </label>
                            </div>
                            <div class="mb-5">
                                <label class="required form-label">{{ trans('dash_site.date_at') }}</label>
                                <input type="date" name="date_at" value="{{ old('date_at', $blog->date_at) }}" class="form-control @error('date_at') is-invalid @enderror">
                                @error('date_at')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="mb-5">
                                <label class="required form-label">{{ trans('dash_site.publisher') }}</label>
                                <input type="text" name="publisher" value="{{ old('publisher', $blog->publisher) }}" class="form-control @error('publisher') is-invalid @enderror">
                                @error('publisher')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div>
                                <label class="form-label">{{ trans('dash_site.category') }}</label>
                                <select name="blog_category_id" class="form-select @error('blog_category_id') is-invalid @enderror">
                                    <option value="">{{ trans('dash_site.no_category') }}</option>
                                    @foreach($categories ?? [] as $category)
                                        <option value="{{ $category->id }}" @selected(old('blog_category_id', $blog->blog_category_id) == $category->id)>{{ $category->name }}</option>
                                    @endforeach
                                </select>
                                @error('blog_category_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-8">
                    <div class="card mb-7">
                        <div class="card-header"><div class="card-title"><h2>{{ trans('dash_site.mainData') }}</h2></div></div>
                        <div class="card-body">
                            <div class="row g-5">
                                <div class="col-md-6">
                                    <label class="required form-label">{{ trans('dash_site.title') }} (AR)</label>
                                    <input type="text" name="title[ar]" value="{{ old('title.ar', $blog->getTranslation('title', 'ar', false)) }}" class="form-control @error('title.ar') is-invalid @enderror">
                                    @error('title.ar')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                                <div class="col-md-6">
                                    <label class="required form-label">{{ trans('dash_site.title') }} (EN)</label>
                                    <input type="text" name="title[en]" value="{{ old('title.en', $blog->getTranslation('title', 'en', false)) }}" class="form-control @error('title.en') is-invalid @enderror">
                                    @error('title.en')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                                <div class="col-md-6">
                                    <label class="required form-label">{{ trans('dash_site.description') }} (AR)</label>
                                    <textarea name="description[ar]" rows="9" class="form-control @error('description.ar') is-invalid @enderror">{{ old('description.ar', $blog->getTranslation('description', 'ar', false) ?: $blog->getTranslation('details', 'ar', false)) }}</textarea>
                                    @error('description.ar')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                                <div class="col-md-6">
                                    <label class="required form-label">{{ trans('dash_site.description') }} (EN)</label>
                                    <textarea name="description[en]" rows="9" class="form-control @error('description.en') is-invalid @enderror">{{ old('description.en', $blog->getTranslation('description', 'en', false) ?: $blog->getTranslation('details', 'en', false)) }}</textarea>
                                    @error('description.en')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <div class="tab-pane fade" id="blog_seo_data" role="tabpanel">
            <div class="row g-7">
                <div class="col-xl-4">
                    <div class="card">
                        <div class="card-header"><div class="card-title"><h2>{{ trans('dash_site.seo_image') }}</h2></div></div>
                        <div class="card-body">
                            @include('dashboard.admin.Site.partials.image-input', [
                                'name' => 'seo_image',
                                'id' => 'blog_seo_image',
                                'preview' => $seoImagePreview,
                            ])
                            @error('seo_image')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                        </div>
                    </div>
                </div>
                <div class="col-xl-8">
                    <div class="card mb-7">
                        <div class="card-header"><div class="card-title"><h2>{{ trans('dash_site.seo_data') }}</h2></div></div>
                        <div class="card-body">
                            <div class="row g-5">
                                <div class="col-md-6">
                                    <label class="form-label">SEO Title (AR)</label>
                                    <input type="text" name="seo_title[ar]" value="{{ old('seo_title.ar', $blog->getTranslation('seo_title', 'ar', false)) }}" class="form-control @error('seo_title.ar') is-invalid @enderror">
                                    @error('seo_title.ar')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">SEO Title (EN)</label>
                                    <input type="text" name="seo_title[en]" value="{{ old('seo_title.en', $blog->getTranslation('seo_title', 'en', false)) }}" class="form-control @error('seo_title.en') is-invalid @enderror">
                                    @error('seo_title.en')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">SEO Description (AR)</label>
                                    <textarea name="seo_description[ar]" rows="5" class="form-control @error('seo_description.ar') is-invalid @enderror">{{ old('seo_description.ar', $blog->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">SEO Description (EN)</label>
                                    <textarea name="seo_description[en]" rows="5" class="form-control @error('seo_description.en') is-invalid @enderror">{{ old('seo_description.en', $blog->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">SEO Keywords (AR)</label>
                                    <input type="text" name="seo_keywords[ar]" value="{{ old('seo_keywords.ar', $blog->getTranslation('seo_keywords', 'ar', false)) }}" class="form-control @error('seo_keywords.ar') is-invalid @enderror">
                                    @error('seo_keywords.ar')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">SEO Keywords (EN)</label>
                                    <input type="text" name="seo_keywords[en]" value="{{ old('seo_keywords.en', $blog->getTranslation('seo_keywords', 'en', false)) }}" class="form-control @error('seo_keywords.en') is-invalid @enderror">
                                    @error('seo_keywords.en')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header"><div class="card-title"><h2>{{ trans('dash_site.images') }}</h2></div></div>
                        <div class="card-body">
                            <div id="blog_gallery_repeater">
                                <div data-repeater-list="gallery_images">
                                    <div data-repeater-item class="border rounded p-5 mb-5">
                                        <div class="row g-5 align-items-end">
                                            <div class="col-lg-3">
                                                <label class="form-label">Image</label>
                                                <input type="file" name="image" class="form-control" accept=".png,.jpg,.jpeg,.webp,.svg">
                                            </div>
                                            <div class="col-lg-3">
                                                <label class="form-label">Alt Text (AR)</label>
                                                <input type="text" name="alt_text[ar]" class="form-control">
                                            </div>
                                            <div class="col-lg-3">
                                                <label class="form-label">Alt Text (EN)</label>
                                                <input type="text" name="alt_text[en]" class="form-control">
                                            </div>
                                            <div class="col-lg-3">
                                                <a href="javascript:;" data-repeater-delete class="btn btn-light-danger mt-3 mt-md-8">
                                                    <i class="ki-duotone ki-trash fs-5"></i>{{ trans('forms.delete_btn') }}
                                                </a>
                                            </div>
                                        </div>
                                    </div>

                                    @foreach($blog->images as $image)
                                        <div data-repeater-item class="border rounded p-5 mb-5">
                                            <input type="hidden" name="id" value="{{ $image->id }}">
                                            <div class="row g-5 align-items-end">
                                                <div class="col-lg-3">
                                                    <label class="form-label">Current Image</label>
                                                    <img src="{{ $image->image_path }}" alt="{{ $image->getTranslation('alt_text', app()->getLocale(), false) ?: $blog->title }}" class="img-fluid rounded border">
                                                </div>
                                                <div class="col-lg-3">
                                                    <label class="form-label">Alt Text (AR)</label>
                                                    <input type="text" name="alt_text[ar]" value="{{ old('gallery_images.'.$loop->index.'.alt_text.ar', $image->getTranslation('alt_text', 'ar', false)) }}" class="form-control">
                                                </div>
                                                <div class="col-lg-3">
                                                    <label class="form-label">Alt Text (EN)</label>
                                                    <input type="text" name="alt_text[en]" value="{{ old('gallery_images.'.$loop->index.'.alt_text.en', $image->getTranslation('alt_text', 'en', false)) }}" class="form-control">
                                                </div>
                                                <div class="col-lg-3 d-flex gap-2">
                                                    <a href="javascript:;" data-repeater-delete class="btn btn-light-danger">
                                                        <i class="ki-duotone ki-trash fs-5"></i>{{ trans('forms.delete_btn') }}
                                                    </a>
                                                    <a href="javascript:;" class="btn btn-light-warning" data-blog-image-delete="{{ route('admin.blog.image.destroy', $image->id) }}">
                                                        {{ trans('forms.delete_btn') }}
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>

                                <div class="form-group mt-5">
                                    <a href="javascript:;" data-repeater-create class="btn btn-light-primary">
                                        <i class="ki-duotone ki-plus fs-3"></i>{{ trans('dash_site.add_image') }}
                                    </a>
                                </div>
                            </div>
                            @error('gallery_images.*.image')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="d-flex justify-content-end mt-7">
        <button type="submit" class="btn btn-primary">{{ trans('dash_site.Save') }}</button>
    </div>
</form>