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

{% load static %}

{% block title %}Delete Adbreak - {{ adbreak.name }}{% endblock %}

{% block extra_css %}
<style>
    /* Delete confirmation card */
    .delete-card {
        background: #fff;
        border: 1px solid #dee2e6;
        border-radius: 12px;
        padding: 30px;
        margin: 20px auto;
        max-width: 600px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .warning-icon {
        width: 80px;
        height: 80px;
        background: linear-gradient(135deg, #ff6b6b, #ee5a24);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px;
        color: white;
        font-size: 2rem;
    }

    .adbreak-info {
        background: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        padding: 20px;
        margin: 20px 0;
    }

    .adbreak-detail {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #e9ecef;
    }

    .adbreak-detail:last-child {
        border-bottom: none;
    }

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

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

    /* Loading spinner */
    .loading-spinner {
        display: inline-block;
        width: 20px;
        height: 20px;
        border: 3px solid #f3f3f3;
        border-top: 3px solid #dc3545;
        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 */
    .consequences-list {
        background: #fff3cd;
        border: 1px solid #ffeaa7;
        border-radius: 8px;
        padding: 15px;
        margin: 20px 0;
    }

    .consequences-list h6 {
        color: #856404;
        margin-bottom: 10px;
    }

    .consequences-list ul {
        margin: 0;
        padding-left: 20px;
    }

    .consequences-list li {
        color: #856404;
        margin-bottom: 5px;
    }

    /* Badge styles */
    .priority-badge {
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
    }

    .priority-low { background-color: #d1ecf1; color: #0c5460; }
    .priority-medium { background-color: #fff3cd; color: #856404; }
    .priority-high { background-color: #f8d7da; color: #721c24; }
    .priority-critical { background-color: #d4edda; color: #155724; }

    .time-display {
        font-family: 'Courier New', monospace;
        font-weight: bold;
        color: #007bff;
    }
</style>
{% endblock extra_css %}

{% block breadcrumb %}
<div class="page-header">
    <h1 class="page-title">Delete Adbreak</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:adbreak_list' adbreak.channel.pk %}">{{ adbreak.channel.name }} Adbreaks</a></li>
            <li class="breadcrumb-item"><a href="{% url 'channels:adbreak_detail' adbreak.pk %}">{{ adbreak.name }}</a></li>
            <li class="breadcrumb-item active" aria-current="page">Delete</li>
        </ol>
    </div>
</div>
{% endblock breadcrumb %}

{% block content %}
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="delete-card">
                <div class="text-center">
                    <div class="warning-icon">
                        <i class="fas fa-exclamation-triangle"></i>
                    </div>
                    <h2 class="text-danger mb-3">Delete Adbreak</h2>
                    <p class="lead text-muted mb-4">
                        You are about to permanently delete this adbreak. This action cannot be undone.
                    </p>
                </div>

                <div class="adbreak-info">
                    <h5 class="mb-3">
                        <i class="fas fa-ad me-2"></i>{{ adbreak.name }}
                    </h5>
                    
                    <div class="adbreak-detail">
                        <span class="detail-label">
                            <i class="fas fa-tv me-2"></i>Channel
                        </span>
                        <span class="detail-value">{{ adbreak.channel.display_name|default:adbreak.channel.name }}</span>
                    </div>
                    
                    <div class="adbreak-detail">
                        <span class="detail-label">
                            <i class="fas fa-clock me-2"></i>Time Slot
                        </span>
                        <span class="detail-value time-display">
                            {{ adbreak.start_time|time:"H:i" }} - {{ adbreak.end_time|time:"H:i" }}
                        </span>
                    </div>
                    
                    <div class="adbreak-detail">
                        <span class="detail-label">
                            <i class="fas fa-stopwatch me-2"></i>Duration
                        </span>
                        <span class="detail-value">{{ adbreak.duration }} seconds</span>
                    </div>
                    
                    <div class="adbreak-detail">
                        <span class="detail-label">
                            <i class="fas fa-tag me-2"></i>Type
                        </span>
                        <span class="detail-value">{{ adbreak.get_adbreak_type_display|default:adbreak.adbreak_type }}</span>
                    </div>
                    
                    <div class="adbreak-detail">
                        <span class="detail-label">
                            <i class="fas fa-exclamation-triangle me-2"></i>Priority
                        </span>
                        <span class="detail-value">
                            <span class="priority-badge priority-{{ adbreak.priority|default:'medium' }}">
                                {{ adbreak.get_priority_display|default:adbreak.priority|default:'Medium' }}
                            </span>
                        </span>
                    </div>
                    
                    {% if adbreak.max_ads %}
                    <div class="adbreak-detail">
                        <span class="detail-label">
                            <i class="fas fa-list-ol me-2"></i>Max Ads
                        </span>
                        <span class="detail-value">{{ adbreak.max_ads }}</span>
                    </div>
                    {% endif %}
                    
                    <div class="adbreak-detail">
                        <span class="detail-label">
                            <i class="fas fa-repeat me-2"></i>Frequency
                        </span>
                        <span class="detail-value">
                            {% 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 class="adbreak-detail">
                        <span class="detail-label">
                            <i class="fas fa-toggle-on me-2"></i>Status
                        </span>
                        <span class="detail-value">
                            {% if adbreak.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><i class="fas fa-exclamation-circle me-2"></i>What will happen:</h6>
                    <ul>
                        <li>The adbreak "{{ adbreak.name }}" will be permanently removed</li>
                        <li>Any scheduled ads for this time slot will be unassigned</li>
                        {% if adbreak.repeats_daily %}
                        <li>Daily recurring schedule will be cancelled</li>
                        {% endif %}
                        <li>This action cannot be undone</li>
                        <li>You will need to recreate the adbreak if needed later</li>
                    </ul>
                </div>

                <form method="post" id="deleteForm">
                    {% csrf_token %}
                    <div class="d-flex justify-content-center gap-3 mt-4">
                        <button type="button" class="btn btn-secondary btn-lg" id="cancelBtn">
                            <i class="fas fa-times me-2"></i>Cancel
                        </button>
                        <button type="submit" class="btn btn-danger btn-lg" id="confirmDeleteBtn">
                            <i class="fas fa-trash me-2"></i>Yes, Delete Adbreak
                        </button>
                    </div>
                </form>

                <div class="text-center mt-3">
                    <small class="text-muted">
                        <i class="fas fa-info-circle me-1"></i>
                        You can press <kbd>Esc</kbd> to cancel or <kbd>Enter</kbd> to confirm
                    </small>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock content %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
$(document).ready(function() {
    const DeleteAdbreakApp = {
        init() {
            this.bindEvents();
            this.setupKeyboardShortcuts();
            this.setupBeforeUnload();
        },
        
        bindEvents() {
            $('#deleteForm').on('submit', (e) => {
                e.preventDefault();
                this.handleFinalConfirmation();
            });
            
            $('#cancelBtn').on('click', () => {
                this.handleCancel();
            });
        },
        
        setupKeyboardShortcuts() {
            $(document).on('keydown', (e) => {
                if (e.key === 'Escape') {
                    e.preventDefault();
                    this.handleCancel();
                } else if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
                    e.preventDefault();
                    this.handleFinalConfirmation();
                }
            });
        },
        
        setupBeforeUnload() {
            window.addEventListener('beforeunload', (e) => {
                e.preventDefault();
                e.returnValue = 'Are you sure you want to leave? The adbreak deletion will be cancelled.';
            });
        },
        
        handleCancel() {
            Swal.fire({
                title: 'Cancel Deletion?',
                text: 'The adbreak will not be deleted.',
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#6c757d',
                cancelButtonColor: '#dc3545',
                confirmButtonText: 'Yes, cancel',
                cancelButtonText: 'Continue deleting',
                reverseButtons: true
            }).then((result) => {
                if (result.isConfirmed) {
                    window.location.href = "{% url 'channels:adbreak_detail' adbreak.pk %}";
                }
            });
        },
        
        handleFinalConfirmation() {
            Swal.fire({
                title: 'Final Confirmation',
                html: `
                    <div class="text-start">
                        <p class="text-danger"><strong>This is your last chance to cancel!</strong></p>
                        <p>You are about to permanently delete:</p>
                        <div class="alert alert-danger">
                            <strong>{{ adbreak.name }}</strong><br>
                            <small>{{ adbreak.channel.name }} - {{ adbreak.start_time|time:"H:i" }} to {{ adbreak.end_time|time:"H:i" }}</small>
                        </div>
                        <p>Type <strong>DELETE</strong> to confirm:</p>
                    </div>
                `,
                input: 'text',
                inputPlaceholder: 'Type DELETE to confirm',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#dc3545',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Delete Forever',
                cancelButtonText: 'Cancel',
                reverseButtons: true,
                focusCancel: true,
                preConfirm: (value) => {
                    if (value !== 'DELETE') {
                        Swal.showValidationMessage('You must type DELETE to confirm');
                        return false;
                    }
                    return true;
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    this.performDelete();
                }
            });
        },
        
        performDelete() {
            const confirmBtn = $('#confirmDeleteBtn');
            confirmBtn.addClass('btn-loading').prop('disabled', true);
            
            // Show loading state
            Swal.fire({
                title: 'Deleting Adbreak...',
                html: 'Please wait while we permanently delete the adbreak.',
                allowOutsideClick: false,
                allowEscapeKey: false,
                showConfirmButton: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });
            
            // Remove beforeunload listener
            window.removeEventListener('beforeunload', this.beforeUnloadHandler);
            
            // Submit the form
            document.getElementById('deleteForm').submit();
        },
        
        beforeUnloadHandler(e) {
            e.preventDefault();
            e.returnValue = 'Are you sure you want to leave? The adbreak deletion will be cancelled.';
        }
    };
    
    DeleteAdbreakApp.init();
    
    // Auto-focus on cancel button for safety
    $('#cancelBtn').focus();
});
</script>
{% endblock extra_js %}