{% extends "layouts/base.html" %}

{% load static %} 

{% block title %} New Playlist {% endblock %}

{% block extra_css %}
<style>
   .select2-container--default .select2-results__option[aria-selected=true] {
       display: none;
   }
   .ui-datepicker td.ui-state-disabled > span {
       background: #b5b5b5 !important;
   }
   .ui-datepicker td.ui-state-disabled {
       opacity: 50 !important;
   }
   
   /* Modern loading spinner */
   .loading-spinner {
       display: inline-block;
       width: 20px;
       height: 20px;
       border: 3px solid #f3f3f3;
       border-top: 3px solid #3498db;
       border-radius: 50%;
       animation: spin 1s linear infinite;
   }
   
   @keyframes spin {
       0% { transform: rotate(0deg); }
       100% { transform: rotate(360deg); }
   }
   
   .btn-loading {
       position: relative;
       pointer-events: none;
   }
   
   .btn-loading::after {
       content: '';
       position: absolute;
       width: 16px;
       height: 16px;
       margin: auto;
       border: 2px solid transparent;
       border-top-color: #ffffff;
       border-radius: 50%;
       animation: spin 1s linear infinite;
       top: 0;
       left: 0;
       bottom: 0;
       right: 0;
   }

   /* Disabled button styles */
   .btn.disabled, .btn:disabled {
       opacity: 0.5 !important;
       cursor: not-allowed !important;
       pointer-events: none !important;
   }

   /* Custom SweetAlert2 positioning */
   .swal2-container.swal2-bottom-end {
       position: fixed !important;
       bottom: 20px !important;
       right: 20px !important;
       left: auto !important;
       top: auto !important;
       transform: none !important;
       z-index: 9999 !important;
   }

   /* Updated validation styles - border only for inputs */
   .time-input-error {
      border-color: #dc3545 !important;
      box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
   }

   .time-input-warning {
      border-color: #ffc107 !important;
      box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25) !important;
   }

   .time-input-success {
      border-color: #28a745 !important;
      box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
   }

   .validation-error {
      color: #dc3545;
   }

   .validation-warning {
      color: #856404;
   }

   .validation-success {
      color: #155724;
   }

   /* Keep card header styles as they are for visual feedback */
   .card-header-error {
      background-color: #f8d7da !important;
      border-color: #f5c6cb !important;
      color: #721c24 !important;
   }

   .card-header-warning {
      background-color: #fff3cd !important;
      border-color: #ffeaa7 !important;
      color: #856404 !important;
   }

   .shake-animation {
      animation: shake 0.5s ease-in-out;
   }

   @keyframes shake {
      0%, 100% { transform: translateX(0); }
      25% { transform: translateX(-5px); }
      75% { transform: translateX(5px); }
   }
</style>
{% endblock extra_css %}  

{% block breadcrumb %}
<div class="page-header">
    <h1 class="page-title">Create New Playlist</h1>
    <div>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="javascript:void(0);">Playlists</a></li>
            <li class="breadcrumb-item active" aria-current="page">New</li>
        </ol>
    </div>
</div>
{% endblock %}

{% block content %} 
<div class="row">
   <div class="col-12 col-sm-12">
      <form action="{% url 'playlists:new_playlist' %}" method="post" id="indexForm" 
            data-regions-url="{% url 'channels:ajax_load_regions' %}" 
            data-adspots-url="{% url 'campaigns:ajax_load_adspots' %}"
            data-region-dates-url="{% url 'channels:load_region_dates' %}">
         {% csrf_token %}
         <input class="form-control" id="numofwins" name="numofwin" type="hidden" value="0">
         
         <div class="card">
            <div class="card-header">
               <h3 class="card-title">Select [ Zone - Channel - Day ]</h3>
            </div>
            <div class="card-body row">
               <div class="form-group col-md-4">
                  <label class="form-label">Channel <span class="text-danger">*</span></label>
                  <select class="form-control select2-show-search form-select" 
                          id="channels" name="channel_id" 
                          data-placeholder="Choose one" required>
                     <option value="">Choose one</option>
                     {% for channel in channels %}
                     <option value="{{channel.id_channel}}">{{channel.channel_name}}</option>
                     {% endfor %}
                  </select>
                  <div class="invalid-feedback">
                     Please select a channel.
                  </div>
               </div>
               <div class="form-group col-md-4">
                  <label class="form-label">Region <span class="text-danger">*</span></label>
                  <select class="form-control select2-show-search form-select" 
                          id="regions" name="zonename" 
                          data-placeholder="Choose one" required>
                     <option value="">Select channel first</option>
                  </select>
                  <div class="invalid-feedback">
                     Please select a region.
                  </div>
               </div>
               <div class="form-group col-md-4">
                  <label class="form-label">Day <span class="text-danger">*</span></label>
                  <div class="input-group">
                     <input class="form-control" name="day" id="datepicker123" 
                            placeholder="MM/DD/YYYY" type="text" 
                            autocomplete="off" required readonly>
                     <span class="input-group-text">
                        <i class="fa fa-calendar"></i>
                     </span>
                  </div>
                  <div class="invalid-feedback">
                     Please select a date.
                  </div>
               </div>
            </div>
         </div>
         
         <div id="fieldList">
            <!-- Dynamic windows will be added here -->
         </div>
         
         <div class="mt-3">
            <div class="d-flex justify-content-between align-items-center">
               <button class="btn btn-primary" type="button" id="addMore" disabled>
                  <i class="fe fe-plus"></i> Add Window
               </button>
               <div class="btn-group">
                  <button class="btn btn-info me-2" type="submit" value="draft" name="draft_btn" disabled>
                     <i class="fe fe-save"></i> Save as Draft
                  </button>
                  <button class="btn btn-success" type="submit" value="apply" name="apply_btn" disabled>
                     <i class="fe fe-check"></i> Submit Playlist
                  </button>
               </div>
            </div>
            <div class="mt-2">
               <small class="text-muted">
                  <i class="fe fe-info"></i> 
                  Please select Channel, Region, and Date before adding windows or submitting.
               </small>
            </div>
         </div>
      </form> 
   </div> 
</div>
 
{% endblock content %}

{% block modals %}
<!-- Confirmation Modal -->
<div class="modal fade" id="confirmationModal" tabindex="-1" role="dialog" aria-labelledby="confirmationModalLabel" aria-hidden="true">
   <div class="modal-dialog" role="document">
      <div class="modal-content">
         <div class="modal-header">
            <h5 class="modal-title" id="confirmationModalLabel">Confirm Action</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
         </div>
         <div class="modal-body" id="confirmationModalBody">
            Are you sure you want to proceed?
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
            <button type="button" class="btn btn-primary" id="confirmationModalConfirm">Confirm</button>
         </div>
      </div>
   </div>
</div>
{% endblock modals %}

{% block extra_js %}  
<script type="text/javascript">
   'use strict';

   // Application state
   const PlaylistApp = {
      windowCounter: 0,
      availsInWindow: [],
      adsInAvail: [],
      form: null,
      validationErrors: new Map(),
      
      // Initialize the application
      init() {
         this.form = document.getElementById('indexForm');
         this.bindEvents();
         this.initializeSelect2();
         this.updateButtonStates(); 
      },
 
      // Enhanced time validation
      validateTimeInput(inputElement, minTime = null, maxTime = null, context = {}) {
         const value = inputElement.value;
         const inputId = inputElement.id;
         
         // Clear previous validation state
         this.clearValidationState(inputElement);
         
         if (!value) {
            this.setValidationState(inputElement, 'error', 'Time is required');
            return false;
         }
         
         // Validate time format (HTML5 time input handles this, but keep for compatibility)
         const timeRegex = /^([01]?[0-9]|2[0-3]):[0-5][0-9]$/;
         if (!timeRegex.test(value)) {
            this.setValidationState(inputElement, 'error', 'Invalid time format (HH:MM)');
            return false;
         }
         
         // Convert time to minutes for comparison
         const timeInMinutes = this.timeToMinutes(value);
         const minTimeInMinutes = minTime ? this.timeToMinutes(minTime) : null;
         const maxTimeInMinutes = maxTime ? this.timeToMinutes(maxTime) : null;
         
         // Validate against min time
         if (minTimeInMinutes !== null && timeInMinutes <= minTimeInMinutes) {
            const message = `Time must be after ${minTime}${context.minContext ? ` (${context.minContext})` : ''}`;
            this.setValidationState(inputElement, 'error', message);
            return false;
         }
         
         // Validate against max time
         if (maxTimeInMinutes !== null && timeInMinutes >= maxTimeInMinutes) {
            const message = `Time must be before ${maxTime}${context.maxContext ? ` (${context.maxContext})` : ''}`;
            this.setValidationState(inputElement, 'error', message);
            return false;
         }
         
         // Additional validation for window times
         if (inputId.includes('winstart_') || inputId.includes('winend_')) {
            const windowIndex = this.extractWindowIndex(inputId);
            const isValid = this.validateWindowTimes(windowIndex);
            if (!isValid) return false;
         }
         
         // Additional validation for avail times
         if (inputId.includes('availstart_')) {
            const { windowIndex, availIndex } = this.extractAvailIndices(inputId);
            const isValid = this.validateAvailTime(windowIndex, availIndex);
            if (!isValid) return false;
         }
         
         // Check for overlapping times
         if (this.checkTimeOverlaps(inputElement)) {
            return false;
         }
         
         // Success state
         this.setValidationState(inputElement, 'success', 'Valid time');
         return true;
      },
      
      // Set validation state for input
      setValidationState(inputElement, type, message) {
         const inputGroup = inputElement.closest('.input-group') || inputElement.parentElement;
         const existingMessage = inputGroup.querySelector('.validation-message');
         
         // Remove existing validation classes
         inputElement.classList.remove('time-input-error', 'time-input-warning', 'time-input-success');
         
         // Add new validation class
         inputElement.classList.add(`time-input-${type}`);
         
         // Remove existing message
         if (existingMessage) {
            existingMessage.remove();
         }
         
         // Add new message 
         
         // Store validation error
         if (type === 'error') {
            this.validationErrors.set(inputElement.id, message);
            this.shakeElement(inputElement);
            this.showError(message);
            this.updateCardHeaderState(inputElement, 'error');
         } else if (type === 'warning') {
            this.showWarning(message);
            this.updateCardHeaderState(inputElement, 'warning');
         } else {
            this.validationErrors.delete(inputElement.id);
            this.updateCardHeaderState(inputElement, 'success');
         }
         
         this.updateButtonStates();
      },
      
      // Clear validation state
      clearValidationState(inputElement) {
         inputElement.classList.remove('time-input-error', 'time-input-warning', 'time-input-success');
         const inputGroup = inputElement.closest('.input-group') || inputElement.parentElement;
         const existingMessage = inputGroup.querySelector('.validation-message');
         if (existingMessage) {
            existingMessage.remove();
         }
         this.validationErrors.delete(inputElement.id);
      },
      
      // Update card header state based on validation
      updateCardHeaderState(inputElement, state) {
         const card = inputElement.closest('.card');
         if (!card) return;
         
         const cardHeader = card.querySelector('.card-header');
         if (!cardHeader) return;
         
         // Remove existing state classes
         cardHeader.classList.remove('card-header-error', 'card-header-warning');
         
         // Add new state class
         if (state === 'error') {
            cardHeader.classList.add('card-header-error');
         } else if (state === 'warning') {
            cardHeader.classList.add('card-header-warning');
         }
      },
      
      // Shake animation for invalid inputs
      shakeElement(element) {
         element.classList.add('shake-animation');
         setTimeout(() => {
            element.classList.remove('shake-animation');
         }, 500);
      },
      
      // Convert time string to minutes
      timeToMinutes(timeStr) {
         const [hours, minutes] = timeStr.split(':').map(Number);
         return hours * 60 + minutes;
      },
      
      // Extract window index from input ID
      extractWindowIndex(inputId) {
         const match = inputId.match(/(\d+)/);
         return match ? parseInt(match[1]) : -1;
      },
      
      // Extract window and avail indices from input ID
      extractAvailIndices(inputId) {
         const matches = inputId.match(/(\d+)/g);
         return {
            windowIndex: matches ? parseInt(matches[0]) : -1,
            availIndex: matches && matches[1] ? parseInt(matches[1]) : -1
         };
      },
      
      // Validate window times
      validateWindowTimes(windowIndex) {
         const startInput = document.getElementById(`winstart_${windowIndex}`);
         const endInput = document.getElementById(`winend_${windowIndex}`);
         
         if (!startInput || !endInput) return true;
         
         const startValue = startInput.value;
         const endValue = endInput.value;
         
         if (!startValue || !endValue) return true;
         
         const startMinutes = this.timeToMinutes(startValue);
         const endMinutes = this.timeToMinutes(endValue);
         
         // Check if end time is after start time
         if (endMinutes <= startMinutes) {
            this.setValidationState(endInput, 'error', 'Window end time must be after start time');
            return false;
         }
         
         // Check minimum window duration (e.g., 3 minutes)
         const minDurationMinutes = 3;
         if (endMinutes - startMinutes < minDurationMinutes) {
            this.setValidationState(endInput, 'warning', `Window should be at least ${minDurationMinutes} minutes long`);
         }
         
         return true;
      },
      
      // Validate avail time
      validateAvailTime(windowIndex, availIndex) {
         const availInput = document.getElementById(`availstart_${windowIndex}_${availIndex}`);
         const windowStartInput = document.getElementById(`winstart_${windowIndex}`);
         const windowEndInput = document.getElementById(`winend_${windowIndex}`);
         
         if (!availInput || !windowStartInput || !windowEndInput) return true;
         
         const availTime = availInput.value;
         const windowStart = windowStartInput.value;
         const windowEnd = windowEndInput.value;
         
         if (!availTime || !windowStart || !windowEnd) return true;
         
         const availMinutes = this.timeToMinutes(availTime);
         const windowStartMinutes = this.timeToMinutes(windowStart);
         const windowEndMinutes = this.timeToMinutes(windowEnd);
         
         // Check if avail time is within window bounds
         if (availMinutes < windowStartMinutes || availMinutes > windowEndMinutes) {
            this.setValidationState(availInput, 'error', 
               `Adbreak time must be between ${windowStart} and ${windowEnd}`);
            return false;
         }
         
         return true;
      },
      
      // Check for overlapping times
      checkTimeOverlaps(inputElement) {
         const inputId = inputElement.id;
         
         // Check window overlaps
         if (inputId.includes('winstart_') || inputId.includes('winend_')) {
            return this.checkWindowOverlaps(inputElement);
         }
         
         // Check avail overlaps within the same window
         if (inputId.includes('availstart_')) {
            return this.checkAvailOverlaps(inputElement);
         }
         
         return false;
      },
      
      // Check window time overlaps
      checkWindowOverlaps(inputElement) {
         const windowIndex = this.extractWindowIndex(inputElement.id);
         const currentStartInput = document.getElementById(`winstart_${windowIndex}`);
         const currentEndInput = document.getElementById(`winend_${windowIndex}`);
         
         if (!currentStartInput?.value || !currentEndInput?.value) return false;
         
         const currentStart = this.timeToMinutes(currentStartInput.value);
         const currentEnd = this.timeToMinutes(currentEndInput.value);
         
         // Check against other windows
         for (let i = 0; i < this.windowCounter; i++) {
            if (i === windowIndex) continue;
            
            const otherStartInput = document.getElementById(`winstart_${i}`);
            const otherEndInput = document.getElementById(`winend_${i}`);
            
            if (!otherStartInput?.value || !otherEndInput?.value) continue;
            
            const otherStart = this.timeToMinutes(otherStartInput.value);
            const otherEnd = this.timeToMinutes(otherEndInput.value);
            
            // Check for overlap
            if (currentStart < otherEnd && currentEnd > otherStart) {
               this.setValidationState(inputElement, 'error', 
                  `Window overlaps with Window ${i + 1} (${otherStartInput.value} - ${otherEndInput.value})`);
               return true;
            }
         }
         
         return false;
      },
      
      // Check avail time overlaps within the same window
      checkAvailOverlaps(inputElement) {
         const { windowIndex, availIndex } = this.extractAvailIndices(inputElement.id);
         const currentAvailInput = document.getElementById(`availstart_${windowIndex}_${availIndex}`);
         
         if (!currentAvailInput?.value) return false;
         
         const currentTime = this.timeToMinutes(currentAvailInput.value);
         
         // Check against other avails in the same window
         const availInputs = document.querySelectorAll(`[id^="availstart_${windowIndex}_"]`);
 
         return false;
      },
      
      // Check if all required fields are selected and valid
      areRequiredFieldsSelected() {
         const channelId = document.getElementById('channels').value;
         const regionId = document.getElementById('regions').value;
         const selectedDate = document.getElementById('datepicker123').value;
         
         // Check basic required fields
         const basicFieldsValid = channelId && regionId && selectedDate;
         
         // Check for validation errors
         const hasValidationErrors = this.validationErrors.size > 0;
         
         return basicFieldsValid && !hasValidationErrors;
      },
      
      // Update button states based on form validation
      updateButtonStates() {
         const addMoreBtn = document.getElementById('addMore');
         const draftBtn = document.querySelector('button[name="draft_btn"]');
         const submitBtn = document.querySelector('button[name="apply_btn"]');
         
         const isValid = this.areRequiredFieldsSelected();
         const hasErrors = this.validationErrors.size > 0;
         
         // Update Add Window button
         if (addMoreBtn) {
            addMoreBtn.disabled = !isValid;
            if (!isValid) {
               addMoreBtn.classList.add('disabled');
               if (hasErrors) {
                  addMoreBtn.title = 'Please fix validation errors first';
               } else {
                  addMoreBtn.title = 'Please select Channel, Region, and Date first';
               }
            } else {
               addMoreBtn.classList.remove('disabled');
               addMoreBtn.title = '';
            }
         }
         
         // Update form submission buttons
         const updateSubmitButton = (btn) => {
            if (btn) {
               btn.disabled = !isValid;
               if (!isValid) {
                  btn.classList.add('disabled');
                  if (hasErrors) {
                     btn.title = 'Please fix validation errors first';
                  } else {
                     btn.title = 'Please select Channel, Region, and Date first';
                  }
               } else {
                  btn.classList.remove('disabled');
                  btn.title = '';
               }
            }
         };
         
         updateSubmitButton(draftBtn);
         updateSubmitButton(submitBtn);
      },
      
      // Enhanced handle date selection change
      handleDateChange() {
         this.updateButtonStates();
         const selectedDate = document.getElementById('datepicker123').value;
         if (selectedDate) {
            this.showSuccess(`Date selected: ${selectedDate}`);
         }
      },
      
      // Bind all event listeners
      bindEvents() {
         // Channel selection
         const channelsSelect = document.getElementById('channels');
         if (channelsSelect) {
            channelsSelect.addEventListener('change', this.handleChannelChange.bind(this));
         }
         
         // Region selection
         const regionsSelect = document.getElementById('regions');
         if (regionsSelect) {
            regionsSelect.addEventListener('change', this.handleRegionChange.bind(this));
         }
         
         // Add window button
         const addMoreBtn = document.getElementById('addMore');
         if (addMoreBtn) {
            addMoreBtn.addEventListener('click', this.addWindow.bind(this));
         }
         
         // Date picker change
         const datePicker = document.getElementById('datepicker123');
         if (datePicker) {
            datePicker.addEventListener('change', this.handleDateChange.bind(this));
         }
         
         // Form submission
         if (this.form) {
            this.form.addEventListener('submit', this.handleFormSubmit.bind(this));
         }
      },
      
      // Initialize Select2 dropdowns
      initializeSelect2() {
         if (typeof $.fn.select2 !== 'undefined') {
            $('.select2-show-search').select2({
               placeholder: function() {
                  return this.dataset.placeholder || 'Choose one';
               },
               allowClear: true,
               width: '100%'
            });
         }
      },
      
      // SweetAlert2 notification methods
      showSuccess(message) {
         if (typeof Swal !== 'undefined') {
            Swal.fire({
               toast: true,
               position: 'bottom-end',
               icon: 'success',
               title: message,
               showConfirmButton: false,
               timer: 5000,
               timerProgressBar: true,
               customClass: {
                  container: 'swal2-bottom-end'
               },
               didOpen: (toast) => {
                  toast.addEventListener('mouseenter', Swal.stopTimer);
                  toast.addEventListener('mouseleave', Swal.resumeTimer);
               }
            });
         } else {
            console.log('Success:', message);
         }
      },
      
      showError(message) {
         if (typeof Swal !== 'undefined') {
            Swal.fire({
               toast: true,
               position: 'bottom-end',
               icon: 'error',
               title: message,
               showConfirmButton: false,
               timer: 5000,
               timerProgressBar: true,
               customClass: {
                  container: 'swal2-bottom-end'
               },
               didOpen: (toast) => {
                  toast.addEventListener('mouseenter', Swal.stopTimer);
                  toast.addEventListener('mouseleave', Swal.resumeTimer);
               }
            });
         } else {
            console.error('Error:', message);
         }
      },
      
      showWarning(message) {
         if (typeof Swal !== 'undefined') {
            Swal.fire({
               toast: true,
               position: 'bottom-end',
               icon: 'warning',
               title: message,
               showConfirmButton: false,
               timer: 5000,
               timerProgressBar: true,
               customClass: {
                  container: 'swal2-bottom-end'
               },
               didOpen: (toast) => {
                  toast.addEventListener('mouseenter', Swal.stopTimer);
                  toast.addEventListener('mouseleave', Swal.resumeTimer);
               }
            });
         } else {
            console.warn('Warning:', message);
         }
      },
      
      showInfo(message) {
         if (typeof Swal !== 'undefined') {
            Swal.fire({
               toast: true,
               position: 'bottom-end',
               icon: 'info',
               title: message,
               showConfirmButton: false,
               timer: 5000,
               timerProgressBar: true,
               customClass: {
                  container: 'swal2-bottom-end'
               },
               didOpen: (toast) => {
                  toast.addEventListener('mouseenter', Swal.stopTimer);
                  toast.addEventListener('mouseleave', Swal.resumeTimer);
               }
            });
         } else {
            console.info('Info:', message);
         }
      },
      
      // Confirmation dialog
      async showConfirm(title, text) {
         if (typeof Swal !== 'undefined') {
            const result = await Swal.fire({
               title: title,
               text: text,
               icon: 'warning',
               showCancelButton: true,
               confirmButtonColor: '#3085d6',
               cancelButtonColor: '#d33',
               confirmButtonText: 'Yes, delete it!',
               cancelButtonText: 'Cancel'
            });
            return result.isConfirmed;
         } else {
            return confirm(`${title}\n${text}`);
         }
      },
      
      // Handle channel selection change
      async handleChannelChange(event) {
         const channelId = event.target.value;
         const regionsSelect = document.getElementById('regions');
         
         if (!channelId) {
            regionsSelect.innerHTML = '<option value="">Select channel first</option>';
            this.resetDatePicker();
            this.updateButtonStates();
            return;
         }
         
         try {
            // Show loading state
            regionsSelect.innerHTML = '<option value="">Loading regions...</option>';
            this.showInfo('Loading regions...');
            
            // Load regions
            const regionsData = await this.fetchData('regionsUrl', { channel: channelId });
            regionsSelect.innerHTML = regionsData;
            
            // Reinitialize Select2 for regions
            if (typeof $.fn.select2 !== 'undefined') {
               $('#regions').select2('destroy').select2({
                  placeholder: 'Choose region',
                  allowClear: true,
                  width: '100%'
               });
            }
            
            // Load adspots for existing windows
            await this.updateAdspotOptions(channelId);
            this.showSuccess('Regions loaded successfully!');
            
            // Update button states
            this.updateButtonStates();
            
         } catch (error) {
            console.error('Error loading regions:', error);
            regionsSelect.innerHTML = '<option value="">Error loading regions</option>';
            this.showError('Failed to load regions. Please try again.');
         }
      },
      
      // Handle region selection change
      async handleRegionChange(event) {
         const regionId = event.target.value;
         const channelId = document.getElementById('channels').value;
         
         if (!regionId || !channelId) {
            this.resetDatePicker();
            return;
         }
         
         try {
            this.showInfo('Loading available dates...');
            const dateData = await this.fetchData('regionDatesUrl', {
               channel: channelId,
               region: regionId
            });
            
            this.initializeDatePicker(dateData.dates || []);
            this.showSuccess('Available dates loaded successfully!');
            
            // Update button states
            this.updateButtonStates();
            
         } catch (error) {
            console.error('Error loading region dates:', error);
            this.showError('Failed to load available dates. Please try again.');
         }
      },
      
      // Fixed fetchData method to handle data attributes correctly
      async fetchData(urlDataAttribute, params = {}) {
         // Convert data attribute name to camelCase properly
         let camelCaseAttr;
         
         if (urlDataAttribute.startsWith('data-')) {
            // Remove 'data-' prefix and convert to camelCase
            camelCaseAttr = urlDataAttribute.substring(5).replace(/-([a-z])/g, (g) => g[1].toUpperCase());
         } else {
            // Assume it's already processed or is a direct camelCase attribute
            camelCaseAttr = urlDataAttribute;
         }
         
         const url = this.form.dataset[camelCaseAttr];
         console.log('Looking for attribute:', camelCaseAttr, 'URL:', url);
         
         if (!url) {
            console.error('Available dataset attributes:', Object.keys(this.form.dataset));
            throw new Error(`URL not found for ${urlDataAttribute} (looking for ${camelCaseAttr})`);
         }
         
         const queryString = new URLSearchParams(params).toString();
         const fullUrl = `${url}?${queryString}`;
         
         const response = await fetch(fullUrl, {
            method: 'GET',
            headers: {
               'X-Requested-With': 'XMLHttpRequest',
               'Content-Type': 'application/json',
               'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
            },
            credentials: 'same-origin'
         });
         
         if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
         }
         
         const contentType = response.headers.get('content-type');
         if (contentType && contentType.includes('application/json')) {
            return await response.json();
         } else {
            return await response.text();
         }
      },
      
      // Initialize date picker with disabled dates
      initializeDatePicker(disabledDates = []) {
         const datePicker = document.getElementById('datepicker123');
         
         // Destroy existing datepicker
         if (typeof $.fn.datepicker !== 'undefined') {
            $('#datepicker123').datepicker('destroy');
         }
         
         // Get yesterday's date
         const yesterday = new Date();
         yesterday.setDate(yesterday.getDate() - 1);
         
         // Initialize new datepicker
         if (typeof $.fn.datepicker !== 'undefined') {
            $('#datepicker123').datepicker({
               dateFormat: 'mm/dd/yy',
               minDate: new Date(), // Disable dates before today
               beforeShowDay: (date) => {
                  const dateString = $.datepicker.formatDate('mm/dd/yy', date);
                  // Disable if date is in disabled list or before today
                  const isDisabled = disabledDates.indexOf(dateString) !== -1;
                  const isBeforeToday = date < yesterday;
                  return [!isDisabled && !isBeforeToday];
               },
               onSelect: (dateText) => {
                  console.log('Date selected:', dateText);
                  this.handleDateChange();
               }
            });
         }
      },
      
      // Reset date picker
      resetDatePicker() {
         const datePicker = document.getElementById('datepicker123');
         if (datePicker) {
            datePicker.value = '';
            if (typeof $.fn.datepicker !== 'undefined') {
               $('#datepicker123').datepicker('destroy');
            }
            // Update button states when date is cleared
            this.updateButtonStates();
         }
      },
      
      // Add new window
      addWindow() {
         // Check if required fields are selected
         if (!this.areRequiredFieldsSelected()) {
            this.showWarning('Please select Channel, Region, and Date before adding a window.');
            return;
         }
         
         const windowIndex = this.windowCounter;
         const fieldList = document.getElementById('fieldList');
         
         const windowHTML = this.createWindowHTML(windowIndex);
         fieldList.insertAdjacentHTML('beforeend', windowHTML);
         
         // Initialize event listeners for the new window
         this.bindWindowEvents(windowIndex);
         
         this.windowCounter++;
         document.getElementById('numofwins').value = this.windowCounter;
         
         this.showSuccess(`Window ${windowIndex + 1} added successfully!`);
      },
      
      // Create window HTML template
      createWindowHTML(index) {
         return `
            <div class="card mt-3" id="window_${index}">
               <div class="card-header d-flex justify-content-between align-items-center">
                  <h3 class="card-title">Window ${index + 1} - Define Window & Select Adspots</h3>
                  <button type="button" class="btn btn-danger btn-sm" onclick="PlaylistApp.removeWindow(${index})">
                        <i class="fe fe-trash"></i> Remove Window
                  </button>
               </div>
               <div class="card-body">
                  <input type="hidden" id="numofavails_${index}" name="numofavails[${index}]" value="0">
                  
                  <div class="row">
                        <div class="form-group col-md-6">
                           <label class="form-label">Window Start (24H format) <span class="text-danger">*</span></label>
                           <div class="input-group">
                              <span class="input-group-text">
                                    <i class="fa fa-clock-o"></i>
                              </span>
                              <input class="form-control" 
                                       id="winstart_${index}" 
                                       name="windowstart[${index}]" 
                                       type="time" 
                                       min="00:01" 
                                       max="23:59" 
                                       required>
                           </div>
                        </div>
                        <div class="form-group col-md-6">
                           <label class="form-label">Window End (24H format) <span class="text-danger">*</span></label>
                           <div class="input-group">
                              <span class="input-group-text">
                                    <i class="fa fa-clock-o"></i>
                              </span>
                              <input class="form-control" 
                                       id="winend_${index}" 
                                       name="windowend[${index}]" 
                                       type="time" 
                                       min="00:01" 
                                       max="23:59" 
                                       required>
                           </div>
                        </div>
                  </div>
                  
                  <div class="mt-3">
                        <div id="availList_${index}"></div>
                        <button type="button" class="btn btn-primary btn-sm" onclick="PlaylistApp.addAvail(${index})">
                           <i class="fe fe-plus"></i> Add Adbreak
                        </button>
                  </div>
               </div>
            </div>
         `;
      },
      
      // Bind events for a specific window with validation
      bindWindowEvents(windowIndex) {
         const startInput = document.getElementById(`winstart_${windowIndex}`);
         const endInput = document.getElementById(`winend_${windowIndex}`);
         
         if (startInput) {
            startInput.addEventListener('change', () => this.handleWindowStartChange(windowIndex));
            startInput.addEventListener('blur', () => this.validateWindowStartTime(windowIndex));
         }
         
         if (endInput) {
            endInput.addEventListener('change', () => this.handleWindowEndChange(windowIndex));
            endInput.addEventListener('blur', () => this.validateWindowEndTime(windowIndex));
         }
      },
      
      // Validate window start time
      validateWindowStartTime(windowIndex) {
         const startInput = document.getElementById(`winstart_${windowIndex}`);
         if (!startInput) return;
         
         let minTime = '00:00';
         let minContext = '';
         
         // Check previous window constraints
         for (let i = windowIndex - 1; i >= 0; i--) {
            const prevEndInput = document.getElementById(`winend_${i}`);
            if (prevEndInput && prevEndInput.value) {
               minTime = prevEndInput.value;
               minContext = `Window ${i + 1} end time`;
               break;
            }
         }
         
         this.validateTimeInput(startInput, minTime, '23:59', { minContext });
      },
      
      // Validate window end time
      validateWindowEndTime(windowIndex) {
         const endInput = document.getElementById(`winend_${windowIndex}`);
         const startInput = document.getElementById(`winstart_${windowIndex}`);
         if (!endInput) return;
         
         let minTime = startInput?.value || '00:00';
         const minContext = 'Window start time';
         
         let maxTime = '23:59';
         let maxContext = '';
         
         // Check next window constraints
         for (let i = windowIndex + 1; i < this.windowCounter; i++) {
            const nextStartInput = document.getElementById(`winstart_${i}`);
            if (nextStartInput && nextStartInput.value) {
               maxTime = nextStartInput.value;
               maxContext = `Window ${i + 1} start time`;
               break;
            }
         }
         
         this.validateTimeInput(endInput, minTime, maxTime, { minContext, maxContext });
      },
      
      // Handle window start time change
      handleWindowStartChange(windowIndex) {
         const startValue = document.getElementById(`winstart_${windowIndex}`).value;
         const endInput = document.getElementById(`winend_${windowIndex}`);
         
         // Set minimum end time to start time
         if (endInput && startValue) {
            endInput.min = startValue;
         }
         
         // Validate the start time
         this.validateWindowStartTime(windowIndex);
         
         // Update avail constraints
         this.updateAvailConstraints(windowIndex);
         
         // Revalidate end time if it exists
         if (endInput && endInput.value) {
            this.validateWindowEndTime(windowIndex);
         }
      },
      
      // Handle window end time change
      handleWindowEndChange(windowIndex) {
         const endValue = document.getElementById(`winend_${windowIndex}`).value;
         
         // Validate the end time
         this.validateWindowEndTime(windowIndex);
         
         // Update next window constraints
         for (let i = windowIndex + 1; i < this.windowCounter; i++) {
            const nextStartInput = document.getElementById(`winstart_${i}`);
            if (nextStartInput) {
               nextStartInput.min = endValue;
               // Revalidate next window start time if it has a value
               if (nextStartInput.value) {
                  this.validateWindowStartTime(i);
               }
               break;
            }
         }
         
         // Update avail constraints
         this.updateAvailConstraints(windowIndex);
      },
      
      // Update avail time constraints
      updateAvailConstraints(windowIndex) {
         const startValue = document.getElementById(`winstart_${windowIndex}`).value;
         const endValue = document.getElementById(`winend_${windowIndex}`).value;
         
         // Update all avail inputs in this window
         const availInputs = document.querySelectorAll(`[id^="availstart_${windowIndex}_"]`);
         availInputs.forEach(input => {
            if (startValue) input.min = startValue;
            if (endValue) input.max = endValue;
            
            // Revalidate if input has value
            if (input.value) {
               const { windowIndex: winIdx, availIndex } = this.extractAvailIndices(input.id);
               this.validateAvailStartTime(winIdx, availIndex);
            }
         });
      },
      
      // Remove window
      async removeWindow(windowIndex) {
         const windowElement = document.getElementById(`window_${windowIndex}`);
         if (windowElement) {
            const confirmed = await this.showConfirm(
               'Remove Window?',
               'Are you sure you want to remove this window? This action cannot be undone.'
            );
            
            if (confirmed) {
               windowElement.remove();
               
               // Clean up arrays and validation errors for this window
               delete this.availsInWindow[windowIndex];
               delete this.adsInAvail[windowIndex];
               
               // Remove validation errors for this window
               const keysToDelete = [];
               for (const key of this.validationErrors.keys()) {
                  if (key.includes(`_${windowIndex}_`) || key.includes(`_${windowIndex}`)) {
                     keysToDelete.push(key);
                  }
               }
               keysToDelete.forEach(key => this.validationErrors.delete(key));
               
               // Renumber all remaining windows
               this.renumberWindows();
               
               this.updateButtonStates();
               this.showSuccess('Window removed successfully!');
            }
         }
      },
      
      // Add avail to window
      addAvail(windowIndex) {
         if (!this.availsInWindow[windowIndex]) {
            this.availsInWindow[windowIndex] = 0;
         }
         
         const availIndex = this.availsInWindow[windowIndex];
         const availList = document.getElementById(`availList_${windowIndex}`);
         
         const windowStart = document.getElementById(`winstart_${windowIndex}`).value || '00:01';
         const windowEnd = document.getElementById(`winend_${windowIndex}`).value || '23:59';
         
         const availHTML = this.createAvailHTML(windowIndex, availIndex, windowStart, windowEnd);
         availList.insertAdjacentHTML('beforeend', availHTML);
         
         // Initialize event listeners for the new avail
         this.bindAvailEvents(windowIndex, availIndex);
         
         // Initialize adspot options
         this.loadAdspotOptions(`adspot_${windowIndex}_${availIndex}`);
         
         this.availsInWindow[windowIndex]++;
         document.getElementById(`numofavails_${windowIndex}`).value = this.availsInWindow[windowIndex];
         
         this.showSuccess(`Adbreak ${availIndex + 1} added to Window ${windowIndex + 1}!`);
      },
      
      // Create avail HTML template
      createAvailHTML(windowIndex, availIndex, windowStart, windowEnd) {
         return `
            <div class="card mb-2" id="avail_${windowIndex}_${availIndex}">
               <div class="card-header d-flex justify-content-between align-items-center">
                  <h5 class="card-title mb-0">Adbreak ${availIndex + 1}</h5>
                  <button type="button" class="btn btn-danger btn-sm" onclick="PlaylistApp.removeAvail(${windowIndex}, ${availIndex})">
                        <i class="fe fe-trash"></i>
                  </button>
               </div>
               <div class="card-body">
                  <input type="hidden" id="numofads_${windowIndex}_${availIndex}" name="numofads[${windowIndex}][${availIndex}]" value="0">
                  
                  <div class="row">
                        <div class="form-group col-md-4">
                           <label class="form-label">Adbreak Start Time <span class="text-danger">*</span></label>
                           <div class="input-group">
                              <span class="input-group-text">
                                    <i class="fa fa-clock-o"></i>
                              </span>
                              <input class="form-control" 
                                       id="availstart_${windowIndex}_${availIndex}" 
                                       name="availstart[${windowIndex}][${availIndex}]" 
                                       type="time" 
                                       min="${windowStart}" 
                                       max="${windowEnd}" 
                                       value="${windowStart}" 
                                       required>
                           </div>
                        </div>
                        <div class="form-group col-md-8">
                           <label class="form-label">Adspots</label>
                           <div id="adspotList_${windowIndex}_${availIndex}"></div>
                           <button type="button" class="btn btn-primary btn-sm mt-2" onclick="PlaylistApp.addAdspot(${windowIndex}, ${availIndex})">
                              <i class="fe fe-plus"></i> Add Adspot
                           </button>
                        </div>
                  </div>
               </div>
            </div>
         `;
      },
      
      // Bind events for a specific avail
      bindAvailEvents(windowIndex, availIndex) {
         const availInput = document.getElementById(`availstart_${windowIndex}_${availIndex}`);
         
         if (availInput) {
            availInput.addEventListener('change', () => this.handleAvailStartChange(windowIndex, availIndex));
            availInput.addEventListener('blur', () => this.validateAvailStartTime(windowIndex, availIndex));
         }
      },
      
      // Validate avail start time
      validateAvailStartTime(windowIndex, availIndex) {
         const availInput = document.getElementById(`availstart_${windowIndex}_${availIndex}`);
         const windowStartInput = document.getElementById(`winstart_${windowIndex}`);
         const windowEndInput = document.getElementById(`winend_${windowIndex}`);
         
         if (!availInput) return;
         
         const windowStart = windowStartInput?.value || '00:01';
         const windowEnd = windowEndInput?.value || '23:59';
         
         this.validateTimeInput(availInput, windowStart, windowEnd, {
            minContext: `Window ${windowIndex + 1} start time`,
            maxContext: `Window ${windowIndex + 1} end time`
         });
      },
      
      // Handle avail start time change
      handleAvailStartChange(windowIndex, availIndex) {
         this.validateAvailStartTime(windowIndex, availIndex);
      },
      
      // Remove avail
      async removeAvail(windowIndex, availIndex) {
         const availElement = document.getElementById(`avail_${windowIndex}_${availIndex}`);
         if (availElement) {
            const confirmed = await this.showConfirm(
               'Remove Adbreak?',
               'Are you sure you want to remove this adbreak? This action cannot be undone.'
            );
            
            if (confirmed) {
               availElement.remove();
               
               // Remove validation errors for this avail
               const keysToDelete = [];
               for (const key of this.validationErrors.keys()) {
                  if (key.includes(`_${windowIndex}_${availIndex}`)) {
                     keysToDelete.push(key);
                  }
               }
               keysToDelete.forEach(key => this.validationErrors.delete(key));
               
               // Renumber all avails in this window
               this.renumberAvails(windowIndex);
               
               this.updateButtonStates();
               this.showSuccess('Adbreak removed successfully!');
            }
         }
      },

      // Add adspot
      addAdspot(windowIndex, availIndex) {
         if (!this.adsInAvail[windowIndex]) {
            this.adsInAvail[windowIndex] = [];
         }
         if (!this.adsInAvail[windowIndex][availIndex]) {
            this.adsInAvail[windowIndex][availIndex] = 0;
         }
         
         const adspotIndex = this.adsInAvail[windowIndex][availIndex];
         const adspotList = document.getElementById(`adspotList_${windowIndex}_${availIndex}`);
         
         const adspotHTML = this.createAdspotHTML(windowIndex, availIndex, adspotIndex);
         adspotList.insertAdjacentHTML('beforeend', adspotHTML);
         
         // Load adspot options
         this.loadAdspotOptions(`adspot_${windowIndex}_${availIndex}_${adspotIndex}`);
         
         this.adsInAvail[windowIndex][availIndex]++;
         document.getElementById(`numofads_${windowIndex}_${availIndex}`).value = this.adsInAvail[windowIndex][availIndex];
         
         this.showSuccess('Adspot added successfully!');
      },
      
      // Create adspot HTML template
      createAdspotHTML(windowIndex, availIndex, adspotIndex) {
         return `
            <div class="input-group mb-2" id="adspotGroup_${windowIndex}_${availIndex}_${adspotIndex}">
               <select class="form-control select2-show-search optionsofads" 
                        id="adspot_${windowIndex}_${availIndex}_${adspotIndex}"
                        name="ad[${windowIndex}][${availIndex}][${adspotIndex}]" 
                        required>
                  <option value="">Loading adspots...</option>
               </select>
               <button type="button" class="btn btn-danger" onclick="PlaylistApp.removeAdspot(${windowIndex}, ${availIndex}, ${adspotIndex})">
                  <i class="fe fe-trash"></i>
               </button>
            </div>
         `;
      },
      
      // Remove adspot
      async removeAdspot(windowIndex, availIndex, adspotIndex) {
         const confirmed = await this.showConfirm(
            'Remove Adspot?',
            'Are you sure you want to remove this adspot?'
         );
         
         if (confirmed) {
            const adspotGroup = document.getElementById(`adspotGroup_${windowIndex}_${availIndex}_${adspotIndex}`);
            if (adspotGroup) {
               adspotGroup.remove();
               
               // Renumber all adspots in this avail
               this.renumberAdspots(windowIndex, availIndex);
               
               this.showSuccess('Adspot removed successfully!');
            }
         }
      },
      
      // Load adspot options for a select element
      async loadAdspotOptions(selectId) {
         const selectElement = document.getElementById(selectId);
         const channelId = document.getElementById('channels').value;
         
         if (!selectElement || !channelId) {
            return;
         }
         
         try {
            const adspotData = await this.fetchData('adspotsUrl', { channel: channelId });
            selectElement.innerHTML = adspotData;
            
            // Initialize Select2 for this element
            if (typeof $.fn.select2 !== 'undefined') {
               $(`#${selectId}`).select2({
                  placeholder: 'Choose adspot',
                  allowClear: true,
                  width: '100%'
               });
            }
            
         } catch (error) {
            console.error('Error loading adspots:', error);
            selectElement.innerHTML = '<option value="">Error loading adspots</option>';
            this.showError('Failed to load adspots. Please try again.');
         }
      },
      
      // Update adspot options for all existing selects
      async updateAdspotOptions(channelId) {
         const adspotSelects = document.querySelectorAll('.optionsofads');
         
         for (const select of adspotSelects) {
            try {
               const adspotData = await this.fetchData('adspotsUrl', { channel: channelId });
               select.innerHTML = adspotData;
               
               // Reinitialize Select2
               if (typeof $.fn.select2 !== 'undefined') {
                  $(select).select2('destroy').select2({
                        placeholder: 'Choose adspot',
                        allowClear: true,
                        width: '100%'
                  });
               }
            } catch (error) {
               console.error('Error updating adspot options:', error);
               select.innerHTML = '<option value="">Error loading adspots</option>';
               this.showError('Failed to update adspot options.');
            }
         }
      },
      
      // Enhanced form submission with comprehensive validation
      handleFormSubmit(event) {
         // Get the button that was clicked to submit the form
         const submitButton = event.submitter;
         
         // Prevent double submissions
         if (submitButton && submitButton.disabled) {
            event.preventDefault();
            return false;
         }
         
         // Check if required fields are selected
         if (!this.areRequiredFieldsSelected()) {
            event.preventDefault();
            this.showWarning('Please select Channel, Region, and Date before submitting.');
            return false;
         } 
          
         // Validate all time inputs before submission
         const isValid = this.validateAllTimeInputs();
         
         if (!isValid) {
            event.preventDefault();
            this.showError('Please fix all validation errors before submitting.');
            return false;
         }
         
         // Check if at least one window exists
         if (this.windowCounter === 0) {
            event.preventDefault();
            this.showWarning('Please add at least one window before submitting.');
            return false;
         }  
          
         if (submitButton) {
            // Remove any existing hidden inputs for button values
            const existingDraftInput = this.form.querySelector('input[name="draft_btn"]');
            const existingApplyInput = this.form.querySelector('input[name="apply_btn"]');
            
            if (existingDraftInput) existingDraftInput.remove();
            if (existingApplyInput) existingApplyInput.remove();
            
            // Create a hidden input with the button's name and value
            const hiddenInput = document.createElement('input');
            hiddenInput.type = 'hidden';
            hiddenInput.name = submitButton.name;
            hiddenInput.value = submitButton.value;
            this.form.appendChild(hiddenInput);
            
            // Add loading state to button
            submitButton.classList.add('btn-loading');
            submitButton.disabled = true;
            
            // Show loading notification
            const actionType = submitButton.value === 'draft' ? 'draft' : 'playlist';
            this.showInfo(`Saving ${actionType}...`);
            
            // Re-enable after a delay (in case of validation errors)
            setTimeout(() => {
               if (submitButton.classList.contains('btn-loading')) {
                  submitButton.classList.remove('btn-loading');
                  submitButton.disabled = false;
               }
            }, 10000); // Increased timeout
         }
         
         return true; // Allow form to submit
      },
      
      // Validate all time inputs in the form
      validateAllTimeInputs() {
         let allValid = true;
         
         // Validate all window times
         for (let i = 0; i < this.windowCounter; i++) {
            const windowElement = document.getElementById(`window_${i}`);
            if (!windowElement) continue;
            
            const startInput = document.getElementById(`winstart_${i}`);
            const endInput = document.getElementById(`winend_${i}`);
            
            if (startInput && !this.validateTimeInput(startInput)) {
               allValid = false;
            }
            
            if (endInput && !this.validateTimeInput(endInput)) {
               allValid = false;
            }
            
            // Validate all avail times in this window
            const availInputs = document.querySelectorAll(`[id^="availstart_${i}_"]`);
            availInputs.forEach(input => {
               if (!this.validateTimeInput(input)) {
                  allValid = false;
               }
            });
         }
         
         return allValid;
      },

      // Renumber methods (shortened for space - same logic as before)
      renumberWindows() {
         const windowElements = document.querySelectorAll('[id^="window_"]');
         const newAvailsInWindow = {};
         const newAdsInAvail = {};
         let newWindowCounter = 0;
         
         windowElements.forEach((windowElement, index) => {
            const newWindowIndex = index;
            
            // Update window element ID and content
            windowElement.id = `window_${newWindowIndex}`;
            
            // Update all IDs and event handlers for this window
            this.updateWindowIds(windowElement, newWindowIndex);
            
            // Transfer data
            if (this.availsInWindow[newWindowIndex] !== undefined) {
               newAvailsInWindow[newWindowIndex] = this.availsInWindow[newWindowIndex];
            }
            if (this.adsInAvail[newWindowIndex] !== undefined) {
               newAdsInAvail[newWindowIndex] = this.adsInAvail[newWindowIndex];
            }
            
            // Rebind events
            this.bindWindowEvents(newWindowIndex);
            newWindowCounter++;
         });
         
         this.windowCounter = newWindowCounter;
         this.availsInWindow = newAvailsInWindow;
         this.adsInAvail = newAdsInAvail;
         
         document.getElementById('numofwins').value = this.windowCounter;
         this.updateValidationErrorKeys();
      },
      
      updateWindowIds(windowElement, newIndex) {
         // Update card title
         const cardTitle = windowElement.querySelector('.card-title');
         if (cardTitle) {
            cardTitle.textContent = `Window ${newIndex + 1} - Define Window & Select Adspots`;
         }
         
         // Update remove button
         const removeBtn = windowElement.querySelector('.btn-danger');
         if (removeBtn) {
            removeBtn.setAttribute('onclick', `PlaylistApp.removeWindow(${newIndex})`);
         }
         
         // Update all input IDs and names
         const inputs = windowElement.querySelectorAll('input, select');
         inputs.forEach(input => {
            if (input.id) {
               input.id = input.id.replace(/\d+/, newIndex);
            }
            if (input.name) {
               input.name = input.name.replace(/\[\d+\]/, `[${newIndex}]`);
            }
         });
      },
      
      renumberAvails(windowIndex) {
         const windowElement = document.getElementById(`window_${windowIndex}`);
         if (!windowElement) return;
         
         const availElements = windowElement.querySelectorAll(`[id^="avail_${windowIndex}_"]`);
         let newAvailCounter = 0;
         
         availElements.forEach((availElement, index) => {
            const newAvailIndex = index;
            availElement.id = `avail_${windowIndex}_${newAvailIndex}`;
            
            // Update card title
            const cardTitle = availElement.querySelector('.card-title');
            if (cardTitle) {
               cardTitle.textContent = `Adbreak ${newAvailIndex + 1}`;
            }
            
            // Update remove button
            const removeBtn = availElement.querySelector('.btn-danger');
            if (removeBtn) {
               removeBtn.setAttribute('onclick', `PlaylistApp.removeAvail(${windowIndex}, ${newAvailIndex})`);
            }
            
            // Update all input IDs and names within this avail
            const inputs = availElement.querySelectorAll('input, select');
            inputs.forEach(input => {
               if (input.id) {
                  input.id = input.id.replace(/_\d+_\d+/, `_${windowIndex}_${newAvailIndex}`);
               }
               if (input.name) {
                  input.name = input.name.replace(/\[\d+\]\[\d+\]/, `[${windowIndex}][${newAvailIndex}]`);
               }
            });
            
            // Update add adspot button
            const addAdspotBtn = availElement.querySelector('.btn-primary');
            if (addAdspotBtn) {
               addAdspotBtn.setAttribute('onclick', `PlaylistApp.addAdspot(${windowIndex}, ${newAvailIndex})`);
            }
            
            // Update adspot list ID
            const adspotList = availElement.querySelector(`[id^="adspotList_"]`);
            if (adspotList) {
               adspotList.id = `adspotList_${windowIndex}_${newAvailIndex}`;
            }
            
            // Renumber adspots within this avail
            this.renumberAdspots(windowIndex, newAvailIndex);
            
            // Rebind events
            this.bindAvailEvents(windowIndex, newAvailIndex);
            newAvailCounter++;
         });
         
         this.availsInWindow[windowIndex] = newAvailCounter;
         document.getElementById(`numofavails_${windowIndex}`).value = newAvailCounter;
      },
      
      renumberAdspots(windowIndex, availIndex) {
         const adspotList = document.getElementById(`adspotList_${windowIndex}_${availIndex}`);
         if (!adspotList) return;
         
         const adspotGroups = adspotList.querySelectorAll(`[id^="adspotGroup_"]`);
         let newAdspotCounter = 0;
         
         adspotGroups.forEach((adspotGroup, index) => {
            const newAdspotIndex = index;
            adspotGroup.id = `adspotGroup_${windowIndex}_${availIndex}_${newAdspotIndex}`;
            
            // Update select element
            const select = adspotGroup.querySelector('select');
            if (select) {
               select.id = `adspot_${windowIndex}_${availIndex}_${newAdspotIndex}`;
               select.name = `ad[${windowIndex}][${availIndex}][${newAdspotIndex}]`;
            }
            
            // Update remove button
            const removeBtn = adspotGroup.querySelector('.btn-danger');
            if (removeBtn) {
               removeBtn.setAttribute('onclick', `PlaylistApp.removeAdspot(${windowIndex}, ${availIndex}, ${newAdspotIndex})`);
            }
            
            newAdspotCounter++;
         });
         
         if (!this.adsInAvail[windowIndex]) {
            this.adsInAvail[windowIndex] = [];
         }
         this.adsInAvail[windowIndex][availIndex] = newAdspotCounter;
         
         const numAdsInput = document.getElementById(`numofads_${windowIndex}_${availIndex}`);
         if (numAdsInput) {
            numAdsInput.value = newAdspotCounter;
         }
      },
      
      // Update validation error keys after renumbering
      updateValidationErrorKeys() {
         const newErrors = new Map();
         
         for (const [key, value] of this.validationErrors) {
            // Find the actual element with this key and get its current ID
            const element = document.getElementById(key);
            if (element) {
               newErrors.set(element.id, value);
            }
         }
         
         this.validationErrors = newErrors;
      },
      
      // Utility method to get current time in HH:MM format
      getCurrentTime() {
         const now = new Date();
         const hours = now.getHours().toString().padStart(2, '0');
         const minutes = now.getMinutes().toString().padStart(2, '0');
         return `${hours}:${minutes}`;
      },
      
      // Utility method to format time for display
      formatTimeForDisplay(timeStr) {
         if (!timeStr) return '';
         
         const [hours, minutes] = timeStr.split(':');
         const hour12 = parseInt(hours) % 12 || 12;
         const ampm = parseInt(hours) >= 12 ? 'PM' : 'AM';
         
         return `${hour12}:${minutes} ${ampm}`;
      },
      
      // Enhanced debug method for troubleshooting
      debug() {
         console.log('=== Playlist Application Debug Info ===');
         console.log('Window Counter:', this.windowCounter);
         console.log('Avails in Window:', this.availsInWindow);
         console.log('Ads in Avail:', this.adsInAvail);
         console.log('Validation Errors:', Array.from(this.validationErrors.entries()));
         console.log('Form Element:', this.form);
         console.log('Form Dataset:', this.form?.dataset);
         
         // List all time inputs and their values
         const timeInputs = document.querySelectorAll('input[type="time"]');
         console.log('Time Inputs:');
         timeInputs.forEach(input => {
            console.log(`  ${input.id}: ${input.value} (valid: ${input.checkValidity()})`);
         });
         
         // List all validation states
         console.log('Input Validation States:');
         document.querySelectorAll('.time-input-error, .time-input-warning, .time-input-success').forEach(input => {
            const state = input.classList.contains('time-input-error') ? 'error' :
                         input.classList.contains('time-input-warning') ? 'warning' : 'success';
            console.log(`  ${input.id}: ${state}`);
         });
         
         console.log('=====================================');
      },
      
      // Reset entire form (useful for testing or clearing)
      resetForm() {
         // Clear all selections
         document.getElementById('channels').value = '';
         document.getElementById('regions').innerHTML = '<option value="">Select channel first</option>';
         document.getElementById('datepicker123').value = '';
         
         // Remove all windows
         document.getElementById('fieldList').innerHTML = '';
         
         // Reset counters
         this.windowCounter = 0;
         this.availsInWindow = [];
         this.adsInAvail = [];
         this.validationErrors.clear();
         
         // Update form state
         document.getElementById('numofwins').value = 0;
         this.updateButtonStates();
         
         // Reset datepicker
         this.resetDatePicker();
         
         // Reinitialize Select2
         this.initializeSelect2();
         
         this.showInfo('Form has been reset.');
      },
      
      // Export form data for debugging or backup
      exportFormData() {
         const formData = {
            channel: document.getElementById('channels').value,
            region: document.getElementById('regions').value,
            date: document.getElementById('datepicker123').value,
            windowCounter: this.windowCounter,
            windows: []
         };
         
         for (let i = 0; i < this.windowCounter; i++) {
            const windowElement = document.getElementById(`window_${i}`);
            if (!windowElement) continue;
            
            const windowData = {
               index: i,
               startTime: document.getElementById(`winstart_${i}`)?.value || '',
               endTime: document.getElementById(`winend_${i}`)?.value || '',
               avails: []
            };
            
            const availElements = windowElement.querySelectorAll(`[id^="avail_${i}_"]`);
            availElements.forEach((availElement, availIndex) => {
               const availData = {
                  index: availIndex,
                  startTime: document.getElementById(`availstart_${i}_${availIndex}`)?.value || '',
                  adspots: []
               };
               
               const adspotSelects = availElement.querySelectorAll('select[name^="ad"]');
               adspotSelects.forEach((select, adspotIndex) => {
                  availData.adspots.push({
                     index: adspotIndex,
                     value: select.value,
                     text: select.selectedOptions[0]?.text || ''
                  });
               });
               
               windowData.avails.push(availData);
            });
            
            formData.windows.push(windowData);
         }
         
         return formData;
      },
      
      // Import form data (for restoring state)
      importFormData(formData) {
         try {
            // Reset form first
            this.resetForm();
            
            // Set basic fields
            if (formData.channel) {
               document.getElementById('channels').value = formData.channel;
               this.handleChannelChange({ target: { value: formData.channel } });
            }
            
            if (formData.region) {
               setTimeout(() => {
                  document.getElementById('regions').value = formData.region;
                  this.handleRegionChange({ target: { value: formData.region } });
               }, 500);
            }
            
            if (formData.date) {
               setTimeout(() => {
                  document.getElementById('datepicker123').value = formData.date;
                  this.handleDateChange();
               }, 1000);
            }
            
            // Restore windows
            if (formData.windows && formData.windows.length > 0) {
               setTimeout(() => {
                  formData.windows.forEach((windowData, index) => {
                     this.addWindow();
                     
                     setTimeout(() => {
                        // Set window times
                        if (windowData.startTime) {
                           document.getElementById(`winstart_${index}`).value = windowData.startTime;
                        }
                        if (windowData.endTime) {
                           document.getElementById(`winend_${index}`).value = windowData.endTime;
                        }
                        
                        // Restore avails
                        windowData.avails.forEach((availData, availIndex) => {
                           this.addAvail(index);
                           
                           setTimeout(() => {
                              if (availData.startTime) {
                                 document.getElementById(`availstart_${index}_${availIndex}`).value = availData.startTime;
                              }
                              
                              // Restore adspots
                              availData.adspots.forEach((adspotData, adspotIndex) => {
                                 if (adspotIndex > 0) {
                                    this.addAdspot(index, availIndex);
                                 }
                                 
                                 setTimeout(() => {
                                    const selectElement = document.getElementById(`adspot_${index}_${availIndex}_${adspotIndex}`);
                                    if (selectElement && adspotData.value) {
                                       selectElement.value = adspotData.value;
                                    }
                                 }, 200);
                              });
                           }, 300);
                        });
                     }, 500);
                  });
               }, 1500);
            }
            
            this.showSuccess('Form data imported successfully!');
         } catch (error) {
            console.error('Error importing form data:', error);
            this.showError('Failed to import form data.');
         }
      }
   };

   // Initialize the application when DOM is loaded
   document.addEventListener('DOMContentLoaded', function() {
      PlaylistApp.init();
      
      // Add global error handler for debugging
      window.addEventListener('error', function(event) {
         console.error('Global error:', event.error);
         PlaylistApp.showError('An unexpected error occurred. Please check the console for details.');
      });
      
      // Add keyboard shortcuts for power users
      document.addEventListener('keydown', function(event) {
         // Ctrl+Shift+D for debug info
         if (event.ctrlKey && event.shiftKey && event.key === 'D') {
            event.preventDefault();
            PlaylistApp.debug();
         }
         
         // Ctrl+Shift+R for reset form
         if (event.ctrlKey && event.shiftKey && event.key === 'R') {
            event.preventDefault();
            if (confirm('Are you sure you want to reset the entire form? This cannot be undone.')) {
               PlaylistApp.resetForm();
            }
         }
         
         // Ctrl+Shift+E for export data
         if (event.ctrlKey && event.shiftKey && event.key === 'E') {
            event.preventDefault();
            const data = PlaylistApp.exportFormData();
            console.log('Exported Form Data:', JSON.stringify(data, null, 2));
            PlaylistApp.showInfo('Form data exported to console.');
         }
      });
      
      // Add window beforeunload handler to warn about unsaved changes
      window.addEventListener('beforeunload', function(event) {
         if (PlaylistApp.windowCounter > 0) {
            const message = 'You have unsaved changes. Are you sure you want to leave?';
            event.returnValue = message;
            return message;
         }
      });
   });

   // Make PlaylistApp globally available for onclick handlers
   window.PlaylistApp = PlaylistApp;

   // jQuery document ready fallback (in case DOMContentLoaded doesn't fire)
   if (typeof $ !== 'undefined') {
      $(document).ready(function() {
         // Initialize datepicker if not already initialized
         if (typeof $.fn.datepicker !== 'undefined' && !$('#datepicker123').hasClass('hasDatepicker')) {
            $('#datepicker123').datepicker({
               dateFormat: 'mm/dd/yy',
               minDate: new Date(),
               changeMonth: true,
               changeYear: true,
               showButtonPanel: true
            });
         }
         
         // Initialize any Select2 dropdowns that weren't caught earlier
         if (typeof $.fn.select2 !== 'undefined') {
            $('.select2-show-search:not(.select2-hidden-accessible)').each(function() {
               $(this).select2({
                  placeholder: $(this).data('placeholder') || 'Choose one',
                  allowClear: true,
                  width: '100%'
               });
            });
         }
      });
   }

   // Add some utility functions to the global scope for debugging
   window.debugPlaylist = () => PlaylistApp.debug();
   window.resetPlaylistForm = () => PlaylistApp.resetForm();
   window.exportPlaylistData = () => {
      const data = PlaylistApp.exportFormData();
      console.log(JSON.stringify(data, null, 2));
      return data;
   };

</script>

{% endblock extra_js %}