<!-- Main content -->
<div class="content-wrapper">

    <!-- Inner content -->
    <div class="content-inner">

        <!-- card card-header -->
        <div class="card card-header mb-2">

            <div class="row pb-2">
                <div class="col-xl-9 col-lg-9">
                    <h4 class="page-title fw-bold col-md-6 mb-0">Stripe Products & Prices</h4>
                </div>
                <div class="col-xl-3 col-lg-3 col-md-6 btn-group">
                    <button class="btn btn-indigo text-uppercase btnAddProductPrice" type="button"> <i class="ph-plus me-1"></i> Add Product Price</button>
                </div>
            </div>

        </div>
        <!-- /card card-header -->


        <!-- Content area -->
        <!-- <div class="content"> -->

        <!-- Card layout -->
        <div class="card card-header mt-1">

            <table class="table table-sm table-hover stripe-product-price-table">
                <thead>
                    <tr class="table-dark text-uppercase">
                        <th>#</th>
                        <th>Created At</th>
                        <th>Product ID</th>
                        <th>Price ID</th>
                        <th>Name</th>
                        <th>Recurring</th>
                        <th>Description</th>
                        <th>Features</th>
                    </tr>
                </thead>
            </table>

        </div>
        <!-- /Card layout -->


        <!-- </div> -->
        <!-- /content area -->

    </div>
    <!-- /inner content -->

</div>
<!-- /main content -->


<!-- PRODUCT PRICE MODAL -->
<div id="product-price-modal" class="modal" tabindex="-1">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title span-modal-title">Add Product Price</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <form action="" id="frmAddProductPrice" autocomplete="off" method="POST">

                <div class="modal-body">

                    <div class="row">

                        <div class="col-lg-12 col-md-12 mb-3">
                            <label class="form-label">Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control form-control-lg" name="plan_name" id="plan_name" required autocomplete="off" placeholder="Enter product name">
                        </div>

                        <div class="col-lg-12 col-md-12 mb-3">
                            <label class="form-label">Price <span class="text-danger">*</span></label>
                            <input type="number" min="1" max="6" step="1" class="form-control form-control-lg" name="plan_price" id="plan_price" required autocomplete="off" placeholder="Enter product price">
                        </div>

                        <div class="col-lg-12 col-md-12 mb-3">
                            <label class="form-label">Recurring <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <select class="form-control form-control-lg select2" name="plan_recurring" id="plan_recurring" data-minimum-results-for-search="Infinity">
                                    <option value="Yes" selected>Yes</option>
                                    <option value="No">No</option>
                                </select>
                            </div>
                        </div>

                        <div class="col-lg-12 col-md-12 mb-3">
                            <label class="form-label">Interval <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <select class="form-control form-control-lg select2" name="plan_interval" id="plan_interval" data-minimum-results-for-search="Infinity">
                                    <option value="none">None</option>
                                    <option value="day">Day</option>
                                    <option value="week">Week</option>
                                    <option value="month" selected>Month</option>
                                    <option value="year">Year</option>
                                </select>
                            </div>
                        </div>

                        <div class="col-lg-12 col-md-12 mb-3">
                            <label class="form-label">Interval Count <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <select class="form-control form-control-lg select2" name="plan_interval_count" id="plan_interval_count" data-minimum-results-for-search="Infinity">
                                    <option value="1" selected>1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                    <option value="6">6</option>
                                </select>
                            </div>
                        </div>

                        <div class="col-lg-12 col-md-12 mb-3">
                            <label class="form-label">Description</label>
                            <input type="text" class="form-control form-control-lg" name="plan_description" id="plan_description" required autocomplete="off" placeholder="Enter product description">
                        </div>

                        <div class="col-lg-12 col-md-12 mb-3">
                            <label class="form-label">Features</label>
                            <textarea rows="4" class="form-control" name="plan_features" id="plan_features" placeholder="Enter product features (comma separated)"></textarea>
                        </div>

                    </div>

                </div>

            </form>

            <div class="modal-footer">
                <button type="button" class="btn btn-indigo text-uppercase btnSave"><i class="ph-floppy-disk-back me-1"></i> <?= $translate["save"]; ?></button>
                <button type="button" class="btn btn-light text-uppercase" data-bs-dismiss="modal"><i class="mi-close me-1"></i> <?= $translate["close"]; ?></button>
            </div>
        </div>
    </div>
</div>
<!-- CATEGORY MODAL -->


<script src="scripts/stripe-management.js?v=<?= md5(time()) ?>"></script>