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



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



<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 Agency</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 'addPanel' %}">
                       
                        {% csrf_token %}
                        
                        <div class="row g-2">

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

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

                        </div>

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

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


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

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


                        <div class="row g-2">
                            <div class="col mb-3">
                                <label for="panelist" class="form-label">Select Panelist</label>
                                <select name="panelist" id="panelist" class="form-control">
                                    <option value="select">Select Panelist</option>
                                    {% for user in userData %}
                                        <option value="{{ user.id }}">{{ user.username }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>

                      
                    </div>

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



    {% for item in panels_with_clients %}
    <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 Agency</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 'editPanel' item.panel.id %}">
                        {% csrf_token %}
                        
                        
                        <div class="row g-2">

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

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

                        </div>

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

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


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

                        <div class="row g-2">
                            <div class="col mb-3">
                                <label for="panelAddress" class="form-label">Address</label>
                                <textarea type="text" id="panelAddress" name="panelAddress"
                                       class="form-control" placeholder="Enter Address" required>{{item.panel.panelAddress}}</textarea>
                            </div>
                           
                        </div>
                      
                        <div class="row g-2">
                            <div class="col mb-3">
                                <label for="panelist" class="form-label">Select Panelist</label>
                                <select name="panelist" id="panelist" class="form-control">
                                    <option value="select">Select Panelist</option>
                                    {% for user in userData %}
                                        <option value="{{ user.id }}" {% if user.id == item.panel.panelist.id %}selected{% endif %}>{{ user.username }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>

                    </div>

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



 {% for item in panels_with_clients %}
    <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 Agency</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="/deletePanel/{{item.panel.id}}" type="submit" class="btn btn-danger">Delete</a>
                </div>
            </div>
        </div>
    </div>
    {% endfor %}



    {% for item in panels_with_clients %}
    <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>
                    
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                
                                <th>Sr.No</th>
                                <th>Name</th>
                                <th>Relation</th>
                                <th>Father/Husband Name</th>
                                <th>CNIC</th>
                                <th>Gender</th>
                                <th>Date</th>
                               
                                
                            </tr>
                            </thead>
                            <tbody id="patientsTable-{{ item.panel.id }}" class="table-border-bottom-0">
                            {% for client in item.clients   %}
                            <tr>
                                <td>{{ forloop.counter }}</td>
                                <td>{{client.name}}</td>
                                <td>{{client.relation}}</td>
                                <td>{{client.fathernName}}</td>
                                <td>{{client.cnic}}</td>                                       
                                <td>{{client.gender}}</td>  
                                <td>{{client.patient_date}}</td> 

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

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                   
                </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 Agency</button>
                            {% endif %}
                            
                        </div>
                        {% if request.user.userRole == 'Travel Receptionist' or request.user.userRole == 'General 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>Panelist</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_clients  %}
                                        <tr>
                                           
                                           
                                            <td>{{ forloop.counter }}</td>
                                            <td><strong>{{item.panel.panelName}}</strong></td>
                                            <td>{{item.panel.panelist.username}}</td>
                                            <td>{{item.panel.panelType}}</td>
                                            <td>{{item.panel.panelContact}}</td>
                                            <td>{{item.panel.panelCity}}</td>
                                            <td style="max-width: 300px; word-wrap: break-word; white-space: normal;">{{item.panel.panelAddress}}</td>
                                            <td>{{item.panel.paneldate}}</td>
                                           
                         
                    <td > 
                    <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> 
                    {% if request.user.userRole == 'admin' %}
                    <button type="button" class="btn btn-info" title="Edit"  data-toggle="modal" data-target="#editUserModal-{{forloop.counter}}"><i class="fa fa-edit"></i></button>
                    {% endif %}
                    {% if request.user.userRole == 'admin' %}
                    <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>
                        {% 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_patients/${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.clients.forEach(client => {
                const row = `
                    <tr>
                        <td>${counter}</td>
                        <td>${client.name}</td>
                        <td>${client.relation}</td>
                        <td>${client.fathernName}</td>
                        <td>${client.cnic}</td>
                        <td>${client.gender}</td>
                        <td>${client.patient_date}</td>
                    </tr>`;
                tableBody.innerHTML += row;
                counter++;
            });
        })
        .catch(error => console.error("Error:", error));
    }
</script>

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