<!doctype html>
<html lang="en">
    <head>
        <?php $title = "Create/Edit Order"; include('./partials/title-meta.php'); ?> <?php include('./partials/head-css.php'); ?>
    </head>

    <body>
        <!-- Begin page -->
        <div class="wrapper">
            <?php include('./partials/topbar.php'); ?> <?php include('./partials/sidenav.php'); ?>

            <!-- ============================================================== -->
            <!-- Start Main Content -->
            <!-- ============================================================== -->

            <div class="content-page">
                <div class="container-fluid">
                    <?php $subtitle = "Ecommerce"; $title = "Add/Edit Order"; include('./partials/page-title.php'); ?>

                    <div class="container-xxl">
                        <div class="row">
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h4 class="card-title mb-0">Create Order</h4>
                                    </div>
                                    <div class="card-body">
                                        <form id="orderForm">
                                            <div class="row g-3">
                                                <!-- Order ID -->
                                                <div class="col-md-6">
                                                    <label class="form-label">Order ID</label>
                                                    <input type="text" class="form-control" id="orderId" placeholder="#WB20100" disabled />
                                                </div>

                                                <!-- Order Date -->
                                                <div class="col-md-6">
                                                    <label class="form-label">Order Date</label>
                                                    <input type="datetime-local" data-provider="flatpickr" data-altFormat="F j, Y" class="form-control flatpickr-input" id="orderDate" required />
                                                </div>

                                                <!-- Customer Name -->
                                                <div class="col-md-6">
                                                    <label class="form-label">Customer Name</label>
                                                    <input type="text" class="form-control" id="customerName" placeholder="Mason Carter" required />
                                                </div>

                                                <!-- Customer Email -->
                                                <div class="col-md-6">
                                                    <label class="form-label">Customer Email</label>
                                                    <input type="email" class="form-control" id="customerEmail" placeholder="mason.carter@shopmail.com" required />
                                                </div>

                                                <!-- Product Name -->
                                                <div class="col-md-6">
                                                    <label class="form-label">Product Name</label>
                                                    <select class="form-select" id="productName" required>
                                                        <option value="" selected disabled>Select Product</option>
                                                        <option value="iPhone 15 Pro">iPhone 15 Pro</option>
                                                        <option value="MacBook Air M3">MacBook Air M3</option>
                                                        <option value="iPad Pro 13″ (M4)">iPad Pro 13″ (M4)</option>
                                                        <option value="Apple Watch Ultra 2">Apple Watch Ultra 2</option>
                                                        <option value="AirPods Pro (2nd Gen)">AirPods Pro (2nd Gen)</option>
                                                    </select>
                                                </div>

                                                <!-- Quantity -->
                                                <div class="col-md-6">
                                                    <label class="form-label">Quantity</label>
                                                    <input type="number" class="form-control" id="quantity" min="1" value="1" required />
                                                </div>

                                                <!-- Amount -->
                                                <div class="col-md-6">
                                                    <label class="form-label">Amount ($)</label>
                                                    <input type="number" step="0.01" class="form-control" id="amount" placeholder="129.45" required />
                                                </div>

                                                <!-- Payment Status -->
                                                <div class="col-md-6">
                                                    <label class="form-label">Payment Status</label>
                                                    <select class="form-select" id="paymentStatus" required>
                                                        <option value="Paid">Paid</option>
                                                        <option value="Pending">Pending</option>
                                                        <option value="Failed">Failed</option>
                                                    </select>
                                                </div>

                                                <!-- Order Status -->
                                                <div class="col-md-6">
                                                    <label class="form-label">Order Status</label>
                                                    <select class="form-select" id="orderStatus" required>
                                                        <option value="Ordered">Ordered</option>
                                                        <option value="Processing">Processing</option>
                                                        <option value="Delivered">Delivered</option>
                                                        <option value="Cancelled">Cancelled</option>
                                                        <option value="Returned">Returned</option>
                                                    </select>
                                                </div>

                                                <!-- Payment Method -->
                                                <div class="col-md-6">
                                                    <label class="form-label">Payment Method</label>
                                                    <select class="form-select" id="paymentMethod" required>
                                                        <option value="Visa">Visa</option>
                                                        <option value="Mastercard">Mastercard</option>
                                                        <option value="PayPal">PayPal</option>
                                                        <option value="COD">Cash on Delivery</option>
                                                    </select>
                                                </div>

                                                <!-- Card Number -->
                                                <div class="col-md-6">
                                                    <label class="form-label">Card Last 4 Digits</label>
                                                    <input type="text" maxlength="4" class="form-control" id="cardNumber" placeholder="7832" />
                                                </div>

                                                <!-- Action Buttons -->
                                                <div class="col-12 text-center">
                                                    <button type="button" class="btn btn-light me-2" data-bs-dismiss="modal">Cancel</button>
                                                    <button type="submit" class="btn btn-primary">Save Order</button>
                                                </div>
                                            </div>
                                            <!-- end row -->
                                        </form>
                                    </div>
                                    <!-- end card-body-->
                                </div>
                                <!-- end card-->
                            </div>
                            <!-- end col-->
                        </div>
                        <!-- end row-->
                    </div>
                    <!-- end container -->
                </div>
                <!-- container -->

                <?php include('./partials/footer.php'); ?>
            </div>

            <!-- ============================================================== -->
            <!-- End of Main Content -->
            <!-- ============================================================== -->
        </div>
        <!-- END wrapper -->

        <?php include('./partials/customizer.php'); ?> <?php include('./partials/footer-scripts.php'); ?>
    </body>
</html>
