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

    <input type="hidden" id="pos_tax" value="<?= $posInfo['pos_tax']; ?>">
    <input type="hidden" id="pos_legal_tipping" value="<?= $posInfo['pos_legal_tipping']; ?>">
    <input type="hidden" id="txtCurrentDateTime" value="<?= $currentDateTimeByZone; ?>" readonly>
    <input type="hidden" id="customerCashBack" value="0">
    <input type="hidden" id="pos_cash_back_percentage" value="<?= $posInfo['pos_cash_back_percentage']; ?>">
    <input type="hidden" id="pos_cash_back_status" value="<?= $posInfo['pos_cash_back_status']; ?>">
    <input type="hidden" id="totalCashBack" value="0">
    <input type="hidden" id="previous_pay_det_cashback" value="0">
    <input type="hidden" id="sale_status" value="Enabled">

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

        <form action="" id="frmSubmitOrder">

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

            <input type="hidden" id="sale_id" name="sale_id" value="">
            <input type="hidden" id="sale_ent_id" name="sale_ent_id" value="<?= $_SESSION["user_ent_id"]; ?>">
            <input type="hidden" id="txt_ord_det_code" name="txt_ord_det_code" value="">
            <input type="hidden" id="sale_sub_total" name="sale_sub_total" value="0">
            <input type="hidden" id="sale_tax_percent" name="sale_tax_percent" value="0">
            <input type="hidden" id="sale_tax_value" name="sale_tax_value" value="0">
            <input type="hidden" id="sale_tax_law_percent" name="sale_tax_law_percent" value="0">
            <input type="hidden" id="sale_tax_law_value" name="sale_tax_law_value" value="0">
            <input type="hidden" id="sale_discount_percent" name="sale_discount_percent" value="0">
            <input type="hidden" id="sale_discount_value" name="sale_discount_value" value="0">
            <input type="hidden" id="sale_debt" name="sale_debt" value="0">
            <input type="hidden" id="sale_amount_final" name="sale_amount_final" value="0">
            <input type="hidden" id="prevDiscountPercent" value="0">
            <input type="hidden" id="prevDiscountValue" value="0">
            <input type="hidden" id="prevCurrentDebt" value="0">
            <input type="hidden" id="sale_cus_fiscal_number" value="">
            <input type="hidden" id="orderSumQty" value="0">

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

                    <div class="col-xl-2 col-lg-6 col-md-6 col-sm-12 mb-2 divBranchSelect">
                        <label class="form-label fw-medium text-uppercase"><?= $translate["branch"] ?></label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="ph ph-storefront"></i></span>
                            <select class="form-control select2 posSelector" name="sale_pos_id" id="sale_pos_id" data-width="1%">
                                <option value="">-- <?= $translate["select"] ?> --</option>
                            </select>
                        </div>
                    </div>

                    <div class="col-xl-2 col-lg-6 col-md-6 col-sm-12 mb-2 notAllowed divBranchDescription" style="display: none;">
                        <label class="form-label fw-medium text-uppercase"><?= $translate["branch"] ?></label>
                        <div class="input-group">
                            <span class="input-group-text form-control form-control-lg pos_description"></span>
                        </div>
                    </div>

                    <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 mb-2">
                        <label class="form-label fw-medium text-uppercase"><?= $translate["customer"] ?></label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="ph-user"></i></span>
                            <select class="form-control select2" name="sale_cus_id" id="sale_cus_id" data-width="1%">
                                <option value="">-- <?= $translate["select"] ?> --</option>
                            </select>
                            <button type="button" class="btn btn-light warning-on-hover" onclick="jsAddCustomer();"><i class="ph-plus"></i></button>
                            <button type="button" class="btn btn-light warning-on-hover" onclick="jsEditCustomer();"><i class="ph-pencil-simple-line"></i></button>
                        </div>
                    </div>

                    <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-2">
                        <label class="form-label fw-medium text-uppercase"><?= $translate["sale_type"] ?></label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="ph ph-stack"></i></span>
                            <select class="form-control select2" name="sale_type" id="sale_type" data-width="1%">
                                <option value="">-- <?= $translate["select"] ?> --</option>
                            </select>
                        </div>
                    </div>

                    <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-2 divTableSelect" style="display: none;">
                        <label class="form-label fw-medium text-uppercase"><?= $translate["table"] ?></label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="ph ph-grid-four"></i></span>
                            <select class="form-control select2" name="sale_table_id" id="sale_table_id" data-width="1%">
                            </select>
                        </div>
                    </div>

                    <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-2 divCostDelivery" style="display: none;">
                        <label class="form-label fw-medium text-uppercase"><?= $translate["delivery"] ?></label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="ph ph-truck"></i></span>
                            <input type="number" step="1" class="form-control form-control-lg" name="sale_cost_delivery" id="sale_cost_delivery" value="0">
                        </div>
                    </div>

                    <hr class="border-top mb-2">

                    <div class="col-xl-6 col-lg-12 col-md-12 col-sm-12 mb-2">
                        <div class="input-group">
                            <span class="input-group-text"><i class="ph ph-barcode"></i></span>
                            <input type="text" class="form-control form-control-lg" id="inputProductSearch" placeholder="<?= $translate['scan_or_type_the_product_name'] ?>" autocomplete="off" disabled>
                            <!-- <button class="btn btn-light btnSearchProduct" type="button" disabled><i class="ph-magnifying-glass"></i></button> -->
                        </div>
                    </div>

                    <div class="col-xl-6 col-lg-12 col-md-12 col-sm-12">
                        <div class="w-full btn-group gap-1">
                            <button type="button" class="btn btn-indigo btnShowNewProductOrder btnNewProductOrder"><i class="ph-circles-four me-2"></i><?= $translate["products_services"] ?></button>
                            <button type="button" class="btn btn-warning btnReloadNewOrder hide" onclick="window.location ='sell';"><i class="ph-arrow-clockwise me-2"></i> <?= $translate["new_sale"] ?></button>
                        </div>
                    </div>


                </div>
            </div>

        </form>


        <div class="card card-header mt-1 posProductListContainer" style="display: none;">
            <div class="posProductLoadingStatus text-center fs-5"></div>
            <div class="product-grid-container">

                <!-- <div class="product-card" onclick=''>
                    <a type="button" href="javascript:void(0)">
                        <div class="stock-info top-left bg-opacity-10 bg-success text-success">50.00</div>
                        <img src="assets/images/no-image.png" alt="food" class="w-100px h-100px rounded-pill mt-3">
                        <div class="product-info">
                            <h2 class="product-title">Duck Salad</h2>
                            <p class="product-card-price text-primary">$ 7,500.00</p>
                            <p class="product-card-price text-primary">US$ 127.12</p>
                        </div>
                    </a>
                </div> -->

            </div>
        </div>
        <!-- /Products container -->

        <div class="col-lg-12 col-md-12 text-center">
            <button type="button" class="btn btn-light btnLoadMoreProducts warning-on-hover" style="display: none;"><i class="ph-arrows-clockwise me-1"></i> <?= $translate['show_more_products'] ?></button>

        </div>

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

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


<!-- Right sidebar -->
<div class="sidebar sidebar-end sidebar-expand-lg">

    <!-- Sidebar search -->
    <div class="sidebar-section mb-1">
        <div class="collapse show" id="sidebar_end_search">
            <div class="sidebar-section-body bg-transparent border-bottom">

                <div class="input-group">
                    <button class="btn btn-indigo sidebar-mobile-end-toggle btn-icon d-lg-none" type="button"><i class="ph-arrow-left"></i></button>
                    <input type="number" class="form-control form-control-lg" id="inputLoadSaleById" placeholder="<?= $translate['enter_sale_number'] ?>" autocomplete="off">
                    <button class="btn btn-warning btn-icon btnSearchOrder" type="button"><i class="ph-magnifying-glass"></i></button>
                </div>

            </div>
        </div>
    </div>
    <!-- /sidebar search -->

    <div class="overflow-y-auto h-full p-2">
        <form action="" id="frmSubmitOrderDetail">
            <div class="products-cart-list">

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

    <!-- Total -->
    <div class="border-top">

        <div class="p-2">

            <div class="flex justify-between text-uppercase mb-1 text-xs">
                <div class="text"><?= $translate["subtotal"] ?></div>
                <div class="saleSubTotal">0.00</div>
            </div>

            <div class="flex justify-between text-uppercase mb-1 text-xs">
                <div class="text"><?= $translate["discount"] ?> <span class="spanDiscountPercent">(-0%)</span></div>
                <div class="saleDiscount">0.00</div>
            </div>

            <div class="flex justify-between text-uppercase fw-semibold mb-1 text-sm">
                <div class="text-uppercase"><?= $translate["total"] ?></div>
                <div class="saleSubTotalFinal">0.00</div>
            </div>

            <div class="flex justify-between text-uppercase border-top divTax pt-2 mb-1 text-xs">
                <div class="text"><?= $translate["tax"] ?> <span class="spanTaxPercent">(0.00%)</span></div>
                <div class="spanTaxValue">0.00</div>
            </div>

            <div class="flex justify-between text-uppercase divLegalTipping mb-1 text-xs" style="display: none;">
                <div class="text"><?= $translate["tipping"] ?> <span class="spanLawPercent">(0.00%)</span></div>
                <div class="spanLegalTippingValue">0.00</div>
            </div>

            <div class="flex justify-between text-uppercase divTotalDelivery mb-1 text-xs" style="display: none;">
                <div class="text-uppercase"><?= $translate["delivery"] ?></div>
                <div class="saleCostDelivery">0.00</div>
            </div>

            <div class="flex justify-between text-uppercase border-top pt-2 fs-3 fw-semibold">
                <div class="text-uppercase"><?= $translate["to_pay"] ?> -></div>
                <div class="saleTotalFinal">0.00</div>
            </div>

        </div>

        <div class="w-full btn-group gap-1 divBtnOrderControl">
            <button type="button" class="btn btn-indigo text-uppercase fs-md flex-column btnSaveOrder" style="border-radius: 0;"><i class="ph-check-circle"></i> <?= $translate["save"] ?></button>
            <?php
            if ($_SESSION["user_profile"] !== "Waiter") { ?>

                <button type="button" class="btn btn-warning fs-md flex-column text-uppercase btnDiscount" style="border-radius: 0;"><i class="ph-tag"></i> <?= $translate["discount"] ?></button>

                <button type="button" class="btn btn-success fs-md flex-column text-uppercase btnShowPayment" style="border-radius: 0;"><i class="ph-currency-dollar"></i> <?= $translate["payments"] ?></button>
            <?php } ?>
        </div>

    </div>

</div>
<!-- /right sidebar -->


<!-- DISCOUNT MODAL -->
<div id="myModalDiscount" class="modal" data-bs-keyboard="false" data-bs-backdrop="static" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">

            <div class="modal-header">
                <input type="hidden" id="discountFormat" value="Amount">
                <h5 class="modal-title"><?= $translate["add_discount"]; ?></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">

                <div class="d-flex gap-2 space-between">
                    <div class="d-flex gap-1 space-between">
                        <button type="button" class="btn btn-warning btnDiscAmount" data="0.00"><i class="ph-currency-dollar fs-3"></i></button>
                        <button type="button" class="btn btn-light btnDiscPercent" data="0.00"><i class="ph-percent fs-3"></i></button>
                    </div>
                    <input type="number" step="0.01" class="form-control form-control-lg" id="sale_discount_enter_percent_value" value="0" placeholder="0.00">
                </div>

            </div>

            <div class="modal-footer btn-group">
                <button type="button" class="btn btn-indigo text-uppercase btnConfirmDiscount"><i class="ph-check-circle me-1"></i> <?= $translate["confirm"]; ?></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>


<!-- PAYMENT HISTORY MODAL -->
<div class="modal fade" id="myModalPayment">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <!-- 
            <div class="modal-header">
                <h5 class="modal-title"><?= $translate["payments_history"]; ?></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div> -->

            <div class="modal-body">

                <form action="" id="frmSubmitPaymentDetail">

                    <div class="col-lg-12 col-md-12 col-sm-12">
                        <div class="table-responsive">

                            <table class="table table-hover table-sm">
                                <thead class="text-uppercase">

                                    <tr class="table-light table-sm text-center fs-lg">
                                        <th colspan="3"><?= $translate["total"]; ?> &nbsp;&nbsp; <span id="span_modal_final_total">0.00</span></th>
                                    </tr>

                                    <tr class="table-primary trCashBackinfo" style="display: none;">
                                        <td colspan="2"><?= $translate["available_cash_back"]; ?>: &nbsp;&nbsp; <span id="span_available_cash_back">0.00</span></td>
                                        <td colspan="1"><?= $translate["new_cash_back"]; ?>: &nbsp;&nbsp; <span id="span_modal_new_cash_back">0.00</span></td>
                                    </tr>

                                    <tr class="text-center fs-6">
                                        <th width="33.33%" class="bg-indigo text-white"><?= $translate["paid"]; ?></th>
                                        <th width="33.33%" class="bg-success text-white"><?= $translate["charged"]; ?></th>
                                        <th width="33.33%" class="thDebtChangeRow bg-danger text-white"><input type="hidden" id="txtCurrentDebtChange" value="0.00"> <span id="spanDebtChangeText"> <?= $translate["debt"]; ?></span></th>
                                    </tr>

                                    <tr class="table-light text-center fs-5">
                                        <td width="33.33%"><span id="spanModalTotalPaid">0.00</span></td>
                                        <td width="33.33%"><span id="spanModalTotalIncome">0.00</span></td>
                                        <td width="33.33%"><span id="spanDebtChangeValue">0.00</span></td>
                                    </tr>
                                </thead>
                            </table>

                        </div>
                    </div>


                    <div class="row mt-1 mb-3 divGroupAddPayment">


                        <?php if ($posInfo['pos_country'] == "DO") { ?>

                            <div class="col-lg-4 col-md-6 col-sm-12 mt-2">
                                <label class="form-label fw-medium text-uppercase"><?= $translate["tax_receipt"] ?></label>
                                <div class="input-group">
                                    <select class="form-control select2" name="sale_ncf_type" id="sale_ncf_type" data-width="1%">
                                        <option value="">-- <?= $translate["select"] ?> --</option>
                                    </select>
                                    <button type="button" class="btn btn-light warning-on-hover" onclick="jsEditCustomer();"><i class="ph-pencil-simple-line"></i></button>
                                </div>
                            </div>

                        <?php } else { ?>
                            <input type="hidden" name="sale_ncf_type" id="sale_ncf_type" value="">
                        <?php } ?>

                        <div class="col-lg-4 col-md-6 col-sm-12 mt-2">
                            <label class="form-label text-uppercase"><?= $translate["payment_type"]; ?></label>
                            <select class="form-control form-control-lg select2 cbo_payment_type" id="cbo_payment_type" data-minimum-results-for-search="Infinity">
                            </select>
                        </div>

                        <div class="col-lg-4 col-md-6 col-sm-12 mt-2">
                            <label class="form-label text-uppercase"><?= $translate["amount_paid"]; ?></label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="ph-currency-dollar"></i></span>
                                <input type="number" class="form-control form-control-lg" step="0.01" id="inp_paid_value" required value="0" />
                            </div>
                        </div>

                        <div class="col-lg-8 col-md-6 col-sm-12 mt-2">
                            <label class="form-label text-uppercase"><?= $translate["payment_note"]; ?></label>
                            <input type="text" class="form-control form-control-lg" name="pay_det_note" id="pay_det_note" autocomplete="off" />
                        </div>

                        <div class="col-lg-4 col-md-12 col-sm-12 mt-2">
                            <label class="form-label text-uppercase">&nbsp;</label>
                            <div class="d-flex btn-group">
                                <button type="button" class="btn btn-warning btn-icon fw-semibold text-uppercase btnAddPayment"><i class="ph-arrow-down me-1"></i><?= $translate["add_payment"] ?>&nbsp;<i class="ph-arrow-down"></i></button>
                            </div>
                        </div>

                    </div>


                    <div class="col-lg-12 mt-3 mb-1 border-bottom text-center">
                        <label class="fs-base fw-bold pb-2 text-uppercase"><?= $translate["payments_list"]; ?></label>
                    </div>


                    <div class="table-responsive">

                        <table id="tableListPaiement" class="table table-hover table-sm payment_entry_details">
                            <thead class="text-uppercase table-light">
                                <tr class="text-center">
                                    <th width="10%">X</th>
                                    <th width="15%"><?= $translate["date"]; ?></th>
                                    <th width="15%"><?= $translate["type"]; ?></th>
                                    <th width="15%"><?= $translate["paid"]; ?></th>
                                    <th width="15%"><?= $translate["charged"]; ?></th>
                                    <th width="15%"><?= $translate["change"]; ?></th>
                                    <th width="15%"><?= $translate["note"]; ?></th>
                                </tr>
                            </thead>
                            <tbody class="align-middle" style="text-align: center;"></tbody>
                        </table>

                    </div>

                </form>

            </div>

            <div class="modal-footer">
                <?php
                if ($_SESSION["user_profile"] !== "Waiter") { ?>

                    <button type="button" class="btn btn-indigo btnConfirmPayment fw-semibold text-uppercase"><i class="ph-check-circle me-1"></i> <?= $translate["confirm_payment"]; ?></button>

                <?php } ?>

                <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>
<!-- PAYMENT HISTORY MODAL -->


<button type="button" class="btn btn-indigo pos-mobile-sidebar-toggler btnToggleRightSidebarOnMobile">
    <i class="ph-shopping-cart fs-1"></i>
    <span class="badge orderAmount fs-4" id="orderAmount"> 0.00</span>
</button>

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