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



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





  
{% for item in panels_with_reports %}
<div class="modal fade" id="viewClientsModal-{{ item.panel.id }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">View Patients</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            
            <div class="modal-body" style="max-height: 400px; overflow-y: auto;">

                <div class="row">

                    <div class="col-md-4">
                        <label for="startDate-{{ item.panel.id }}" class="form-label">Start Date</label>
                        <input type="date" id="startDate-{{ item.panel.id }}" name="startDate" class="form-control" />
                    </div>

                    <div class="col-md-4">
                        <label for="endDate-{{ item.panel.id }}" class="form-label">End Date</label>
                        <input type="date" id="endDate-{{ item.panel.id }}" name="endDate" class="form-control" />
                    </div>

                    <div class="col-md-4" style="padding-top: 30px;">
                        <button type="button" class="btn btn-info" onclick="filterPatients({{ item.panel.id }})">Submit</button>
                    </div>

                </div>
                <br>
                
                <div class="table-responsive">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            
                            <th>Sr.No</th>
                            <th>Name</th>
                            <th>Tests</th>
                            <th>Price</th>  
                            <th>Discount</th>  
                            <th>Total Price</th> 
                            <th>Paid Amount</th>  
                            <th>Due Amount</th>  
                            <th>Panelist Commission</th>
                            <th>Doctor Commission</th>
                            <th>Status</th>
                           
                            
                        </tr>
                        </thead>
                        <tbody id="patientsTable-{{ item.panel.id }}" class="table-border-bottom-0">
                        {% for client in item.reports   %}
                        <tr>
                            <td>{{ forloop.counter }}</td>
                            <td>{{client.patientObject.patientName}}</td>
                            <td style="max-width: 200px; word-wrap: break-word; white-space: normal;">
                                {% for test in client.createTestObject.all %}
                                {{ test.testTitle }} ,
                                {% endfor %}                                           
                            </td>
                            <td>{{client.totalPrice}}</td>
                            <td>{{client.discount|default:"0"}} {{client.discountType}}</td>
                            <td>{{client.priceAfterDiscount}}</td>
                            <td>{{client.paidAmount}}</td>
                            <td>{{client.dueAmount}}</td>
                            <td>
                                {% if client.grcommission %}
                                    {{ client.grcommission.penalistCommission }} {{ client.grcommission.commissionType }}
                                {% else %}
                                    -
                                {% endif %}
                            </td>
                            <td>
                                {% if client.grcommission %}
                                    {{ client.grcommission.doctorCommission }} {{ client.grcommission.commissionType }}
                                {% else %}
                                    -
                                {% endif %}
                            </td>
                        
                            <td>
                                {% if client.grcommission %}

                                {% if client.grcommission.recoveryStatus == 'Recovery Remaining' %}
                                    <span class="text-danger">{{ client.grcommission.recoveryStatus }}</span>
                                {% else %}
                                    <span class="text-success">{{ client.grcommission.recoveryStatus }}</span>
                                {% endif %}
                                
                                {% else %}
                                    -
                                {% endif %}
                            </td>

                        </tr>
                        {% endfor %}
                        
                    </tbody>
                </table>
                </div>

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



<div id="wrapper">

    
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Add Panel</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form method="post" action="{% url 'addGRPanel' %}">
                       
                        {% csrf_token %}
                        
                        <div class="row g-2">

                            <div class="col mb-3">
                                <label for="gPanelName" class="form-label">Name</label>
                                <input type="text" id="gPanelName" name="gPanelName"
                                       class="form-control" placeholder="Enter Name" required/>
                            </div>

                            <div class="col mb-3">
                                <label for="gPanelContact" class="form-label">Contact</label>
                                <input type="number" id="gPanelContact" name="gPanelContact"
                                       class="form-control" placeholder="Enter Contact" required/>
                            </div>

                        </div>

                        <div class="row g-2">
                            <div class="col mb-3">
                                <label for="gPanelType" class="form-label">Type</label>
                                <input type="text" id="gPanelType" name="gPanelType"
                                       class="form-control" placeholder="Enter Type" required>
                            </div>

                            <div class="col mb-3">
                                <label for="gPanelCity" class="form-label">City</label>
                                <input type="text" id="gPanelCity" name="gPanelCity"
                                       class="form-control" placeholder="Enter City" required/>
                            </div>
                           
                        </div>


                        <div class="row g-2">
                            <div class="col mb-3">
                                <label for="gPaneldate" class="form-label">Date</label>
                                <input type="date" id="gPaneldate" name="gPaneldate"
                                       class="form-control" required>
                            </div>
                           
                        </div>
                       

                        <div class="row g-2">
                            <div class="col mb-3">
                                <label for="gPanelAddress" class="form-label">Address</label>
                                <textarea type="text" id="gPanelAddress" name="gPanelAddress"
                                       class="form-control" placeholder="Enter Address" required></textarea>
                            </div>
                           
                        </div>


                      
                    </div>

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



    {% for item in panels_with_reports %}
    <div class="modal fade" id="editUserModal-{{forloop.counter}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Edit Panel</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form method="post" action="{% url 'editGRPanel' item.panel.id %}">
                        {% csrf_token %}
                        
                        
                        <div class="row g-2">

                            <div class="col mb-3">
                                <label for="gPanelName" class="form-label">Name</label>
                                <input type="text" id="gPanelName" name="gPanelName"
                                       class="form-control" placeholder="Enter Name" value="{{item.panel.gPanelName}}" required/>
                            </div>

                            <div class="col mb-3">
                                <label for="gPanelContact" class="form-label">Contact</label>
                                <input type="number" id="gPanelContact" name="gPanelContact"
                                       class="form-control" placeholder="Enter Contact" value="{{item.panel.gPanelContact}}" required/>
                            </div>

                        </div>

                        <div class="row g-2">
                            <div class="col mb-3">
                                <label for="gPanelType" class="form-label">Type</label>
                                <input type="text" id="gPanelType" name="gPanelType"
                                       class="form-control" placeholder="Enter Type" value="{{item.panel.gPanelType}}" required>
                            </div>

                            <div class="col mb-3">
                                <label for="gPanelCity" class="form-label">City</label>
                                <input type="text" id="gPanelCity" name="gPanelCity"
                                       class="form-control" placeholder="Enter City" value="{{item.panel.gPanelCity}}" required/>
                            </div>
                           
                        </div>


                        <div class="row g-2">
                            <div class="col mb-3">
                                <label for="gPaneldate" class="form-label">Date</label>
                                <input type="date" id="gPaneldate" name="gPaneldate"
                                       class="form-control" value="{{item.panel.gPaneldate|date:'Y-m-d'}}" required>
                            </div>
                           
                        </div>
                      

                        <div class="row g-2">
                            <div class="col mb-3">
                                <label for="gPanelAddress" class="form-label">Address</label>
                                <textarea type="text" id="gPanelAddress" name="gPanelAddress"
                                       class="form-control" placeholder="Enter Address" required>{{item.panel.gPanelAddress}}</textarea>
                            </div>
                           
                        </div>
                      
                       

                    </div>

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



 {% for item in panels_with_reports %}
    <div class="modal fade" id="deleteModal-{{forloop.counter}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Delete Panel</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to delete this Record ?</p>
                </div>
                <div class="modal-footer justify-content-between">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <a href="/deleteGRPanel/{{item.panel.id}}" type="submit" class="btn btn-danger">Delete</a>
                </div>
            </div>
        </div>
    </div>
    {% endfor %}



   


    <div id="main-content">
        <br>
        <br>
       

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

     

        <div class="container-fluid">
            
            
                <div class="col-lg-12">
                    <div class="card">
                        <div class="header">
                            {% if request.user.userRole == 'Manager' %}
                            {% else %}
                            <button type="button" class="btn btn-info" data-toggle="modal" data-target="#exampleModal">Add Panel</button>
                            {% endif %}
                            
                        </div>
                        {% if request.user.userRole == 'Travel Receptionist' %}
                        {% else %}
                        <div class="body">
                            <div class="table-responsive">
                                <table class="table table-bordered table-striped table-hover dataTable js-exportable" style="width:100%">
                                    <thead>
                                        <tr>
                                            <th>Sr.No</th>
                                            <th>Name</th>
                                            <th>Type</th>
                                            <th>Contact</th> 
                                            <th>City</th>
                                            <th>Address</th>   
                                            <th>Date</th>                                     
                                            <th>Action</th>
                                        </tr>
                                        </thead>
                                        <tbody class="table-border-bottom-0">
                                        
                                        {% for item in panels_with_reports  %}
                                        <tr>
                                           
                                           
                                            <td>{{ forloop.counter }}</td>
                                            <td><strong>{{item.panel.gPanelName}}</strong></td>
                                            <td>{{item.panel.gPanelType}}</td>
                                            <td>{{item.panel.gPanelContact}}</td>
                                            <td>{{item.panel.gPanelCity}}</td>
                                            <td style="max-width: 300px; word-wrap: break-word; white-space: normal;">{{item.panel.gPanelAddress}}</td>
                                            <td>{{item.panel.gPaneldate}}</td>
                                           
                         
                    <td > 

                    {% if request.user.userRole == 'admin'  or request.user.userRole == 'General Receptionist' %}
                    <button type="button" class="btn btn-success" title="View Patients" data-toggle="modal" data-target="#viewClientsModal-{{ item.panel.id }}"><i class="fa fa-eye"></i></button> 
                   
                    
                    <button type="button" class="btn btn-info" title="Edit"  data-toggle="modal" data-target="#editUserModal-{{forloop.counter}}"><i class="fa fa-edit"></i></button>
                  
                    <button type="button" class="btn btn-danger" title="Delete" data-toggle="modal" data-target="#deleteModal-{{forloop.counter}}"><i class="fa fa-trash"></i></button>
                    {% endif %}
                      
                
                    </td>
                    
                  </tr>
                  {% endfor %}
                  
                                        
                                    </tbody>
                                </table>

                               

                            </div>


                              <div class="row">
                                <div class="col-md-4">
                                    Showing {{ panelData.start_index }} to {{ panelData.end_index }} of {{ panelData.paginator.count }} entries
                                    </div>
                                    <div class="col-md-5">
                                    </div>
                                    <div class="col-md-3">
                                        <nav aria-label="...">
                                            <ul class="pagination">
                                                <div class="pagination">
                                                    {% if panelData.has_previous %}
                                                        <a href="?pagepanel={{ panelData.previous_page_number }}" class="btn btn-sm" style="background-color: #4c9ba7; color: white; margin-right: 5px;">Previous</a>
                                                    {% endif %}
                                                    
                                                    {% for num in panelData.paginator.page_range %}
                                                        {% if panelData.number == num %}
                                                            <span class="current-page" style="border: 1px solid; padding: 5px; margin-right: 5px;  background-color: #4c9ba7; color: white; width: 30px; display: flex; justify-content: center;">{{ num }}</span>
                                                        {% elif num in panelData.paginator.page_range|slice:":4" %}
                                                            <a href="?pagepanel={{ num }}"  style="border: 1px solid #ccc; padding: 5px; margin-right: 5px; width: 30px; display: flex; justify-content: center;  background-color: #fbf1b8;">{{ num }}</a>
                                                        {% elif num == panelData.paginator.page_range.4 %}
                                                        <span style="color: #4c9ba7; margin-right: 3px;"> .... </span>
                                                        {% elif num in panelData.paginator.page_range|slice:"-2:" %}
                                                            <a href="?pagepanel={{ num }}"  style="border: 1px solid #ccc; padding: 5px; margin-right: 5px; width: 30px; display: flex; justify-content: center;  background-color: #fbf1b8;">{{ num }}</a>
                                                        {% endif %}
                                                    {% endfor %}
                                                    
                                                    {% if panelData.has_next %}
                                                        <a href="?pagepanel={{ panelData.next_page_number }}" class="btn btn-sm" style="background-color: #4c9ba7; color: white;">Next</a>
                                                    {% endif %}
                                                </div>
                                            </ul>
                                        </nav>
                                    </div>
                                </div>


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

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






{% block javascripts %}


<script>
    function filterPatients(panelId) {
        const startDate = document.getElementById(`startDate-${panelId}`).value;
        const endDate = document.getElementById(`endDate-${panelId}`).value;
    
        if (!startDate || !endDate) {
            alert("Please select both start and end dates.");
            return;
        }
    
        fetch(`/filter_general_reports/${panelId}/`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': '{{ csrf_token }}'
            },
            body: JSON.stringify({ startDate, endDate })
        })
        .then(response => response.json())
        .then(data => {
            const tableBody = document.getElementById(`patientsTable-${panelId}`);
            tableBody.innerHTML = '';
    
            let counter = 1;
    
            data.reports.forEach(report => {
                let testTitles = report.tests.join(", ");
    
                const row = `
                    <tr>
                        <td>${counter}</td>
                        <td>${report.patient_name}</td>
                        <td>${testTitles}</td>
                        <td>${report.total_price}</td>
                        <td>${report.discount}</td>
                        <td>${report.price_after_discount}</td>
                        <td>${report.paid_amount}</td>
                        <td>${report.due_amount}</td>
                        <td>${report.panel_commission}</td>
                        <td>${report.doctor_commission}</td>
                        <td>${report.status}</td>
                    </tr>`;
                tableBody.innerHTML += row;
                counter++;
            });
        })
        .catch(error => console.error("Error:", error));
    }
    </script>
    

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