<style>
    .table thead tr>th {

        background-color: #4c0870;
        /*        width:16% !important;*/
        color: #fff;
    }

    .table-responsive {
        /*        overflow-x:auto !important;*/
    }

    .table thead tr th[class*='sorting_'] {
        color: #fff;
    }

    .bg-master-lighter {
        border: none;
        background-color: #fff;
        border-top: 1px solid #ddd;
    }


    .ValSpan {
        opacity: 0;
    }

    /*
        .dropdown-menu>li>a{
            color:#000 !important;
            opacity: 1;
        }
        .DropDownForForms > .dropdown-menu{
            height:auto;
            cursor: pointer;
            overflow-y:auto;
        }
    */
    #Main_Account_Name,
    .Account_Name {
        text-transform: capitalize;
    }

    .newitem {

        font-size: 1.5em;
        text-align: center;
    }
</style>

<script src="<?php echo THEME_PATH; ?>/plugins/moment/moment.min.js"></script>


<div class="container-fluid container-fixed-lg bg-white">
    <div class="panel panel-transparent">
        <div class="panel-heading">
            <div class="panel-title"><?php print CommonLanguage::getMessage('trial_balance'); ?></div>
            <div class="row form-group">
                <div class="card-group horizontal " id="accordion" role="tablist" aria-multiselectable="true">
                    <div class="card card-default m-b-0">
                        <div class="card-header " role="tab" id="headingOne">
                            <h4 class="card-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne" class="collapsed btn btn-search">
                                    <span class="filter-title"> <i class="fa fa-search"></i><?php echo CommonLanguage::getMessage('advanced_search'); ?></span>
                                </a>
                            </h4>
                        </div>
                        <div id="collapseOne" class="collapse" role="tabcard" aria-labelledby="headingOne" aria-expanded="false" style="">
                            <div class="card-block">
                                <div class="row p-15">
                                    <div class="col-md-3">
                                        <label><?php echo CommonLanguage::getMessage('Date') ?></label>
                                        <input id="range_date" type="text" class="form-control" readonly name="range_date">
                                    </div>
                                    <div class="col-md-3">
                                        <label><?php echo CommonLanguage::getMessage('due_date') ?></label>
                                        <input id="range_duedate" type="text" class="form-control" readonly name="range_duedate">
                                    </div>

                                    <div class="col-md-3">
                                        <div class="row">
                                            <div class="col-md-6"><label><?php echo CommonLanguage::getMessage('from_jv') ?></label></div>
                                            <div class="col-md-6"><label><?php echo CommonLanguage::getMessage('to_jv') ?></label></div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6"><input type="number" min="1" id="from_jv" class="form-control full-width"></div>
                                            <div class="col-md-6"><input type="number" min="1" id="to_jv" class="form-control full-width"></div>
                                        </div>

                                    </div>
                                    <div class="col-md-3">
                                        <div class="row">
                                            <div class="col-md-6"><label><?php echo CommonLanguage::getMessage('from_account') ?></label></div>
                                            <div class="col-md-6"><label><?php echo CommonLanguage::getMessage('to_account') ?></label></div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6"><input type="number" min="1" id="from_account" class="form-control full-width" value="<?php echo !empty($account) ? $account : '' ?>"></div>
                                            <div class="col-md-6"><input type="number" min="1" id="to_account" class="form-control full-width" value="<?php echo !empty($account) ? $account : '' ?>"></div>
                                        </div>

                                    </div>
                                </div>
                                <div class="row p-15">
                                    <div class="col-md-3">
                                        <label><?php echo CommonLanguage::getMessage('job') ?></label>
                                        <input type="hidden" class="full-width" id="job_id" />
                                    </div>

                                    <div class="col-md-3">
                                        <label><?php echo CommonLanguage::getMessage('multi_accounts') ?></label>
                                        <input type="hidden" class="full-width" id="multi_accounts" />
                                    </div>
                                    <div class="col-md-3 trans_curr_div">
                                        <label><?php echo CommonLanguage::getMessage('trans_in_currency'); ?></label>
                                        <input type="hidden" class="full-width" id="trans_in_currrency" />
                                        <?php // echo Forms::CurrencyDropDown(1, 'complete') 
                                        ?>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="row">
                                            <div class="col-md-6"><label><?php echo CommonLanguage::getMessage('from_amount') ?></label></div>
                                            <div class="col-md-6"><label><?php echo CommonLanguage::getMessage('to_amount') ?></label></div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6"><input type="number" min="0" step="any" id="from_amount" class="form-control full-width"></div>
                                            <div class="col-md-6"><input type="number" min="0" step="any" id="to_amount" class="form-control full-width"></div>
                                        </div>

                                    </div>
                                </div>
                                <div class="row p-15">
                                    <div class="col-md-3">
                                        <label><?php echo CommonLanguage::getMessage('entry_type') ?></label>
                                        <input type="hidden" class="full-width" id="ref_type" />
                                    </div>
                                    <div class="col-md-3">
                                        <label><?php echo CommonLanguage::getMessage('family_accounts') ?></label>
                                        <input type="hidden" class="full-width" id="family_acc" />
                                    </div>
                                    <div class=" col-md-3">
                                        <label><?php print CommonLanguage::getMessage('currency'); ?></label>
                                        <?php echo Forms::CurrencyDropDown(1, 'complete') ?>
                                    </div>
                                    <div class="col-md-1">

                                        <label><?php print CommonLanguage::getMessage('active'); ?><span class="fa fa-info-circle" title="<?php echo CommonLanguage::getMessage('active_tooltip') ?>"></span></label>
                                        <input type="checkbox" checked id="Active" name="Active" />
                                    </div>
                                    <div class="col-md-1">

                                        <label><?php print CommonLanguage::getMessage('unmoved'); ?><span class="fa fa-info-circle" title="<?php echo CommonLanguage::getMessage('unmoved_tooltip') ?>"></label>
                                        <input type="checkbox" id="unmoved" name="unmoved" />
                                    </div>
                                    <?php if ($Is_Actual) { ?>
                                        <div class="col-md-1">
                                            <label><?php print CommonLanguage::getMessage('actual_only'); ?></label>
                                            <input type="checkbox" id="Actual_TrialBalance" name="Actual_TrialBalance" />
                                        </div>
                                    <?php } ?>
                                </div>
                                <div class="row p-15">
                                    <div class="col-md-3">
                                        <label><?php echo CommonLanguage::getMessage('type'); ?></label>
                                        <select id="transaction_type" class="full-width" multiple data-init-plugin="select2">
                                            <option value=""><?php echo CommonLanguage::getMessage('All') ?></option>
                                            <option value="inv"><?php echo CommonLanguage::getMessage('invoice') ?></option>
                                            <option value="pur"><?php echo CommonLanguage::getMessage('purchase') ?></option>
                                            <option value="pay"><?php echo CommonLanguage::getMessage('payment') ?></option>
                                            <option value="rec"><?php echo CommonLanguage::getMessage('receipt') ?></option>
                                            <option value="mjv"><?php echo CommonLanguage::getMessage('manual_jv') ?></option>
                                            <option value="exp"><?php echo CommonLanguage::getMessage('expense') ?></option>

                                        </select>
                                    </div>
                                    <div class="col-md-2">
                                        <label><?php print CommonLanguage::getMessage('enter_nb_digits'); ?></label>
                                        <input type="number" id="digits" min="2" value="20" class="form-control">
                                    </div>
                                    <div class="col-md-2">
                                        <label><?php print CommonLanguage::getMessage('enter_nb_of_grouping'); ?></label>
                                        <input type="number" id="Grouping" min="1" value="2" class="form-control">
                                    </div>
                                    <div class="col-md-2" style="display: grid;">
                                        <label><?php print CommonLanguage::getMessage('opening_balance'); ?></label>
                                        <input type="checkbox" checked id="opening_balance" name="opening_balance" />
                                    </div>
                                    <div class="col-md-2" style="display: grid;">
                                        <label><?php print CommonLanguage::getMessage('close_balance'); ?></label>
                                        <input type="checkbox" checked id="close_balance" name="close_balance" />
                                    </div>

                                </div>

                                <div class="row p-15">
                                    <div class="col-md-3 ">
                                        <label><?php echo CommonLanguage::getMessage('Transaction_Type'); ?></label>
                                        <select id="TypeTrans" class="full-width Transaction" data-init-plugin="select2">
                                            <option value="All"><?php print CommonLanguage::getMessage('All'); ?></option>
                                            <option value="Credit"><?php print CommonLanguage::getMessage('credit'); ?></option>
                                            <option value="Debit"><?php print CommonLanguage::getMessage('debit'); ?></option>
                                        </select>
                                    </div>
                                    <div class="col-md-3">
                                        <label><?php echo CommonLanguage::getMessage('projects') ?></label>
                                        <input type="hidden" class="full-width" id="project_ids" />
                                    </div>
                                    <div class="col-md-3 ">
                                        <label><?php print CommonLanguage::getMessage('salesman'); ?></label>
                                        <input id="salesman_id" class="full-width" type="hidden" />

                                    </div>
                                    <!--                                    <div class="col-md-1">
                                                                                <label><?php print CommonLanguage::getMessage('multi_year'); ?></label>
                                                                                <input type="checkbox"  id="multi_year" name="multi_year"/>
                                                                            </div>-->
                                </div>
                                <div class="row p-15">
                                    <div class=" col-md-2 ">
                                        <label><?php print CommonLanguage::getMessage('road_customer'); ?></label>
                                        <input type="hidden" name="pos_customer_id" id="pos_customer_id" class="full-width" />
                                    </div>
                                    <div class="col-md-2 pull-right">
                                        <button id="Generate_Report" type="button" class="btn btn-complete pull-right" data-toggle="dropdown" aria-expanded="false">
                                            <?php print CommonLanguage::getMessage('generate_report'); ?></button>
                                    </div>
                                    <div class="col-md-3 <?php echo $permissions->hasPermission('Branches') ? '' : 'hidden'; ?>">
                                        <label><?php echo CommonLanguage::getMessage('choose_branch') ?></label>
                                        <input id="search_branch_id" type="hidden" class="full-width" name="search_branch_id" >
                                    </div>

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


                </div>
            </div>

        </div>
        <div class="panel-body">
            <div class=" table-responsive" id="TrialBalanceDiv">
            </div>
        </div>
    </div>
</div>

<style>
    .text-left {
        color: black;
    }

    /* class="text-left CODE text-black"*/
</style>

<script>
    var trial_balance = <?php echo json_encode(CommonLanguage::getMessage('trial_balance')); ?>;
    var fromdate = <?php echo json_encode($from_day) ?>,
        today = <?php echo json_encode($today) ?>;
    var is_actual = <?php echo json_encode($Is_Actual); ?>;
    var startDate = <?php echo json_encode($from_date) ?>,
        endDate = <?php echo json_encode($to_date) ?>,
        startDueDate = '',
        endDueDate = '';

    $(function() {
         TrailBalanceAjax()
        build_select2($("#salesman_id"), "xhr/employeeSearch")

        build_select2($("#job_id"), "ACCAjax/JobSearch", 1)
        //        build_select2($("#job_id"), "xhr/CommonSearch?col_id=job_id&col_name=job_name&table=tbl_accounting_jobs", 1)
        build_select2($("#trans_in_currrency"), "xhr/CurrencySearch", 1)
        build_select2($("#multi_accounts"), ("xhr/accIDSearch?type=Payment"), 1)
        build_select2($("#ref_type"), "xhr/CommonSearch?col_id=subtype_abbrv&col_name=subtype_abbrv&table=tbl_accounting_transaction_subtype", 1)
        build_select2($("#family_acc"), "xhr/CommonSearch?col_id=family_id&col_name=family_name&table=tbl_family_accounts", 1)
        build_select2($("#project_ids"), "ACCAjax/projectSearch", 1)
        build_select2($("#pos_customer_id"), ("xhr/poscustomerSearch"));
        build_select2($("#search_branch_id"), "xhr/CommonSearch?col_name=branch_name&col_id=branch_id&table=tbl_organization_branches");

        //$('#TrialBalanceTable').dataTable();
        new Switchery($("#Actual_TrialBalance").get(0), {
            color: $.Pages.getColor("complete")
        })
        new Switchery($("#opening_balance").get(0), {
            color: $.Pages.getColor("complete")
        })
        new Switchery($("#close_balance").get(0), {
            color: $.Pages.getColor("complete")
        })
        new Switchery($("#Active").get(0), {
            color: $.Pages.getColor("complete")
        })
        new Switchery($("#unmoved").get(0), {
            color: $.Pages.getColor("complete")
        })
        //        new Switchery($("#multi_year").get(0), {color: $.Pages.getColor("complete")})

        //        $('#TrialBalanceTable').dataTable({
        //            "aaSorting": [],
        //            "bSort": false,
        //            dom: 'Bfrtip',
        //            "pagingType": "full_numbers",
        //            buttons: [
        //                {
        //                    extend: 'excelHtml5',
        //                    exportOptions: {"columns": [0, 1, 2, 3, 4, 5, 6, 7]},
        //                    title: trial_balance,
        //                    text: '<i class="fa fa-file-excel-o"></i> Excel'
        //
        //                },
        //                {
        //                    extend: 'pdfHtml5',
        //                    exportOptions: {"columns": [0, 1, 2, 3, 4, 5, 6, 7]},
        //                    title: trial_balance,
        //                    text: '<i class="fa fa-file-pdf-o"></i> Pdf',
        //                    "sCharSet": 'utf-8',
        //                    message: 'From Date: ' + (startDate ? startDate : fromdate) + '\nTo Date: ' + (endDate ? endDate : today) + '\nCurrency: ' + $("#CurrencyDropDown button span").text(),
        //                },
        //                {
        //                    extend: 'print',
        //                    text: '<i class="fa fa-print"></i> Print',
        //                    exportOptions: {"columns": [0, 1, 2, 3, 4, 5, 6, 7]},
        //                    title: trial_balance,
        //                    message: '<h4>From Date: ' + (startDate ? startDate : fromdate) + '<br>To Date: ' + (endDate ? endDate : today) + '<br>Currency: ' + $("#CurrencyDropDown button span").text(),
        //                }],
        //        });
        $("input[name=range_date]").daterangepicker({
            ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                'This Month': [moment().startOf('month'), moment().endOf('month')],
                'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            },
            allowEmpty: true,
            startDate: startDate,
            endDate: endDate,
            //            autoApply: true,
            autoUpdateInput: (startDate == '' ? false : true),
            locale: {
                cancelLabel: 'Clear'
            }
        }, function(start, end, label) {
            //            startDate = start.format("YYYY-MM-DD"),
            //                    endDate = end.format("YYYY-MM-DD")
            //            AjaxCall();
        });
        $('input[name="range_date"]').on('apply.daterangepicker', function(ev, picker) {
            window.startDate = picker.startDate.format('YYYY-MM-DD'),
                window.endDate = picker.endDate.format('YYYY-MM-DD');
            $(this).val(picker.startDate.format('YYYY-MM-DD') + ' - ' + picker.endDate.format('YYYY-MM-DD'));
        });
        $('input[name="range_date"]').on('cancel.daterangepicker', function(ev, picker) {
            startDate = ''
            endDate = ''
            $(this).val('');
        });

        $("input[name=range_duedate]").daterangepicker({
            ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                'This Month': [moment().startOf('month'), moment().endOf('month')],
                'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            },
            allowEmpty: true,
            //            autoApply: true,
            autoUpdateInput: false,
            locale: {
                cancelLabel: 'Clear'
            }
        }, function(start, end, label) {

        });
        $('input[name="range_duedate"]').on('apply.daterangepicker', function(ev, picker) {
            window.startDueDate = picker.startDate.format('YYYY-MM-DD'),
                window.endDueDate = picker.endDate.format('YYYY-MM-DD');
            $(this).val(picker.startDate.format('YYYY-MM-DD') + ' - ' + picker.endDate.format('YYYY-MM-DD'));
        });
        $('input[name="range_duedate"]').on('cancel.daterangepicker', function(ev, picker) {
            startDueDate = ''
            endDueDate = ''
            $(this).val('');
        });

    })

    $("#Generate_Report").on("click", function() {
        TrailBalanceAjax()
    })

    function TrailBalanceAjax() {


        var CurrentDate = {
            From_Date: startDate,
            To_Date: endDate,
            digits: $("#digits").val(),
            Grouping: $("#Grouping").val(),
            Currency_ID: $("#CurrencyDropDown button input").val(),
            Opening_Balance: $("#opening_balance").is(":checked") ? 1 : 0,
            with_close: $("#close_balance").is(":checked") ? 1 : 0,
            Active: $("#Active").is(":checked") ? 1 : 0,
            unmoved: $("#unmoved").is(":checked") ? 1 : 0,
            Actual_Only: $("#Actual_TrialBalance").is(":checked") ? 1 : 0,
            trans_type: $("#transaction_type").val(),
            Is_Actual: is_actual,
            from_jv: $("#from_jv").val(),
            to_jv: $("#to_jv").val(),
            from_account: $("#from_account").val(),
            to_account: $("#to_account").val(),
            job_ids: $("#job_id").val(),
            project_ids: $("#project_ids").val(),
            multi_accounts: $("#multi_accounts").val(),
            Transaction_Date_From: startDate,
            Transaction_Date_To: endDate,
            trans_currency: $("#trans_in_currrency").val(),
            from_amount: $("#from_amount").val(),
            to_amount: $("#to_amount").val(),
            ref_type: $("#ref_type").val(),
            family_acc: $("#family_acc").val(),
            debit_credit_type: $("#TypeTrans").val(),
            salesman_id: $("#salesman_id").val(),
            due_date_from: startDueDate,
            due_date_to: endDueDate,
            pos_customer_id: $("#pos_customer_id").val(),
            search_branch_id: $("#search_branch_id").val(),
            //            multi_year:$("#multi_year").is(":checked") ? 1 : 0
        };
        //        CurrentDate.From_Date = startDate ? startDate : fromdate;
        //        CurrentDate.To_Date = endDate ? endDate : today;
        //        CurrentDate.digits = $("#digits").val();
        //        CurrentDate.Grouping = $("#Grouping").val();
        //        CurrentDate.Currency_ID = $("#CurrencyDropDown button input").val();
        //        CurrentDate.Opening_Balance = $("#opening_balance").is(":checked") ? 1 : 0;
        //        CurrentDate.Active = $("#Active").is(":checked") ? 1 : 0;
        //        CurrentDate.Account_From = $("#AccFrom").val() ? $("#AccFrom").val() : 0;
        //        CurrentDate.Account_To = $("#AccTo").val() ? $("#AccTo").val() : 0;
        //        CurrentDate.actual = is_actual;
        //        CurrentDate.Actual_TrialBalance = $("#Actual_TrialBalance").is(":checked") ? 1 : 0;
        $("#AjaxIsBusy").removeClass("HideMe")
        $.ajax({
            url: "ACCAjax/trialBalanceAjax",
            data: {
                data: CurrentDate
            },
            complete: function(v, vv) {
                console.log('complete response')
                console.log(v)
                if (vv == "success") {
                    var Data = v.responseText;
                    //                    console.log(Data)
                    $("#TrialBalanceDiv").html(Data)
                    //                    $('#TrialBalanceTable').dataTable({"aaSorting":[]});
                    RebuildDataTable('Trial Balance', [0, 1, 2, 3, 4, 5, 6, 7], '', [], '#TrialBalanceTable', [], {
                        bSort: false,
                        msg: '<h4>From Date: ' + (startDate ? startDate : fromdate) + '<br>To Date: ' + (endDate ? endDate : today) + '<br>Currency: ' + $("#CurrencyDropDown button span").text()
                        //                                , cb_ft: function (optns) {
                        //                                    optns.buttons[1].message = '<h4>From Date: ' + (startDate ? startDate : fromdate) + '<br>To Date: ' + (endDate ? endDate : today) + '<br>Currency: ' + $("#CurrencyDropDown button span").text();
                        //                                    return optns;
                        //                                }
                    });

                    //                    $('#TrialBalanceTable').dataTable({
                    //                        "aaSorting": [],
                    //                        "bSort": false,
                    //                        dom: 'Bfrtip',
                    //                        "pagingType": "full_numbers",
                    //                        buttons: [
                    //                            {
                    //                                extend: 'excelHtml5',
                    //                                exportOptions: {"columns": [0, 1, 2, 3, 4, 5, 6, 7]},
                    //                                title: 'Trial Balance',
                    //                                text: '<i class="fa fa-file-excel-o"></i> Excel'
                    //
                    //                            },
                    //                            {
                    //                                extend: 'pdfHtml5',
                    //                                exportOptions: {"columns": [0, 1, 2, 3, 4, 5, 6, 7]},
                    //                                title: 'Trial Balance',
                    //                                text: '<i class="fa fa-file-pdf-o"></i> Pdf',
                    //                                "sCharSet": 'utf-8',
                    //                                message: 'From Date: ' + (startDate ? startDate : fromdate) + '\nTo Date: ' + (endDate ? endDate : today) + '\nCurrency: ' + $("#CurrencyDropDown button span").text(),
                    //                            },
                    //                            {
                    //                                extend: 'print',
                    //                                text: '<i class="fa fa-print"></i> Print',
                    //                                exportOptions: {"columns": [0, 1, 2, 3, 4, 5, 6, 7]},
                    //                                title: 'Trial Balance',
                    //                                message: '<h4>From Date: ' + (startDate ? startDate : fromdate) + '<br>To Date: ' + (endDate ? endDate : today) + '<br>Currency: ' + $("#CurrencyDropDown button span").text()
                    //
                    //
                    //                            }],
                    //                    });
                }


            }





        }) //end of ajax complete

    }


    function FixFloatVal(what) {
        return what.replace(/\.0$|\.00$|\.000$/, "");
    }

    // to remove many digits after the period
    $(function() {
        $(".ValSpan").each(function() {
            $(this).html(AddCommas(public_round_number(parseFloat($.trim($(this).text()))))).animate({
                opacity: 1
            })
        })
    })
</script>