@extends('layouts.app') <!-- Or whichever layout you’re using for admin pages -->

@section('content')


<div class="container-fluid py-5" style="padding: 0 15px;">
    <h4 class="mb-4 text-dark fw-bold">Add Diocese Post</h4>

    <div class="card shadow-sm">
        <div class="card-body">
            <form action="{{ route('diocese-posts.store') }}" method="POST" enctype="multipart/form-data">
                @csrf

                <h5 class="fw-semibold mb-3">Add Post</h5>

                <!-- Post Title -->
                <div class="form-group mb-3">
                    <label class="form-label fw-semibold">Post Title<span class="text-danger">*</span></label>
                    <input
                        type="text"
                        name="title"
                        class="form-control"
                        placeholder="Enter post title"
                        required
                    >
                </div>

                <!-- Article Photo -->
                <div class="form-group mb-3">
                    <label class="form-label fw-semibold">Article Photo<span class="text-danger">*</span></label>
                    <input
                        type="file"
                        name="photo"
                        class="form-control"
                        required
                    >
                </div>

                <!-- Diocese Dropdown -->
                <div class="form-group mb-3">
                    <label class="form-label fw-semibold">Diocese<span class="text-danger">*</span></label>
                    <select name="diocese_id" class="form-select" required>
                        <option value="">Select Diocese..</option>
                        @foreach($dioceses as $diocese)
                            <option value="{{ $diocese->id }}">{{ $diocese->name }}</option>
                        @endforeach
                    </select>
                </div>

                <!-- Description (CKEditor) -->
                <div class="form-group mb-4">
                    <label class="form-label fw-semibold">Description<span class="text-danger">*</span></label>
                    <textarea
                        name="description"
                        id="editor"
                        class="form-control"
                        rows="10"
                        required
                    ></textarea>
                </div>

                <!-- Submit Button -->
                <div class="d-flex justify-content-end">
                    <button type="submit" class="btn btn-success px-4">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('scripts')
    {{-- Full CKEditor build with toolbar --}}
    <script src="https://cdn.ckeditor.com/4.21.0/full/ckeditor.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            CKEDITOR.replace('editor', {
                height: 300,
                toolbarCanCollapse: true,
                removeButtons: ''
            });
        });
    </script>
@endsection