@extends('layouts.admin')

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

@section('content')
<div class="container">
    <h1>Edit 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.update', $blog->id) }}" method="POST" enctype="multipart/form-data">
        @csrf
        @method('PUT')

        <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', $blog->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', $blog->summary) }}</textarea>
        </div>

        <div class="mb-3">
            <label for="content" class="form-label">Content</label>
            <textarea class="form-control" id="content" name="content" rows="10" required>{{ old('content', $blog->content) }}</textarea>
        </div>

        <div class="mb-3">
            <label for="image" class="form-label">Image</label>
            <input type="file" class="form-control" id="image" name="image">
            @if ($blog->image)
            <img src="{{ asset($blog->image) }}" alt="Current Image" class="img-thumbnail mt-2" style="max-width: 200px;">
            <div class="form-check mt-2">
                <input type="checkbox" class="form-check-input" id="remove-image" name="remove_image">
                <label class="form-check-label" for="remove-image">Remove current image</label>
            </div>
            @endif
        </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', $blog->date) }}" required>
        </div>

        <div class="mb-3">
            <div class="form-check">
                <input type="checkbox" class="form-check-input" id="popular" name="popular" {{ old('popular', $blog->popular) ? 'checked' : '' }} value="1">
                <label class="form-check-label" for="popular">Popular</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', $blog->categories->pluck('id')->toArray())) ? 'selected' : '' }}>
                    {{ $category->title }}
                </option>
                @endforeach
            </select>
        </div>

        <button type="submit" class="btn btn-primary">Update</button>
    </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, #content_before',
        plugins: 'advlist autolink lists link image charmap preview anchor code',
        toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help | code',
        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