{% extends "base.html" %}
{% load static %}

{% block title %}Reports | Birthday Report{% endblock %}

{% block content %}
<div class="card g-3 mb-3">
  <div class="card-header">
    <h5 class="mb-0">Birthday Report</h5>
  </div>
  <form method="POST" id="report-birth-form">
    {% csrf_token %}
    <div class="card-body">
      <div class="row g-3">
        <div class="col-md-4 col-lg-4 col-6">
          <label class="form-label" for="time_period">Time Period</label>
          <select class="form-select select2" name="time_period" id="time_period" data-placeholder="ALL">
            <option value="">-- Select Time Period --</option>
            <option value="1 Week">1 Week</option>
            <option value="2 Weeks">2 Weeks</option>
            <option value="3 Weeks">3 Weeks</option>
            <option value="1 Month">1 Month</option>
            <option value="3 Months">3 Months</option>
            <option value="6 Months">6 Months</option>
            <option value="1 Year">1 Year</option>
            <option value="Custom Dates">Custom Dates</option>
          </select>
        </div>
        <div class="col-md-4 col-lg-4 col-6 div-date-range" style="display: none;">
          <div class="row g-3">
            <div class="col-md-6 col-lg-6 col-6">
              <label class="form-label" for="report_from_date">From Date</label>
              <input class="form-control datetimepicker" name="report_from_date" id="report_from_date"
                     type="text" placeholder="Select From Date" data-options='{"dateFormat":"d/m/Y"}'>
            </div>
            <div class="col-md-6 col-lg-6 col-6">
              <label class="form-label" for="report_to_date">To Date</label>
              <input class="form-control datetimepicker" name="report_to_date" id="report_to_date"
                     type="text" placeholder="Select To Date" data-options='{"dateFormat":"d/m/Y"}'>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="card-footer border-top text-end">
      <button type="submit" class="btn btn-primary me-2">Search</button>
      <button type="button" class="btn btn-secondary" onclick="location.reload();">Cancel</button>
    </div>
  </form>
</div>

<div id="view-report"></div>
{% endblock %}

{% block extra_js %}
<script>
  $(document).ready(function() {
    $('#time_period').on('change', function() {
      const sel = $(this).val();
      if (sel === 'Custom Dates') {
        $('.div-date-range').show();
        $('#report_from_date, #report_to_date').attr('required', true);
        $('#report_from_date').prev('label').html('<span class="text-danger">*</span> From Date');
        $('#report_to_date').prev('label').html('<span class="text-danger">*</span> To Date');
      } else {
        $('.div-date-range').hide();
        $('#report_from_date, #report_to_date').removeAttr('required').val('');
        $('#report_from_date').prev('label').text('From Date');
        $('#report_to_date').prev('label').text('To Date');
      }
    });

    $('#report-birth-form').on('submit', function(e) {
      e.preventDefault();
      $.ajax({
        type: 'POST',
        url: "{% url 'reports:get_birth_report' %}",  // update to your URL name
        data: $(this).serialize(),
        dataType: 'json',
        success: function(resp) {
          if (resp.status) {
            $('#view-report').html(resp.Data);
          } else {
            alert(resp.message || 'Failed to fetch report.');
          }
        },
        error: function(xhr) {
          alert('Error: ' + (xhr.responseJSON?.message || 'Unexpected error.'));
        }
      });
    });
  });
</script>
{% endblock %}