{% extends "admin/dashboard.html" %}
{% load static %}

{% block title %}
    <title>Admin | Coupon Create</title>
{% endblock title %}

{% block content %}
<div class="page-content">
    <!-- Start Container Fluid -->
    <div class="container-xxl">
        <form action="" method="post">
            <div class="row">
                {% csrf_token %}
                <div class="col-lg-5">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">Coupon Status</h4>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-lg-3">
                                    <div class="d-flex gap-2 align-items-center">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="status" id="status1" value="status1">
                                            <label class="form-check-label" for="status1"> Active </label>
                                        </div>
                                    </div>
                                </div>
                        
                                <div class="col-lg-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="status" id="status2" value="status2" checked="">
                                        <label class="form-check-label" for="status2"> Inactive </label>
                                    </div>
                                </div>
                            </div>
                            <h4 class="card-title mb-3 mt-4">Coupons Types</h4>
                            <div class="row mb-3">
                                {% comment %} <div class="col-lg-4">
                                    <div class="d-flex gap-2 align-items-center">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="coupons_types" id="coupons_types1" value="coupons_types1" checked="">
                                            <label class="form-check-label" for="coupons_types1"> Free Shipping </label>
                                        </div>
                                    </div>
                                </div> {% endcomment %}

                                <div class="col-lg-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="coupons_types" id="coupons_types3" value="coupons_types3" checked="">
                                        <label class="form-check-label" for="coupons_types3"> Fixed Amount </label>
                                    </div>
                                </div>
                                <div class="col-lg-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="coupons_types" id="coupons_types2" value="coupons_types2">
                                        <label class="form-check-label" for="coupons_types2"> Percentage </label>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">Date Schedule</h4>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label for="start-date" class="form-label text-dark">Start Date</label>
                                <input type="text" id="start-date" class="form-control flatpickr-input active" name="start-date" placeholder="yyyy-mm-dd" readonly="readonly">
                            </div>
                        
                            <div class="mb-3">
                                <label for="end-date" class="form-label text-dark">End Date</label>
                                <input type="text" id="end-date" class="form-control flatpickr-input active" name="end-date" placeholder="yyyy-mm-dd" readonly="readonly">
                            </div>

                        </div>
                    </div>
                </div>

                <div class="col-lg-7">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">Coupon Information</h4>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="mb-3">
                                        <label for="coupons-code" class="form-label">Coupons Code</label>
                                        <input type="text" id="coupons-code" name="coupons-code" class="form-control" placeholder="Code enter">
                                    </div>
                                </div>

                                <div class="col-lg-12">
                                    <div class="mb-3">
                                        <label for="discount-value" class="form-label">Discount Value</label>
                                        <input type="text" id="discount-value" name="discount-value" class="form-control" placeholder="Value Enter Discount Value">
                                    </div>
                                </div>

                                <div class="col-lg-12">
                                    <div class="mb-3">
                                        <label for="min_order" class="form-label">Min Order Amount</label>
                                        <input type="text" id="min_order" name="min_order" class="form-control" placeholder="Value Enter Min Order Amount">
                                    </div>
                                </div>

                                <div class="col-lg-12">
                                    <div class="mb-4">
                                        <label for="max_order" class="form-label">Max Order Amount</label>
                                        <input type="text" id="max_order" name="max_order" class="form-control" placeholder="Value Enter Max Order Amount">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer border-top">
                            <button type="submit" class="btn btn-primary fw-bold">Create</button>
                            <a href="{% url "coupons_list" %}" class="btn btn-outline-secondary fw-bold">Cancel</a>
                        </div>

                    </div>
                </div>
            </div>
        <form>
    </div>

    <footer class="footer">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12 text-center">
                    <script>document.write(new Date().getFullYear())</script> &copy; Aquarium E-Commerce. Developed by Geega Technologies.
                </div>
            </div>
        </div>
    </footer>
</div>
{% endblock content %}