@extends('admin.layouts.main')
@section('title', $page->exists ? 'Edit Page' : 'Create Page')
@section('menu', 'Pages')

@section('content')
<form action="{{ $page->exists ? route('admin.pages.update', $page) : route('admin.pages.store') }}" method="POST">
    @csrf
    @if($page->exists) @method('PUT') @endif
    <fieldset class="content-group">
        <div class="row">
            <div class="col-md-8">
                <div class="panel panel-primary">
                    <div class="panel-heading font-bold">Page Details</div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label">Title<span class="text-danger"> *</span></label>
                                    <input type="text" name="title" class="form-control" value="{{ old('title', $page->title) }}" required>
                                    @if ($errors->has('title'))<span class="help-block text-danger">{{ $errors->first('title') }}</span>@endif
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label">Slug<span class="text-danger"> *</span></label>
                                    <input type="text" name="slug" class="form-control" value="{{ old('slug', $page->slug) }}" required>
                                    @if ($errors->has('slug'))<span class="help-block text-danger">{{ $errors->first('slug') }}</span>@endif
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label">Content</label>
                            <textarea name="content" class="form-control" id="page-content" rows="15">{{ old('content', $page->content) }}</textarea>
                            @if ($errors->has('content'))<span class="help-block text-danger">{{ $errors->first('content') }}</span>@endif
                        </div>
                    </div>
                </div>

                <div class="panel panel-primary">
                    <div class="panel-heading font-bold">SEO</div>
                    <div class="panel-body">
                        <div class="form-group">
                            <label class="control-label">Meta Title</label>
                            <input type="text" name="meta_title" class="form-control" value="{{ old('meta_title', $page->meta_title) }}">
                            @if ($errors->has('meta_title'))<span class="help-block text-danger">{{ $errors->first('meta_title') }}</span>@endif
                        </div>
                        <div class="form-group">
                            <label class="control-label">Meta Description</label>
                            <textarea name="meta_description" class="form-control" rows="3">{{ old('meta_description', $page->meta_description) }}</textarea>
                            @if ($errors->has('meta_description'))<span class="help-block text-danger">{{ $errors->first('meta_description') }}</span>@endif
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="panel panel-primary">
                    <div class="panel-heading font-bold">Options</div>
                    <div class="panel-body">
                        <div class="custom-control custom-switch mb-3">
                            <input type="hidden" name="is_published" value="0">
                            <input type="checkbox" name="is_published" value="1" class="custom-control-input" id="is_published" {{ old('is_published', $page->is_published ?? false) ? 'checked' : '' }}>
                            <label class="custom-control-label" for="is_published">Published</label>
                        </div>
                    </div>
                </div>
                <div class="panel panel-success">
                    <div class="panel-heading font-bold">Publish</div>
                    <div class="panel-body">
                        <a type="button" class="btn btn-warning" href="{{ route('admin.pages.index') }}"><i class="fa fa-long-arrow-left"></i> Back to List</a>
                        <button type="submit" name="save" class="btn btn-success pull-right"><i class="fa fa-save"></i> Save</button>
                    </div>
                </div>
            </div>
        </div>
    </fieldset>
</form>
@endsection

@push('custom-stylesheets')
<link href="{{ asset('assets/global/plugins/bootstrap-summernote/summernote.css') }}" rel="stylesheet" type="text/css"/>
@endpush

@push('scripts')
<script src="{{ asset('assets/global/plugins/bootstrap-summernote/summernote.min.js') }}"></script>
<script>
    $(document).ready(function() {
        // Auto-generate slug from title
        var titleInput = $('input[name="title"]');
        var slugInput = $('input[name="slug"]');
        if (titleInput.length && slugInput.length && !slugInput.val()) {
            titleInput.on('input', function() {
                slugInput.val(this.value.toLowerCase()
                    .replace(/[^a-z0-9\s-]/g, '')
                    .replace(/\s+/g, '-')
                    .replace(/-+/g, '-')
                    .replace(/^-|-$/g, ''));
            });
        }

        // Initialize Summernote
        $('#page-content').summernote({
            height: 400,
            toolbar: [
                ['style', ['style']],
                ['font', ['bold', 'italic', 'underline', 'strikethrough', 'clear']],
                ['fontname', ['fontname']],
                ['fontsize', ['fontsize']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['table', ['table']],
                ['insert', ['link', 'picture', 'hr']],
                ['view', ['fullscreen', 'codeview', 'undo', 'redo']]
            ]
        });
    });
</script>
@endpush