{% 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">Edit Quotation 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">
                        <form class="outer-repeater" id="invoiceForm">
                            <div class="row">
                                <div class="col-sm-6">
                                    <h4 class="card-title mb-4 fs-4">Quotation Form</h4>
                                </div>
                                <div class="col-sm-6">
                                    <div class="row">
                                        <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>
                                        <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>
                                    </div>
                                </div>
                            </div>
                                <div data-repeater-list="outer-group" class="outer">
                                    <div data-repeater-item class="outer">
                                        <div class="row">
                                            <input type="hidden" id="invoice-id">
                                            <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="col-md-6">
                                                <div class="mb-3">
                                                    <label for="formname">Customer:</label>
                                                    <div class="hstack gap-2">
                                                        <select name="customer" id="customer" class="form-select select2 me-auto" 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="ms-2 btn btn-sm btn-success waves-effect waves-light"  title="Add Customer"><i class="bx bx-plus"></i></button> -->
                                                    </div>
                                                </div>
                                                <div class="mb-3">
                                                    <label for="site">Work Site :</label>
                                                    <div class="hstack gap-2">
                                                        <select name="site" id="site" class="form-select select2">
                                                            <option disabled>Select Work Site</option>
                                                            {% for i in site %}
                                                            <option value="{{i.id}}">{{i.name}}</option>
                                                            {% endfor %}
                                                        </select>
                                                        <!-- <button type="button"  data-bs-toggle="modal" data-bs-target="#addSiteInvoiceModal" class="ms-2 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-6">
                                                <div class="mb-3">
                                                    <label for="formname">Shipping Address:</label>
                                                    <div class="hstack gap-2">
                                                        <select id="shipping"  name="shipping-address" class="form-select select2">
                                                            <option disabled>Select Address</option>
                                                            {% for i in shipping %}
                                                            <option value="{{i.id}}">{{i.address}}</option>
                                                            {% endfor %}
                                                        </select>
                                                    <!-- <button type="button"  data-bs-toggle="modal" data-bs-target="#addShippingInvoiceModal" class="ms-2 btn btn-sm btn-success  waves-effect waves-light"  title="Add Shipping Address"><i class="bx bx-plus"></i></button> -->
                                                    </div>

                                                </div>
                                                <div class="mb-3">
                                                    <label for="formname">BIlling Address:</label>
                                                    <div class="hstack gap-2">
                                                        <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>
                                                    <!-- <button type="button"  data-bs-toggle="modal" data-bs-target="#addBillingInvoiceModal" class="ms-2 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" class="text-center">Price $</th>
                                            <th style="line-height: 1" 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.01"  onchange="subtotalHandler()" min="0" aria-describedby="tax%" class="form-control" id="invoice-tax" value="0.0">
                                                                                <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.01"  onchange="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.01"  onchange="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>
                                        <button type="submit" class="btn btn-primary mt-3 float-end">Submit</button>
                                </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">First 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">Last Name</label>
                            <input id="invoicelastname" name="last_name" 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="price">Address</label>
                            <input id="invoiceaddress" name="address" type="text" class="form-control" placeholder="Complete Address">
                        </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>

                <!-- <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>Name</label>
                            <input id="invoicesitename" required name="name" type="text" class="form-control" placeholder="Site Name">
                        </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>


{% endblock %}