@extends('admin.master')

@section('title')
    Terms and Condition
@endsection

@section('content')
    <div class="mt-4">
        <div class="row g-4">
            <div class="col-md-12">
                <div class="row g-3 mb-4">
                    <div class="col-auto">
                        <h2 class="mb-0">Terms and Condition</h2>
                    </div>
                </div>

                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">Edit Terms and Condition</h5>
                    </div>
                    <div class="card-body">
                        {!! Form::open(['id' => 'termsForm']) !!}
                        {!! Form::hidden('id', $page->id, ['id' => 'pageId']) !!}

                        <div class="mb-3">
                            {!! Form::label('title', 'Title', ['class' => 'form-label']) !!}
                            {!! Form::text('title', $page->title, [
                                'class' => 'form-control form-control-sm',
                                'id' => 'pageTitle',
                                'required' => true,
                                'placeholder' => 'Enter Title',
                            ]) !!}
                        </div>

                        <div class="mb-3">
                            {!! Form::label('content', 'Content', ['class' => 'form-label']) !!}
                            <!-- Quill Editor Container -->
                            <div id="content-editor"></div>
                            <!-- Hidden textarea for form submission -->
                            {!! Form::textarea('content', $page->content, [
                                'class' => 'form-control form-control-sm',
                                'id' => 'pageContent',
                                'rows' => 15,
                                'placeholder' => 'Enter Content',
                            ]) !!}
                        </div>

                        <div class="d-flex gap-2 justify-content-end mt-4">
                            <button type="button" class="btn btn-outline-secondary" id="discardBtn">Discard</button>
                            <button type="submit" id="saveTermsBtn" class="btn btn-primary">Save changes</button>
                        </div>
                        {!! Form::close() !!}
                    </div>
                </div>

            </div>
        </div>
    </div>
@endsection

@section('css')
    <!-- Quill Editor CSS -->
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
    <style>
        #content-editor {
            height: 400px;
        }
        .ql-container {
            font-size: 14px;
        }
        .ql-editor {
            min-height: 350px;
        }
    </style>
@endsection

@section('javascript')
    <!-- Quill Editor JS -->
    <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
    <script>
        $(document).ready(function() {
            // Initialize Quill Editor for content field
            var quill = new Quill('#content-editor', {
                theme: 'snow',
                modules: {
                    toolbar: [
                        [{ 'header': [1, 2, 3, false] }],
                        ['bold', 'italic', 'underline', 'strike'],
                        [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                        [{ 'align': [] }],
                        ['link', 'image'],
                        ['clean']
                    ]
                },
                placeholder: 'Enter Terms and Condition Content...'
            });

            // Hide the original textarea
            $('#pageContent').hide();

            // Set existing content in Quill editor
            var existingContent = $('#pageContent').val();
            if (existingContent) {
                quill.root.innerHTML = existingContent;
            }

            // Update hidden textarea with Quill content before form submission
            $('#termsForm').on('submit', function(e) {
                e.preventDefault();
                
                var contentValue = quill.root.innerHTML;
                $('#pageContent').val(contentValue);

                let formData = {
                    title: $('#pageTitle').val(),
                    content: $('#pageContent').val(),
                    _token: '{{ csrf_token() }}'
                };

                $.ajax({
                    url: "{{ route('admin.pages.store-terms') }}",
                    type: 'POST',
                    data: formData,
                    success: function(res) {
                        if (res.code == '1') {
                            successToast(res.message);
                        } else {
                            dangerToast(res.message || 'Something went wrong.');
                        }
                    },
                    error: function(xhr) {
                        let errors = xhr.responseJSON?.errors;
                        let msg = '';
                        if (errors) {
                            $.each(errors, function(key, value) {
                                msg += value[0] + '\n';
                            });
                            alert(msg);
                        } else {
                            alert('Something went wrong.');
                        }
                    }
                });
            });

            // Discard button
            $('#discardBtn').on('click', function() {
                window.location.reload();
            });
        });
    </script>
@endsection