{% extends "base.html" %}

{% block title %}Admin Dashboard | NailTech Nation{% endblock %}

{% block content %}
<section class="admin-dashboard">
    <div class="container">
        <div class="dashboard-header">
            <h1>Admin Dashboard</h1>
            <form method="POST" action="{{ url_for('admin.check_no_shows') }}">
                <button type="submit" class="btn btn-secondary">Check No-Shows</button>
            </form>
        </div>
        
        <!-- Quick Stats -->
        <div class="stats-overview">
            <div class="stat-box">
                <h3>{{ technician_count }}</h3>
                <p>Active Technicians</p>
            </div>
            <div class="stat-box">
                <h3>{{ service_count }}</h3>
                <p>Active Services</p>
            </div>
            <div class="stat-box">
                <h3>{{ stats_this_month.total }}</h3>
                <p>Bookings This Month</p>
            </div>
            <div class="stat-box">
                <h3>{{ stats_this_month.no_shows }}</h3>
                <p>No-Shows This Month</p>
            </div>
        </div>
        
        <!-- Quick Actions -->
        <div class="quick-actions">
            <a href="{{ url_for('admin.manage_technicians') }}" class="action-card">
                <div class="action-icon">👥</div>
                <h3>Manage Technicians</h3>
                <p>Add, edit, or deactivate technicians</p>
            </a>
            
            <a href="{{ url_for('admin.manage_services') }}" class="action-card">
                <div class="action-icon">💅</div>
                <h3>Manage Services</h3>
                <p>Update services and pricing</p>
            </a>
            
            <a href="{{ url_for('admin.manage_bookings') }}" class="action-card">
                <div class="action-icon">📅</div>
                <h3>All Bookings</h3>
                <p>View and manage all bookings</p>
            </a>
        </div>
        
        <!-- Recent Bookings -->
        <div class="recent-section">
            <h2>Recent Bookings</h2>
            <table class="data-table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Client</th>
                        <th>Service</th>
                        <th>Technician</th>
                        <th>Date & Time</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    {% for booking in recent_bookings %}
                    <tr>
                        <td>#{{ booking.id }}</td>
                        <td>{{ booking.client.name }}</td>
                        <td>{{ booking.service.name }}</td>
                        <td>{{ booking.technician.name }}</td>
                        <td>{{ format_date(booking.booking_date) }} {{ format_time(booking.booking_time) }}</td>
                        <td><span class="badge {{ booking.status }}">{{ booking.status }}</span></td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        
        <!-- Recent No-Shows -->
        {% if recent_no_shows %}
        <div class="noshow-section">
            <h2>Recent No-Shows</h2>
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Client</th>
                        <th>Service</th>
                        <th>Technician</th>
                        <th>Scheduled</th>
                        <th>Marked At</th>
                    </tr>
                </thead>
                <tbody>
                    {% for noshow in recent_no_shows %}
                    <tr>
                        <td>{{ noshow.client.name }}</td>
                        <td>{{ noshow.service.name }}</td>
                        <td>{{ noshow.technician.name }}</td>
                        <td>{{ format_date(noshow.scheduled_date) }} {{ format_time(noshow.scheduled_time) }}</td>
                        <td>{{ format_datetime(noshow.marked_at) }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% endif %}
    </div>
</section>

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

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

.stats-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.stat-box {
    background: white;
    padding: 2rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-align: center;
}

.stat-box h3 {
    font-size: 3rem;
    background: var(--bg-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stat-box p {
    color: var(--light-text);
}

.quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.action-card {
    background: white;
    padding: 2rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
    text-align: center;
}

.action-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.action-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.action-card h3 {
    margin-bottom: 0.5rem;
}

.action-card p {
    color: var(--light-text);
}

.recent-section,
.noshow-section {
    margin-bottom: 3rem;
}

.recent-section h2,
.noshow-section h2 {
    margin-bottom: 1.5rem;
}

.data-table {
    width: 100%;
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.data-table thead {
    background: var(--bg-gradient);
    color: white;
}

.data-table th,
.data-table td {
    padding: 1rem;
    text-align: left;
}

.data-table tbody tr {
    border-bottom: 1px solid var(--bg-light);
}

.data-table tbody tr:hover {
    background: var(--bg-light);
}

.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.completed {
    background: #2196F3;
    color: white;
}

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

.badge.no-show {
    background: #F44336;
    color: white;
}

@media (max-width: 768px) {
    .data-table {
        font-size: 0.85rem;
    }
    
    .data-table th,
    .data-table td {
        padding: 0.75rem 0.5rem;
    }
}
</style>
{% endblock %}