<?php

$pageTitle =
    'Chỉnh sửa bài viết - PET SPA';

$pageStyles = [
    'owner.css'
];

$activeOwnerPage =
    'posts';


// ============================================================
// FLASH MESSAGE
// ============================================================

$successMessage =
    $_SESSION['flash_success']
    ?? null;

$errorMessage =
    $_SESSION['flash_error']
    ?? null;


unset(
    $_SESSION['flash_success'],
    $_SESSION['flash_error']
);


// ============================================================
// LOAD LAYOUT
// ============================================================

require BASE_PATH
    . '/app/views/layouts/header.php';

require BASE_PATH
    . '/app/views/layouts/navbar.php';

?>


<main class="owner-area">

    <div class="container-fluid">

        <div class="row g-4">


            <!-- ==================================================
                 SIDEBAR
            =================================================== -->

            <div class="col-xl-2 col-lg-3">

                <?php

                require BASE_PATH
                    . '/app/views/layouts/owner-sidebar.php';

                ?>

            </div>


            <!-- ==================================================
                 MAIN CONTENT
            =================================================== -->

            <div class="col-xl-10 col-lg-9">


                <!-- ==================================================
                     HEADER
                =================================================== -->

                <div class="owner-page-header">

                    <div>

                        <a
                            href="<?= BASE_URL ?>/?url=owner/posts"
                            class="small text-decoration-none"
                        >
                            ← Quay lại bài viết
                        </a>


                        <h1 class="mt-2">
                            Chỉnh sửa bài viết
                        </h1>


                        <p>

                            <?= htmlspecialchars(
                                $post['title']
                            ) ?>

                        </p>

                    </div>


                    <!-- XEM BÀI VIẾT NGOÀI WEBSITE -->

                    <?php if (
                        $post['status']
                        === 'published'
                    ): ?>

                        <a
                            href="<?= BASE_URL ?>/?url=post&slug=<?= urlencode(
                                $post['slug']
                            ) ?>"
                            target="_blank"
                            class="btn btn-outline-dark"
                        >

                            <i
                                class="bi bi-box-arrow-up-right me-1"
                            ></i>

                            Xem bài viết

                        </a>

                    <?php endif; ?>

                </div>


                <!-- ==================================================
                     SUCCESS
                =================================================== -->

                <?php if ($successMessage): ?>

                    <div
                        class="alert alert-success alert-dismissible fade show"
                    >

                        <i
                            class="bi bi-check-circle me-2"
                        ></i>


                        <?= htmlspecialchars(
                            $successMessage
                        ) ?>


                        <button
                            type="button"
                            class="btn-close"
                            data-bs-dismiss="alert"
                        ></button>

                    </div>

                <?php endif; ?>


                <!-- ==================================================
                     ERROR
                =================================================== -->

                <?php if ($errorMessage): ?>

                    <div
                        class="alert alert-danger alert-dismissible fade show"
                    >

                        <i
                            class="bi bi-exclamation-circle me-2"
                        ></i>


                        <?= htmlspecialchars(
                            $errorMessage
                        ) ?>


                        <button
                            type="button"
                            class="btn-close"
                            data-bs-dismiss="alert"
                        ></button>

                    </div>

                <?php endif; ?>


                <!-- ==================================================
                     UPDATE FORM
                =================================================== -->

                <form
                    method="POST"
                    action="<?= BASE_URL ?>/?url=owner/post/update"
                    enctype="multipart/form-data"
                >


                    <!-- CSRF -->

                    <input
                        type="hidden"
                        name="_token"
                        value="<?= htmlspecialchars(
                            $_SESSION['csrf_token']
                        ) ?>"
                    >


                    <!-- POST ID -->

                    <input
                        type="hidden"
                        name="post_id"
                        value="<?= (int)
                            $post['id']
                        ?>"
                    >


                    <div class="row g-4">


                        <!-- ==================================================
                             LEFT COLUMN
                        =================================================== -->

                        <div class="col-xl-8">


                            <!-- ==============================================
                                 MAIN CONTENT
                            =============================================== -->

                            <section class="owner-card">

                                <h2>
                                    Nội dung bài viết
                                </h2>


                                <!-- TITLE -->

                                <div class="mb-3">

                                    <label
                                        class="form-label fw-semibold"
                                    >
                                        Tiêu đề

                                        <span class="text-danger">
                                            *
                                        </span>

                                    </label>


                                    <input
                                        type="text"
                                        name="title"
                                        class="form-control form-control-lg"
                                        maxlength="255"
                                        value="<?= htmlspecialchars(
                                            $post['title']
                                        ) ?>"
                                        required
                                    >

                                </div>


                                <!-- SLUG -->

                                <div class="mb-3">

                                    <label
                                        class="form-label fw-semibold"
                                    >
                                        Đường dẫn hiện tại
                                    </label>


                                    <div class="input-group">

                                        <span
                                            class="input-group-text"
                                        >
                                            /post/
                                        </span>


                                        <input
                                            type="text"
                                            class="form-control"
                                            value="<?= htmlspecialchars(
                                                $post['slug']
                                            ) ?>"
                                            readonly
                                        >

                                    </div>


                                    <small class="text-muted">

                                        Slug sẽ được hệ thống tự tạo lại
                                        nếu tiêu đề bài viết thay đổi.

                                    </small>

                                </div>


                                <!-- EXCERPT -->

                                <div class="mb-3">

                                    <label
                                        class="form-label fw-semibold"
                                    >
                                        Mô tả ngắn
                                    </label>


                                    <textarea
                                        name="excerpt"
                                        class="form-control"
                                        rows="4"
                                        maxlength="500"
                                        placeholder="Mô tả ngắn hiển thị ở danh sách bài viết..."
                                    ><?= htmlspecialchars(
                                        $post['excerpt']
                                        ?? ''
                                    ) ?></textarea>


                                    <small class="text-muted">

                                        Tối đa 500 ký tự.

                                    </small>

                                </div>


                                <!-- CONTENT -->

                                <div>

                                    <div>

    <label
        class="form-label fw-semibold"
    >
        Nội dung

        <span class="text-danger">
            *
        </span>
    </label>


    <?php

    $editorContent =
        (string) (
            $post['content']
            ?? ''
        );

    require BASE_PATH
        . '/app/views/owner/posts/_editor.php';

    ?>

</div>

                                </div>

                            </section>


                            <!-- ==============================================
                                 FEATURED IMAGE
                            =============================================== -->

                            <section class="owner-card mt-4">

                                <h2>
                                    Ảnh đại diện bài viết
                                </h2>


                                <!-- CURRENT IMAGE -->

                                <?php if (
                                    !empty(
                                        $post[
                                            'featured_image'
                                        ]
                                    )
                                ): ?>

                                    <div class="mb-4">

                                        <label
                                            class="form-label fw-semibold"
                                        >
                                            Ảnh hiện tại
                                        </label>


                                        <div
                                            class="owner-post-featured-preview"
                                        >

                                            <img
                                                src="<?= BASE_URL ?>/<?= htmlspecialchars(
                                                    ltrim(
                                                        $post[
                                                            'featured_image'
                                                        ],
                                                        '/'
                                                    )
                                                ) ?>"
                                                alt="<?= htmlspecialchars(
                                                    $post['title']
                                                ) ?>"
                                            >

                                        </div>

                                    </div>

                                <?php else: ?>

                                    <div
                                        class="alert alert-light border"
                                    >

                                        <i
                                            class="bi bi-image me-2"
                                        ></i>

                                        Bài viết chưa có ảnh đại diện.

                                    </div>

                                <?php endif; ?>


                                <!-- UPLOAD NEW IMAGE -->

                                <div>

                                    <label
                                        class="form-label fw-semibold"
                                    >
                                        Thay ảnh đại diện
                                    </label>


                                    <input
                                        type="file"
                                        name="featured_image"
                                        id="featuredImageInput"
                                        class="form-control"
                                        accept="image/jpeg,image/png,image/webp"
                                    >


                                    <small class="text-muted">

                                        Để trống nếu muốn giữ nguyên ảnh hiện tại.
                                        JPG, PNG hoặc WEBP. Tối đa 5MB.

                                    </small>

                                </div>


                                <!-- PREVIEW -->

                                <div
                                    id="featuredImagePreview"
                                    class="owner-post-featured-preview mt-3 d-none"
                                >

                                    <img
                                        src=""
                                        alt="Ảnh xem trước"
                                        id="featuredImagePreviewImg"
                                    >

                                </div>

                            </section>

                        </div>


                        <!-- ==================================================
                             RIGHT COLUMN
                        =================================================== -->

                        <div class="col-xl-4">


                            <!-- ==============================================
                                 PUBLISH
                            =============================================== -->

                            <section class="owner-card">

                                <h2>
                                    Xuất bản
                                </h2>


                                <!-- STATUS -->

                                <div class="mb-3">

                                    <label
                                        class="form-label fw-semibold"
                                    >
                                        Trạng thái
                                    </label>


                                    <select
                                        name="status"
                                        class="form-select"
                                    >

                                        <option
                                            value="draft"
                                            <?= $post['status']
                                                === 'draft'
                                                ? 'selected'
                                                : ''
                                            ?>
                                        >
                                            Bản nháp
                                        </option>


                                        <option
                                            value="published"
                                            <?= $post['status']
                                                === 'published'
                                                ? 'selected'
                                                : ''
                                            ?>
                                        >
                                            Đã đăng
                                        </option>


                                        <option
                                            value="hidden"
                                            <?= $post['status']
                                                === 'hidden'
                                                ? 'selected'
                                                : ''
                                            ?>
                                        >
                                            Đã ẩn
                                        </option>

                                    </select>

                                </div>


                                <!-- CATEGORY -->

                                <div class="mb-3">

                                    <label
                                        class="form-label fw-semibold"
                                    >
                                        Danh mục
                                    </label>


                                    <select
                                        name="category_id"
                                        class="form-select"
                                    >

                                        <option value="0">

                                            Chưa phân loại

                                        </option>


                                        <?php foreach (
                                            $categories
                                            as $category
                                        ): ?>

                                            <option
                                                value="<?= (int)
                                                    $category['id']
                                                ?>"

                                                <?= (int)
                                                    ($post[
                                                        'category_id'
                                                    ] ?? 0)
                                                    === (int)
                                                    $category['id']
                                                    ? 'selected'
                                                    : ''
                                                ?>
                                            >

                                                <?= htmlspecialchars(
                                                    $category['name']
                                                ) ?>

                                            </option>

                                        <?php endforeach; ?>

                                    </select>

                                </div>


                                <!-- SAVE -->

                                <div class="d-grid">

                                    <button
                                        type="submit"
                                        class="btn btn-primary btn-lg"
                                    >

                                        <i
                                            class="bi bi-check-lg me-1"
                                        ></i>

                                        Lưu thay đổi

                                    </button>

                                </div>

                            </section>


                            <!-- ==============================================
                                 SYSTEM INFO
                            =============================================== -->

                            <section class="owner-card mt-4">

                                <h2>
                                    Thông tin bài viết
                                </h2>


                                <div class="owner-info-row">

                                    <span>
                                        ID
                                    </span>

                                    <strong>

                                        #<?= (int)
                                            $post['id']
                                        ?>

                                    </strong>

                                </div>


                                <div class="owner-info-row">

                                    <span>
                                        Tác giả
                                    </span>

                                    <strong>

                                        <?= htmlspecialchars(
                                            $post[
                                                'author_name'
                                            ]
                                            ?? '-'
                                        ) ?>

                                    </strong>

                                </div>


                                <div class="owner-info-row">

                                    <span>
                                        Ngày tạo
                                    </span>

                                    <strong>

                                        <?= date(
                                            'd/m/Y H:i',
                                            strtotime(
                                                $post[
                                                    'created_at'
                                                ]
                                            )
                                        ) ?>

                                    </strong>

                                </div>


                                <div class="owner-info-row">

                                    <span>
                                        Cập nhật
                                    </span>

                                    <strong>

                                        <?= date(
                                            'd/m/Y H:i',
                                            strtotime(
                                                $post[
                                                    'updated_at'
                                                ]
                                            )
                                        ) ?>

                                    </strong>

                                </div>


                                <div class="owner-info-row">

                                    <span>
                                        Ngày đăng
                                    </span>

                                    <strong>

                                        <?php if (
                                            !empty(
                                                $post[
                                                    'published_at'
                                                ]
                                            )
                                        ): ?>

                                            <?= date(
                                                'd/m/Y H:i',
                                                strtotime(
                                                    $post[
                                                        'published_at'
                                                    ]
                                                )
                                            ) ?>

                                        <?php else: ?>

                                            Chưa đăng

                                        <?php endif; ?>

                                    </strong>

                                </div>

                            </section>


                            <!-- ==============================================
                                 STATUS INFO
                            =============================================== -->

                            <section class="owner-card mt-4">

                                <h2>
                                    Trạng thái hiện tại
                                </h2>


                                <?php if (
                                    $post['status']
                                    === 'published'
                                ): ?>

                                    <div
                                        class="alert alert-success mb-0"
                                    >

                                        <i
                                            class="bi bi-check-circle me-2"
                                        ></i>

                                        Bài viết đang được hiển thị
                                        trên website.

                                    </div>


                                <?php elseif (
                                    $post['status']
                                    === 'draft'
                                ): ?>

                                    <div
                                        class="alert alert-secondary mb-0"
                                    >

                                        <i
                                            class="bi bi-file-earmark me-2"
                                        ></i>

                                        Bài viết đang ở dạng bản nháp.

                                    </div>


                                <?php else: ?>

                                    <div
                                        class="alert alert-warning mb-0"
                                    >

                                        <i
                                            class="bi bi-eye-slash me-2"
                                        ></i>

                                        Bài viết đang bị ẩn.

                                    </div>

                                <?php endif; ?>

                            </section>


                            <!-- ==============================================
                                 CANCEL BUTTON
                            =============================================== -->

                            <a
                                href="<?= BASE_URL ?>/?url=owner/posts"
                                class="btn btn-light w-100 mt-4"
                            >
                                Hủy chỉnh sửa
                            </a>

                        </div>

                    </div>

                </form>


                <!-- ==================================================
                     HIDE POST
                     Form riêng, không đặt trong form update
                =================================================== -->

                <?php if (
                    $post['status']
                    !== 'hidden'
                ): ?>

                    <section
                        class="owner-card mt-4 border-danger"
                    >

                        <h2 class="text-danger">
                            Ẩn bài viết
                        </h2>


                        <p class="text-muted">

                            Bài viết sẽ không còn xuất hiện
                            ở trang công khai nhưng dữ liệu vẫn được giữ lại.

                        </p>


                        <form
                            method="POST"
                            action="<?= BASE_URL ?>/?url=owner/post/hide"
                            onsubmit="return confirm('Bạn chắc chắn muốn ẩn bài viết này?')"
                        >

                            <input
                                type="hidden"
                                name="_token"
                                value="<?= htmlspecialchars(
                                    $_SESSION[
                                        'csrf_token'
                                    ]
                                ) ?>"
                            >


                            <input
                                type="hidden"
                                name="post_id"
                                value="<?= (int)
                                    $post['id']
                                ?>"
                            >


                            <button
                                type="submit"
                                class="btn btn-outline-danger"
                            >

                                <i
                                    class="bi bi-eye-slash me-1"
                                ></i>

                                Ẩn bài viết

                            </button>

                        </form>

                    </section>

                <?php endif; ?>


                <!-- ==================================================
                     DELETE POST
                =================================================== -->

                <section
                    class="owner-card mt-4 border-danger"
                >
                    <h2 class="text-danger">
                        Xóa bài viết
                    </h2>

                    <p class="text-muted">
                        Xóa vĩnh viễn bài viết khỏi hệ thống.
                        Thao tác này không thể hoàn tác.
                    </p>

                    <form
                        method="POST"
                        action="<?= BASE_URL ?>/?url=owner/post/delete"
                        onsubmit="return confirm('Bạn chắc chắn muốn XÓA VĨNH VIỄN bài viết này? Thao tác này không thể hoàn tác.')"
                    >
                        <input
                            type="hidden"
                            name="_token"
                            value="<?= htmlspecialchars(
                                $_SESSION['csrf_token']
                            ) ?>"
                        >

                        <input
                            type="hidden"
                            name="post_id"
                            value="<?= (int)
                                $post['id']
                            ?>"
                        >

                        <button
                            type="submit"
                            class="btn btn-danger"
                        >
                            <i class="bi bi-trash3 me-1"></i>
                            Xóa vĩnh viễn bài viết
                        </button>
                    </form>
                </section>

            </div>

        </div>

    </div>

</main>


<!-- ============================================================
     IMAGE PREVIEW
============================================================= -->

<script>

document.addEventListener(
    'DOMContentLoaded',
    function () {

        const input =
            document.getElementById(
                'featuredImageInput'
            );

        const preview =
            document.getElementById(
                'featuredImagePreview'
            );

        const previewImage =
            document.getElementById(
                'featuredImagePreviewImg'
            );


        if (
            !input
            || !preview
            || !previewImage
        ) {
            return;
        }


        input.addEventListener(
            'change',
            function () {

                const file =
                    this.files[0];


                if (!file) {

                    preview.classList.add(
                        'd-none'
                    );

                    previewImage.src = '';

                    return;
                }


                if (
                    !file.type.startsWith(
                        'image/'
                    )
                ) {

                    preview.classList.add(
                        'd-none'
                    );

                    previewImage.src = '';

                    return;
                }


                const reader =
                    new FileReader();


                reader.onload =
                    function (event) {

                        previewImage.src =
                            event.target.result;

                        preview.classList.remove(
                            'd-none'
                        );
                    };


                reader.readAsDataURL(
                    file
                );

            }
        );

    }
);

</script>


<?php

require BASE_PATH
    . '/app/views/layouts/footer.php';

?>
