new_tour.html

{% extends "base.html" %}
{% load static %}
{% block css %}
  <!-- CSS for select2 -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
  <style>
    .js-example-basic-multiple{
      height: 20px;
    }
    .select2-container {
      width: 300px;
      margin-bottom: 10px;
    }

    .select2-container--default .select2-selection--multiple {
      border: 1px solid #ced4da;
      border-radius: 4px; 
    }

    .select2-container--default .select2-selection--multiple .select2-selection__rendered {
      list-style: none;
      padding: 5px;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice {
      background-color: #007bff;
      color: #fff;
      border: 1px solid #ced4da;
      border-radius: 4px;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
      margin-right: 5px;
      color: #fff;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
      color: #fff;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus {
      color: #fff;
    }
    .included-field { 
      position: relative; 
      display: inline-block; 
    }
    .included-field input { 
      padding-right: 40px; 
    }
    .included-field button { 
      position: absolute; 
      top: 0; 
      right: 0; 
      border: none; 
      background-color: transparent; 
      cursor: pointer; 
    }
  </style>
{% endblock %}

{% block title %}Add Tour{% endblock %}

{% block dashboard %}
<div class="dashboard__main">
  <div class="dashboard__content">
    <div class="row y-gap-20 justify-between items-end pb-20 lg:pb-40 md:pb-32">
      <div class="col-auto">
        <h1 class="text-30 lh-14 fw-600">Add Tour</h1>
        <div class="text-15 text-light-1">Let's add a new tour to make Swan Tour bigger.</div>
      </div>
      <div class="col-auto"></div>
    </div>
    <div class="py-30 px-30 rounded-4 bg-white custom_shadow">
      <div class="tabs -underline-2 js-tabs">
        <div class="tabs__controls row x-gap-40 y-gap-10 lg:x-gap-20 js-tabs-controls">
          <div class="col-auto">
            <button class="tabs__button text-18 lg:text-16 text-light-1 fw-500 pb-5 lg:pb-0 js-tabs-button is-tab-el-active"
              data-tab-target=".-tab-item-1">Tour Information</button>
          </div>
          <div class="col-auto">
            <button class="tabs__button text-18 lg:text-16 text-light-1 fw-500 pb-5 lg:pb-0 js-tabs-button "
              data-tab-target=".-tab-item-2">Image</button>
          </div>
        </div>
        <div class="tabs__content pt-30 js-tabs-content">
          <form action="{% url 'new_tour' %}" id="new_tour_form" method="post" enctype="multipart/form-data">
            {% csrf_token %}
            <div class="tabs__pane -tab-item-1 is-tab-el-active">
              <div class="col-xl-10">
                <div class="border-top-light mt-30 mb-30"></div>
                <div class="row x-gap-20 y-gap-20">
                  <!-- ... other fields ... -->
                  <div class="col-6">
                    <div class="form-input">
                      <label for="name" class="lh-1 text-16 text-light-1">Name of the tour</label>
                      <input type="text" name="name" placeholder="Enter name" required>
                    </div>
                  </div>
                  <div class="col-6">
                    <div class="form-input ">
                      <label class="lh-1 text-16 text-light-1">Tour type</label>
                      <select class="form-control form-select bg_input" name="tour_type" required>
                        <option value="" disabled selected>Select tour type</option>
                        {% for tourtype in tourtypes %}
                        <option value="{{tourtype.id}}">{{tourtype.name}}</option>
                        {% endfor %}
                      </select>
                    </div>
                  </div>
                  <div class="col-6">
                    <div class="form-input ">
                      <label class="lh-1 text-16 text-light-1">Group size</label>
                      <input type="number" name="group_size" required>
                    </div>
                  </div>
                  <div class="col-6">
                    <div class="form-input" style="height: 59px">
                      <label class="lh-1 text-16 text-light-1">Cities</label>
                      <select class="js-example-basic-multiple" id="city" name="city" multiple required>
                        {% for city in cities %}
                        <option value="{{ city.id }}">{{ city.name }}</option>
                        {% endfor %}
                      </select>
                    </div>
                  </div>
                  <div class="col-6">
                    <div class="form-input ">
                      <label class="lh-1 text-16 text-light-1">Places</label>
                      <select class="form-control form-select bg_input js-example-basic-multiple" id="place" name="place" multiple required>
                        <!-- Options will be populated based on selected cities -->
                      </select>
                    </div>
                  </div>
                  <div class="col-6">
                    <div class="form-input ">
                      <label class="lh-1 text-16 text-light-1">Map link</label>
                      <input type="url" name="map_link" required>
                    </div>
                  </div>
                  <div class="col-6">
                    <div class="form-input ">
                      <label class="lh-1 text-16 text-light-1">Overview</label>
                      <textarea name="overview" required></textarea>
                    </div>
                  </div>
                  <div class="col-6">
                    <div class="form-input ">
                      <label class="lh-1 text-16 text-light-1">Hotels</label>
                      <select class="form-control form-select bg_input js-example-basic-multiple" id="hotel" name="hotels" multiple required>
                        <!-- Options will be populated based on selected cities -->
                      </select>
                    </div>
                  </div>
                  <div class="col-6">
                    <div class="form-input ">
                      <label class="form-control form-select bg_input" class="lh-1 text-16 text-light-1">Buses</label>
                      <select class="form-control form-select bg_input js-example-basic-multiple" name="buses" id="bus"   required>
                        {% for bus in buses %}
                        <option value="{{bus.id}}">{{bus.name}}</option>
                        {% endfor %}
                      </select>
                    </div>
                  </div>
                  <div class="col-6">
                    <div class="form-input">
                      <label class="lh-1 text-16 text-light-1">Start Date</label>
                      <input type="date" id="startDate" name="start_date" required>
                    </div>
                  </div>
                  <div class="col-6">
                    <div class="form-input">
                      <label class="lh-1 text-16 text-light-1">End Date</label>
                      <input type="date" id="endDate" name="end_date" required>
                    </div>
                  </div>
                  <div class="col-6">
                    <div class="form-input ">
                      <label class="lh-1 text-16 text-light-1">Total Price</label>
                      <input type="number" name="total_price" required>
                    </div>
                  </div>
                  <input type="hidden" name="rating" value=0>
                  <input type="hidden" name="no_of_day" id="no_of_day" value="">
                  <input type="hidden" id="itineraryJson" name="Itineraries" value="" required>
                  <div class="form-input">
                    <a class="button h-50 px-24 -dark-1 bg-blue-1 text-white" >Save Details</a>
                  </div>
                </div>
              </div>
            </div>
            <div class="tabs__pane -tab-item-2">
              <div class="col-xl-10">
                <div class="row x-gap-20 y-gap-20">
                  <div class="col-12">
                    <div class="form-input ">
                      <label class="lh-1 text-16 text-light-1">Tour Images</label>
                      <input class="form-control form-control-lg" name="tour_image" multiple type="file">
                    </div>
                  </div>
                  <input type="hidden" id="includedJson" name="includeds" value="" required>
                  <div id="inputContainer" class="form-input"></div>

                  <!-- here add the included section where multiple fields are added with an "Add included option" button and deleted with a "Delete" button -->
                  
                  <div id="includedContainer" class="form-input"></div>
                  <label class="button h-50 px-24 -dark-1 bg-blue-1 text-white" onclick="addIncludedField()">Add included option</label>
                <div class="d-inline-block pt-30">
                  <button class=" button h-50 px-24 -dark-1 bg-blue-1 text-white" onclick="saveIncludedFields()">
                    Save Changes
                  </button>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
    {% include "db_footer.html" %}
  </div>
</div>
<!-- jQuery library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- JavaScript for select2 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

<script>
  $(document).ready(function() {
    // Initialize select2 on city and place selects
    $('.js-example-basic-multiple').select2({
      width: '100%'
    });
    
    // Event handler for city selection change
    $('#city').on('change', function() {
      var selectedCities = $(this).val();
      var placeSelect = $('#place');
      var hotelSelect = $('#hotel');
      
      // Clear all options first
      placeSelect.empty();
      hotelSelect.empty();
      
      // Show default message if no city selected
      if (!selectedCities || selectedCities.length === 0) {
        placeSelect.append($('<option>').text('Select a City first'));
        hotelSelect.append($('<option>').text('Select a City first'));
        return;
      }
      
      // Loop through selected cities and add places
      selectedCities.forEach(cityId => {
        {% for place in places %}
        if ({{ place.city.id }} == cityId) {
          var option = new Option('{{ place.name }}, {{place.city.name}}', '{{ place.id }}', false, false);
          placeSelect.append(option).trigger('change');
        }
        {% endfor %}
        {% for hotel in hotels %}
        if ({{ hotel.city.id }} == cityId) {
          var option = new Option('{{ hotel.hotelname }}, {{hotel.city.name}}', '{{ hotel.id }}', false, false);
          hotelSelect.append(option).trigger('change');
        }
        {% endfor %}
      });
    });
    
    // Event handler for counting selected items
    $('.js-example-basic-multiple').on('change', function() {
      var selectedCount = $(this).val() ? $(this).val().length : 0;
      $('#selectedCount').text('Total Selected: ' + selectedCount);
    });
  });
</script>
{% endblock %}
{% block js %}
<!-- Genratinfg itinerary n number of input base date selection-->
<script>
document.addEventListener("DOMContentLoaded", function() {
  const startDateInput = document.getElementById('startDate');
  const endDateInput = document.getElementById('endDate');
  const inputContainer = document.getElementById('inputContainer');
  

  function createInputs() {
    const startDate = new Date(startDateInput.value);
    const endDate = new Date(endDateInput.value);
    const oneDayInMilliseconds = 24 * 60 * 60 * 1000;
    const diffDays = Math.round(Math.abs((endDate - startDate) / oneDayInMilliseconds));

    function no_of_day() {
      document.getElementById('no_of_day').value = diffDays + 1;
    }

    no_of_day();
    inputContainer.innerHTML = '';
    for (let i = 0; i < diffDays + 1; i++) {
      const input = document.createElement('input');
      input.type = 'text';
      input.name = `day_${i + 1}`;
      input.placeholder = `Day ${i + 1}`;
      input.required = true;
      inputContainer.appendChild(input);
    }
  }

  startDateInput.addEventListener('change', createInputs);
  endDateInput.addEventListener('change', createInputs);

  document.getElementById('new_tour_form').addEventListener('submit', function(event) {
    const inputs = inputContainer.querySelectorAll('input');
    const data = {};
    inputs.forEach(input => {
      data[input.name] = input.value;
    });
    document.getElementById('itineraryJson').value = JSON.stringify(data);
    jsdata = JSON.stringify(data);
    alert(jsdata)
    conole.log(jsdata)
  });

});
</script>
<script>
function addIncludedField() {
  const includedContainer = document.getElementById('includedContainer');

  const newField = document.createElement('div');
  newField.className = 'row x-gap-20 y-gap-20 included-field';

  const fieldName = document.createElement('input');
  fieldName.type = 'text';
  fieldName.className = 'form-control included-name';
  fieldName.placeholder = 'Field Name';
  fieldName.required = true;

  const deleteButton = document.createElement('button');
  deleteButton.type = 'button';
  deleteButton.className = 'btn btn-danger delete-button';
  deleteButton.innerHTML = ' 🔍 ';
  deleteButton.addEventListener('click', function() {
    includedContainer.removeChild(newField);
    updateIncludedJson();
  });

  newField.appendChild(fieldName);
  newField.appendChild(deleteButton);

  includedContainer.appendChild(newField);
  includedFields.push(newField);
  updateIncludedJson();
}

// Function to update the hidden input "includedJson" with the current included fields in JSON format
function updateIncludedJson() {
    const includedData = {};
    includedFields.forEach((field, index) => {
        const fieldName = field.querySelector('.included-name').value;
        includedData[index + 1] = fieldName;
    });

    document.getElementById('includedJson').value = JSON.stringify(includedData);
}

// Function to save included fields when "Save Changes" is clicked
function saveIncludedFields() {
    updateIncludedJson();
    const includedJson = document.getElementById('includedJson').value;
    alert(includedJson);
    console.log(includedJson);
}
</script>
<!-- Calender Validation -->
<script>
document.addEventListener('DOMContentLoaded', function() {
  const today = new Date().toISOString().split('T')[0]; // Get today's date in YYYY-MM-DD format
  // Set the min attribute for both startDate and endDate to today's date
  document.getElementById('startDate').setAttribute('min', today);
  document.getElementById('endDate').setAttribute('min', today);
});
</script>
{% endblock %}





























{% extends "base.html" %}
{% load static %}
{% block css %}
  <!-- CSS for select2 -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
  <style>
    .js-example-basic-multiple{
      height: 20px;
    }
    .select2-container {
      width: 300px;
      margin-bottom: 10px;
    }

    .select2-container--default .select2-selection--multiple {
      border: 1px solid #ced4da;
      border-radius: 4px; 
    }

    .select2-container--default .select2-selection--multiple .select2-selection__rendered {
      list-style: none;
      padding: 5px;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice {
      background-color: #007bff;
      color: #fff;
      border: 1px solid #ced4da;
      border-radius: 4px;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
      margin-right: 5px;
      color: #fff;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
      color: #fff;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus {
      color: #fff;
    }
    .included-field { 
      position: relative; 
      display: inline-block; 
    }
    .included-field input { 
      padding-right: 40px; 
    }
    .included-field button { 
      position: absolute; 
      top: 0; 
      right: 0; 
      border: none; 
      background-color: transparent; 
      cursor: pointer; 
    }
  </style>
{% endblock %}

{% block title %}Add Tour{% endblock %}

{% block dashboard %}
<div class="dashboard__main">
  <div class="dashboard__content">
    <div class="row y-gap-20 justify-between items-end pb-20 lg:pb-40 md:pb-32">
      <div class="col-auto">
        <h1 class="text-30 lh-14 fw-600">Add Tour</h1>
        <div class="text-15 text-light-1">Let's add a new tour to make Swan Tour bigger.</div>
      </div>
      <div class="col-auto"></div>
    </div>
    <div class="py-30 px-30 rounded-4 bg-white custom_shadow">
      <div class="tabs -underline-2 js-tabs">
        <div class="tabs__controls row x-gap-40 y-gap-10 lg:x-gap-20 js-tabs-controls">
          <div class="col-auto">
            <button class="tabs__button text-18 lg:text-16 text-light-1 fw-500 pb-5 lg:pb-0 js-tabs-button is-tab-el-active"
              data-tab-target=".-tab-item-1">Tour Information</button>
          </div>
          <div class="col-auto">
            <button class="tabs__button text-18 lg:text-16 text-light-1 fw-500 pb-5 lg:pb-0 js-tabs-button "
              data-tab-target=".-tab-item-2">Image</button>
          </div>
        </div>
        <div class="tabs__content pt-30 js-tabs-content">
          <form action="{% url 'new_tour' %}" id="new_tour_form" method="post" enctype="multipart/form-data">
            {% csrf_token %}
            <div class="tabs__pane -tab-item-1 is-tab-el-active">
              <div class="col-xl-10">
                <div class="border-top-light mt-30 mb-30"></div>
                <div class="row x-gap-20 y-gap-20">
                  <!-- ... other fields ... -->
                  <div class="col-6">
                    <div class="form-input">
                      <label for="name" class="lh-1 text-16 text-light-1">Name of the tour</label>
                      <input type="text" name="name" placeholder="Enter name" required>
                    </div>
                  </div>
                  <div class="col-6">
                    <div class="form-input ">
                      <label class="lh-1 text-16 text-light-1">Tour type</label>
                      <select class="form-control form-select bg_input" name="tour_type" required>
                        <option value="" disabled selected>Select tour type</option>
                        {% for tourtype in tourtypes %}
                        <option value="{{tourtype.id}}">{{tourtype.name}}</option>
                        {% endfor %}
                      </select>
                    </div>
                  </div>
                  <div class="col-6">
                    <div class="form-input ">
                      <label class="lh-1 text-16 text-light-1">Group size</label>
                      <input type="number" name="group_size" required>
                    </div>
                  </div>
                  <div class="col-6">
                    <div class="form-input" style="height: 59px">
                      <label class="lh-1 text-16 text-light-1">Cities</label>
                      <select class="js-example-basic-multiple" id="city" name="city" multiple required>
                        {% for city in cities %}
                        <option value="{{ city.id }}">{{ city.name }}</option>
                        {% endfor %}
                      </select>
                    </div>
                  </div>
                  <div class="col-6">
                    <div class="form-input ">
                      <label class="lh-1 text-16 text-light-1">Places</label>
                      <select class="form-control form-select bg_input js-example-basic-multiple" id="place" name="place" multiple required>
                        <!-- Options will be populated based on selected cities -->
                      </select>
                    </div>
                  </div>
                  <div class="col-6">
                    <div class="form-input ">
                      <label class="lh-1 text-16 text-light-1">Map link</label>
                      <input type="url" name="map_link" required>
                    </div>
                  </div>
                  <div class="col-6">
                    <div class="form-input ">
                      <label class="lh-1 text-16 text-light-1">Overview</label>
                      <textarea name="overview" required></textarea>
                    </div>
                  </div>
                  <div class="col-6">
                    <div class="form-input ">
                      <label class="lh-1 text-16 text-light-1">Hotels</label>
                      <select class="form-control form-select bg_input js-example-basic-multiple" id="hotel" name="hotels" multiple required>
                        <!-- Options will be populated based on selected cities -->
                      </select>
                    </div>
                  </div>
                  <div class="col-6">
                    <div class="form-input ">
                      <label class="form-control form-select bg_input" class="lh-1 text-16 text-light-1">Buses</label>
                      <select class="form-control form-select bg_input js-example-basic-multiple" name="buses" id="bus"   required>
                        {% for bus in buses %}
                        <option value="{{bus.id}}">{{bus.name}}</option>
                        {% endfor %}
                      </select>
                    </div>
                  </div>
                  <div class="col-6">
                    <div class="form-input">
                      <label class="lh-1 text-16 text-light-1">Start Date</label>
                      <input type="date" id="startDate" name="start_date" required>
                    </div>
                  </div>
                  <div class="col-6">
                    <div class="form-input">
                      <label class="lh-1 text-16 text-light-1">End Date</label>
                      <input type="date" id="endDate" name="end_date" required>
                    </div>
                  </div>
                  <div class="col-6">
                    <div class="form-input ">
                      <label class="lh-1 text-16 text-light-1">Total Price</label>
                      <input type="number" name="total_price" required>
                    </div>
                  </div>
                  <input type="hidden" name="rating" value=0>
                  <input type="hidden" name="no_of_day" id="no_of_day" value="">
                  <input type="hidden" id="itineraryJson" name="Itineraries" value="" required>
                  <div class="form-input">
                    <a class="button h-50 px-24 -dark-1 bg-blue-1 text-white" >Save Details</a>
                  </div>
                </div>
              </div>
            </div>
            <div class="tabs__pane -tab-item-2">
              <div class="col-xl-10">
                <div class="row x-gap-20 y-gap-20">
                  <div class="col-12">
                    <div class="form-input ">
                      <label class="lh-1 text-16 text-light-1">Tour Images</label>
                      <input class="form-control form-control-lg" name="tour_image" multiple type="file">
                    </div>
                  </div>
                  <input type="hidden" id="includedJson" name="includeds" value="" required>
                  <div id="inputContainer" class="form-input"></div>

                  <!-- here add the included section where multiple fields are added with an "Add included option" button and deleted with a "Delete" button -->
                  
                  <div id="includedContainer" class="form-input"></div>
                  <label class="button h-50 px-24 -dark-1 bg-blue-1 text-white" onclick="addIncludedField()">Add included option</label>
                <div class="d-inline-block pt-30">
                  <button class=" button h-50 px-24 -dark-1 bg-blue-1 text-white" onclick="saveIncludedFields()">
                    Save Changes
                  </button>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
    {% include "db_footer.html" %}
  </div>
</div>
<!-- jQuery library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- JavaScript for select2 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

<script>
  $(document).ready(function() {
    // Initialize select2 on city and place selects
    $('.js-example-basic-multiple').select2({
      width: '100%'
    });
    
    // Event handler for city selection change
    $('#city').on('change', function() {
      var selectedCities = $(this).val();
      var placeSelect = $('#place');
      var hotelSelect = $('#hotel');
      
      // Clear all options first
      placeSelect.empty();
      hotelSelect.empty();
      
      // Show default message if no city selected
      if (!selectedCities || selectedCities.length === 0) {
        placeSelect.append($('<option>').text('Select a City first'));
        hotelSelect.append($('<option>').text('Select a City first'));
        return;
      }
      
      // Loop through selected cities and add places
      selectedCities.forEach(cityId => {
        {% for place in places %}
        if ({{ place.city.id }} == cityId) {
          var option = new Option('{{ place.name }}, {{place.city.name}}', '{{ place.id }}', false, false);
          placeSelect.append(option).trigger('change');
        }
        {% endfor %}
        {% for hotel in hotels %}
        if ({{ hotel.city.id }} == cityId) {
          var option = new Option('{{ hotel.hotelname }}, {{hotel.city.name}}', '{{ hotel.id }}', false, false);
          hotelSelect.append(option).trigger('change');
        }
        {% endfor %}
      });
    });
    
    // Event handler for counting selected items
    $('.js-example-basic-multiple').on('change', function() {
      var selectedCount = $(this).val() ? $(this).val().length : 0;
      $('#selectedCount').text('Total Selected: ' + selectedCount);
    });
  });
</script>
{% endblock %}
{% block js %}
<!-- Genratinfg itinerary n number of input base date selection-->
<script>
document.addEventListener("DOMContentLoaded", function() {
  const startDateInput = document.getElementById('startDate');
  const endDateInput = document.getElementById('endDate');
  const inputContainer = document.getElementById('inputContainer');
  

  function createInputs() {
    const startDate = new Date(startDateInput.value);
    const endDate = new Date(endDateInput.value);
    const oneDayInMilliseconds = 24 * 60 * 60 * 1000;
    const diffDays = Math.round(Math.abs((endDate - startDate) / oneDayInMilliseconds));

    function no_of_day() {
      document.getElementById('no_of_day').value = diffDays + 1;
    }

    no_of_day();
    inputContainer.innerHTML = '';
    for (let i = 0; i < diffDays + 1; i++) {
      const input = document.createElement('input');
      input.type = 'text';
      input.name = `day_${i + 1}`;
      input.placeholder = `Day ${i + 1}`;
      input.required = true;
      inputContainer.appendChild(input);
    }
  }

  startDateInput.addEventListener('change', createInputs);
  endDateInput.addEventListener('change', createInputs);

  document.getElementById('new_tour_form').addEventListener('submit', function(event) {
    const inputs = inputContainer.querySelectorAll('input');
    const data = {};
    inputs.forEach(input => {
      data[input.name] = input.value;
    });
    document.getElementById('itineraryJson').value = JSON.stringify(data);
    jsdata = JSON.stringify(data);
    alert(jsdata)
    conole.log(jsdata)
  });

});
</script>
<script>
function addIncludedField() {
  const includedContainer = document.getElementById('includedContainer');

  const newField = document.createElement('div');
  newField.className = 'row x-gap-20 y-gap-20 included-field';

  const fieldName = document.createElement('input');
  fieldName.type = 'text';
  fieldName.className = 'form-control included-name';
  fieldName.placeholder = 'Field Name';
  fieldName.required = true;

  const deleteButton = document.createElement('button');
  deleteButton.type = 'button';
  deleteButton.className = 'btn btn-danger delete-button';
  deleteButton.innerHTML = ' 🔍 ';
  deleteButton.addEventListener('click', function() {
    includedContainer.removeChild(newField);
    updateIncludedJson();
  });

  newField.appendChild(fieldName);
  newField.appendChild(deleteButton);

  includedContainer.appendChild(newField);
  includedFields.push(newField);
  updateIncludedJson();
}

// Function to update the hidden input "includedJson" with the current included fields in JSON format
function updateIncludedJson() {
    const includedData = {};
    includedFields.forEach((field, index) => {
        const fieldName = field.querySelector('.included-name').value;
        includedData[index + 1] = fieldName;
    });

    document.getElementById('includedJson').value = JSON.stringify(includedData);
}

// Function to save included fields when "Save Changes" is clicked
function saveIncludedFields() {
    updateIncludedJson();
    const includedJson = document.getElementById('includedJson').value;
    alert(includedJson);
    console.log(includedJson);
}
</script>
<!-- Calender Validation -->
<script>
document.addEventListener('DOMContentLoaded', function() {
  const today = new Date().toISOString().split('T')[0]; // Get today's date in YYYY-MM-DD format
  // Set the min attribute for both startDate and endDate to today's date
  document.getElementById('startDate').setAttribute('min', today);
  document.getElementById('endDate').setAttribute('min', today);
});
</script>
{% endblock %}