{% extends "base.html" %}
{% load static %}
{% load crispy_forms_tags %}
{% load widget_tweaks %}
{% block title %}
<title>Create Bill</title>
{% endblock title %}
{% block Style %}
<style>
.page {
    width: 210mm; /* A4 width */
    height: 297mm; /* A4 height */
    margin: 0 auto; /* Center the page horizontally */
    background-image: url('background-image.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

 .right{
    text-align: right !important;
  }
  .rowhight{
    height:5px !important;
  }

</style>
{% endblock Style %}


{% block MainContent %}
<div class="contents">
<div class="contents">
  {% if request.user.is_superuser == True %}
<form action="" method="POST" enctype="multipart/form-data" autocomplete="off">
  {% csrf_token %}
  <div class="accordion-item">
      <div class="card">
        <div class="card-header">
          <h5 class="mb-0 fw-bold"> 
            Add New  Conveyence
          </h5>
        </div>
        <div class="card-body">
          <div class="row">
            <div class="col-md-3">
              {{form.project|as_crispy_field}}
            </div>
            <div class="col-md-3">
              {{form.form|as_crispy_field}}
            </div> 
            <div class="col-md-3">
              {{form.destination|as_crispy_field}}
            </div>
            <div class="col-md-3">
              {{form.cost|as_crispy_field}}
            </div>
          </div>
          <div class="row">
            <div class="col-md-3">
              {{form.date|as_crispy_field}}
            </div>
            <div class="col-md-3">
              {{form.description|as_crispy_field}}
            </div>
            <div class="col-md-3">
              {{form.mother_organization|as_crispy_field}}
            </div>
            <div class="col-md-3">
              {{form.sister_organization|as_crispy_field}}
            </div>
            <div class="col-md-3">
              {{form.branch|as_crispy_field}}

            </div>
          </div>
        </div>
   
      </div>
  
      <div class="row" style="margin-top: 10px;margin-bottom: 8px;">
        <div class="col-md-12 text-center">
            <button type="submit" class="cus-btn" >Submit</button>
        </div>
    </div>
</div>
</form>


{% elif request.user.user_type == 'Mother_Organization_admin' %}
<form action="" method="POST" enctype="multipart/form-data" autocomplete="off">
  {% csrf_token %}
  <div class="accordion-item">
      <div class="card">
        <div class="card-header">
          <h5 class="mb-0 fw-bold"> 
            Add New  Conveyence
          </h5>
        </div>
        <div class="card-body">
          <div class="row">
            <div class="col-md-3">
              {{form.project|as_crispy_field}}
            </div>
            <div class="col-md-3">
              {{form.form|as_crispy_field}}
            </div> 
            <div class="col-md-3">
              {{form.destination|as_crispy_field}}
            </div>
            <div class="col-md-3">
              {{form.cost|as_crispy_field}}
            </div>
          </div>
          <div class="row">
            <div class="col-md-3">
              {{form.date|as_crispy_field}}
            </div>
            <div class="col-md-3">
              {{form.description|as_crispy_field}}
            </div>
            <div class="col-md-3">
              {{form.sister_organization|as_crispy_field}}
            </div>
            <div class="col-md-3">
              {{form.branch|as_crispy_field}}

            </div>
          </div>
        </div>
   
      </div>
  
      <div class="row" style="margin-top: 10px;margin-bottom: 8px;">
        <div class="col-md-12 text-center">
            <button type="submit" class="cus-btn" >Submit</button>
        </div>
    </div>
</div>
</form>
{% elif request.user.user_type == 'Sister_Organization_admin' %}
<form action="" method="POST" enctype="multipart/form-data" autocomplete="off">
  {% csrf_token %}
  <div class="accordion-item">
      <div class="card">
        <div class="card-header">
          <h5 class="mb-0 fw-bold"> 
            Add New  Conveyence
          </h5>
        </div>
        <div class="card-body">
          <div class="row">
            <div class="col-md-3">
              {{form.project|as_crispy_field}}
            </div>
            <div class="col-md-3">
              {{form.form|as_crispy_field}}
            </div> 
            <div class="col-md-3">
              {{form.destination|as_crispy_field}}
            </div>
            <div class="col-md-3">
              {{form.cost|as_crispy_field}}
            </div>
          </div>
          <div class="row">
            <div class="col-md-3">
              {{form.date|as_crispy_field}}
            </div>
            <div class="col-md-3">
              {{form.description|as_crispy_field}}
            </div>
            <div class="col-md-3">
              {{form.branch|as_crispy_field}}

            </div>
          </div>
        </div>
   
      </div>
  
      <div class="row" style="margin-top: 10px;margin-bottom: 8px;">
        <div class="col-md-12 text-center">
            <button type="submit" class="cus-btn" >Submit</button>
        </div>
    </div>
</div>
</form>
{% elif request.user.user_type == 'Branch' or request.user.user_type == 'Regular' %}
<form action="" method="POST" enctype="multipart/form-data" autocomplete="off">
  {% csrf_token %}
  <div class="accordion-item">
      <div class="card">
        <div class="card-header">
          <h5 class="mb-0 fw-bold"> 
            Create Bill
          </h5>
        </div>
        <div class="card-body">
          <div class="row">
            <div class="col-md-3">
              {{form.project|as_crispy_field}}
            </div>
            <div class="col-md-3">
              {{form.date|as_crispy_field}}
            </div> 
            <div class="col-md-3">
              {{form.other_cost_description|as_crispy_field}}
            </div>
            <div class="col-md-3">
              {{form.other_cost_amount|as_crispy_field}}
            </div>
          </div>
          <div class="row">
            <div class="col-md-3">
              {{form.installation_description|as_crispy_field}}
            </div>
            <div class="col-md-3">
              {{form.installation_charge|as_crispy_field}}
            </div>
          </div>
        </div>
   
      </div>
  
      <div class="row" style="margin-top: 10px;margin-bottom: 8px;">
        <div class="col-md-12 text-center">
            <button type="submit" class="cus-btn" >Create</button>
        </div>
    </div>
</div>
</form>
{% endif %}
 {% if project_list %}

<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>
            <p style = 'text-align: left'>{{ date }}</p>
            <p style = 'text-align: left'>{{project.company_name}}</p>
            <p style = 'text-align: left'>{{project.address}}</p>
            <p  class="mt-2"style = 'text-align: left'> Subject: <span class="fw-bold">{{project.address}}</span></p>
            <p  class="mt-1"style = 'text-align: left'>Respected Sir,</p>
            <p class="mt-3" style = 'text-align: left'>It’s my pleasure to complete the project named {{project.company_name}} at Mirpur 10 Branch. Myteam has already finished the project with the help of your valuable guidance. I, along with my team,believe in building a long-term relationship with our honorable customers, providing efficient tech solutions and services that can meet requirements and satisfactions through innovation.</p>

            <p class="mt-1" style = 'text-align: left'>I am attaching the expenditure of installing CCTV cameras with the specifications for your kind information and necessary actions to claim the expenditure due 20,226 (Twenty Thousand Two Hundred and Twenty Six) taka. The expenditure overview is followed as:</p>
          </div>
        <table class="table  table-striped table-hover mt-3" id="tbl_absent_export">
            <thead>
              <tr>
                <th class="text-center">SL No</th>
                <th>Item</th>
                <th>Specification </th>
                <th>Quantity</th>
                <th>Unit Price(BDT)</th>
                <th>Subtotal</th>
              </tr>
            </thead>
            <tbody>
            {% for project in project_list  %}
                <tr>
                  <td class="text-center">{{forloop.counter}}</td>
                  <td>{{ project.product_name }}</td>
                  <td>{{ project.1 }}</td>
                  <td>{{ project.qty }}</td>
                  <td>{{ project.selling_price}}</td>
                  <td>{{ project.4}}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        <div>
        <p class="mt-3" style = 'text-align: left'>For further inquiries or for any kind of information please contact us through our phone numbers: +88 01676323576.</p>

        <p class="mt-2" style = 'text-align: left'>You are most welcome at our office. Please check yourself and be fully satisfied. We will do our best for your satisfaction. Your kind and quickest attention will be highly appreciated.</p>
        <p class="mt-2" style = 'text-align: left'>Thanking you and assuring you of our best services.</p>


        <p class="mt-4 fw-bold" style = 'text-align: left'>A K M Mashuqur Rahman Majumder</p>
        <p class="mt-1 fw-bold" style = 'text-align: left'>Managing Director, O’Dell Tech LTD</p>
        <p class="mt-1 fw-bold" style = 'text-align: left'>Address: House 1202, Road 12B, Avenue 11, Mirpur DOHS</p>
        <p class="mt-1 fw-bold" style = 'text-align: left'>Phone: +88 01676323576</p>
        <p class="mt-1 fw-bold" style = 'text-align: left'>Email: mashuq.odelltech@odell.com.bd</p>
        </div>
    </div>
  </div>
{% endif %}
</div>

{% endblock MainContent %}
{% block meassage %}
{% include 'notifications/notifications.html' %}           
{% endblock meassage %}

{% block JS %}
<script type=text/javascript>
  $(document).ready(function() {
  $("#id_project").select2({
      
  });
});
</script>

<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");


    function printDiv(divName) {
        var originalContents = document.body.innerHTML
        var printContents = document.getElementById(divName).innerHTML;
        document.body.innerHTML = printContents;
        window.print();
        document.body.innerHTML = originalContents;
      }


      
    function ExportToExcel(type, fn, dl) {
            var elt = document.getElementById('tbl_absent_export');
            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 %}