<!-- 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 border-bottom pb-2">
                <div class="col-xl-9 col-lg-9">
                    <h4 class="page-title fw-bold col-md-6 mb-0"><?= $translate["invoices"]; ?></h4>
                </div>
                <div class="col-xl-3 col-lg-3 col-md-6 btn-group">
                    <button class="btn btn-indigo text-uppercase btnAddInvoice" type="button"> <i class="ph-plus me-2"></i> <?= $translate["new_invoice"]; ?></button>
                </div>
            </div>

            <div class="row mt-3">

                <div class="col-lg-4 col-md-6 col-sm-12 mb-3">
                    <label class="form-label fw-medium text-uppercase"><?= $translate["enterprises"]; ?></label>
                    <div class="input-group">
                        <span class="input-group-text"><i class="ph ph-building-office"></i></span>
                        <select class="form-control form-control-lg select2" id="ent_id_value" onchange="listDataToDatatable();" data-width="1%">
                            <?php

                            $sql = "SELECT ent_id,ent_name FROM tb_enterprises WHERE ent_contract_status = 'Enabled' ORDER BY ent_name ASC;";
                            $answer = executePDOFetchAll($sql, "");

                            echo "<option value='All'>" . strtoupper($translate["all"]) . "</option>";

                            foreach ($answer as $key => $value) {
                                echo "<option value='{$value['ent_id']}' > {$value['ent_name']}</option>";
                            }

                            ?>
                        </select>
                    </div>
                </div>

                <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 mb-2">
                    <label class="form-label fw-medium text-uppercase"><?= $translate["date_range"]; ?></label>
                    <div class="input-group">
                        <span class="input-group-text"><i class="ph-calendar"></i></span>
                        <input type="text" class="form-control form-control-lg daterange-predefined-this-month dateSelected" value="<?= date("Y-m-01"); ?> / <?= date("Y-m-d"); ?>" />
                    </div>
                </div>

                <div class="col-lg-2 col-md-6 col-sm-12 mb-3">
                    <label class="form-label fw-medium text-uppercase"><?= $translate["status"]; ?></label>
                    <div class="input-group">
                        <span class="input-group-text"><i class="ph ph-list-checks"></i></span>
                        <select class="form-control form-control-lg select2 searchStatus" onchange="listDataToDatatable();" data-width="1%">
                            <option value="All" selected><?= $translate["all"]; ?></option>
                            <option value="Pending"><?= $translate["pending"]; ?></option>
                            <option value="Paid"><?= $translate["paid"]; ?></option>
                            <option value="Overdue"><?= $translate["overdue"]; ?></option>
                            <option value="Canceled"><?= $translate["canceled_f"]; ?></option>
                        </select>
                    </div>
                </div>

                <div class="col-lg-2 col-md-6 col-sm-12 mb-2">
                    <label class="form-label fw-medium text-uppercase">&nbsp;</label>
                    <div class="btn-group d-flex">
                        <button type="button" class="btn btn-warning text-uppercase btnSearch"><i class="ph-magnifying-glass me-1"></i> <?= $translate["search"]; ?></button>
                    </div>
                </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 tbInvoicesList">
                <thead>
                    <tr class="table-dark text-uppercase">
                        <th>#</th>
                        <th><?= $translate["enterprise"]; ?> </th>
                        <th><?= $translate["code"]; ?></th>
                        <th><?= $translate["date"]; ?> </th>
                        <th><?= $translate["due_date"]; ?> </th>
                        <th><?= $translate["amount"]; ?> </th>
                        <th><?= $translate["debt"]; ?></th>
                        <th><?= $translate["status"]; ?></th>
                        <th><?= $translate["options"]; ?></th>
                    </tr>
                </thead>
                <tfoot>
                    <tr class="table-dark text-uppercase fw-bold">
                        <td>__</td>
                        <td>__</td>
                        <td>__</td>
                        <td>__</td>
                        <td>__</td>
                        <td><span id="totalAmount">0.00</span></td>
                        <td><span id="totalDebt">0.00</span></td>
                        <td>__</td>
                        <td>__</td>
                </tfoot>
            </table>

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


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

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

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


<!-- Modal with invoice -->
<div id="viewInvoicesModal" class="modal fade">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><?= strtoupper($translate["invoice"]); ?></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body card border-0 rounded-0 shadow-none p-0 mb-0">
                <div class="card-body">
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="mb-4">

                                <div>
                                    <h4 class="d-none d-sm-inline-block text-body mb-0">ITECEVO LLC</h4>
                                </div>

                                <div class="d-inline-flex align-items-center mt-2 mb-0">
                                    <img src="assets/images/evosys-pos-logo-short.png" alt="evosys-pos-logo" class="h-24px">
                                    <!-- <img src="https://demo.interface.club/limitless/demo/template/assets/images/logo_icon.svg" class="h-24px" alt=""> -->
                                    <!-- <h4 class="d-none d-sm-inline-block text-body mb-0 ms-2">ITECEVO LLC</h4> -->
                                </div>

                                <ul class="list list-unstyled mt-2 mb-0">
                                    <!-- <li>Vista del cerro, Calle principal, 101</li> -->
                                    <li>Santiago de los caballeros, DR.</li>
                                    <li>+1 809-838-9538</li>
                                </ul>
                            </div>
                        </div>

                        <div class="col-sm-6">
                            <div class="text-sm-end mb-4">
                                <h4 class="text-primary mb-2 mt-lg-2"><?= strtoupper($translate["invoice"]); ?> <span class="spanInvoiceNumber"></span></h4>
                                <ul class="list list-unstyled mb-0">
                                    <li><?= $translate["date"]; ?>: <span class="fw-semibold spanInvoiceDate"></span></li>
                                    <li><?= $translate["due_date"]; ?>: <span class="fw-semibold spanInvoiceDueDate"></span></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="d-lg-flex flex-lg-wrap">
                        <div class="mb-4 mb-lg-2">
                            <span class="text-muted"><?= ucwords(strtolower($translate["invoice_to"])); ?>:</span>
                            <ul class="list list-unstyled mb-0">
                                <li>
                                    <h5 class="my-2"><span class="customerName"></span></h5>
                                </li>
                                <!-- <li><span class="fw-semibold">Normand axis LTD</span></li>
                                <li>3 Goodman Street</li>
                                <li>London E1 8BF</li>
                                <li>United Kingdom</li>
                                <li>888-555-2311</li>
                                <li><a href="#">rebecca@normandaxis.ltd</a></li> -->
                            </ul>
                        </div>

                        <div class="mb-2 ms-auto">
                            <span class="text-muted"><?= $translate["payment_summary"]; ?>:</span>
                            <div class="d-flex flex-wrap wmin-lg-400">
                                <ul class="list list-unstyled mb-0">
                                    <li>
                                        <h5 class="my-2"><?= $translate["total_due"]; ?>:</h5>
                                    </li>
                                    <!-- <li>Bank name:</li>
                                    <li>Country:</li>
                                    <li>City:</li>
                                    <li>Address:</li>
                                    <li>IBAN:</li>
                                    <li>SWIFT code:</li> -->
                                </ul>

                                <ul class="list list-unstyled text-end mb-0 ms-auto">
                                    <li>
                                        <h5 class="my-2"><span class="totalDue"></span></h5>
                                    </li>
                                    <!-- <li><span class="fw-semibold">Profit Bank Europe</span></li>
                                    <li>United Kingdom</li>
                                    <li>London E1 8BF</li>
                                    <li>3 Goodman Street</li>
                                    <li><span class="fw-semibold">KFH37784028476740</span></li>
                                    <li><span class="fw-semibold">BPT4E</span></li> -->
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="table-responsive">
                    <table class="table table-lg tbodyInvoicesList">
                        <thead>
                            <tr>
                                <th class="fw-bold fs-6"><?= $translate["description"]; ?></th>
                                <th class="fw-bold fs-6"><?= $translate["quantity"]; ?></th>
                                <th class="fw-bold fs-6"><?= $translate["price"]; ?></th>
                                <th class="fw-bold fs-6"><?= $translate["total"]; ?></th>
                            </tr>
                        </thead>
                        <tbody id="tbodyInvoicesList"></tbody>
                    </table>
                </div>

                <div class="card-body border-top">
                    <div class="d-lg-flex flex-lg-wrap">
                        <!-- <div class="pt-2 mb-3">
                            <h6 class="mb-3">Authorized person</h6>
                            <div class="mb-3">
                                <img src="../../../assets/images/signature.png" width="150" alt="">
                            </div>

                            <ul class="list-unstyled text-muted">
                                <li>Eugene Kopyov</li>
                                <li>2269 Elba Lane</li>
                                <li>Paris, France</li>
                                <li>888-555-2311</li>
                            </ul>
                        </div> -->

                        <div class="pt-2 mb-3 wmin-lg-400 ms-auto">
                            <!-- <h6 class="mb-3"><?= $translate["total_due"]; ?></h6> -->
                            <div class="table-responsive">
                                <table class="table table-sm">
                                    <tbody>
                                        <tr>
                                            <th><?= $translate["subtotal"]; ?>:</th>
                                            <td class="text-end"><span class="invoiceSubTotal"></span></td>
                                        </tr>
                                        <tr>
                                            <th><?= $translate["discount"]; ?>: <span class="fw-normal invoiceDiscountPercent"></span></th>
                                            <td class="text-end"><span class="fw-normal invoiceDiscountAmount"></span></td>
                                        </tr>
                                        <tr>
                                            <th><?= $translate["tax"]; ?>: <span class="fw-normal invoiceTaxPercent"></span></th>
                                            <td class="text-end"><span class="fw-normal invoiceTaxAmount"></span></td>
                                        </tr>
                                        <tr>
                                            <th>
                                                <h5 class="fw-semibold"><?= strtoupper($translate["total"]); ?>:</h5>
                                            </th>
                                            <td class="text-end">
                                                <h5><span class="fw-semibold invoiceTotalAmount"></span></h5>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <div class="text-end mt-3">
                                <button type="button" class="btn btn-indigo btnSendInvoice">
                                    Send invoice
                                    <i class="ph-paper-plane-tilt ms-2"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- <div class="card-footer">
                    <span class="text-muted">Thank you for using Limitless. This invoice can be paid via PayPal, Bank transfer, Skrill or Payoneer. Payment is due within 30 days from the date of delivery. Late payment is possible, but with with a fee of 10% per month. Company registered in England and Wales #6893003, registered office: 3 Goodman Street, London E1 8BF, United Kingdom. Phone number: 888-555-2311</span>
                </div> -->
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!-- /modal with invoice -->


<!-- ADD PURCHASE MODAL -->
<div id="addEditInvoiceModal" class="modal" data-bs-keyboard="false" data-bs-backdrop="static" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title span-modal-title"></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

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

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

                <div class="modal-body">

                    <div class="row">

                        <!-- inv_id
                        inv_ent_id
                        inv_date
                        inv_due_date
                        inv_amount
                        inv_discount_percent
                        inv_discount_amount
                        inv_subtotal
                        inv_tax_percent
                        inv_tax_amount
                        inv_total_amount
                        inv_debt
                        inv_note
                        inv_terms -->

                        <input type="hidden" name="inv_id" id="inv_id">
                        <input type="hidden" name="inv_debt" id="inv_debt">

                        <div class="col-lg-4 col-md-12 mb-2">
                            <label class="form-label"><?= $translate["date"]; ?></label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="ph-calendar"></i></span>
                                <input type="text" class="form-control form-control-lg datepicker-date-format" name="inv_date" id="inv_date" value="<?= date('Y-m-d'); ?>">
                            </div>
                        </div>

                        <div class="col-lg-4 col-md-12 mb-2">
                            <label class="form-label"><?= $translate["due_date"]; ?></label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="ph-calendar"></i></span>
                                <input type="text" class="form-control form-control-lg datepicker-date" name="inv_due_date" id="inv_due_date" value="<?= date('Y-m-d'); ?>">
                            </div>
                        </div>

                        <div class="col-lg-4 col-md-12 mb-2">
                            <label class="form-label"><?= $translate["discount"]; ?></label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="ph-percent"></i></span>
                                <input type="text" min="0" class="form-control form-control-lg" name="inv_discount_percent" id="inv_discount_percent" value="0">
                            </div>
                        </div>

                        <div class="col-lg-4 col-md-12 mb-2">
                            <label class="form-label"><?= $translate["tax"]; ?></label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="ph-percent"></i></span>
                                <input type="text" min="0" class="form-control form-control-lg" name="inv_tax_percent" id="inv_tax_percent" value="0">
                            </div>
                        </div>

                        <div class="col-lg-4 col-md-12 mb-2">
                            <label class="form-label fw-medium text-uppercase">&nbsp;</label>
                            <div class="btn-group d-flex">
                                <button type="button" class="btn btn-info text-uppercase btnAddNewPurchase"><i class="ph-plus me-1"></i> <?= $translate["add"]; ?></button>
                            </div>
                        </div>


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

                                <table class="table table-hover table-bordered">
                                    <thead class="table-secondary">
                                        <tr class="text-uppercase fs-6">
                                            <th width="25%"><?= $translate["subtotal"]; ?></th>
                                            <th width="25%"><?= $translate["discount"]; ?></th>
                                            <th width="25%"><?= $translate["tax"]; ?></th>
                                            <th width="25%"><?= $translate["total_to_pay"]; ?></th>
                                        </tr>
                                        <tr class="text-uppercase fs-6">
                                            <th width="25%"><span id="inv_span_subtotal">0.00</span></th>
                                            <th width="25%"><span id="inv_span_discount">0.00</span></th>
                                            <th width="25%"><span id="inv_span_tax">0.00</span></th>
                                            <th width="25%"><span id="inv_span_total">0.00</span></th>
                                        </tr>
                                    </thead>
                                </table>

                            </div>
                        </div>

                        <div class="col-lg-12 col-md-12 col-sm-12 mt-2" style="margin-top: -25px">
                            <div class="table-responsive">

                                <table class="table table-sm table-hover tbAddEditInvoiceDetails">
                                    <thead>
                                        <tr class="table-dark text-uppercase">
                                            <th>x</th>
                                            <th><?= $translate["description"]; ?></th>
                                            <th><?= $translate["quantity"]; ?></th>
                                            <th><?= $translate["price"]; ?></th>
                                            <th><?= $translate["total"]; ?></th>
                                        </tr>
                                    </thead>
                                </table>

                            </div>
                        </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-indigo text-uppercase btnEdit"><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>
<!-- ADD PURCHASE MODAL -->


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