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

{% load static %}

{% block title %}
{% if adbreak.pk %}
Edit Adbreak - {{ adbreak.name }}
{% else %}
New Adbreak
{% endif %}
{% endblock %}

{% block extra_css %}
<style>
   /* 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;
   }

   /* Form validation styles */
   .form-control.is-invalid {
      border-color: #dc3545 !important;
      box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
   }

   .form-control.is-valid {
      border-color: #28a745 !important;
      box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
   }

   .invalid-feedback {
      color: #dc3545;
      font-size: 0.875rem;
      margin-top: 0.25rem;
   }

   .valid-feedback {
      color: #28a745;
      font-size: 0.875rem;
      margin-top: 0.25rem;
   }

   /* Preview card styles */
   .preview-card {
       background: #f8f9fa;
       border: 1px solid #dee2e6;
       border-radius: 8px;
       padding: 20px;
       margin-top: 20px;
   }

   .preview-item {
       margin-bottom: 10px;
   }

   .preview-label {
       font-weight: 600;
       color: #495057;
   }

   .preview-value {
       color: #6c757d;
   }

   /* Time input styling */
   .time-input-group {
       position: relative;
   }

   .time-input-group .form-control {
       padding-right: 40px;
   }

   .time-input-group .input-group-text {
       position: absolute;
       right: 10px;
       top: 50%;
       transform: translateY(-50%);
       background: transparent;
       border: none;
       z-index: 10;
   }
</style>
{% endblock extra_css %}

{% block breadcrumb %}
<div class="page-header">
    <h1 class="page-title">
        {% if adbreak.pk %}
        Edit Adbreak
        {% else %}
        Create New Adbreak
        {% endif %}
    </h1>
    <div>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{% url 'channels:channel_list' %}">Channels</a></li>
            {% if channel %}
            <li class="breadcrumb-item"><a href="{% url 'channels:adbreak_list' channel.pk %}">{{ channel.name }} Adbreaks</a></li>
            {% endif %}
            <li class="breadcrumb-item active" aria-current="page">
                {% if adbreak.pk %}Edit{% else %}New{% endif %}
            </li>
        </ol>
    </div>
</div>
{% endblock breadcrumb %}

{% block content %}
<div class="row">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    {% if adbreak.pk %}
                    Edit Adbreak: {{ adbreak.name }}
                    {% else %}
                    Create New Adbreak
                    {% endif %}
                </h3>
            </div>
            <div class="card-body">
                <form id="adbreakForm" method="post">
                    {% csrf_token %}
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="id_name" class="form-label">Adbreak Name <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="id_name" name="name" 
                                       value="{{ adbreak.name|default:'' }}" required>
                                <div class="invalid-feedback"></div>
                                <small class="form-text text-muted">Enter a descriptive name for this adbreak</small>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="id_channel" class="form-label">Channel <span class="text-danger">*</span></label>
                                <select class="form-select select2-show-search" id="id_channel" name="channel" required>
                                    <option value="">Choose Channel...</option>
                                    {% for ch in channels %}
                                    <option value="{{ ch.pk }}" 
                                            {% if ch.pk == adbreak.channel.pk or ch.pk == channel.pk %}selected{% endif %}>
                                        {{ ch.display_name|default:ch.name }}
                                    </option>
                                    {% endfor %}
                                </select>
                                <div class="invalid-feedback"></div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="id_start_time" class="form-label">Start Time <span class="text-danger">*</span></label>
                                <div class="time-input-group">
                                    <input type="time" class="form-control" id="id_start_time" name="start_time" 
                                           value="{{ adbreak.start_time|time:'H:i'|default:'' }}" required>
                                    <span class="input-group-text">
                                        <i class="fas fa-clock"></i>
                                    </span>
                                </div>
                                <div class="invalid-feedback"></div>
                                <small class="form-text text-muted">When the adbreak should start</small>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="id_end_time" class="form-label">End Time <span class="text-danger">*</span></label>
                                <div class="time-input-group">
                                    <input type="time" class="form-control" id="id_end_time" name="end_time" 
                                           value="{{ adbreak.end_time|time:'H:i'|default:'' }}" required>
                                    <span class="input-group-text">
                                        <i class="fas fa-clock"></i>
                                    </span>
                                </div>
                                <div class="invalid-feedback"></div>
                                <small class="form-text text-muted">When the adbreak should end</small>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="id_duration" class="form-label">Duration (seconds)</label>
                                <input type="number" class="form-control" id="id_duration" name="duration" 
                                       value="{{ adbreak.duration|default:'' }}" min="1" max="3600" step="1" readonly>
                                <div class="invalid-feedback"></div>
                                <small class="form-text text-muted">Automatically calculated from start and end times</small>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="id_adbreak_type" class="form-label">Adbreak Type <span class="text-danger">*</span></label>
                                <select class="form-select" id="id_adbreak_type" name="adbreak_type" required>
                                    <option value="">Choose Type...</option>
                                    <option value="commercial" {% if adbreak.adbreak_type == 'commercial' %}selected{% endif %}>Commercial</option>
                                    <option value="promotional" {% if adbreak.adbreak_type == 'promotional' %}selected{% endif %}>Promotional</option>
                                    <option value="station_id" {% if adbreak.adbreak_type == 'station_id' %}selected{% endif %}>Station ID</option>
                                    <option value="program_break" {% if adbreak.adbreak_type == 'program_break' %}selected{% endif %}>Program Break</option>
                                    <option value="news_break" {% if adbreak.adbreak_type == 'news_break' %}selected{% endif %}>News Break</option>
                                </select>
                                <div class="invalid-feedback"></div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="id_priority" class="form-label">Priority</label>
                                <select class="form-select" id="id_priority" name="priority">
                                    <option value="low" {% if adbreak.priority == 'low' %}selected{% endif %}>Low</option>
                                    <option value="medium" {% if adbreak.priority == 'medium' or not adbreak.priority %}selected{% endif %}>Medium</option>
                                    <option value="high" {% if adbreak.priority == 'high' %}selected{% endif %}>High</option>
                                    <option value="critical" {% if adbreak.priority == 'critical' %}selected{% endif %}>Critical</option>
                                </select>
                                <div class="invalid-feedback"></div>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="id_max_ads" class="form-label">Maximum Ads</label>
                                <input type="number" class="form-control" id="id_max_ads" name="max_ads" 
                                       value="{{ adbreak.max_ads|default:'' }}" min="1" max="20">
                                <div class="invalid-feedback"></div>
                                <small class="form-text text-muted">Maximum number of ads in this break (1-20)</small>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="id_description" class="form-label">Description</label>
                        <textarea class="form-control" id="id_description" name="description" rows="3" 
                                  placeholder="Optional description for this adbreak...">{{ adbreak.description|default:'' }}</textarea>
                        <div class="invalid-feedback"></div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="id_is_active" name="is_active" 
                                       {% if adbreak.is_active or not adbreak.pk %}checked{% endif %}>
                                <label class="form-check-label" for="id_is_active">
                                    Active
                                </label>
                                <small class="form-text text-muted d-block">Inactive adbreaks won't be used in scheduling</small>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="id_repeats_daily" name="repeats_daily" 
                                       {% if adbreak.repeats_daily %}checked{% endif %}>
                                <label class="form-check-label" for="id_repeats_daily">
                                    Repeats Daily
                                </label>
                                <small class="form-text text-muted d-block">This adbreak occurs at the same time every day</small>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mt-4">
                        <button type="submit" class="btn btn-primary" id="submitBtn">
                            <i class="fas fa-save me-2"></i>
                            {% if adbreak.pk %}Update Adbreak{% else %}Create Adbreak{% endif %}
                        </button>
                        <a href="{% if channel %}{% url 'channels:adbreak_list' channel.pk %}{% else %}{% url 'channels:channel_list' %}{% endif %}" 
                           class="btn btn-secondary">
                            <i class="fas fa-times me-2"></i>Cancel
                        </a>
                        {% if adbreak.pk %}
                        <button type="button" class="btn btn-danger float-end" id="deleteBtn">
                            <i class="fas fa-trash me-2"></i>Delete Adbreak
                        </button>
                        {% endif %}
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <div class="col-lg-4">
        <div class="preview-card">
            <h5><i class="fas fa-eye me-2"></i>Live Preview</h5>
            <div id="adbreakPreview">
                <div class="preview-item">
                    <span class="preview-label">Name:</span>
                    <span class="preview-value" id="preview-name">{{ adbreak.name|default:'New Adbreak' }}</span>
                </div>
                <div class="preview-item">
                    <span class="preview-label">Channel:</span>
                    <span class="preview-value" id="preview-channel">{{ adbreak.channel.display_name|default:channel.display_name|default:'Not selected' }}</span>
                </div>
                <div class="preview-item">
                    <span class="preview-label">Time:</span>
                    <span class="preview-value" id="preview-time">{{ adbreak.start_time|time:'H:i'|default:'--:--' }} - {{ adbreak.end_time|time:'H:i'|default:'--:--' }}</span>
                </div>
                <div class="preview-item">
                    <span class="preview-label">Duration:</span>
                    <span class="preview-value" id="preview-duration">{{ adbreak.duration|default:'0' }} seconds</span>
                </div>
                <div class="preview-item">
                    <span class="preview-label">Type:</span>
                    <span class="preview-value" id="preview-type">{{ adbreak.adbreak_type|default:'Not selected' }}</span>
                </div>
                <div class="preview-item">
                    <span class="preview-label">Priority:</span>
                    <span class="preview-value" id="preview-priority">{{ adbreak.priority|default:'Medium' }}</span>
                </div>
                <div class="preview-item">
                    <span class="preview-label">Max Ads:</span>
                    <span class="preview-value" id="preview-max-ads">{{ adbreak.max_ads|default:'Not specified' }}</span>
                </div>
                <div class="preview-item">
                    <span class="preview-label">Status:</span>
                    <span class="preview-value" id="preview-status">
                        {% if adbreak.is_active or not adbreak.pk %}
                        <span class="badge bg-success">Active</span>
                        {% else %}
                        <span class="badge bg-secondary">Inactive</span>
                        {% endif %}
                    </span>
                </div>
                <div class="preview-item">
                    <span class="preview-label">Frequency:</span>
                    <span class="preview-value" id="preview-frequency">
                        {% if adbreak.repeats_daily %}
                        <span class="badge bg-info">Daily</span>
                        {% else %}
                        <span class="badge bg-light text-dark">One-time</span>
                        {% endif %}
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock content %}

{% block extra_js %}
<script src="{% static 'plugins/select2/js/select2.min.js' %}"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
$(document).ready(function() {
    // Initialize Select2
    $('.select2-show-search').select2({
        placeholder: 'Choose one',
        allowClear: true,
        width: '100%'
    });
    
    // Add Bootstrap classes to form elements
    $('input, select, textarea').addClass('form-control');
    $('select').removeClass('form-control').addClass('form-select');
    
    const AdbreakFormApp = {
        init() {
            this.bindEvents();
            this.updatePreview();
            this.calculateDuration();
        },
        
        bindEvents() {
            // Form input changes for live preview
            $('#id_name, #id_channel, #id_adbreak_type, #id_priority, #id_max_ads, #id_is_active, #id_repeats_daily').on('input change', () => {
                this.updatePreview();
            });
            
            // Time changes for duration calculation
            $('#id_start_time, #id_end_time').on('input change', () => {
                this.calculateDuration();
                this.updatePreview();
            });
            
            // Form submission
            $('#adbreakForm').on('submit', (e) => {
                e.preventDefault();
                this.handleSubmit();
            });
            
            // Delete button
            $('#deleteBtn').on('click', () => {
                this.handleDelete();
            });
        },
        
        calculateDuration() {
            const startTime = $('#id_start_time').val();
            const endTime = $('#id_end_time').val();
            
            if (startTime && endTime) {
                const start = new Date(`2000-01-01T${startTime}:00`);
                const end = new Date(`2000-01-01T${endTime}:00`);
                
                let duration = (end - start) / 1000; // Convert to seconds
                
                // Handle overnight adbreaks
                if (duration < 0) {
                    duration += 24 * 60 * 60; // Add 24 hours
                }
                
                $('#id_duration').val(Math.round(duration));
            } else {
                $('#id_duration').val('');
            }
        },
        
        updatePreview() {
            const name = $('#id_name').val() || 'New Adbreak';
            const channelText = $('#id_channel option:selected').text() || 'Not selected';
            const startTime = $('#id_start_time').val() || '--:--';
            const endTime = $('#id_end_time').val() || '--:--';
            const duration = $('#id_duration').val() || '0';
            const type = $('#id_adbreak_type option:selected').text() || 'Not selected';
            const priority = $('#id_priority option:selected').text() || 'Medium';
            const maxAds = $('#id_max_ads').val() || 'Not specified';
            const isActive = $('#id_is_active').is(':checked');
            const repeatsDaily = $('#id_repeats_daily').is(':checked');
            
            $('#preview-name').text(name);
            $('#preview-channel').text(channelText);
            $('#preview-time').text(`${startTime} - ${endTime}`);
            $('#preview-duration').text(`${duration} seconds`);
            $('#preview-type').text(type);
            $('#preview-priority').text(priority);
            $('#preview-max-ads').text(maxAds);
            $('#preview-status').html(isActive ? 
                '<span class="badge bg-success">Active</span>' : 
                '<span class="badge bg-secondary">Inactive</span>'
            );
            $('#preview-frequency').html(repeatsDaily ? 
                '<span class="badge bg-info">Daily</span>' : 
                '<span class="badge bg-light text-dark">One-time</span>'
            );
        },
        
        validateForm() {
            let isValid = true;
            
            // Clear previous validation
            $('.form-control, .form-select').removeClass('is-invalid is-valid');
            $('.invalid-feedback').text('');
            
            // Required fields validation
            const requiredFields = {
                'id_name': 'Adbreak name is required',
                'id_channel': 'Channel selection is required',
                'id_start_time': 'Start time is required',
                'id_end_time': 'End time is required',
                'id_adbreak_type': 'Adbreak type is required'
            };
            
            Object.entries(requiredFields).forEach(([fieldId, message]) => {
                const field = $(`#${fieldId}`);
                if (!field.val().trim()) {
                    field.addClass('is-invalid');
                    field.siblings('.invalid-feedback').text(message);
                    isValid = false;
                } else {
                    field.addClass('is-valid');
                }
            });
            
            // Time validation
            const startTime = $('#id_start_time').val();
            const endTime = $('#id_end_time').val();
            if (startTime && endTime && startTime === endTime) {
                $('#id_end_time').addClass('is-invalid');
                $('#id_end_time').siblings('.invalid-feedback').text('End time must be different from start time');
                isValid = false;
            }
            
            // Max ads validation
            const maxAds = $('#id_max_ads').val();
            if (maxAds && (maxAds < 1 || maxAds > 20)) {
                $('#id_max_ads').addClass('is-invalid');
                $('#id_max_ads').siblings('.invalid-feedback').text('Maximum ads must be between 1 and 20');
                isValid = false;
            }
            
            return isValid;
        },
        
        handleSubmit() {
            if (!this.validateForm()) {
                Swal.fire({
                    icon: 'error',
                    title: 'Validation Error',
                    text: 'Please fix the errors in the form before submitting.',
                    toast: true,
                    position: 'top-end',
                    showConfirmButton: false,
                    timer: 3000
                });
                return;
            }
            
            const submitBtn = $('#submitBtn');
            submitBtn.addClass('btn-loading').prop('disabled', true);
            
            // Submit the form
            document.getElementById('adbreakForm').submit();
        },
        
        handleDelete() {
            Swal.fire({
                title: 'Delete Adbreak?',
                text: 'This action cannot be undone. The adbreak will be permanently removed.',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#dc3545',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Yes, delete it!',
                cancelButtonText: 'Cancel'
            }).then((result) => {
                if (result.isConfirmed) {
                    const deleteBtn = $('#deleteBtn');
                    deleteBtn.addClass('btn-loading').prop('disabled', true);
                    
                    // Redirect to delete URL
                    window.location.href = "{% if adbreak.pk %}{% url 'channels:adbreak_delete' adbreak.pk %}{% endif %}";
                }
            });
        }
    };
    
    AdbreakFormApp.init();
});
</script>
{% endblock extra_js %}