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

{% load static %}

{% block title %}Delete Channel - {{ channel.display_name|default:channel.name }}{% endblock %}

{% block extra_css %}
<style>
    .delete-card {
        border: none;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        border-radius: 8px;
        max-width: 600px;
        margin: 0 auto;
    }
    
    .delete-header {
        background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
        color: white;
        border-radius: 8px 8px 0 0;
        padding: 20px;
    }
    
    .warning-section {
        background: #fff3cd;
        border: 1px solid #ffeaa7;
        border-radius: 8px;
        padding: 20px;
        margin: 20px 0;
    }
    
    .channel-info {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 20px;
        margin: 20px 0;
    }
    
    .danger-list {
        list-style: none;
        padding: 0;
    }
    
    .danger-list li {
        padding: 8px 0;
        border-bottom: 1px solid #dee2e6;
    }
    
    .danger-list li:last-child {
        border-bottom: none;
    }
    
    .danger-list li i {
        color: #dc3545;
        margin-right: 10px;
    }
</style>
{% endblock extra_css %}

{% block breadcrumb %}
<div class="page-header">
    <h1 class="page-title">Delete Channel</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:channel_detail' channel.id %}">{{ channel.display_name|default:channel.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">
        <div class="card delete-card">
            <div class="delete-header">
                <div class="d-flex align-items-center">
                    <i class="fe fe-alert-triangle fe-2x me-3"></i>
                    <div>
                        <h4 class="mb-1">Delete Channel</h4>
                        <p class="mb-0 opacity-75">This action cannot be undone</p>
                    </div>
                </div>
            </div>
            
            <div class="card-body p-4">
                <!-- Channel Information -->
                <div class="channel-info">
                    <h5 class="mb-3">
                        <i class="fe fe-tv me-2 text-primary"></i>
                        {{ channel.display_name|default:channel.name }}
                    </h5>
                    
                    <div class="row g-3">
                        <div class="col-md-6">
                            <small class="text-muted d-block">Channel Name</small>
                            <strong>{{ channel.name }}</strong>
                        </div>
                        
                        {% if channel.channel_number %}
                        <div class="col-md-6">
                            <small class="text-muted d-block">Channel Number</small>
                            <strong>{{ channel.channel_number }}</strong>
                        </div>
                        {% endif %}
                        
                        <div class="col-md-6">
                            <small class="text-muted d-block">Type</small>
                            <strong>{{ channel.get_channel_type_display }}</strong>
                        </div>
                        
                        <div class="col-md-6">
                            <small class="text-muted d-block">Status</small>
                            <span class="badge {% if channel.status == 'active' %}bg-success{% elif channel.status == 'inactive' %}bg-danger{% else %}bg-warning text-dark{% endif %}">
                                {{ channel.get_status_display }}
                            </span>
                        </div>
                        
                        <div class="col-md-6">
                            <small class="text-muted d-block">Created</small>
                            <strong>{{ channel.created_at|date:"M d, Y" }}</strong>
                        </div>
                        
                        <div class="col-md-6">
                            <small class="text-muted d-block">Last Updated</small>
                            <strong>{{ channel.updated_at|date:"M d, Y" }}</strong>
                        </div>
                    </div>
                </div>
                
                <!-- Warning Section -->
                <div class="warning-section">
                    <div class="d-flex align-items-start">
                        <i class="fe fe-alert-triangle fe-2x text-warning me-3 mt-1"></i>
                        <div>
                            <h6 class="text-warning mb-2">Warning: Permanent Deletion</h6>
                            <p class="mb-3">You are about to permanently delete this channel. This action will also remove all associated data and cannot be undone.</p>
                            
                            <h6 class="text-danger mb-2">The following will be permanently deleted:</h6>
                            <ul class="danger-list">
                                <li>
                                    <i class="fe fe-map-pin"></i>
                                    <strong>{{ channel.zones.count }}</strong> Zone{{ channel.zones.count|pluralize }} associated with this channel
                                </li>
                                <li>
                                    <i class="fe fe-music"></i>
                                    All Jingles configured for this channel
                                </li>
                                <li>
                                    <i class="fe fe-play-circle"></i>
                                    All Adbreaks scheduled for this channel
                                </li>
                                <li>
                                    <i class="fe fe-activity"></i>
                                    All Health monitoring data and history
                                </li>
                                <li>
                                    <i class="fe fe-settings"></i>
                                    All channel configuration and settings
                                </li>
                                <li>
                                    <i class="fe fe-database"></i>
                                    All related logs and analytics data
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                
                <!-- Confirmation Form -->
                <form method="post" id="delete-form">
                    {% csrf_token %}
                    
                    <div class="mb-4">
                        <label for="confirmation" class="form-label fw-semibold">
                            <i class="fe fe-type me-1"></i>
                            Type the channel name <strong>"{{ channel.name }}"</strong> to confirm deletion:
                        </label>
                        <input type="text" class="form-control" id="confirmation" name="confirmation" 
                               placeholder="Enter channel name to confirm" required>
                        <div class="invalid-feedback" id="confirmation-error">
                            Channel name does not match. Please type exactly: {{ channel.name }}
                        </div>
                    </div>
                    
                    <div class="form-check mb-4">
                        <input class="form-check-input" type="checkbox" id="understand" name="understand" required>
                        <label class="form-check-label" for="understand">
                            I understand that this action is permanent and cannot be undone
                        </label>
                        <div class="invalid-feedback">
                            You must acknowledge that you understand this action is permanent
                        </div>
                    </div>
                    
                    <!-- Form Actions -->
                    <div class="d-flex justify-content-between align-items-center pt-3 border-top">
                        <a href="{% url 'channels:channel_detail' channel.id %}" class="btn btn-outline-secondary">
                            <i class="fe fe-arrow-left me-1"></i> Cancel
                        </a>
                        
                        <button type="submit" class="btn btn-danger" id="delete-btn" disabled>
                            <i class="fe fe-trash-2 me-1"></i> Delete Channel Permanently
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock content %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const confirmationInput = document.getElementById('confirmation');
    const understandCheckbox = document.getElementById('understand');
    const deleteBtn = document.getElementById('delete-btn');
    const deleteForm = document.getElementById('delete-form');
    const expectedName = '{{ channel.name|escapejs }}';
    
    function validateForm() {
        const nameMatches = confirmationInput.value === expectedName;
        const understood = understandCheckbox.checked;
        
        // Update confirmation input validation
        if (confirmationInput.value && !nameMatches) {
            confirmationInput.classList.add('is-invalid');
        } else {
            confirmationInput.classList.remove('is-invalid');
        }
        
        // Enable/disable delete button
        deleteBtn.disabled = !(nameMatches && understood);
        
        // Update button appearance
        if (nameMatches && understood) {
            deleteBtn.classList.remove('btn-outline-danger');
            deleteBtn.classList.add('btn-danger');
        } else {
            deleteBtn.classList.remove('btn-danger');
            deleteBtn.classList.add('btn-outline-danger');
        }
    }
    
    // Bind validation to input events
    confirmationInput.addEventListener('input', validateForm);
    understandCheckbox.addEventListener('change', validateForm);
    
    // Form submission validation
    deleteForm.addEventListener('submit', function(e) {
        const nameMatches = confirmationInput.value === expectedName;
        const understood = understandCheckbox.checked;
        
        if (!nameMatches || !understood) {
            e.preventDefault();
            
            if (!nameMatches) {
                confirmationInput.classList.add('is-invalid');
                confirmationInput.focus();
            }
            
            if (!understood) {
                understandCheckbox.classList.add('is-invalid');
            }
            
            return false;
        }
        
        // Show loading state
        deleteBtn.disabled = true;
        deleteBtn.innerHTML = '<i class="fe fe-loader me-1 fa-spin"></i> Deleting...';
        
        return true;
    });
    
    // Initial validation
    validateForm();
});
</script>
{% endblock extra_js %}