@extends('layouts.master')

@section('content')

<div class="row" id="draw_chart_">
        <!-- left column -->
        <div class="col-md-2"></div>
        <div class="col-md-8">
          <!-- general form elements -->
          <div class="box box-primary">
            
            <div class="box-header with-border">
              <h3 class="box-title">Chart Report Create  </h3>
            </div>
           
            <div class="box-body">
                
                
                 <div class="form-group">
                <label> choose year </label>

                <select class="form-control select2"   style="width: 100%;" name="year_type" id="year_type" onchange="select_year()" required>
                  <option value="current"  > current year</option>
                  <option value="last"  > Last years</option>
                </select>
                
              </div>
              
              <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_showSuppliers_()" name="to" class="form-control"  placeholder="Date to " required>
              </div>

              <div class="form-group">
                <label>Choose Supplier - اختيار المورد </label>
                <select class="form-control select2"   onchange="chart_report_showClasses_()" style="width: 100%;" name="supplier" id="chart_supplier_id" required>
                <option  >choose Class </option>   
                </select>
              </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> <!-- /.box-body -->

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


          </div>    
        </div>
</div>


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


<div class="row" >
      
      <div class ="col-md-6" >  
        <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  >

<script>

  
function select_year() {
  var year_type =document.getElementById("year_type").value;
  
  if ( year_type == "current" ){
    document.getElementById('chart_report_from').min="2024-01-01";
    document.getElementById('chart_report_from').max="";
    document.getElementById('chart_report_to').min="2024-01-01";
    document.getElementById('chart_report_to').max="";

  }else{

    document.getElementById('chart_report_from').min="";
    document.getElementById('chart_report_from').max="2024-01-01";
    document.getElementById('chart_report_to').min="";
    document.getElementById('chart_report_to').max="2024-01-01";
    
  }
}
</script>

@endsection