{% extends 'store_layout_two.html' %}
{% load static %}
{% block content %}
{%csrf_token%}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.min.css"
crossorigin="anonymous" />
<link rel="stylesheet" href="{% static 'store/build/css/countrySelect.css' %}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.0/css/all.min.css" integrity="sha512-3PN6gfRNZEX4YFyz+sIyTF6pGlQiryJu9NlGhu9LrLMQ7eDjNgudQoFDK3WSNAayeIKc6B8WXXpo4a7HqxjKwg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<style>
.card a:hover {
    color: #bc9948;
}
.table thead th {
    border-bottom: 1px solid #dee2e6;
}
.add-btn a.btn.btn-primary {
    padding: 8px 14px;
}
.page-titles h2 {
    font-family: 'Noto Serif Khojki' !important;
    font-weight: bold;
    color: #fff;
    text-align: center;
}
</style>
<title>Beni | Invoice Form</title>  

<div class="content-body">
    <div class="container-fluid">
        <div class="row page-titles profile mx-0">
        <div class="col">
            <h2 class="fs-32 mb-0">Invoice Form</h2>
        </div>
    </div>
    <div class="form-top-head mt-4 px-4">
        <p>Please enter items information</p>
    </div>
    
        <div class="row prdct-rw mt-4">
            <div class="col-12 col-md-12">
                <form method="POST" action="/create-service-invoice/{{data_obj.id}}" id="invoice-form">
                {% csrf_token %}
                <div class="card">
                    <div class="card-body">
                       
                        <div class="table-bordered table-responsive">
                            <table class="table verticle-middle">
                                <thead>
                                    <tr class="text-center">
                                        <th scope="col">Item</th>
                                        <th scope="col">Description</th>
                                        <th scope="col">Quantity</th>
                                        <th scope="col">Unit Price</th>
                                        <th scope="col">Total</th>
                                    </tr>
                                </thead>
                                <tbody>                                 
                                    <tr>
                                        <td><input type="text" value="{{data_obj.serviceId.english_service_name}}" disabled></td>
                                        <td><input type="text" value="{{data_obj.notes}}" disabled></td>
                                        <td><input type="text" name="quantity" id="quantity" value="{% if data_obj.amount %}{{data_obj.amount}}{%else%} 1 {%endif%}" readonly ></td>
                                        <td><input type="text" name="unit_price" id="unit_price"></td>
                                        <td><input type="text" name="total_price" id="total" readonly></td>
                                    </tr> 
                                </tbody>                        
                            </table>
                        </div>
                    </div>
                    <div class="add-btn text-right p-4">                    
                        <a href="#" class="btn btn-primary">Add New Item +</a>                   
                    </div>
                </div>
                <div class="text-center">
                    <button class="btn btn-primary" type="submit">Create Invoice</button>
                </div>
                </form>
            </div>
    </div>
  

</div>
</div>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
    $('#unit_price').on("keyup",function () {
    var unit_price = $("#unit_price").val();
    var quantity = $('#quantity').val()
    total_sum_per_unit = unit_price * quantity
    var total_amount = $('#total').val(total_sum_per_unit)

  })
</script>
{% endblock %}