{% extends 'base/base.html' %}
{% block title %} Patient Files{% endblock %}
{% block stylesheets %}
{% endblock stylesheets %}
{% block content %}





<div id="wrapper">

    <div id="main-content">
        
           

            {% for item in patient_billing %}
            <div class="modal fade" id="editBillingModal-{{ forloop.counter }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">Edit Billing</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <form method="post" action="{% url 'editPatientBilling' item.id %}" enctype="multipart/form-data">
                                {% csrf_token %}
                                
                                <div class="row">
                                    <div class="col mb-6">
                                        <label for="totalPrice" class="form-label">Total Price</label>
                                        <input type="number" id="totalPrice" name="totalPrice"
                                               class="form-control" placeholder="Enter price" required
                                               value="{{ item.totalPrice }}" />
                                    </div>
            
                                   
                                </div>
                                
                                <div class="row">
                                    <div class="col mb-3">
                                        <label class="form-label">Comission Type</label><br>
                                        <label class="fancy-radio custom-color-green">
                                            <input name="comissionType" value="PKR" type="radio" 
                                                   {% if item.comissionType == "PKR" %}checked{% endif %}>
                                            <span><i></i>PKR</span>
                                        </label>
                                        <label class="fancy-radio custom-color-green">
                                            <input name="comissionType" value="%" type="radio" 
                                                   {% if item.comissionType == "%" %}checked{% endif %}>
                                            <span><i></i>%</span>
                                        </label>
                                    </div>
            
                                    <div class="col mb-3">
                                        <label for="panelistComission" class="form-label">Panelist Comission</label>
                                        <input type="number" id="panelistComission" name="panelistComission"
                                               class="form-control" placeholder="Enter Payment" 
                                               value="{{ item.panelistComission }}" min="0" required />
                                    </div>
                                </div>  
                                
                                <div class="row">
                                    <div class="col mb-3">
                                        <label for="netIncome" class="form-label">Net Income</label>
                                        <input type="number" id="netIncome" name="netIncome"
                                               class="form-control" value="{{ item.netIncome }}" readonly />
                                    </div>
            
                                    <div class="col mb-3">
                                        <label for="paymentStatus" class="form-label">Status</label>
                                        <select id="paymentStatus" name="paymentStatus" class="form-control" required>
                                            <option value="Paid" {% if item.paymentStatus == "Paid" %}selected{% endif %}>Paid</option>
                                            <option value="UnPaid" {% if item.paymentStatus == "UnPaid" %}selected{% endif %}>UnPaid</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                <button type="submit" class="btn btn-info">Save Changes</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            {% endfor %}
            


        {% 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>View <u>{{clientData.name}}</u> Billing</strong></h5>
                            </div>
                            <div class="col-md-4">
                            </div>
                        </div>
                    </div>

                    <div class="body">

                        <div class="table-responsive">
                        <table class="table table-bordered table-striped table-hover dataTable js-exportable" style="width:100%">
                            <thead>
                                <tr>
                                    <th>Sr.No</th>
                                    <th>Total Price</th>
                                    <th>Panelist Comission</th>
                                  
                                    <th>Net Income</th>
                                    <th>Date</th>
                                    <th>Status</th>
                                    {% if request.user.userRole == 'Manager' or request.user.userRole == 'Receptionist' %}
                                    {% else %}
                                    <th>Action</th>
                                    {% endif %}
                                </tr>
                            </thead>
                            
                            <tbody>
                                
                                {% for item in patient_billing %}
          <tr>
            <td>{{forloop.counter}}</td>
            <td>{{item.totalPrice}}</td>
            <td>
                {% if item.panelistComission > '0' %}
                {{item.panelistComission}}
               
                {% else %}
                N/A
                {% endif %}
            </td>
          
            <td>{{item.netIncome}}</td>
            <td>{{item.billingDate}}</td>
            <td>
                {% if item.paymentStatus == 'Paid' %}
                <span class="badge badge-success">{{item.paymentStatus}}</span>
                {% else %}
                <span class="badge badge-danger">{{item.paymentStatus}}</span>
                {% endif %}
            </td>     
           
            {% if request.user.userRole == 'Manager' or request.user.userRole == 'Receptionist'%}
            {% else %}
            <td > 
               
                <button type="button" class="btn btn-info" title="Edit"  data-toggle="modal" data-target="#editBillingModal-{{forloop.counter}}"><i class="fa fa-edit"></i></button>
            <a href="{% url 'deletePatientBilling' item.id%}" type="button" class="btn btn-danger" title="Delete"><i class="fa fa-trash"></i></a>
            <div class="btn-group dropleft">
                <button type="button" class="btn btn-success" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <i class="fa fa-print"></i>
                </button>
                <div class="dropdown-menu">
                    <a class="dropdown-item" onclick="print_travel_billing('{{ item.id }}', 'logo')" style="cursor: pointer;">Print With Logo</a>
                    <a class="dropdown-item" onclick="print_travel_billing('{{ item.id }}', 'withoutlogo')" style="cursor: pointer;">Print Without Logo</a>
                    
                </div>
              </div>
              
            </td>
            {% endif %}
          </tr>
          {% endfor %}
                                
                            </tbody>
                        </table>
                        </div>
                               
                    </div>        
                </div>
                     
                    </div>
                </div>
  
        </div>
    </div>
    



{% block javascripts %}

<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Iterate over all modals
        document.querySelectorAll('[id^="editBillingModal-"]').forEach(function (modal) {
            const totalPriceInput = modal.querySelector('[id="totalPrice"]');
            const commissionTypeInputs = modal.querySelectorAll('[name="comissionType"]');
            const panelistCommissionInput = modal.querySelector('[id="panelistComission"]');
            const netIncomeInput = modal.querySelector('[id="netIncome"]');
    
            function calculateNetIncome() {
                const totalPrice = parseFloat(totalPriceInput.value) || 0;
                const panelistCommission = parseFloat(panelistCommissionInput.value) || 0;
    
                let netIncome = 0;
    
                // Determine commission type
                const commissionType = Array.from(commissionTypeInputs).find(input => input.checked)?.value;
    
                if (commissionType === '%') {
                    netIncome = totalPrice  - (totalPrice * panelistCommission / 100);
                } else {
                    netIncome = totalPrice  - panelistCommission;
                }
    
                // Update Net Income field
                netIncomeInput.value = netIncome.toFixed(2);
            }
    
            // Attach event listeners to inputs
            totalPriceInput.addEventListener('input', calculateNetIncome);
            panelistCommissionInput.addEventListener('input', calculateNetIncome);
            commissionTypeInputs.forEach(input => input.addEventListener('change', calculateNetIncome));
        });
    });
    </script>
    
<script>
       async function print_travel_billing(id, logoOption) {
        const response = await fetch(`/print_travel_billing/${id}/?logo=${logoOption}`);
        const invoiceTemplate = await response.text();
    
        const printWindow = window.open('', '_blank');
    
        // Write the invoice template content to the new tab
        printWindow.document.open();
        printWindow.document.write(invoiceTemplate);
        printWindow.document.close();
    
        setTimeout(() => {
            printWindow.print();
    
            // Close the new tab after printing
            printWindow.close();
        }, 1000); 
    }
    
    // Event listener for beforeprint and afterprint
    window.addEventListener('beforeprint', () => {
        // Save the current URL before printing
        window._originalURLBeforePrint = window.location.href;
    });
    
    window.addEventListener('afterprint', () => {
        // Return to the original URL after printing is done
        window.location.href = window._originalURLBeforePrint;
    });
</script>


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