{% 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>

            <!-- Land Registry Card -->
            <div class="card shadow-sm border-0 mt-4">
                <div class="card-header bg-white py-3 border-0">
                    <h5 class="fw-bold mb-0">Land Registry Records</h5>
                </div>
                <div class="card-body p-4">
                    {% for land in farmer.land_records.all %}
                        <div class="mb-3 p-3 bg-light rounded">
                            <h6 class="fw-bold mb-1">Parcel: {{ land.parcel_number }}</h6>
                            <p class="small mb-1"><strong>Ownership:</strong> {{ land.get_ownership_type_display }}</p>
                            <p class="small mb-1"><strong>Title Deed:</strong> {{ land.title_deed_number|default:"N/A" }}</p>
                            <p class="small mb-0 text-success fw-bold">{{ land.area_hectares }} Ha</p>
                        </div>
                    {% empty %}
                        <p class="text-muted small mb-0">No land records registered.</p>
                    {% endfor %}
                </div>
            </div>
        </div>

        <!-- Holdings Column -->
        <div class="col-lg-8">
            <div class="card shadow-sm border-0">
                <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="https://naims-5b7f.dev.flatlogic.app/admin/core/agriculturalholding/add/?farmer={{ farmer.id }}" class="btn btn-sm btn-primary px-3 fw-bold" target="_blank">Add Another Holding</a>
                </div>
                <div class="card-body p-4">
                    {% for holding in farmer.holdings.all %}
                        <div class="card mb-4 border-light shadow-none bg-light-subtle">
                            <div class="card-body">
                                <div class="row align-items-center mb-3">
                                    <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>

                                <!-- Sub-module details -->
                                <div class="row g-3">
                                    {% if holding.crops.exists %}
                                    <div class="col-12">
                                        <div class="p-3 bg-white rounded border-start border-4 border-success">
                                            <h6 class="fw-bold mb-2">Crop Production</h6>
                                            <div class="table-responsive">
                                                <table class="table table-sm table-borderless mb-0">
                                                    <thead>
                                                        <tr class="text-muted small">
                                                            <th>Crop Type</th>
                                                            <th>Area (Ha)</th>
                                                            <th>Expected Yield</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        {% for crop in holding.crops.all %}
                                                        <tr>
                                                            <td>{{ crop.crop_type }}</td>
                                                            <td>{{ crop.area_hectares }}</td>
                                                            <td>{{ crop.expected_yield|default:"-" }} t</td>
                                                        </tr>
                                                        {% endfor %}
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                    {% endif %}

                                    {% if holding.livestock.exists %}
                                    <div class="col-12">
                                        <div class="p-3 bg-white rounded border-start border-4 border-primary">
                                            <h6 class="fw-bold mb-2">Livestock Production</h6>
                                            <div class="d-flex flex-wrap gap-2">
                                                {% for animal in holding.livestock.all %}
                                                <span class="badge bg-primary-subtle text-primary border border-primary-subtle px-3 py-2">
                                                    {{ animal.animal_type }}: {{ animal.count }}
                                                </span>
                                                {% endfor %}
                                            </div>
                                        </div>
                                    </div>
                                    {% endif %}

                                    {% if holding.forestry_items.exists %}
                                    <div class="col-12">
                                        <div class="p-3 bg-white rounded border-start border-4 border-secondary">
                                            <h6 class="fw-bold mb-2">Forestry</h6>
                                            <ul class="list-unstyled mb-0 small">
                                                {% for item in holding.forestry_items.all %}
                                                <li>{{ item.tree_species }} ({{ item.area_hectares }} Ha) - {{ item.purpose }}</li>
                                                {% endfor %}
                                            </ul>
                                        </div>
                                    </div>
                                    {% endif %}

                                    {% if holding.fisheries.exists %}
                                    <div class="col-12">
                                        <div class="p-3 bg-white rounded border-start border-4 border-info">
                                            <h6 class="fw-bold mb-2">Fisheries/Aquaculture</h6>
                                            <ul class="list-unstyled mb-0 small">
                                                {% for fish in holding.fisheries.all %}
                                                <li>{{ fish.species }} ({{ fish.get_type_display }}) - Capacity: {{ fish.capacity }}</li>
                                                {% endfor %}
                                            </ul>
                                        </div>
                                    </div>
                                    {% endif %}
                                </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 Area</small>
                                <span class="h4 fw-bold mb-0 text-success">
                                    {% with total_crop_area=0 %}
                                        {% for holding in farmer.holdings.all %}
                                            {% for crop in holding.crops.all %}
                                                <!-- Calculation would ideally be in view or custom tag -->
                                            {% endfor %}
                                        {% endfor %}
                                        {{ farmer.id|default:"0.0" }} Ha
                                    {% endwith %}
                                </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 Total</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 integrated from all modules including Crops, Livestock, Forestry, and Fisheries.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}