<style>
    #tableWithSearch thead tr>th {
        background-color: #4c0870;
        color: #fff;
    }

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

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

    .datepicker thead tr .dow {
        color: #ed9421 !important;
    }

    .datepicker table tr td.day:hover {
        background: #ed9421 !important;
        color: #fff;
    }

    .datepicker table tr td.active {
        background-color: #ed9421 !important;
    }

    .datepicker thead tr .datepicker-switch {
        color: #ed9421 !important;
        font-size: 13px;
    }

    .datepicker table tr td span.active {
        background-color: #ed9421 !important;
    }

    .datepicker table tr td span:hover {
        background-color: #ed9421 !important;
        color: #fff;
    }

    datepicker thead tr .next:before,
    .datepicker thead tr .prev:before {
        color: #ed9421 !important;
        font-family: 'FontAwesome';
        font-size: 10px;
    }

    .datepicker thead tr .next:before,
    .datepicker thead tr .prev:before {
        color: #ed9421 !important;
        font-family: 'FontAwesome';
        font-size: 10px;
    }

    /*
    .btn-default:hover{
    background-color:#ed9421 !important;
    color:#fff;
    border: none;
    }
    */
    .complete,
    .btn-group .active {
        background-color: #ed9421 !important;
        color: #fff;
    }

    /*    .MonthPicker,.YearPicker,.FromToPicker{
    display:none;
    }*/
    #selected_entry {
        height: 90px;
        color: black;
        margin-top: 20px;
        font-size: 16px;
        padding-top: 2%;
    }

    .select_table td {
        padding-left: 70px;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.current,
    .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
    .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
        color: #fff !important;
        border-radius: 50%;
        background: #ed9421 !important;
        border-color: #4c0870
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
        color: #fff !important;
    }

    .actionButton {
        background-color: #4c0870;
    }
</style>
<div class="container-fluid container-fixed-lg bg-white">
    <div class="panel panel-transparent">
        <div class="panel-heading">
            <div class="panel-title">
                <h4 class="bold"><?php echo $title; ?> </h4>
            </div>
            <div class="row form-group">
                <div class="col-md-3">
                    <label><?php print CommonLanguage::getMessage('Date'); ?></label>
                    <input id="From_To_Date" type="text" class="form-control" name="From_To_Date">
                </div>
                <div class="col-md-3">
                    <label><?php print CommonLanguage::getMessage('salesman'); ?></label>
                    <input id="salesman_id" name="salesman_id" class="full-width salesman_id" type="hidden" />

                </div>
                <div class="col-md-2">
                    <label><?php print CommonLanguage::getMessage('created_by'); ?></label>
                    <input id="user_id" name="user_id" class="full-width user_id" type="hidden" />

                </div>
                <div class="col-md-2">
                    <label><?php print CommonLanguage::getMessage('linked_to_invoice') . '?'; ?></label>
                    <select id="link_filter" class="full-width" data-init-plugin="select2">
                        <option value=""><?php echo CommonLanguage::getMessage('All') ?></option>
                        <option value="0"><?php echo CommonLanguage::getMessage('yes') ?></option>
                        <option value="1"><?php echo CommonLanguage::getMessage('no') ?></option>
                    </select>

                </div>
                <div class="col-md-2">
                    <label><?php print CommonLanguage::getMessage('pending') . '?'; ?></label>
                    <select id="pending_filter" class="full-width" data-init-plugin="select2">
                        <option value=""><?php echo CommonLanguage::getMessage('All') ?></option>
                        <option value="1"><?php echo CommonLanguage::getMessage('yes') ?></option>
                        <option value="0"><?php echo CommonLanguage::getMessage('no') ?></option>
                    </select>

                </div>
                <?php if ($permissions->hasPermission($is_return ? ($IsReceipt ? ($is_actual ? 'add_actual_return_receipt' : 'add_return_receipt') : ($is_actual ? 'add_actual_return_payment' : 'add_return_payment')) : ($IsReceipt ? ($is_actual ? 'addActualReceipt' : 'addReceipt') : ($is_actual ? 'addActualPayment' : 'addPaymentAccount')))) { ?>
                    <div class="col-md-1 pull-right">
                        <div class="floatingContainer ">
                            <a href="ACC/addpayment<?php echo ($IsReceipt ? '/Receipt' : '') . ($is_return ? '/return' : '') . ($is_actual ? '/act' : '') ?>">
                                <div class="actionButton">
                                    <p class="floatingText"><span class="floatingTextBG"><?php echo CommonLanguage::getMessage('add') ?></span></p>
                                </div>
                            </a>
                        </div>
                    </div>
                <?php } ?>
            </div>
            <div class="row form-group">
                <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 class="panel-body">
            <div class="row">
                <div class="col-md-12 table-responsive">
                    <table class="table table-bordered table-hover demo-table-search" id="tableWithSearch">
                        <thead>
                            <tr>
                                <th class="text-center" style="width:10%">#</th>
                                <th class="text-center" style="width:10%"> <?php print CommonLanguage::getMessage('Code'); ?></th>
                                <th class="text-center" style="width:15%"> <?php print CommonLanguage::getMessage('Name'); ?></th>
                                <th class="text-center" style="width:10%"> <?php print CommonLanguage::getMessage('amount'); ?></th>
                                <th class="text-center" style="width:10%"> <?php print CommonLanguage::getMessage('currency'); ?></th>
                                <th class="text-center" style="width:5%"> <?php print CommonLanguage::getMessage('type'); ?></th>
                                <th class="text-center" style="width:10%"> <?php print CommonLanguage::getMessage('user_ref'); ?></th>

                                <th class="text-center" style="width:10%"> <?php print CommonLanguage::getMessage('note'); ?></th>
                                <th class="text-center" style="width:10%"> <?php print CommonLanguage::getMessage('Date'); ?></th>
                                <th class="text-center" style="width:10%"> <?php print CommonLanguage::getMessage('status'); ?></th>
                                <th class="text-center no-print" style="width:5%"><?php print CommonLanguage::getMessage('Action'); ?></th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                        <tfoot>

                            <th>
                                <?php if ($permissions->hasPermission($is_actual ? ($IsReceipt ? ($is_return ? "delete_multi_act_ret_receipt" : "delete_multi_act_receipt") : ($is_return ? "delete_multi_act_ret_payment" : "delete_multi_act_payment")) : ($IsReceipt ? ($is_return ? "delete_multi_ret_receipt" : "delete_multi_receipt") : ($is_return ? "delete_multi_ret_payment" : "delete_multi_payment")))) { ?>
                                    <button class="btn btn-complete m-b-10 full-width" id="delete_all"><?php echo CommonLanguage::getMessage('Delete'); ?></button>
                                <?php }
                                if ($permissions->hasPermission($is_actual ? ($IsReceipt ? ($is_return ? "convert_act_ret_receipt_to_official" : "convert_multi_act_receipt_to_official") : ($is_return ? "convert_act_ret_payment_to_official" : "convert_multi_act_payment_to_official")) : ($IsReceipt ? ($is_return ? "convert_multi_ret_receipt_to_actual" : "convert_multi_receipt_to_actual") : ($is_return ? "convert_multi_ret_payment_to_actual" : "convert_multi_payment_to_actual")))) { ?>
                                    <button class="btn btn-complete full-width" id="change_actual"><?php echo CommonLanguage::getMessage($is_actual ? 'to_official' : 'to_actual'); ?></button>
                                <?php } ?>
                            </th>
                            <th></th>
                            <th></th>
                            <th class="text-center"><strong id="total"></strong></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="ConfirmDelete" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header text-left">
                <h4 class="modal-title bold"><?php print CommonLanguage::getMessage('Confirm_Delete') ?></h4>
                <div id="delete_alert"></div>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12 m-t-10">
                        <p><?php print CommonLanguage::getMessage('about_delete_record') ?>&nbsp;<span id="rec_nb" class="bold red-star"></span></p>
                        <p><span id="del_alert" class="red-star"></span></p>
                        <p><?php print CommonLanguage::getMessage('Proceed_Delete') ?></p>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"><?php print CommonLanguage::getMessage('Close') ?></button>
                <button type="button" class="btn btn-danger width-auto" id="rec_delete"><?php print CommonLanguage::getMessage('delete') ?></button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="change_actual_modal" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <div id="change_act_alert"></div>
                <h4 class="modal-title"><?php print CommonLanguage::getMessage($is_actual ? 'to_official_alert' : 'to_actual_alert') ?></h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12 m-t-10">
                        <span id="act_nb" class="bold red-star"></span>
                        <p><?php print CommonLanguage::getMessage('proceed') . ' ?' ?></p>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"><?php print CommonLanguage::getMessage('Close') ?></button>
                <button type="button" class="btn btn-danger width-auto" id="change_act_btn"><?php print CommonLanguage::getMessage('proceed') ?></button>
            </div>
        </div>
    </div>
</div>
<script>
    var IsReceipt = <?php echo $IsReceipt ? "true" : "false" ?>;
    var is_return = <?php echo $is_return ? "true" : "false" ?>;
    var IsActual = <?php echo $is_actual ? "true" : "false" ?>;
    var title = <?php echo json_encode(CommonLanguage::getMessage($IsReceipt ? 'receipt_list' : 'payment_list')); ?>;
    var data_linked_to_app = <?php echo json_encode(CommonLanguage::getMessage('data_linked_to_app')); ?>;
    var data_linked_to_subscription = <?php echo json_encode(CommonLanguage::getMessage('receipt_linked_to_subscription')); ?>;
    var today = <?php echo json_encode($today) ?>,
        rec_to_delete = [],
        rec_nb_del = [],
        rec_to_change = [],
        rec_nb_act = [];
    $(function() {
        build_select2($("#salesman_id"), "xhr/employeeSearch");
        build_select2($("#user_id"), "xhr/CommonSearch?col_name=User_Name&col_id=User_ID&table=tbl_common_users");
        build_select2($("#search_branch_id"), "xhr/CommonSearch?col_name=branch_name&col_id=branch_id&table=tbl_organization_branches");

        var data_session = get_storage_element(page_link);
        if (data_session.Payment_Date_From != undefined && data_session.Payment_Date_To != undefined) {
            window.startDate = data_session.Payment_Date_From;
            window.endDate = data_session.Payment_Date_To;
            $("input[name=From_To_Date]").val(data_session.Payment_Date_From + ' - ' + data_session.Payment_Date_To)
        }
        ChangeTable()
        $("input[name=From_To_Date]").daterangepicker({}, function(start, end, label) {
            window.startDate = start.format("YYYY-MM-DD"),
                window.endDate = end.format("YYYY-MM-DD")
            ChangeTable();

        });
        $("#salesman_id,#user_id,#link_filter,#pending_filter,#search_branch_id").on("change", function() {
            ChangeTable();
        })

        //        $("#tableWithSearch").on("click", ".delete_pay", function () {
        //            var entry_value = $(this).parents('.Action').attr('data-id'),
        //                    data_link_subscription = $(this).attr('data-subscription-fees-id') ? data_linked_to_subscription : '',
        //                    is_returned = data_link_subscription == '' ? '' : 1;
        //            var data = {
        //                id: entry_value,
        //                is_receipt: (IsReceipt ? 1 : 0),
        //                is_actual: (IsActual ? 1 : 0),
        //                is_return: (is_return ? 1 : 0),
        //                prefix: $(this).attr("data-prefix")
        //            };
        //            var alert_before = '';
        //            if ($(this).attr('data-inv-linked') == 1) {
        //                alert_before = '<?php echo CommonLanguage::getMessage('pay_linked_inv') ?>';
        //            }
        //            IncludeDeleteModal(common_delete_modal, data, function () {
        //                ChangeTable();
        //            }, "ACCAjax/delete_payment_receipt", alert_before + data_link_subscription, is_returned);
        //        })


        $("#delete_all").on("click", function() {
            rec_to_delete = []
            rec_nb_del = []
            $("#tableWithSearch .del_td:checked").each(function() {
                rec_to_delete.push($(this).attr("data-id"));
                rec_nb_del.push($(this).attr("data-nb"));
            })
            if ($("#tableWithSearch .del_td:checked").length > 0) {
                $("#rec_nb").html(rec_nb_del.join())
                $("#ConfirmDelete").modal("show")
            }
        })
        $("#tableWithSearch").on("click", ".delete_pay", function() {
            $('#rec_delete').attr('disabled', false);
            rec_to_delete = [$(this).parents(".Action").attr("data-id")];
            $("#rec_nb").html($(this).parents("tr").find("td:eq(0)").text())
            $("#ConfirmDelete").modal("show");
        })
        $("#rec_delete").on("click", function() {
            $.ajax({
                url: "ACCAjax/delete_payment_receipt",
                method: "GET",
                data: {
                    ids: rec_to_delete,
                    is_receipt: (IsReceipt ? 1 : 0),
                    is_actual: (IsActual ? 1 : 0),
                    is_return: (is_return ? 1 : 0)
                },
                complete: function(v1, v2) {
                    if (v2 == 'success') {
                        if (v1.responseText == 'ok') {
                            $("#delete_alert").attr("class", "alert alert-success").html('<?php echo CommonLanguage::getMessage('Deleted_Successfully') ?>')
                            rec_to_delete = []
                            ChangeTable()
                            setTimeout(function() {
                                $("#ConfirmDelete").modal("hide")
                                $("#delete_alert").addClass("hidden")
                            }, 1500)
                        } else {
                            $("#delete_alert").attr("class", "alert alert-danger").html(v1.responseText)
                        }
                    }
                }
            });

        })
        $("#tableWithSearch").on("click", "input.check_all_td", function(e) {
            var is_checked = $(this).is(":checked");
            var row = $("#tableWithSearch").dataTable().fnGetNodes();
            for (var i = 0; i < row.length; i++) {
                $(row[i]).find("input.del_td").prop("checked", is_checked);
            }
        });
        $("#tableWithSearch").on("click", ".change_actual", function() {
            rec_to_change = [$(this).parents(".Action").attr("data-id")];
            $("#act_nb").html($(this).parents("tr").find("td:eq(0)").text())
            $("#change_actual_modal").modal("show")
        })
        $("#change_actual").on("click", function() {
            rec_to_change = []
            rec_nb_act = []
            $("#tableWithSearch .del_td:checked").each(function() {
                rec_to_change.push($(this).attr("data-id"));
                rec_nb_act.push($(this).attr("data-nb"));
            })
            if ($("#tableWithSearch .del_td:checked").length > 0) {
                $("#act_nb").html(rec_nb_act.join())
                $("#change_actual_modal").modal("show")
            }
        })
        $("#change_act_btn").on("click", function() {
            $.ajax({
                url: "ACCAjax/change_pay_rec_actual",
                method: "POST",
                data: {
                    id: rec_to_change,
                    is_receipt: (IsReceipt ? 1 : 0),
                    is_actual: (IsActual ? 0 : 1),
                    is_return: (is_return ? 1 : 0)
                },
                complete: function(v1, v2) {
                    if (v2 == 'success') {
                        if (v1.responseText == 'OK') {
                            $("#change_act_alert").attr("class", "alert alert-success").html('<?php echo CommonLanguage::getMessage('Submitted_Successfully') ?>')
                            rec_to_change = []
                            ChangeTable()
                            setTimeout(function() {
                                $("#change_actual_modal").modal("hide")
                                $("#change_act_alert").addClass("hidden")
                            }, 1500)
                        } else {
                            $("#change_act_alert").attr("class", "alert alert-danger").html(v1.responseText)
                        }
                    }
                }
            })
        })
    })

    function ChangeTable() {
        var Date = {
            Is_Receipt: IsReceipt ? 1 : 0,
            Is_Actual: IsActual ? 1 : 0,
            is_return: is_return ? 1 : 0,
            salesman_id: $("#salesman_id").val(),
            user_id: $("#user_id").val(),
            link_filter: $("#link_filter").val(),
            is_pending: $("#pending_filter").val(),
            search_branch_id: $("#search_branch_id").val(),
            Payment_Date_From: (window.startDate ? window.startDate : today),
            Payment_Date_To: (window.endDate ? window.endDate : today)
        };
        set_storage_element(page_link, Date);
        $.ajax({
            url: "ACCAjax/get_total_payments_receipt",
            data: Date,
            complete: function(v1, v2) {
                if (v2 == "success") {
                    var optns = {
                        cb_ft: function(dt_optns) {
                            // stop sorting for column since on click on header checkbox the sorting is triggered
                            dt_optns.columnDefs.push({
                                targets: [0],
                                "orderable": false
                            });
                        }
                    };
                    RebuildDataTable(title, [0, 1, 2, 3, 4, 5, 6, 7], 'ACCAjax/PaymentListRequest', Date, '#tableWithSearch', [0, 1, 2, 7, 8], optns);
                    $("#total").html(v1.responseText);
                }
            }
        })

    }
</script>