<?= $this->include('layout/header') ?>
<?= $this->include('layout/sidebar') ?>

<div class="page-body">
<div class="container-fluid">

   <!-- PAGE TITLE -->
   <div class="page-title">
      <div class="row">
         <div class="col-6">
            <h4>Create Article</h4>
         </div>
         <div class="col-6 text-end">
            <a href="<?= base_url('admin/articles') ?>" class="btn btn-primary btn-sm">
               Back
            </a>
         </div>
      </div>
   </div>

</div>

<div class="container-fluid">
<div class="row">
<div class="col-xl-9 col-lg-10 col-md-12 mx-auto">

<div class="card">
<div class="card-header">
   <h5>Add New Article</h5>
</div>

<div class="card-body">

<form class="row g-3 needs-validation"
      method="post"
      action="<?= base_url('admin/articles/store') ?>"
      enctype="multipart/form-data"
      novalidate>

<?= csrf_field() ?>

<!-- TITLE -->
<div class="col-md-12">
   <label class="form-label">Title <span class="text-danger">*</span></label>
   <input type="text" name="title" class="form-control" required>
   <div class="invalid-feedback">Title is required</div>
</div>

<!-- SHORT DESCRIPTION -->
<div class="col-12">
   <label class="form-label">Short Description <span class="text-danger">*</span></label>
   <textarea name="short_description" id="short_description" class="form-control" rows="3" required></textarea>
   <div class="invalid-feedback">Short description is required</div>
</div>

<!-- CONTENT (WYSIWYG Editor) -->
<div class="col-12">
   <label class="form-label">Content</label>
   <textarea name="content" id="editor" class="form-control"></textarea>
</div>

<!-- FEATURED IMAGE -->
<div class="col-12">
   <label class="form-label">Featured Image</label>
   <input type="file" name="featured_image" class="form-control" accept="image/*">
   <small class="text-muted">Upload a featured image for the article</small>
</div>

<!-- STATUS -->
<div class="col-md-6">
   <label class="form-label">Status</label>
   <select name="status" class="form-select">
      <option value="1">Active</option>
      <option value="0">Inactive</option>
   </select>
</div>

<!-- SUBMIT -->
<div class="col-12 text-end">
   <button class="btn btn-success px-4">Save Article</button>
</div>

</form>

</div>
</div>
</div>
</div>
</div>
</div>
</div>

<!-- ===================================================== -->
<!-- TinyMCE CLOUD (FOR CONTENT EDITOR) -->
<!-- ===================================================== -->
<script src="https://cdn.tiny.cloud/1/w2o6sz03wpl1ef954fpf1ku5ejf24ri2i8ssh8sw3mku45kw/tinymce/8/tinymce.min.js"
        referrerpolicy="origin"
        crossorigin="anonymous"></script>

<!-- Fallback to self-hosted if CDN fails -->
<script>
if (typeof tinymce === "undefined") {
    document.write('<script src="<?= base_url('assets/tinymce/tinymce.min.js') ?>"><\/script>');
}
</script>

<!-- ===================================================== -->
<!-- TinyMCE INIT (WITH IMAGE UPLOAD) -->
<!-- ===================================================== -->
<script>
document.addEventListener("DOMContentLoaded", function () {

tinymce.init({
    selector: '#editor',
    height: 420,

    plugins: 'image link lists table code media',

    toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | bullist numlist | image media link table | code',

    /* IMAGE UPLOAD */
    automatic_uploads: true,
    images_upload_url: "<?= base_url('admin/articles/upload-editor-image') ?>",
    images_upload_credentials: true,

    /* enable drag & paste */
    paste_data_images: true,

    /* show upload options */
    image_title: true,
    file_picker_types: 'image',

    /* guaranteed upload dialog */
    file_picker_callback: function (callback, value, meta) {
        if (meta.filetype === 'image') {
            const input = document.createElement('input');
            input.setAttribute('type', 'file');
            input.setAttribute('accept', 'image/*');

            input.onchange = function () {
                const file = this.files[0];
                const formData = new FormData();
                formData.append('file', file);

                fetch("<?= base_url('admin/articles/upload-editor-image') ?>", {
                    method: "POST",
                    body: formData
                })
                .then(res => res.json())
                .then(data => callback(data.location));
            };

            input.click();
        }
    },

    branding: false,
    promotion: false
});

});
</script>

<!-- Bootstrap Validation -->
<script>
(() => {
'use strict'
const forms = document.querySelectorAll('.needs-validation')
Array.from(forms).forEach(form => {
form.addEventListener('submit', event => {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()
</script>

<?= $this->include('layout/footer') ?>