@extends('layouts.admin')

@section('title', 'Create Blog Post')

@section('content_header')
    <h1>Create Blog Post</h1>
@stop

@section('content')
    <div class="card card-primary">
        <div class="card-header">
            <h3 class="card-title">New Blog Post Details</h3>
        </div>
        <form action="{{ route('admin.blogs.posts.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="card-body">
                <div class="form-group">
                    <label for="category_id">Category<span class="text-danger">*</span></label>
                    <select name="category_id" id="category_id" class="form-control @error('category_id') is-invalid @enderror" @if(count($categories) == 0) disabled @endif>
                        <option value="">Select a Category</option>
                        @foreach($categories as $category)
                            <option value="{{ $category->id }}" {{ old('category_id') == $category->id ? 'selected' : '' }}>{{ $category->name }}</option>
                        @endforeach
                    </select>
                    @if(count($categories) == 0)
                        <small class="text-danger">No categories available. Please create a category first.</small>
                    @endif
                    @error('category_id')
                        <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                    @enderror
                </div>
                <div class="form-group">
                    <label for="title">Title<span class="text-danger">*</span></label>
                    <input type="text" name="title" class="form-control @error('title') is-invalid @enderror" id="title" placeholder="Enter blog title" value="{{ old('title') }}">
                    @error('title')
                        <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                    @enderror
                </div>
                <div class="form-group">
                    <label for="content">Content<span class="text-danger">*</span></label>
                    <textarea name="content" class="form-control @error('content') is-invalid @enderror" id="content" rows="10" placeholder="Enter full content">{{ old('content') }}</textarea>
                    @error('content')
                        <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                    @enderror
                </div>
                <div class="form-group">
                    <label for="image">Image<span class="text-danger">*</span></label>
                    <div class="input-group">
                        <div class="custom-file">
                            <input type="file" name="image" class="custom-file-input @error('image') is-invalid @enderror" id="image">
                            <label class="custom-file-label" for="image">Choose file</label>
                        </div>
                    </div>
                    @error('image')
                        <span class="invalid-feedback" role="alert" style="display:block;"><strong>{{ $message }}</strong></span>
                    @enderror
                </div>
                
                <!-- SEO Settings Section -->
                <h4 class="mb-3">SEO Settings</h4>
                <div class="form-group">
                    <label for="meta_title">Meta Title</label>
                    <input type="text" name="meta_title" class="form-control @error('meta_title') is-invalid @enderror" id="meta_title" placeholder="Enter meta title (optional)" value="{{ old('meta_title') }}" maxlength="255">
                    <small class="form-text text-muted">Recommended: 50-60 characters. Leave empty to use blog title.</small>
                    @error('meta_title')
                        <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                    @enderror
                </div>
                <div class="form-group">
                    <label for="meta_description">Meta Description</label>
                    <textarea name="meta_description" class="form-control @error('meta_description') is-invalid @enderror" id="meta_description" rows="3" placeholder="Enter meta description (optional)">{{ old('meta_description') }}</textarea>
                    <small class="form-text text-muted">Recommended: 150-160 characters. Leave empty to auto-generate from content.</small>
                    @error('meta_description')
                        <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                    @enderror
                </div>

                <div class="form-group">
                    <label for="robots_content">Robots Content</label>
                    <input type="text" name="robots_content" class="form-control @error('robots_content') is-invalid @enderror" id="robots_content" 
                        placeholder="index, follow" value="{{ old('robots_content') }}">
                    <small class="form-text text-muted">Default: index, follow</small>
                    @error('robots_content')
                        <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                    @enderror
                </div>

                <div class="form-group">
                    <label for="canonical_url">Canonical URL</label>
                    <input type="url" name="canonical_url" class="form-control @error('canonical_url') is-invalid @enderror" id="canonical_url" 
                        placeholder="https://example.com" value="{{ old('canonical_url') }}">
                    <small class="form-text text-muted">Leave empty to use current page URL</small>
                    @error('canonical_url')
                        <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                    @enderror
                </div>

                <!-- Open Graph Tags -->
                <hr>
                <h5 class="text-primary mb-3">Open Graph Tags (Social Media)</h5>
                
                <div class="form-group">
                    <label for="og_title">OG Title</label>
                    <input type="text" name="og_title" class="form-control @error('og_title') is-invalid @enderror" id="og_title" 
                        placeholder="Leave empty to use Meta Title or Blog Title" value="{{ old('og_title') }}">
                    @error('og_title')
                        <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                    @enderror
                </div>
                
                <div class="form-group">
                    <label for="og_description">OG Description</label>
                    <textarea name="og_description" class="form-control @error('og_description') is-invalid @enderror" id="og_description" rows="2"
                        placeholder="Leave empty to use Meta Description">{{ old('og_description') }}</textarea>
                    @error('og_description')
                        <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                    @enderror
                </div>
                
                <div class="form-group">
                    <label for="og_image">OG Image URL</label>
                    <input type="url" name="og_image" class="form-control @error('og_image') is-invalid @enderror" id="og_image" 
                        placeholder="https://example.com/image.jpg (Leave empty to use blog image)" value="{{ old('og_image') }}">
                    @error('og_image')
                        <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                    @enderror
                </div>

                <!-- Twitter Card Tags -->
                <hr>
                <h5 class="text-primary mb-3">Twitter Card Tags</h5>
                
                <div class="form-group">
                    <label for="twitter_title">Twitter Title</label>
                    <input type="text" name="twitter_title" class="form-control @error('twitter_title') is-invalid @enderror" id="twitter_title" 
                        placeholder="Leave empty to use OG Title or Meta Title" value="{{ old('twitter_title') }}">
                    @error('twitter_title')
                        <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                    @enderror
                </div>
                
                <div class="form-group">
                    <label for="twitter_description">Twitter Description</label>
                    <textarea name="twitter_description" class="form-control @error('twitter_description') is-invalid @enderror" id="twitter_description" rows="2"
                        placeholder="Leave empty to use OG Description or Meta Description">{{ old('twitter_description') }}</textarea>
                    @error('twitter_description')
                        <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                    @enderror
                </div>
                
                <div class="form-group">
                    <label for="twitter_image">Twitter Image URL</label>
                    <input type="url" name="twitter_image" class="form-control @error('twitter_image') is-invalid @enderror" id="twitter_image" 
                        placeholder="https://example.com/image.jpg (Leave empty to use OG Image or blog image)" value="{{ old('twitter_image') }}">
                    @error('twitter_image')
                        <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                    @enderror
                </div>

                <!-- Custom Scripts Section -->
                <hr>
                <h5 class="text-primary mb-3">Custom Scripts (Advanced)</h5>
                
                <div class="form-group">
                    <label for="header_scripts">Header Scripts</label>
                    <textarea name="header_scripts" 
                              class="form-control @error('header_scripts') is-invalid @enderror" 
                              id="header_scripts" 
                              rows="4"
                              placeholder="<script>...</script> or <meta name=... > or other HTML tags ONLY">{{ old('header_scripts') }}</textarea>
                    <small class="form-text text-muted">
                        <strong class="text-danger">⚠️ IMPORTANT:</strong> Only HTML tags (scripts, meta tags, etc.). <strong>DO NOT</strong> add plain text or descriptions here - they will appear as visible text on the website!<br>
                        <strong>Examples:</strong> <code>&lt;script&gt;...&lt;/script&gt;</code>, <code>&lt;meta name="..."&gt;</code>, <code>&lt;!-- comments --&gt;</code>
                    </small>
                    @error('header_scripts')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
                </div>
                
                <div class="form-group">
                    <label for="body_scripts">Body Scripts (JSON-LD Schema)</label>
                    <textarea name="body_scripts" 
                              class="form-control @error('body_scripts') is-invalid @enderror" 
                              id="body_scripts" 
                              rows="6"
                              placeholder="<script type='application/ld+json'>...</script> or other scripts ONLY">{{ old('body_scripts') }}</textarea>
                    <small class="form-text text-muted">
                        <strong class="text-danger">⚠️ IMPORTANT:</strong> Only HTML/JavaScript code. <strong>DO NOT</strong> add plain text - it will display on the website!<br>
                        <strong>Examples:</strong> JSON-LD schema, Google Analytics code, tracking pixels
                    </small>
                    @error('body_scripts')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
                </div>
            </div>
            <div class="card-footer">
                <button type="submit" class="btn btn-primary">Submit</button>
                <a href="{{ route('admin.blogs.posts.index') }}" class="btn btn-default float-right">Cancel</a>
            </div>
        </form>
    </div>
@stop

@section('js')
    <script src="https://cdn.ckeditor.com/ckeditor5/41.0.0/classic/ckeditor.js"></script>
    <script>
        ClassicEditor
            .create( document.querySelector( '#content' ), {
                toolbar: {
                    items: [
                        'heading',
                        '|',
                        'bold',
                        'italic',
                        'underline',
                        'strikethrough',
                        '|',
                        'bulletedList',
                        'numberedList',
                        '|',
                        'blockQuote',
                        'link',
                        'insertImage',
                        'insertTable',
                        'codeBlock',
                        '|',
                        'undo',
                        'redo'
                    ]
                },
                heading: {
                    options: [
                        { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
                        { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
                        { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
                        { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
                        { model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' },
                        { model: 'heading5', view: 'h5', title: 'Heading 5', class: 'ck-heading_heading5' },
                        { model: 'heading6', view: 'h6', title: 'Heading 6', class: 'ck-heading_heading6' }
                    ]
                },
                link: {
                    addTargetToExternalLinks: true,
                    defaultProtocol: 'https://'
                },
                ckfinder: {
                    uploadUrl: '{{ route('admin.blogs.posts.uploadImage') . '?_token=' . csrf_token() }}'
                },
                table: {
                    contentToolbar: [
                        'tableColumn',
                        'tableRow',
                        'mergeTableCells'
                    ]
                }
            } )
            .catch( error => {
                console.error( error );
            } );
        $(document).ready(function() {
            $('.custom-file-input').on('change', function() {
                let fileName = $(this).val().split('\\').pop();
                $(this).next('.custom-file-label').addClass("selected").html(fileName);
            });
        });
    </script>
@stop