{% extends 'super_admin_templates/base.html' %}
{% block content %}

<style type="text/css">
  
    .pagination-page-info {
      padding: .6em;
      padding-left: 0;
      width: 40em;
      margin: .5em;
      margin-left: 0;
      font-size: 12px;
  }
  .pagination-page-info b {
      color: black;
      background: #6aa6ed;
      padding-left: 2px;
      padding: .1em .25em;
      font-size: 150%;
  }
  
      select option:first-child {
          color: #999; /* grey for placeholders */
      }
  
      select:invalid {
          color: #999; /* force placeholder to stay grey on load */
      }
  
      select:valid {
          color: #000; /* normal black once a real value is chosen */
      }
  
      select option {
          color: #000; /* fallback color for all other options */
      }
      .centered {
        text-align: center;
    }
  
  </style>

<script>
    // Confirm delete with redirection
    

    // Toggle image input and external link
    function toggleInputs(index) {
    if (index) {
        // For edit banner modal
        const editIsBannerCheckbox = document.getElementById('editIsBanner');
        const editImageContainer = document.getElementById('editImageContainer');
        const editExternalLinkContainer = document.getElementById('editExternalLinkContainer');
        const editGoogleScriptContainer = document.getElementById('editGoogleScriptContainer');

        if (editIsBannerCheckbox.checked) {
            editImageContainer.style.display = 'block';
            editExternalLinkContainer.style.display = 'block';
            editGoogleScriptContainer.style.display = 'none';
        } else {
            editImageContainer.style.display = 'none';
            editExternalLinkContainer.style.display = 'none';
            editGoogleScriptContainer.style.display = 'block';
        }
    } else {
        // For create banner modal
        const isBannerCheckbox = document.getElementById('isBanner');
        const imageContainer = document.getElementById('imageContainer');
        const externalLinkContainer = document.getElementById('externalLinkContainer');
        const googleScriptContainer = document.getElementById('googleScriptContainer');

        if (isBannerCheckbox.checked) {
            imageContainer.style.display = 'block';
            externalLinkContainer.style.display = 'block';
            googleScriptContainer.style.display = 'none';
        } else {
            imageContainer.style.display = 'none';
            externalLinkContainer.style.display = 'none';
            googleScriptContainer.style.display = 'block';
        }
    }
}

</script>

<!-- Start::app-content -->
<div class="main-content app-content">
    <div class="container-fluid">
        <!-- Page Header -->
        <div class="d-md-flex d-block align-items-center justify-content-between my-4 page-header-breadcrumb">
            <h1 class="page-title fw-semibold fs-18 mb-0">Banners</h1>
            <div class="ms-md-1 ms-0">
                <nav>
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="{{ url_for('admin.dashboard') }}">Home</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Banners</li>
                    </ol>
                </nav>
            </div>
        </div>
        <!-- Page Header Close -->

        <!-- Start::row-1 -->
        <div class="row">
            <div class="col-xl-12">
                <div class="card custom-card">
                    <div class="card-header justify-content-between">
                        <div class="card-title">Banners List</div>
                        <div class="prism-toggle">
                            {% if 'add' in session.get('bannersPermissions', []) %}
                            <button type="button" class="btn btn-primary-light rounded-pill btn-wave me-3" data-bs-toggle="modal" data-bs-target="#addtask"
                            onClick="resetFormData1('bannerForm')">
                                <i class="ri-add-circle-line fs-16 align-middle me-1"></i>Create Banner
                            </button>
                            {% endif %}
                        </div>
                    </div>
                    <div class="card-body">
                        <center>
                            {% if error %}
                            <h2><b><center style="color:RED">{{ error }}</center></b></h2>
                            {% endif %}
                        </center>

                        <div class="row">
                            <div class="col-xl-12">
                                <form method="GET" action="{{ url_for('admin_banners.admin_banners_list')}}" class="row gy-2 gx-3 align-items-center mb-4">
                                    
                                    <div class="col-auto">
                                        <input type="text" class="form-control" value="{{search_element}}" name="search_element" id="autoSizingInput"
                                        minlength="3" maxlength="10" pattern="^[a-zA-Z0-9]+$"
                                        title="Search element must contain alphanumeric only" placeholder="Search...">
                                    </div>
                                    <div class="col-auto">
                                        <button type="submit" class="btn btn-primary">Search</button>
                                    </div>
                                    <div class="col-auto">
                                        <a href="{{url_for('admin_banners.admin_banners_list')}}"><button type="button"
                                            class="btn btn-warning">Reset</button></a> </div>
                                    <span class="text-danger" class="error" id="searchError" style="display: none;"></span>
                          
                                     {% for error in form.search_element.errors %}
                                        <span class="text-danger" class="error">{{ error }}</span>
                                    {% endfor %} 
                                </form>
                            </div>
                        </div>

                        <div class="mt-3"></div>
                        <div class="table-responsive">
                            <table id="datatable-basic" class="table text-nowrap">
                                <thead class="table-primary">
                                    <tr>
                                        <th scope="col">S.No</th>
                                        <th scope="col">Name</th>
                                        <th scope="col">Sorting</th>
                                        <th scope="col">Banner Image</th>
                                        <th scope="col">External Link</th>
                                        <th scope="col">Google Scripts</th>
                                        <th scope="col">Grievance</th>
                                        {% if 'edit' in session.get('bannersPermissions', []) %}
                                            <th scope="col">Status</th>
                                        {% endif %}
                                        {% if 'edit' in session.get('bannersPermissions', []) %}
                                            <th scope="col">Actions</th>
                                        {% elif 'delete' in session.get('bannersPermissions', []) %}
                                            <th scope="col">Actions</th>
                                        {% endif %}
                                    </tr>
                                </thead>
                                <tbody>
                                      {% if bannersList %}
                                    {% for each_banner in bannersList %}
                                    <tr>
                                        <td scope="row">{{snoCount + loop.index }}</td>

                                        {% if each_banner.name %}
                                        <td>{{ each_banner.name }}</td>
                                        {% else %}
                                        <td class="centered">-</td>
                                        {% endif %}
                                        
                                        <td>{{ each_banner.sorting }}</td>
                                        <td>
                                            {% if each_banner.image %}
                                            <div>
                                                <img src="{{ domain+each_banner.image }}" alt="Payment Mode Image" class="img-fluid" style="max-width: 100px; max-height: 100px;">
                                            </div>
                                            {% else %}
                                            <div>
                                                <img src="{{ url_for('static', filename='dummy_profile.png') }}" alt="Dummy Image" class="img-fluid rounded-circle" style="max-width: 45px; max-height: 45px;">
                                            </div>
                                            {% endif %}
                                        </td>

                                        {% if each_banner.externalLink %}
                                        <td>{{ each_banner.externalLink }}</td>
                                        {% else %}
                                        <td>-</td>
                                        {% endif %}
                                        

                                        {% if each_banner.googleScript %}
                                        <td>{{ each_banner.googleScript }}</td>
                                        {% else %}
                                        <td>-</td>
                                        {% endif %}
                                        
                                        <td>{{ each_banner.isGrievance }}</td>

                                        {% if 'edit' in session.get('bannersPermissions', []) %}
                                        <td>
                                            {% if each_banner.status == 1 %}
                                                <a class="btn btn-sm btn-success"  href="{{ url_for('admin_banners.admin_banner_status', bannerId=each_banner.id,page=page,search_element=search_element) }}"  data-requires-location>Active</a>
                                            {% else %}
                                                <a class="btn btn-sm btn-warning" href="{{ url_for('admin_banners.admin_banner_status', bannerId=each_banner.id,page=page,search_element=search_element) }}"  data-requires-location>Deactive</a>
                                            {% endif %}
                                        </td>
                                         {% endif %}
                                        <td>
                                            {% if 'edit' in session.get('bannersPermissions', []) %}
                                            <a href="javascript:void(0);" onclick='openUpdateModal ({
                                                "id": "{{ each_banner.id }}",
                                                "name": "{{ each_banner.name}}",
                                                "sorting": {{ each_banner.sorting | tojson }},
                                                "isBanner": {{ each_banner.isBanner | tojson }},
                                                "image": {{ each_banner.image | tojson }},
                                                "externalLink": {{ each_banner.externalLink | tojson }},
                                                "googleScript": {{ each_banner.googleScript | tojson }},
                                                "isGrievance": {{ each_banner.isGrievance | tojson }},
                                               

                                            })' class="btn btn-icon btn-sm btn-info-transparent rounded-pill">
                                                <i class="ri-edit-line"></i>
                                            </a>
                                            {% endif %}
                                            {% if 'delete' in session.get('bannersPermissions', []) %}
                                            <a href="javascript:void(0);" onclick="confirmDelete('{{ url_for('admin_banners.admin_delete_banner', bannerId=each_banner.id) }}')"><span class="btn btn-icon btn-sm btn-danger-transparent rounded-pill"><i class="ri-delete-bin-line"></i></span></a>
                                                </a>
                                            {% endif %}
                                        </td>
                                    </tr>
                                    {% endfor %}
                                    {% else %}
                                    <tr ><td colspan="12" style="text-align: center;">No Data Found</td> </tr>
                                    {% endif %}
                                </tbody>
                                {% with messages = get_flashed_messages() %}
                                {% if messages %}
                                <ul class="flashes">
                                    {% for message in messages %}
                                    <h2>
                                        <b>
                                            <center style="color:green">{{ message }}</center>
                                        </b>
                                    </h2>
                                    {% endfor %}
                                </ul>
                                {% endif %}
                                {% endwith %}
                            </table>
                          
                            <div class="col-sm-12 col-md-12 mt-3">
                                <nav aria-label="Page navigation" class="pagination-style-1">
                                    <ul class="pagination mb-0">
                                        {% if pagination %}
                                        <div class="pagination">
                                            {{ pagination.links }}
                                        </div>
                                        {% endif %}
                                    </ul>
                                </nav>

                        </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--End::row-1 -->
    </div>
</div>
<!-- End::app-content -->

<!-- Create New Banner Modal -->
<div class="modal fade" id="addtask" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered md-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="mail-ComposeLabel">Create New Banner</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="bannerForm" method="POST" action="{{ url_for('admin_banners.add_admin_banner') }}" enctype="multipart/form-data" name = "bannerForm">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                 <input type="hidden" id="latitude_add" name="latitude">
                        <input type="hidden" id="longitude_add" name="longitude">
                <div class="modal-body">

                    <div class="form-group">
                        <label for="name">Banner Name*</label>
                        <input type="text" class="form-control" id="name" name="name" minlength="3" maxlength="75" pattern="^[a-zA-Z0-9\s@#$()+_\-/.]*$" title="Name must contain only alphanumeric characters, spaces, and specific special characters: @#$()+_-/"  placeholder="Enter banner name" required>
                        <span id="name_error" class="error"></span>
                    </div>

                    <div class="form-group">
                        <label for="sorting">Sorting Order</label>
                        <input type="number" class="form-control" id="sorting" name="sorting"   min="0" placeholder="Enter sorting value"> 
                        <span id="sorting_error" class="error"></span>
                    </div>


                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="isBanner" name="isBanner" checked onchange="toggleInputs()">
                        <label class="form-check-label" for="isBanner">Is Banner</label>
                        <span id="isBanner_error" class="error"></span>
                    </div>

 
                    <div class="form-group" id="imageContainer">
                        <label for="image">Banner Image*</label>
                        <input type="file" class="form-control" id="image" name="image" >
                        <span id="image_error" class="error"></span>
                    </div>

                  
                   
                    <!-- External Link Container -->
                    <div class="form-group" id="externalLinkContainer">
                        <label for="externalLink">External Link</label>
                        <input type="text" class="form-control" id="externalLink" name="externalLink" minlength="1" maxlength="150"  title="Enter valid url" placeholder="Enter external link">
                        <span id="externalLink_error" class="error"></span>
                    </div>

                    <!-- Google Scripts -->
                    <div class="form-group" id="googleScriptContainer">
                        <label for="googleScript">Google Scripts</label>
                        <textarea class="form-control" id="googleScript" name="googleScript" rows="3" minlength="1" maxlength="150"
                        pattern="^[a-zA-Z0-9\s@#$()+_\-/.]*$"
                        title="Only alphanumeric and allowed special characters: @#$()+_-/" 
                        placeholder="Enter google scripts"></textarea>
                        <span id="googleScript_error" class="error"></span>
                    </div>

                   <!-- Is Banner Checkbox -->
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="isGrievance" name="isGrievance">
                        <label class="form-check-label" for="isGrievance">Is Grievance</label>
                        <span id="isGrievance_error" class="error"></span>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary form_submit">Create Banner</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Update Banner Modal -->
<!-- Update Banner Modal -->
<div class="modal fade" id="updateTask" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered md-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h6 class="modal-title" id="mail-ComposeLabel">Update Banner</h6>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
  
        <form id="editBannerForm" method="POST" action="" enctype="multipart/form-data">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
           <input type="hidden" id="latitude_update" name="latitude">
            <input type="hidden" id="longitude_update" name="longitude">
  
          <div class="modal-body">
  
            <!-- Banner Name -->
            <div class="form-group">
              <label for="editName">Banner Name*</label>
              <input type="text" class="form-control" id="editName" name="name" minlength="3" maxlength="75"
                pattern="^[a-zA-Z0-9\s@#$()+_\-/.]*$"
                title="Name must contain only alphanumeric characters, spaces, and specific special characters: @#$()+_-/" 
                required>
              <span id="name_edit_error" class="error"></span>
            </div>
  
            <!-- Sorting Order -->
            <div class="form-group">
              <label for="editSorting">Sorting Order</label>
              <input type="number" class="form-control" id="editSorting" name="sorting" min="0">
              <span id="sorting_edit_error" class="error"></span>
            </div>
  
            <!-- Is Banner Checkbox -->
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="editIsBanner" name="isBanner" onchange="toggleInputs(true)">
              <label class="form-check-label" for="editIsBanner">Is Banner</label>
              <span id="isBanner_edit_error" class="error"></span>
            </div>
  
            <!-- Banner Image Container -->
            <div class="form-group" id="editImageContainer">
              <label for="editImage">Banner Image</label><br>
              <input type="file" class="form-control" id="editImage" name="image">
              <br>
              <img id="imagePreview" src="" alt="Current Image" height="150" width="150" style="display: none;">
              <span id="image_edit_error" class="error"></span>
            </div>
  
            <!-- External Link Container -->
            <div class="form-group" id="editExternalLinkContainer">
              <label for="editExternalLink">External Link</label>
              <input type="text" class="form-control" id="editExternalLink" name="externalLink" minlength="1" maxlength="150"
                title="Enter valid url" placeholder="Enter external link">
              <span id="externalLink_edit_error" class="error"></span>
            </div>
  
            <!-- Google Script Container -->
            <div class="form-group" id="editGoogleScriptContainer">
              <label for="editGoogleScript">Google Scripts</label>
              <textarea class="form-control" id="editGoogleScript" name="googleScript" rows="3" minlength="1" maxlength="150"
                pattern="^[a-zA-Z0-9\s@#$()+_\-/.]*$"
                title="Only alphanumeric and allowed special characters: @#$()+_-/" 
                placeholder="Enter google scripts"></textarea>
              <span id="googleScript_edit_error" class="error"></span>
            </div>
  
            <!-- Is Grievance Checkbox -->
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="editIsGrievance" name="isGrievance">
              <label class="form-check-label" for="editIsGrievance">Is Grievance</label>
              <span id="isGrievance_edit_error" class="error"></span>
            </div>
  
          </div>
  
          <div class="modal-footer">
            <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary form_submit">Update Banner</button>
          </div>
        </form>
  
      </div>
    </div>
  </div>
  


<script type="text/javascript">
    
    $(document).ready(function () {
    $('#bannerForm').validate({
        rules: {
            name: {
                required: true,
                minlength: 3,
                maxlength: 75,
            },
            sorting: {
                required: true,
                minlength: 1,
                maxlength: 6,
            },
            isBanner: {
                required: false,
            },
            image: {
                extension: "png|jpg|jpeg",
            },
            externalLink: {
                required: false,
                minlength: 1,
                maxlength: 150,
                pattern: /^[a-zA-Z0-9\s:!#$%&'*+/=?^_`{|}~-]+$/,
            },
            googleScript: {
                required: false,
                minlength: 1,
                maxlength: 150,
            },
            isGrievance: {
                required: false,
            },
        },
        messages: {
            name: {
                required: 'Name is required.',
                minlength: 'Name must be at least 3 characters.',
                maxlength: 'Name must not exceed 75 characters.',
            },
            sorting: {
                required: 'Sorting is required.',
                minlength: 'Sorting must be at least 1 digit.',
                maxlength: 'Sorting must not exceed 6 digits.',
            },
            externalLink: {
                minlength: 'External link must be at least 1 character.',
                maxlength: 'External link must not exceed 150 characters.',
                pattern: 'External link can only contain alphanumeric characters and special characters like : !#$%&\'*+/=?^_`{|}~-.',
            },
            googleScript: {
                minlength: 'Google script must be at least 1 character.',
                maxlength: 'Google script must not exceed 150 characters.',
            },
        },
        submitHandler: function(form, event) {
            $('.form_submit').prop('disabled', true);
				$('#newLoadingModel').show();
            event.preventDefault();  // Prevent the default form submission
            getLocationAndProceed(
              function (lat, lng) {
                 
                  $(form).find('input[name="latitude"]').val(lat);
                  $(form).find('input[name="longitude"]').val(lng);

                    let formData = new FormData(form);

                    $.ajax({
                        url: form.action,
                        type: form.method,
                        data: formData,
                        processData: false,
                        contentType: false,
                        xhrFields: {
                                        withCredentials: true   // THIS ensures cookies/session are sent
                                    },
                        success: function(response) {
                            if (response.responseStatus == 1 || response.responseStatus == 4) {
                                form.reset();  // Reset the form
                                location.reload();
                            } else if (response.responseStatus == 0) {
                                $('.form_submit').prop('disabled', false);
        				$('#newLoadingModel').hide();
                                $.each(response.result, function(key, value) {
                                    $('#' + key + "_error").text(value);
                                });
                                return false;
                            } else if (response.responseStatus == 2) {
                                $('.form_submit').prop('disabled', false);
        				$('#newLoadingModel').hide();
                                $('#errorMessage').text(response.result);
                                return false;
                            } else {
                                location.reload();
                            }
                        },
                        error: function(xhr, status, error) {
                            console.log("Error uploading image: " + error);
                            $('#errorMessage').text("Error uploading image.");
                        }
                    });
                },
                 function () {
                        $('.form_submit').prop('disabled', false);
                        $('#newLoadingModel').hide();
                            alert("Location access is required to proceed. Please enable it in your browser.");
                    }
                );
            }
        });

    $('#editBannerForm').validate({
        rules: {
            name: {
                required: true,
                minlength: 3,
                maxlength: 75,
            },
            sorting: {
                required: true,
                minlength: 1,
                maxlength: 6,
            },
            isBanner: {
                required: false,
            },
            image: {
                required: false,
                extension: "png|jpg|jpeg"
            },
            externalLink: {
                required: false,
                minlength: 1,
                maxlength: 150,
                pattern: /^[a-zA-Z0-9\s:!#$%&'*+/=?^_`{|}~-]+$/,
            },
            googleScript: {
                required: false,
                minlength: 1,
                maxlength: 150,
            },
            isGrievance: {
                required: false,
            },
        },
        messages: {
            name: {
                required: 'Name is required.',
                minlength: 'Name must be at least 3 characters.',
                maxlength: 'Name must not exceed 75 characters.',
            },
            sorting: {
                required: 'Sorting is required.',
                minlength: 'Sorting must be at least 1 digit.',
                maxlength: 'Sorting must not exceed 6 digits.',
            },
            externalLink: {
                minlength: 'External link must be at least 1 character.',
                maxlength: 'External link must not exceed 150 characters.',
                pattern: 'External link can only contain alphanumeric characters and special characters like : !#$%&\'*+/=?^_`{|}~-.',
            },
            googleScript: {
                minlength: 'Google script must be at least 1 character.',
                maxlength: 'Google script must not exceed 150 characters.',
            },
        },
        submitHandler: function (form, event) {
        $('.form_submit').prop('disabled', true);
                $('#newLoadingModel').show();
        event.preventDefault();
        getLocationAndProceed(
            function (lat, lng) {
                $(form).find('input[name="latitude"]').val(lat);
                $(form).find('input[name="longitude"]').val(lng);
                let formData = new FormData(form);
                $.ajax({
                  url: form.action,
                  type: form.method,
                  data: formData,
                  processData: false,  // Don't process the data as a query string
                  contentType: false,  // Let jQuery set the content-type for multipart/form-data
                  xhrFields: {
                            withCredentials: true   // THIS ensures cookies/session are sent
                        },
                  success: function (response) {
                    if (response.responseStatus == 1 || response.responseStatus == 4) {
                      form.reset();
                      location.reload();
                    } else if (response.responseStatus == 0) {
                      $('.form_submit').prop('disabled', false);
                              $('#newLoadingModel').hide();
                      $.each(response.result, function (key, value) {
                        $('#' + key + "_edit_error").text(value)
                      });
                      return false;
                    } else if (response.responseStatus == 2) {
                      $('.form_submit').prop('disabled', false);
                              $('#newLoadingModel').hide();
                      $('#EditErrorMessage').text(response.result);
                      return false;
                    } else {
                      location.reload();
                    }

                  },
                  error: function (xhr) {
                        // You can also reload page after error (e.g. CSRF token mismatch)
                        location.reload();
                    }
                });
              },
              function () {
                    $('.form_submit').prop('disabled', false);
                    $('#newLoadingModel').hide();
                            alert("Location access is required to proceed. Please enable it in your browser.");
                    }
                );
            }
          });
        });
</script>

<script>

    function openUpdateModal(each_banner) {
        const updateUrlTemplate = "{{url_for('admin_banners.admin_edit_banner',bannerId= '__ID__')}}";
        const formAction = updateUrlTemplate.replace('__ID__', each_banner.id);
        resetFormDataNew('editBannerForm');
        document.getElementById('editBannerForm').action = formAction;
        console.log(each_banner);

         document.getElementById('editName').value = each_banner.name || '';

        document.getElementById('editSorting').value = each_banner.sorting || '';
        document.getElementById('editIsBanner').value = each_banner.isBanner || '';
        document.getElementById('editIsBanner').checked = each_banner.isBanner ? true : false;
        document.getElementById('editIsGrievance').checked = each_banner.isGrievance ? true : false;

        document.getElementById('editGoogleScript').value = each_banner.googleScript || '';


        const imagePreview = document.getElementById('imagePreview');

        if (each_banner.image) {
            // If it's already a full URL, use it directly. If not, prefix with `/`
            if (each_banner.image.startsWith('http') || each_banner.image.startsWith('/static')) {
            imagePreview.src = each_banner.image;
            } else {
            imagePreview.src = '/' + each_banner.image.replace(/^\/+/, '');
            }
            imagePreview.style.display = 'block';
        } else {
            imagePreview.src = '';
            imagePreview.style.display = 'none';
        }
  



 
        const modal = new bootstrap.Modal(document.getElementById('updateTask'));
        modal.show();
    }
</script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const updateBankModal = document.getElementById('updateTask');
        if (updateBankModal) {
            updateBankModal.addEventListener('hidden.bs.modal', function () {
                resetFormData1('updateTask');
            });
        }
    });
</script>
<script>


    function resetFormData1(formid) {
    const form = document.getElementById(formid); // Get the form element

    if (!form) return;

    form.reset(); // Reset standard input fields

    // Remove all jQuery Validation plugin error labels
    form.querySelectorAll('label.error').forEach(el => el.remove());

    // Clear all custom error spans
    form.querySelectorAll('span.error').forEach(el => el.innerText = '');

    // Update any chosen dropdowns if present
    $(form).find('.chosen-select').trigger('chosen:updated');
}

</script>
<script>
    // Update image preview immediately when selecting a new image
    document.addEventListener('DOMContentLoaded', function () {
        const editImageInput = document.getElementById('editImage');
        const imagePreview = document.getElementById('imagePreview');
    
        if (editImageInput) {
            editImageInput.addEventListener('change', function (event) {
                const file = event.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function (e) {
                        imagePreview.src = e.target.result;
                        imagePreview.style.display = 'block';
                    };
                    reader.readAsDataURL(file);
                } else {
                    imagePreview.src = '';
                    imagePreview.style.display = 'none';
                }
            });
        }
    });
    </script>
    





{% endblock %}