{% extends "base.html" %}

{% block title %}{{ farmer.name }} Profile | NAIMS Namibia{% endblock %}

{% block content %}
<section class="container my-5">
    <div class="row g-4">
        <!-- Farmer Detail Column -->
        <div class="col-lg-4">
            <div class="card shadow-sm border-0 sticky-top" style="top: 80px;">
                <div class="card-body p-4">
                    <div class="text-center mb-4">
                        <div class="rounded-circle bg-primary-subtle d-inline-flex align-items-center justify-content-center mb-3" style="width: 80px; height: 80px;">
                            <span class="h1 mb-0 text-primary fw-bold">{{ farmer.name|slice:":1" }}</span>
                        </div>
                        <h4 class="fw-bold mb-1">{{ farmer.name }}</h4>
                        <span class="badge bg-success-subtle text-success fw-bold">Active Registration</span>
                    </div>

                    <ul class="list-group list-group-flush border-top">
                        <li class="list-group-item d-flex justify-content-between align-items-center py-3">
                            <span class="text-muted small text-uppercase fw-bold">ID / Passport</span>
                            <span class="fw-bold">{{ farmer.id_number }}</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center py-3">
                            <span class="text-muted small text-uppercase fw-bold">Phone Number</span>
                            <span class="fw-bold">{{ farmer.phone_number|default:"N/A" }}</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center py-3">
                            <span class="text-muted small text-uppercase fw-bold">Constituency</span>
                            <span class="fw-bold">{{ farmer.constituency.name }}</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center py-3">
                            <span class="text-muted small text-uppercase fw-bold">Region</span>
                            <span class="fw-bold text-primary">{{ farmer.constituency.region.name }}</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center py-3">
                            <span class="text-muted small text-uppercase fw-bold">Date Joined</span>
                            <span class="fw-bold">{{ farmer.created_at|date:"d M Y" }}</span>
                        </li>
                    </ul>

                    <div class="d-grid gap-2 mt-4">
                        <a href="{% url 'farmer_list' %}" class="btn btn-outline-secondary fw-bold shadow-none">Back to Registry</a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Holdings Column -->
        <div class="col-lg-8">
            <div class="card shadow-sm border-0 h-100">
                <div class="card-header bg-white py-3 border-0 d-flex justify-content-between align-items-center">
                    <h5 class="fw-bold mb-0">Agricultural Holdings ({{ farmer.holdings.count }})</h5>
                    <a href="#" class="btn btn-sm btn-primary px-3 fw-bold">Add Another Holding</a>
                </div>
                <div class="card-body p-4">
                    {% for holding in farmer.holdings.all %}
                        <div class="card mb-3 border-light shadow-none bg-light-subtle">
                            <div class="card-body">
                                <div class="row align-items-center">
                                    <div class="col">
                                        <h6 class="fw-bold text-uppercase mb-1 text-primary">{{ holding.get_primary_activity_display }}</h6>
                                        <p class="mb-0 text-muted small"><i class="bi bi-geo-alt-fill"></i> {{ holding.location_description|default:"No location provided." }}</p>
                                    </div>
                                    <div class="col-auto text-end">
                                        <h3 class="fw-bold mb-0">{{ holding.size_hectares }} <small class="text-muted fs-6">Hectares</small></h3>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% empty %}
                        <div class="text-center py-5 text-muted">
                            <p class="mb-0">No holdings registered for this farmer.</p>
                        </div>
                    {% endfor %}

                    <hr class="my-5">

                    <h5 class="fw-bold mb-4">Historical Performance & Indicators</h5>
                    <div class="row g-4 text-center mb-5">
                        <div class="col-6 col-md-3">
                            <div class="p-3 border rounded">
                                <small class="text-muted text-uppercase fw-bold d-block mb-1">Crop Output</small>
                                <span class="h4 fw-bold mb-0 text-success">0.0 t</span>
                            </div>
                        </div>
                        <div class="col-6 col-md-3">
                            <div class="p-3 border rounded">
                                <small class="text-muted text-uppercase fw-bold d-block mb-1">Livestock</small>
                                <span class="h4 fw-bold mb-0 text-primary">0</span>
                            </div>
                        </div>
                        <div class="col-6 col-md-3">
                            <div class="p-3 border rounded">
                                <small class="text-muted text-uppercase fw-bold d-block mb-1">Input Use</small>
                                <span class="h4 fw-bold mb-0">N/A</span>
                            </div>
                        </div>
                        <div class="col-6 col-md-3">
                            <div class="p-3 border rounded">
                                <small class="text-muted text-uppercase fw-bold d-block mb-1">Food Security</small>
                                <span class="badge bg-success-subtle text-success">STABLE</span>
                            </div>
                        </div>
                    </div>

                    <div class="alert alert-secondary py-3 px-4 mb-0 border-0 shadow-none d-flex align-items-center">
                        <div class="me-3 fs-3 text-secondary"><i class="bi bi-info-circle-fill"></i></div>
                        <div>
                            <p class="mb-0 fw-bold small">System Analysis:</p>
                            <p class="mb-0 small text-muted">Detailed production reports are expected during the next harvest assessment cycle (July 2026).</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}