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

{% load static %}

{% block title %}Delete Jingle - {{ jingle.name }}{% endblock %}

{% block extra_css %}
<style>
   .delete-card {
       border: 1px solid #dc3545;
       border-radius: 12px;
       box-shadow: 0 4px 15px rgba(220, 53, 69, 0.1);
   }
   
   .delete-header {
       background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
       color: white;
       border-radius: 12px 12px 0 0;
   }
   
   .warning-icon {
       font-size: 4rem;
       color: #dc3545;
       margin-bottom: 1rem;
   }
   
   .jingle-info {
       background: #f8f9fa;
       border-radius: 8px;
       padding: 20px;
       margin: 20px 0;
   }
   
   .info-row {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 8px 0;
       border-bottom: 1px solid #e9ecef;
   }
   
   .info-row:last-child {
       border-bottom: none;
   }
   
   .info-label {
       font-weight: 600;
       color: #495057;
   }
   
   .info-value {
       color: #6c757d;
   }
   
   .loading-spinner {
       display: inline-block;
       width: 20px;
       height: 20px;
       border: 3px solid #f3f3f3;
       border-top: 3px solid #ffffff;
       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;
   }
   
   .consequences-list {
       background: #fff3cd;
       border: 1px solid #ffeaa7;
       border-radius: 6px;
       padding: 15px;
       margin: 15px 0;
   }
   
   .consequences-list ul {
       margin-bottom: 0;
   }
   
   .consequences-list li {
       color: #856404;
       margin-bottom: 5px;
   }
</style>
{% endblock extra_css %}

{% block breadcrumb %}
<div class="page-header">
    <h1 class="page-title text-danger">
        <i class="fas fa-exclamation-triangle me-2"></i>
        Delete Jingle
    </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>
            <li class="breadcrumb-item"><a href="{% url 'channels:jingle_list' jingle.channel.pk %}">{{ jingle.channel.name }} Jingles</a></li>
            <li class="breadcrumb-item"><a href="{% url 'channels:jingle_detail' jingle.pk %}">{{ jingle.name }}</a></li>
            <li class="breadcrumb-item active" aria-current="page">Delete</li>
        </ol>
    </div>
</div>
{% endblock breadcrumb %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-lg-8 col-xl-6">
        <div class="card delete-card">
            <div class="card-header delete-header text-center py-4">
                <i class="fas fa-exclamation-triangle fa-3x mb-3"></i>
                <h3 class="mb-0">Confirm Deletion</h3>
                <p class="mb-0 mt-2 opacity-75">This action cannot be undone</p>
            </div>
            
            <div class="card-body text-center">
                <div class="warning-icon">
                    <i class="fas fa-music"></i>
                </div>
                
                <h4 class="mb-3">Are you sure you want to delete this jingle?</h4>
                
                <div class="jingle-info text-start">
                    <h6 class="mb-3"><i class="fas fa-info-circle me-2"></i>Jingle Information</h6>
                    
                    <div class="info-row">
                        <span class="info-label">Name:</span>
                        <span class="info-value">{{ jingle.name }}</span>
                    </div>
                    
                    <div class="info-row">
                        <span class="info-label">Channel:</span>
                        <span class="info-value">{{ jingle.channel.display_name|default:jingle.channel.name }}</span>
                    </div>
                    
                    <div class="info-row">
                        <span class="info-label">Type:</span>
                        <span class="info-value">{{ jingle.get_jingle_type_display|default:jingle.jingle_type }}</span>
                    </div>
                    
                    <div class="info-row">
                        <span class="info-label">Placement:</span>
                        <span class="info-value">{{ jingle.get_placement_display|default:jingle.placement }}</span>
                    </div>
                    
                    {% if jingle.duration %}
                    <div class="info-row">
                        <span class="info-label">Duration:</span>
                        <span class="info-value">{{ jingle.duration }} seconds</span>
                    </div>
                    {% endif %}
                    
                    <div class="info-row">
                        <span class="info-label">Status:</span>
                        <span class="info-value">
                            {% if jingle.is_active %}
                                <span class="badge bg-success">Active</span>
                            {% else %}
                                <span class="badge bg-secondary">Inactive</span>
                            {% endif %}
                        </span>
                    </div>
                </div>
                
                <div class="consequences-list">
                    <h6 class="mb-2"><i class="fas fa-exclamation-triangle me-2"></i>Consequences of deletion:</h6>
                    <ul class="text-start">
                        <li>The jingle file will be permanently removed from the system</li>
                        <li>Any playlists using this jingle will need to be updated</li>
                        <li>This action cannot be undone</li>
                        {% if jingle.is_active %}
                        <li class="text-warning"><strong>Warning:</strong> This is an active jingle currently in use</li>
                        {% endif %}
                    </ul>
                </div>
                
                <form id="deleteForm" method="post" class="mt-4">
                    {% csrf_token %}
                    
                    <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" id="confirmDelete" required>
                        <label class="form-check-label text-start" for="confirmDelete">
                            I understand that this action is permanent and cannot be undone
                        </label>
                    </div>
                    
                    <div class="d-flex justify-content-center gap-3">
                        <a href="{% url 'channels:jingle_detail' jingle.pk %}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left me-2"></i>Cancel
                        </a>
                        
                        <button type="submit" class="btn btn-danger" id="deleteBtn" disabled>
                            <i class="fas fa-trash me-2"></i>Delete Jingle
                        </button>
                    </div>
                </form>
            </div>
        </div>
        
        <div class="text-center mt-3">
            <small class="text-muted">
                <i class="fas fa-shield-alt me-1"></i>
                This confirmation step helps prevent accidental deletions
            </small>
        </div>
    </div>
</div>
{% endblock content %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
$(document).ready(function() {
    const DeleteJingleApp = {
        init() {
            this.bindEvents();
        },
        
        bindEvents() {
            // Enable/disable delete button based on checkbox
            $('#confirmDelete').on('change', function() {
                $('#deleteBtn').prop('disabled', !this.checked);
            });
            
            // Form submission
            $('#deleteForm').on('submit', (e) => {
                e.preventDefault();
                this.handleDelete();
            });
        },
        
        handleDelete() {
            Swal.fire({
                title: 'Final Confirmation',
                text: 'Are you absolutely sure you want to delete "{{ jingle.name }}"?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#dc3545',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Yes, delete permanently!',
                cancelButtonText: 'Cancel',
                reverseButtons: true,
                focusCancel: true
            }).then((result) => {
                if (result.isConfirmed) {
                    this.performDelete();
                }
            });
        },
        
        performDelete() {
            const deleteBtn = $('#deleteBtn');
            deleteBtn.addClass('btn-loading').prop('disabled', true);
            
            // Show loading state
            Swal.fire({
                title: 'Deleting Jingle...',
                text: 'Please wait while we remove the jingle from the system.',
                icon: 'info',
                allowOutsideClick: false,
                showConfirmButton: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });
            
            // Submit the form
            document.getElementById('deleteForm').submit();
        },
        
        showError(message) {
            Swal.fire({
                icon: 'error',
                title: 'Error!',
                text: message,
                confirmButtonColor: '#dc3545'
            });
        }
    };
    
    DeleteJingleApp.init();
    
    // Add keyboard shortcut for cancel (Escape key)
    $(document).on('keydown', function(e) {
        if (e.key === 'Escape') {
            window.location.href = "{% url 'channels:jingle_detail' jingle.pk %}";
        }
    });
    
    // Warn user before leaving page
    window.addEventListener('beforeunload', function(e) {
        if ($('#confirmDelete').is(':checked')) {
            const message = 'You have confirmed deletion but haven\'t completed it. Are you sure you want to leave?';
            e.returnValue = message;
            return message;
        }
    });
});
</script>
{% endblock extra_js %}