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

{% load static %} 

{% block title %}View Playlists{% endblock %}

{% block extra_css %}
<link href="{% static 'plugins/datatable/css/dataTables.bootstrap5.min.css' %}" rel="stylesheet" />
<link href="{% static 'plugins/select2/css/select2.min.css' %}" rel="stylesheet" />
<style>
    .filter-card {
        background: #f8f9fa;
        border-radius: 8px;
        margin-bottom: 20px;
    }
    
    .stats-card {
        background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
        color: white;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 20px;
        cursor: pointer;
        transition: transform 0.3s, box-shadow 0.3s;
    }
    
    .stats-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    }
    
    .playlist-card {
        transition: transform 0.2s, box-shadow 0.2s;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        margin-bottom: 15px;
        position: relative;
    }
    
    .playlist-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }
    
    .playlist-card.selected {
        border-color: #007bff;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }
    
    .action-buttons .btn {
        margin-right: 5px;
        margin-bottom: 5px;
    }
    
    .loading-overlay {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255,255,255,0.8);
        z-index: 1000;
    }
    
    .bulk-actions {
        background: #fff3cd;
        border: 1px solid #ffeaa7;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 20px;
        display: none;
    }
    
    .bulk-actions.show {
        display: block;
        animation: slideDown 0.3s ease;
    }
    
    @keyframes slideDown {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }
</style>
<link href="{% static 'plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css' %}" rel="stylesheet" />
<style>
    .filter-card {
        background: #f8f9fa;
        border-radius: 8px;
        margin-bottom: 20px;
    }
    
    .stats-card {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 20px;
    }
    
    .stat-item {
        text-align: center;
        padding: 10px;
    }
    
    .stat-number {
        font-size: 2rem;
        font-weight: bold;
        display: block;
    }
    
    .stat-label {
        font-size: 0.9rem;
        opacity: 0.9;
    }
    
    .playlist-card {
        transition: transform 0.2s, box-shadow 0.2s;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        margin-bottom: 15px;
    }
    
    .playlist-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }
    
    .status-badge {
        font-size: 0.75rem;
        padding: 4px 8px;
    }
    
    .draft-badge {
        background-color: #ffc107;
        color: #000;
    }
    
    .published-badge {
        background-color: #28a745;
        color: #fff;
    }
    
    .action-buttons .btn {
        margin-right: 5px;
        margin-bottom: 5px;
    }
    
    .loading-overlay {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255,255,255,0.8);
        z-index: 1000;
    }
    
    .date-filter-group {
        display: flex;
        gap: 10px;
        align-items: center;
    }
    
    .quick-date-buttons .btn {
        margin-right: 5px;
        margin-bottom: 5px;
    }
    
    @media (max-width: 768px) {
        .date-filter-group {
            flex-direction: column;
            align-items: stretch;
        }
        
        .action-buttons {
            text-align: center;
        }
    }
</style>
<style>
.card-header {
    border-bottom: 1px solid rgba(0,0,0,.125);
}

.form-label.fw-semibold {
    font-weight: 600;
    color: #495057;
}

.quick-date-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.quick-date-buttons .btn {
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
}

.border-top {
    border-top: 1px solid #dee2e6 !important;
}

.form-control:focus,
.form-select:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.btn-outline-primary:hover {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

.btn-outline-secondary:hover {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

.btn-outline-success:hover {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
}

@media (max-width: 768px) {
    .quick-date-buttons {
        justify-content: center;
    }
    
    .d-flex.gap-2 {
        flex-direction: column;
    }
    
    .ms-auto {
        margin-left: 0 !important;
    }
}
</style> 
<style>
.card-header.bg-light {
    background-color: #f8f9fa !important;
    border-bottom: 1px solid rgba(0,0,0,.125);
}

.playlist-card {
    transition: all 0.2s ease-in-out;
    border: 1px solid #e3e6f0 !important;
}

.playlist-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.stat-item {
    padding: 0.5rem;
    text-align: center;
}

.stat-item i {
    font-size: 1.2rem;
    margin-bottom: 0.25rem;
}

.empty-state i.fe-5x {
    font-size: 5rem;
}

.table th.fw-semibold {
    font-weight: 600;
    color: #495057;
    background-color: #f8f9fa;
}

.table-hover tbody tr:hover {
    background-color: rgba(0, 123, 255, 0.05);
}

.pagination-sm .page-link {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
}

.pagination .page-item.active .page-link {
    background-color: #007bff;
    border-color: #007bff;
}

.btn-group .btn {
    border-radius: 0.25rem !important;
    margin-right: 0.125rem;
}

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

.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 1000;
    display: none;
}

.action-buttons .btn {
    min-width: 70px;
}

@media (max-width: 768px) {
    .d-flex.justify-content-between {
        flex-direction: column;
        gap: 1rem;
    }
    
    .pagination-info {
        text-align: center;
    }
    
    .action-buttons {
        flex-direction: column;
    }
    
    .action-buttons .btn {
        margin-bottom: 0.25rem;
    }
}

/* Status badge improvements */
.badge.bg-warning {
    color: #212529 !important;
}

.badge.bg-success {
    background-color: #28a745 !important;
}

/* View toggle improvements */
.btn-group .btn.active {
    background-color: #007bff;
    border-color: #007bff;
    color: white;
}

.btn-outline-secondary:hover:not(.active) {
    background-color: #6c757d;
    border-color: #6c757d;
    color: white;
}
</style>
{% endblock extra_css %}

{% block breadcrumb %}
<div class="page-header">
    <h1 class="page-title">View Playlists</h1>
    <div>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="javascript:void(0);">Playlists</a></li>
            <li class="breadcrumb-item active" aria-current="page">View</li>
        </ol>
    </div>
</div>
{% endblock breadcrumb %}

{% block content %}
<div class="row">
    <!-- Statistics Cards -->
    <div class="col-lg-3 col-md-6">
        <div class="card bg-primary text-white">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="me-3">
                        <i class="fe fe-list fs-2"></i>
                    </div>
                    <div>
                        <h2 class="mb-0" id="total-playlists">{{ stats.total_playlists }}</h2>
                        <p class="mb-0">Total Playlists</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6">
        <div class="card bg-success text-white">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="me-3">
                        <i class="fe fe-check-circle fs-2"></i>
                    </div>
                    <div>
                        <h2 class="mb-0" id="published-playlists">{{ stats.published_playlists }}</h2>
                        <p class="mb-0">Published</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6">
        <div class="card bg-warning text-white">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="me-3">
                        <i class="fe fe-edit fs-2"></i>
                    </div>
                    <div>
                        <h2 class="mb-0" id="draft-playlists">{{ stats.draft_playlists }}</h2>
                        <p class="mb-0">Drafts</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6">
        <div class="card bg-info text-white">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="me-3">
                        <i class="fe fe-calendar fs-2"></i>
                    </div>
                    <div>
                        <h2 class="mb-0" id="recent-playlists">{{ stats.recent_playlists }}</h2>
                        <p class="mb-0">This Week</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- Enhanced Filters Card -->
    <div class="col-12">
        <div class="card">
            <div class="card-header bg-light">
                <h5 class="card-title mb-0">
                    <i class="fe fe-filter me-2"></i>Filters & Search
                </h5>
            </div>
            <div class="card-body">
                <form method="get" id="filter-form" class="row g-3">
                    <!-- Search Input -->
                    <div class="col-md-4">
                        <label for="search" class="form-label fw-semibold">
                            <i class="fe fe-search me-1"></i>Search
                        </label>
                        <input type="text" class="form-control" id="search" name="search" 
                               value="{{ filter_params.search }}" 
                               placeholder="Search playlists, channels, zones...">
                    </div>
                    
                    <!-- Channel Filter -->
                    <div class="col-md-4">
                        <label for="channel" class="form-label fw-semibold">
                            <i class="fe fe-tv me-1"></i>Channel
                        </label>
                        <select class="form-select" id="channel" name="channel">
                            <option value="all" {% if filter_params.channel == 'all' %}selected{% endif %}>All Channels</option>
                            {% for channel in channels %}
                                <option value="{{ channel.id_channel }}" 
                                        {% if filter_params.channel == channel.id_channel|stringformat:"s" %}selected{% endif %}>
                                    {{ channel.channel_name }}
                                </option>
                            {% endfor %}
                        </select>
                    </div>
                    
                    <!-- Zone Filter -->
                    <div class="col-md-4">
                        <label for="zone" class="form-label fw-semibold">
                            <i class="fe fe-map-pin me-1"></i>Zone/Region
                        </label>
                        <select class="form-select" id="zone" name="zone">
                            <option value="all" {% if filter_params.zone == 'all' %}selected{% endif %}>All Zones</option>
                            {% for zone in zones %}
                                <option value="{{ zone.id_zone_channel }}" 
                                        {% if filter_params.zone == zone.id_zone_channel|stringformat:"s" %}selected{% endif %}>
                                    {{ zone.networkname }} - {{ zone.region }}
                                </option>
                            {% endfor %}
                        </select>
                    </div>
                    
                    <!-- Status Filter -->
                    <div class="col-md-3">
                        <label for="status" class="form-label fw-semibold">
                            <i class="fe fe-activity me-1"></i>Status
                        </label>
                        <select class="form-select" id="status" name="status">
                            <option value="all" {% if filter_params.status == 'all' %}selected{% endif %}>All Status</option>
                            <option value="published" {% if filter_params.status == 'published' %}selected{% endif %}>
                                <i class="fe fe-check-circle"></i> Published
                            </option>
                            <option value="draft" {% if filter_params.status == 'draft' %}selected{% endif %}>
                                <i class="fe fe-edit"></i> Draft
                            </option>
                        </select>
                    </div>
                    
                    <!-- Sort By -->
                    <div class="col-md-3">
                        <label for="sort_by" class="form-label fw-semibold">
                            <i class="fe fe-sort-desc me-1"></i>Sort By
                        </label>
                        <select class="form-select" id="sort_by" name="sort_by">
                            {% for sort_option in sort_options %}
                                <option value="{{ sort_option.value }}" 
                                        {% if filter_params.sort_by == sort_option.value %}selected{% endif %}>
                                    {{ sort_option.label }}
                                </option>
                            {% endfor %}
                        </select>
                    </div>
                    
                    <!-- Date Range Preset -->
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">
                            <i class="fe fe-calendar me-1"></i>Date Range
                        </label> 
                        <div class="d-flex align-items-center gap-2">
                            <input type="date" class="form-control" id="date_from" name="date_from" 
                                   value="{{ filter_params.date_from }}" placeholder="From Date">
                            <span class="text-muted">to</span>
                            <input type="date" class="form-control" id="date_to" name="date_to" 
                                   value="{{ filter_params.date_to }}" placeholder="To Date">
                        </div>
                        <input type="hidden" id="date_range" name="date_range" value="{{ filter_params.date_range }}">
                    </div>
                    
                    <!-- Action Buttons -->
                    <div class="col-12">
                        <div class="d-flex flex-wrap gap-2 pt-3 border-top">
                            <button type="submit" class="btn btn-primary">
                                <i class="fe fe-filter me-1"></i> Apply Filters
                            </button>
                            <button type="button" class="btn btn-outline-secondary" id="clear-filters">
                                <i class="fe fe-refresh-cw me-1"></i> Clear Filters
                            </button>
                            <button type="button" class="btn btn-outline-success" id="export-btn">
                                <i class="fe fe-download me-1"></i> Export
                            </button>
                            <a href="{% url 'playlists:new_playlist' %}" class="btn btn-info ms-auto">
                                <i class="fe fe-plus me-1"></i> New Playlist
                            </a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <!-- Results Card -->
        <div class="card">
            <div class="card-header bg-light d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0">
                    <i class="fe fe-list me-2"></i>Playlists 
                    <span class="badge bg-primary ms-2" id="results-count">
                        {{ paginator.count }} result{{ paginator.count|pluralize }}
                    </span>
                </h5>
                <div class="view-toggle">
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-sm btn-outline-secondary active" id="card-view" title="Card View">
                            <i class="fe fe-grid"></i>
                        </button>
                        <button type="button" class="btn btn-sm btn-outline-secondary" id="table-view" title="Table View">
                            <i class="fe fe-list"></i>
                        </button>
                    </div>
                </div>
            </div>
            
            <div class="card-body position-relative">
                <div class="loading-overlay" id="loading-overlay">
                    <div class="d-flex justify-content-center align-items-center h-100">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>
                </div>
                
                <!-- Card View -->
                <div id="card-view-container">
                    {% if playlists %}
                        <div class="row g-3" id="playlists-container">
                            {% for playlist in playlists %}
                                <div class="col-lg-6 col-xl-4">
                                    <div class="card playlist-card h-100 shadow-sm border-0">
                                        <div class="card-body d-flex flex-column">
                                            <div class="d-flex justify-content-between align-items-start mb-3">
                                                <h6 class="card-title mb-0 fw-semibold text-primary">
                                                    <i class="fe fe-tv me-1"></i>{{ playlist.channel.channel_name }}
                                                </h6>
                                                <span class="badge status-badge {% if playlist.is_draft == '1' %}bg-warning text-dark{% else %}bg-success{% endif %}">
                                                    <i class="fe fe-{% if playlist.is_draft == '1' %}edit{% else %}check-circle{% endif %} me-1"></i>
                                                    {% if playlist.is_draft %}Draft{% else %}Published{% endif %}
                                                </span>
                                            </div>
                                            
                                            <div class="playlist-info flex-grow-1">
                                                <div class="mb-2">
                                                    <i class="fe fe-map-pin text-muted me-2"></i>
                                                    <span class="text-muted">{{ playlist.zone_channel.networkname }} - {{ playlist.zone_channel.region }}</span>
                                                </div>
                                                <div class="mb-2">
                                                    <i class="fe fe-calendar text-muted me-2"></i>
                                                    <span class="text-muted">{{ playlist.broadcast_date|date:"M d, Y" }}</span>
                                                </div>
                                                <div class="mb-2">
                                                    <i class="fe fe-git-branch text-muted me-2"></i>
                                                    <span class="text-muted">Version {{ playlist.version }}</span>
                                                </div>
                                                <div class="mb-3">
                                                    <i class="fe fe-clock text-muted me-2"></i>
                                                    <span class="text-muted">Created {{ playlist.created_at|date:"M d, Y H:i" }}</span>
                                                </div>
                                            </div> 
                                            <div class="playlist-stats mb-3">
                                                <div class="row text-center g-0">
                                                    <div class="col-4">
                                                        <div class="stat-item">
                                                            <i class="fe fe-square text-primary"></i>
                                                            <div class="fw-bold text-primary">{{ playlist.window_count|default:0 }}</div>
                                                            <small class="text-muted">Windows</small>
                                                        </div>
                                                    </div>
                                                    <div class="col-4">
                                                        <div class="stat-item">
                                                            <i class="fe fe-layers text-info"></i>
                                                            <div class="fw-bold text-info">{{ playlist.total_avails|default:0 }}</div>
                                                            <small class="text-muted">Avails</small>
                                                        </div>
                                                    </div>
                                                    <div class="col-4">
                                                        <div class="stat-item">
                                                            <i class="fe fe-play-circle text-success"></i>
                                                            <div class="fw-bold text-success">{{ playlist.total_ads|default:0 }}</div>
                                                            <small class="text-muted">Ads</small>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div> 
                                            <div class="action-buttons d-flex flex-wrap gap-1">
                                                <a href="{% url 'playlists:playlist_detail' playlist.id %}" 
                                                   class="btn btn-sm btn-primary flex-fill" title="View Details">
                                                    <i class="fe fe-eye me-1"></i> View
                                                </a>
                                                <a href="{% url 'playlists:edit_playlist' playlist.id %}" 
                                                   class="btn btn-sm btn-warning flex-fill" title="Edit Playlist">
                                                    <i class="fe fe-edit me-1"></i> Edit
                                                </a>
                                                {% if not playlist.is_draft %}
                                                    <button class="btn btn-sm btn-success flex-fill" onclick="duplicatePlaylist({{ playlist.id }})" title="Duplicate Playlist">
                                                        <i class="fe fe-copy me-1"></i> Duplicate
                                                    </button>
                                                {% endif %}
                                                <button class="btn btn-sm btn-outline-danger" onclick="deletePlaylist({{ playlist.id }})" title="Delete Playlist">
                                                    <i class="fe fe-trash-2"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    {% else %}
                        <div class="text-center py-5">
                            <div class="empty-state">
                                <i class="fe fe-list fe-5x text-muted mb-4"></i>
                                <h5 class="text-muted mb-3">No playlists found</h5>
                                <p class="text-muted mb-4">Try adjusting your filters or create a new playlist to get started.</p>
                                <a href="{% url 'playlists:new_playlist' %}" class="btn btn-primary">
                                    <i class="fe fe-plus me-2"></i> Create New Playlist
                                </a>
                            </div>
                        </div>
                    {% endif %}
                </div>
                
                <!-- Table View (Hidden by default) -->
                <div id="table-view-container" style="display: none;">
                    <div class="table-responsive">
                        <table class="table table-hover table-striped">
                            <thead class="table-light">
                                <tr>
                                    <th class="fw-semibold">
                                        <i class="fe fe-tv me-1"></i>Channel
                                    </th>
                                    <th class="fw-semibold">
                                        <i class="fe fe-map-pin me-1"></i>Zone/Region
                                    </th>
                                    <th class="fw-semibold">
                                        <i class="fe fe-calendar me-1"></i>Broadcast Date
                                    </th>
                                    <th class="fw-semibold">
                                        <i class="fe fe-git-branch me-1"></i>Version
                                    </th>
                                    <th class="fw-semibold">
                                        <i class="fe fe-activity me-1"></i>Status
                                    </th>
                                    <th class="fw-semibold text-center">
                                        <i class="fe fe-square me-1"></i>Windows
                                    </th>
                                    <th class="fw-semibold text-center">
                                        <i class="fe fe-play-circle me-1"></i>Ads
                                    </th>
                                    <th class="fw-semibold">
                                        <i class="fe fe-clock me-1"></i>Created
                                    </th>
                                    <th class="fw-semibold text-center">Actions</th>
                                </tr>
                            </thead>
                            <tbody id="table-body">
                                {% for playlist in playlists %}
                                    <tr>
                                        <td class="fw-medium">{{ playlist.channel.channel_name }}</td>
                                        <td>{{ playlist.zone_channel.networkname }} - {{ playlist.zone_channel.region }}</td>
                                        <td>{{ playlist.broadcast_date|date:"M d, Y" }}</td>
                                        <td>{{ playlist.version }}</td>
                                        <td>
                                            <span class="badge {% if playlist.is_draft %}bg-warning text-dark{% else %}bg-success{% endif %}">
                                                <i class="fe fe-{% if playlist.is_draft %}edit{% else %}check-circle{% endif %} me-1"></i>
                                                {% if playlist.is_draft %}Draft{% else %}Published{% endif %}
                                            </span>
                                        </td>
                                        <td class="text-center">
                                            <span class="fw-bold text-primary">{{ playlist.window_count|default:0 }}</span>
                                        </td>
                                        <td class="text-center">
                                            <span class="fw-bold text-success">{{ playlist.total_ads|default:0 }}</span>
                                        </td>
                                        <td>{{ playlist.created_at|date:"M d, H:i" }}</td>
                                        <td>
                                            <div class="btn-group" role="group">
                                                <a href="{% url 'playlists:playlist_detail' playlist.id %}" 
                                                   class="btn btn-sm btn-primary" title="View Details">
                                                    <i class="fe fe-eye"></i>
                                                </a>
                                                <a href="{% url 'playlists:edit_playlist' playlist.id %}" 
                                                   class="btn btn-sm btn-warning" title="Edit Playlist">
                                                    <i class="fe fe-edit"></i>
                                                </a>
                                                {% if not playlist.is_draft %}
                                                    <button class="btn btn-sm btn-success" onclick="duplicatePlaylist({{ playlist.id }})" title="Duplicate Playlist">
                                                        <i class="fe fe-copy"></i>
                                                    </button>
                                                {% endif %}
                                                <button class="btn btn-sm btn-outline-danger" onclick="deletePlaylist({{ playlist.id }})" title="Delete Playlist">
                                                    <i class="fe fe-trash-2"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Enhanced Pagination -->
{% if is_paginated %}
<div class="row mt-4">
    <div class="col-12">
        <div class="card">
            <div class="card-body py-3">
                <div class="d-flex justify-content-between align-items-center flex-wrap">
                    <div class="pagination-info text-muted mb-2 mb-md-0">
                        <i class="fe fe-info me-1"></i>
                        Showing {{ page_obj.start_index }} to {{ page_obj.end_index }} of {{ paginator.count }} playlists
                    </div>
                    
                    <nav aria-label="Playlist pagination">
                        <ul class="pagination pagination-sm mb-0">
                            {% if page_obj.has_previous %}
                                <li class="page-item">
                                    <a class="page-link" href="?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}page=1" title="First Page">
                                        <i class="fe fe-chevrons-left"></i>
                                    </a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link" href="?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}page={{ page_obj.previous_page_number }}" title="Previous Page">
                                        <i class="fe fe-chevron-left"></i>
                                    </a>
                                </li>
                            {% endif %}
                            
                            {% for page_num in page_obj.paginator.page_range %}
                                {% if page_num == page_obj.number %}
                                    <li class="page-item active">
                                        <span class="page-link fw-bold">{{ page_num }}</span>
                                    </li>
                                {% elif page_num >= page_obj.number|add:'-2' and page_num <= page_obj.number|add:'2' %}
                                    <li class="page-item">
                                        <a class="page-link" href="?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}page={{ page_num }}">{{ page_num }}</a>
                                    </li>
                                {% endif %}
                            {% endfor %}
                            
                            {% if page_obj.has_next %}
                                <li class="page-item">
                                    <a class="page-link" href="?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}page={{ page_obj.next_page_number }}" title="Next Page">
                                        <i class="fe fe-chevron-right"></i>
                                    </a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link" href="?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}page={{ page_obj.paginator.num_pages }}" title="Last Page">
                                        <i class="fe fe-chevrons-right"></i>
                                    </a>
                                </li>
                            {% endif %}
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>
{% endif %}
{% endblock content %}


{% block modals %}
<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel">Confirm Delete</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete this playlist?</p>
                <p class="text-warning"><strong>This action cannot be undone.</strong></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" id="confirmDelete">Delete Playlist</button>
            </div>
        </div>
    </div>
</div> 
{% endblock modals %}

{% block extra_js %}
<script src="{% static 'plugins/select2/js/select2.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js' %}"></script>
 

<script> 
document.addEventListener('DOMContentLoaded', function() {
    // Initialize Select2 for better dropdowns
    $('#channel, #zone, #status, #sort_by').select2({
        width: '100%',
        allowClear: true
    });
    
    // Quick date filter buttons
    $('.quick-date-buttons button').click(function() {
        const range = $(this).data('range');
        $('#date_range').val(range);
        $('#date_from, #date_to').val('');
        
        // Update button states
        $('.quick-date-buttons button').removeClass('btn-primary').addClass('btn-outline-primary');
        $(this).removeClass('btn-outline-primary').addClass('btn-primary');
        
        // Auto-submit form
        $('#filter-form').submit();
    });
    
    // Clear date range when custom dates are used
    $('#date_from, #date_to').change(function() {
        $('#date_range').val('');
        $('.quick-date-buttons button').removeClass('btn-primary').addClass('btn-outline-primary');
    });
    
    // Clear filters
    $('#clear-filters').click(function() {
        window.location.href = '{% url "playlists:list_playlist" %}';
    });
    
    // View toggle
    $('#card-view').click(function() {
        $(this).addClass('active').siblings().removeClass('active');
        $('#card-view-container').show();
        $('#table-view-container').hide();
        localStorage.setItem('playlistViewMode', 'card');
    });
    
    $('#table-view').click(function() {
        $(this).addClass('active').siblings().removeClass('active');
        $('#card-view-container').hide();
        $('#table-view-container').show();
        localStorage.setItem('playlistViewMode', 'table');
    });
    
    // Restore view mode
    const savedViewMode = localStorage.getItem('playlistViewMode');
    if (savedViewMode === 'table') {
        $('#table-view').click();
    }
    
    // Auto-submit form on filter change
    $('#channel, #zone, #status, #sort_by').change(function() {
        $('#filter-form').submit();
    });
    
    // Debounced search
    let searchTimeout;
    $('#search').on('input', function() {
        clearTimeout(searchTimeout);
        searchTimeout = setTimeout(function() {
            $('#filter-form').submit();
        }, 500);
    });
    
    // Export functionality
    $('#export-btn').click(function() {
        showLoading();
        
        $.ajax({
            url: '{% url "playlists:list_playlist" %}',
            data: $.extend($('#filter-form').serialize(), {action: 'export_data'}),
            success: function(response) {
                hideLoading();
                if (response.success) {
                    if (response.download_url !== '#') {
                        window.location.href = response.download_url;
                    } else {
                        alert('Export functionality will be implemented soon.');
                    }
                } else {
                    alert('Export failed: ' + response.message);
                }
            },
            error: function() {
                hideLoading();
                alert('Export failed. Please try again.');
            }
        });
    });
    
    // AJAX stats update
    function updateStats() {
        $.ajax({
            url: '{% url "playlists:list_playlist" %}',
            data: {action: 'quick_stats'},
            success: function(response) {
                if (response.success) {
                    $('#total-playlists').text(response.stats.total_playlists);
                    $('#published-playlists').text(response.stats.published_playlists);
                    $('#draft-playlists').text(response.stats.draft_playlists);
                    $('#recent-playlists').text(response.stats.recent_playlists);
                }
            }
        });
    }
    
    // Update stats every 30 seconds
    setInterval(updateStats, 30000);
    
    // Loading overlay functions
    function showLoading() {
        $('#loading-overlay').show();
    }
    
    function hideLoading() {
        $('#loading-overlay').hide();
    }
    
    // Highlight active filters
    function highlightActiveFilters() {
        const urlParams = new URLSearchParams(window.location.search);
        
        if (urlParams.get('search')) {
            $('#search').addClass('border-primary');
        }
        
        if (urlParams.get('channel') && urlParams.get('channel') !== 'all') {
            $('#channel').next('.select2-container').find('.select2-selection').addClass('border-primary');
        }
        
        if (urlParams.get('date_range')) {
            $(`.quick-date-buttons button[data-range="${urlParams.get('date_range')}"]`)
                .removeClass('btn-outline-primary').addClass('btn-primary');
        }
    }
    
    highlightActiveFilters();
});

// Delete playlist function
function deletePlaylist(playlistId) {
    $('#deleteModal').modal('show');
    
    $('#confirmDelete').off('click').on('click', function() {
        $.ajax({
            url: Django.url('playlists:delete_playlist', [playlistId]),     
            method: 'POST',
            headers: {
                'X-CSRFToken': '{{ csrf_token }}'
            },
            success: function(response) {
                $('#deleteModal').modal('hide');
                if (response.success) {
                    location.reload();
                } else {
                    alert('Delete failed: ' + response.message);
                }
            },
            error: function() {
                $('#deleteModal').modal('hide');
                alert('Delete failed. Please try again.');
            }
        });
    });
}

// Duplicate playlist function
function duplicatePlaylist(playlistId) {
    if (confirm('Create a duplicate of this playlist?')) {
        $.ajax({
            url: Django.url('playlists:duplicate_playlist', [playlistId]),
            method: 'POST',
            headers: {
                'X-CSRFToken': '{{ csrf_token }}'
            },
            success: function(response) {
                if (response.success) {
                    location.reload();
                } else {
                    alert('Duplication failed: ' + response.message);
                }
            },
            error: function() {
                alert('Duplication failed. Please try again.');
            }
        });
    }
}
</script>
{% endblock extra_js %}