@extends('layouts.admin')

@section('title', 'Edit Page')

@section('content')
<div class="container-fluid mt-4">
    <div class="row justify-content-center">
        <div class="col-md-10">
            <div class="card card-warning">
                <div class="card-header">
                    <h3 class="card-title">Edit Page</h3>
                </div>

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

                    <div class="card-body">

                        {{-- Title --}}
                        <div class="form-group">
                            <label for="title">Page Title <span class="text-danger">*</span></label>
                            <input type="text" name="title" class="form-control" id="title" value="{{ old('title', $page->title) }}" required>
                            @error('title')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>

                        {{-- Slug --}}
                        <div class="form-group">
                            <label for="slug">Slug <span class="text-danger">*</span></label>
                            <input type="text" name="slug" class="form-control" id="slug" value="{{ old('slug', $page->slug) }}" required>
                            @error('slug')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>

                        {{-- Image/File Upload --}}
                        <div class="form-group">
                            <label for="image">Upload New Images / Documents (optional)</label>
                            <input type="file" name="image[]" class="form-control" id="image" multiple>
                            <small class="text-muted">Leave blank if you do not want to change existing files.</small>
                            @error('image')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>

                        @if($page->image)
                            @php $existingFiles = json_decode($page->image, true); @endphp
                            <div class="mb-3">
                                <label>Existing Files:</label>
                                <div class="row">
                                    @foreach($existingFiles as $file)
                                        @php $fileUrl = asset('storage/' . $file); @endphp
                                        <div class="col-md-4 mb-2">
                                            @if(preg_match('/\.(jpg|jpeg|png|gif)$/i', $file))
                                                <img src="{{ $fileUrl }}" class="img-fluid img-thumbnail" alt="Image">
                                            @else
                                                <a href="{{ $fileUrl }}" target="_blank">{{ basename($file) }}</a>
                                            @endif
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endif

                        {{-- Content --}}
                        <div class="form-group">
                            <label for="content">Content <span class="text-danger">*</span></label>
                            <textarea name="content" class="form-control" id="editor" rows="6">{{ old('content', $page->content) }}</textarea>
                            @error('content')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>

                    </div>

                    <div class="card-footer text-end">
                        <a href="{{ route('pages.index') }}" class="btn btn-secondary">Cancel</a>
                        <button type="submit" class="btn btn-warning"><i class="fas fa-sync-alt"></i> Update Page</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script>
<script>
    ClassicEditor
        .create(document.querySelector('#editor'))
        .then(editor => {
            editor.editing.view.change(writer => {
                writer.setStyle('min-height', '200px', editor.editing.view.document.getRoot());
            });
        })
        .catch(error => {
            console.error(error);
        });
</script>
@endpush