@extends('layouts.app')

@section('content')
    <div class="container my-5">
        <div class="card shadow-lg rounded-lg overflow-hidden">
            <div class="card-header bg-secondary text-white">
                <h2 class="h4">Edit Article</h2>
            </div>
            <div class="card-body">
                <form action="{{ route('articles.update', $article->id) }}" method="POST">
                    @csrf
                    @method('PUT')

                    <!-- Article Title -->
                    <div class="form-group mb-4">
                        <label for="article_title">Post Title</label>
                        <input type="text" id="article_title" name="article_title"
                            class="form-control @error('article_title') is-invalid @enderror"
                            value="{{ old('article_title', $article->article_title) }}">
                        @error('article_title')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Article Category -->
                    <div class="form-group mb-4">
                        <label for="article_category_id">Category</label>
                        <select id="article_category_id" name="article_category_id"
                            class="form-control @error('article_category_id') is-invalid @enderror">
                            <option value="">Select Category</option>
                            @foreach ($categories as $category)
                                <option value="{{ $category->id }}"
                                    {{ $category->id == old('article_category_id', $article->article_category_id) ? 'selected' : '' }}>
                                    {{ $category->category_name }}
                                </option>
                            @endforeach
                        </select>
                        @error('article_category_id')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Article Description -->
                    <div class="form-group mb-4">
                        <label for="article_description">Article Description</label>
                        <textarea id="article_description" name="article_description"
                            class="form-control @error('article_description') is-invalid @enderror">{{ old('article_description', $article->article_description) }}</textarea>
                        @error('article_description')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Submit Button -->
                    <div class="form-group">
                        <button type="submit" class="btn btn-primary w-15">
                            Edit
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/6.8.2/tinymce.min.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            tinymce.init({
                selector: '#article_description',
                plugins: 'lists link image table code help wordcount',
                toolbar: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
                menubar: false,
                height: 200,
            });
        });
    </script>

@endsection