@extends('layouts.admin')

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

@section('content')
<div class="container">
    <h1>Create Blog</h1>

    @if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif

    <form action="{{ route('admin.blogs.store') }}" method="POST" enctype="multipart/form-data">
        @csrf

        <div class="mb-3">
            <label for="title" class="form-label">Title</label>
            <input type="text" class="form-control" id="title" name="title" value="{{ old('title') }}" required>
        </div>

        <div class="mb-3">
            <label for="summary" class="form-label">Summary</label>
            <textarea class="form-control" id="summary" name="summary" rows="3" required>{{ old('summary') }}</textarea>
        </div>


        <div class="mb-3">
            <label for="content" class="form-label">Content</label>
            <textarea class="form-control @error('content') is-invalid @enderror" id="content" name="content" rows="10">{{ old('answer') }}</textarea>
            @error('content')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <div class="mb-3">
            <label for="image" class="form-label">Image</label>
            <input type="file" class="form-control" id="image" name="image">
        </div>

        <div class="mb-3">
            <label for="date" class="form-label">Date</label>
            <input type="date" class="form-control" id="date" name="date" value="{{ old('date') }}" required>
        </div>

        <div class="mb-3">
            <div class="form-check">
                <input type="checkbox" class="form-check-input" id="popular" name="popular" {{ old('popular') ? 'checked' : '' }} value="1">
                <label class="form-check-label" for="popular">Popular<br><small>If this box is ticked, the post will appear in the "Popular Posts" list. </small></label>
            </div>
        </div>

        <div class="mb-3">
            <label for="categories" class="form-label">Categories</label>
            <select multiple class="form-select" id="categories" name="categories[]">
                @foreach ($categories as $category)
                <option value="{{ $category->id }}" {{ in_array($category->id, old('categories', [])) ? 'selected' : '' }}>
                    {{ $category->title }}
                </option>
                @endforeach
            </select>
        </div>

        <button type="submit" class="btn btn-primary">Save</button>
        <a href="{{ route('admin.blogs.index') }}" class="btn btn-secondary">Cancel</a>
    </form>
</div>

<!-- Include TinyMCE -->
<!--script src="https://cdn.tiny.cloud/1/o35nrvszar8z284zvothcsrb3ffnhkvvq3e3za5ilc6en51r/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
<script>
    tinymce.init({
        selector: '#content',
        plugins: 'advlist autolink lists link image charmap preview anchor',
        toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help',
        content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
    });
</script-->
 <script>
$(document).ready(function() {
  $('#content').summernote();
  $('#content_before').summernote();
});
</script>
<script>
     $('#categories').select2({         
         placeholder: 'Select categories',
         allowClear: true
     });
 </script>
@endsection