@extends('admin.layouts.master')
@section('breadcrumb')
    <div class="content-header-left col-md-8 col-12 mb-2 breadcrumb-new">
        <h3 class="content-header-title mb-0 d-inline-block">لوحة التحكم</h3>
        <div class="row breadcrumbs-top d-inline-block">
            <div class="breadcrumb-wrapper col-12">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('dashboard.about.edit') }}">معلومات عنا</a></li>
                    <li class="breadcrumb-item active">تعديل</li>
                </ol>
            </div>
        </div>
    </div>
@endsection

@section('content')
    <div class="card">
        <div class="card-header text-white">
            <h3 class="card-title">تعديل معلومات عنا</h3>
        </div>
        <div class="card-body">
            @if (session('success'))
                <div class="alert alert-success">{{ session('success') }}</div>
            @endif

            <form action="{{ route('dashboard.about.update') }}" method="POST" enctype="multipart/form-data"
                class="needs-validation" novalidate>
                @csrf
                @method('PUT')

                <!-- Meta Title Arabic -->
                <div class="form-group">
                    <label for="meta_title_ar">عنوان الميتا (بالعربية)</label>
                    <input type="text" name="meta_title_ar" id="meta_title_ar" class="form-control text-right"
                        dir="rtl" value="{{ $about->meta_title_ar }}" required>
                    <div class="invalid-feedback">هذا الحقل مطلوب</div>
                </div>

                <!-- Meta Title English -->
                <div class="form-group">
                    <label for="meta_title_en">عنوان الميتا (بالإنجليزية)</label>
                    <input type="text" name="meta_title_en" id="meta_title_en" class="form-control"
                        value="{{ $about->meta_title_en }}" required>
                    <div class="invalid-feedback">هذا الحقل مطلوب</div>
                </div>

                <!-- Meta Description Arabic -->
                <div class="form-group">
                    <label for="meta_description_ar">وصف الميتا (بالعربية)</label>
                    <textarea name="meta_description_ar" id="meta_description_ar" class="form-control text-right" dir="rtl" required>{{ $about->meta_description_ar }}</textarea>
                    <div class="invalid-feedback">هذا الحقل مطلوب</div>
                </div>

                <!-- Meta Description English -->
                <div class="form-group">
                    <label for="meta_description_en">وصف الميتا (بالإنجليزية)</label>
                    <textarea name="meta_description_en" id="meta_description_en" class="form-control" required>{{ $about->meta_description_en }}</textarea>
                    <div class="invalid-feedback">هذا الحقل مطلوب</div>
                </div>



                <!-- Meta Keywords Arabic -->
                <div class="form-group">
                    <label for="meta_keywords_ar">الكلمات المفتاحية (بالعربية)</label>
                    <input type="text" name="meta_keywords_ar" id="meta_keywords_ar" class="form-control text-right"
                        dir="rtl" value="{{ $about->meta_keywords_ar }}">
                </div>

                <!-- Meta Keywords English -->
                <div class="form-group">
                    <label for="meta_keywords_en">الكلمات المفتاحية (بالإنجليزية)</label>
                    <input type="text" name="meta_keywords_en" id="meta_keywords_en" class="form-control"
                        value="{{ $about->meta_keywords_en }}">
                </div>

                <!-- Arabic Content Field -->
                <div class="form-group">
                    <label for="content_ar">الوصف (بالعربية)</label>
                    <textarea name="content_ar" id="content_ar" rows="5" class="form-control text-right" dir="rtl" required>{{ $about->content_ar }}</textarea>
                    <div class="invalid-feedback">هذا الحقل مطلوب</div>
                </div>

                <!-- English Content Field -->
                <div class="form-group">
                    <label for="content_en">الوصف (بالإنجليزية)</label>
                    <textarea name="content_en" id="content_en" rows="5" class="form-control" required>{{ $about->content_en }}</textarea>
                    <div class="invalid-feedback">هذا الحقل مطلوب</div>
                </div>

                <!-- main image -->
                <div class="form-group">
                    <label for="main_image">الصوره الرئيسة</label>
                    <input type="file" name="main_image" id="main_image" class="form-control text-right" dir="rtl"
                        value="{{ $about->main_image }}">
                </div>
                @if ($about->main_image)
                    <div class="mt-3">
                        <p>الملف الحالي: <a href="{{ asset('storage/about_files/' . $about->main_image) }}"
                                target="_blank">{{ $about->main_image }}</a></p>
                    </div>
                @endif

                <!-- File Upload -->
                <div class="form-group">
                    <label for="file">رفع ملف (PDF, DOC)</label>
                    <input type="file" name="file" class="form-control">
                </div>

                @if ($about->file)
                    <div class="mt-3">
                        <p>الملف الحالي: <a href="{{ asset('storage/about_files/' . $about->file) }}"
                                target="_blank">{{ $about->file }}</a></p>
                    </div>
                @endif

                <!-- Submit Button -->
                <button type="submit" class="btn btn-success btn-block">تحديث</button>
            </form>
        </div>
    </div>

    <script>
        (function() {
            'use strict';
            window.addEventListener('load', function() {
                var forms = document.getElementsByClassName('needs-validation');
                Array.prototype.filter.call(forms, function(form) {
                    form.addEventListener('submit', function(event) {
                        if (form.checkValidity() === false) {
                            event.preventDefault();
                            event.stopPropagation();
                        }
                        form.classList.add('was-validated');
                    }, false);
                });
            }, false);
        })();
    </script>
@endsection