<script src="https://cdn.lordicon.com/libs/mssddfmo/lord-icon-2.1.0.js"></script>
<div id="main p-0" role="main">
    <!-- <div class="header-bg shadow-sm p-0" style="background: url(https://images.pexels.com/photos/1475033/pexels-photo-1475033.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)"> -->
    <!-- <div class="header-bg shadow-lg p-0" style="background: url(https://images.pexels.com/photos/1487834/pexels-photo-1487834.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)"></div> -->
    <div id="content" style=" padding-top: 0px; ">
        <div class="container">
            <div class="row mt-3 justify-content-center">
                <div class="header_invoice_wrapper shadow">
                    <div class="fs-1 w-25 text-white d-flex align-items-center"><?php echo $this->lang->line('invoices'); ?></div class="fs-1">
                    <div class="new_invoice_btn">
                        <button type="button" class="shadow-lg add_invoice_button" data-bs-toggle="collapse" href="#add_accounts" role="button" aria-expanded="false" aria-controls="add_accounts" title="<?php echo $this->lang->line('new_account'); ?>">
                            <lord-icon src="https://cdn.lordicon.com/mecwbjnp.json" trigger="loop" delay="1000" colors="primary:#356359,secondary:#00bcd4" style="width:32px;height:32px">
                            </lord-icon>
                            <span class="pt-1 text-dark">
                                <?php echo $this->lang->line('new_account'); ?>
                            </span>
                        </button>


                    </div>
                </div>
                <div class="collapse w-100" id="add_accounts">
                    <div class="date-searchWrapper" style="margin-left: 18px">
                        <div class="card p-3 w-25" style="border-radius: 0 0 20px 20px; float: left;">

                            <form method="POST" action="<?php echo site_url(); ?>admin/accounts/action">
                                <div>
                                    <div class="form-group">
                                        <input type="text" id="name" name="name" value="" class="form-control">
                                    </div>
                                </div>
                                <div>
                                    <div class="form-group">
                                        <select name="type" id="type" class="form-select form-select-lg">
                                            <option value=""><?php echo $this->lang->line('type'); ?></option>
                                            <option value="1"><?php echo $this->lang->line('expenses'); ?></option>
                                            <option value="2"><?php echo $this->lang->line('purchases'); ?></option>
                                        </select>
                                    </div>
                                </div>
                                <div>
                                    <button type="submit" class="btn btn-success p-1">
                                        <?php echo $this->lang->line('submit'); ?>
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>

                </div>
                <div class="row">
                    <hr class="bg-white mt-5" style="border-radius: 30px; padding: 2px;" />
                    <div class=" table-responsive card card-body">
                        <table class="table table-sm" id="dt_basic2">
                            <thead>
                                <th>#</th>
                                <th><?php echo $this->lang->line('name'); ?></th>
                                <th><?php echo $this->lang->line('type'); ?></th>
                                <th> <?php echo $this->lang->line('date_creation'); ?></th>
                            </thead>
                            <tbody>
                                <?php foreach ($accounts as $account) { ?>
                                    <tr rel-account="<?php echo $account->id; ?>">
                                        <td><?php echo $account->id; ?></td>
                                        <td><?php echo $account->name; ?></td>
                                        <td><?php if ($account->type == 1) {
                                                echo $this->lang->line('expenses');
                                            } else {
                                                echo $this->lang->line('purchases');
                                            }
                                            ?></td>
                                        <td><?php echo $account->dateCreation; ?></td>
                                    </tr>
                                <?php }; ?>
                            </tbody>
                            <tfoot>
                                <!-- <tr>
                                        <td colspan="2"></td>
                                        <td><strong><?php echo number_format($balance, 2); ?></strong></td>
                                        <td colspan="3"></td>
                                    </tr> -->
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/5.5.2/bootbox.min.js" integrity="sha512-RdSPYh1WA6BF0RhpisYJVYkOyTzK4HwofJ3Q7ivt/jkpW6Vc8AurL1R+4AUcvn9IwEKAPm/fk7qFZW3OuiUDeg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/css/bootstrap-datepicker.css">
<script>
    <?php
    $url = '';
    if ($this->session->userdata('site_lang') == 'hebrew') {
        $url = '//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Hebrew.json';
    } else if ($this->session->userdata('site_lang') == 'arabic') {
        $url = '//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Arabic.json';
    } else if ($this->session->userdata('site_lang') == 'english') {
        $url = '//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/English.json';
    } else {
        $url = '//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Hebrew.json';
    }
    ?>
    $(document).ready(function() {
        $('#dt_basic2').DataTable({
            "sDom": "<'dt-toolbar'<'col-xs-12 col-sm-6'f><'dt-buttons col-sm-6 col-xs-12 hidden-xs'l>r>" +
                "t" +
                "<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>",
            "buttons": [],
            "processing": false,
            "bStateSave": false,
            "dom": 'Blfrtip',
            "pagingType": "full_numbers",
            "lengthMenu": [
                [10, 25, 50, -1],
                [10, 25, 50, "<?php echo $this->lang->line('Everything'); ?>"]
            ],
            "pageLength": 20,
            "sPaginationType": "full_numbers",
            "iDisplayLength": 10,
            "sScrollY": 500,
            "bScrollCollapse": true,
            "scrollX": true,
            "language": {
                "url": "<?php echo $url; ?>"
            },
            orderCellsTop: true,
            fixedHeader: false,
            searching: false
        });
        $(document).on('click', '#dt_basic2 tbody tr', function() {
            let elem = $(this);
            let rowAttr = elem.attr('rel-account');
            $('tr').css('background-color', "white");
            elem.css('background-color', "#e3edff")
            $('#deleteInvoiceButton').css('border-color', "#e9200c");
            $('#viewInvoiceButton').css('border-color', "#27b980");
            console.log(rowAttr);
            $('#deleteInvoiceButton').attr('rel-account', rowAttr);
            $('#viewInvoiceButton').attr('rel-account', rowAttr);
            $('#view_account').attr('rel-account', rowAttr);
        });
        $(document).on('click', '#view_account', function() {
            let elem = $(this);
            console.log(elem.attr('rel-account'));
            if (elem.attr("rel-account") === "-1") {
                bootbox.alert("Please Select an account from the table below to continue");
            } else {
                let id = elem.attr('rel-account');
                window.open(`<?php echo site_url(); ?>admin/accounts/view/${id}`, "_blank");
            }
        });
    });
</script>
<style>
    table#dt_basic2 {
        width: 100% !important;
    }
</style>