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

{% load static %}

{% block title %}Profiles{% 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);
    }
    
    .profile-card {
        transition: transform 0.2s, box-shadow 0.2s;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        margin-bottom: 15px;
        position: relative;
    }
    
    .profile-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }
    
    .profile-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); }
    }
    
    .status-badge {
        font-size: 0.75rem;
        padding: 4px 8px;
    }
    
    .active-badge {
        background-color: #28a745;
        color: #fff;
    }
    
    .inactive-badge {
        background-color: #dc3545;
        color: #fff;
    }
    
    .pending-badge {
        background-color: #ffc107;
        color: #000;
    }
    
    .profile-avatar {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid #dee2e6;
    }
    
    .avatar-placeholder {
        width: 45px;
        height: 45px;
        background: #f8f9fa;
        border-radius: 50%;
        border: 2px dashed #dee2e6;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #6c757d;
    }
    
    @media (max-width: 768px) {
        .action-buttons {
            text-align: center;
        }
    }
</style>
{% endblock extra_css %}

{% block breadcrumb %}
<div class="page-header">
    <h1 class="page-title">Profiles</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);">Accounts</a></li>
            <li class="breadcrumb-item active" aria-current="page">Profiles</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-user fs-2"></i>
                    </div> 
                    <div>
                        <h2 class="mb-0" id="total-profiles">{{ total_profiles|default:0 }}</h2>
                        <p class="mb-0">Total Profiles</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="active-profiles">{{ active_profiles|default:0 }}</h2>
                        <p class="mb-0">Active</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="incomplete-profiles">{{ incomplete_profiles|default:0 }}</h2>
                        <p class="mb-0">Incomplete</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-image fs-2"></i>
                    </div>
                    <div>
                        <h2 class="mb-0" id="profiles-with-avatar">{{ profiles_with_avatar|default:0 }}</h2>
                        <p class="mb-0">With Avatar</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h3 class="card-title">Profile Management</h3>
                <div>
                    <a href="{% url 'accounts:profile_create' %}" class="btn btn-primary">
                        <i class="fe fe-plus me-2"></i>Add Profile
                    </a>
                </div>
            </div>
            <div class="card-body">
                <!-- Filter Section -->
                <div class="filter-card">
                    <div class="card-body">
                        <form method="get" id="filter-form">
                            <div class="row g-3">
                                <div class="col-md-4">
                                    <label for="search" class="form-label">Search</label>
                                    <input type="text" class="form-control" id="search" name="search" 
                                           placeholder="Search by name, email, or company..." 
                                           value="{{ request.GET.search }}">
                                </div>
                                <div class="col-md-3">
                                    <label for="status" class="form-label">Status</label>
                                    <select class="form-select" id="status" name="status">
                                        <option value="">All Status</option>
                                        <option value="active" {% if request.GET.status == 'active' %}selected{% endif %}>Active</option>
                                        <option value="inactive" {% if request.GET.status == 'inactive' %}selected{% endif %}>Inactive</option>
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <label for="has_avatar" class="form-label">Avatar</label>
                                    <select class="form-select" id="has_avatar" name="has_avatar">
                                        <option value="">All</option>
                                        <option value="yes" {% if request.GET.has_avatar == 'yes' %}selected{% endif %}>With Avatar</option>
                                        <option value="no" {% if request.GET.has_avatar == 'no' %}selected{% endif %}>Without Avatar</option>
                                    </select>
                                </div>
                                <div class="col-md-2 d-flex align-items-end">
                                    <button type="submit" class="btn btn-primary w-100">
                                        <i class="fe fe-search me-2"></i>Filter
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- Profiles List -->
                <div class="table-responsive">
                    {% if profiles %}
                        <div class="row">
                            {% for profile in profiles %}
                                <div class="col-lg-6 col-xl-4">
                                    <div class="profile-card card">
                                        <div class="card-body">
                                            <div class="d-flex align-items-center mb-3">
                                                <div class="me-3">
                                                    {% if profile.avatar %}
                                                        <img src="{{ profile.avatar.url }}" alt="{{ profile.user.get_full_name }}" class="profile-avatar">
                                                    {% else %}
                                                        <div class="avatar-placeholder">
                                                            <i class="fe fe-user"></i>
                                                        </div>
                                                    {% endif %}
                                                </div>
                                                <div class="flex-fill">
                                                    <h6 class="mb-1">
                                                        <a href="{% url 'accounts:profile_detail' profile.pk %}" class="text-decoration-none">
                                                            {{ profile.user.get_full_name|default:profile.user.username }}
                                                        </a>
                                                    </h6>
                                                    <p class="text-muted mb-0">{{ profile.user.email }}</p>
                                                    {% if profile.job_title %}
                                                        <small class="text-muted">{{ profile.job_title }}</small>
                                                    {% endif %}
                                                </div>
                                                <div class="dropdown">
                                                    <button class="btn btn-outline-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown">
                                                        Actions
                                                    </button>
                                                    <ul class="dropdown-menu">
                                                        <li><a class="dropdown-item" href="{% url 'accounts:profile_detail' profile.pk %}">View</a></li>
                                                        <li><a class="dropdown-item" href="{% url 'accounts:profile_update' profile.pk %}">Edit</a></li>
                                                        <li><hr class="dropdown-divider"></li>
                                                        <li><a class="dropdown-item text-danger" href="{% url 'accounts:profile_delete' profile.pk %}">Delete</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                            
                                            <div class="row g-2 text-muted">
                                                <div class="col-6">
                                                    <small>
                                                        <i class="fe fe-calendar me-1"></i>
                                                        Joined {{ profile.user.date_joined|date:"M d, Y" }}
                                                    </small>
                                                </div>
                                                <div class="col-6 text-end">
                                                    {% if profile.user.is_active %}
                                                        <span class="badge bg-success">Active</span>
                                                    {% else %}
                                                        <span class="badge bg-secondary">Inactive</span>
                                                    {% endif %}
                                                </div>
                                            </div>
                                            
                                            {% if profile.company or profile.location %}
                                                <div class="mt-2 pt-2 border-top">
                                                    {% if profile.company %}
                                                        <small class="text-muted d-block">
                                                            <i class="fe fe-briefcase me-1"></i>{{ profile.company }}
                                                        </small>
                                                    {% endif %}
                                                    {% if profile.location %}
                                                        <small class="text-muted d-block">
                                                            <i class="fe fe-map-pin me-1"></i>{{ profile.location }}
                                                        </small>
                                                    {% endif %}
                                                </div>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>

                        <!-- Pagination -->
                        {% if is_paginated %}
                            <nav aria-label="Profile pagination">
                                <ul class="pagination justify-content-center">
                                    {% if page_obj.has_previous %}
                                        <li class="page-item">
                                            <a class="page-link" href="?page=1{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.has_avatar %}&has_avatar={{ request.GET.has_avatar }}{% endif %}">First</a>
                                        </li>
                                        <li class="page-item">
                                            <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.has_avatar %}&has_avatar={{ request.GET.has_avatar }}{% endif %}">Previous</a>
                                        </li>
                                    {% endif %}

                                    <li class="page-item active">
                                        <span class="page-link">
                                            Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
                                        </span>
                                    </li>

                                    {% if page_obj.has_next %}
                                        <li class="page-item">
                                            <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.has_avatar %}&has_avatar={{ request.GET.has_avatar }}{% endif %}">Next</a>
                                        </li>
                                        <li class="page-item">
                                            <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.has_avatar %}&has_avatar={{ request.GET.has_avatar }}{% endif %}">Last</a>
                                        </li>
                                    {% endif %}
                                </ul>
                            </nav>
                        {% endif %}
                    {% else %}
                        <div class="text-center py-5">
                            <i class="fe fe-users fs-1 text-muted"></i>
                            <h5 class="mt-3 text-muted">No profiles found</h5>
                            <p class="text-muted">No profiles match your current filters.</p>
                            <a href="{% url 'accounts:profile_create' %}" class="btn btn-primary">
                                <i class="fe fe-plus me-2"></i>Add First Profile
                            </a>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock content %}

{% block extra_js %}
<script src="{% static 'plugins/select2/js/select2.min.js' %}"></script>
<script>
    $(document).ready(function() {
        // Initialize Select2
        $('select').select2({
            theme: 'bootstrap-5'
        });
        
        // Auto-submit form on filter change
        $('#status, #has_avatar').on('change', function() {
            $('#filter-form').submit();
        });
        
        // Search with delay
        let searchTimeout;
        $('#search').on('input', function() {
            clearTimeout(searchTimeout);
            searchTimeout = setTimeout(function() {
                $('#filter-form').submit();
            }, 500);
        });
    });
</script>
{% endblock extra_js %}