<?php

$pageTitle =
    'Thanh toán - PET SPA';

$pageDescription =
    'Hoàn tất đơn hàng tại PET SPA.';

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

    <section class="section">

        <div class="container">

            <nav aria-label="breadcrumb">

                <ol class="breadcrumb">

                    <li class="breadcrumb-item">

                        <a href="<?= BASE_URL ?>/">
                            Trang chủ
                        </a>

                    </li>

                    <li class="breadcrumb-item">

                        <a href="<?= BASE_URL ?>/?url=cart">
                            Giỏ hàng
                        </a>

                    </li>

                    <li class="breadcrumb-item active">
                        Thanh toán
                    </li>

                </ol>

            </nav>


            <h1 class="fw-bold mb-4">
                Thanh toán
            </h1>


            <?php if ($errorMessage): ?>

                <div class="alert alert-danger">

                    <?= htmlspecialchars(
                        $errorMessage
                    ) ?>

                </div>

            <?php endif; ?>


            <form
                action="<?= BASE_URL ?>/?url=checkout/place-order"
                method="POST"
            >

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


                <div class="row g-4">

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

                    <div class="col-lg-7">

                        <!-- ADDRESS -->

                        <section class="checkout-card">

                            <h2 class="checkout-title">

                                <i
                                    class="bi bi-geo-alt me-2"
                                ></i>

                                Thông tin giao hàng

                            </h2>


                            <?php if (!empty($addresses)): ?>

                                <div class="mb-4">

                                    <label
                                        class="form-label fw-semibold"
                                    >
                                        Địa chỉ đã lưu
                                    </label>


                                    <select
                                        name="address_id"
                                        id="savedAddress"
                                        class="form-select"
                                    >

                                        <option value="0">

                                            + Sử dụng địa chỉ mới

                                        </option>


                                        <?php foreach (
                                            $addresses
                                            as $address
                                        ): ?>

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

                                                <?= htmlspecialchars(
                                                    $address[
                                                        'recipient_name'
                                                    ]
                                                ) ?>

                                                -

                                                <?= htmlspecialchars(
                                                    $address[
                                                        'address_line'
                                                    ]
                                                ) ?>

                                                <?= (int)
                                                    $address[
                                                        'is_default'
                                                    ] === 1
                                                    ? ' (Mặc định)'
                                                    : ''
                                                ?>

                                            </option>

                                        <?php endforeach; ?>

                                    </select>

                                </div>

                            <?php endif; ?>


                            <div id="newAddressFields">

                                <div class="row g-3">

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

                                        <label
                                            class="form-label"
                                        >
                                            Người nhận *
                                        </label>

                                        <input
                                            type="text"
                                            name="recipient_name"
                                            class="form-control"
                                            value="<?= htmlspecialchars(
                                                $_SESSION[
                                                    'user'
                                                ][
                                                    'full_name'
                                                ]
                                                ?? ''
                                            ) ?>"
                                        >

                                    </div>


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

                                        <label
                                            class="form-label"
                                        >
                                            Số điện thoại *
                                        </label>

                                        <input
                                            type="text"
                                            name="phone"
                                            class="form-control"
                                            value="<?= htmlspecialchars(
                                                $_SESSION[
                                                    'user'
                                                ][
                                                    'phone'
                                                ]
                                                ?? ''
                                            ) ?>"
                                        >

                                    </div>


                                    <div class="col-12">

                                        <label
                                            class="form-label"
                                        >
                                            Số nhà, tên đường *
                                        </label>

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

                                    </div>


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

                                        <label class="form-label">
                                            Phường / Xã
                                        </label>

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

                                    </div>


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

                                        <label class="form-label">
                                            Quận / Huyện
                                        </label>

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

                                    </div>


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

                                        <label class="form-label">
                                            Tỉnh / Thành phố
                                        </label>

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

                                    </div>

                                </div>


                                <div class="form-check mt-3">

                                    <input
                                        class="form-check-input"
                                        type="checkbox"
                                        name="save_address"
                                        id="saveAddress"
                                    >

                                    <label
                                        class="form-check-label"
                                        for="saveAddress"
                                    >
                                        Lưu địa chỉ này
                                    </label>

                                </div>


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

                                    <input
                                        class="form-check-input"
                                        type="checkbox"
                                        name="is_default"
                                        id="defaultAddress"
                                    >

                                    <label
                                        class="form-check-label"
                                        for="defaultAddress"
                                    >
                                        Đặt làm địa chỉ mặc định
                                    </label>

                                </div>

                            </div>

                        </section>


                        <!-- PAYMENT -->

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

                            <h2 class="checkout-title">

                                <i
                                    class="bi bi-credit-card me-2"
                                ></i>

                                Phương thức thanh toán

                            </h2>


                            <label class="payment-option">

                                <input
                                    type="radio"
                                    name="payment_method"
                                    value="cod"
                                    checked
                                >

                                <div>

                                    <strong>
                                        Thanh toán khi nhận hàng
                                    </strong>

                                    <small>
                                        COD
                                    </small>

                                </div>

                            </label>


                            <label class="payment-option">

                                <input
                                    type="radio"
                                    name="payment_method"
                                    value="bank_transfer"
                                >

                                <div>

                                    <strong>
                                        Chuyển khoản ngân hàng
                                    </strong>

                                    <small>
                                        Thông tin chuyển khoản sẽ hiển thị sau khi đặt đơn.
                                    </small>

                                </div>

                            </label>

                        </section>


                        <!-- NOTE -->

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

                            <h2 class="checkout-title">
                                Ghi chú
                            </h2>

                            <textarea
                                name="customer_note"
                                class="form-control"
                                rows="4"
                                placeholder="Ví dụ: giao hàng giờ hành chính..."
                            ></textarea>

                        </section>

                    </div>


                    <!-- ======================================
                         ORDER SUMMARY
                    ======================================= -->

                    <div class="col-lg-5">

                        <aside class="checkout-summary">

                            <h2 class="checkout-title">
                                Đơn hàng của bạn
                            </h2>


                            <div class="checkout-products">

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

                                    <div
                                        class="checkout-product"
                                    >

                                        <div>

                                            <strong>

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

                                            </strong>

                                            <small>

                                                ×
                                                <?= (int)
                                                    $item['quantity']
                                                ?>

                                            </small>

                                        </div>


                                        <strong>

                                            <?= number_format(
                                                (float)
                                                $item[
                                                    'line_total'
                                                ],
                                                0,
                                                ',',
                                                '.'
                                            ) ?>đ

                                        </strong>

                                    </div>

                                <?php endforeach; ?>

                            </div>


                            <hr>


                            <div class="mb-3">

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

                                <input
                                    type="text"
                                    name="promotion_code"
                                    class="form-control text-uppercase"
                                    placeholder="Ví dụ: PET10"
                                >

                                <small class="text-muted">

                                    Mã sẽ được kiểm tra khi đặt hàng.

                                </small>

                            </div>


                            <hr>


                            <div class="checkout-total-row">

                                <span>
                                    Tạm tính
                                </span>

                                <strong>

                                    <?= number_format(
                                        $subtotal,
                                        0,
                                        ',',
                                        '.'
                                    ) ?>đ

                                </strong>

                            </div>


                            <div class="checkout-total-row">

                                <span>
                                    Phí giao hàng
                                </span>

                                <span>
                                    Tính khi xác nhận
                                </span>

                            </div>


                            <p class="small text-muted mt-3">

                                Tổng tiền cuối cùng được tính lại
                                tại máy chủ dựa trên giá, khuyến mãi
                                và phí giao hàng hiện tại.

                            </p>


                            <button
                                type="submit"
                                class="btn btn-primary btn-lg w-100 mt-3"
                            >

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

                                Đặt hàng

                            </button>


                            <a
                                href="<?= BASE_URL ?>/?url=cart"
                                class="btn btn-light w-100 mt-2"
                            >

                                Quay lại giỏ hàng

                            </a>

                        </aside>

                    </div>

                </div>

            </form>

        </div>

    </section>

</main>


<script>

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

        const select =
            document.querySelector(
                '#savedAddress'
            );

        const fields =
            document.querySelector(
                '#newAddressFields'
            );

        if (!select || !fields) {
            return;
        }

        function updateAddressForm() {

            if (
                parseInt(
                    select.value,
                    10
                ) > 0
            ) {

                fields.style.display =
                    'none';

            } else {

                fields.style.display =
                    '';
            }
        }

        select.addEventListener(
            'change',
            updateAddressForm
        );

        updateAddressForm();
    }
);

</script>


<?php

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

?>