<?php

$pageTitle =
    'Thêm sản phẩm - PET SPA';

$pageStyles = [
    'owner.css'
];

$activeOwnerPage =
    'products';


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

unset(
    $_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>

                        <a
                            href="<?= BASE_URL ?>/?url=owner/products"
                            class="small"
                        >
                            ← Sản phẩm
                        </a>

                        <h1 class="mt-2">
                            Thêm sản phẩm
                        </h1>

                    </div>

                </div>


                <?php if ($errorMessage): ?>

                    <div class="alert alert-danger">

                        <?= htmlspecialchars(
                            $errorMessage
                        ) ?>

                    </div>

                <?php endif; ?>


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

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


                    <div class="row g-4">

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

                            <section class="owner-card">

                                <h2>
                                    Thông tin sản phẩm
                                </h2>


                                <div class="row g-3">

                                    <div class="col-12">

                                        <label class="form-label">
                                            Tên sản phẩm *
                                        </label>

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

                                    </div>


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

                                        <label class="form-label">
                                            SKU
                                        </label>

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

                                    </div>


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

                                        <label class="form-label">
                                            Thương hiệu
                                        </label>

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

                                    </div>


                                    <div class="col-12">

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

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

                                    </div>


                                    <div class="col-12">

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

                                        <textarea
                                            name="description"
                                            class="form-control"
                                            rows="10"
                                        ></textarea>

                                    </div>

                                </div>

                            </section>


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

                                <h2>
                                    Hình ảnh sản phẩm
                                </h2>


                                <input
                                    type="file"
                                    name="product_images[]"
                                    class="form-control"
                                    accept="image/jpeg,image/png,image/webp"
                                    multiple
                                >


                                <small class="text-muted">

                                    JPG, PNG hoặc WEBP.
                                    Mỗi ảnh tối đa 5MB.

                                </small>

                            </section>

                        </div>


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

                            <section class="owner-card">

                                <h2>
                                    Phân loại
                                </h2>


                                <div class="mb-3">

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

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

                                        <option value="">
                                            Chọn danh mục
                                        </option>


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

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

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

                                            </option>

                                        <?php endforeach; ?>

                                    </select>

                                </div>


                                <div class="mb-3">

                                    <label class="form-label">
                                        Dành cho
                                    </label>

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

                                        <option value="all">
                                            Chó & Mèo
                                        </option>

                                        <option value="dog">
                                            Chó
                                        </option>

                                        <option value="cat">
                                            Mèo
                                        </option>

                                    </select>

                                </div>

                            </section>


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

                                <h2>
                                    Giá & tồn kho
                                </h2>


                                <div class="mb-3">

                                    <label class="form-label">
                                        Giá bán *
                                    </label>

                                    <input
                                        type="number"
                                        name="price"
                                        class="form-control"
                                        min="1"
                                        required
                                    >

                                </div>


                                <div class="mb-3">

                                    <label class="form-label">
                                        Giá khuyến mãi
                                    </label>

                                    <input
                                        type="number"
                                        name="sale_price"
                                        class="form-control"
                                        min="0"
                                    >

                                </div>


                                <div class="mb-3">

                                    <label class="form-label">
                                        Tồn kho
                                    </label>

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

                                </div>

                            </section>


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

                                <h2>
                                    Hiển thị
                                </h2>


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

                                    <option value="active">
                                        Đang bán
                                    </option>

                                    <option value="hidden">
                                        Ẩn
                                    </option>

                                </select>


                                <div class="form-check">

                                    <input
                                        type="checkbox"
                                        name="is_featured"
                                        class="form-check-input"
                                        id="featured"
                                    >

                                    <label
                                        class="form-check-label"
                                        for="featured"
                                    >
                                        Sản phẩm nổi bật
                                    </label>

                                </div>

                            </section>


                            <button
                                type="submit"
                                class="btn btn-primary btn-lg w-100 mt-4"
                            >
                                Lưu sản phẩm
                            </button>

                        </div>

                    </div>

                </form>

            </div>

        </div>

    </div>

</main>


<?php

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

?>