{% extends "base.html" %}

{% block title %}Manage Technicians | Admin{% endblock %}

{% block content %}
<section class="admin-section">
    <div class="container">
        <div class="section-header">
            <h1>Manage Technicians</h1>
            <button class="btn btn-primary" onclick="document.getElementById('addModal').style.display='block'">
                + Add Technician
            </button>
        </div>
        
        <div class="technicians-list">
            {% for tech in technicians %}
            <div class="tech-card">
                <div class="tech-image">
                    {% if tech.image_url %}
                        <img src="{{ tech.image_url }}" alt="{{ tech.name }}">
                    {% else %}
                        <div class="tech-placeholder">{{ tech.name[:1] }}</div>
                    {% endif %}
                </div>
                <div class="tech-info">
                    <h3>{{ tech.name }}</h3>
                    <p>{{ tech.role }}</p>
                    <p class="tech-phone">{{ tech.phone }}</p>
                    <p class="tech-code">Code: <strong>{{ tech.access_code }}</strong></p>
                    <p class="tech-status">
                        {% if tech.is_active %}
                            <span class="badge active">Active</span>
                        {% else %}
                            <span class="badge inactive">Inactive</span>
                        {% endif %}
                    </p>
                </div>
                <div class="tech-actions">
                    <form method="POST" action="{{ url_for('admin.toggle_technician', tech_id=tech.id) }}">
                        <button type="submit" class="btn btn-sm btn-secondary">
                            {% if tech.is_active %}Deactivate{% else %}Activate{% endif %}
                        </button>
                    </form>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

<!-- Add Technician Modal -->
<div id="addModal" class="modal">
    <div class="modal-content">
        <span class="close" onclick="document.getElementById('addModal').style.display='none'">&times;</span>
        <h2>Add New Technician</h2>
        <form method="POST" action="{{ url_for('admin.add_technician') }}" enctype="multipart/form-data">
            <div class="form-group">
                <label>Name *</label>
                <input type="text" name="name" required>
            </div>
            <div class="form-group">
                <label>Phone *</label>
                <input type="tel" name="phone" required maxlength="10">
            </div>
            <div class="form-group">
                <label>Bio</label>
                <textarea name="bio" rows="3"></textarea>
            </div>
            <div class="form-group">
                <label>Profile Image</label>
                <input type="file" name="image" accept="image/*">
            </div>
            <button type="submit" class="btn btn-primary">Add Technician</button>
        </form>
    </div>
</div>

<style>
.admin-section {
    padding: 3rem 0;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.technicians-list {
    display: grid;
    gap: 1.5rem;
}

.tech-card {
    display: grid;
    grid-template-columns: 150px 1fr auto;
    gap: 2rem;
    background: white;
    padding: 2rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    align-items: center;
}

.tech-image {
    width: 150px;
    height: 150px;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.tech-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tech-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-gradient);
    color: white;
    font-size: 3rem;
    font-weight: bold;
}

.tech-info h3 {
    margin-bottom: 0.5rem;
}

.tech-phone,
.tech-code {
    color: var(--light-text);
    margin: 0.5rem 0;
}

.tech-code strong {
    color: var(--primary-pink);
}

.tech-status {
    margin-top: 1rem;
}

.badge {
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 600;
}

.badge.active {
    background: #4CAF50;
    color: white;
}

.badge.inactive {
    background: #9E9E9E;
    color: white;
}

.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
}

.modal-content {
    background: white;
    margin: 5% auto;
    padding: 2rem;
    border-radius: var(--radius-lg);
    max-width: 500px;
}

.close {
    float: right;
    font-size: 2rem;
    cursor: pointer;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid var(--bg-light);
    border-radius: var(--radius-sm);
}

@media (max-width: 768px) {
    .tech-card {
        grid-template-columns: 1fr;
    }
}
</style>
{% endblock %}