<style>
    .myresult {
        -webkit-print-color-adjust: exact;
    }

    .nodata {
        background-color: #72B4EC;
        color: white;
        border-radius: 13px;
        margin: 14px;
        font-size: 24px;
        text-align: center;
        padding: 5px;
    }

    .productborder {
        border-top: 4px solid #ddd !important;
    }

    .solidgraytop {
        border-top-style: solid;
        border-top-color: #ddd;
    }

    .solidgrayleft {
        border-left: solid;
        border-left-width: 3px;
        border-color: #ddd;
    }

    .solidgrayright {
        border-right-style: solid;
        border-right-color: #ddd;
    }

    .solidgraybottom {
        border-top-style: solid;
        border-top-color: #ddd;
    }

    .hidetop {
        border-top: hidden !important;
    }

    .mytotal {
        background-color: #ddd;
        font-weight: bold;
    }

    .product-image-overlay {
        /*        position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.9);
                z-index: 9999;
                display: none;*/

        position: fixed;
        top: 15%;
        left: 40%;
        /* text-align: center; */
        width: 30%;
        height: 50%;
        background: rgba(4, 0, 0, 0.38);
        z-index: 9999;
        border-radius: 45px;
        display: none;
    }

    .product-image-overlay .product-image-overlay-close {
        display: block;
        position: absolute;
        top: 20px;
        left: 20px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid #eee;
        line-height: 35px;
        font-size: 20px;
        color: #eee;
        text-align: center;
        cursor: pointer;
    }

    .product-image-overlay img {
        width: auto;
        max-width: 80%;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
</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">
            <!-- Default panel contents -->
            <div class="panel-heading">تقرير تصنيفات مورد
                <a href="{$youtubes[143]->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="buyreport.php?do=supplierCategories" method="post">

                    <div class="form-group">
                        <label class="sr-only">المورد</label>
                        <select class="select2" name="supplierid" id="supplierid">
                            <option value="-1">اختر مورد</option>
                            {foreach $suppliers as $data}
                            <option value="{$data->supplierid}" {if $data->supplierid eq
                                $supplierid}selected{/if}>{$data->suppliername}</option>
                            {/foreach}
                        </select>
                    </div>
                    <div class="form-group" {if empty($debt)}style="display: none" {/if} id="supDebt">
                        <label class="sr-only">الدين</label>
                        <input type="text" class="form-control" style="width: 83%" disabled id="suppliercurrentDebt"
                            value="{$debt}">
                    </div>
                    <div style="clear: both"></div>
                    <br />
                    <button type="submit" class="btn btn-primary">بحث</button>
                </form>

            </div>
            <hr />
            <div class="panel panel-default panel-m">
                <!-- Default panel contents -->
                <div class="panel-heading">{$message}</div>
                <div class="panel-body">
                    {if count($productsArr) > 0}
                    <style>
                        @media print {
                            @page {
                                size: landscape;
                                margin: 0;
                            }

                            .willprint,
                            .willprint td,
                            .willprint th {
                                font-family: arial;
                                font-size: 14px;
                                border-collapse: collapse;
                                border: 1px solid #333 !important;
                            }

                            /* .willprint th{
                                background: #aaa !important;
                            } */
                            .willprint tr:even-child td {
                                background: #333 !important;
                                color: #fff !important;
                            }
                        }
                    </style>
                    <table class="table willprint table-black dataTableClass" style="width: 100%">
                        <thead>
                            <tr>
                                <th>اسم المنتج</th>
                                <th>الكمية فى المخازن</th>
                                <th>سعر الوحدة</th>
                                <th>الاجمالي</th>
                                <th>المخازن</th>
                            </tr>
                        </thead>
                        <tbody>
                            {foreach $productsArr as $data}
                            <tr>
                                <td>{$data.productName}</td>
                                <td>{$data.quantity}</td>
                                <td>{$data.productPrice}</td>
                                <td>{$data.productPrice * $data.quantity}</td>
                                <td>{$data.storeName}</td>
                            </tr>
                            {/foreach}
                        </tbody>

                    </table>
                    <div class="row"></div>
                    <hr />
                    <div class="row"></div>
                    <h3> اجمالى التصنيفات</h3>
                    <table class="table willprint table-black dataTableClass" style="width: 100%">
                        <thead>
                            <tr>
                                <th>اسم التصنيف</th>
                                <th>الكمية فى المخازن</th>
                                <th>سعر المخزن</th>
                            </tr>
                        </thead>
                        <tbody>
                            {assign var="totalStoreQuantity" value=0}
                            {assign var="totalStoreQuantityPrice" value=0}

                            {foreach $allCatArr as $data}

                            {assign var="totalStoreQuantity" value=$totalStoreQuantity+$data.quantity}
                            {assign var="totalStoreQuantityPrice" value=$totalStoreQuantityPrice+$data.price}
                            <tr>
                                <td>{$data.catName}</td>
                                <td>{$data.quantity}</td>
                                <td>{$data.price}</td>
                            </tr>
                            {/foreach}

                        </tbody>

                    </table>

                    <!-- <div class="clearfix"></div>
                    <br/> -->

                    <div class="col-lg-12">
                        <div class="col-lg-3">
                            <div class="well well-sm well-2sm">
                                <h4 class="text-center"> الكمية بالمخزن{$totalStoreQuantity}</h4>
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="well well-sm well-2sm">
                                <h4 class="text-center">تقييم المخزون {$totalStoreQuantityPrice} {$currency}</h4>
                            </div>
                        </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>
                    {else}
                    <div class="nodata">عفوا لا توجد نتائج</div>
                    {/if}

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

        {literal}
        <script>
            $('#supplierid').live('change', function () {
                var supplierid = $(this).val();
                $.ajax({
                    type: 'GET',
                    url: 'getSupplierDept.php?do=getsuppliercurrentDebt&supplierid=' + supplierid,
                    success: function (data) {
                        $('#supDebt').show();
                        $("#suppliercurrentDebt").val(data);
                    }
                });
            })
            $('body').on('click', '.moImg', function () {

                $('body').append('<div class="product-image-overlay"><span class="product-image-overlay-close">x</span><img src="" /></div>');
                var productImage = $('img');
                var productOverlay = $('.product-image-overlay');
                var productOverlayImage = $('.product-image-overlay img');
                productImage.click(function () {
                    var productImageSource = $(this).attr('src');
                    productOverlayImage.attr('src', productImageSource);
                    productOverlay.fadeIn(100);
                    $('body').css('overflow', 'hidden');
                    $('.product-image-overlay-close').click(function () {
                        productOverlay.fadeOut(100);
                        $('body').css('overflow', 'auto');
                    });
                });
            });

        </script>
        {/literal}