@extends('admin.layouts.base')

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

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

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

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

                <div class="form-group mb-3">
                    <label>Description</label>
                    <textarea name="description" id="description-editor" class="form-control ckeditor">
                        {!! old('description', $service->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">
                        @if(old('list_items_editor'))
                            {!! old('list_items_editor') !!}
                        @else
                            <ul>
                                @foreach($service->list_items ?? [] as $item)
                                    <li>{{ $item }}</li>
                                @endforeach
                            </ul>
                        @endif
                    </textarea>
                    <small class="text-muted">Use bullets or numbered lists in editor — 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">
                    @if($service->main_image)
                        <img src="{{ asset('storage/' . $service->main_image) }}" class="mt-2" height="70">
                    @endif
                </div>

                <div class="form-group mb-3">
                    <label>Add Gallery Images</label>
                    <input type="file" name="gallery_images[]" multiple class="form-control">
                    @if($service->gallery_images)
                        <div class="mt-2 d-flex flex-wrap gap-2">
                            @foreach($service->gallery_images as $img)
                                <img src="{{ asset('storage/' . $img) }}" height="60">
                            @endforeach
                        </div>
                    @endif
                </div>

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

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

        <div class="mt-4">
            <button type="submit" class="btn btn-primary">Update 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
            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