@extends('admin.layout')
@section('title','Edit Page')
@section('page-title','Edit Page')

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

<div style="display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start;">
    <div>
        <div class="card" style="margin-bottom:16px;">
            <div class="card-body">
                <div class="form-group" style="margin-bottom:14px;">
                    <label>Page Title *</label>
                    <input type="text" name="title" value="{{ old('title',$page->title) }}" required style="width:100%;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;font-weight:600;">
                </div>
                <div class="form-group">
                    <label>URL Slug</label>
                    <div style="display:flex;align-items:center;gap:8px;">
                        <span style="color:#94a3b8;font-size:13px;">/page/</span>
                        <input type="text" name="slug" value="{{ old('slug',$page->slug) }}" style="flex:1;padding:9px 12px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:13px;">
                    </div>
                </div>
            </div>
        </div>

        <div class="card" style="margin-bottom:16px;">
            <div class="card-header"><h3>Page Content</h3></div>
            <div class="card-body" style="padding:0;">
                <textarea name="content" id="content-editor" rows="20" style="width:100%;padding:16px;border:none;font-size:14px;font-family:'Inter',sans-serif;outline:none;resize:vertical;min-height:400px;">{{ old('content',$page->content) }}</textarea>
            </div>
        </div>
    </div>

    <div style="display:flex;flex-direction:column;gap:16px;">
        <div class="card">
            <div class="card-header"><h3>Publish</h3></div>
            <div class="card-body">
                <label style="display:flex;align-items:center;gap:8px;font-size:13px;margin-bottom:16px;">
                    <input type="checkbox" name="is_active" value="1" {{ $page->is_active ? 'checked':'' }} style="width:16px;height:16px;">
                    Active (visible on site)
                </label>
                <div style="display:flex;gap:8px;">
                    <a href="{{ route('admin.pages') }}" class="btn btn-outline" style="flex:1;">Cancel</a>
                    <button type="submit" class="btn btn-primary" style="flex:1;"><i class="fas fa-save"></i> Update</button>
                </div>
                <div style="margin-top:10px;text-align:center;">
                    <a href="{{ url('/page/'.$page->slug) }}" target="_blank" style="font-size:12px;color:var(--red);">Preview page <i class="fas fa-external-link-alt"></i></a>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header"><h3>SEO</h3></div>
            <div class="card-body">
                <div class="form-group" style="margin-bottom:12px;">
                    <label>Meta Title</label>
                    <input type="text" name="meta_title" value="{{ old('meta_title',$page->meta_title) }}" style="width:100%;padding:8px 10px;border:1.5px solid #e2e8f0;border-radius:6px;font-size:12px;">
                </div>
                <div class="form-group" style="margin-bottom:12px;">
                    <label>Meta Description</label>
                    <textarea name="meta_description" rows="3" style="width:100%;padding:8px 10px;border:1.5px solid #e2e8f0;border-radius:6px;font-size:12px;resize:vertical;">{{ old('meta_description',$page->meta_description) }}</textarea>
                </div>
                <div class="form-group">
                    <label>Banner Image</label>
                    @if($page->banner_image)<img src="{{ asset('uploads/pages/'.$page->banner_image) }}" style="width:100%;border-radius:8px;margin-bottom:8px;"><br>@endif
                    <input type="file" name="banner_image" accept="image/*" style="font-size:12px;">
                </div>
            </div>
        </div>
    </div>
</div>
</form>
@endsection

@push('scripts')
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
<script>tinymce.init({selector:'#content-editor',plugins:'link image lists table code',toolbar:'undo redo | formatselect | bold italic | alignleft aligncenter | bullist numlist | link | table | code',height:500,menubar:false});</script>
@endpush