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

{% load static %} 

{% block title %} New Jingle {% endblock %}


{% block extra_css %}
<style>
	.card-header {
		background-color: #f8f9fa;
		border-bottom: 1px solid #dee2e6;
	}

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

	.text-danger {
		color: #dc3545 !important;
	}

	.file-browser input[type="file"] {
		position: absolute;
		left: -9999px;
	}

	#mediaPreview {
		animation: fadeIn 0.3s ease-in;
	}

	@keyframes fadeIn {
		from { opacity: 0; transform: translateY(-10px); }
		to { opacity: 1; transform: translateY(0); }
	}

	.spinner-border-sm {
		width: 1rem;
		height: 1rem;
	}

	.form-check-input:checked {
		background-color: #28a745;
		border-color: #28a745;
	}

	.select2-container {
		width: 100% !important;
	}

	small.text-muted {
		font-size: 0.875em;
	}

	.media-preview {
		max-width: 100%;
		max-height: 300px;
	}

	.file-info {
		display: flex;
		align-items: center;
		gap: 10px;
		margin-top: 10px;
	}

	.file-type-icon {
		font-size: 1.5rem;
	}

	.status-toggle {
		background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
		border: 2px solid #dee2e6;
		border-radius: 12px;
		padding: 16px 20px;
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;
	}

	.status-toggle:hover {
		border-color: #28a745;
		box-shadow: 0 4px 12px rgba(40, 167, 69, 0.15);
	}

	.status-toggle::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(40, 167, 69, 0.1), transparent);
		transition: left 0.5s ease;
	}

	.status-toggle:hover::before {
		left: 100%;
	}

	.status-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		z-index: 1;
	}

	.status-info {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.status-icon {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: linear-gradient(135deg, #28a745, #20c997);
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		font-size: 1.2rem;
		box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
	}

	.status-text {
		display: flex;
		flex-direction: column;
		gap: 2px;
	}

	.status-label {
		font-weight: 600;
		color: #495057;
		font-size: 1rem;
	}

	.status-description {
		font-size: 0.875em;
		color: #6c757d;
		margin: 0;
	}

	.modern-switch {
		position: relative;
		width: 60px;
		height: 32px;
	}

	.modern-switch input {
		opacity: 0;
		width: 0;
		height: 0;
		position: absolute;
	}

	.modern-switch input.form-check-input {
		opacity: 0 !important;
		width: 0 !important;
		height: 0 !important;
		position: absolute !important;
		pointer-events: none;
	}

	.switch-slider {
		position: absolute;
		cursor: pointer;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(135deg, #dc3545, #e74c3c);
		transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
		border-radius: 32px;
		box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
	}

	.switch-slider:before {
		position: absolute;
		content: "";
		height: 24px;
		width: 24px;
		left: 4px;
		bottom: 4px;
		background: white;
		transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
		border-radius: 50%;
		box-shadow: 0 2px 8px rgba(0,0,0,0.2);
	}

	.modern-switch input:checked + .switch-slider {
		background: linear-gradient(135deg, #28a745, #20c997);
		box-shadow: 0 0 20px rgba(40, 167, 69, 0.3);
	}

	.modern-switch input:checked + .switch-slider:before {
		transform: translateX(28px);
		box-shadow: 0 2px 12px rgba(40, 167, 69, 0.4);
	}

	.switch-slider::after {
		content: '✕';
		position: absolute;
		top: 50%;
		left: 8px;
		transform: translateY(-50%);
		color: white;
		font-size: 12px;
		font-weight: bold;
		opacity: 1;
		transition: opacity 0.3s ease;
	}

	.modern-switch input:checked + .switch-slider::after {
		content: '✓';
		left: auto;
		right: 8px;
		opacity: 1;
	}
</style>
{% endblock extra_css %}  

{% block breadcrumb %}
<div class="page-header">
    <h1 class="page-title"> New Jingle </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);">Jingles</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 method="post" action="{% url 'channels:add_jingle' %}" enctype="multipart/form-data" id="jingleForm">
            {% csrf_token %}
            <!-- Basic Information Card -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fe fe-info me-2"></i>
						Basic Information
                    </h3>
                </div>
                <div class="card-body pb-2">
                    <div class="row row-sm mb-4">
                        <div class="col-lg-6">
                            <label class="form-label">
                                Jingle Name 
								<span class="text-danger">*</span>
                            </label>
                            <input class="form-control" placeholder="Enter jingle name (e.g., Morning Show Intro)" name="name" type="text" required maxlength="255" />
                            <small class="text-muted">Human-readable name for this jingle</small>
                        </div>

                        <div class="col-lg-6">
                            <label class="form-label">
                                Channel 
								<span class="text-danger">*</span>
                            </label>
                            <select class="form-control select2-show-search form-select" name="channel" data-placeholder="Choose a channel" required>
                                <option label="Choose a channel"></option>
                                {% for channel in channels %}
                                    <option value="{{channel.id_channel}}">{{channel.channel_name}}</option>
                                {% endfor %}
                            </select>
                            <small class="text-muted">Channel this jingle belongs to</small>
                        </div>
                    </div>
                    
                    <div class="row row-sm mb-4">
                        <div class="col-lg-4">
                            <label class="form-label">
                                Jingle Type 
								<span class="text-danger">*</span>
                            </label>
                            <select class="form-control select2-show-search form-select" name="jingle_type" data-placeholder="Choose jingle type" required>
                                <option value="">Choose jingle type</option>
                                <option value="station_id">Station ID</option>
                                <option value="bumper">Bumper</option>
                                <option value="promo">Promo</option>
                                <option value="transition">Transition</option>
                                <option value="commercial_break">Commercial Break</option>
                                <option value="news_intro">News Intro</option>
                                <option value="weather_intro">Weather Intro</option>
                                <option value="sports_intro">Sports Intro</option>
                                <option value="music_intro">Music Intro</option>
                                <option value="show_opener">Show Opener</option>
                                <option value="show_closer">Show Closer</option>
                            </select>
                            <small class="text-muted">Type of jingle content</small>
                        </div>

                        <div class="col-lg-4">
                            <label class="form-label">
                                Placement Type 
								<span class="text-danger">*</span>
                            </label>
                            <select class="form-control select2-show-search form-select" name="placement_type" data-placeholder="Choose placement" required>
                                <option value="random" selected>Random Placement</option>
                                <option value="start">Start of Show</option>
                                <option value="end">End of Show</option>
                                <option value="commercial_start">Start of Commercial Break</option>
                                <option value="commercial_end">End of Commercial Break</option>
                                <option value="program_transition">Program Transition</option>
                                <option value="segment_transition">Segment Transition</option>
                                <option value="hourly">Hourly</option>
                                <option value="half_hourly">Half Hourly</option>
                                <option value="quarter_hourly">Quarter Hourly</option>
                                <option value="top_of_hour">Top of Hour</option>
                                <option value="bottom_of_hour">Bottom of Hour</option>
                                <option value="manual">Manual Only</option>
                            </select>
                            <small class="text-muted">When this jingle should be played</small>
                        </div>

                        <div class="col-lg-4">
                            <label class="form-label">
                                Priority Level
                            </label>
                            <select class="form-control select2-show-search form-select" name="priority" data-placeholder="Choose priority">
                                <option value="1">Very Low</option>
                                <option value="2">Low</option>
                                <option value="3" selected>Normal</option>
                                <option value="4">High</option>
                                <option value="5">Very High</option>
                                <option value="6">Critical</option>
                            </select>
                            <small class="text-muted">Priority level for jingle selection</small>
                        </div>
                    </div>

                    <div class="row row-sm mb-4">
                        <div class="col-lg-4">
                            <div class="status-toggle">
                                <div class="status-content">
                                    <div class="status-info">
                                        <div class="status-icon">
                                            <i class="fe fe-power"></i>
                                        </div>
                                        <div class="status-text">
                                            <div class="status-label">Jingle Status</div>
                                            <small class="status-description">Toggle to activate/deactivate this jingle for broadcasting</small>
                                        </div>
                                    </div>
                                    <div class="modern-switch">
                                        <input type="checkbox" name="is_active" id="is_active" value="1" checked class="form-check-input" />
                                        <span class="switch-slider"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- File Upload Card -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fe fe-upload me-2"></i>
						Jingle File Upload
                    </h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-lg-12">
                            <label class="form-label">
                                Jingle File 
								<span class="text-danger">*</span>
                            </label>
                            <div class="input-group mb-3 file-browser">
                                <input type="text" class="form-control browse-file" placeholder="Choose video file" readonly required />
                                <label class="input-group-text btn btn-primary">
                                    <i class="fe fe-upload me-2"></i>
									Browse 
                                    <input id="file" type="file" class="file-browser-input" name="file" style="display: none;" 
                                           accept=".mp4,.ts,.avi,.mkv,.mov,.wmv,.flv,.webm" required/>
                                </label>
                            </div>
                            <small class="text-muted">
                                Supported formats: Video (MP4, TS, AVI, MKV, MOV, WMV, FLV, WebM) - Max size: 100MB
                            </small>
                            
                            <!-- Media Preview (hidden initially) -->
                            <div id="mediaPreview" class="mt-3" style="display: none;">
                                <div class="card card-body bg-light">
                                    <h6 class="mb-2">Video Preview</h6>
                                    
                                    <!-- Video Player -->
                                    <video controls class="w-100 media-preview" id="videoPlayer">
                                        Your browser does not support the video element.
                                    </video>
                                    
                                    <div class="file-info mt-2">
                                        <span class="file-type-icon" id="fileTypeIcon">🎥</span>
                                        <div>
                                            <small class="text-muted">
                                                <strong id="fileName"></strong><br>
                                                Size: <span id="fileSize"></span> | 
                                                Type: <span id="fileType"></span> |
                                                Duration: <span id="fileDuration">Loading...</span>
                                            </small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
 
            <!-- Submit Button -->
            <div class="card">
                <div class="card-body text-center"> 
                    <button type="submit" 
                            class="btn btn-primary" 
                            id="submitBtn">
                        <i class="fe fe-save me-2"></i>Create
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
{% endblock content %}  

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // File browser functionality
    const fileInput = document.getElementById('file');
    const browseFileInput = document.querySelector('.browse-file');
    const mediaPreview = document.getElementById('mediaPreview');
    const videoPlayer = document.getElementById('videoPlayer');
    const fileName = document.getElementById('fileName');
    const fileSize = document.getElementById('fileSize');
    const fileType = document.getElementById('fileType');
    const fileDuration = document.getElementById('fileDuration');
    
    // Handle file selection
    fileInput.addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            // Update file input display
            browseFileInput.value = file.name;
            
            // Validate file first
            if (!validateFile(file)) {
                resetFileInput();
                return;
            }
            
            // Show preview
            mediaPreview.style.display = 'block';
            fileName.textContent = file.name;
            fileSize.textContent = formatFileSize(file.size);
            fileType.textContent = file.type || getFileTypeFromExtension(file.name);
            
            // Create video preview
            const fileURL = URL.createObjectURL(file);
            showVideoPreview(fileURL);
            
        } else {
            resetFileInput();
        }
    });
    
    // Show video preview
    function showVideoPreview(fileURL) {
        videoPlayer.src = fileURL;
        
        videoPlayer.addEventListener('loadedmetadata', function() {
            const duration = formatDuration(videoPlayer.duration);
            fileDuration.textContent = duration;
        });
        
        videoPlayer.addEventListener('error', function() {
            fileDuration.textContent = 'Unable to load';
        });
    }
    
    // Check if file is video
    function isVideoFile(file) {
        const videoTypes = ['video/mp4', 'video/quicktime', 'video/x-msvideo', 'video/x-ms-wmv', 
                           'video/x-flv', 'video/webm', 'video/x-matroska', 'video/MP2T'];
        const videoExtensions = ['.mp4', '.ts', '.avi', '.mkv', '.mov', '.wmv', '.flv', '.webm'];
        
        return videoTypes.includes(file.type) || 
               videoExtensions.some(ext => file.name.toLowerCase().endsWith(ext));
    }
    
    // Validate file
    function validateFile(file) {
        // Check if it's a valid video file
        if (!isVideoFile(file)) {
            alert('Please select a valid video file.\nSupported formats: MP4, TS, AVI, MKV, MOV, WMV, FLV, WebM');
            return false;
        }
        
        // Validate file size (100MB limit)
        const maxSize = 100 * 1024 * 1024; // 100MB
        if (file.size > maxSize) {
            alert('File size must be less than 100MB. Current file size: ' + formatFileSize(file.size));
            return false;
        }
        
        return true;
    }
    
    // Get file type from extension
    function getFileTypeFromExtension(filename) {
        const extension = filename.toLowerCase().substring(filename.lastIndexOf('.'));
        const typeMap = {
            '.mp4': 'video/mp4',
            '.ts': 'video/MP2T',
            '.avi': 'video/x-msvideo',
            '.mkv': 'video/x-matroska',
            '.mov': 'video/quicktime',
            '.wmv': 'video/x-ms-wmv',
            '.flv': 'video/x-flv',
            '.webm': 'video/webm'
        };
        return typeMap[extension] || 'Unknown';
    }
    
    // Format file size
    function formatFileSize(bytes) {
        if (bytes === 0) return '0 Bytes';
        const k = 1024;
        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
    }
    
    // Format duration
    function formatDuration(seconds) {
        if (isNaN(seconds) || seconds === 0) return '0:00';
        
        const hours = Math.floor(seconds / 3600);
        const minutes = Math.floor((seconds % 3600) / 60);
        const secs = Math.floor(seconds % 60);
        
        if (hours > 0) {
            return `${hours}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
        } else {
            return `${minutes}:${secs.toString().padStart(2, '0')}`;
        }
    }
    
    // Reset file input
    function resetFileInput() {
        fileInput.value = '';
        browseFileInput.value = '';
        mediaPreview.style.display = 'none';
        videoPlayer.src = '';
        fileDuration.textContent = 'Loading...';
    }
    
    // Form validation
    document.getElementById('jingleForm').addEventListener('submit', function(e) {
        const submitBtn = document.getElementById('submitBtn');
        
        // Additional validation before submit
        if (!fileInput.files[0]) {
            e.preventDefault();
            alert('Please select a video file before submitting.');
            return false;
        }
        
        // Disable submit button to prevent double submission
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<i class="fe fe-loader me-2 spinner-border spinner-border-sm"></i>Creating Jingle...';
        
        // Re-enable button after 5 seconds in case of error
        setTimeout(() => {
            submitBtn.disabled = false;
            submitBtn.innerHTML = '<i class="fe fe-save me-2"></i>Create Jingle';
        }, 5000);
    });
    
    // Jingle type change handler
    document.querySelector('select[name="jingle_type"]').addEventListener('change', function() {
        const placementSelect = document.querySelector('select[name="placement_type"]');
        const jingleType = this.value;
        
        // Auto-suggest placement based on jingle type
        const suggestions = {
            'station_id': 'top_of_hour',
            'news_intro': 'start',
            'weather_intro': 'start',
            'sports_intro': 'start',
            'music_intro': 'start',
            'show_opener': 'start',
            'show_closer': 'end',
            'commercial_break': 'commercial_start',
            'bumper': 'program_transition'
        };
        
        if (suggestions[jingleType]) {
            placementSelect.value = suggestions[jingleType];
        }
    });
    
    // Clean up object URLs to prevent memory leaks
    window.addEventListener('beforeunload', function() {
        if (videoPlayer.src && videoPlayer.src.startsWith('blob:')) {
            URL.revokeObjectURL(videoPlayer.src);
        }
    });
});
</script>
{% endblock extra_js %}