<?php

$pageTitle =
    'Gallery - PET SPA';

$pageStyles = [
    'owner.css'
];

$activeOwnerPage =
    'gallery';


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

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


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


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">

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

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

</div>


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

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

<div>

<h1>
    Gallery
</h1>

<p>
    Quản lý hình ảnh của PET SPA.
</p>

</div>


<button
    class="btn btn-primary"
    data-bs-toggle="modal"
    data-bs-target="#addGalleryModal"
>
    + Thêm hình ảnh
</button>

</div>


<?php if ($successMessage): ?>

<div class="alert alert-success">
    <?= htmlspecialchars(
        $successMessage
    ) ?>
</div>

<?php endif; ?>


<?php if ($errorMessage): ?>

<div class="alert alert-danger">
    <?= htmlspecialchars(
        $errorMessage
    ) ?>
</div>

<?php endif; ?>


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

<form
    method="GET"
    class="row g-3"
>

<input
    type="hidden"
    name="url"
    value="owner/gallery"
>

<div class="col-md-9">

<input
    type="text"
    name="search"
    class="form-control"
    placeholder="Tìm tiêu đề, mô tả hoặc danh mục..."
    value="<?= htmlspecialchars(
        $search
    ) ?>"
>

</div>

<div class="col-md-3">

<button
    class="btn btn-dark w-100"
>
    Tìm kiếm
</button>

</div>

</form>

</section>


<div class="owner-gallery-grid">

<?php foreach (
    $galleryItems
    as $item
): ?>

<article class="owner-gallery-card">

<div class="owner-gallery-card-image">

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

<?php if (
    (int)
    $item['is_visible'] !== 1
): ?>

<span class="owner-gallery-hidden">
    Đang ẩn
</span>

<?php endif; ?>

</div>


<div class="owner-gallery-card-body">

<h3>

<?= htmlspecialchars(
    $item['title']
    ?: 'Không tiêu đề'
) ?>

</h3>


<?php if (
    !empty(
        $item['category']
    )
): ?>

<small>
    <?= htmlspecialchars(
        $item['category']
    ) ?>
</small>

<?php endif; ?>


<p>

<?= htmlspecialchars(
    $item['caption']
    ?? ''
) ?>

</p>


<div class="d-flex gap-2 flex-wrap">

<a
    href="<?= BASE_URL ?>/?url=owner/gallery/edit&id=<?= (int)
        $item['id']
    ?>"
    class="btn btn-sm btn-light"
>
    Sửa
</a>


<form
    method="POST"
    action="<?= BASE_URL ?>/?url=owner/gallery/toggle"
>

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

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

<button
    class="btn btn-sm btn-outline-dark"
    type="submit"
>
    <?= (int)
        $item['is_visible'] === 1
        ? 'Ẩn'
        : 'Hiện'
    ?>
</button>

</form>


<form
    method="POST"
    action="<?= BASE_URL ?>/?url=owner/gallery/delete"
    onsubmit="return confirm('Xóa hình ảnh này khỏi Gallery?')"
>

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

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

<button
    type="submit"
    class="btn btn-sm btn-outline-danger"
>
    Xóa
</button>

</form>

</div>

</div>

</article>

<?php endforeach; ?>

</div>


<?php if (
    empty($galleryItems)
): ?>

<div class="owner-card text-center text-muted py-5">
    Gallery chưa có hình ảnh.
</div>

<?php endif; ?>

</div>

</div>

</div>

</main>


<!-- ADD GALLERY -->

<div
    class="modal fade"
    id="addGalleryModal"
    tabindex="-1"
>

<div class="modal-dialog modal-lg">

<div class="modal-content">

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

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


<div class="modal-header">

<h5 class="modal-title">
    Thêm hình ảnh
</h5>

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

</div>


<div class="modal-body">

<div class="row g-3">

<div class="col-12">

<label class="form-label">
    Hình ảnh *
</label>

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

</div>


<div class="col-md-6">

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

<input
    type="text"
    name="title"
    class="form-control"
>

</div>


<div class="col-md-6">

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

<input
    type="text"
    name="category"
    class="form-control"
    placeholder="Ví dụ: Khách hàng, Boss, Cửa hàng..."
>

</div>


<div class="col-12">

<label class="form-label">
    Mô tả
</label>

<textarea
    name="caption"
    class="form-control"
    rows="3"
></textarea>

</div>


<div class="col-md-6">

<label class="form-label">
    Thứ tự
</label>

<input
    type="number"
    name="sort_order"
    class="form-control"
    value="0"
>

</div>


<div class="col-md-6 d-flex align-items-end">

<div class="form-check mb-2">

<input
    class="form-check-input"
    type="checkbox"
    name="is_visible"
    id="galleryVisible"
    checked
>

<label
    class="form-check-label"
    for="galleryVisible"
>
    Hiển thị trên website
</label>

</div>

</div>

</div>

</div>


<div class="modal-footer">

<button
    type="button"
    class="btn btn-light"
    data-bs-dismiss="modal"
>
    Hủy
</button>

<button
    type="submit"
    class="btn btn-primary"
>
    Thêm Gallery
</button>

</div>

</form>

</div>

</div>

</div>


<?php

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

?>