{% extends "merchant_base.html" %}
{% load widget_tweaks %}
{% load static %}
{% load crispy_forms_tags %}
{% load custom_filters %}

{% block title %}
<title>Summarized Budget</title>
{% endblock title %}
{% block Style %}
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/sweetalert2@10.10.1/dist/sweetalert2.min.css'>
 <style>
 .right{
    text-align: right !important;
  }
  .rowhight{
    height:5px !important;
  }
</style>

{% endblock Style %}

{% block MainContent %}
<div class="contents">


  {% include 'merchant_app/budget/cmptw/menubar.html' with active_tab="reports" %}

<div class="table-area mt-2">
    <div class="right">
     <button onclick="ExportToExcel('xlsx')" class="cus-btn" style="width:70px; height:30px"><i class="fa fa-file-excel-o" aria-hidden="true"></i></button>
      <button type="button" id="employee-attendance-general-report-pdf-button" class="cus-btn" style="width:70px; height:30px"><i class="fa fa-print" style="font-size: 16px; color:#fff"></i></button>
    </div>
    <div class="tables table-responsive" id="employee-attendance-general-report-table-pdf">
        <div>
            <h3 style = 'text-align: center'>O'Dell Group</h3>
            <h5 style = 'text-align: center'>House 1161, Road 10, Avenue 12, Mirpur DOHS</h5>
            <p style = 'text-align: right'><span>{{report_month}}</span> <span>{{report_year}}{{eid_bonus_list.created_date}}</span></p>
          </div>
          <h4 class="my-3">CMPTW/CM Summarized Report
            {% comment %} <small style = 'font-size: 15px; float: right'>{% if department %} {{department}} {% endif %} {% if designation %}  &nbsp - &nbsp {{designation}}{% endif %}</small> </h4> <small style = 'font-size: 15px; float: right; padding-right: 0px;'>{{year}} &nbsp-&nbsp {{month}}</small></h3> {% endcomment %}
          
            <small style = 'font-size: 15px; text-transform: capitalize;'>
           {{budget.name}} </small> </h4>
        <table class="table  table-striped table-hover" id="summarized_budget">
          

       
  
  
  
      <thead style="background-color: #fdf9ec;">
          <tr>
              <th class="col-md-1 text-center">SL No</th>
              <th class="text-center "> Type </th>
              <th class="text-center "> Description </th>
              <th class="text-center "> GMT </th>
              <th class="text-center ">Consumption/gmt</th>
              <th class="text-center ">Actual Qty</th>
              <th class="text-center">Wastage(%)</th>
             
              <th class="text-center ">Required</th>
              <th class="text-center ">Unit Price</th>
              <th class="text-center ">Total PX</th>
              <th class="text-center ">Supplier</th>
              <th class="text-center ">T&C</th>
              
            
              
          </tr>
      </thead>
      <tbody>
            
            {% for item in materials_budget  %}

            <tr>
              <td class="col-md-1 text-center">{{forloop.counter}}</td>
              <td class="text-center"> {{item.get_type_display}} </td>
              <td class="text-center">{{item.description}} </td>
              <td class="text-center">{{item.gmt_qty}} pcs</td>

              <td class="text-center">{{item.consumption_per_gmt}} {{item.unit}}  </td>
              <td class="text-center">{{ item.gmt_qty |multiply:item.consumption_per_gmt }} {{item.unit}}</td>
              <td class="text-center">{{item.wastage}}%</td>
              <td class="text-center">{{item.total_required}} </td> 
              <td class="text-center">{{item.cost_per_unit|floatformat:3}} </td> 
              <td class="text-center">{{item.price}} </td> 
              <td class="text-center">{{ item.supplier }}</td>
              <td class="text-center">{{ item.payment_term }}</td>

             
            </tr>
             
            {% endfor %}
            <tr>
            <td colspan=12 class='fw-bold text-center'>CM</td>
            
            </tr>



            <tr>
                <td class="text-center fw-bold">SL No</td>
                <td class="text-center fw-bold" colspan=3> Style </td>
                <td class="text-center fw-bold" colspan=3> GMT Qty </td>
                <td class="text-center fw-bold" colspan=3>Unit Price</td>
                <td class="text-center fw-bold" colspan=3>Total PX</td>     
                
            </tr>
            
            {% for item in cm_list  %}
            <tr>
                 <th class="text-center">{{forloop.counter}}</th>
                <th class="text-center" colspan=3> {{item.0.style}} </th>
                <td class="text-center" colspan=3>
                {% if item.1 %}
                
                {{item.1}}pcs
                {% else %}
                 <p style="color:red;"> PO Don't Have Gmt Qty </p>

                {% endif %}
                
                </td>
                <td class="text-center" colspan=3>${{item.0.price}}</td>
                {% if item.1 %}
                  <td class="text-center" colspan=3>${{ item.1|multiply:item.0.price }}</td>

                {% else %}
                  <td class="text-center" colspan=3><p style="color:red;"> PO Don't Have Gmt Qty </p></td>

                {% endif %}

            </tr>
            {% endfor %}


            
          
 
            


          
          
           
      
      

      </tbody>
  </table>
    </div>
  </div>

{% endblock MainContent %}

{% block JS %}
<script type=text/javascript>
    var load_sister_organization_url = "{% url 'sister-organization-load' %}"
    var load_branch_organization_url = "{% url 'load-branch-organization' %}"
    var load_department_url = "{% url 'ajax-load-department' %}"
    var load_designation_url = "{% url 'ajax-load-designation' %}"  

</script>
<script type="text/javascript" src="https://unpkg.com/xlsx@0.15.1/dist/xlsx.full.min.js"></script>

<!-- <script src="{% static 'js/payroll/intime_outtime_missing/create.js' %} "></script> -->
<script src="{% static 'js/report_app/global_dependency_search/global_dependency_search.js' %} "></script>
<script src="{% static 'js/report_app/general_attendance_report/general_attendance_report.js' %} "></script>
<script>
    $("#id_date").attr("type", "date");

//     jQuery(document).ready(function(){
//     $('#employee-attendance-general-report-pdf-button').click(function() {
//         console.log('Clicked pdf');
//         $('#employee-attendance-general-report-table-pdf').print();
        
//         return false;
//     });
// });








    function printDiv(divName) {
        var originalContents = document.body.innerHTML
        var printContents = document.getElementById(divName).innerHTML;
        console.log("DIV NAME", divName)
        document.body.innerHTML = printContents;
        window.print();
        document.body.innerHTML = originalContents;
      }


      
    function ExportToExcel(type, fn, dl) {
            var elt = document.getElementById('summarized_budget');
            var wb = XLSX.utils.table_to_book(elt, { sheet: "sheet1" });
            return dl ?
                XLSX.write(wb, { bookType: type, bookSST: true, type: 'base64' }) :
                XLSX.writeFile(wb, fn || ('Absent_report.' + (type || 'xlsx')));
        }
</script>
{% endblock JS %}