{% extends 'base/base.html' %}
{% block title %} Create 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">
        
            
           
       <!-- Print Options Modal -->
<div class="modal fade" id="printOptionsModal" tabindex="-1" aria-labelledby="printOptionsLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="printOptionsLabel">Print Options</h5>
         
        </div>
        <div class="modal-body text-center">
          <p>Choose how you want to print the report:</p>
          <button class="btn btn-info m-2" onclick="handlePrintOption('pad')">Print with Letterpad</button>
          <button class="btn btn-info m-2" onclick="handlePrintOption('nopad')">Print without Letterpad</button>
        </div>
      </div>
    </div>
  </div>
  
       
       

        
        {% 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>Create General Report</strong></h5>
                            </div>
                            <div class="col-md-4">
                            </div>
                        </div>
                    </div>     
                
                </div>
               

                <div class="row">

                     <!-- Patient Section Start -->

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

                        <div class="card">
                            <div class="card-header bg-info">

                                <h5 class="text-center text-white"><strong>Patient Details</strong></h5>                            
                                      
                                </div>
                                
                                <div class="card-body">
                                <form method="post" action="{% url 'createGeneralReport' %}">
                       
                                    {% csrf_token %}

                                    <div class="row">
                                        <div class="col-md-4">
                                            <p><input class="text-right" type="checkbox" id="greetingMessage" name="greetingMessage" value="greetingMessage" checked>    Send Greeting Message</p>   
                                        </div>

                                         <div class="col-md-4">
                                            <p class="text-center font-weight-bold">{{lab_id}}</p>
                                         </div>

                                         <div class="col-md-4">
                                            <p><input class="text-right" type="checkbox" id="sampleMessage" name="sampleMessage" value="sampleMessage">    Send Sample Collection Message</p>   
                                        </div>
                                    </div>

                                    

                                <div class="row">
                                    
                                    <div class="col-md-4">

                                            <label for="searchPatient">Patient</label>
                                            <input type="search" id="searchPatient" name="searchPatient" class="form-control" placeholder="Search Patient" required/>
                                            <div class="card" style="max-height: 120px; overflow-y: auto;">
                                                <input type="hidden" id="searchPatientId" name="searchPatientId"/>
                                                <ul class="list-group patientadd-search-results" style="display: none;"></ul>
                                                
                                            </div>
                                        
                                    </div>

                                        <div class="col-md-4">
                                              <label for="patientContact" class="form-label">Contact <small class="text-muted">(e.g., +923001234567)</small></label>
                                            <!-- <label for="patientContact" class="form-label">Contact</label> -->
                                            <input type="text" id="patientContact" name="patientContact"
                                                class="form-control patientData" value="+92" readonly />
                                                <small id="contactError" class="text-danger d-none">Please enter number in format: +923001234567</small>
                                        </div>

                                        <div class="col-md-4">
                                            <label for="patientCNIC" class="form-label">CNIC</label>
                                            <input type="text" id="patientCNIC" name="patientCNIC"
                                                class="form-control patientData" readonly/>
                                        </div>
                                      
                                </div>


                                <div class="row">
                                    
                                    <div class="col-md-4">
                                        <label for="patientAge" class="form-label">Age</label>
                                        <input type="text" id="patientAge" name="patientAge"
                                               class="form-control patientData" readonly/>
                                        </div>

                                        <div class="col mb-4">
                                            <label for="patientAgeChoices" class="form-label">Select </label>
                                            <select id="patientAgeChoices" name="patientAgeChoices" class="form-control" disabled>
                                                
                                                <option value="Year" selected>Year</option>
                                                <option value="Month">Month</option>
                                                <option value="Day">Day</option>
                                            </select>
                                        </div>

                                        <div class="col-md-4">
                                            <label for="patientGender" class="form-label">Gender</label>
                                            <select id="patientGender" name="patientGender" class="form-control patientData" disabled>
                                                
                                                <option value="Male" selected>Male</option>
                                                <option value="Female">Female</option>
                                                <option value="Other">Other</option>
                                            </select>
                                        </div>


                                        
                                      
                                </div>


                                <div class="row">

                                   

                                    <div class="col-md-4">
                                          
                                        <label for="branches" class="form-label">Branch</label>
                                        <select  id="branches" name="branches" class="form-control patientData" disabled>
                                            <option value="">No Branch</option>  
                                            {% for choice in branches %}
                                                <option value="{{ choice.id }}">{{ choice.branchName }}</option>
                                            {% endfor %}
                                        </select>
                                    
                                    </div>


                                    <div class="col mb-4">
                                        <label for="refBy" class="form-label">Ref By</label>
                                        <input type="text" id="refBy" name="refBy"
                                               class="form-control patientData"  readonly/>
                                    </div>


                                    <div class="col mb-4">
                                        <label for="patientEmail" class="form-label">Email</label>
                                        <input type="email" id="patientEmail" name="patientEmail"
                                               class="form-control patientData" readonly/>
                                    </div>


                                </div>


                                <div class="row">

                                    <div class="col-md-4">
                                          
                                        <label for="panels" class="form-label">Panel</label>
                                        <select  id="panels" name="panels" class="form-control patientData" disabled> 
                                            <option value="">No Panel</option>  
                                            {% for choice in panels %}
                                                <option value="{{ choice.id }}">{{ choice.gPanelName }}</option>
                                            {% endfor %}
                                        </select>
                                    
                                    </div>


                                <div class="col-md-8">
                                    <label for="patientAddress" class="form-label">Address</label>
                                    <textarea type="text" id="patientAddress" name="patientAddress"
                                           class="form-control patientData" readonly></textarea>
                                </div>

                            </div>



                            </div>
            
            
                                
                            
                        </div>
                       
                         <!-- Patient Section End -->

                          <!-- Test Section Start -->
                        <div id="test-container">
                        <div class="card test-card">
                            <div class="card-header bg-white">

                                <div class="parent-container">

                                
                                <div class="row">

                                    <div class="col-md-4">
                                            <label for="searchTest">Test</label>
                                            <input type="search" id="searchTest" name="searchTest" class="form-control searchTest" placeholder="Search Test" autocomplete="off" required/>
                                            <div class="card" style="max-height: 120px; overflow-y: auto;">
                                                <input type="hidden" id="searchTestId" name="searchTestId"/>
                                                <ul class="list-group testadd-search-results-test" style="display: none;"></ul>
                                                
                                            </div>
                                    </div>


                                    <div class="col-md-4">
                                        <label for="testSpecimen" class="form-label">Specimen</label>
                                        <input type="text" id="testSpecimen" name="testSpecimen"
                                        class="form-control" readonly/>
                                    </div>

                                </div>

                                
                                {% if request.user.userRole == 'admin' or request.user.userRole == 'Senior Technologist' or request.user.userRole == 'Technologist' %}
                                <div class="row parameters-container">
                                    
                                    <!-- Here generate fields for test-->
                                </div>
                                {% endif %}
                            </div>

                            </div>
                        </div>
                        </div>
                         <!-- Test Section End -->
                               
                                  
                                    
                         <!-- Test Button-->
                       
                        <div class="row">
                            <div class="col-md-8">
                            <button type="button" id="add-test-btn" class="btn btn-info">Add Test</button>
                        </div>
                        </div>
                        <br>

                         <!-- Doctors Section-->
                        <div class="card">
                            <div class="card-header bg-info text-center text-white">
                                <h5><strong>Doctor Notes</strong></h5>
                            </div>
                            <div class="card-body">
                            <!-- <div class="row">
                                {% for item in all_doctors %}
                                <div class="col-md-1">
                                    <input type="checkbox" id="doctor{{ item.id }}" name="doctor_ids" value="{{ item.id }}">
                                </div>
                                <div class="col-md-3">
                                    <label for="doctor{{ item.id }}" class="form-label mb-0">{{ item.doctorName }}</label><br>
                                    <small class="text-muted">{{ item.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"></textarea>

                            </div>
                            </div>

                        </div>
                        </div>



                        
                    </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">
                                <h5 class="text-center text-white"><strong>Pricing</strong></h5>
                               </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>

                                    <div id="pricingRows"></div>


                                    <br><br><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" 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" checked><span><i></i>PKR</span></label>
                                            <label class="fancy-radio custom-color-green m-t--10"><input name="discountType" value="%" type="radio"><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"></p>   
                                            <input type="text" id="discount" name="discount" class="form-control m-t--10" placeholder="Enter 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" 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" />
                                        </div>
                                        <div class="col text-left">
                                            <p>Due Amount</p>
                                            <input type="text" id="dueAmount" name="dueAmount" class="form-control m-t--10" readonly />
                                        </div>
                                    </div>
      

                            </div>
            
            
                                
                            
                        </div>
                        {% endif %}

                        <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" checked><span><i></i>PKR</span></label>
                                        <label class="fancy-radio custom-color-green m-t--10"><input name="commissionType" value="%" type="radio"><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" 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" 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" class="form-control m-t--10" readonly />
                                    </div>
                                   
                                </div>



                            </div>

                        </div>
                    </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</button>
                                                <button type="submit" name="action" value="save_and_print" class="btn btn-info">
                                                    Save and Print
                                                </button>
                                                
                                    </div>
                                </div>
                            </div>
        
        
                        </form>
                        
                        </div>

                        <br><br>
               

               


                    </div>

                    
                </div>



                

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





<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>




{% block javascripts %}



<script>
    $(document).ready(function() {
        $('#searchPatient').on('keyup', function() {
            var searchText = $(this).val();
            if (searchText.length > 0) {
                $.ajax({
                    type: 'POST',
                    url: '{% url "searchPatient" %}', 
                    data: {
                        'search_text': searchText,
                        'csrfmiddlewaretoken': '{{ csrf_token }}'  
                    },
                    success: function(response) {
                        var patients = response.patient;


                        if(patients != "null"){

                                console.log( " pass")
                                $(".patientData").attr("readonly", true);

                                var resultList = $('.patientadd-search-results');
                                resultList.empty().show();
                                patients.forEach(function(patient) {
                                    resultList.append('<li class="list-group-item" data-id="' + patient.id + '">' + patient.patientName + '</li>');
                                });

                                // Handle item click
                                $('.list-group-item').on('click', function() {
                                    var patientId = $(this).data('id');
                                    var selectedCustomer = patients.find(c => c.id == patientId);
                                    console.log("selectedCustomer",selectedCustomer)
                                    if (selectedCustomer) {
                                        $('#patientContact').val(selectedCustomer.patientContact);
                                        $('#patientCNIC').val(selectedCustomer.patientCNIC);
                                        $('#refBy').val(selectedCustomer.refBy);
                                        $('#patientAge').val(selectedCustomer.patientAge);
                                        $('#patientEmail').val(selectedCustomer.patientEmail);
                                        $('#patientGender').val(selectedCustomer.patientGender);
                                        $('#patientAgeChoices').val(selectedCustomer.patientAgeChoices);
                                        $('#patientAddress').val(selectedCustomer.patientAddress);

                                        $("#branches").val(selectedCustomer.branchId).change();
                                        $("#panels").val(selectedCustomer.panelId).change();
                                      
                                        $('#searchPatientId').val(patientId);
                                        $('#searchPatient').val(selectedCustomer.patientName);
                                        
                                        $("#branches option").each(function() {
                                            console.log("Option Value:", $(this).val(), "Text:", $(this).text());
                                        if ($(this).text() === selectedCustomer.branch) {
                                            $(this).prop("selected", true);
                                        }
                                    });

                                        $("#panels option").each(function() {
                                                console.log("Option Value:", $(this).val(), "Text:", $(this).text());
                                            if ($(this).text() === selectedCustomer.panel) {
                                                $(this).prop("selected", true);
                                            }
                                        });

                                        resultList.hide();
                                    }
                                });

                        }
                        else{

                            console.log("not found")

                            $('.patientadd-search-results').hide();
                            $(".patientData").removeAttr("readonly");
                            $("#searchPatientId").val('');
                            $("#searchPatientId").val('');
                            $("#patientContact").val('+92');
                            $("#patientCNIC").val('');
                            $("#patientAge").val('');
                            $("#refBy").val('');
                            $("#patientEmail").val('');
                            $("#patientAddress").val('');
                            // $("#branch").val('');
                            // $("#branches").prop('selectedIndex', 0); 
                            $("#branches").prop("disabled", false).removeAttr("disabled");  
                            $("#panels").prop("disabled", false).removeAttr("disabled");               
                            $("#patientGender").prop("disabled", false).removeAttr("disabled");
                            $("#patientAgeChoices").prop("disabled", false).removeAttr("disabled");
                        
                        }
                        
                    }
                });
            } else {
                $('.patientadd-search-results').empty().hide();
            }
        });
        
    });
</script>


<script>
    document.addEventListener("DOMContentLoaded", function () {

        function initializeCKEditor(container = null) {
    setTimeout(() => {
        const searchScope = container || document;
        const ckElements = searchScope.querySelectorAll('.ckeditor-editor');

        ckElements.forEach(element => {
            if (!element.classList.contains("ckeditor-applied")) {
                CKEDITOR.replace(element, {
                    width: '100%', 
                    height: 150,
                    removeButtons: 'PasteFromWord'
                });
                element.classList.add("ckeditor-applied");
            }
        });
    }, 100);
}




        applyDiscount();       
        calculateDueAmount();
        applyCommission();
        const addTestBtn = document.getElementById("add-test-btn");
        const testContainer = document.getElementById("test-container");
    
        // Function to handle test search
        function handleTestSearch(event) {
            const input = event.target;
            const searchResults = input.closest('.col-md-4').querySelector('.testadd-search-results-test');
            const searchQuery = input.value.trim();
           
    
            if (!searchQuery.trim()) { 
                testResultsContainer.style.display = "none";
                return;
            }
    
            fetch(`/search-tests/?q=${searchQuery}`)
                .then(response => response.json())
                .then(data => {
                    searchResults.innerHTML = "";
                    if (data.results.length > 0) {
                        data.results.forEach(test => {
                            const li = document.createElement("li");
                            li.classList.add("list-group-item");
                            li.textContent = test.name;
                            li.dataset.testId = test.id;
                            li.dataset.specimen = test.specimen;
                            li.dataset.cost = test.cost;
                            li.dataset.parameters = JSON.stringify(test.parameters);
                            console.log("parameters---->>",test.parameters)
                            searchResults.appendChild(li);
                        });
                        searchResults.style.display = "block";
                    } else {
                        searchResults.style.display = "none";
                    }
                })
                .catch(error => console.error("Error fetching tests:", error));
        }

        
    
        // Function to handle test selection
        function handleTestSelection(event) {
            if (event.target.tagName === "LI") {
                const selectedTest = event.target;
                const column = selectedTest.closest(".col-md-4");
                const row = column.closest(".row");
                console.log("row",row)
                const searchField = column.querySelector("#searchTest");
                const hiddenField = column.querySelector("#searchTestId");
                const specimenField = row.querySelector("#testSpecimen"); 

                searchField.value = selectedTest.textContent;
                searchField.dataset.selectedTestName = selectedTest.textContent;
                hiddenField.value = selectedTest.dataset.testId;
                specimenField.value = selectedTest.dataset.specimen;

                const testName = selectedTest.textContent;
                const testPrice = selectedTest.dataset.cost;

                // addTestToPricing(testName, testPrice);

                const uniqueId = addTestToPricing(testName, testPrice);
                searchField.dataset.uniquePricingId = uniqueId;

                selectedTest.parentElement.style.display = "none";
            

                const parameters = JSON.parse(selectedTest.dataset.parameters); 
                console.log("parameters",parameters)
                // Find the closest parent that contains both rows
                const parentContainer = row.closest(".parent-container"); // Adjust this if needed
                console.log("parentContainer",parentContainer)
                const parametersContainer = parentContainer.querySelector(".parameters-container");
                console.log("parametersContainer",parametersContainer)
                parametersContainer.innerHTML = ""; // Clear previous parameters

                parameters.forEach(param => {
                    let inputField;
                    let label = `<label class="form-label">${param.name}</label>`;
                    let colClass = "col-md-4";

                    if (param.response_type === "Text") {
                        inputField = `<input type="text" class="form-control" placeholder="Enter text">`;
                    } else if (param.response_type === "Option") {
                        let options = param.options.map(opt => `<option value="${opt}">${opt}</option>`).join("");
                        inputField = `<select class="form-control">${options}</select>`;
                    } else if (param.response_type === "File") {
                        inputField = `<input type="file" class="form-control">`;
                    } else if (param.response_type === "Description") {
                        inputField = `<textarea class="form-control" placeholder="Enter description"></textarea>`;
                    }

                    else if (param.response_type === "Summernote") {
                        const editorId = `ckeditor-${Date.now()}-${Math.floor(Math.random() * 1000)}`;
                        inputField = `<textarea id="${editorId}" class="ckeditor-editor"></textarea>`;
                        colClass = "col-md-12";
                    }


                    parametersContainer.innerHTML += `
                        <div class="${colClass}">
                            ${label}
                            ${inputField}
                        </div>
                    `;

                    setTimeout(() => {
                    if (CKEDITOR.instances[editorId]) {
                        CKEDITOR.instances[editorId].destroy(true);
                    }
                    CKEDITOR.replace(editorId, { width: "100%" });
                }, 100);
                return;

                });
                

                initializeCKEditor(parametersContainer);


            }

        }



        // Function to add test row inside #pricingRows
        function addTestToPricing(testName, testPrice) {
            const pricingRows = document.querySelector("#pricingRows"); // Select the correct div
            const uniqueId = Date.now() + Math.random(); //new

            // Create new row
            const newRow = document.createElement("div");
            newRow.classList.add("row", "pricing-row");
            newRow.dataset.uniqueId = uniqueId; //new


            newRow.innerHTML = `
                <div class="col text-left">
                    <h6>${testName}</h6>
                </div>
                <div class="col text-right">
                    <h6>${testPrice}</h6>
                </div>
            `;

            pricingRows.appendChild(newRow);

            updateTotalPrice(testPrice);
            applyDiscount();

            return uniqueId; // Return the unique ID for tracking
        }

        // Function to update total price
        function updateTotalPrice(price) {
            const totalPriceField = document.querySelector("#totalPrice");
            const priceAfterDiscountField = document.querySelector("#priceAfterDiscount");
            const priceAfterCommissionField = document.querySelector("#priceAfterCommission");
            const dueAmountField = document.querySelector("#dueAmount");


            let currentTotal = parseFloat(totalPriceField.value) || 0;
            totalPriceField.value = (currentTotal + parseFloat(price)).toFixed(2);
            priceAfterDiscountField.value = (currentTotal + parseFloat(price)).toFixed(2);
            priceAfterCommissionField.value = (currentTotal + parseFloat(price)).toFixed(2);
            dueAmountField.value = (currentTotal + parseFloat(price)).toFixed(2);
        }


       

        // Add event listener to dynamically handle search on all test fields
        testContainer.addEventListener("input", function (event) {
            if (event.target.matches("#searchTest")) {
                const input = event.target;
                const previousTestName = input.dataset.selectedTestName || ""; // previous selected test

                //If input becomes empty (user cleared the field)
                if (input.value.trim() === "" && previousTestName !== "") {
                    const uniqueId = input.dataset.uniquePricingId;
                    if (uniqueId) {
                        removeTestFromPricing(uniqueId);
                    }
                    input.dataset.selectedTestName = ""; // clear stored test name
                    input.dataset.uniquePricingId = "";
                } else {
                    handleTestSearch(event);
                }

                
            }
        });

    
        // Add event listener to dynamically handle test selection
        testContainer.addEventListener("click", function (event) {
            handleTestSelection(event);
        });
    
        // Function to add new test cards
        addTestBtn.addEventListener("click", function () {
            const firstTestCard = document.querySelector(".test-card");
            if (firstTestCard) {
                const clonedCard = firstTestCard.cloneNode(true);
                clonedCard.querySelectorAll("input").forEach(input => input.value = "");

                // Clear parameters container inside the cloned card
                const clonedParametersContainer = clonedCard.querySelector(".parameters-container");
                if (clonedParametersContainer) {
                    clonedParametersContainer.innerHTML = ""; // Remove previously generated fields
                }
    
                // Add remove button
                const removeBtn = document.createElement("button");
                removeBtn.textContent = "❌";
                removeBtn.classList.add("btn", "btn-close", "btn-sm", "remove-test");
                removeBtn.style.position = "absolute";
                removeBtn.style.right = "10px";
                removeBtn.style.top = "10px";
                clonedCard.querySelector(".card-header").appendChild(removeBtn);
    
                testContainer.appendChild(clonedCard);

               initializeCKEditor(clonedCard);

            }
        });
    
        

        // Remove dynamically added test cards and update pricing
        testContainer.addEventListener("click", function (event) {
            if (event.target.classList.contains("remove-test")) {
                const card = event.target.closest(".test-card");
                
                const input = card.querySelector("#searchTest");
                const uniqueId = input?.dataset.uniquePricingId;

                if (uniqueId) {
                    removeTestFromPricing(uniqueId);
                }

                card.remove();
                applyDiscount();
                // Get test name from input field inside card
                // const testName = card.querySelector("#searchTest")?.value;

                // // Remove card from UI
                // card.remove();

                // // Remove corresponding test row from pricing section
                // removeTestFromPricing(testName);
                // applyDiscount();
            }
        });

        // Function to remove test row from pricing section
        function removeTestFromPricing(uniqueId) {
            const pricingRows = document.querySelector("#pricingRows");
            const totalPriceField = document.querySelector("#totalPrice");
            const priceAfterDiscountField = document.querySelector("#priceAfterDiscount");
            const priceAfterCommissionField = document.querySelector("#priceAfterCommission");
            const dueAmountField = document.querySelector("#dueAmount");

            // let removedPrice = 0;

            // // Find and remove the row
            // const rows = pricingRows.querySelectorAll(".pricing-row");
            // rows.forEach(row => {
            //     const nameElement = row.querySelector(".col.text-left h6");
            //     const priceElement = row.querySelector(".col.text-right h6");

            //     if (nameElement && nameElement.textContent === testName) {
            //         removedPrice = parseFloat(priceElement.textContent) || 0;
            //         row.remove();
            //     }
            // });


            let removedPrice = 0;
            const row = pricingRows.querySelector(`.pricing-row[data-unique-id="${uniqueId}"]`);
            if (row) {
                const priceElement = row.querySelector(".col.text-right h6");
                removedPrice = parseFloat(priceElement.textContent) || 0;
                row.remove();
            }

            // Subtract from total price
            let currentTotal = parseFloat(totalPriceField.value) || 0;
            let newTotal = Math.max(0, currentTotal - removedPrice);
            
            totalPriceField.value = newTotal.toFixed(2);
            priceAfterDiscountField.value = newTotal.toFixed(2);
            priceAfterCommissionField.value = newTotal.toFixed(2);
            dueAmountField.value = newTotal.toFixed(2);


            const allTestCards = document.querySelectorAll(".test-card");
            allTestCards.forEach(card => {
                const searchInput = card.querySelector("#searchTest");
                const specimenField1 = card.querySelector("#testSpecimen");
                const parametersContainer = card.querySelector(".parameters-container");

                if (searchInput && parametersContainer && searchInput.value.trim() === "") {
                    parametersContainer.innerHTML = ""; // Clear parameters fields
                    if (specimenField1) {
                        specimenField1.value = ""; // Clear specimen field too
                    }
                }
            });

           

        }
        

            });



            function applyDiscount() {
                const totalPriceField = document.querySelector("#totalPrice");
                const priceAfterDiscountField = document.querySelector("#priceAfterDiscount");
                const discountField = document.querySelector("#discount");
                const dueAmountField = document.querySelector("#dueAmount");

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

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

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

                let newTotalAfterDiscount = totalPrice;

                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);
                dueAmountField.value = newTotalAfterDiscount.toFixed(2);

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

            // Event listener for discount input field
            document.querySelector("#discount").addEventListener("input", applyDiscount);

            // Event listener for discount type radio buttons
            document.querySelectorAll("input[name='discountType']").forEach(radio => {
                radio.addEventListener("change", applyDiscount);
            });


            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("Please enter a valid Paid Amount. It cannot be greater than the 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);
                }

               
            }






    </script>





<script>

function collectTestDataAndSend(action = "") {
    let testsData = [];
    
    document.querySelectorAll('.test-card').forEach((testCard) => {
        let testId = testCard.querySelector('#searchTestId')?.value || null;
        let testName = testCard.querySelector('#searchTest')?.value || null;
        let specimen = testCard.querySelector('#testSpecimen')?.value || null;
        
        // let parameters = [];
        // testCard.querySelectorAll('.parameters-container .col-md-4').forEach(paramField => {
        //     let paramName = paramField.querySelector('label')?.textContent || null;
        //     let inputField = paramField.querySelector('input, select, textarea');
        //     let paramValue = inputField ? (inputField.type === 'file' ? inputField.files[0]?.name : inputField.value) : null;

        //     if (paramName) {
        //         parameters.push({ name: paramName, value: paramValue });
        //     }
        // });
        // console.log("parameters",parameters)

        let parameters = [];
        // Select both col-md-4 and col-md-12 blocks
        testCard.querySelectorAll('.parameters-container .col-md-4, .parameters-container .col-md-12')
        .forEach(paramField => {
            let paramName = paramField.querySelector('label')?.textContent || null;
            let inputField = paramField.querySelector('input, select, textarea');
            let paramValue = null;

            if (inputField) {
                if (inputField.type === 'file') {
                    paramValue = inputField.files[0]?.name;
                } else if (inputField.classList.contains("ckeditor-editor") && window.CKEDITOR) {
                    // Get CKEditor data if this field is CKEditor
                    let editorId = inputField.id;
                    if (editorId && CKEDITOR.instances[editorId]) {
                        paramValue = CKEDITOR.instances[editorId].getData();
                    }
                } else {
                    paramValue = inputField.value;
                }
            }

            if (paramName) {
                parameters.push({ name: paramName, value: paramValue });
            }
        });

        console.log("parameters", parameters);

        if (testName && testName.trim() !== '') {
            testsData.push({ testId, testName, specimen, parameters });
        }
    });

    console.log("Collected Test Data:", testsData); // Debugging: Check collected test data

    const greetingCheckbox = document.querySelector('#greetingMessage');
    const sampleCheckbox = document.querySelector('#sampleMessage');

    // Collect Patient Data
    const patientData = {
        patientId: document.getElementById("searchPatientId")?.value.trim() || null,  // Hidden field storing patient ID if exists
        patientName: document.getElementById("searchPatient")?.value.trim() || null,
        patientContact: document.getElementById("patientContact")?.value.trim() || null,
        patientCNIC: document.getElementById("patientCNIC")?.value.trim() || null,
        patientAge: document.getElementById("patientAge")?.value.trim() || null,
        patientEmail: document.getElementById("patientEmail")?.value.trim() || null,
        patientGender: document.getElementById("patientGender")?.value.trim() || null,
        patientAgeChoices: document.getElementById("patientAgeChoices")?.value.trim() || null,
        patientAddress: document.getElementById("patientAddress")?.value.trim() || null,
        refBy: document.getElementById("refBy")?.value.trim() || null,

        branchId:document.getElementById("branches")?.value.trim() || null,  
        branchName: document.getElementById("branches")?.options[document.getElementById("branches").selectedIndex].text || null,

        panelId:document.getElementById("panels")?.value.trim() || null, 
        panelName: document.getElementById("panels")?.options[document.getElementById("panels").selectedIndex].text || '',

        greetingMessage: greetingCheckbox ? greetingCheckbox.checked : false,
        sampleMessage: sampleCheckbox ? sampleCheckbox.checked : false
    };

    console.log("Collected Patient Data:", patientData); // Debugging: Check collected patient data
    const discountCheckbox = document.querySelector('#discountInclusion');
    let pricingData = {
        totalPrice: document.querySelector('#totalPrice')?.value || null,
        discount: document.querySelector('#discount')?.value || null,
        priceAfterDiscount: document.querySelector('#priceAfterDiscount')?.value || null,
        paidAmount: document.querySelector('#paidAmount')?.value || null,
        dueAmount: document.querySelector('#dueAmount')?.value || null,
        doctorNotes: document.querySelector('#doctorNotes')?.value || null,
        discountInclusion: discountCheckbox ? discountCheckbox.checked : false
        
    };
   

    let commissionData ={
        penalistCommission: document.getElementById("penalistCommission")?.value.trim() || null,
        doctorCommission: document.getElementById("doctorCommission")?.value.trim() || null,
        priceAfterCommission: document.getElementById("priceAfterCommission")?.value.trim() || null,

    }

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

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

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

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

    let selectedDoctors = [];
    document.querySelectorAll('input[name="doctor_ids"]:checked').forEach(checkbox => {
        selectedDoctors.push(checkbox.value);
    });

    console.log("Selected Doctors:", selectedDoctors); 
    const paidAmountField = document.querySelector("#paidAmount");


    // Validate patient contact number format
    const contactRegex = /^\+92[3][0-9]{9}$/;
    if (!contactRegex.test(patientData.patientContact)) {
        const contactInput = document.getElementById("patientContact");
        
        // Show error message (create it if it doesn't exist)
        let errorEl = document.getElementById("patientContactError");
        if (!errorEl) {
            errorEl = document.createElement("small");
            errorEl.id = "patientContactError";
            errorEl.className = "text-danger";
            contactInput.insertAdjacentElement('afterend', errorEl);
        }
        errorEl.textContent = "Please enter number in format: +923001234567";
        
        contactInput.classList.add("is-invalid");
        contactInput.focus();

        return;
    } else {
        const contactInput = document.getElementById("patientContact");
        const errorEl = document.getElementById("patientContactError");
        if (errorEl) {
            errorEl.textContent = "";
            errorEl.classList.add("d-none");
        }
        contactInput.classList.remove("is-invalid");
    }



     // Validation Checks  
     if (!patientData.patientName) {
        alert("Please add a patient before saving.");
        return;
    }

    if (testsData.length === 0) {
        alert("Please add at least one test before saving.");
        return;
    }

    if (parseFloat(paidAmountField.value) < 0){
        alert("Please add correct value in paid amount.")
        return;
    }

    
    const requestBody = JSON.stringify({ 
        patient: patientData,
        tests: testsData,
        commission: commissionData,
        totalPrice: pricingData.totalPrice,
        discount: pricingData.discount,
        priceAfterDiscount: pricingData.priceAfterDiscount,
        dueAmount:pricingData.dueAmount,
        paidAmount:pricingData.paidAmount,
        doctorNotes: pricingData.doctorNotes,
        selectedDoctors: selectedDoctors,
        discountType:discountType,
        commissionType:commissionType,
        discountInclusion: pricingData.discountInclusion,
        action: action
    });

    console.log("Request Body:", requestBody); // Debugging: Check JSON stringified body

    // Send data to the backend
    fetch('/createGeneralReport/', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': getCSRFToken()  // Ensure CSRF token is included for Django
        },
        body: requestBody
    })
    .then(handleSaveResponse)
    .catch(error => {
        console.error("Error during save:", error);
    });

}

// Function to fetch CSRF token for Django
function getCSRFToken() {
    return document.querySelector('[name=csrfmiddlewaretoken]')?.value || '';
}

document.querySelectorAll('button[type="submit"]').forEach(btn => {
    btn.addEventListener('click', function(event) {
        event.preventDefault(); // Prevent default form submission
        const action = this.value || ''; // Get the value of the clicked button ("" or "save_and_print")
        collectTestDataAndSend(action);  // Pass the action to the function
    });
});


</script>



<script>
    // Call this when we get report_id from backend
    async function print_general_receipt(id) {
        // Get the print template from Django
        const response = await fetch(`/print_general_receipt/${id}/`);
        const invoiceTemplate = await response.text();

        // Open a new window
        const printWindow = window.open('', '_blank');

        // Write the report content
        printWindow.document.open();
        printWindow.document.write(invoiceTemplate);
        printWindow.document.close();

        // Add afterprint listener inside the print window
        printWindow.addEventListener('afterprint', () => {
            printWindow.close(); // Close print window
            window.location.href = "{% url 'generalReports' %}"; // Redirect main window
        });

        // Fallback in case afterprint doesn't trigger (manual close)
        printWindow.onbeforeunload = () => {
            window.location.href = "{% url 'generalReports' %}";
        };

        // Trigger print after short delay
        setTimeout(() => {
            printWindow.print();
        }, 1000);
    }

    // Save button response handler
    function handleSaveResponse(response) {
        response.json().then(data => {
            console.log("Response from backend:", data);

            if (data.report_id) {
                // Save and print directly for general receipt
                print_general_receipt(data.report_id);
            } else if (data.redirect) {
                // Just save (no printing)
                window.location.href = data.redirect;
            } else {
                alert("Failed to save report.");
            }
        }).catch(error => {
            console.error("Error parsing response:", error);
            alert("Failed to save report.");
        });
    }
</script>



<script>
   function handlePrintOption(padOption) {
    const modal = document.getElementById("printOptionsModal");
    const reportId = modal.dataset.reportId; // Use camelCase here

    if (reportId) {
        print_general_receipt(reportId, padOption);
    } else {
        alert("Missing report ID for printing.");
    }
}

</script>
    


<script>
document.addEventListener("DOMContentLoaded", function () {
    function validateContact(contactInput, errorElement) {
        const value = contactInput.value.trim();
        const isValid = /^\+92[3][0-9]{9}$/.test(value);

        if (!isValid) {
            errorElement.classList.remove('d-none');
            contactInput.classList.add('is-invalid');
        } else {
            errorElement.classList.add('d-none');
            contactInput.classList.remove('is-invalid');
        }

        return isValid;
    }

    // Attach validation on form submit
    document.querySelectorAll("form").forEach(form => {
        form.addEventListener("submit", function (e) {
            const contactInput = form.querySelector("input[name='patientContact']");
            const errorElement = form.querySelector("#contactError");
            const isValid = validateContact(contactInput, errorElement);

            if (!isValid) {
                e.preventDefault();  // Stop form submission
            }
        });
    });
});
</script>


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