{% extends 'castle_tours/base.html' %} 
{% load i18n %}
<!-- title block-->
{% block title %}Wochenzettel{% endblock title %}
<!-- Include Toastr.css (optional, for styling) -->

 <!-- Toastr CSS -->


<style>
   
   {% comment %} toastr messages  {% endcomment %}
   /* Add your custom styles for different message types here */
   .toast-success {
   background-color: #28a745; /* Bootstrap success color */
   }
   .toast-warning {
   background-color: #ffc107; /* Bootstrap warning color */
   }
   .toast-error {
   background-color: #dc3545; /* Bootstrap error color */
   }
   {% comment %} toastr messages ended  {% endcomment %}
   {% comment %} loader at upload {% endcomment %}
   .loader {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.5); /* Dim background */
   display: none; /* Hidden by default */
   justify-content: center;
   align-items: center;
   z-index: 9999; /* Ensure it's above all other content */
   }
   .spinner {
   border: 8px solid rgba(0, 0, 0, 0.1); /* Light gray border */
   border-left: 8px solid #3498db; /* Blue border for animation */
   border-radius: 50%;
   width: 60px;
   height: 60px;
   animation: spin 1s linear infinite;
   }
   @keyframes spin {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
   }
   {% comment %} loader at upload end {% endcomment %}
</style>
<!-- content block-->
{%block content %} {% load static %}
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet"/>
<!-- Layout wrapper -->
<div class="layout-wrapper layout-content-navbar">
   <div class="layout-container">
      <!-- Menu -->
      <aside id="layout-menu" class="layout-menu menu-vertical menu bg-menu-theme">
         <div class="app-brand demo">
            <a href="#" class="app-brand-link">
            <span class="app-brand-text demo menu-text fw-bold ms-2">Castle <span>Tours</span></span>
            </a>
            <a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large ms-auto">
            <i class="bx menu-toggle-icon d-none d-xl-block fs-4 align-middle"></i>
            <i class="bx bx-x d-block d-xl-none bx-sm align-middle"></i>
            </a>
         </div>
         <div class="menu-divider mt-0"></div>
         <div class="menu-inner-shadow"></div>
         <ul class="menu-inner py-1">
            <!-- Wochenzettel Menu Item -->
            <li class="menu-item {% if request.path == '/castle_tours_guides/wochenzettel' %}active{% endif %}">
               <a href="/castle_tours_guides/wochenzettel" class="menu-link">
                  <i class="menu-icon tf-icons bx bx-calendar-week"></i>
                  <div data-i18n="Wochenzettel">Wochenzettel</div>
               </a>
            </li>
            <!-- Wunschliste Menu Item -->
            <li class="menu-item {% if request.path == '/castle_tours_guides/wunschliste' %}active{% endif %}">
               <a href="/castle_tours_guides/wunschliste" class="menu-link">
                  <i class="menu-icon tf-icons bx bx-calendar-heart"></i>
                  <div data-i18n="Wunschliste">Wunschliste</div>
               </a>
            </li>
            <!-- Kästchenplan Menu Item -->
            <li class="menu-item {% if request.path == '/castle_tours_guides/kastchenplan' %}active{% endif %}">
               <a href="/castle_tours_guides/kastchenplan" class="menu-link">
                  <i class="menu-icon tf-icons bx bx-box"></i>
                  <div data-i18n="Kästchenplan">Kästchenplan</div>
               </a>
            </li>
            <!-- Masterliste Menu Item -->
            <li class="menu-item {% if request.path == '/castle_tours_guides/masterliste' %}active{% endif %}">
               <a href="/castle_tours_guides/masterliste" class="menu-link">
                  <i class="menu-icon tf-icons bx bx-check-shield"></i>
                  <div data-i18n="Masterliste">Masterliste</div>
               </a>
            </li>
            <!-- Tageszettel Menu Item -->
            <li class="menu-item {% if request.path == '/castle_tours_guides/tageszettel' %}active{% endif %}">
               <a href="/castle_tours_guides/tageszettel" class="menu-link">
                  <i class="menu-icon tf-icons bx bx-food-menu"></i>
                  <div data-i18n="Tageszettel">Tageszettel</div>
               </a>
            </li>
            <!-- Type of Tour Menu Item -->
            <li class="menu-item {% if request.path == '/castle_tours_guides/type-of-tour' %}active{% endif %}">
               <a href="/castle_tours_guides/type-of-tour" class="menu-link">
                  <i class="menu-icon tf-icons bx bx-terminal"></i>
                  <div data-i18n="Type of tour">Type of tour</div>
               </a>
            </li>
         </ul>
      </aside>
      <!-- / Menu -->
      <!-- Layout container -->
      <div class="layout-page">
         <!-- Navbar -->
         <nav class="layout-navbar navbar navbar-expand-xl align-items-center bg-navbar-theme" id="layout-navbar">
            <div class="container-fluid">
               <div class="layout-menu-toggle navbar-nav align-items-xl-center me-3 me-xl-0 d-xl-none">
                  <a class="nav-item nav-link px-0 me-xl-4" href="javascript:void(0)">
                  <i class="bx bx-menu bx-sm"></i>
                  </a>
               </div>
               <div class="navbar-nav-right d-flex align-items-center" id="navbar-collapse">
                  <!-- Search -->
                  <div class="navbar-nav align-items-center">
                     <div class="nav-item navbar-search-wrapper mb-0">
                        <a class="nav-item nav-link search-toggler px-0" href="javascript:void(0);">
                        <i class="bx bx-search-alt bx-sm"></i>
                        <span class="d-none d-md-inline-block text-muted">Search (Ctrl+/)</span>
                        </a>
                     </div>
                  </div>
                  <!-- /Search -->
                  <ul class="navbar-nav flex-row align-items-center ms-auto">
                     <!-- Style Switcher -->
                     <li class="nav-item me-2 me-xl-0">
                        <a class="nav-link style-switcher-toggle hide-arrow" href="javascript:void(0);">
                        <i class="bx bx-sm"></i>
                        </a>
                     </li>
                     <!--/ Style Switcher -->
                     <!-- User -->
                     <li class="nav-item navbar-dropdown dropdown-user dropdown">
                        <a class="nav-link dropdown-toggle hide-arrow" href="javascript:void(0);" data-bs-toggle="dropdown">
                           <div class="avatar avatar-online">
                              <img  src="{% static 'castle_tours/assets/img/avatars/1.png' %}" alt class="rounded-circle" />
                           </div>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end">
                           <li>
                              <a class="dropdown-item" href="pages-account-settings-account.html">
                                 <div class="d-flex">
                                    <div class="flex-shrink-0 me-3">
                                       <div class="avatar avatar-online">
                                          <img  src="{% static 'castle_tours/assets/img/avatars/1.png' %}" alt class="rounded-circle" />
                                       </div>
                                    </div>
                                    <div class="flex-grow-1">
                                       <span class="fw-semibold d-block lh-1">John Doe</span>
                                       <small>Admin</small>
                                    </div>
                                 </div>
                              </a>
                           </li>
                           <li>
                              <div class="dropdown-divider"></div>
                           </li>
                           <li>
                              <a class="dropdown-item" href="auth-login.html" target="_blank">
                              <i class="bx bx-power-off me-2"></i>
                              <span class="align-middle">Log Out</span>
                              </a>
                           </li>
                        </ul>
                     </li>
                     <!--/ User -->
                  </ul>
               </div>
               <!-- Search Small Screens -->
               <div class="navbar-search-wrapper search-input-wrapper d-none">
                  <input
                     type="text"
                     class="form-control search-input container-fluid border-0"
                     placeholder="Search..."
                     aria-label="Search..." />
                  <i class="bx bx-x bx-sm search-toggler cursor-pointer"></i>
               </div>
            </div>
         </nav>
         <!-- / Navbar -->
         <!-- Content wrapper -->
         <div class="content-wrapper">
            <!-- Content -->
            <div class="container-xxl flex-grow-1 container-p-y">
               <h4 class="py-3 breadcrumb-wrapper mb-4">
                  <span class="text-muted fw-light">Home /</span> Wochenzettel
               </h4>
               <div>
                  <div class="card mb-3">
                     <div class="row row-bordered g-0">
                        <div class="col-md-12">
                           <div class="text-center mb-3">
                              <div class="card-header">
                                 <form method="POST" action="{% url 'wochenzettel' %}" enctype="multipart/form-data">
                                    {% csrf_token %}
                                    <input type="hidden" name="selected_date" value="{{ selected_date }}"> <!-- Hidden input for the date -->
                                    <ul class="nav nav-tabs card-header-tabs radiobtn-tabs" role="tablist">
                                       <li class="nav-item">
                                          <button type="submit" class="nav-link {% if selected_monument_id == '1' %}active{% endif %}" role="tab" name="selected_monument_id" value="1">
                                          <i class='bx bx-radio-circle'></i>
                                          HD - Schloss Heidelberg
                                          </button>
                                       </li>
                                       <li class="nav-item">
                                          <button type="submit" class="nav-link {% if selected_monument_id == '2' %}active{% endif %}" role="tab" name="selected_monument_id" value="2">
                                          <i class='bx bx-radio-circle'></i>
                                          SW- Schloss Schwetzingen
                                          </button>
                                       </li>
                                       <li class="nav-item">
                                          <button type="submit" class="nav-link {% if selected_monument_id == '3' %}active{% endif %}" role="tab" name="selected_monument_id" value="3">
                                          <i class='bx bx-radio-circle'></i>
                                          MA - Schloss Mannheim
                                          </button>
                                       </li>
                                    </ul>
                                </form>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
                  <div class="card mt-3">
                     <div class="row g-0 pt-2">
                        <div class="col-md-8 pt-3">
                           <h5 class="card-header">Wochenzettel</h5>
                        </div>
                        <div class="col-md-4 p-4">
                           {% comment %} 
                           <form method="POST" action="{% url 'wochenzettel' %}" id="date-filter-form">
                              {% csrf_token %}
                              <input type="hidden" name="selected_monument_id" value="{{ selected_monument_id }}">
                              <!-- Hidden field to preserve selected date -->
                              <input type="hidden" name="selected_date" id="hidden_selected_date" value="{{ selected_date }}">
                              <div class="input-group">
                                 <input type="date" id="selected_date" name="selected_date" class="form-control" value="{{ selected_date }}" onchange="submitDateForm()">
                              </div>
                           </form>
                           {% endcomment %}
                           <form method="POST" action="{% url 'wochenzettel' %}" id="date-filter-form">
                              {% csrf_token %}
                              <input type="hidden" id="selectMonumentInput" name="selected_monument_id" value="{{ selected_monument_id }}">
                                       
                              <div class="input-group">
                                 <input type="date" id="selected_date" name="selected_date" class="form-control" value="{{ selected_date|date:'Y-m-d' }}" onchange="submitDateForm();">
                              </div>
                           </form>
                           {% comment %} 
                           <form method="POST" action="{% url 'wochenzettel' %}" id="date-filter-form">
                              {% csrf_token %}
                              <input type="hidden" name="selected_monument_id" value="{{ selected_monument_id }}">  <!-- Hidden field to preserve monument ID -->
                              <div class="input-group">
                                 <input type="date" id="selected_date" name="selected_date" class="form-control" value="{{ selected_date }}" onchange="document.getElementById('date-filter-form').submit();">
                              </div>
                           </form>
                           {% endcomment %}
                        </div>
                     </div>
                     <div class="tab-content">
                        <div class="tab-pane fade show active" id="hdmonumentwo" role="tabpanel">
                           <div class="card-datatable table-responsive wochenzettel-table">
                              <table id ="main-table" class="dt-multilingual main table table-bordered">
                                 <thead>
                                    <tr> 
                                       <th>Date</th>
                                       <th>Time</th>
                                       <th>Number</th>
                                       <th>Type of tour</th>
                                       <th>Customer</th>
                                       <th>Language</th>
                                       <th>Pre-assigned guide</th>
                                    </tr>
                                 </thead>
                                 <tbody>
                                    {% for guide in assigned_guides %}
                                    {% load custom_filters %}
                                    <tr>
                                        <td>
                                          <!-- Display the day name -->
                                          <div class="dd-time">{{ guide.event_day }}</div>
                                          <!-- Display the date -->
                                          <div class="dd-time">{{ guide.event_date|date  }}</div>
                                          
                                       </td>
                                       <td>
                                          <!-- Display the time -->
                                          <div class="dd-time">{{ guide.event_start_time|time }} Uhr - {{ guide.event_end_time|time }} Uhr</div>
                                       </td>
                                       <td>{{ guide.process_number|remove_quotes }}</td>
                                       <td>{{ guide.event_designation }} {{ guide.abbreviation }}</td>
                                       <td>{{ guide.client|remove_quotes }}</td>
                                       <td>{{ guide.event_language|remove_quotes }}</td>
                                       <td>
                                          {{ guide.employees_name|remove_quotes}}
                                       </td>
                                    </tr>
                                    {% endfor %} 
                                 </tbody>
                              </table>
                           </div>
                           <div class="tournew-upload mt-3">
                              <a href="#upload-weekly" class="btn btn-primary weekselect-show text-white fw-semibold text-decoration-none">Upload New</a>
                              <!-- File name display -->
                              <div id="uploaded-file-name-display" style="display:none; margin-top: 10px;">
                                 <strong>Uploaded file:</strong> <span id="file-name"></span>
                              </div>
                              <div id="uploadedFileInfo">
                                 {% if uploaded_file_path %}
                                 <!-- Hidden field for week (start date) -->
                                
                                     <p>Uploaded File: {{ uploaded_file_name }}</p>
                                     <a href="{{ uploaded_file_path }}" target="_blank">View File</a>
                                 {% else %}
                                     <p></p>
                                 {% endif %}
                             </div>
                              {% comment %} {% if uploaded_file_path %} 
                              <a href="{{ uploaded_file_path }}">
                              <i class="bx bx-show"></i>
                              </a>
                              {% endif %} {% endcomment %}
                              {% comment %} <a href="#" class="btn-download-ico" target="_blank"><i class="bx bx-show"></i></a>  {% endcomment %}
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
               <!-- Loader -->
               
                   <!-- Loader -->
                 {% comment %} <div id="loader" style="display: none;">
                    <img src="/path-to-your-loader.gif" alt="Loading..." />
                  </div> {% endcomment %}
               <div id="loader" class="loader" style="display:none;">
                  <div class="spinner"></div>
               </div>
               <div id="upload-weekly" class="upload-weekly" style="display:none;">
                  <hr class="my-5">
                  <div class="card">
                     <div id="hide-details-user" class="close-btn">
                        <i class="bx bx-x"></i>
                     </div>
                     {% comment %} 
                     <form method="POST" enctype="multipart/form-data">
                        {% csrf_token %}  
                        <input type="hidden" name="selected_monument_id" value="{{ selected_monument_id }}">  <!-- Hidden field to preserve monument ID -->
                        <div class="row g-0 p-3">
                           <div class="week-btns">
                              <div class="custom_uploader">
                                 <div class="button-week-1">
                                    <h5>Choose files</h5>
                                 </div>
                              </div>
                              <div class="week-oneuploads">
                                 <div class="button-week-1">
                                    <h5>Select Week</h5>
                                 </div>
                                 <div id="monthviewcontainer">
                                    <div id="groupBtn">
                                       <button class="btn btn-info btn-lg previousBtn"><i class="fas fa-caret-left"></i></button>
                                       <div id="monthDisplay"></div>
                                       <div id="calendar"></div>
                                       <button class="btn btn-info btn-lg nextBtn"><i class="fas fa-caret-right"></i></button>
                                    </div>
                                    <div id="weekdays"></div>
                                    <div id="calendar"></div>
                                 </div>
                                 <div id="weekviewcontainer" class="active">
                                    <div id="" class="tab-2calender">
                                       <button class="btn btn-info btn-lg wpreviousBtn"><i class="fas fa-caret-left"></i></button>
                                       <div id="weekDisplay">Sep 9 - 15, 2024</div>
                                       <button class="btn btn-info btn-lg wnextBtn"><i class="fas fa-caret-right"></i></button>
                                    </div>
                                 </div>
                              </div>
                              <!-- <div class="upload-btn">
                                 <div class="file-drop-area">
                                   <span class="choose-file-button">Choose files</span>
                                   <span class="file-message"> </span>
                                   <input class="file-input" type="file" accept="application/pdf,application/vnd.ms-excel">
                                 </div>
                                 <button type="submit" class="btn btn-primary">Save</button>
                                 </div> --> 
                           </div>
                           <div class="w-100 text-end">
                              <button type="submit" class="btn btn-primary">Save</button>
                           </div>
                        </div>
                        <!----/row---->
                     </form>
                     {% endcomment %}{% comment %} 
                     <form method="POST" enctype="multipart/form-data">
                        {% csrf_token %}
                        <input type="hidden" name="selected_monument_id" value="{{ selected_monument_id }}">
                        <div class="row g-0 p-3">
                           <div class="week-btns">
                              <!--Select Week-->
                              <div class="week-oneuploads">
                                 <div class="button-week-1">
                                    <h5>Select Week</h5>
                                 </div>
                                 <div id="monthviewcontainer">
                                    <div id="groupBtn">
                                       <button class="btn btn-info btn-lg previousBtn"><i class="fas fa-caret-left"></i></button>
                                       <div id="monthDisplay"></div>
                                       <div id="calendar"></div>
                                       <button class="btn btn-info btn-lg nextBtn"><i class="fas fa-caret-right"></i></button>
                                    </div>
                                    <div id="weekdays"></div>
                                    <div id="calendar"></div>
                                 </div>
                                 <div id="weekviewcontainer" class="active">
                                    <div id="" class="tab-2calender">
                                       <button class="btn btn-info btn-lg wpreviousBtn"><i class="fas fa-caret-left"></i></button>
                                       <div id="weekDisplay"></div>
                                       <button class="btn btn-info btn-lg wnextBtn"><i class="fas fa-caret-right"></i></button>
                                    </div>
                                 </div>
                              </div>
                              <!--end Select Week-->
                           </div>
                           <div class="w-100 text-end">
                              <button type="submit" class="btn btn-primary">Save</button>
                           </div>
                        </div>
                     </form>
                     {% endcomment %}
                     
                        
                       
                        <div class="row g-0 p-3">
                          
                           <div class="week-btns">
                              <!--Choose files ended -->
                              <!--Select Week-->
                              <div class="week-oneuploads">
                                 <div class="button-week-1">
                                    <h5>Select Week</h5>
                                 </div>
                                 <form method="POST" action="{% url 'wochenzettel' %}" id="week-filter-form" enctype="multipart/form-data">
                                    {% csrf_token %}
                                    <div class="select-month">
                                        {% comment %} <label for="monthPicker" class="form-label">Choose a month:</label> {% endcomment %}
                                        <input type="month" id="monthPicker" class="form-control" required>
                                    </div>
                                </form> 
                                 <div id="monthviewcontainer">
                                    <div id="groupBtn">
                                        <button class="btn btn-info btn-lg previousBtn"><i class="fas fa-caret-left"></i></button>
                                        <div id="monthDisplay"></div>
                                        <div id="calendar"></div>
                                        <button class="btn btn-info btn-lg nextBtn"><i class="fas fa-caret-right"></i></button>
                                    </div>
                                    <div id="weekdays"></div>
                                    <div id="calendar"></div>
                                </div>
                                    <div id="weekviewcontainer" class="active">
                                       <form method="POST" action="{% url 'wochenzettel' %}" id="week-filter-form" enctype="multipart/form-data">
                                          {% csrf_token %}
                                          <input type="hidden" name="selected_monument_id" id="filterSelectedMonumentInput" value="{{ selected_monument_id }}">
                                          <input type="hidden" name="weekDisplayInput" id="weekDisplayInput" value="{{ current_week_start }}">
                                          <input type="hidden" name="selected_date" value="{{ selected_date }}"> <!-- Hidden input for the date -->
                                          <div id="grouphead" class="tab-2calender">
                                              <button type="button" class="btn btn-info btn-lg wpreviousBtn" onclick="updateWeek(-1)">
                                                  <i class="fas fa-caret-left"></i>
                                              </button>
                                              
                                              <div id="weekDisplay">{{ selected_week }}</div>
                                        
                                              <button type="button" class="btn btn-info btn-lg wnextBtn" onclick="updateWeek(1)">
                                                  <i class="fas fa-caret-right"></i>
                                              </button>
                                          </div>
                                      </form>
                          
                                       </div>

                                       {% comment %} <form action="{% url 'wochenzettel' %}" method="POST" enctype="multipart/form-data" id="wochenzettel-upload-form">
                                          {% csrf_token %}
                                      
                                          <input type="hidden" name="selected_monument_id" value="{{ selected_monument_id }}">
                                          <div class="tournew-upload tageszettel-upload">
                                              
                                              <div class="input-group upload-file-btn upload-file-wochenzettel">
                                                  <label for="formFileLg" class="form-label"></label>
                                                  <input type="file" name="wochenzettel_pdf" class="form-control form-control-lg file-control" id="formFileLg" accept="application/pdf">
                                              </div>
                                              <div class="savefile-btn">
                                                  <button id="save-data-btn" type="submit" class="btn btn-primary">Save</button>
                                              </div>
                                          </div>
                                      
                                         
                                      </form> {% endcomment %}
                                      
<form action="{% url 'wochenzettel' %}" method="POST" enctype="multipart/form-data" id="wochenzettel-upload-form">
   {% csrf_token %}
   <input type="hidden" name="selected_monument_id" id="uploadSelectedMonumentInput" value="{{ selected_monument_id }}">
   <input type="hidden" name="weekDisplay" id="weekDisplayInput" value="{{ current_week_start }}">
   <input type="hidden" name="selected_date" id ="selectedDateInput" value="{{ selected_date }}"> <!-- Hidden input for the date -->
   <div class="tournew-upload tageszettel-upload">
       <div class="input-group upload-file-btn upload-file-wochenzettel">
           <label for="formFileLg" class="form-label"></label>
           <input type="file" name="wochenzettel_pdf" class="form-control form-control-lg file-control" id="formFileLg" accept="application/pdf">
       </div>
       
       <div class="savefile-btn">
           <button id="save-data-btn" type="button" class="btn btn-primary">Save</button>
       </div>
   </div>
</form>
{% comment %} 
                                       <form action="{% url 'wochenzettel' %}" method="POST" enctype="multipart/form-data">
                                          {% csrf_token %}         
                                          
                                             <input type="hidden" name="selected_monument_id" value="{{ selected_monument_id }}">
                                             <div class="tournew-upload tageszettel-upload">
                                               
                                                 <div class="input-group upload-file-btn upload-file-wochenzettel">
                                                   <label for="formFileLg" class="form-label"></label>
                                                     <input type="file" name="wochenzettel_pdf" class="form-control form-control-lg file-control" id="formFileLg" accept="application/pdf">
                                                 </div>
                                                 <div class="savefile-btn">
                                                 <button id="save-data-btn" type="submit" class="btn btn-primary">Save</button>
                                                </div> {% endcomment %}
                                                 {% comment %} <a href="../html/files/masterlist/masterlist-samplefile.xlsx" class="btn-download-ico" target="_blank"><i class="bx bx-show"></i></a> {% endcomment %}
                                                 {% comment %} <a href="#" class="btn-download-ico" target="_blank"><i class="bx bx-show"></i></a> {% endcomment %}
                                             {% comment %} </div>
                                         </form> {% endcomment %}
                                 </div>
                                 
                                 
                    
                        </div>
  
                  </div>
               </div>
               {% comment %} <form action="{% url 'wochenzettel' %}" method="POST" enctype="multipart/form-data"></form>
                          {% csrf_token %} {% endcomment %}
                     
              

      <!-- Footer -->
      <footer class="content-footer footer bg-footer-theme">
         <div class="container-fluid d-flex flex-wrap justify-content-between py-2 flex-md-row flex-column">
            <div class="mb-2 mb-md-0">
               ©
               <script>
                  document.write(new Date().getFullYear());
               </script>
               <!-- , made with ❤️ by
                  <a href="#" target="_blank" class="footer-link fw-semibold">N'Liven Technologies</a> -->
            </div>
         </div>
      </footer>
      <!-- / Footer -->
      <div class="content-backdrop fade"></div>
   </div>
   <!-- Content wrapper -->
</div>
<!-- / Layout page -->
</div>
<!-- Overlay -->
<div class="layout-overlay layout-menu-toggle"></div>
<!-- Drag Target Area To SlideIn Menu On Small Screens -->
<div class="drag-target"></div>
</div>
<!-- / Layout wrapper -->
{% endblock content %}
{% block js %}  
<!-- hide and show upload file window-->
<script>
   $(document).ready(function(){
         $(".close-btn").click(function(e){
           e.preventDefault();
            $(".upload-weekly").hide();
          });
       
     $(".weekselect-show").click(function(){
       $(".upload-weekly").show();
     });
   });

   document.getElementById('hide-details-user').addEventListener('click', function() {
     // Your save logic here (e.g., send data to a server)
   
     // Refresh the page
     location.reload();
   }); 
</script>
{% comment %} <script>
   document.getElementById('save-data-btn').addEventListener('click', function() {
     // Your save logic here (e.g., send data to a server)
   
     // Refresh the page
     //location.reload();
   }); 
</script> {% endcomment %}
<!--ended  hide and show upload file window-->
<!-- datepicker clean -->
{% comment %} <script>
   function clearDatePicker() {
       document.getElementById('selected_date').value = '';  // Clear the date picker input
   }
</script> {% endcomment %}
<!-- ended datepicker clean -->
<!--hide and show upload file window monument wise -->
{% comment %} 
<script>
   $(document).ready(function(){
       $(".close-btn-hdmonument").click(function(){
         $(".upload-weekly-hdmonument").hide();
       });
      $(".weekselect-show-hdmonument").click(function(){
        $(".upload-weekly-hdmonument").show();
      });
    });
</script> 
<script> 
   $(document).ready(function(){
       $(".close-btn-swmonument").click(function(){
         $(".upload-weekly-swmonument").hide();
       });
      $(".weekselect-show-swmonument").click(function(){
        $(".upload-weekly-swmonument").show();
      });
    });
</script>
<script> 
   $(document).ready(function(){
       $(".close-btn-mamonument").click(function(){
         $(".upload-weekly-mamonument").hide();
       });
      $(".weekselect-show-mamonument").click(function(){
        $(".upload-weekly-mamonument").show();
      });
    });
</script>
{% endcomment %}
<!-- ended hide and show upload file window monument wise -->
{% comment %} <script>
   $(document).on('change', '.file-input', function() {
       
   
       var filesCount = $(this)[0].files.length;
       
       var textbox = $(this).prev();
     
       if (filesCount === 1) {
         var fileName = $(this).val().split('\\').pop();
         textbox.text(fileName);
       } else {
         textbox.text(filesCount + ' files selected');
       }
     });
</script>  {% endcomment %}
<!-- JavaScript for Managing Active (menu tab) State -->
<script>
 // Store the selected monument ID in localStorage when clicking a button
document.querySelectorAll('button[name="selected_monument_id"]').forEach(button => {
   button.addEventListener('click', function () {
      button.classList.add('active'); 
     localStorage.setItem('activeTab', this.value);  // Save the selected monument ID on click
   });
 });
 
 {% comment %} // On page load, set the default active monument ID to "1" unless changed by a click
 document.addEventListener('DOMContentLoaded', function () {
   // Set the activeTab to "1" on every fresh load, ignoring previous selections
   let activeTab = "1";
   localStorage.setItem('activeTab', activeTab);

 }); {% endcomment %}
 
</script>
<!--menu active -->
<script>
   // Get the current URL path
   const currentPath = window.location.pathname;
   
   // Find the menu items
   const menuItems = document.querySelectorAll('.menu-item a');
   
   // Loop through each menu item
   menuItems.forEach(item => {
     // Check if the href matches the current path
     if (item.getAttribute('href') === currentPath) {
       // Add the active class to the parent li element
       item.closest('.menu-item').classList.add('active');
     }
   });
</script>
<!-- menu active end -->

<script {% static 'castle_tours/assets/vendor/libs/dropzone/dropzone.js' %}></script>
 <!-- Toastr JS -->


<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<!-- Page JS -->
<script {% static 'castle_tours/assets/js/forms-file-upload.js' %}></script>



<script>
   function submitDateForm() {
       // Check if the date input has a value
       const dateInput = document.getElementById('selected_date');
       if (dateInput.value) {
           document.getElementById('date-filter-form').submit();
       }
   }
   
   // Keep the date in the input unless explicitly cleared
   document.addEventListener("DOMContentLoaded", function() {
       const datePicker = document.getElementById("selected_date");
       
       // Check if the date picker is empty and set it to the current date if needed
       if (!datePicker.value) {
           const today = new Date();
           const formattedDate = today.toISOString().split('T')[0]; // Format as 'yyyy-mm-dd'
           datePicker.value = formattedDate;
       }
   });
   </script>

   
{% comment %} <script>
   document.getElementById('selected_date').addEventListener('change', function() {
     document.getElementById('date-filter-form').submit();
   });
   
   function submitDateForm() {
       document.getElementById('hidden_selected_date').value = document.getElementById('selected_date').value;
       document.getElementById('date-filter-form').submit();
   }
</script>
<script>
   document.addEventListener("DOMContentLoaded", function() {
       // Get the datepicker input
       var datePicker = document.getElementById("selected_date");
   
       // Check if the datepicker has a value (i.e., if a date is already selected)
       if (!datePicker.value) {
           // If no date is selected, set the current date as the default
           var today = new Date();
           var year = today.getFullYear();
           var month = String(today.getMonth() + 1).padStart(2, '0');  // Months are zero-based, so add 1
           var day = String(today.getDate()).padStart(2, '0');
           
           // Format the date as 'yyyy-mm-dd' for the date input
           var formattedDate = year + '-' + month + '-' + day;
   
           // Set the value of the datepicker to today's date
           datePicker.value = formattedDate;
       }
   });
</script> {% endcomment %}
<!--datepicked ended-->



<!--week select calendar-->


   <script>



      document.addEventListener('DOMContentLoaded', function() {
        // Get the current date
        const currentDate = new Date();
    
        // Get the current year and month
        const currentYear = currentDate.getFullYear();
        const currentMonth = ('0' + (currentDate.getMonth() + 1)).slice(-2);  // Ensures two-digit month
        
        // Set the value of the month input to the current month and year
        document.getElementById('monthPicker').value = `${currentYear}-${currentMonth}`;
    });
    </script> 
    <!-- current month and year ended--> 
       
<script>

  
$(document).ready(function() {    

   
   updateWeek(0);
   console.log('------DataTable-------')
   const wochenzettelTable = $('#main-table').DataTable({
       serverSide: true,
       ajax: {
           url: "{% url 'wochenzettel' %}",  // Adjust to your URL
           type: 'POST',
           dataSrc: function(json) {
            console.log('Grid data');
               console.log(json.table_data);
               return json.table_data;  // Update DataTable with the returned HTML
           }
       }
   });      
   $('#save-data-btn').on('click', function(e) {
      console.log('Save btn click');
      
       e.preventDefault();
       handleFormSubmission('wochenzettel-upload-form', wochenzettelTable);
   });

   $('#monthPicker').on('change', function() {
      const selectedMonth = $(this).val();  // Format: "YYYY-MM"
      if (selectedMonth) {
          updateWeekForMonth(selectedMonth);
      }
  });

  
   
});
  

   // Then initialize the DataTable
   //$('#main-table').DataTable({           
  //     serverSide: true,
   //    ajax: {
  //         url: "{% url 'wochenzettel' %}",
  //         dataFilter: function(data) {
//var json = jQuery.parseJSON(data);
  ///             json.recordsTotal = json.total;
  //             json.recordsFiltered = json.total;
  //             json.data = json.list;
//
  //             return JSON.stringify(json); // return JSON stringz
   //        }
  //     }
  // });


// Form submission handler
function handleFormSubmission(formId, wochenzettelTable) {
   const currentWeek = document.getElementById('weekDisplayInput').value;
   const selectedDateInput = document.getElementById('selectedDateInput').value;
   const selectedMonument = $('input[name="selected_monument_id"]:first').val();

   $(`form#${formId} input[name="weekDisplay"]`).val(currentWeek);
   $(`form#${formId} input[name="selected_monument_id"]`).val(selectedMonument);
   $(`form#${formId} input[name="selected_date"]`).val(selectedDateInput);

   let formData = new FormData($(`form#${formId}`)[0]);

   // Show loader
   $('#loader').css('display', 'flex');
   $('#save-data-btn').prop('disabled', true);

   $.ajax({
       url: $(`form#${formId}`).attr('action'),
       type: 'POST',
       data: formData,
       contentType: false,
       processData: false,
       success: function(response) {
           $('#loader').hide();
           $('#save-data-btn').prop('disabled', false);

           if (response.status === 'success') {
               toastr.success(response.message);
               $('#weekDisplay').text(response.selected_week);
               $('#selected_date').text(response.selected_date);

               $('#uploadedFileInfo').html(`
                   <p>Uploaded File: ${response.uploaded_file_name}</p>
                   <a href="${response.uploaded_file_path}" target="_blank">View File</a>
               `);
               $(".upload-weekly").hide();
               console.log('Data saved');
               
               wochenzettelTable.draw(); // Clear old data first


                // Reload the DataTable to fetch and display updated data
                //$('#main-table').DataTable().ajax.reload(null, false); // Reload DataTable only here
            } else {
                toastr.error(response.message);
                $(".upload-weekly").hide();
           }
       },
       error: function(xhr) {
           $('#loader').hide();
           $('#save-data-btn').prop('disabled', false);
           toastr.error('File not uploaded. Please try again.');  // Enhanced error message
           $(".upload-weekly").hide();
       },
       complete: function() {
           $('#loader').hide();
           $('#save-data-btn').prop('disabled', false);
       }
   });
}

  
  // Function to update week using POST request (on button click)
  function updateWeek(offset) {
      const currentWeekStart = document.getElementById("weekDisplayInput").value;
      const selectedDateInput = document.getElementById('selectedDateInput').value;
      const selectedMonument = $('input[name="selected_monument_id"]:first').val(); // Get the first occurrence
  
      let currentDate = new Date(currentWeekStart);
  
      // Ensure the week starts from Monday (0 is Monday, 6 is Sunday)
      let dayOfWeek = currentDate.getDay();
  
      if (dayOfWeek === 0) {
          currentDate.setDate(currentDate.getDate() + 1);
      } else if (dayOfWeek !== 1) {
          const distanceToMonday = (dayOfWeek === 0) ? 6 : dayOfWeek - 1;
          currentDate.setDate(currentDate.getDate() - distanceToMonday);
      }
  
      // Move to the next or previous week based on the offset
      const newStartDate = new Date(currentDate.setDate(currentDate.getDate() + (7 * offset)));
      const formattedDate = newStartDate.toISOString().split('T')[0];
  
      // Update both hidden inputs for weekDisplay in both forms
      document.getElementById("weekDisplayInput").value = formattedDate;
      $('form#wochenzettel-upload-form input[name="weekDisplayInput"]').val(formattedDate);
     $('form#wochenzettel-upload-form input[name="selected_date"]').val(selectedDateInput);
      $('form#wochenzettel-upload-form input[name="selected_monument_id"]').val(selectedMonument);
  
      // AJAX request to update the week display
      $.ajax({
          url: "{% url 'wochenzettel' %}",  // Ensure this is the correct URL
          type: "POST",
          data: {
        //    'selected_date':selectedDateInput
            'selected_monument_id':selectedMonument,
              'weekDisplay': formattedDate,
              'csrfmiddlewaretoken': '{{ csrf_token }}'
          },
          success: function(response) {
              $('#weekDisplay').text(response.selected_week);
            //  $('#selected_date').text(response.selected_date);
              $('tbody.main').html(response.table_data);
          },
          error: function(xhr, status, error) {
              console.error("AJAX Error: ", error);
          }
      });
      console.log('AJAX data:', {
         'selected_monument_id': selectedMonument,
         'weekDisplay': formattedDate,
         'csrfmiddlewaretoken': '{{ csrf_token }}'
     });
  }

  function updateWeekForMonth(selectedMonth) {
   // Parse the selected month to get the year and month
   const year = parseInt(selectedMonth.split('-')[0], 10);
   const month = parseInt(selectedMonth.split('-')[1], 10) - 1;  // JavaScript months are 0-based
 
   const firstDayOfMonth = new Date(year, month, 1);
   let firstMonday = firstDayOfMonth;
 
   // Find the first Monday of the month
   while (firstMonday.getDay() !== 1) {
       firstMonday.setDate(firstMonday.getDate() + 1);
   }
 
   // Format start of the week (first Monday)
   const startOfWeek = new Date(firstMonday);
   
   // Calculate the end of the week (Sunday) by adding 6 days
   const endOfWeek = new Date(startOfWeek);
   endOfWeek.setDate(startOfWeek.getDate() + 6);
 
   // Format the dates in the desired way, like "Mar 4 - Mar 10, 2024"
   const options = { month: 'short', day: 'numeric' };
   const formattedStartOfWeek = `${startOfWeek.toLocaleDateString('en-US', options)}`;
   const formattedEndOfWeek = `${endOfWeek.toLocaleDateString('en-US', options)} ${endOfWeek.getFullYear()}`;
 
   const displayRange = `${formattedStartOfWeek} - ${formattedEndOfWeek}`;
 
   // Update the input field and displayed text
   document.getElementById("weekDisplayInput").value = startOfWeek.toISOString().split('T')[0];
   $('#weekDisplay').text(displayRange);
 
   // Make an AJAX request to update the table data based on the selected week
   $.ajax({
       url: "{% url 'wochenzettel' %}",
       type: "POST",
       data: {
           'weekDisplay': startOfWeek.toISOString().split('T')[0],
           'csrfmiddlewaretoken': '{{ csrf_token }}'
       },
       success: function(response) {
           $('#weekDisplay').text(displayRange);  // Display the correct week range
           $('tbody.main').html(response.table_data);  // Update the table body with new data
       },
       error: function(xhr, status, error) {
           console.error("AJAX Error: ", error);
       }
   });
 }

   </script>


{% if messages %}
    {% comment %} <script>
        $(document).ready(function() {
            toastr.options.timeOut = 5000; // 5 seconds timeout
            toastr.options.positionClass = 'toast-top-right'; // Position the toast on the top right
            
            {% for message in messages %}
                {% if message.tags == 'success' %}
                    toastr.success("{{ message }}");
                {% elif message.tags == 'error' %}
                    toastr.error("{{ message }}");
                {% endif %}
            {% endfor %}
        });
    </script> {% endcomment %}
{% endif %}
{% endblock js %}