{% extends 'base/base.html' %}
{% block title %} Edit Report{% endblock %}
{% block stylesheets %}
{% endblock stylesheets %}
{% block content %}


<style>

.cke_notifications_area,
.cke_notification_warning {
  display: none !important;
}


</style>



<div id="wrapper">

    
    
    

    <div id="main-content">
        
            
           
       
       
       

        
        {% 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">
            
        <!-- Top Row Start -->

        <div class="col-lg-12">
            <div class="card">
                <div class="card-header bg-white">
                    <div class="row">
                        <div class="col-md-4">
                            <a href="{% url 'generalReports' %}" type="button" class="btn btn-info" >Back</a>
                            </div>
                            <div class="col-md-4">
                                <h5><strong>Edit {{reportData.patientObject.patientName}} Report</strong></h5>
                            </div>
                            <div class="col-md-4">
                            </div>
                        </div>
                    </div>


                    
                
                </div>
               
               
                 <!-- Top Row End -->
               

                  <!-- Patient Row Start -->

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

                <div class="row">

                    
                     <!-- Patient Section Start -->

                    <div class="col-md-8">

                                   
                         <!-- Patient Section End -->
                        {% if request.user.userRole != 'General Receptionist' %}
                          <!-- Test Section Start -->
                          <div id="test-container">
                          


                        <!-- {% for test in tests %}
    <div class="card test-card">
        <div class="card-header bg-white">
            <h5>{{ test.test_name }}</h5>
        </div>
        <div class="card-body">
            {% for param in test.parameters %}
                <div class="form-group">
                    <label>{{ param.name }}</label>
                    <div class="row">
                        <div class="col-md-8">
                            {% if param.response_type == "Text" %}
                                <input type="text" name="{{ param.name }}" class="form-control" value="{{ param.value }}" />
                            
                            {% elif param.response_type == "File" %}
                                <input type="file" name="{{ param.name }}" class="form-control" />
                                {% if param.value %}
                                    <a href="{{ param.value }}" target="_blank">View File</a>
                                {% endif %}
                            
                            {% elif param.response_type == "Option" %}
                                <select name="{{ param.name }}" class="form-control">
                                    {% for option in param.options %}
                                        <option value="{{ option }}" {% if option == param.value %}selected{% endif %}>
                                            {{ option }}
                                        </option>
                                    {% endfor %}
                                </select>
                            
                            {% elif param.response_type == "Description" %}
                                <textarea name="{{ param.name }}" class="form-control">{{ param.value }}</textarea>
                            
                            {% elif param.response_type == "Summernote" %}
                                {# Use a unique identifier for CKEditor fields #}
                                <textarea 
                                    id="ckeditor-{{ test.test_name|slugify }}-{{ param.name|slugify }}" 
                                    name="{{ param.name }}" 
                                    class="ckeditor-editor">{{ param.value|safe }}</textarea>
                            {% endif %}
                        </div>
                        <div class="col-md-4">
                            <span>{{ param.reference_value }}</span>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
{% endfor %} -->


{% for test in tests %}
    <div class="card test-card">
        <div class="card-header bg-white">
            <h5>{{ test.test_name }}</h5>
        </div>
        <div class="card-body">
            {% for param in test.parameters %}
                <input type="hidden" name="param_test_{{ forloop.parentloop.counter }}_{{ forloop.counter }}" value="{{ test.test_name }}||{{ param.name }}" />
                
                <div class="form-group">
                    <label>{{ param.name }}</label>
                    <div class="row">
                        <div class="col-md-8">
                            {% if param.response_type == "Text" %}
                                <input type="text" name="param_value_{{ forloop.parentloop.counter }}_{{ forloop.counter }}" class="form-control" value="{{ param.value }}" />
                            
                            {% elif param.response_type == "File" %}
                                <input type="file" name="param_value_{{ forloop.parentloop.counter }}_{{ forloop.counter }}" class="form-control" />
                                {% if param.value %}
                                    <a href="{{ param.value }}" target="_blank">View File</a>
                                {% endif %}
                            
                            {% elif param.response_type == "Option" %}
                                <select name="param_value_{{ forloop.parentloop.counter }}_{{ forloop.counter }}" class="form-control">
                                    <option value="">Select Option</option>
                                    {% for option in param.options %}
                                        <option value="{{ option }}" {% if option == param.value %}selected{% endif %}>
                                            {{ option }}
                                        </option>
                                    {% endfor %}
                                </select>
                            
                            {% elif param.response_type == "Description" %}
                                <textarea name="param_value_{{ forloop.parentloop.counter }}_{{ forloop.counter }}" class="form-control">{{ param.value }}</textarea>
                            
                            {% elif param.response_type == "Summernote" %}
                                <textarea 
                                    id="ckeditor-{{ forloop.parentloop.counter }}-{{ forloop.counter }}" 
                                    name="param_value_{{ forloop.parentloop.counter }}_{{ forloop.counter }}" 
                                    class="ckeditor-editor">{{ param.value|safe }}</textarea>
                            {% endif %}
                        </div>
                        <div class="col-md-4">
                            <span>{{ param.reference_value }}</span>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
{% endfor %}
                           
                        </div>
                         <!-- Test Section End -->

                       
                            <div class="card">
                            <div class="header text-center">
                                <h5><strong>
                                     <p><input class="text-right" type="checkbox" id="readyMessage" name="readyMessage" value="readyMessage">    Send Report Ready Message</p>   
                                </strong></h5>
                            </div>
                            </div>

                        



                         <div class="card">
                            <div class="card-header bg-info text-center text-white">
                                <h5><strong>Doctors</strong></h5>
                            </div>
                            <div class="card-body">

                                 <div class="row">
                                <div class="col-md-1">
                                <input type="checkbox" id="doctorShow" name="doctorShow" value="{{ reportData.id }}" {% if reportData.doctorShow == True %}checked{% endif %}>
                                </div>
                                <div class="col-md-3">
                                <label for="doctorShow" class="form-label mb-0">Show Doctors on Report</label><br>
                                <!-- <small class="text-muted">{{ doctor.doctorEducation }}</small> -->
                                </div>

                                 </div>
                                 <br>
                            <div class="row">
                               
                                {% for doctor in all_doctors %}
                                <div class="col-md-1">
                                <input type="checkbox" id="doctor{{ doctor.id }}" name="doctor_ids" value="{{ doctor.id }}" {% if doctor in doctors %}checked{% endif %}>
                                </div>
                                <div class="col-md-3">
                                <label for="doctor{{ doctor.id }}" class="form-label mb-0">{{ doctor.doctorName }}</label><br>
                                <small class="text-muted">{{ doctor.doctorEducation }}</small>
                                </div>
                                {% endfor %}
                               

                            </div>
                            <br>
                            <div class="row">
                                <div class="col">
                                <label for="doctorNotes" class="form-label">Doctor Notes</label>
                                <textarea type="text" id="doctorNotes" name="doctorNotes"
                                       class="form-control" placeholder="Enter Notes">{{reportData.doctorNotes}}</textarea>

                            </div>
                            </div>

                        </div>
                        </div>

{% endif %}
                        
                    </div>
                    

                    

                    <!-- Pricing Section Start -->
                    {% if request.user.userRole == 'admin' or request.user.userRole == 'General Receptionist' %}
                    <div class="col-md-4">

                        <div class="card">
                            <div class="card-header bg-info text-white">
                                <div class="row">

                                    <div class="col-md-12 text-center">
                                        <h5><strong>Pricing</strong></h5>
                                    </div>
                                        
                                    </div>
                                    </div>
                                   

                                    <div class="card-body">
                                    <div class="row">
                                        <div class="col text-left"><h6><strong>Test Name</strong></h6></div>
                                        <div class="col text-right"><h6><strong>Price</strong></h6></div>
                                    </div>
                                    <br>

                                    {% for test in testsnamesprices %}
                                    <div class="row" id="pricingRows">
                                        <div class="col text-left">
                                            {{ test.testTitle }}
                                        </div>
                                        <div class="col text-right">
                                            {{ test.latest_cost.amount }}
                                        </div>                                    
                                    </div>
                                {% endfor %}


                                    <hr>


                                    <div class="row">
                                        <div class="col text-left">
                                            <p>Total Price</p>
                                            <input type="text" id="totalPrice" name="totalPrice" class="form-control m-t--10"
                                                   value="{{ reportData.totalPrice }}" readonly />
                                        </div>
                                        <div class="col text-left">
                                            <p>Discount Type</p>
                                            <label class="fancy-radio custom-color-green m-t--10">
                                                <input name="discountType" value="PKR" type="radio"
                                                       {% if reportData.discountType == "PKR" %}checked{% endif %}>
                                                <span><i></i>PKR</span>
                                            </label>
                                            <label class="fancy-radio custom-color-green m-t--10">
                                                <input name="discountType" value="%" type="radio"
                                                       {% if reportData.discountType == "%" %}checked{% endif %}>
                                                <span><i></i>%</span>
                                            </label>
                                        </div>
                                    </div>
                                    
                                    <div class="row">
                                        <div class="col text-left">
                                            <p>Discount  
                                                <input class="text-right" type="checkbox" id="discountInclusion" name="discountInclusion"
                                                       value="discountInclusion" {% if reportData.discountInclusion %}checked{% endif %}>
                                            </p>   
                                            <input type="text" id="discount" name="discount" class="form-control m-t--10" 
                                                   placeholder="Enter discount" value="{{ reportData.discount }}" />
                                        </div>
                                        <div class="col text-left">
                                            <p>Price after Discount</p>
                                            <input type="text" id="priceAfterDiscount" name="priceAfterDiscount"
                                                   class="form-control m-t--10" value="{{ reportData.priceAfterDiscount }}" readonly />
                                        </div>
                                    </div>
                                    
                                    <div class="row">
                                        <div class="col text-left">
                                            <p>Paid</p>
                                            <input type="number" id="paidAmount" name="paidAmount" class="form-control m-t--10"
                                                   placeholder="Enter amount" value="{{ reportData.paidAmount }}" />
                                        </div>
                                        <div class="col text-left">
                                            <p>Due Amount</p>
                                            <input type="text" id="dueAmount" name="dueAmount" class="form-control m-t--10"
                                                   value="{{ reportData.dueAmount }}" readonly />
                                        </div>
                                    </div>
                                    


                                   
                                    

                                  

                            </div>
            
            
                                
                            
                        </div>
                     
                       

                        <div class="card">
                            <div class="card-header bg-info">
                                <h5 class="text-center text-white p-0"><strong>Commission</strong></h5>
                               </div>
                            

                            <div class="card-body">
                                
                                <div class="row">
                                    <div class="col text-left"><p>Commission Type</p>
                                    </div>

                                    <div class="col text-left">

                                        <label class="fancy-radio custom-color-green m-t--10"><input  name="commissionType" value="PKR" type="radio" {% if not commission_data or commission_data.commissionType == "PKR" %}checked{% endif %}><span><i></i>PKR</span></label>
                                        <label class="fancy-radio custom-color-green m-t--10"><input name="commissionType" value="%" type="radio" {% if commission_data and commission_data.commissionType == "%" %}checked{% endif %}><span><i></i>%</span></label>
                                       
                                    </div>
                                </div>


                                <div class="row">
                                    <div class="col text-left"><p>Panelist Commission</p>
                                        <input type="number" id="penalistCommission" name="penalistCommission" class="form-control m-t--10" value="{{commission_data.penalistCommission}}" placeholder="Enter amount" />
                                    </div>
                                    <div class="col text-left">
                                        <p>Doctor Commission</p>
                                        <input type="number" id="doctorCommission" name="doctorCommission" class="form-control m-t--10" value="{{commission_data.doctorCommission}}" placeholder="Enter amount" />
                                    </div>
                                </div>
                               


                                <div class="row">
                                    <div class="col text-left"><p>Price after Commission</p>
                                        <input type="number" id="priceAfterCommission" name="priceAfterCommission" value="{{reportData.priceAfterCommission}}" class="form-control m-t--10" readonly />
                                    </div>
                                   
                                </div>



                            </div>

                        </div>

                        {% endif %}
                       
                    </div>
                   
                    <!-- Pricing Section End -->
                   
                  

                
                </div>

               
                <br>
                    
                <div class="col-lg-12">
                    
                            <div class="row">
                                <div class="col-md-4">
                                    
                                    </div>
                                    <div class="col-md-4">
                                       
                                    </div>
                                    <div class="col-md-4">
                                        <div class="card">
                                            <div class="card-header bg-white text-right">
                                                <a href="{% url 'generalReports' %}" type="button" class="btn btn-danger" >Close</a>
                                                <button type="submit" class="btn btn-info">Save Changes</button>
                                                <button type="submit" class="btn btn-info" name="action" value="save_and_print">Save and Print</button>
                                               
                                    </div>
                                </div>
                            </div>
        
        
                        
                        
                        </div>
                    </form>

                        <br><br>
               

               


                    </div>

                    
                </div>



                

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








{% block javascripts %}

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script src="https://cdn.ckeditor.com/4.22.1/standard-all/ckeditor.js"></script>




<script>
    function applyDiscount() {
        const totalPriceField = document.querySelector("#totalPrice");
        const priceAfterDiscountField = document.querySelector("#priceAfterDiscount");
        const discountField = document.querySelector("#discount");
        // const discountInclusionCheckbox = document.querySelector("#discountInclusion");

        const discountTypeRadios = document.getElementsByName('discountType');
        let discountType = '';

        for (const radio of discountTypeRadios) {
            if (radio.checked) {
                discountType = radio.value;
                break;
            }
        }

        const totalPrice = parseFloat(totalPriceField.value) || 0;
        const discount = parseFloat(discountField.value) || 0;

        let newTotalAfterDiscount = totalPrice;

        // Only apply discount if checkbox is checked
            if (discountType === 'PKR') {
                newTotalAfterDiscount = Math.max(0, totalPrice - discount);
            } else if (discountType === '%') {
                newTotalAfterDiscount = Math.max(0, totalPrice - (totalPrice * discount / 100));
            }
        

        priceAfterDiscountField.value = newTotalAfterDiscount.toFixed(2);

        applyCommission();  
        calculateDueAmount(); 
        updateDueAmount();
    }


    function applyCommission() {
                const doctorCommissionField = document.querySelector("#doctorCommission");
                const penalistCommissionField = document.querySelector("#penalistCommission");
                const priceAfterCommissionField = document.querySelector("#priceAfterCommission");
                const priceAfterDiscountField = document.querySelector("#priceAfterDiscount");

                const commissionTypeRadios = document.getElementsByName('commissionType');
                let commissionType = '';

                for (const radio of commissionTypeRadios) {
                    if (radio.checked) {
                        commissionType = radio.value;
                        break;
                    }
                }

                let totalPriceAfterDiscount = parseFloat(priceAfterDiscountField.value) || 0;

                let doctorCommission = parseFloat(doctorCommissionField.value) || 0;
                let penalistCommission = parseFloat(penalistCommissionField.value) || 0;

                // Validate doctor commission
                if (commissionType === 'PKR') {
                    if (doctorCommission > totalPriceAfterDiscount) {
                        alert("Doctor commission cannot exceed price after discount.");
                        doctorCommissionField.value = '';
                        doctorCommission = 0;
                    }
                } else if (commissionType === '%') {
                    if (doctorCommission >= 100) {
                        alert("Doctor commission cannot exceed 100%.");
                        doctorCommissionField.value = '';
                        doctorCommission = 0;
                    }
                }

                // Validate penalist commission
                if (commissionType === 'PKR') {
                    if (penalistCommission > totalPriceAfterDiscount) {
                        alert("Penalist commission cannot exceed price after discount.");
                        penalistCommissionField.value = '';
                        penalistCommission = 0;
                    }
                } else if (commissionType === '%') {
                    if (penalistCommission >= 100) {
                        alert("Penalist commission cannot exceed 100%.");
                        penalistCommissionField.value = '';
                        penalistCommission = 0;
                    }
                }

                if (commissionType === '%') {
                    if ((doctorCommission + penalistCommission) >= 100) {
                        alert("Combined doctor and penalist commission cannot exceed 100%.");
                        doctorCommissionField.value = '';
                        penalistCommissionField.value = '';
                        priceAfterCommissionField.value = totalPriceAfterDiscount.toFixed(2);
                        return;
                    }
                }

                if (commissionType === 'PKR') {
                    if ((doctorCommission + penalistCommission) > totalPriceAfterDiscount) {
                    
                    alert("Penalist and Doctor commission cannot be exceed to price after discount amount.");
                    penalistCommissionField.value = '';
                    penalistCommission = 0;
                    doctorCommissionField.value = '';
                    doctorCommission = 0;
                
            }

                }

                let doctorCommissionAmount = 0;
                let penalistCommissionAmount = 0;

                if (commissionType === 'PKR') {
                    doctorCommissionAmount = doctorCommission;
                    penalistCommissionAmount = penalistCommission;
                } else if (commissionType === '%') {
                    doctorCommissionAmount = (totalPriceAfterDiscount * doctorCommission) / 100;
                    penalistCommissionAmount = (totalPriceAfterDiscount * penalistCommission) / 100;
                }

                let newTotalAfterCommission = totalPriceAfterDiscount - doctorCommissionAmount - penalistCommissionAmount;
                console.log("newTotalAfterCommission",newTotalAfterCommission);

                priceAfterCommissionField.value = newTotalAfterCommission.toFixed(2);

                // updateDueAmount();
                calculateDueAmount();
            }

            // Event listeners
            document.querySelector("#doctorCommission").addEventListener("input", applyCommission);
            document.querySelector("#penalistCommission").addEventListener("input", applyCommission);
            document.querySelectorAll("input[name='commissionType']").forEach(radio => {
                radio.addEventListener("change", applyCommission);
            });


    function updateDueAmount() {
        const paidAmountField = document.querySelector("#paidAmount");
        const priceAfterDiscountField = document.querySelector("#priceAfterDiscount");
        const dueAmountField = document.querySelector("#dueAmount");
        const priceAfterCommissionField = document.querySelector("#priceAfterCommission");

        let paidAmount = parseFloat(paidAmountField.value) || 0;
        const priceAfterDiscount = parseFloat(priceAfterDiscountField.value) || 0;

        if (paidAmount > priceAfterDiscount) {
            alert("Paid Amount cannot exceed Price After Discount.");
            paidAmountField.value = priceAfterDiscount.toFixed(2);
            paidAmount = priceAfterDiscount;
        }

        const dueAmount = priceAfterDiscount - paidAmount;
        dueAmountField.value = dueAmount.toFixed(2);
        priceAfterCommissionField.value = dueAmount.toFixed(2);


        applyCommission();
    }

    function calculateDueAmount() {
        const paidAmountField = document.querySelector("#paidAmount");
        if (paidAmountField) {
            paidAmountField.addEventListener("input", updateDueAmount);
        }
    }

    // Initialize on page load
    document.addEventListener("DOMContentLoaded", function () {
        // Event listeners
        document.querySelector("#discount")?.addEventListener("input", applyDiscount);
        document.querySelectorAll("input[name='discountType']").forEach(radio => {
            radio.addEventListener("change", applyDiscount);
        });
        document.querySelector("#discountInclusion")?.addEventListener("change", applyDiscount);

        // Paid amount input
        calculateDueAmount();

        // Initial calculation if values exist
        applyDiscount();
    });
</script>






<!-- <script>
document.addEventListener("DOMContentLoaded", function () {
    // Initialize CKEditor for all ckeditor-editor textareas
    document.querySelectorAll(".ckeditor-editor").forEach((el) => {
        if (el.id) {
            if (CKEDITOR.instances[el.id]) {
                CKEDITOR.instances[el.id].destroy(true);
            }
            CKEDITOR.replace(el.id, {
                width: "100%",
                height: "200px"
            });
        }
    });

    // Update CKEditor content before form submission
    document.querySelector('form').addEventListener('submit', function() {
        for (let instance in CKEDITOR.instances) {
            CKEDITOR.instances[instance].updateElement();
        }
    });
});

// Function to update CKEditor content manually if needed
function updateCKEditors() {
    for (let instance in CKEDITOR.instances) {
        CKEDITOR.instances[instance].updateElement();
    }
}
</script> -->


<script>
document.addEventListener("DOMContentLoaded", function () {
    // Initialize CKEditor
    document.querySelectorAll(".ckeditor-editor").forEach((el) => {
        if (el.id && !CKEDITOR.instances[el.id]) {
            CKEDITOR.replace(el.id, {
                width: "100%",
                height: "200px",
                autoUpdateElement: true
            });
        }
    });

    // Update all CKEditor instances before form submission
    document.querySelector('form').addEventListener('submit', function(e) {
        // Update all CKEditor instances
        for (let instance in CKEDITOR.instances) {
            if (CKEDITOR.instances[instance]) {
                CKEDITOR.instances[instance].updateElement();
            }
        }
        
        // Optional: Add a small delay to ensure content is synced
        setTimeout(() => {
            // Form will continue submission
        }, 100);
    });
});

// Manual update function
function updateAllEditors() {
    for (let instance in CKEDITOR.instances) {
        if (CKEDITOR.instances[instance]) {
            CKEDITOR.instances[instance].updateElement();
        }
    }
    return true;
}
</script>




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