<?php

$pageTitle =
    'Tạo khuyến mãi - PET SPA';

$pageStyles = [
    'owner.css'
];

$activeOwnerPage =
    'promotions';


$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/promotions"
                            class="small text-decoration-none"
                        >
                            ← Khuyến mãi
                        </a>

                        <h1 class="mt-2">
                            Tạo mã khuyến mãi
                        </h1>

                    </div>

                </div>


                <?php if ($errorMessage): ?>

                    <div class="alert alert-danger">

                        <?= htmlspecialchars(
                            $errorMessage
                        ) ?>

                    </div>

                <?php endif; ?>


                <form
                    action="<?= BASE_URL ?>/?url=owner/promotion/store"
                    method="POST"
                >

                    <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 khuyến mãi
                                </h2>


                                <div class="row g-3">

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

                                        <label
                                            class="form-label fw-semibold"
                                        >
                                            Mã khuyến mãi *
                                        </label>

                                        <input
                                            type="text"
                                            name="code"
                                            class="form-control text-uppercase"
                                            placeholder="PET10"
                                            required
                                        >

                                    </div>


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

                                        <label
                                            class="form-label fw-semibold"
                                        >
                                            Loại giảm *
                                        </label>

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

                                            <option value="percent">
                                                Phần trăm (%)
                                            </option>

                                            <option value="fixed">
                                                Số tiền cố định
                                            </option>

                                        </select>

                                    </div>


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

                                        <label class="form-label">
                                            Giá trị giảm *
                                        </label>

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

                                    </div>


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

                                        <label class="form-label">
                                            Giảm tối đa
                                        </label>

                                        <input
                                            type="number"
                                            name="max_discount"
                                            class="form-control"
                                            min="0"
                                            placeholder="Để trống nếu không giới hạn"
                                        >

                                    </div>


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

                                        <label class="form-label">
                                            Giá trị đơn tối thiểu
                                        </label>

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

                                    </div>


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

                                        <label class="form-label">
                                            Giới hạn lượt sử dụng
                                        </label>

                                        <input
                                            type="number"
                                            name="usage_limit"
                                            class="form-control"
                                            min="1"
                                            placeholder="Không giới hạn"
                                        >

                                    </div>

                                </div>

                            </section>


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

                                <h2>
                                    Thời gian áp dụng
                                </h2>


                                <div class="row g-3">

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

                                        <label class="form-label">
                                            Bắt đầu *
                                        </label>

                                        <input
                                            type="datetime-local"
                                            name="start_at"
                                            class="form-control"
                                            required
                                        >

                                    </div>


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

                                        <label class="form-label">
                                            Kết thúc *
                                        </label>

                                        <input
                                            type="datetime-local"
                                            name="end_at"
                                            class="form-control"
                                            required
                                        >

                                    </div>

                                </div>

                            </section>

                        </div>


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

                            <section class="owner-card">

                                <h2>
                                    Trạng thái
                                </h2>

                                <div class="form-check">

                                    <input
                                        class="form-check-input"
                                        type="checkbox"
                                        name="is_active"
                                        id="promotionActive"
                                        checked
                                    >

                                    <label
                                        class="form-check-label"
                                        for="promotionActive"
                                    >
                                        Kích hoạt mã
                                    </label>

                                </div>

                            </section>


                            <button
                                type="submit"
                                class="btn btn-primary btn-lg w-100 mt-4"
                            >
                                Tạo khuyến mãi
                            </button>

                        </div>

                    </div>

                </form>

            </div>

        </div>

    </div>
<div class="col-12">

    <label class="form-label">
        Tên chương trình *
    </label>

    <input
        type="text"
        name="name"
        class="form-control"
        placeholder="Ví dụ: Giảm 10% cuối tuần"
        required
    >

</div>

<div class="col-12">

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

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

</div>
</main>


<?php

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

?>