{%extends 'base.html' %}
{%load static%}
{%load helpers%}
{% load i18n %}
{% load humanize %}
{% get_current_language as LANGUAGE_CODE %}


{%block styles%}

{% if LANGUAGE_CODE == 'ar' %}
<!-- BEGIN: Custom CSS-->
<link rel="stylesheet" type="text/css" href="{%static 'css-rtl/custom-rtl.css'%}">
<link rel="stylesheet" type="text/css" href="{%static 'assets/css/style-rtl.css'%}">
custom-rtl.
<!-- END: Custom CSS-->
{%else%}
<!-- BEGIN: Custom CSS-->
<link rel="stylesheet" type="text/css" href="{%static 'assets/css/style.css'%}">
<!-- END: Custom CSS-->

{%endif%}



<link rel="stylesheet" type="text/css" href="{% static 'css/filepond20201101.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'css/filepond-plugin-image-preview.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'css/filepond-plugin-image-overlay.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'css/filepond-plugin-get-file.css' %}">

<!-- Chart Js -->
<script src="{% static 'chart-js/chart.min.js' %}"></script>
<script src="{% static 'chart-js/Chart.js' %}"></script>
<script src="{% static 'chart-js/chartjs-plugin-datalabels.min.js' %}"></script>

<script src="{% static 'js/xcharts.min.js' %}"></script>
<script src="{% static 'js/jquery.autosize.min.js' %}"></script>
<script src="{% static 'js/jquery.placeholder.min.js' %}"></script> 
<script src="{% static 'js/gdp-data.js' %}"></script>
<script src="{% static 'js/morris.min.js' %}"></script> 
<script src="{% static 'js/sparklines.js' %}"></script>
<script src="{% static 'js/jquery.slimscroll.min.js' %}"></script>
<script src="{% static 'js/charts.js' %}"></script>

<style>

.table-responsive {
    display: table;
}

</style>
{%endblock%}

{% block content %}
<style>
  .title-style{
    font-size   : 20px!important;
    font-weight : bold!important;
  }
</style>

<form  method="POST" id="form" class="needs-validation form-horizontal" novalidate>
  {% csrf_token %}

  <div class="container">
    <!-- Basic table -->
    <section id="basic-datatable">

      <div class="accordion" id="accordionExample">
        <div class="card">
          <div class="card-header" id="headingOne" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
            <h2 class="font-weight-bolder mt-1" >
                {% trans 'Control Search'%}
              
            </h2>
          </div>
          
          
          <div id="collapseOne" class="collapse p-0 m-0" aria-labelledby="headingOne" data-parent="#accordionExample">
            <div class="card-body p-0 m-0">
            
              <div class="row p-0 m-0">
                <div class="col-12 p-0 m-0">
                    <div class="card  p-3 mb-0 border  rounded bg-light ">
                      <div class="row">
                        <div class="col-12 col-md-4">
                          <div class="form-group">
                              <label for="start_date"> {% trans 'التاريخ من'%}  </label>
                              <input type="date" required class="form-control required" id="start_date" name="start_date" data-placeholder="Date  " aria-invalid="false" aria-required="false">
                              <div  id="invalidId" class="invalid-feedback">
                                الرجاء إختيار تاريخ
                            </div>  
                            </div>
                        </div>
        
                        <div class="col-12 col-md-4"  >
                          <div class="form-group">
                            <label for="end_date"> {% trans 'التاريخ الي'%}  </label>
                            <input type="date" required class="form-control required" id="end_date" name="end_date" data-placeholder="Date" aria-invalid="false" aria-required="false">
                            <div id="invalidId" class="invalid-feedback">
                              الرجاء إختيار تاريخ
                            </div> 
                              
                          </div>
                        </div>    
                             
                        <div class="col-12 col-md-4">
                          <div class="form-group bmd-form-group">
                              <label for="factory"> {% trans "المصنع" %}</label>
                              <select class="form-control" value ="{{data_to_insert.factory.id}}" name="factory" id="factory">
                                  <option value="">{% trans "اختر المصنع" %}</option>
                                  {% for item in factories %}
                                  <option value="{{ item.id }}" >
                                      {{ item.name }}
                                  </option>
                                  {% endfor %}
                              </select>
                              <div class="invalid-feedback">
                                  {% trans "اختر المصنع" %}
                              </div>  
                          </div>
                        </div>

                        <br/>
        
                        <div class="col-12 col-md-6">
                          <button type="submit" class="btn btn-primary pull-left waves-effect waves-float waves-light mt-2 mb-1 w-100" >Refresh</button>
                    
                        </div>
                      </div>
        
                    </div>
                </div>
            </div>
            
            </div>
          </div>
        </div>
        
      </div>

    </section>


    <div class="row">
      <div class="col-12 p-0 m-0">
        <h1 class="panel-heading">
          {% trans 'Dashboard' %} <center> <h5>{% trans 'This Data Is For The Period' %}  </h5> {% trans 'From' %}  {{date_from|date:'Y-m-d'}} {% trans 'To' %}   {{date_to|date:'Y-m-d'}}  </center>
        </h1>
      <div>

      <!-- third section -->
      <div class="row">
        <div class="col-4">
          <div class="card">
            <div class="card-body">

              <div class="row">
                <div class="col-12">
                  <div class="mb-1 mb-sm-0">
                    <h2 class="font-weight-bolder mb-25">{{total_maintenance_cost|as_integer|intcomma }}  ({% get_currency %})</h2>
                    <p class="card-text font-weight-bold mb-2">{% trans 'Total Maintainance Cost' %} </p>
                  </div>
                </div>
              </div>

              {% sum_of_data total_schedule_maintenance_cost total_unschedule_maintenance_cost as total_sc_unsc %}
              <div class="row avg-sessions pt-50">
                <div class="col-12 mb-2">
                  <p class="mb-50"> {% trans 'Scheduled' %} : {{total_schedule_maintenance_cost|safe}}</p>
                  <div class="progress progress-bar-primary" style="height: 6px">
                    <div class="progress-bar" role="progressbar" aria-valuenow="{{total_schedule_maintenance_cost}}" aria-valuemin="0" aria-valuemax="{{total_sc_unsc}}"
                      style="width: {% percentage_from total_schedule_maintenance_cost total_sc_unsc %}%"></div>
                  </div>
                </div>
                <div class="col-12 mb-2">
                  <p class="mb-50"> {% trans 'Unscheduled' %} : {{total_unschedule_maintenance_cost|safe}}</p>
                  <div class="progress progress-bar-warning" style="height: 6px">
                    <div class="progress-bar" role="progressbar" aria-valuenow="{{total_unschedule_maintenance_cost}}" aria-valuemin="0" aria-valuemax="{% sum_of_data total_schedule_maintenance_cost total_unschedule_maintenance_cost %}"
                      style="width: {% percentage_from total_unschedule_maintenance_cost total_sc_unsc %}%"></div>
                  </div>
                </div>
              
              
              </div>
            </div>
          </div>
        </div>

        <div class="col-4">
          <div class="card">
            <div class="card-body">

              <div class="row">
                <div class="col-12">
                  <div class="mb-1 mb-sm-0">
                    <h2 class="font-weight-bolder mb-25">{{total_schedule_maintenance_cost|as_integer|intcomma}}  ({% get_currency %})</h2>
                    <p class="card-text font-weight-bold mb-2">{% trans 'Total Scheduled Maintainance Cost' %} </p>
                  
                </div>
                </div>
              </div>

              {% sum_of_data total_schedule_cost_operations total_schedule_cost_spare_parts total_schedule_cost_other_costs as total_sc_unsc %}
              <div class="row avg-sessions pt-50">
                <div class="col-6 mb-2 {% get_show_or_not all_allowed_fields 'Operations Cost' %}">
                  <p class="mb-50">{% trans 'Operation Cost' %} : {{total_schedule_cost_operations|safe}}</p>
                  <div class="progress progress-bar-primary" style="height: 6px">
                    <div class="progress-bar" role="progressbar" aria-valuenow="{{total_schedule_cost_operations}}" aria-valuemin="0" aria-valuemax="{{total_sc_unsc}}"
                      style="width: {% percentage_from total_schedule_cost_operations total_sc_unsc %}%"></div>
                  </div>
                </div>

                <div class="col-6 mb-2 {% get_show_or_not all_allowed_fields 'Spare Parts Cost' %}">
                  <p class="mb-50"> {% trans 'Spare Cost' %}: {{total_schedule_cost_spare_parts|safe}}</p>
                  <div class="progress progress-bar-warning" style="height: 6px">
                    <div class="progress-bar" role="progressbar" aria-valuenow="{{total_schedule_cost_spare_parts}}" aria-valuemin="0" aria-valuemax="{% sum_of_data total_schedule_maintenance_cost total_unschedule_maintenance_cost %}"
                      style="width: {% percentage_from total_schedule_cost_spare_parts total_sc_unsc %}%"></div>
                  </div>
                </div>
              
                <div class="col-6 mb-2 {% get_show_or_not all_allowed_fields 'Human Cost' %}">
                  <p class="mb-50">{% trans 'Human Cost' %} : {{total_schedule_cost_human_resource|safe}}</p>
                  <div class="progress progress-bar-warning" style="height: 6px">
                    <div class="progress-bar" role="progressbar" aria-valuenow="{{total_schedule_cost_human_resource}}" aria-valuemin="0" aria-valuemax="{% sum_of_data total_schedule_maintenance_cost total_unschedule_maintenance_cost %}"
                      style="width: {% percentage_from total_schedule_cost_human_resource total_sc_unsc %}%"></div>
                  </div>
                </div>
              
                <div class="col-6 mb-2 {% get_show_or_not all_allowed_fields 'Other Cost' %}">
                  <p class="mb-50">{% trans 'Other Cost' %} : {{total_schedule_cost_other_costs|safe}}</p>
                  <div class="progress progress-bar-warning" style="height: 6px">
                    <div class="progress-bar" role="progressbar" aria-valuenow="{{total_schedule_cost_other_costs}}" aria-valuemin="0" aria-valuemax="{% sum_of_data total_schedule_maintenance_cost total_unschedule_maintenance_cost %}"
                      style="width: {% percentage_from total_schedule_cost_other_costs total_sc_unsc %}%"></div>
                  </div>
                </div>
              
              </div>

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

        <div class="col-4">
          <div class="card">
            <div class="card-body">

              <div class="row">
                <div class="col-12">
                  <div class="mb-1 mb-sm-0">
                    <h2 class="font-weight-bolder mb-25">{{total_unschedule_maintenance_cost|as_integer|intcomma}}  ({% get_currency %})</h2>
                    <p class="card-text font-weight-bold mb-2">{% trans 'Total Unscheduled Maintainance Cost' %}</p>
                  
                </div>
                </div>
              </div>

              {% sum_of_data total_unschedule_cost_operations total_unschedule_cost_spare_parts total_unschedule_cost_other_costs as total_sc_unsc %}
              <div class="row avg-sessions pt-50">
                <div class="col-6 mb-2 {% get_show_or_not all_allowed_fields 'Operations Cost' %}">
                  <p class="mb-50">{% trans 'Operation Cost' %} : {{total_unschedule_cost_operations|safe}}</p>
                  <div class="progress progress-bar-primary" style="height: 6px">
                    <div class="progress-bar" role="progressbar" aria-valuenow="{{total_unschedule_cost_operations}}" aria-valuemin="0" aria-valuemax="{{total_sc_unsc}}"
                      style="width: {% percentage_from total_unschedule_cost_operations total_sc_unsc %}%"></div>
                  </div>
                </div>
                <div class="col-6 mb-2 {% get_show_or_not all_allowed_fields 'Spare Parts Cost' %}">
                  <p class="mb-50">{% trans 'Spare Cost' %} : {{total_unschedule_cost_spare_parts|safe}}</p>
                  <div class="progress progress-bar-warning" style="height: 6px">
                    <div class="progress-bar" role="progressbar" aria-valuenow="{{total_unschedule_cost_spare_parts}}" aria-valuemin="0" aria-valuemax="{% sum_of_data total_schedule_maintenance_cost total_unschedule_maintenance_cost %}"
                      style="width: {% percentage_from total_unschedule_cost_spare_parts total_sc_unsc %}%"></div>
                  </div>
                </div>
              
                <div class="col-6 mb-2 {% get_show_or_not all_allowed_fields 'Human Cost' %}">
                  <p class="mb-50">{% trans 'Human Cost' %} : {{total_unschedule_cost_human_resource|safe}}</p>
                  <div class="progress progress-bar-warning" style="height: 6px">
                    <div class="progress-bar" role="progressbar" aria-valuenow="{{total_schedule_cost_human_resource}}" aria-valuemin="0" aria-valuemax="{% sum_of_data total_schedule_maintenance_cost total_unschedule_maintenance_cost %}"
                      style="width: {% percentage_from total_schedule_cost_human_resource total_sc_unsc %}%"></div>
                  </div>
                </div>

                <div class="col-6 mb-2 {% get_show_or_not all_allowed_fields 'Other Cost' %}">
                  <p class="mb-50">{% trans 'Other Cost' %}: {{total_unschedule_cost_other_costs|safe}}</p>
                  <div class="progress progress-bar-warning" style="height: 6px">
                    <div class="progress-bar" role="progressbar" aria-valuenow="{{total_unschedule_cost_other_costs}}" aria-valuemin="0" aria-valuemax="{% sum_of_data total_schedule_maintenance_cost total_unschedule_maintenance_cost %}"
                      style="width: {% percentage_from total_unschedule_cost_other_costs total_sc_unsc %}%"></div>
                  </div>
                </div>
              
              
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="row">
        <!-- First Chart -->
        <div class="col-md-6 col-12">
            {% include 'charts-parts/maintenance-yearly-cost-and-budget-chart.html' %}
        </div>
    
        <!-- Second Chart -->
        <div class="col-md-6 col-12">
            {% include 'charts-parts/maintenance-yearly-cost-chart.html' %}
        </div>
        <!-- Third Chart -->
        <div class="col-md-12 col-12">
          {% include 'charts-parts/maintenance-type-cost-chart.html' %}
        </div>
    </div>
    

      <div class="row">
        <div class="col-12">
          <div>
            <div class="col-md-12 col-12">
              <div class="col-md-12 col-12">
                {% include 'charts-parts/maintenance-monthly-cost-chart.html' %}
              </div>
            </div>
          </div>
        </div>
      </div>


      {% comment %}
      <div class="grey-bg row" style="width: 100%; ;margin-top: 50px;">
            
        <div class="col-md-4 col-12" style="text-align: center;">
            <h3 class="title-style">
            Total Maintainance Cost 
            </h3>
            <h2> {{total_maintenance_cost|as_integer|intcomma }}   ({% get_currency %}) </h2>
            {% include 'charts-parts/total-mintenance-cost-schedule-and-unschedule.html' %}

        </div>

        <div class="col-md-4 col-12" style="text-align: center;" >
            <h3 class="title-style">
              Total Scheduled Maintainance Cost 
            </h3>
            <h2>{{total_schedule_maintenance_cost|as_integer|intcomma}}  ({% get_currency %})</h2>
            {% include 'charts-parts/total-mintenance-cost-schedule.html' %}
        </div>

        <div class="col-md-4 col-12" style="text-align: center;">
              <h3 class="title-style">
                Total Unscheduled Maintainance Cost 
              </h3>
              <h2> {{total_unschedule_maintenance_cost|as_integer|intcomma}}  ({% get_currency %}) </h2>
              <div class="chart-container">
                {% include 'charts-parts/total-mintenance-cost-unschedule.html' %}
              </div>
        </div>

      </div>
      {% endcomment %}

      <!-- third section -->
      <div class="row mt-2">

        <div class="col-md-6 col-12">
          {% include 'charts-parts/assets-total-maintenance-cost-chart.html' %}
        </div>

        <div class="col-md-6 col-12">
          {% include 'charts-parts/equipments-total-maintenance-cost-chart.html' %}
        </div>
        
      </div>

      
      <div class="row mt-2" style="display : none">
        <div class="col-md-12 col-12">
          {% include 'charts-parts/assets-total-production.html' %}
        </div>
      </div>

      <div class="row mt-2">
        <div class="col-md-12 col-12">
          {% include 'charts-parts/malfunctions-count-chart.html' %}
        </div>
      </div>

      <div class="grey-bg row" style="width: 100%; ;margin-top: 50px;">
        <div class="col-md-4 col-12 " style="text-align: center;">
          <div class="card">
          <div class="card-body">
            <h2 class="font-weight-bolder mb-25">{{getNaive_DoneMaintenanceOrder_sum}}</h2>
            <p class="card-text font-weight-bold mb-2">{% trans 'Maintainance Order Count'%} </p>
            <hr />
      
            {% include 'charts-parts/total-mintenance-count-schedule-and-unschedule.html' %}
          </div>
        </div>
        </div>
        <div class="col-md-4 col-12 " style="text-align: center;">
          <div class="card">
            <div class="card-body">
            <h2 class="font-weight-bolder mb-25">{{getscheduled_DoneMaintenanceOrder_sum}}</h2>
            <p class="card-text font-weight-bold mb-2">{% trans 'Scheduled Maintainance Order Count' %} </p>
            <hr />
      
            {% include 'charts-parts/total-mintenance-count-schedule.html' %}
          </div>
          </div>
        </div>
        <div class="col-md-4 col-12" style="text-align: center;">
          <div class="card">
            <div class="card-body">
            <h2 class="font-weight-bolder mb-25"> {{getunscheduled_DoneMaintenanceOrder_sum}}</h2>
            <p class="card-text font-weight-bold mb-2">{% trans 'Unscheduled Maintainance Order Count' %} </p>
            <hr />
      
      
            {% include 'charts-parts/total-mintenance-count-unschedule.html' %}
          </div>
          </div>
        </div>
      
      </div>
        
      <div class="row">
        <div class="col-12">
          <div>
            <div class="row">
              <div class="col-md-12 col-12">
                {% include 'charts-parts/statistics.html' %}
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>

</form>

<script>
   (function() {
      'use strict';
      window.addEventListener('load', function() {
      // Fetch all the forms we want to apply custom Bootstrap validation styles to
      var forms = document.getElementsByClassName('needs-validation');
      // Loop over them and prevent submission
      var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
      if (form.checkValidity() === false) {
      event.preventDefault();
      event.stopPropagation();
      }
      form.classList.add('was-validated');
      }, false);
      });
      }, false);
      })();


</script>
{% endblock %}
{% block Extrajavascripts %}
    
    
{% endblock %}