<div class="row">
    <div class="container">
        <ol class="breadcrumb">
            <li><a href="#">التقارير</a></li>
            <li class="active">عرض الفواتير مجمع</li>
        </ol>
        <div class="panel panel-default panel-m">
            <!-- Default panel contents -->
            <div class="panel-heading">
                عرض الفواتير مجمع
                <a href="{$youtubes[43]->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="panel-body">
                <form class="form-inline hidden-print" action="sellbillController.php?do=show" method="post">
                    <div class="form-group">
                        <label class="sr-only">العميل</label>
                        <select class="select2 wdt100 search_bill"  name="clientid" id="clientid" >
                            <option value="-1">اختر عميل</option>
                            {foreach $clientData as $client}
                            <option value="{$client->clientid}">{$client->clientname}</option>
                            {/foreach}
                        </select>
                    </div>

                    <div class="form-group" >
                        <label class="sr-only">مندوب / طبيب / بائع</label>
                        <select class="select2 wdt100 search_bill"  name="sellerid" id="sellerid" >
                            <option value="-1">اختر </option>
                            {foreach $sellerData as $mysellerData}
                            <option value="{$mysellerData->userid}">{$mysellerData->employeename}</option>
                            {/foreach}
                        </select>
                    </div>

                    <div class="form-group">
                        <label class="sr-only">اسم المستخدم</label>
                        <select class="select2 wdt100 search_bill"  name="selleruserid" id="selleruserid" >
                            <option value="-1">اختر المستخدم</option>
                            {foreach $sellerinsertData as $mysellerinsertData}
                            <option value="{$mysellerinsertData->userid}">{$mysellerinsertData->employeename}</option>
                            {/foreach}
                        </select>
                    </div>



                    <div class="form-group">
                        <label class="sr-only">رقم الفاتورة</label>
                        <input type="text" class="form-control search_bill" placeholder="رقم الفاتورة" name="sellbillserial" id="sellbillserial">
                    </div>
                    <div class="form-group">
                        <label class="sr-only">الرقم تسلسل الفاتورة</label>
                        <input type="text" class="form-control search_bill" placeholder="رقم تسلسل الفاتورة" name="sellbillid" id="sellbillid">
                    </div>
                    <br/>
                    <div class="form-group">
                        <label class="sr-only">المخزن</label>
                        <select class="select2 wdt100 search_bill"  name="storeid" id="storeid" >
                            <option value="-1">اختر المخزن</option>
                            {foreach $stores as $data}
                            <option value="{$data->storeId}">{$data->storeName}</option>
                            {/foreach}
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="sr-only">الخزنة</label>
                        <select class="select2 wdt100 search_bill"  name="saveid" id="saveid" >
                            <option value="-1">اختر الخزنة</option>
                            {foreach $saves as $data}
                            <option value="{$data->saveid}">{$data->savename}</option>
                            {/foreach}
                        </select>
                    </div>
                    <!--                    <div class="form-group">
                                            <label class="sr-only">نوع السعر</label>
                                            <select class="select2 search_bill wdt100" name="pricetype" id="pricetype">
                                                <option value="-1"></option>
                                                <option value="0">جملة</option>
                                                <option value="1">تجزئة</option>
                                                <option value="2">نصف جملة</option>
                                            </select>
                                        </div>-->
                    <div id="dateTimeDiv">
                        <div class="form-group">
                            <label class="sr-only">من التاريخ</label>
                            <div  class="input-group date form_datetime col-md-5" data-date="" data-date-format="yyyy-mm-dd  h:i:s" data-link-field="dtp_input1">
                                <input class="form-control search_bill" size="16" type="text" value="" name="from" id="from" readonly="" >
                                <span class="input-group-addon " style="width: 0%;"><span class=" glyphicon glyphicon-remove col-lg-4"></span></span>
                                <span class="input-group-addon"  style="width: 0%;"><span class="glyphicon glyphicon-th col-lg-4"></span></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="sr-only">إلى التاريخ</label>
                            <div  class="input-group date form_datetime col-md-5" data-date="" data-date-format="yyyy-mm-dd  h:i:s" data-link-field="dtp_input1">
                                <input class="form-control search_bill" size="16" type="text" value="" name="to" id="to" readonly="" >
                                <span class="input-group-addon " style="width: 0%;"><span class=" glyphicon glyphicon-remove col-lg-4"></span></span>
                                <span class="input-group-addon" style="width: 0%;"><span class="glyphicon glyphicon-th col-lg-4"></span></span>
                            </div>
                        </div>
                    </div>

                    <div id="dateOnlyDiv">
                        <div class="form-group">
                            <label class="sr-only">من التاريخ</label>
                            <input type="text" class="form-control awdatepicker search_bill" autocomplete="off"   data-date-format="yyyy-mm-dd" name="from" id="from">
                        </div>
                        <div class="form-group">
                            <label class="sr-only">إلى التاريخ</label>
                            <input type="text" class="form-control awdatepicker search_bill" autocomplete="off"   data-date-format="yyyy-mm-dd" name="to" id="to">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="sr-only">بحث بـ</label>
                        <div  class="input-group">
                            <label>  <input value="dateOnly" name="search" id="searchdateOnly" type="radio" checked onclick='localStorage.setItem("search", "dateOnly");
                                    window.location.reload();'>
                                تاريخ</label>
                            <label>
                                <input value="dateTime" name="search" id="searchdateTime" type="radio" onclick='localStorage.setItem("search", "dateTime");
                                        window.location.reload();'>
                                تاريخ ووقت</label>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                    <!--<button type="submit" class="btn btn-primary">بحث</button>-->
                </form>







                <!-- ================================================   -->
                <!-- Nav tabs -->
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#sell" data-toggle="tab">فواتير البيع</a></li>
                    <li><a href="#sellAndRet" data-toggle="tab">فواتير البيع و المردود</a></li>
                    <li><a href="#retSell" data-toggle="tab">فواتير المردود</a></li>
                </ul>
                <!-- =================================================   -->
                <!-- Tab panes -->
                <div class="tab-content">
                    <div class="tab-pane active" id="sell">
                        <table class="table table-black" id="billTablesell">
                            <thead>
                                <tr>
                                    <th>م</th>
                                    <th>رقم تسلسل الفاتورة</th>
                                    <th>رقم الفاتورة</th>
                                    <th>اجمالى الفاتورة</th>
                                    <th>تاريخ الفاتورة</th>
                                    <th>العميل</th>
                                    <th class="hidden-print">تفاصيل الفاتورة</th>
                                    {if $usergroup->allowEditDelInBills eq 0}<th class="hidden-print">تعديل الفاتورة</th>
                                    <th class="hidden-print">حذف</th>{/if}
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                        <br/>
                        <div class="row">
                            <div class="col-lg-offset-8 col-lg-4 ">
                                <div class="well well-sm">
                                    <h4 class="text-center">إجمالي الفواتير  <span id="totalsell">0</span></h4>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="sellAndRet">
                        <table class="table table-black" id="billTablesellAndRet">
                            <thead>
                                <tr>
                                    <th>م</th>
                                    <th>رقم تسلسل الفاتورة</th>
                                    <th>اجمالى الفاتورة</th>
                                    <th>تاريخ الفاتورة</th>
                                    <th>العميل</th>
                                    <th class="hidden-print">تفاصيل الفاتورة</th>
                                    {if $usergroup->allowEditDelInBills eq 0}<th class="hidden-print">تعديل الفاتورة</th>
                                    <th class="hidden-print">حذف</th>{/if}
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                        <br/>
                        <div class="row">
                            <div class="col-lg-offset-8 col-lg-4 ">
                                <div class="well well-sm">
                                    <h4 class="text-center">إجمالي الفواتير  <span id="totalsellAndRet">0</span></h4>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="retSell">
                        <table class="table table-black" id="billTableretSell">
                            <thead>
                                <tr>
                                    <th>رقم تسلسل الفاتورة</th>
                                    <th>الرقم الفاتورة</th>
                                    <th>اجمالى الفاتورة</th>
                                    <th>تاريخ الفاتورة</th>
                                    <th>العميل</th>
                                    <th class="hidden-print">تفاصيل الفاتورة</th>
                                    {if $usergroup->allowEditDelInBills eq 0}<th class="hidden-print">تعديل الفاتورة</th>
                                    <th class="hidden-print">حذف</th>{/if}
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                        <br/>
                        <div class="row">
                            <div class="col-lg-offset-8 col-lg-4 ">
                                <div class="well well-sm">
                                    <h4 class="text-center">إجمالي الفواتير  <span id="totalretSell">0</span></h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end of tabs -->
                <!--**********************************************************************-->
            </div>
        </div>
    </div>
</div>

{literal}
<script>
    $(function () {
        var tablesell = $('#billTablesell');
        var otablesell = tablesell.DataTable({
            "processing": true,
            "stateSave": true,
            "serverSide": true,
            "ajax": {url: 'sellbillController.php?do=showallajax', type: 'POST',
                "data": {
                    "from": function () {
                        return $('#from').val()
                    },
                    "to": function () {
                        return $('#to').val()
                    },
                    "sellbillserial": function () {
                        return $('#sellbillserial').val()
                    },
                    "sellbillid": function () {
                        return $('#sellbillid').val()
                    },
                    "clientid": function () {
                        return $('#clientid').val()
                    },
                    "sellerid": function () {
                        return $('#sellerid').val()
                    },
                    "selleruserid": function () {
                        return $('#selleruserid').val()
                    },
                    "storeid": function () {
                        return $('#storeid').val()
                    },
                    "saveid": function () {
                        return $('#saveid').val()
                    },
//                    "pricetype": function () {
//                        return $('#pricetype').val()
//                    },
                    "searchDate": function () {
                        return localStorage.getItem("search")
                    },
                    // etc..
                }}, //  server side processing
            "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                if (aData[0].includes("danger"))//not deleted
                {
                    $('td', nRow).css('background-color', '#F2DEDE');
                } else if (aData[0].includes("dark"))
                {
                    $('td', nRow).css('background-color', '#9E9E9E');
                }
//                else
//                {
//                    $('td', nRow).css('background-color', 'white');
//                }
            },
            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": [//            {// set default column settings //                "orderable": false,
                //                "searchable": false,
//                "targets": [lstone],
                //                "className": 'hide-print'
                //            },
                //            {// set default column settings
                //                "orderable": false,
                //                "searchable": false,
                //                "targets": [belastone],
                //                "className": 'hide-print'
                //            },
                //            {// set default column settings
                //                "orderable": false,
                //                "searchable": false, //                "targets": [thrdone],
//                "className": 'hide-print'
                //            },
                {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>>"
        });

        var tablesellAndRet = $('#billTablesellAndRet');
        var otablesellAndRet = tablesellAndRet.DataTable({
            "processing": true,
            "stateSave": true,
            "serverSide": true,
            "ajax": {url: 'sellbillandruternController.php?do=showallajax', type: 'POST',
                "data": {
                    "from": function () {
                        return $('#from').val()
                    },
                    "to": function () {
                        return $('#to').val()
                    },
                    "sellbillserial": function () {
                        return $('#sellbillserial').val()
                    },
                    "sellbillid": function () {
                        return $('#sellbillid').val()
                    },
                    "clientid": function () {
                        return $('#clientid').val()
                    },
                    "sellerid": function () {
                        return $('#sellerid').val()
                    },
                    "selleruserid": function () {
                        return $('#selleruserid').val()
                    },
                    "storeid": function () {
                        return $('#storeid').val()
                    },
                    "saveid": function () {
                        return $('#saveid').val()
                    },
//                    "pricetype": function () {
//                        return $('#pricetype').val()
//                    },
                    "searchDate": function () {
                        return localStorage.getItem("search")
                    },
                    // etc..
                }}, //  server side processing
            "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                console.log(aData[0]);
                if (aData[0].includes("danger"))//not deleted
                {
                    $('td', nRow).css('background-color', '#F2DEDE');
                } else if (aData[0].includes("dark"))
                {
                    $('td', nRow).css('background-color', '#9E9E9E');
                }
//                else
//                {
//                    $('td', nRow).css('background-color', 'white');
//                }
            },
            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": [//            {// set default column settings //                "orderable": false,
                //                "searchable": false,
//                "targets": [lstone],
                //                "className": 'hide-print'
                //            },
                //            {// set default column settings
                //                "orderable": false,
                //                "searchable": false,
                //                "targets": [belastone],
                //                "className": 'hide-print'
                //            },
                //            {// set default column settings
                //                "orderable": false,
                //                "searchable": false, //                "targets": [thrdone],
//                "className": 'hide-print'
                //            },
                {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>>"
        });

        var tableretSell = $('#billTableretSell');
        var otableretSell = tableretSell.DataTable({
            "processing": true,
            "stateSave": true,
            "serverSide": true,
            "ajax": {url: 'returnsellbillController.php?do=showallajax', type: 'POST',
                "data": {
                    "from": function () {
                        return $('#from').val()
                    },
                    "to": function () {
                        return $('#to').val()
                    },
                    "sellbillserial": function () {
                        return $('#sellbillserial').val()
                    },
                    "sellbillid": function () {
                        return $('#sellbillid').val()
                    },
                    "clientid": function () {
                        return $('#clientid').val()
                    },
                    "sellerid": function () {
                        return $('#sellerid').val()
                    },
                    "selleruserid": function () {
                        return $('#selleruserid').val()
                    },
                    "storeid": function () {
                        return $('#storeid').val()
                    },
                    "saveid": function () {
                        return $('#saveid').val()
                    },
                    "pricetype": function () {
                        return $('#pricetype').val()
                    },
                    "searchDate": function () {
                        return "dateOnly"//localStorage.getItem("search")
                    },
                    // etc..
                }}, //  server side processing
            "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                console.log(aData[0]);
                if (aData[0].includes("danger"))//not deleted
                {
                    $('td', nRow).css('background-color', '#F2DEDE');
                } else if (aData[0].includes("dark"))
                {
                    $('td', nRow).css('background-color', '#9E9E9E');
                }
//                else
//                {
//                    $('td', nRow).css('background-color', 'white');
//                }
            },
            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": [//            {// set default column settings //                "orderable": false,
                //                "searchable": false,
//                "targets": [lstone],
                //                "className": 'hide-print'
                //            },
                //            {// set default column settings
                //                "orderable": false,
                //                "searchable": false,
                //                "targets": [belastone],
                //                "className": 'hide-print'
                //            },
                //            {// set default column settings
                //                "orderable": false,
                //                "searchable": false, //                "targets": [thrdone],
//                "className": 'hide-print'
                //            },
                {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>>"
        });

        $('body').on('change', '.search_bill', function () {
            otablesell.ajax.reload();
            otablesellAndRet.ajax.reload();
            otableretSell.ajax.reload();
            //otablesell.draw();//both work fine
        });
        //when draw is comlete cal total of column using datatable api sum func
        otablesell.on('draw', function (e, ajaxdata) {
            //var sum = otablesell.column(3).data().sum();
            $('#totalsell').html(ajaxdata.json.totals.totalBills);
        });
        otablesellAndRet.on('draw', function (e, ajaxdata) {
            var sum = otablesellAndRet.column(2).data().sum();
            $('#totalsellAndRet').html(ajaxdata.json.totals.totalBills);
        });
        otableretSell.on('draw', function (e, ajaxdata) {
            var sum = otableretSell.column(2).data().sum();
            $('#totalretSell').html(ajaxdata.json.totals.totalBills);
        });
//        //when draw is comlete cal total of column using datatable api sum func
//        otablesell.on('draw', function (e, ajaxdata) {
//            var sum = otablesell.column(3).data().sum();
//            $("#piecesCount").html(ajaxdata.json.totals.piecesCount);
//            $("#payedTotal").html(ajaxdata.json.totals.payedTotal);
//            $("#remainTotal").html(ajaxdata.json.totals.remainTotal);
//            $("#totalBills").html(ajaxdata.json.totals.totalBills);
//            $("#totalBills2").html(ajaxdata.json.totals.totalBills);
//
//            //$('#total_txt').html("- مجموع " + $("#typeshow option:selected").text() + " <u>المعروضة</u> : ");
//            //$('#total').html(sum);
//        });

    });
//
    var search = localStorage.getItem("search");
    if (search == "dateTime") {
        $('#searchdateTime').attr('checked', 'checked');
        $('#searchdateOnly').removeAttr('checked');
        //
        $('#dateTimeDiv').show();
        $('#dateOnlyDiv').remove();
    } else {
        $('#searchdateOnly').attr('checked', 'checked');
        $('#searchdateTime').removeAttr('checked');
        //
        $('#dateOnlyDiv').show();
        $('#dateTimeDiv').remove();
    }

</script>
{/literal}
