{% extends "base.html" %}
{% block header %}
{{ super() }}
{% endblock header %}

{% block content %}
{% include "partials/navbar.html" %}

<div class="container mt-5">
  <h1 class="activity-tracker">Activity Tracker</h1>
  {% with messages = get_flashed_messages() %}
  {% if messages %}
  <ul class=flashes>
      {% for message in messages %}
      <li>{{ message }}</li>
      {% endfor %}
  </ul>
  {% endif %}
  {% endwith %}
  <form method="POST" id="activityForm" class="activity-tracker-form" action="/activity_tracker_form">

    <fieldset class="mb-4">
      <legend>Activity Date & State Details</legend>
      <div class="row">
        <div class="col-sm-6">
          <div class="form-group">
            <label for="date_of_meeting">Date of Meeting</label>
            <input type="date" class="form-control" id="date_of_meeting" name="date_of_meeting" required
              onfocus="this.showPicker && this.showPicker()" />
          </div>
        </div>
        <div class="col-sm-6">
          <div class="form-group" id="field_state">
            <label for="state">State</label>
            <select class="form-control" id="state" name="state">
              <option value="">Select State</option>
            </select>
          </div>
        </div>
      </div>
    </fieldset>

    <fieldset class="mb-4">
      <legend>Location Details</legend>
      <div class="row">
        <div class="col-sm-4">
          <div class="form-group" id="field_activity_level">
            <label for="activity_level">Activity Level</label>
            <select class="form-control" id="activity_level" name="activity_level" required>
              <option value="">Select Activity Level</option>
            </select>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="form-group" id="field_district_name">
            <label for="district_name">District</label>
            <select class="form-control" id="district_name" name="district_name">
              <option value="">Select District</option>
            </select>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="form-group" id="field_block_name">
            <label for="block_name">Block</label>
            <select class="form-control" id="block_name" name="block_name">
              <option value="">Select Block</option>
            </select>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="form-group" id="field_sector_name">
            <label for="sector_name">Sector</label>
            <select class="form-control" id="sector_name" name="sector_name">
              <option value="">Select Sector</option>
            </select>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="form-group" id="field_centre_name">
            <label for="centre_name">Centre</label>
            <select class="form-control" id="centre_name" name="centre_name">
              <option value="">Select Centre</option>
            </select>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="form-group" id="field_panchayat_name">
            <label for="panchayat_name">Panchayat</label>
            <select class="form-control" id="panchayat_name" name="panchayat_name">
              <option value="">Select Panchayat</option>
            </select>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="form-group" id="field_school_name">
            <label for="school_name">School</label>
            <select class="form-control" id="school_name" name="school_name">
              <option value="">Select School</option>
            </select>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="form-group" id="field_peeo_uceeo_school">
            <label for="peeo_uceeo_school">PEEO/UCEEO School</label>
            <select class="form-control" id="peeo_uceeo_school" name="peeo_uceeo_school">
              <option value="">Select PEEO/UCEEO School</option>
            </select>
          </div>
        </div>
      </div>
    </fieldset>

    <fieldset class="mb-4">
      <legend>Activity Details</legend>
      <div class="row">
        <div class="col-sm-4">
          <div class="form-group" id="field_activity_type">
            <label for="activity_type">Activity Type</label>
            <select class="form-control" id="activity_type" name="activity_type" required>
              <option value="">Select Activity Type</option>
            </select>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="form-group" id="field_stakeholders_type">
            <label for="stakeholders_type">Stakeholders Type</label>
            <select class="form-control" id="stakeholders_type" name="stakeholders_type">
              <option value="">Select Stakeholders Type</option>
            </select>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="form-group" id="field_other_stakeholders_type">
            <label for="other_stakeholders_type">Other Stakeholders Type</label>
            <select class="form-control" id="other_stakeholders_type" name="other_stakeholders_type">
              <option value="">Select Other Stakeholders Type</option>
            </select>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="form-group" id="field_channel_type">
            <label for="channel_type">Channel Type</label>
            <select class="form-control" id="channel_type" name="channel_type">
              <option value="">Select Channel Type</option>
            </select>
          </div>
          <div class="form-group" id="field_engagement_type">
            <label for="engagement_type">Engagement Type</label>
            <select class="form-control" id="engagement_type" name="engagement_type">
              <option value="">Select Engagement Type</option>
            </select>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="form-group" id="field_other_engagement_type">
            <label for="other_engagement_type">Other Engagement Type</label>
            <input type="text" class="form-control" id="other_engagement_type" name="other_engagement_type">
          </div>
        </div>
        <div class="col-sm-4">
          <div class="form-group" id="field_follow_up_through">
            <label for="follow_up_through">Follow Up Through</label>
            <select class="form-control" id="follow_up_through" name="follow_up_through">
              <option value="">Select Follow Up Through</option>
            </select>
          </div>
        </div>
      </div>
    </fieldset>

    <fieldset class="mb-4">
      <legend>Participation Metrics</legend>
      <div class="row">
        <div class="col-sm-4" id="family-metrics-fieldset">
          <div class="form-group" id="family-metrics-card">
            <div class="form-group">
              <h5 class="mb-0">Family Details</h5>
              <div id="phone-numbers">
                <div class="form-group mb-3" id="phone-block-0">
                  <label for="user_phone_0" class="form-label">Enter Phone Number / Father code / Mother code <span class="text-danger">*</span></label>
                  <input type="text" class="form-control" id="user_phone_0" name="user_phone_0" aria-describedby="phone-help-0">
                  <small id="phone-help-0" class="form-text text-muted">Enter a 10-digit phone number.</small>

                  <div id="engagement-counts_0" class="mt-2"></div>

                  <div id="count-increments_0" class="mt-2" style="display:none;"></div>

                  <button type="button" class="btn btn-outline-primary mt-2" data-index="0" id="add-family-details_0" style="display:none">Add Family Details</button>

                  <div id="family-details-section_0" class="mt-3" style="display:none;">
                    <div class="card p-3 bg-light">
                      <div class="row g-2">
                        <div class="col-md-4">
                          <label for="mother_name_0" class="form-label">Mother Name</label>
                          <input type="text" class="form-control" id="mother_name_0" name="mother_name_0">
                        </div>
                        <div class="col-md-4">
                          <label for="father_name_0" class="form-label">Father Name</label>
                          <input type="text" class="form-control" id="father_name_0" name="father_name_0">
                        </div>
                        <div class="col-md-4">
                          <label for="child_name_0" class="form-label">Child Name</label>
                          <input type="text" class="form-control" id="child_name_0" name="child_name_0">
                        </div>
                        <div class="col-md-4">
                          <label for="mother_code_0" class="form-label">Mother Code</label>
                          <input type="text" class="form-control" id="mother_code_0" name="mother_code_0">
                        </div>
                        <div class="col-md-4">
                          <label for="father_code_0" class="form-label">Father Code</label>
                          <input type="text" class="form-control" id="father_code_0" name="father_code_0">
                        </div>
                        <div class="col-md-4">
                          <label for="child_code_0" class="form-label">Child Code</label>
                          <input type="text" class="form-control" id="child_code_0" name="child_code_0">
                        </div>
                      </div>
                    </div>
                  </div>

                  <span id="phone-status_0" class="badge bg-secondary" style="display:none;">Status</span>

                  <div id="add-new-number_0" class="mt-2">
                    <button type="button" class="btn btn-outline-secondary" id="add-phone_0">Add New Family</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="form-group col-md-4" id="field_spd">
          <label for="spd">SPD (State Project Director)</label>
          <input type="number" class="form-control" id="spd" name="spd" min="0">
        </div>
        <div class="form-group col-md-4" id="field_ceo">
          <label for="ceo">CEO (Chief Education Officer)</label>
          <input type="number" class="form-control" id="ceo" name="ceo" min="0">
        </div>
        <div class="form-group col-md-4" id="field_aws">
          <label for="aws">AWS (Anganwadi Supervisor)</label>
          <input type="number" class="form-control" id="aws" name="aws" min="0">
        </div>
        <div class="form-group col-md-4" id="field_aww">
          <label for="aww">AWW (Anganwadi Workers)</label>
          <input type="number" class="form-control" id="aww" name="aww" min="0">
        </div>
        <div class="form-group col-md-4" id="field_awh">
          <label for="awh">AWH (Anganwadi Helper)</label>
          <input type="number" class="form-control" id="awh" name="awh" min="0">
        </div>
        <div class="form-group col-md-4" id="field_balaww">
          <label for="balaww">BALAWW (Balvatika Anganwadi Workers)</label>
          <input type="number" class="form-control" id="balaww" name="balaww" min="0">
        </div>
        <div class="form-group col-md-4" id="field_crc">
          <label for="crc">CRC (Cluster Resource Centre)</label>
          <input type="number" class="form-control" id="crc" name="crc" min="0">
        </div>
        <div class="form-group col-md-4" id="field_brc">
          <label for="brc">BRC (Block Resource Centre)</label>
          <input type="number" class="form-control" id="brc" name="brc" min="0">
        </div>
        <div class="form-group col-md-4" id="field_ssaco">
          <label for="ssaco">SSACO</label>
          <input type="number" class="form-control" id="ssaco" name="ssaco" min="0">
        </div>
        <div class="form-group col-md-4" id="field_ssadc">
          <label for="ssadc">SSADC</label>
          <input type="number" class="form-control" id="ssadc" name="ssadc" min="0">
        </div>
        <div class="form-group col-md-4" id="field_dpo">
          <label for="dpo">DPO (District Primary Education Officer)</label>
          <input type="number" class="form-control" id="dpo" name="dpo" min="0">
        </div>
        <div class="form-group col-md-4" id="field_cdpo">
          <label for="cdpo">CDPO (Child Development Project Officer)</label>
          <input type="number" class="form-control" id="cdpo" name="cdpo" min="0">
        </div>
        <div class="form-group col-md-4" id="field_beo">
          <label for="beo">BEO (Block Education Officer)</label>
          <input type="number" class="form-control" id="beo" name="beo" min="0">
        </div>
        <div class="form-group col-md-4" id="field_teacher">
          <label for="teacher">Teacher</label>
          <input type="number" class="form-control" id="teacher" name="teacher" min="0">
        </div>
        <div class="form-group col-md-4" id="field_mt">
          <label for="mt">Master Trainer</label>
          <input type="number" class="form-control" id="mt" name="mt" min="0">
        </div>
        <div class="form-group col-md-4" id="field_peeo_uceeo_cbeo">
          <label for="peeo_uceeo_cbeo">PEEO/UCEEO CBEO</label>
          <input type="number" class="form-control" id="peeo_uceeo_cbeo" name="peeo_uceeo_cbeo" min="0">
        </div>
        <div class="form-group col-md-4" id="field_home_onboarding">
          <label for="home_onboarding">Home Onboarding</label>
          <input type="number" class="form-control" id="home_onboarding" name="home_onboarding" min="0">
        </div>
        <div class="form-group col-md-4" id="field_centre_onboarding">
          <label for="centre_onboarding">Centre Onboarding</label>
          <input type="number" class="form-control" id="centre_onboarding" name="centre_onboarding" min="0">
        </div>
        <div class="form-group col-md-4" id="field_community_engagement_onboarded">
          <label for="community_engagement_onboarded">Community Engagement Onboarded</label>
          <input type="number" class="form-control" id="community_engagement_onboarded" name="community_engagement_onboarded" min="0">
        </div>
        <div class="form-group col-md-4" id="field_numbers_of_centers_participated">
          <label for="numbers_of_centers_participated">Numbers Of Centers Participated</label>
          <input type="number" class="form-control" id="numbers_of_centers_participated" name="numbers_of_centers_participated" min="0">
        </div>
        <div class="form-group col-md-4" id="field_workshop_onboarded_caregivers">
          <label for="workshop_onboarded_caregivers">Workshop Onboarded Caregivers</label>
          <input type="number" class="form-control" id="workshop_onboarded_caregivers" name="workshop_onboarded_caregivers" min="0">
        </div>
        <div class="form-group col-md-4" id="field_workshop_number_of_centre_participated">
          <label for="workshop_number_of_centre_participated">Workshop Number Of Centre Participated</label>
          <input type="number" class="form-control" id="workshop_number_of_centre_participated" name="workshop_number_of_centre_participated" min="0">
        </div>
      </div>
    </fieldset>

    <div class="form-group">
      <label for="notes">Notes</label>
      <textarea id="notes" name="notes" class="form-control" rows="3"></textarea>
    </div>

    <div class="submit-btn">
      <button type="submit" class="btn btn-success px-4">Submit</button>
    </div>
  </form>
</div>

<script src="/static/js/activity_type_form_logic.js"></script>
<script src="/static/js/activity_location_form_logic.js"></script>
{% endblock content %}