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

{% load static %}

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

{% block extra_css %}
<style>
    /* Card styles */
    .info-card {
        background: #fff;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 20px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .info-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid #f1f3f4;
    }

    .info-item:last-child {
        border-bottom: none;
    }

    .info-label {
        font-weight: 600;
        color: #495057;
        min-width: 120px;
    }

    .info-value {
        color: #6c757d;
        text-align: right;
        flex: 1;
    }

    /* Badge styles */
    .status-badge {
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 0.875rem;
        font-weight: 500;
    }

    .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; }

    .type-badge {
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 0.75rem;
        font-weight: 500;
        background-color: #e9ecef;
        color: #495057;
    }

    /* Action buttons */
    .action-buttons {
        margin-top: 20px;
    }

    .btn-group .btn {
        margin-right: 10px;
    }

    .btn-group .btn:last-child {
        margin-right: 0;
    }

    /* 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); }
    }

    /* Time display */
    .time-display {
        font-family: 'Courier New', monospace;
        font-size: 1.1em;
        font-weight: bold;
        color: #007bff;
    }

    .duration-display {
        font-weight: 600;
        color: #28a745;
    }

    /* Stats cards */
    .stats-card {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 20px;
    }

    .stats-card h4 {
        margin: 0;
        font-size: 2rem;
        font-weight: 700;
    }

    .stats-card p {
        margin: 5px 0 0 0;
        opacity: 0.9;
    }
</style>
{% endblock extra_css %}

{% block breadcrumb %}
<div class="page-header">
    <h1 class="page-title">{{ adbreak.name }}</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 active" aria-current="page">{{ adbreak.name }}</li>
        </ol>
    </div>
</div>
{% endblock breadcrumb %}

{% block content %}
<div class="row">
    <div class="col-lg-8">
        <div class="info-card">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h3 class="card-title mb-0">
                    <i class="fas fa-ad me-2"></i>{{ adbreak.name }}
                </h3>
                <div>
                    {% if adbreak.is_active %}
                    <span class="status-badge bg-success text-white">
                        <i class="fas fa-check-circle me-1"></i>Active
                    </span>
                    {% else %}
                    <span class="status-badge bg-secondary text-white">
                        <i class="fas fa-pause-circle me-1"></i>Inactive
                    </span>
                    {% endif %}
                </div>
            </div>

            <div class="info-item">
                <span class="info-label">
                    <i class="fas fa-tv me-2"></i>Channel
                </span>
                <span class="info-value">
                    <a href="{% url 'channels:channel_detail' adbreak.channel.pk %}" class="text-decoration-none">
                        {{ adbreak.channel.display_name|default:adbreak.channel.name }}
                    </a>
                </span>
            </div>

            <div class="info-item">
                <span class="info-label">
                    <i class="fas fa-clock me-2"></i>Start Time
                </span>
                <span class="info-value time-display">{{ adbreak.start_time|time:"H:i" }}</span>
            </div>

            <div class="info-item">
                <span class="info-label">
                    <i class="fas fa-clock me-2"></i>End Time
                </span>
                <span class="info-value time-display">{{ adbreak.end_time|time:"H:i" }}</span>
            </div>

            <div class="info-item">
                <span class="info-label">
                    <i class="fas fa-stopwatch me-2"></i>Duration
                </span>
                <span class="info-value duration-display">{{ adbreak.duration }} seconds</span>
            </div>

            <div class="info-item">
                <span class="info-label">
                    <i class="fas fa-tag me-2"></i>Type
                </span>
                <span class="info-value">
                    <span class="type-badge">{{ adbreak.get_adbreak_type_display|default:adbreak.adbreak_type }}</span>
                </span>
            </div>

            <div class="info-item">
                <span class="info-label">
                    <i class="fas fa-exclamation-triangle me-2"></i>Priority
                </span>
                <span class="info-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="info-item">
                <span class="info-label">
                    <i class="fas fa-list-ol me-2"></i>Max Ads
                </span>
                <span class="info-value">{{ adbreak.max_ads }}</span>
            </div>
            {% endif %}

            <div class="info-item">
                <span class="info-label">
                    <i class="fas fa-repeat me-2"></i>Frequency
                </span>
                <span class="info-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>

            {% if adbreak.description %}
            <div class="info-item">
                <span class="info-label">
                    <i class="fas fa-align-left me-2"></i>Description
                </span>
                <span class="info-value">{{ adbreak.description }}</span>
            </div>
            {% endif %}

            <div class="info-item">
                <span class="info-label">
                    <i class="fas fa-calendar-plus me-2"></i>Created
                </span>
                <span class="info-value">{{ adbreak.created_at|date:"M d, Y H:i" }}</span>
            </div>

            {% if adbreak.updated_at %}
            <div class="info-item">
                <span class="info-label">
                    <i class="fas fa-edit me-2"></i>Last Updated
                </span>
                <span class="info-value">{{ adbreak.updated_at|date:"M d, Y H:i" }}</span>
            </div>
            {% endif %}
        </div>

        <div class="action-buttons">
            <div class="btn-group" role="group">
                <a href="{% url 'channels:adbreak_update' adbreak.pk %}" class="btn btn-primary">
                    <i class="fas fa-edit me-2"></i>Edit Adbreak
                </a>
                <a href="{% url 'channels:adbreak_list' adbreak.channel.pk %}" class="btn btn-secondary">
                    <i class="fas fa-list me-2"></i>Back to List
                </a>
                <button type="button" class="btn btn-danger" id="deleteBtn">
                    <i class="fas fa-trash me-2"></i>Delete
                </button>
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="stats-card">
            <h4>{{ adbreak.duration }}</h4>
            <p>Seconds Duration</p>
        </div>

        {% if adbreak.max_ads %}
        <div class="info-card">
            <h5><i class="fas fa-chart-bar me-2"></i>Ad Capacity</h5>
            <div class="info-item">
                <span class="info-label">Maximum Ads</span>
                <span class="info-value">{{ adbreak.max_ads }}</span>
            </div>
            <div class="info-item">
                <span class="info-label">Avg. Ad Duration</span>
                <span class="info-value">{{ adbreak.duration|floatformat:0|add:0|div:adbreak.max_ads|floatformat:0 }}s</span>
            </div>
        </div>
        {% endif %}

        <div class="info-card">
            <h5><i class="fas fa-info-circle me-2"></i>Quick Info</h5>
            <div class="info-item">
                <span class="info-label">Status</span>
                <span class="info-value">
                    {% if adbreak.is_active %}
                    <span class="badge bg-success">Active</span>
                    {% else %}
                    <span class="badge bg-secondary">Inactive</span>
                    {% endif %}
                </span>
            </div>
            <div class="info-item">
                <span class="info-label">Schedule</span>
                <span class="info-value">
                    {% if adbreak.repeats_daily %}
                    <span class="badge bg-info">Daily at {{ adbreak.start_time|time:"H:i" }}</span>
                    {% else %}
                    <span class="badge bg-warning">One-time</span>
                    {% endif %}
                </span>
            </div>
            <div class="info-item">
                <span class="info-label">Priority</span>
                <span class="info-value">
                    <span class="priority-badge priority-{{ adbreak.priority|default:'medium' }}">
                        {{ adbreak.get_priority_display|default:adbreak.priority|default:'Medium' }}
                    </span>
                </span>
            </div>
        </div>

        <div class="info-card">
            <h5><i class="fas fa-link me-2"></i>Related Links</h5>
            <div class="d-grid gap-2">
                <a href="{% url 'channels:channel_detail' adbreak.channel.pk %}" class="btn btn-outline-primary btn-sm">
                    <i class="fas fa-tv me-2"></i>View Channel
                </a>
                <a href="{% url 'channels:adbreak_list' adbreak.channel.pk %}" class="btn btn-outline-secondary btn-sm">
                    <i class="fas fa-list me-2"></i>All Channel Adbreaks
                </a>
                {% if adbreak.channel.jingles.exists %}
                <a href="{% url 'channels:jingle_list' adbreak.channel.pk %}" class="btn btn-outline-info btn-sm">
                    <i class="fas fa-music me-2"></i>Channel Jingles
                </a>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock content %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
$(document).ready(function() {
    const AdbreakDetailApp = {
        init() {
            this.bindEvents();
        },
        
        bindEvents() {
            $('#deleteBtn').on('click', () => {
                this.handleDelete();
            });
        },
        
        handleDelete() {
            Swal.fire({
                title: 'Delete Adbreak?',
                html: `
                    <div class="text-start">
                        <p>You are about to delete the adbreak:</p>
                        <div class="alert alert-warning">
                            <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 class="text-danger"><strong>This action cannot be undone.</strong></p>
                        <p>The adbreak will be permanently removed from the system.</p>
                    </div>
                `,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#dc3545',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Yes, delete it!',
                cancelButtonText: 'Cancel',
                reverseButtons: true,
                focusCancel: true
            }).then((result) => {
                if (result.isConfirmed) {
                    // Show loading state
                    Swal.fire({
                        title: 'Deleting...',
                        html: 'Please wait while we delete the adbreak.',
                        allowOutsideClick: false,
                        allowEscapeKey: false,
                        showConfirmButton: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });
                    
                    // Redirect to delete URL
                    window.location.href = "{% url 'channels:adbreak_delete' adbreak.pk %}";
                }
            });
        }
    };
    
    AdbreakDetailApp.init();
    
    // Show success message if redirected from form
    const urlParams = new URLSearchParams(window.location.search);
    if (urlParams.get('created') === 'true') {
        Swal.fire({
            icon: 'success',
            title: 'Adbreak Created!',
            text: 'The adbreak has been successfully created.',
            toast: true,
            position: 'top-end',
            showConfirmButton: false,
            timer: 3000
        });
    } else if (urlParams.get('updated') === 'true') {
        Swal.fire({
            icon: 'success',
            title: 'Adbreak Updated!',
            text: 'The adbreak has been successfully updated.',
            toast: true,
            position: 'top-end',
            showConfirmButton: false,
            timer: 3000
        });
    }
});
</script>
{% endblock extra_js %}