{% extends 'pos_system/base.html' %}
{% load static %}

{% block content %}


<div class="main-content">

    <div class="page-content">
        <div class="container-fluid">

            <!-- start page title -->
            <div class="row">
                <div class="col-sm-6">
                    <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                        <!-- <h4 class="mb-sm-0 font-size-18">Invoice Form</h4> -->
                    </div>
                </div>
                <div class="col-sm-6 float-end">
                    <div class="page-title-box d-sm-flex align-items-center justify-content-between float-end">
                    </div>
                </div>
            </div>
            <!-- end page title -->

            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body">
                            <form class="outer-repeater" id="invoiceForm" method="POST">

                            <div class="row">
                                <div class="col-sm-6">
                                    {% if is_from_quotation %}
                                    <button onclick="goBack()" type="button" class="btn btn-success btn-sm fw-bold mb-3">
                                        <i class='bx bx-arrow-back'></i>
                                    </button>
                                    
                                        <h3 for="formname ">Invoice Form for Quotation # {{quotation.id}}</h3>
                                    {% else %}
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <button onclick="goBack()" type="button" class="btn btn-success btn-sm fw-bold mb-3">
                                                <i class='bx bx-arrow-back'></i>
                                            </button>
                                            <h3 class="card-title mb-4 fs-4">Invoice Form</h3>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="mb-3">
                                                <label for="service-date">Service Date :</label>
                                                <div class="hstack gap-1">
                                                    <input type="date" value="{{today}}" required class="form-control form-control-sm" id="service-date" name="service-date">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    {% endif %}

                                </div>
                                <div class="col-sm-6">
                                    <div class="mb-3">
                                        <div class="row">
                                            {% if not is_from_quotation %}
                                            <div class="col-md-6">
                                                <label for="">Quotation:</label>
                                                <div class="hstack gap-1 mb-3">
                                                    <select name="quotation" id="quotation" class="form-select select2" onchange="quotationChangeHandler(event,this.options[this.selectedIndex].text)">
                                                        <option value="none">--Without Quotation--</option>
                                                        {% for i in quotation %}
                                                        <option value="{{i.id}}">{{i.customer.first_name}} {{i.customer.last_name}}</option>
                                                        {% endfor %}
                                                    </select>
                                                    <a type="button" href="{% url 'add_quotation' 0 %}" class="btn btn-sm btn-success waves-effect waves-light"  title="Add Customer"><i class="bx bx-plus"></i></a>
                                                </div>
                                            </div>
                                            {% endif %}

                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="sale-rep">Sale Rep :</label>
                                                    <div class="hstack gap-1">
                                                        <select name="sale-rep" id="sale-rep" class="form-select select2">
                                                            <option disabled>Select Sale Rep</option>
                                                            {% for i in sale_rep %}
                                                            <option value="{{i.id}}">{{i.name}}</option>
                                                            {% endfor %}
                                                        </select>
                                                        <button type="button"  data-bs-toggle="modal" data-bs-target="#addSaleRepInvoiceModal" class="btn btn-sm btn-success waves-effect waves-light"  title="Add Work Site"><i class="bx bx-plus"></i></button>
                                                    </div>
                                                </div>
                                            </div>
                                            {% if is_from_quotation %}
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="service-date">Service Date :</label>
                                                    <div class="hstack gap-1">
                                                        <input type="date" required class="form-control form-control-sm" id="service-date" name="service-date">
                                                    </div>
                                                </div>
                                            </div>
                                            {% endif %}
                                        </div>
                                        
                                    </div>
                                </div>
                            </div>
                                <div data-repeater-list="outer-group" class="outer">
                                    <div data-repeater-item class="outer">
                                        <div class="alert alert-success alert-dismissible fade show d-none" id="invoice-site-alert" role="alert">
                                            Work Site Added Successfully.
                                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>        
                                        </div>
                                        <div class="alert alert-success alert-dismissible fade show d-none" id="invoice-customer-alert" role="alert">
                                            Customer Added Successfully.
                                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>        
                                        </div>
                                        <div class="row">
                                            <div class="col-md-4">
                                                <div class="mb-3">
                                                    <label for="formname">Customer:</label>
                                                    <div class="hstack gap-1">
                                                        <select name="customer" id="customer" class="form-select select2" onchange="invoiceCustomerChangeHandler(event,this.options[this.selectedIndex].text)">
                                                            {% for i in customer %}
                                                            <option value="{{i.id}}">{{i.first_name}} {{i.last_name}}</option>
                                                            {% endfor %}
                                                        </select>
                                                        <button type="button"  data-bs-toggle="modal" data-bs-target="#addCustomerInvoiceModal" class="btn btn-sm btn-success waves-effect waves-light"  title="Add Customer"><i class="bx bx-plus"></i></button>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="mb-3">
                                                    <label for="site">Work Site :</label>
                                                    <div class="hstack gap-1">
                                                        <select name="site" id="site" class="form-select select2">
                                                            <option disabled>Select Work Site</option>
                                                            {% for i in site %}
                                                            <option value="{{i.id}}">{{i.street}}</option>
                                                            {% endfor %}
                                                        </select>
                                                        <button type="button"  data-bs-toggle="modal" data-bs-target="#addSiteInvoiceModal" class="btn btn-sm btn-success waves-effect waves-light"  title="Add Work Site"><i class="bx bx-plus"></i></button>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="mb-3">
                                                    <label for="formname">BIlling Address:</label>
                                                    <div class="hstack gap-1">
                                                        <!-- <select id="billing"  name="billing-address"  class="form-select select2">
                                                            <option disabled>Select Address</option>
                                                            {% for i in billing %}
                                                            <option value="{{i.id}}">{{i.address}}</option>
                                                            {% endfor %}
                                                        </select> -->
                                                          <input type="text" class="form-control" value="1691 LEXINGTON AVE, NEW YORK, NY 10029" name="billing-address" id="billing" aria-describedby="helpId" placeholder="">
                                                    <!-- <button type="button"  data-bs-toggle="modal" data-bs-target="#addBillingInvoiceModal" class="btn btn-sm btn-success  waves-effect waves-light"  title="Add Billing Address"><i class="bx bx-plus"></i></button> -->
                                                    </div>

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

                                        <div class="table-responsive mt-3">
                                        <table
                                        class="table table-sm"
                                        style="width: 100%;"
                                        id="SectionTable">
                                        <thead>
                                          <tr>
                                            <th style="line-height: 1; width: 50vh;">Product</th>
                                            <th style="line-height: 1; width: 70px;">Width</th>
                                            <th style="line-height: 1; width: 70px;">Height</th>
                                            <th style="line-height: 1" class="text-center">Unit</th>
                                            <th style="line-height: 1;  width: 80px;" class="text-center">Price $</th>
                                            <th style="line-height: 1;  width: 80px;" class="text-center">Qty(Sqft)</th>
                                            <th style="line-height: 1" class="text-center">Remaining</th>
                                            <th style="line-height: 1" class="text-center">Total $</th>
                                            <th style="line-height: 1">
                                              <button
                                                type="button"
                                                id="newrow"
                                                class="btn btn-sm btn-success"
                                                onclick="TableFunction()"
                                              >
                                              <i class="bx bx-plus" ></i>
                                              </button>
                                            </th>
                                          </tr>
                                        </thead>
                                        <tbody id="invoiceBody"></tbody>
                                        </table>
                                        </div>


                                        <div class="table-responsive">
                                            <table class="invoice-table table table-borderless table-nowrap mb-0">
                                                <tbody>
                                                    <tr class="border-top border-top-dashed mt-2">
                                                        <td></td>
                                                        <td colspan="2" class="p-0">
                                                            <table class="table table-borderless table-sm table-nowrap align-middle mb-0">
                                                                <tbody>
                                                                    <tr>
                                                                        <th scope="row" class="text-end">Sub Total</th>
                                                                        <td style="width:150px;">
                                                                            <input type="text" class="form-control bg-light border-0" id="subtotal" placeholder="0" readonly="">
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <th scope="row" class="text-end">Tax</th>
                                                                        <td>
                                                                            <div class="input-group">
                                                                                <input  type="number" step="0.001"  onkeyup="subtotalHandler()" min="0" aria-describedby="tax%" class="form-control" id="invoice-tax" value="8.875">
                                                                                <div class="input-group-prepend">
                                                                                    <span class="input-group-text" id="tax%">%</span>
                                                                                </div>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <th scope="row" class="text-end">Surcharge</th>
                                                                        <td>
                                                                            <div class="input-group">
                                                                                <input  type="number" step="0.001" onchange="subtotalHandler()" onkeyup="subtotalHandler()" min="0" aria-describedby="surcharge%" class="form-control" id="invoice-surcharge" value="0">
                                                                                <div class="input-group-prepend">
                                                                                    <span class="input-group-text" id="surcharge%">%</span>
                                                                                </div>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <th scope="row" class="text-end">Discount</th>
                                                                        <td>
                                                                            <div class="input-group">
                                                                                <input  type="number" step="0.001" onchange="subtotalHandler()"  onkeyup="subtotalHandler()" min="0" aria-describedby="discount%" class="form-control" id="invoice-discount" value="0">
                                                                                <div class="input-group-prepend">
                                                                                    <span class="input-group-text" id="discount%">%</span>
                                                                                </div>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                    <tr class="border-top border-top-dashed">
                                                                        <th scope="row" class="text-end">Total Amount</th>
                                                                        <td>
                                                                            <input type="text" class="form-control bg-light border-0" id="invoice-total" placeholder="0.00" readonly="">
                                                                        </td>
                                                                    </tr>
                                                                </tbody>
                                                            </table>
                                                            <!--end table-->
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                            <!--end table-->
                                        </div>




                                        <div class="row mt-3">
                                            <div class="col-lg-4">
                                                <div class="mb-2">
                                                    <label for="note" class="form-label text-muted text-uppercase fw-semibold">Note</label>
                                                    <!-- <textarea class="form-control" type="text" id="note" placeholder="Note" rows="2"></textarea> -->
                                                    <input class="form-control" type="text" id="note" placeholder="Note">
                                                </div>
                                                <!-- <div class="mb-2">
                                                    <label for="choices-payment-type" class="form-label text-muted text-uppercase fw-semibold">Status (Terms)</label>
                                                    <div class="input-light">
                                                        <select class="form-control" data-choices="" data-choices-search-false="" name="_status" data-choices-removeitem="" id="_status">
                                                            <option value="COD">COD</option>
                                                            <option value="Invoice">Invoice</option>
                                                        </select>
                                                    </div>
                                                </div> -->
                                                <div class="mb-2">
                                                    <label for="choices-payment-type" class="form-label text-muted text-uppercase fw-semibold">Make Payment</label>
                                                    <div class="input-light">
                                                        <select onchange="javascript:document.getElementById('bank-details').classList.toggle('d-none')" class="form-control" name="payment_type" id="payment_type">
                                                            <option value="" disabled>Payment Method</option>
                                                            <option value="Cash">Cash</option>
                                                            <option value="Bank">Bank</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div id="bank-details" class="d-none">
                                                    <div class="mb-2">
                                                    <input class="form-control" type="text" id="cardholderName" placeholder="Card Holder Name">
                                                    </div>
                                                    <div class="mb-2">
                                                        <input class="form-control" type="text" id="cardNumber" placeholder="xxxx xxxx xxxx xxxx">
                                                    </div>
                                                </div>
                                                <div class="mb-2">
                                                    <input class="form-control"  type="number" step="0.001"  id="amountToPay" placeholder="0.00">
                                                </div>
                                                <div>
                                                    <input class="form-control" type="text" id="message" placeholder="Comment">
                                                </div>
                                            </div>
                                            <!--end col-->
                                        </div>

                                            
                                        </div>
                                    
                                        <button type="submit" class="btn btn-primary mt-3">Submit</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end row -->

        </div> <!-- container-fluid -->
    </div>
    <!-- End Page-content -->
</div>





<!-- Add Customer Modal -->
<div class="modal fade" id="addCustomerInvoiceModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Add Customer</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <form onsubmit="add_customer_from_invoice(event)" id="customerModal">
            <div class="modal-body">
                {% csrf_token %}
                <input type="hidden" name="type" value="add">
                <div class="row">
                    <div class="col-sm-6">
                        <div class="mb-3">
                            <label for="productname">Name</label>
                            <input id="invoicefirstname" required name="first_name" type="text" class="form-control" placeholder="First Name">
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="mb-3">
                            <label for="manufacturername">Contact</label>
                            <input id="invoicecontact" name="contact" type="text" class="form-control" placeholder="Last Name">
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="mb-3">
                            <label for="manufacturername">Email</label>
                            <input id="invoiceemail" name="email" type="email" class="form-control" placeholder="mail@mail.com">
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="mb-3">
                            <label for="manufacturerbrand">Phone No.</label>
                            <input id="invoicephoneno" required name="phone_no" type="text" class="form-control" placeholder="Phone No.">
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="mb-3">
                            <label for="manufacturerbrand">Fax No.</label>
                            <input id="invoicefaxno" name="fax_no" type="text" class="form-control" placeholder="Fax No.">
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="mb-3">
                            <label for="price">Street</label>
                            <input id="invoiceStreet" name="Street" type="text" class="form-control" placeholder="Complete Address">
                        </div>
                    </div> <div class="col-12">
                        <div class="mb-3">
                            <label for="price">Address</label>
                            <input id="invoiceaddress" name="address" type="text" class="form-control" placeholder="Complete Address">
                        </div>
                    </div>
                </div>

                <!-- <div class="d-flex flex-wrap gap-2">
                    
                </div> -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary waves-effect waves-light">Save</button>
            </div>
        </form>
      </div>
    </div>
</div>


<!-- Add Work Site Modal -->
<div class="modal fade" id="addSiteInvoiceModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Add Work Site</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <form onsubmit="add_site_from_invoice(event)" id="siteModal">
            <div class="modal-body">
                {% csrf_token %}
                <input type="hidden" name="type" value="add">
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="productname">Customer</label>
                            <select class="form-select" data-choices="" data-choices-search-false="" data-choices-removeitem="" name="customer" id="invoicesitecustomer" disabled>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label>Street</label>
                            <input id="invoicesitestreet" required name="street" type="text" class="form-control" placeholder="Street">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label>Address</label>
                            <input id="invoicesiteaddress" required name="address" type="text" class="form-control" placeholder="Address">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label>Start Date</label>
                            <input id="invoicesitestartdate" required name="start_date" type="date" class="form-control">
                        </div>
                    </div>

                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary waves-effect waves-light">Save</button>
            </div>
        </form>

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



<!-- Add Shipping  Modal -->
<div class="modal fade" id="addShippingInvoiceModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Add Shipping Address</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <form onsubmit="add_shipping_from_invoice(event)" id="shippingModal">
            <div class="modal-body">
                {% csrf_token %}
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="productname">Customer</label>
                            <select class="form-select" data-choices="" data-choices-search-false="" data-choices-removeitem="" name="invoiceshipcustomer" id="invoiceshipcustomer" disabled>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label>Address</label>
                            <input id="invoiceshipaddress" required name="address" type="text" class="form-control" placeholder="Address">
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary waves-effect waves-light">Save</button>
            </div>
        </form>

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



<!-- Add Billing  Modal -->
<div class="modal fade" id="addBillingInvoiceModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Add Billing Address</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <form onsubmit="add_billing_from_invoice(event)" id="billingModal">
            <div class="modal-body">
                {% csrf_token %}
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="productname">Customer</label>
                            <select data-choices="" data-choices-search-false="" data-choices-removeitem=""  class="form-select" name="invoicebillcustomer" id="invoicebillcustomer" disabled>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label>Address</label>
                            <input id="invoicebilladdress" required name="address" type="text" class="form-control" placeholder="Address">
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary waves-effect waves-light">Save</button>
            </div>
        </form>

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

<!-- Add Sale Rep Modal -->
<div class="modal fade" id="addSaleRepInvoiceModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Add Sale Rep</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <form onsubmit="add_sale_rep_from_invoice(event)" id="sale-rep-modal">
            <div class="modal-body">
                {% csrf_token %}
                <input type="hidden" name="type" value="add">
                <div class="row">
                    <div class="col-sm-6">
                        <div class="mb-3">
                            <label for="productname">Name</label>
                            <input id="invoice-sale-rep-name" required name="name" type="text" class="form-control" placeholder="First Name">
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="mb-3">
                            <label for="manufacturername">Email</label>
                            <input id="invoice-sale-rep-email" name="email" type="email" class="form-control" placeholder="mail@mail.com">
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="mb-3">
                            <label for="manufacturerbrand">Phone No.</label>
                            <input id="invoice-sale-rep-phoneno" name="phone_no" type="text" class="form-control" placeholder="Phone No.">
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="mb-3">
                            <label for="price">Address</label>
                            <input id="invoice-sale-rep-address" name="address" type="text" class="form-control" placeholder="Complete Address">
                        </div>
                    </div>
                </div>

                <!-- <div class="d-flex flex-wrap gap-2">
                    
                </div> -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary waves-effect waves-light">Save</button>
            </div>
        </form>
      </div>
    </div>
</div>





{% endblock %}