{% extends 'base.html' %}
{% load static %}

{% block content %}
<div class="row g-4 mb-4">
    <!-- Stat Card 1 -->
    <div class="col-md-4">
        <div class="stat-card p-4">
            <div class="d-flex justify-content-between align-items-start">
                <div>
                    <h6 class="text-muted mb-1">Total Farms</h6>
                    <h2 class="mb-0">{{ total_farms }}</h2>
                </div>
                <div class="stat-icon bg-light-green">
                    <i class="fas fa-tractor"></i>
                </div>
            </div>
            <div class="mt-3 small text-muted">
                <i class="fas fa-arrow-up text-success"></i> <span>12% from last month</span>
            </div>
        </div>
    </div>

    <!-- Stat Card 2 -->
    <div class="col-md-4">
        <div class="stat-card p-4">
            <div class="d-flex justify-content-between align-items-start">
                <div>
                    <h6 class="text-muted mb-1">Active Licenses</h6>
                    <h2 class="mb-0">{{ active_farms }}</h2>
                </div>
                <div class="stat-icon bg-light-blue">
                    <i class="fas fa-certificate"></i>
                </div>
            </div>
            <div class="mt-3 small text-muted">
                <span>Updated just now</span>
            </div>
        </div>
    </div>

    <!-- Stat Card 3 -->
    <div class="col-md-4">
        <div class="stat-card p-4">
            <div class="d-flex justify-content-between align-items-start">
                <div>
                    <h6 class="text-muted mb-1">Pending Approval</h6>
                    <h2 class="mb-0">{{ pending_farms }}</h2>
                </div>
                <div class="stat-icon bg-light-orange">
                    <i class="fas fa-clipboard-check"></i>
                </div>
            </div>
            <div class="mt-3 small text-muted">
                <span class="text-warning">Action required</span>
            </div>
        </div>
    </div>
</div>

<!-- Recent Activity Section -->
<div class="card border-0 shadow-sm rounded-4">
    <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
        <h5 class="mb-0">Recent Registered Farms</h5>
        <a href="{% url 'farm_create' %}" class="btn btn-primary btn-sm">
            <i class="fas fa-plus"></i> Register New Farm
        </a>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-custom table-hover mb-0">
                <thead>
                    <tr>
                        <th class="ps-4">Farm Name</th>
                        <th>Owner</th>
                        <th>Location</th>
                        <th>Size (Ha)</th>
                        <th>Status</th>
                        <th>Registered</th>
                    </tr>
                </thead>
                <tbody>
                    {% for farm in recent_farms %}
                    <tr>
                        <td class="ps-4 fw-medium">{{ farm.name }}</td>
                        <td>{{ farm.owner_name }}</td>
                        <td>{{ farm.location }}</td>
                        <td>{{ farm.size_hectares }}</td>
                        <td>
                            <span class="badge-status 
                                {% if farm.status == 'active' %}badge-active
                                {% elif farm.status == 'pending' %}badge-pending
                                {% else %}badge-suspended{% endif %}">
                                {{ farm.get_status_display }}
                            </span>
                        </td>
                        <td class="text-muted small">{{ farm.registration_date|date:"M d, Y" }}</td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="6" class="text-center py-5 text-muted">
                            <i class="fas fa-inbox fa-2x mb-3 d-block opacity-25"></i>
                            No farms registered yet.
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}
