

<div class="row">
    <div class="container">
        <ol class="breadcrumb">
            <li><a href="#">تقرير مبيعات عميل للتصنيفات الرئيسية</a></li>
        </ol>
        <div class="panel panel-default panel-m">
            <!-- Default panel contents -->
            <div class="panel-heading">  
                <a href="{$youtubes[164]->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">
                
                  {literal}
                <form class="form-horizontal" enctype="multipart/form-data" role="form" action="customerSalesReportMainCategories.php" method="post" id="spform">

                    {/literal}



                    <div class="form-group">
                        <label for="nameEn" class="col-lg-2 control-label">من التاريخ</label>
                        <div class="col-lg-4">
                            <input type="text" class="form-control awdatepicker " required  name="fromdate"   data-date-format="yyyy-mm-dd"  >
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="nameEn" class="col-lg-2 control-label">إلى التاريخ</label>
                        <div class="col-lg-4">
                            <input type="text" class="form-control awdatepicker " required  name="todate"   data-date-format="yyyy-mm-dd"  >
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="nameEn" class="col-lg-2 control-label">نوع العميل</label>
                        <div class="col-lg-4">
                            <select class="form-control" name="typeclientid">
                                {foreach $allClientTypes as $type}
                                    <option value="{$type.typeId}">{$type.typeName}</option>
                                {/foreach}
                            </select>
                        </div>
                    </div>



                    <!-- =================================================   -->

                    <div class="form-group">
                        <div class="col-lg-offset-2 col-lg-4">
                            <button type="submit" class="btn btn-primary pull-left" id="spbutton">بحث </button>
                        </div>
                    </div>




                </form>
                

            

            </div>

            <div class="clearfix"></div>
            <hr/>
           <table class="table table-bordered border-primary dataTableClassRep" >
                <thead>
                    <tr>
                        <th>العميل</th>
                        <th>نوع العميل</th>
                        {foreach $categories as $catName}
                            <th>{$catName}</th>
                        {/foreach}
                        <th>الإجمالي</th>
                    </tr>
                </thead>
                <tbody>
            
                    {foreach $customers as $custId => $custName}
                        <tr>
                            <td>{$custName.customer_name}</td>
                            <td>{$typeName.typeName}</td>
            
                            {foreach $categories as $catId => $catName}
                                <td style="text-align:right">
                                    {number_format($table[$custId][$catId]|default:0, 2)}
                                </td>
                            {/foreach}
            
                            <td style="font-weight:bold;text-align:right">
                                {number_format($rowTotals[$custId]|default:0, 2)}
                            </td>
                        </tr>
                    {/foreach}
            
                </tbody>
                <tfoot>
                    <!-- الإجمالي -->
                    <tr style="background:#eee;font-weight:bold">
                        <td colspan="3">الإجمالي</td>
            
                        {foreach $categories as $catId => $catName}
                            <td style="text-align:right">
                                {number_format($colTotals[$catId]|default:0, 2)}
                            </td>
                        {/foreach}
            
                        <td style="text-align:right">
                            {number_format($grandTotal|default:0, 2)}
                        </td>
                    </tr>
            </tfoot>
            </table>
        </div>
    </div>
</div>

{literal}
<script>
    $(document).ready(function () {
        $('.dataTableClassRep').dataTable({
            scrollX: true,
            autoWidth: false,
            dom: 'Bfrtip',
            "bStateSave": true,
            "lengthMenu" : [[100, 200, 300, 400, 500, -1],[100, 200, 300, 400, 500, "All"] ],
                "language": {
                "emptyTable": "لا يوجد بيانات متاحه",
                "infoEmpty": "لا يوجد بيانات متاحه",
                "infoFiltered": "(filtered1 from _MAX_ total records)",
                "lengthMenu": "العدد _MENU_",
                "search": "بحث:",
                "zeroRecords": "No matching records found",
                "paginate": {
                    "previous": "السابق",
                    "next": "التالى",
                    "last": "الاخير",
                    "first": "الاول"
                }
            },
            buttons: [
                {
                    extend: 'copyHtml5',
                    exportOptions: {
                        columns: ':visible'
                    }
                },
                {
                    extend: 'csvHtml5',
                    exportOptions: {
                        columns: ':visible'
                    }
                },
                {
                    extend: 'print',
                    exportOptions: {
                        columns: ':visible'
                    }
                },
                {
                    extend: 'excelHtml5',
                    exportOptions: {
                        columns: ':visible'
                    }
                },
                {
                    extend: 'pdfHtml5',
                    exportOptions: {
                        columns: ':visible'
                    }
                },
                'colvis'
            ],
            "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>>" ,
            "order": [[0, "desc"]],
            "displayLength": 10,
            "columnDefs": [
                {"className": "dt-center", "targets": "_all"}
            ],
        });
        $('.dataTableClassEmp td').css("height", "30px");
    });
</script>
{/literal}