{% extends 'base/base.html' %}
{% block title %} Patinet Billing{% endblock %}
{% block stylesheets %}
{% endblock stylesheets %}
{% block content %}



<div class="overlay"></div>

<div id="wrapper">

    <div id="main-content">
        
            <br>
           
        {% if messages %}
{% for message in messages %}
        <div class="alert {% if message.tags == 'error' %}alert-danger{% else %}alert-success{% endif %} alert-dismissible" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <i class="fa fa-check-circle"></i> {{ message }}
        </div>
        {% endfor %}
        {% endif %}

        <div class="container-fluid">
            
            
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header" style="background-color: white;">
                    <div class="row">
                        <div class="col-md-4">
                            <a href="{% url 'addClient' %}" type="button" class="btn btn-info" >Back</a>
                            </div>
                            <div class="col-md-4">
                                <h5><strong>Add Patient Billing</strong></h5>
                            </div>
                            <div class="col-md-4">
                            </div>
                        </div>
                    </div>

                    <div class="body">

                       
                        <form method="post" action="{% url 'addPatientBilling'  client.id %} ">
                            {% csrf_token %}
                            

                            <br>
                            <div class="row">
                            
                                <div class="col-md-4">
                                    <h6><strong><u>Billing:</u></strong></h6>
                                </div>
                                
                            </div>
                                <br>

                                <div id="documentsContainer">
                                 
                                    <div class="documents-plan">

                                <div class="row">

                                    <div class="col-md-6">
                                        <label for="totalPrice" class="form-label">Total Price</label>
                                        <input type="number" id="totalPrice" name="totalPrice"
                                       class="form-control" placeholder="Enter price" required/>
                                    </div>

                                  

                                </div>

                                <br>

                                <div class="row">
                                    <div class="col-md-3">
                                        <label class="form-label">Comission Type</label><br>
                                        <label class="fancy-radio custom-color-green"><input name="comissionType" value="PKR" type="radio" checked><span><i></i>PKR</span></label>
                                        <label class="fancy-radio custom-color-green"><input name="comissionType" value="%" type="radio"><span><i></i>%</span></label>
                                     </div>

                                    <div class="col-md-3">
                                        <label for="panelistComission" class="form-label">Panelist Comission</label>
                                        <input type="number" id="panelistComission" name="panelistComission"
                                               class="form-control" placeholder="Enter Payment" />
                                    </div>

                                </div>

                                <br>

                                <div class="row">

                                    <div class="col-md-3">
                                        <label for="netIncome" class="form-label">Net Income</label>
                                        <input type="number" id="netIncome" name="netIncome"
                                       class="form-control"  readonly/>
                                    </div>

                                    <div class="col-md-3" >
                                        <label for="paymentStatus" class="form-label">Status</label>
                                        <select id="paymentStatus" name="paymentStatus" class="form-control" required>
                                    
                                        <option value="Paid" selected>Paid</option>
                                        <option value="UnPaid">UnPaid</option>
                                    
                                        </select>

                                    </div>

                                </div>

                               
                            </div>
                        </div>
                                <br>

                            

                                <div class="row">
                                <div class="col-md-10"></div>
                                <div class="col-md-2">
                                <button type="button" class="btn btn-danger">Cancel</button>
                                <button type="submit" class="btn btn-info">Save</button>
                                </div>
                                </div>



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


{% block javascripts %}

<script>
    // Function to update Net Income
    function calculateIncome() {
        // Get the values of the fields
        let totalPrice = parseFloat(document.getElementById('totalPrice').value) || 0;
        let panelistComission = parseFloat(document.getElementById('panelistComission').value) || 0;
        let comissionType = document.querySelector('input[name="comissionType"]:checked').value;

        // Subtract expenses from total price
        let netIncome = totalPrice 

        // Check if the commission type is PKR or % and apply the calculation
        if (comissionType === "PKR") {
            netIncome -= panelistComission;
        } else if (comissionType === "%") {
            netIncome -= (panelistComission / 100) * totalPrice;
        }

        // Update the net income field
        document.getElementById('netIncome').value = netIncome.toFixed(2);
    }

    // Event listener for all the input fields to trigger calculation
    document.getElementById('totalPrice').addEventListener('input', calculateIncome);
    document.getElementById('panelistComission').addEventListener('input', calculateIncome);
    document.querySelectorAll('input[name="comissionType"]').forEach(function(radio) {
        radio.addEventListener('change', calculateIncome);
    });
</script>

{% endblock javascripts %}
{% endblock content %}