@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 id="termsConditionsForm" action="{{ route('dashboard.terms-conditions.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>

                        {{-- Urdu WYSIWYG Input --}}
                        <div class="mb-3">
                            <label for="description_ur" class="form-label fw-bold">مواد (اردو)</label>
                            <textarea id="description_ur" name="description[ur]" class="form-control" rows="8">
                            {{ old('description.ur', $about->getTranslation('description','ur')) }}
                            </textarea>
                            @error('description.ur') <small class="text-danger">{{ $message }}</small> @enderror
                        </div>


                        @if(Auth::guard('admin')->user()->can('update terms_conditions'))
                        <div class="d-grid">
                            <button type="submit" id="submitBtn" class="btn btn-success py-2 fw-bold">
                                <span class="btn-text">💾 حفظ</span>
                                <span class="btn-loading d-none">
                                    <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
                                    جاري الحفظ...
                                </span>
                            </button>
                        </div>
                        @endif
                    </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']]
        ]
    });

    $('#description_ur').summernote({
        placeholder: 'یہاں مواد لکھیں...'
        , tabsize: 2
        , height: 300
        , lang: 'ur-UR'
        , direction: 'rtl', // important for Urdu
        toolbar: [
            ['style', ['bold', 'italic', 'underline', 'clear']]
            , ['font', ['fontsize', 'color']]
            , ['para', ['ul', 'ol', 'paragraph']]
            , ['insert', ['link']]
            , ['view', ['fullscreen', 'codeview']]
        ]
    });

    // Form submission with loading indicator
    $('#termsConditionsForm').on('submit', function(e) {
        const $form = $(this);
        const $submitBtn = $('#submitBtn');
        const $btnText = $submitBtn.find('.btn-text');
        const $btnLoading = $submitBtn.find('.btn-loading');

        // Disable submit button and show loading
        $submitBtn.prop('disabled', true);
        $btnText.addClass('d-none');
        $btnLoading.removeClass('d-none');

        // Get Summernote content before submit
        $('#description_ar').val($('#description_ar').summernote('code'));
        $('#description_en').val($('#description_en').summernote('code'));
        $('#description_ur').val($('#description_ur').summernote('code'));
    });

    // Re-enable button if form validation fails (page reloads with errors)
    @if($errors->any())
        $('#submitBtn').prop('disabled', false);
        $('#submitBtn .btn-text').removeClass('d-none');
        $('#submitBtn .btn-loading').addClass('d-none');
    @endif

</script>
@endsection