<style>
    .col-lg-offset-8{
        margin-right: auto !important;
    }
    @media print {
        p,h4,h3,h2,h1,span,label,td,th,div.dataTables_info,a,.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
        div.dataTables_wrapper div.dataTables_info, tr.odd td.sorting_1{
            color:#000!important
        }
        .table thead>tr>th, .table tbody>tr>th, .table tfoot>tr>th, .table thead>tr>td, .table tbody>tr>td, .table tfoot>tr>td{
            text-align: center!important
        }
        body{
            direction: rtl;
        }
    }

    .form-group{
        margin-left: 5px;
    }

</style>
<div class="row">
    <div class="container">
        <ol class="breadcrumb">
            <li><a href="#">لتقارير</a></li>
            <li><a href="clientdebt.php">تقرير مديونيات عملاء مجمع</a></li>
            <li class="active">عرض التقرير</li>
        </ol>
        <div class="panel panel-default">
            <!-- Default panel contents -->

            <div class="panel-heading">تقرير مديونيات عملاء مجمع

                <a href="{$youtubes[139]->url}" target="_blank" class="hidden-print"><img src="../views/default/assets/img/youtube.png" class="pull-left" alt="Youtube" style="width: 2%;"></a>

            </div>
            <form class="form-inline hidden-print " method="post">
                <h3>اظهار</h3>
                <div class="form-group">
                    <label class="sr-only" for="payment">
                        <input type="checkbox" name="payment" id="payment" value="1">بيانات اخر سداد</label>
                </div>
                <div class="form-group">
                    <label class="sr-only" for="sell">
                        <input type="checkbox" name="sell" id="sell" value="1">تاريخ اخر فاتورة بيع</label>
                </div>
                <div class="form-group">
                    <label class="sr-only" for="ret">
                        <input type="checkbox" name="ret" id="ret" value="1">تاريخ اخر فاتورة مردود بيع</label>
                </div>
                <div class="form-group">
                    <label class="sr-only" for="sellRet">
                        <input type="checkbox" name="sellRet" id="sellRet" value="1">تاريخ اخر فاتورة بيع و رد</label>
                </div>

                <button type="button" class="btn btn-primary" id="refreshBtn">تحديث</button>
            </form>
            <div class="col-lg-offset-8 col-lg-4 hidden-print">
                <div class="well well-sm">
                    <h4 class="text-center">إجمالي مديونية العملاء الغير محذوفين المعروضين <br/>
                        <span class="total">{$sum}</span>  {$currency}</h4>
                </div>
            </div>


            <div class="col-lg-offset-8 col-lg-4 hidden-print">
                <div class="well well-sm">
                    <h4 class="text-center">إجمالي مديونية العملاء الغير محذوفين بالموجب المعروضين <br/>
                        <span class="plussum">{$plussum}</span>  {$currency}</h4>
                </div>
            </div>

            <div class="col-lg-offset-8 col-lg-4 hidden-print">
                <div class="well well-sm">
                    <h4 class="text-center">إجمالي مديونية العملاء الغير محذوفين بالسالب المعروضين <br/>
                        <span class="minussum">{$minussum}</span>  {$currency}</h4>
                </div>
            </div>


            <div class="clearfix"></div>

            <table class="table table-black rtl" id="clientTable">
                <thead>
                    <tr id="tr_head">
                        <th>م</th>
                        <th>اسم العميل</th>
                        <th>المديونية</th>
                        <th>التليفون</th>
                        <th>الموبايل</th>
                        <th>المنطقة</th>
                        <!--                        <th>تاريخ اخر ايصال سداد</th>
                                                <th>مبلغ اخر ايصال سداد</th>
                                                <th>نوع السداد</th>
                                                <th>تاريخ اخر فاتورة بيع</th>
                                                <th>تاريخ اخر فاتورة مردود بيع</th>
                                                <th>تاريخ اخر فاتورة بيع و رد</th>-->
                        <th>المندوب</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
            <!-- Table -->
            <!--            <table class="dataTableClass table-black">
                            <thead>
                                <tr>
                                    <th>اسم العميل</th>
                                    <th>المديونية</th>
                                </tr>
                            </thead>
                            <tbody>
                                {foreach $shownData as $data}
                                {if $data->clientdebt neq 0}
                                <tr>
                                    <td>{$data->clientname}</td>
                                    <td>{$data->clientdebt}</td>
                                </tr>
                                {/if}
                                {/foreach}
                            </tbody>
                        </table>-->
            <div class="clearfix"></div>
            <br/>
            <div class="col-lg-offset-8 col-lg-4">
                <div class="well well-sm">
                    <h4 class="text-center">إجمالي مديونية العملاء الغير محذوفين المعروضين <br/>
                        <span class="total">{$sum}</span>  {$currency}</h4>
                </div>
            </div>

            <div class="col-lg-offset-8 col-lg-4">
                <div class="well well-sm">
                    <h4 class="text-center">إجمالي مديونية العملاء الغير محذوفين بالموجب المعروضين <br/>
                        <span class="plussum">{$plussum}</span>  {$currency}</h4>
                </div>
            </div>

            <div class="col-lg-offset-8 col-lg-4">
                <div class="well well-sm">
                    <h4 class="text-center">إجمالي مديونية العملاء الغير محذوفين بالسالب المعروضين <br/>
                        <span class="minussum">{$minussum}</span>  {$currency}</h4>
                </div>
            </div>
            <div class="clearfix"></div>
            <div  class="noprint">
                <div class="col-lg-12">
                    <div class="form-group">
                        <div class="col-lg-4">
                            <button type="button" onclick="print_Custom('mycustomheader');" class="btn btn-success pull-right hidden-print">طباعة</button>
                        </div>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
    {literal}
    <script>
        if (window.matchMedia("(max-width: 767px)").matches) {
            var buttons = [];
        } else {
            var buttons = [//'csv', 'pdf'
                {
                    extend: "print",
                    className: "btn dark btn-outline",
                    text: "طباعه<i class='fa fa-print'></i>",
                    exportOptions: {
                        //columns: '.show-print'
                        columns: ':visible'
                    },
                    customize: function (win) {
                        $(win.document.body).find('table')
                                //.addClass('compact')
                                .css('direction', 'rtl');
                    }
                }, {
                    extend: "copy",
                    className: "btn red btn-outline",
                    text: "نسخ",
                    exportOptions: {
                        //columns: '.show-print'
                        columns: ':visible'
                    }
                }, {
                    extend: "excel",
                    className: "btn yellow btn-outline ",
                    text: "اكسل",
                    exportOptions: {
                        //columns: '.show-print'
                        columns: ':visible'
                    }
                }, {
                    extend: "colvis",
                    className: "btn dark btn-outline",
                    text: "المكونات"
                }
            ];
        }


        function draw_clientTable() {
            var payment = $('#payment').is(':checked') ? 1 : 0;
            var sell = $('#sell').is(':checked') ? 1 : 0;
            var ret = $('#ret').is(':checked') ? 1 : 0;
            var sellRet = $('#sellRet').is(':checked') ? 1 : 0;

            var th = '<th>م</th>' +
                    '<th>اسم العميل</th>' +
                    '<th>المديونية</th>' +
                    '<th>التليفون</th>' +
                    '<th>الموبايل</th>' +
                    '<th>المنطقة</th>' +
                    '<th>المندوب</th>';
            if ($('#payment').is(':checked')) {
                th += '<th>تاريخ اخر ايصال سداد</th>' +
                        '<th>مبلغ اخر ايصال سداد</th>' +
                        '<th>نوع السداد</th>';
            }
            if ($('#sell').is(':checked')) {
                th += '<th>تاريخ اخر فاتورة بيع</th>';
            }
            if ($('#ret').is(':checked')) {
                th += '<th>تاريخ اخر فاتورة مردود بيع</th>';
            }
            if ($('#sellRet').is(':checked')) {
                th += '<th>تاريخ اخر فاتورة بيع و رد</th>';
            }

            $('#tr_head').html(th);

            if ($('#clientTable').length > 0) {
                var table = $('#clientTable');
                if ($.fn.DataTable.isDataTable('#clientTable')) {
                    table.DataTable().destroy();
                }

                var otable = table.DataTable({
                    "processing": true,
                    "stateSave": true,
                    "serverSide": true,
                    "ajax": {url: 'clientdebt.php?do=showallajax', type: 'POST',
                        "data": {
                            "payment": function () {
                                return payment;
                            },
                            "sell": function () {
                                return sell;
                            },
                            "ret": function () {
                                return ret;
                            },
                            "sellRet": function () {
                                return sellRet;
                            },
                            // etc..
                        }}, //  server side processing
                    dom: 'Bfrtip',
                    buttons: buttons,
                    "bStateSave": true,
                    "language": {
                        "aria": {
                            "sortAscending": ": Used to order Ascending",
                            "sortDescending": ": Used to order Descending"
                        },
                        "emptyTable": "لا يوجد بيانات",
                        "info": "عرض من  _START_ إلى  _END_  - عدد نتائج البحث _TOTAL_",
                        "infoEmpty": "لا يوجد بيانات",
                        "infoFiltered": "(تنقيه  من عدد عملاء كلى _MAX_)",
                        "lengthMenu": " _MENU_ عنصر",
                        "search": "البحث:",
                        "zeroRecords": "لا يوجد بيانات تشابه البحث"
                    },
                    responsive: !0,
                    "columnDefs": [
                        {targets: '_all', "className": 'show-print'}],
                    order: [
                        [0, "asc"]
                    ],
                    paging: true,
                    lengthMenu: [
                        [5, 10, 15, 20, 50, -1],
                        [5, 10, 15, 20, 50, "All"]
                    ],
                    pageLength: 10,
                    dom: "<'row' <'col-md-12'B>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>"
                });
                //when draw is comlete cal total of column using datatable api sum func
                otable.on('draw', function (e, ajaxdata) {
                    var sum = otable.column(2).data().sum();
                    //$("#piecesCount").html(ajaxdata.json.totals.piecesCount);
                    $('.total').html(sum);
                });
                otable.on('draw', function (e, ajaxdata) {
                    $(".plussum").html(ajaxdata.json.totals.plussum);
                    $(".minussum").html(ajaxdata.json.totals.minussum);
                });
            }
        }

        $('#refreshBtn').on('click', function () {
            draw_clientTable();
        });

        $(function () {
            draw_clientTable();
        });

    </script>
    {/literal}