@extends('admin.layouts.base')

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between mb-3">
        <h4>Create Service</h4>
        <a href="{{ route('admin.services.index') }}" class="btn btn-secondary">Back</a>
    </div>

    <form action="{{ route('admin.services.store') }}" method="POST" enctype="multipart/form-data">
        @csrf

        <div class="row">
            <div class="col-md-8">
                <div class="form-group mb-3">
                    <label>Service Title *</label>
                    <input type="text" name="title" class="form-control" value="{{ old('title') }}" required>
                    @error('title') <small class="text-danger">{{ $message }}</small> @enderror
                </div>

                <div class="form-group mb-3">
                    <label>Subtitle (Red Text)</label>
                    <input type="text" name="subtitle" class="form-control" value="{{ old('subtitle') }}">
                </div>

                <div class="form-group mb-3">
                    <label>Description</label>
                    <textarea name="description" id="description-editor" class="form-control ckeditor" rows="6">{{ old('description') }}</textarea>
                </div>

                <div class="form-group mb-3">
                    <label>Bullet Points (List Items)</label>
                    <textarea name="list_items_editor" id="list-editor" class="form-control ckeditor" rows="6">{{ old('list_items_editor') }}</textarea>
                    <small class="text-muted">Use bullets or numbered lists in editor — they will be saved as array.</small>
                </div>
            </div>

            <div class="col-md-4">
                <div class="form-group mb-3">
                    <label>Main Image *</label>
                    <input type="file" name="main_image" class="form-control" required>
                    @error('main_image') <small class="text-danger">{{ $message }}</small> @enderror
                </div>

                <div class="form-group mb-3">
                    <label>Gallery Images (Multiple)</label>
                    <input type="file" name="gallery_images[]" class="form-control" multiple>
                </div>

                <div class="form-group mb-3">
                    <label>Sort Order</label>
                    <input type="number" name="sort_order" class="form-control" value="{{ old('sort_order', 0) }}">
                </div>

                <div class="form-group mb-3">
                    <label>Status</label>
                    <select name="status" class="form-control">
                        <option value="1" {{ old('status', 1) == 1 ? 'selected' : '' }}>Active</option>
                        <option value="0" {{ old('status') == 0 ? 'selected' : '' }}>Inactive</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="mt-4">
            <button type="submit" class="btn btn-primary">Save Service</button>
        </div>
    </form>
</div>
@endsection

@section('script')
    <script src="https://cdn.ckeditor.com/ckeditor5/41.4.2/classic/ckeditor.js"></script>
    <script>
        let editors = {};

        document.addEventListener('DOMContentLoaded', function () {
            document.querySelectorAll('.ckeditor').forEach(textarea => {
                ClassicEditor
                    .create(textarea, {
                        toolbar: [
                            'heading', '|',
                            'bold', 'italic', 'underline', 'link', '|',
                            'bulletedList', 'numberedList', '|',
                            'insertTable', 'blockQuote', '|',
                            'undo', 'redo'
                        ],
                        height: 200
                    })
                    .then(editor => {
                        editors[textarea.name] = editor;
                    })
                    .catch(error => console.error('CKEditor error:', error));
            });

            // Sync editor content to textarea before submit (like About Us works)
            document.querySelectorAll('form').forEach(form => {
                form.addEventListener('submit', () => {
                    setTimeout(() => {
                        Object.keys(editors).forEach(name => {
                            if (editors[name]) {
                                const data = editors[name].getData();
                                const textarea = document.querySelector(`textarea[name="${name}"]`);
                                if (textarea) textarea.value = data;
                            }
                        });
                    }, 100);
                });
            });
        });
    </script>
@endsection