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

{% load static %}

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

{% block extra_css %}
<style>
   /* Modern card styles */
   .detail-card {
       border: 1px solid #e9ecef;
       border-radius: 12px;
       box-shadow: 0 2px 10px rgba(0,0,0,0.08);
       transition: all 0.3s ease;
   }
   
   .detail-card:hover {
       box-shadow: 0 4px 20px rgba(0,0,0,0.12);
   }
   
   .info-item {
       padding: 12px 0;
       border-bottom: 1px solid #f8f9fa;
   }
   
   .info-item:last-child {
       border-bottom: none;
   }
   
   .info-label {
       font-weight: 600;
       color: #495057;
       margin-bottom: 4px;
   }
   
   .info-value {
       color: #6c757d;
       font-size: 0.95rem;
   }
   
   .status-badge {
       font-size: 0.8rem;
       padding: 6px 12px;
       border-radius: 20px;
   }
   
   .priority-badge {
       font-size: 0.8rem;
       padding: 4px 8px;
       border-radius: 4px;
   }
   
   .action-buttons .btn {
       margin-right: 8px;
       margin-bottom: 8px;
   }
   
   .audio-player {
       background: #f8f9fa;
       border-radius: 8px;
       padding: 20px;
       text-align: center;
   }
   
   .file-info {
       background: #e9ecef;
       border-radius: 6px;
       padding: 15px;
       margin-top: 15px;
   }
   
   .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); }
   }
   
   .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;
   }
</style>
{% endblock extra_css %}

{% block breadcrumb %}
<div class="page-header">
    <h1 class="page-title">{{ jingle.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:jingle_list' jingle.channel.pk %}">{{ jingle.channel.name }} Jingles</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{ jingle.name }}</li>
        </ol>
    </div>
</div>
{% endblock breadcrumb %}

{% block content %}
<div class="row">
    <div class="col-lg-8">
        <div class="card detail-card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h3 class="card-title mb-0">
                    <i class="fas fa-music me-2 text-primary"></i>
                    {{ jingle.name }}
                </h3>
                <div class="action-buttons">
                    <a href="{% url 'channels:jingle_update' jingle.pk %}" class="btn btn-primary btn-sm">
                        <i class="fas fa-edit me-1"></i>Edit
                    </a>
                    <button type="button" class="btn btn-danger btn-sm" id="deleteBtn">
                        <i class="fas fa-trash me-1"></i>Delete
                    </button>
                </div>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="info-item">
                            <div class="info-label">Jingle Name</div>
                            <div class="info-value">{{ jingle.name }}</div>
                        </div>
                        
                        <div class="info-item">
                            <div class="info-label">Channel</div>
                            <div class="info-value">
                                <a href="{% url 'channels:channel_detail' jingle.channel.pk %}" class="text-decoration-none">
                                    {{ jingle.channel.display_name|default:jingle.channel.name }}
                                </a>
                            </div>
                        </div>
                        
                        <div class="info-item">
                            <div class="info-label">Type</div>
                            <div class="info-value">
                                <span class="badge bg-info">{{ jingle.get_jingle_type_display|default:jingle.jingle_type }}</span>
                            </div>
                        </div>
                        
                        <div class="info-item">
                            <div class="info-label">Placement</div>
                            <div class="info-value">
                                <span class="badge bg-secondary">{{ jingle.get_placement_display|default:jingle.placement }}</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-6">
                        <div class="info-item">
                            <div class="info-label">Duration</div>
                            <div class="info-value">
                                {% if jingle.duration %}
                                    {{ jingle.duration }} seconds
                                {% else %}
                                    <span class="text-muted">Not specified</span>
                                {% endif %}
                            </div>
                        </div>
                        
                        <div class="info-item">
                            <div class="info-label">Priority</div>
                            <div class="info-value">
                                {% if jingle.priority == 'critical' %}
                                    <span class="priority-badge bg-danger text-white">Critical</span>
                                {% elif jingle.priority == 'high' %}
                                    <span class="priority-badge bg-warning text-dark">High</span>
                                {% elif jingle.priority == 'medium' %}
                                    <span class="priority-badge bg-info text-white">Medium</span>
                                {% else %}
                                    <span class="priority-badge bg-light text-dark">Low</span>
                                {% endif %}
                            </div>
                        </div>
                        
                        <div class="info-item">
                            <div class="info-label">Status</div>
                            <div class="info-value">
                                {% if jingle.is_active %}
                                    <span class="status-badge bg-success text-white">Active</span>
                                {% else %}
                                    <span class="status-badge bg-secondary text-white">Inactive</span>
                                {% endif %}
                            </div>
                        </div>
                        
                        <div class="info-item">
                            <div class="info-label">Created</div>
                            <div class="info-value">
                                {% if jingle.created_at %}
                                    {{ jingle.created_at|date:"M d, Y H:i" }}
                                {% else %}
                                    <span class="text-muted">Unknown</span>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
                
                {% if jingle.description %}
                <div class="info-item mt-3">
                    <div class="info-label">Description</div>
                    <div class="info-value">{{ jingle.description|linebreaks }}</div>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
    
    <div class="col-lg-4">
        {% if jingle.file_path %}
        <div class="card detail-card">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="fas fa-file-audio me-2"></i>
                    Audio File
                </h5>
            </div>
            <div class="card-body">
                <div class="audio-player">
                    <audio controls class="w-100 mb-3">
                        <source src="{{ jingle.file_path.url }}" type="audio/mpeg">
                        <source src="{{ jingle.file_path.url }}" type="audio/wav">
                        Your browser does not support the audio element.
                    </audio>
                    
                    <div class="file-info">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span class="fw-bold">File:</span>
                            <span class="text-muted">{{ jingle.file_path.name|default:'audio.mp3' }}</span>
                        </div>
                        {% if jingle.file_path.size %}
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span class="fw-bold">Size:</span>
                            <span class="text-muted">{{ jingle.file_path.size|filesizeformat }}</span>
                        </div>
                        {% endif %}
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="fw-bold">Format:</span>
                            <span class="text-muted">{{ jingle.file_path.name|slice:"-3:"|upper }}</span>
                        </div>
                    </div>
                    
                    <div class="mt-3">
                        <a href="{{ jingle.file_path.url }}" class="btn btn-outline-primary btn-sm" download>
                            <i class="fas fa-download me-1"></i>Download
                        </a>
                    </div>
                </div>
            </div>
        </div>
        {% else %}
        <div class="card detail-card">
            <div class="card-body text-center">
                <i class="fas fa-file-audio fa-3x text-muted mb-3"></i>
                <h6 class="text-muted">No Audio File</h6>
                <p class="text-muted small">This jingle doesn't have an associated audio file.</p>
            </div>
        </div>
        {% endif %}
        
        <div class="card detail-card mt-3">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="fas fa-cog me-2"></i>
                    Quick Actions
                </h5>
            </div>
            <div class="card-body">
                <div class="d-grid gap-2">
                    <a href="{% url 'channels:jingle_update' jingle.pk %}" class="btn btn-primary">
                        <i class="fas fa-edit me-2"></i>Edit Jingle
                    </a>
                    
                    <a href="{% url 'channels:jingle_create' %}?channel={{ jingle.channel.pk }}" class="btn btn-success">
                        <i class="fas fa-plus me-2"></i>Add New Jingle
                    </a>
                    
                    <a href="{% url 'channels:jingle_list' jingle.channel.pk %}" class="btn btn-outline-secondary">
                        <i class="fas fa-list me-2"></i>All Jingles
                    </a>
                    
                    <hr>
                    
                    <button type="button" class="btn btn-danger" id="deleteBtn2">
                        <i class="fas fa-trash me-2"></i>Delete Jingle
                    </button>
                </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 JingleDetailApp = {
        init() {
            this.bindEvents();
        },
        
        bindEvents() {
            // Delete button handlers
            $('#deleteBtn, #deleteBtn2').on('click', () => {
                this.handleDelete();
            });
        },
        
        handleDelete() {
            Swal.fire({
                title: 'Delete Jingle?',
                text: 'This action cannot be undone. The jingle "{{ jingle.name }}" will be permanently removed.',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#dc3545',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Yes, delete it!',
                cancelButtonText: 'Cancel',
                reverseButtons: true
            }).then((result) => {
                if (result.isConfirmed) {
                    // Show loading state
                    Swal.fire({
                        title: 'Deleting...',
                        text: 'Please wait while we delete the jingle.',
                        icon: 'info',
                        allowOutsideClick: false,
                        showConfirmButton: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });
                    
                    // Redirect to delete URL
                    window.location.href = "{% url 'channels:jingle_delete' jingle.pk %}";
                }
            });
        },
        
        showSuccess(message) {
            Swal.fire({
                icon: 'success',
                title: 'Success!',
                text: message,
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 3000,
                timerProgressBar: true
            });
        },
        
        showError(message) {
            Swal.fire({
                icon: 'error',
                title: 'Error!',
                text: message,
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 5000,
                timerProgressBar: true
            });
        }
    };
    
    JingleDetailApp.init();
    
    // Show success message if redirected from create/update
    const urlParams = new URLSearchParams(window.location.search);
    if (urlParams.get('created') === 'true') {
        JingleDetailApp.showSuccess('Jingle created successfully!');
    } else if (urlParams.get('updated') === 'true') {
        JingleDetailApp.showSuccess('Jingle updated successfully!');
    }
});
</script>
{% endblock extra_js %}