<style>
    @media (min-width: 768px){
        .form-horizontal .form-group {
            margin-right: -10px;
            margin-left:-10px;
        }
    }
    table i{
        font-size:18px;
        margin: 5px
    }
    .remove{
        color: #ec0000;
        font-size: 22px;

    }
    .edit{
        color:green

    }
    .detail{
        color:#0e7fd9
    }
    .billtable thead>tr>th {
        color: #eeecda;
        background-color: #0081a8;
    }

    .data-search{
        margin: 10px 15px 0;
    }
    .btn-dark {
        color: #fff;
        background-color: #636262;
        border-color: #646464;
        margin-bottom: 15px
    }
    .data-search .form-control{
        border-radius:3px
    }
    .card{
        box-shadow: 0 4px 16px rgba(0,0,0,.12);
        padding: 10px;
        margin: 20px 0;
        border-radius: 5px
    }
</style>


<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">
            <div class="panel-heading">
                <h3 class="panel-title"> عرض  تقرير التكلفة مجمع</h3>
                <a href="{$youtubes[287]->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="productionExecutionCombinedReportController.php?do=show" method="post">
                    <div class="data-search">
                        <div class="row">

                            <div class="col-lg-3">
                                <div class="form-group">
                                    <label class="">من تاريخ </label>
                                    <input type="text" class="form-control awdatepicker" autocomplete="off" id="from" data-date-format="yyyy-mm-dd" name="from">
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label class="">الى تاريخ </label>
                                    <input type="text" class="form-control awdatepicker" autocomplete="off" id="from" data-date-format="yyyy-mm-dd" name="to">
                                </div>
                                <button type="submit" class="btn btn-primary">بحث</button>
                            </div>


                        </div>
                    </div>

                </form>

                <!-- Table -->
                <table class="table billtable table-bordered table-black card dataTableClass22">
                    <thead>
                        <tr>
                            <th> اسم المنتج</th>
                            <th> العدد</th>
                            <th> التكلفة الفعلية</th>
                            <th>  تكاليف متغيرة </th>
                            <th> إجمالي التكلفة </th>
                            <th> إجمالي التكلفة المتوقعة </th>
                            <th>  متوسط تكلفة القطعة الفعلية</th>
                            <th>  متوسط تكلفة القطعة المتوقعة</th>
                        </tr>
                    </thead>
                    <tbody>
                        {foreach $allOrders as $order}
                        <tr>
                            <td>{$order->productName}</td>
                            <td>{$order->num}</td>
                            <td>{$order->actualCost}</td>
                            <td>{$order->othrCost}</td>
                            <td>{$order->totalCost}</td>
                            <td>{$order->totalPredictedCost}</td>
                            <td>{($order->totalCost/$order->num)|round:"2"}</td>
                            <td>{($order->totalPredictedCost/$order->num)|round:"2"}</td>
                        </tr>
                        {/foreach}
                    </tbody>

                </table>

                <div class="row">
                    <div class="col-lg-3">
                        <button type="button" class="btn btn-dark ft-nor">
                            اجمالى التكلفة الفعلية <span class="badge wht-clo">
                                <div >{$allActual}</div>
                            </span>
                        </button>
                    </div>
                    <div class="col-lg-3">
                        <button type="button" class="btn btn-dark ft-nor">
                            اجمالى التكاليف المتغيرة <span class="badge wht-clo">
                                <div >{$allOther}</div>
                            </span>
                        </button>
                    </div>
                    <div class="col-lg-3">
                        <button type="button" class="btn btn-dark ft-nor">
                            اجمالى التكلفة <span class="badge wht-clo">
                                <div >{$allTotal}</div>
                            </span>
                        </button>
                    </div>
                    <div class="col-lg-3">
                        <button type="button" class="btn btn-dark ft-nor">
                            اجمالى التكلفة المتوقعة <span class="badge wht-clo">
                                <div >{$allTotalCost}</div>
                            </span>
                        </button>
                    </div>

                    <div class="clearfix"></div>
                    <hr />
                    {if {count($allOrders)} > 0}
                    <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>



                    {/if}
                    <div class="clearfix"></div>

                </div>

            </div> <!-- end of panel-body-->

        </div>  <!-- end of panel panel-default-->

    </div> <!-- end of container-->

</div>  <!-- end of row-->

{literal}
<script>
    $(document).ready(function () {
        $('.dataTableClass22').dataTable({
            "order"
                    : [
                        [4, "desc"]       // order by drug cat
                    ]
        });
    });
</script>
{/literal}