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



<div id="main-content">
    
   

    <div class="container-fluid">
       

<br>




<div class="block-header">


<div class="row">
  <div class="col-md-3">
     <form method="GET" action="{% url 'travelDashboard' %}">
      {% csrf_token %}
          <select class="form-control" name="dataViewSelection" data-placeholder="Select Range" style="width: 80%;" id="dataViewSelection">
            <option value="today" {% if request.GET.dataViewSelection == 'today' %}selected{% endif %} >Today</option>  
            <option value="all" {% if request.GET.dataViewSelection == 'all' %}selected{% endif %} >All</option>
              <option value="thismonth" {% if request.GET.dataViewSelection == 'thismonth' %}selected{% endif %} >This Month</option>
              <option value="thisyear" {% if request.GET.dataViewSelection == 'thisyear' %}selected{% endif %} >This Year</option>
              <option value="custom" {% if request.GET.dataViewSelection == 'custom' %}selected{% endif %} >Custom</option>  
          </select>
     
  </div>
  
  <div class="col-md-6" id="customFields" style="display: none;">
      <div class="row">
          <div class="col-md-6" style="display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;">
              <label for="startDate" class="form-label" style="padding-right: 5px;">From:</label>
              <input type="date" class="form-control" id="startDate" name="startDate"  style="width: 60%;">
          </div>
          <div class="col-md-6" style="display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;">
              <label for="endDate" class="form-label" style="padding-right: 5px;">To:</label>
              <input type="date" class="form-control" id="endDate" name="endDate"  style="width: 60%;">
              <p id="dateRangeError" style="color: red;"></p>
          </div>
      </div>
  </div>
  
  <div class="col-md-3">
      <button type="submit" class="btn btn-info">Submit</button>
  </div>
</form>
</div>     
</div>



<div class="row">

  <div class="col-md-6">
    <div class="card widget-card border-light shadow-sm">
        <div class="card-header bg-info text-white p-1"></div>
        <div class="card-body p-4">
          <div class="row">
            <div class="col-4">
              <h6 class="card-title widget-card-title mb-3">Travel Reports
                  <i class="fas fa-archive fs-4 text-info"></i>
              </h6>
              
              <h4 class="card-subtitle text-body-secondary m-0">{{total_reports}}
              </h4>
            </div>

            <div class="col-4">
                <h6 class="card-title widget-card-title mb-3">Total Agencies
                  <i class="fas fa-industry fs-4 text-info"></i>
                </h6>
                <h4 class="card-subtitle text-body-secondary m-0">{{total_agencies}}
                </h4>
              </div>

              <div class="col-4">
               
                <h6 class="card-title widget-card-title mb-3">Travel Patients
                  <i class="fas fa-industry fs-4 text-info"></i>
                </h6>
                <h4 class="card-subtitle text-body-secondary m-0">{{total_patients}}
                </h4>
              
               

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


<div class="col-md-6">
  <div class="card widget-card border-light shadow-sm">
      <div class="card-header bg-info text-white p-1"></div>
      <div class="card-body p-4">
        <div class="row">
          <div class="col-4">
            <h6 class="card-title widget-card-title mb-3">Total Income</h6>
            <h4 class="card-subtitle text-body-secondary m-0">{{total_travel_income}}
              <i class="fas fa-arrow-up text-success"></i>
            </h4>
          </div>

          <div class="col-4">
              <h6 class="card-title widget-card-title mb-3">Panelist Comission</h6>
              <h4 class="card-subtitle text-body-secondary m-0">{{total_comission}}
                  <i class="fas fa-arrow-down text-danger"></i>
              </h4>
            </div>

            <div class="col-4">
             {% if net_income < 0 %}
              <h6 class="card-title widget-card-title mb-3">Net Income</h6>
              <h4 class="card-subtitle text-body-secondary m-0">{{net_income}}
                  <i class="fas fa-arrow-down text-danger"></i>
              </h4>
              {% else %}
              <h6 class="card-title widget-card-title mb-3">Net Income</h6>
              <h4 class="card-subtitle text-body-secondary m-0">{{net_income}}
                  <i class="fas fa-arrow-up text-success"></i>
              </h4>
              {% endif %}

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



</div>




<div class="row">


<div class="col-md-6">
  <div class="card widget-card border-light shadow-sm">
      <div class="card-header bg-info text-white">
          <h5 class="mb-0 text-center">Agency vs Patients</h5>
      </div>
      <div class="card-body p-4" style="max-height: 300px; overflow-y: auto;">
          <ul class="list-group list-group-flush">
            {% for item in agency_counts %}
              <li class="list-group-item d-flex justify-content-between align-items-center">
                  <div>
                    <h6>
                      <i class="fas fa-industry text-info me-2"></i>
                      {{item.panelName}}
                    </h6>
                  </div>
                  <h6>
                  <span class="badge bg-info rounded-pill text-white">{{item.total_patients}}</span></h6>
              </li>
              {% endfor %}
          </ul>
      </div>
  </div>
</div>


<div class="col-md-6">
    <div class="card widget-card border-light shadow-sm">
        <div class="card-header bg-info text-white">
            <h5 class="mb-0 text-center">Travel Patients Billing</h5>
        </div>
        <div class="card-body p-4">
          <table class="table table-bordered table-striped table-hover dataTable js-exportable" style="width:100%">
              <thead>
                  <tr>
                      <th>Sr.No</th>
                      <th>Total Price</th>
                      <th>Panelist Comission</th>
                    
                      <th>Net Income</th>
                      <th>Date</th>
                      <th>Status</th>
                     
                  </tr>
              </thead>
              
              <tbody>
                  
                  {% for item in travel_billing %}
                      <tr>
                      <td>{{forloop.counter}}</td>
                      <td>{{item.totalPrice}}</td>
                      <td>
                          {% if item.panelistComission > '0' %}
                          {{item.panelistComission}}
                      
                          {% else %}
                          N/A
                          {% endif %}
                      </td>

                      <td>{{item.netIncome}}</td>
                      <td>{{item.billingDate}}</td>
                      <td>
                          {% if item.paymentStatus == 'Paid' %}
                          <span class="badge badge-success">{{item.paymentStatus}}</span>
                          {% else %}
                          <span class="badge badge-danger">{{item.paymentStatus}}</span>
                          {% endif %}
                      </td>     


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


</div>

  


       



        
</div>

</div>


</div>

{% block javascripts %}

<script>

  document.addEventListener("DOMContentLoaded", function () {
      const dateRangeSelector = document.getElementById("dataViewSelection");
      const customFields = document.getElementById("customFields");
      const startDateInput = document.getElementById("startDate");
      const endDateInput = document.getElementById("endDate");
      const dateRangeError = document.getElementById("dateRangeError");
  
      // Function to toggle visibility of custom date fields
      function toggleCustomFields() {
          if (dateRangeSelector.value === "custom") {
              customFields.style.display = "block";
          } else {
              customFields.style.display = "none";
              dateRangeError.textContent = ""; // Clear error message when hiding custom fields
          }
      }
  
      // Initial call to toggle custom fields visibility
      toggleCustomFields();
  
      // Event listener for dropdown change
      dateRangeSelector.addEventListener("change", toggleCustomFields);
  
      // Populate date fields with selected dates from URL parameters
      const urlParams = new URLSearchParams(window.location.search);
      const startDate = urlParams.get("startDate");
      const endDate = urlParams.get("endDate");
      startDateInput.value = startDate || "";
      endDateInput.value = endDate || "";
  
      // Validate date range
      function validateDateRange() {
          const startDate = new Date(startDateInput.value);
          const endDate = new Date(endDateInput.value);
  
          if (startDate > endDate) {
              dateRangeError.textContent = "Invalid Date";
              endDateInput.value = ""; // Clear the "To" date input
              return;
          }
  
          const timeDifference = endDate - startDate;
          const dayDifference = timeDifference / (1000 * 60 * 60 * 24); // Convert milliseconds to days
  
          if (dayDifference > 30) {
              dateRangeError.textContent = "Maximum 30 days range allowed";
              endDateInput.value = ""; // Clear the "To" date input
          } else {
              dateRangeError.textContent = ""; // Clear error message if valid
          }
      }
  
      startDateInput.addEventListener("change", validateDateRange);
      endDateInput.addEventListener("change", validateDateRange);
  });
  
  
  </script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>





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