<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.84.0">
    <title> التصنيفات</title>
   <link rel="shortcut icon" href="{$path}/assets/2.ico" type="image/ico" />  
    <!-- Bootstrap core CSS -->
   <link href="{$path}/assets/libs/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <link href="{$path}/assets/libs/date/css/datepicker.css" rel="stylesheet">
   <link href="{$path}/assets/libs/select2/css/select2.min.css" rel="stylesheet" />

    <style>
    body {
          direction: rtl;
          text-align: center;
    }
      
.container {
    background: #364150;
    border: 2px solid #ccc;
    border-radius: 24px;
    color: #fff;
    text-align: center;
    
}

.dashboardstat {
    background: #364150;
    border: 2px solid #ccc;
    border-radius: 24px;
    color: #fff;
    text-align: center;
    padding: 10px
}


#chart-container {
    float: right;
    background: #fff;
    margin: 20px;
    width: 45%;
}
span{
    color: #eacc6f;
}
.select2-results__option {
  background-color: #000 ;
}

select + .select2-container {
  width: 100% !important;
}

.container, .container-lg, .container-md, .container-sm, .container-xl {
    max-width: 1300px;
}
.select2-container .select2-selection--single {
    
    height: 38px;
}
</style>

    
  </head>
  <body>
    
<header style="background: #000;">
   <div class="container">
      <div class="row">
        <div class="col">
         <a href="http://gt4host.com/home/" target="_blank" style="  text-decoration: none;">
                    <img src="../views/default/images/upload/8030291bde05b1285969164e4321279f.png" style="width:15%">
                    <span style="font-size: 20px;font-weight: 900;">GT4</span>
                  </a>
        </div>
        <div class="col">
              <a href="index.php" target="_blank" style="  text-decoration: none;">
                <img src="../views/default/images/img044.png" style="width: 100%;border-radius: 4px;height: 100%;">
              </a>
        </div>
        <div class="col">
          <a href="index.php" target="_blank" style="  text-decoration: none;">
                    <img src="../views/default/assets/img/greyHomePage.png" style="width: 15%">
                  </a>
                  <a href="logout.php"  style="text-decoration: none;">
                    <span style="font-size: 20px;font-weight: 900;">خروج  </span>  
                  </a> 
        </div>
      </div>
      <div class="row">
        <div class="col">
            <input type="text" autocomplete="off" data-date-format="yyyy-mm-dd"  id="fromdate" class="form-control " style="text-align: center;" placeholder="من التاريخ" />
        </div>
        <div class="col">

              <select class="select2class" id="kindprice" >
                <option value="">اختر  السعر</option>
                <option value="sellbilldetail.buyprice">سعر الشراء </option>
                <option value="sellbilldetail.lastbuyprice">اخر سعر شراء</option>
                <option value="sellbilldetail.lastbuyprice_withDiscount">اخر سعر شراء بعد الخصم </option>
                <option value="sellbilldetail.meanbuyprice">متوسط سعر الشراء </option>
                <option value="sellbilldetail.meanbuyprice_withDiscount">متوسط سعر الشراء بعد الخصم </option>
                <option value="product.overAllAveragePrice">المتوسط العام</option>

                 <option value="product.productBuyPrice">  سعر شراء المنتج </option>
                <option value="product.productSellAllPrice">سعر  الجمله</option>
                <option value="product.productSellHalfPrice">اسعر نصف الجمله</option>
                <option value="product.productSellUnitPrice"> سعر التجزئه</option>
                <option value="product.lastbuyprice">اخر سعر شراء</option>
                <option value="product.lastbuyprice_withDiscount">اخر سعر شراء بعد الخصم </option>
                <option value="product.meanbuyprice">متوسط سعر الشراء </option>
                <option value="product.meanbuyprice_withDiscount">متوسط سعر الشراء بعد الخصم </option>
              </select>
        </div>
        <div class="col">
             <input type="text"  autocomplete="off" data-date-format="yyyy-mm-dd" id="todate" class="form-control " style="text-align: center;" placeholder="الى التاريخ" />
        </div>
      </div> 
  </div>

     
</header>


<main>
  <div class="album py-5 bg-light">
    <div class="container">
         <br>
         <div class="row">
              <div class="card shadow-sm">
                <div class="dashboardstat">
                    <h3 >تصنيفات المنتجات</h3>
                    <h6>  اجمالى المبيعات     <span class="totalcategories">0</span> 
                     اجمالى الشراء  <span class="totalprocategories">0</span>
                       الربح  <span class="profitcategories">0</span>  عدد  القطع    <span class="totalquantitycategories">0</span> </h6>
                </div>
              </div>
        </div>
        <br>
        <div class="row">    
              <div class="card shadow-sm">
                <canvas id="categories"></canvas>
              </div>
              <div class="card shadow-sm"  style="overflow-y:scroll; height:313px;">
                 <select class="select2categories" id="select2categories" data-placeholder="اختر   التصنيف">
                </select>
                <table class="table">
                    <thead>
                      <tr>
                        <th scope="col">التصنيف</th>
                        <th scope="col">عدد القطع</th>
                        <th scope="col">الاجمالى</th>
                        <th scope="col">التكلفه</th>
                        <th scope="col">الربح</th>
                      </tr>
                    </thead>
                    <tbody id="tcategories">
                     
                    </tbody>
                  </table>
              </div>
        </div>
        <br>
        
        
  </div>

</main>


      <script src="{$path}/assets/libs/popper/popper.min.js"></script>
      <script src="{$path}/assets/libs/jquery/jquery.min.js"></script>
      <script src="{$path}/assets/libs/bootstrap/js/bootstrap.min.js"></script>
      <script src="{$path}/assets/libs/date/js/datepicker.js"></script>
      <script src="{$path}/assets/libs/charts/Chart.min.js"></script>
      <script src="{$path}/assets/libs/charts/charts.js"></script>
      <script src="{$path}/assets/libs/select2/js/select2.min.js"></script>
  </body>
</html>
