<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;
        }
    }

</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>

            <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>
                        <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>
        $(function () {
            var table = $('#clientTable');
            var otable = table.DataTable({
                "processing": true,
                "stateSave": true,
                "serverSide": true,
                "ajax": {url: 'clientdebt.php?do=showallajax', type: 'POST',
                    "data": {
//                        "from": function () {
//                            return $('#from').val()
//                        },
                        // etc..
                    }}, //  server side processing
                dom: 'Bfrtip',
                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: "المكونات"
                    }
                ], "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);

            });

        });
    </script>
    {/literal}