{% extends "layout/default.html" %}

{% load i18n %}

{% block title %}{% translate "Add Quote" %}{% endblock %}

{% block breadcumbheading %}
{% translate "Manage Quotes" %}
{% endblock  %}
{% block breadcumbfirst %}

<a href="{% url 'quotation:list_quotation' %}" class="text-muted text-hover-primary" style="text-transform: capitalize;">Manage Quotes </a>

{% endblock  %}
{% block breadcumbaddmore %}
	<!--begin::Item-->
		<li class="breadcrumb-item">
			<span class="bullet bg-gray-400 w-5px h-2px"></span>
		</li>
		<!--end::Item-->
		<!--begin::Item-->
		<li class="breadcrumb-item text-muted" style="text-transform: capitalize;">Document</li>
		<!--end::Item-->
{% endblock  %}

{% block content %}

<div class="custom mt-3 create-cust">

<div class="d-flex flex-column flex-lg-row-fluid gap-7 gap-lg-10" data-select2-id="select2-data-129-yayj">
        
<!--begin::Order details-->
<div class="card card-flush py-4">
    <!--begin::Card header-->
    <div class="card-header">
        <div class="card-title">
            <h2>Quote Documents</h2>
        </div>
    </div>
    <!--end::Card header-->

        {% if messages %}
                        <div class="d-flex justify-content-center align-items-center">
                            {% for message in messages %}
                              <div class="alert alert-{% if message.tags == 'error' %}danger{% else %}success{% endif %}" role="alert" style="width: 300px;">
                                {{ message }}
                                </div>  
                            {% endfor %}
                         </div>
                        {% endif %}

    <form method="post" action="{% url 'quotation:manual_upload_document'  quotation.id  %}" enctype="multipart/form-data">
    {% csrf_token %}

    <!--begin::Card body-->
    <div class="card-body pt-9">
        <div class="d-flex flex-column gap-7 gap-lg-7">
            <!--begin::Input group-->
            <div class="separator"></div>
            <!--end::Separator-->
        <div class="row">
            
            <div class="col-lg-6 col-md-6 col-sm-6">
                <!--begin::Add Customer-->
                <div class="gap-lg-2">
                <label class="required form-label"><strong>Pdf File: </strong></label>
                <input type="file" class="form-control " placeholder="Upload Pdf"   name="manual_quote_pdf" id="manual_quote_pdf"  accept=".pdf" required>                 
               </div>
    
               </div>

            <!--   <div class="col-lg-6 col-md-6 col-sm-6">-->
                <!--begin::Add Customer-->
            <!--    <div class="gap-lg-2">-->
            <!--    <label class="required form-label"><strong>Document File: </strong></label>-->
            <!--    <input type="file" class="form-control " placeholder="Upload Doc"   name="manual_quote_doc" id="manual_quote_doc" accept=".doc, .docx" required>               -->
            <!--   </div>-->
    
            <!--</div>-->

            
        </div>
        <div class="separator"></div>
        <div class="d-flex mb-7 mt-12 just-cont-space">
            <div class="form-check form-check-custom form-check-solid">
                <!-- <input class="form-check-input" type="checkbox" value="1" name="sent_mail" id="sent_mail">
                <label class="form-check-label" for="same_as_billing">
                     Send Document
                </label> -->
            </div>
            <!--begin::Button-->
            <div class="justify-content-end">
                <a  href="{% url 'quotation:list_quotation' %}" id="kt_ecommerce_edit_order_cancel" class="btn btn-light me-5">
                    Cancel
                </a>
                <!--end::Button-->
                <!--begin::Button-->
                <button type="submit" id="kt_ecommerce_edit_order_submit" class="btn btn-primary">
                    <span class="indicator-label">
                        Upload
                    </span>
                    <span class="indicator-progress">
                        Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                    </span>
                </button>
                <!--end::Button-->
            </div>
        </div>
    </div>
</form>
<!--end::Card header-->
</div>
</div>
<!--Skye-->
</div>

<script>
    function change_discount_type()
    {
        if($('#discount_type').val()=="dollar")
        {
            $('#discount_percentage').css('display','none');
            $('#discount_dollar').css('display','block');
        }
        else{
            $('#discount_percentage').css('display','block');
            $('#discount_dollar').css('display','none');
        }
        cal_total();
           // alert($('#discount_type').val()); //dollar percentage
    }

    
     $('#AddMore').on('click',function()
    {
        var count=parseInt($(this).attr('count'));
        count=count+1;
        $(this).attr('count',count);
        $('#appendhere').append(
        `<tr class="odd" id="count`+count+`">
            <td>
                <div class="d-flex align-items-center" data-kt-ecommerce-edit-order-filter="product" data-kt-ecommerce-edit-order-id="product_29">
                    <select class="form-select" name="product[]" id="product`+count+`"  data-control="select2" data-placeholder="Select Product"  onchange="calculateTotal(`+count+`)" required  count="`+count+`">
                        <option value="" >Select Product</option>
                        {% for product in products %}
                            <option value="{{ product.id}}" {% if quotationitem.product.id == product.id %}selected{% endif %}>{{ product.product_name }}({{product.sku}})</option>
                        {% endfor %}
                    </select>
                </div>
            </td>
            <td class="text-end pe-5" data-order="17">
                <div class="fw-semibold fs-7"><input  type="number" name="qty[]" id="qty`+count+`" class="form-control" onchange="calculateTotal(`+count+`)"   placeholder="Enter Quantity" value="1" min="1"  required ></div>
            </td>
            <td class="text-end pe-5" data-order="17">
                <div class="fw-semibold fs-7"><input type="text"  class="form-control" name="cost_per_unit[]" id="cost_per_unit`+count+`" placeholder="Cost/Unit" value="$0.00" required></div>
            </td>
            <td class="text-end pe-5" data-order="17">
                <div class="fw-semibold fs-7"><input type="text" class="form-control subtot"  name="subtotal[]" id="subtotal`+count+`"  placeholder="Subtotal" value="$0.00" required></div>
            </td>
            <td class="text-end ">
                <div class="form-check-solid cust-table text-end removetr" onclick="removetr(`+count+`)" count="`+count+`">
                    <a href="#" class="btn btn-light-primary btn-sm btn btn-light ">
                        <i class="ki-duotone ki-minus fs-2"></i>
                    </a>
                </div>
            </td>
        </tr>`);
    });

  

    $(document).ready(function () {
        if ($('#customer').val() == "0") {
            $('#companyField').css('display', 'block');
            $(".individualFields").css('display', 'none');
            $('#company').attr('required', true);
            $('#first_name').removeAttr('required');
            $('#last_name').removeAttr('required');
        } else if ($('#customer').val() == "1") {
            $('#companyField').css('display', 'none');
            $(".individualFields").css('display', 'block');
            $('#company').removeAttr('required');
            $('#first_name').attr('required', true);
            $('#last_name').attr('required', true);
        } else {
            $('#companyField').css('display', 'none');
            $(".individualFields").css('display', 'block');
        }


     
    });
    function removetr(id)
    {

        $('#count'+id).remove();
        cal_total();
    
    }
 
var subtotalsArray = []; // Initialize an array to store subtotals

function calculateTotal(count) {
    var selectedProductId = document.getElementById("product"+count).value;
    var costPerUnitInput = document.getElementById("cost_per_unit"+count);
    var subtotalInput = document.getElementById("subtotal"+count);
    var qtyInput = document.getElementById("qty"+count);
    var discountInput = document.getElementById("discount");
    var gstInput = document.getElementById("gst"); 
    var totalInput = document.getElementById("total");

    if (selectedProductId) {
        fetch(`/quote/get-product-id/?product_id=${selectedProductId}`)
            .then(response => response.json())
            .then(data => {
                var productInfo = parseFloat(data.price);
                costPerUnitInput.value = "$" + productInfo.toFixed(2);
                var qty = parseFloat(qtyInput.value) || 0;             
                var subtotal = productInfo * qty;

                var formattedSubTotal = subtotal.toFixed(2);
                document.getElementById("subtotal"+count).value = '$'+formattedSubTotal;
                cal_total();


            })
            .catch(error => {
                console.error('Error:', error);
            });
    }
    
}
function cal_total()
{
    var tot=0;
    $(".subtot").each(function() {
    tot=tot+parseInt($(this).val().replace('$', ''),10);
    });
    document.getElementById("grand-sub-total").textContent = "$" + tot.toFixed(2);
    document.getElementById("grandsubtotal").value = tot.toFixed(2);
    var gstInput = document.getElementById("gst"); 
    var gst = parseFloat(gstInput.value) || 0;
    if($('#discount_type').val()=="dollar")
    {
        $('#discount_percentage').css('display','none');
        $('#discount_dollar').css('display','block');
        var discountInput = document.getElementById("discount_dollar");
        var discount = parseFloat(discountInput.value.replace('$', ''),10) || 0;      
        var total = tot -discount;
        $('#discount_total').html('$'+(discount.toFixed(2)));            
        $('#gst_total').html('$'+((tot-discount)*(gst/100)).toFixed(2));
    }
    else{
        var discountInput = document.getElementById("discount");
        var discount = parseFloat(discountInput.value) || 0;      
        var total = tot * (1 - discount / 100);            
        $('#discount_total').html('$'+(tot * ( discount / 100)).toFixed(2));
        $('#gst_total').html('$'+((tot-(tot * ( discount / 100)))*(gst/100)).toFixed(2));
    }
    //   console.log(total);
    var total = total + ( total * ( gst / 100));
    // console.log('gst: '+total);
    var formattedGrandTotal = "$" + total.toFixed(2);
    document.getElementById("grand-total").textContent = formattedGrandTotal;
    document.getElementById("total").value = total.toFixed(2);  
}
</script>
{% endblock %}


{% block script %}
<script>
    
new tempusDominus.TempusDominus(document.getElementById("kt_td_picker_localization"), {
   localization: {
       locale: "en",
       startOfTheWeek: 1,
       format: "dd-MM-yyyy"
   }
});
</script>
{% endblock script %}