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

{% load i18n %}

{% block title %}
    {% if custom_invoice %}
        {% translate "View Custom Invoice" %}
    {% else %}
        {% translate "Add Custom Invoice" %}
    {% endif %}
{% endblock %}

{% block breadcumbheading %}
{% translate "Manage Bills" %}
{% endblock  %}
{% block breadcumbfirst %}
<a href="/supplier/bill/list/" class="text-muted text-hover-primary" style="text-transform: capitalize;">Manage Bills </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;">
		    {% if custom_invoice %}
                {% translate "View" %}
            {% else %}
                {% translate "Add" %}
            {% endif %}
		</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">
            <div class="card-header pt-7 pb-7">
        	    <h3 class="card-title align-items-start flex-column">
        		    <span class="card-label fw-bold text-gray-800" >
        		        {% if custom_invoice %}
                            {% translate "View Custom Invoice" %}
                        {% else %}
                            {% translate "Add Custom Invoice" %}
                        {% endif %}
                    </span>
        	    </h3>
            </div>
            {% 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"  enctype="multipart/form-data" action="{%url 'supplier:create_custom_invoice' %}" >
                <input type="hidden" name="bill_no" value="{{ supplier_bill.id }}">
                {% 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">
                            <!--begin::Add Customer-->
                            <div class="col-lg-3 col-md-3 col-sm-3">
                                <div class="gap-lg-2">
                                    <label class="required form-label"><strong>Date</strong></label>
                                    <div class="input-group" id="kt_td_picker_localization" data-td-target-input="nearest"  data-td-target="#kt_td_picker_localization" data-td-toggle="datetimepicker">
                                        <input type="text" id="kt_td_picker_localization_input" class="form-control start_date" readonly data-td-target="#kt_td_picker_localization" name="bill_date" required   value="{% if custom_invoice %}{{ custom_invoice.date|date:'d-m-Y' }}{% else %}{% now 'd-m-Y' %}{% endif %}" />
                                        <span class="input-group-text" data-td-target="#kt_td_picker_localization" data-td-toggle="datetimepicker">
                                            <i class="ki-duotone ki-calendar fs-2"><span class="path1"></span><span class="path2"></span></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-3 col-sm-3">
                                <div class="gap-lg-2">
                                    <label class="required form-label"><strong>Invoice No.</strong></label>
                                    <input type="text"  class="form-control" name="invoice_number"  placeholder="Enter Invoice Number" value="{{ custom_invoice.invoice_number|default:'' }}" required>
                                </div>
                            </div> 
                            <div class="col-lg-3 col-md-3 col-sm-3">
                                <div class="gap-lg-2">
                                    <label class="required form-label"><strong>Amount</strong></label>
                                    <input type="number" class="form-control" name="invoice_amount" placeholder="$0.00" value="{{ custom_invoice.amount|default:'' }}" required>
                                </div>
                            </div> 
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <label class="form-label"><strong>Attachments: </strong></label>
                                {% if custom_invoice and custom_invoice.attachment %}
                                    <p>
                                        Current file:
                                        <a href="{{ custom_invoice.attachment.url }}" target="_blank">
                                            View PDF
                                        </a>
                                    </p>
                                {% endif %}
                                <input type="file" class="form-control " placeholder="Upload Pdf"   name="attachment" id="attachment"  accept=".pdf">    
                            </div>
                        </div>
                    </div>
                    <div class="separator"></div>
                    <div class="d-flex mb-7 mt-12 just-cont-space">
                        <!--begin::Button-->
                        <div class="justify-content-end">
                            <a  href="{% url 'supplier:bill_list' %}" id="kt_ecommerce_edit_order_cancel" class="btn btn-light me-5">
                                Cancel
                            </a>
                            <!--end::Button-->
                            <!--begin::Button-->
                            <button type="submit" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_stacked_1">
                            <!-- <button type="submit" id="kt_ecommerce_edit_order_submit" class="btn btn-primary"> -->
                                <span class="indicator-label">Save </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>
        </div>
    </div>
</div>
</div>
{% endblock %}
{% block script %}
<script>
    var currentDate = new Date().toISOString().split('T')[0];
    let [yeart, montht,dayt] = currentDate.split('-')
    var startDateObjs = new Date(new Date(+yeart, +montht -1 , +dayt));
    startDateObjs.setDate(startDateObjs.getDate() + 7);
    let days = startDateObjs.getDate();
    let months = startDateObjs.getMonth() +1;
    let years = startDateObjs.getFullYear();
    const clock1=new tempusDominus.TempusDominus(document.getElementById("kt_td_picker_localization"), {
        display: {
            icons: { close: "ki-outline ki-cross fs-1",  },
            buttons: {   close: true,  },
    
        },
        localization: {
           locale: "en",
           startOfTheWeek: 1,
           format: "dd-MM-yyyy",
       },
        restrictions: {  maxDate: $(".start_date").val(),  },
    });
    const clock2=new tempusDominus.TempusDominus(document.getElementById("kt_td_picker_localization_due"), {
    display: {
        icons: { close: "ki-outline ki-cross fs-1",    },
        buttons: {   close: true,  },

    },
   localization: {
       locale: "en",
       startOfTheWeek: 1,
       format: "dd-MM-yyyy",
       },
   restrictions: {   minDate: $(".start_date").val(), },
});
    $('.start_date').on('change',function(e){
        let [dayChange, monthChange, yearChange] = $(this).val().split('-')
         var startDateObj = new Date(new Date(+yearChange, +monthChange, +dayChange));
         console.log('here',startDateObj,e.detail.date)
        clock2.updateOptions({
            restrictions: {
            minDate: $(this).val(),
            },
        });
    });
    function updateDueDate() {
        var startDate = $(".start_date").val();
        var dueDateInput = $(".due_date");
        if (startDate) {
            let [day1, month1, year1] = startDate.split('-')
            var startDateObj = new Date(new Date(+year1, +month1-1 , +day1));               
            startDateObj.setDate(startDateObj.getDate() + 7);
            dueDateInput.attr('min', startDate);
            let day = startDateObj.getDate();
            let month = startDateObj.getMonth();
            let year = startDateObj.getFullYear();
            console.log(startDateObj);
            if(day <= 9)
            {
                day="0"+day;
            }
            if(month <= 9)
            {
                dueDateInput.val(day + "-" + ((month + 1)) + "-" + year);
            }
            else{
                dueDateInput.val(day + "-" + ((month + 1)) + "-" + year);
            }
            console.log(startDateObj);
        } else {
            dueDateInput.removeAttr('min');              
        }
    }
    updateDueDate();
</script>

                    {% endblock script %}