@extends('layouts.masterHome2')

@section('content')
 
<br/>
<div class="row" id="draw_chart_">
<div class="col-md-2"></div>
  <div class="col-md-8">

      <div class="card card-info">
          <div class="card-header">
            <h3 class="card-title">Chart Report - تقرير الرسم </h3>
          </div>
              <div class="box-body">
                <div class="card-body">

                    <div class="col-md-12" style="display: flex;flex-flow: row;justify-content: space-around;" >

                      <div class="form-group col-md-6" >
                          <label for="exampleInputPassword1">Date from  </label>
                          <input type="date" id="chart_report_from" name="from" class="form-control"  placeholder="Date from " required>
                      </div>



                      <div class="form-group col-md-6">
                          <label for="exampleInputPassword1">Date to</label>
                          <input type="date" id="chart_report_to" onchange="chart_report_showClasses_()" name="to" class="form-control"  placeholder="Date to " required>
                      </div>

                    </div>

                    

                    <div class="form-group">
                      <label>Choose Class - اختيار الفئة </label>
                      <select class="form-control select2"   onchange="chart_report_showGroups_()"   style="width: 100%;" name="class"  id="chart_class_id" required>
                      
                      </select>
                    </div>

                    <div class="form-group">
                      <label>Choose Group - اختيار المجموعة </label>
                      <select class="form-control select2"  onchange="chart_report_showClassifications_()"   style="width: 100%;" name="group"  id="chart_group_id" required>
                      
                      </select>
                    </div>

                    <div class="form-group">
                      <label>Choose Classifications - اختيار التصنيف </label>
                      <select class="form-control select2"   style="width: 100%;" name="classification"  id="chart_classification_id" required>
                      
                      </select>
                    </div>
                </div>
              </div>

    

            <div class="card-footer">
                <button   class="btn btn-warning" onClick="draw()">Create</button>
            </div>
             
            
            
            </div>


</div>
      <!-- /.row -->
</div>


<section class="content" style="background-color:#FFF ; visibility:hidden;" id="chart_" >


<div class="row" >
      
      <div class ="col-md-6" style="margin-top: 35px;">  
        <div id="donut-chart" style="height: 350px;"></div>  
      </div>
      
      
      <div id="left" class ="col-md-6" style="max-height:2000px; background-color: #FFF;">
                <div id="title_1" style="font-size: 24px;font-weight: bolder;text-align: center; color: #2c4e71;margin-top: 10px; "> </div>

                <div   style="text-align:right; margin-top: -26px; margin-right: 50px;"> {{ \Carbon\Carbon::now()->toDateString() }} </div>

                <div id="title_2" style="font-weight: bolder;text-align: center; color: #2c4e71; margin-top: 20px"></div>


                <table id="example3" class="table" style="margin-top: 47px">
                <thead>
                <tr>
                  <th>بيانات الصنف</th>
                  <th>كـجم</th>
                  <th>عـدد</th>
                </tr>
                </thead>
                <tbody> 

                 

                </tbody>
                 
              </table>

    </div>
     

</div>


</section  >



@endsection