@extends('dashboard.layouts.base')

@section('content')
<div class="col-12">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header fw-bold">تعديل من نحن</div>

                <div class="card-body">
                    <form action="{{ route('dashboard.about-us.update') }}" method="POST">
                        @csrf
                        @method('PUT')

                        {{-- Arabic WYSIWYG Input --}}
                        <div class="mb-3">
                            <label for="description_ar" class="form-label fw-bold">المحتوى (العربية)</label>
                            <textarea id="description_ar" name="description[ar]" class="form-control" rows="8">
                                {{ old('description.ar', $about->getTranslation('description','ar')) }}
                            </textarea>
                            @error('description.ar') <small class="text-danger">{{ $message }}</small> @enderror
                        </div>
                        
                        {{-- English WYSIWYG Input --}}
                        <div class="mb-3">
                            <label for="description_en" class="form-label fw-bold">Content (English)</label>
                            <textarea id="description_en" name="description[en]" class="form-control" rows="8">
                                {{ old('description.en', $about->getTranslation('description','en')) }}
                            </textarea>
                            @error('description.en') <small class="text-danger">{{ $message }}</small> @enderror
                        </div>

                        <div class="d-grid">
                            <button type="submit" class="btn btn-success py-2 fw-bold">💾 حفظ</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Summernote CSS & JS --}}
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/summernote-lite.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/summernote-lite.min.js"></script>

<script>
    $('#description_ar').summernote({
        placeholder: 'اكتب المحتوى هنا...',
        tabsize: 2,
        height: 300,
        lang: 'ar-AR',
        toolbar: [
            ['style', ['bold', 'italic', 'underline', 'clear']],
            ['font', ['fontsize', 'color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['insert', ['link']],
            ['view', ['fullscreen', 'codeview']]
        ]
    });

    $('#description_en').summernote({
        placeholder: 'Write the content here...',
        tabsize: 2,
        height: 300,
        toolbar: [
            ['style', ['bold', 'italic', 'underline', 'clear']],
            ['font', ['fontsize', 'color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['insert', ['link']],
            ['view', ['fullscreen', 'codeview']]
        ]
    });
</script>
@endsection