@extends('admin.layout')

@section('page_title', 'New post')

@section('admin_content')
    <div class="card card-primary card-outline">
        <div class="card-header"><h3 class="card-title">Create post</h3></div>
        <form action="{{ route('admin.posts.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="card-body">
                <div class="form-group">
                    <label>Title</label>
                    <input type="text" name="title" value="{{ old('title') }}" class="form-control" required>
                </div>
                <div class="form-group">
                    <label>Category</label>
                    <select name="category_id" class="form-control">
                        <option value="">—</option>
                        @foreach($categories as $c)
                            <option value="{{ $c->id }}" {{ (string) old('category_id') === (string) $c->id ? 'selected' : '' }}>{{ $c->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group">
                    <label>Tags</label>
                    <select name="tags[]" multiple class="form-control" style="min-height: 120px">
                        @foreach($tags as $t)
                            <option value="{{ $t->id }}" {{ collect(old('tags'))->contains($t->id) ? 'selected' : '' }}>{{ $t->name }}</option>
                        @endforeach
                    </select>
                    <small class="form-text text-muted">Hold Ctrl (Cmd on Mac) to select multiple.</small>
                </div>
                <div class="form-group">
                    <label>Excerpt</label>
                    <textarea name="excerpt" rows="2" class="form-control">{{ old('excerpt') }}</textarea>
                </div>
                <div class="form-group">
                    <label>Content</label>
                    <textarea name="content" id="content" rows="12" class="form-control">{{ old('content') }}</textarea>
                </div>
                <div class="form-group">
                    <label>Featured image</label>
                    <div class="custom-file">
                        <input type="file" name="featured_image" class="custom-file-input" id="featured_image" accept="image/*">
                        <label class="custom-file-label" for="featured_image">Choose file</label>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Meta title (SEO)</label>
                            <input type="text" name="meta_title" value="{{ old('meta_title') }}" class="form-control">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Meta description</label>
                            <input type="text" name="meta_description" value="{{ old('meta_description') }}" class="form-control">
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" name="is_published" value="1" id="is_published" {{ old('is_published') ? 'checked' : '' }}>
                        <label class="custom-control-label" for="is_published">Published</label>
                    </div>
                </div>
                <div class="form-group">
                    <label>Publish at</label>
                    <input type="datetime-local" name="published_at" value="{{ old('published_at') }}" class="form-control">
                </div>
            </div>
            <div class="card-footer">
                <button type="submit" class="btn btn-primary">Save</button>
                <a href="{{ route('admin.posts.index') }}" class="btn btn-default">Cancel</a>
            </div>
        </form>
    </div>
@endsection

@push('scripts')
<script src="https://cdn.ckeditor.com/4.22.1/standard/ckeditor.js"></script>
<script>
    CKEDITOR.replace('content', { height: 320 });
    document.querySelector('.custom-file-input') && document.querySelector('.custom-file-input').addEventListener('change', function (e) {
        var name = e.target.files[0] ? e.target.files[0].name : 'Choose file';
        e.target.nextElementSibling.innerText = name;
    });
</script>
@endpush