templates/admin_farmers.html

{% extends "base.html" %}

{% block title %}Manage Farmers - Admin Portal{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2><i class="fas fa-users text-primary me-3"></i>Manage Farmers</h2>
                <div>
                    <a href="{{ url_for('admin_dashboard') }}" class="btn btn-outline-secondary me-2">
                        <i class="fas fa-arrow-left me-2"></i>Back to Dashboard
                    </a>
                    <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#addFarmerModal">
                        <i class="fas fa-user-plus me-2"></i>Add Farmer
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Farmers Table -->
    <div class="row">
        <div class="col-12">
            <div class="card shadow">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0"><i class="fas fa-list me-2"></i>All Farmers</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped" id="farmersTable">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Name</th>
                                    <th>Aadhaar</th>
                                    <th>Phone</th>
                                    <th>District</th>
                                    <th>State</th>
                                    <th>Farms</th>
                                    <th>Registered</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for farmer in farmers %}
                                <tr>
                                    <td>{{ farmer.id }}</td>
                                    <td>{{ farmer.name }}</td>
                                    <td>{{ farmer.aadhaar_number[:4] }}****{{ farmer.aadhaar_number[-4:] }}</td>
                                    <td>{{ farmer.phone_number }}</td>
                                    <td>{{ farmer.district }}</td>
                                    <td>{{ farmer.state }}</td>
                                    <td>
                                        <span class="badge bg-info">{{ farmer.farms|length }}</span>
                                    </td>
                                    <td>{{ farmer.created_at.strftime('%Y-%m-%d') }}</td>
                                    <td>
                                        <div class="btn-group" role="group">
                                            <button class="btn btn-sm btn-primary" onclick="viewFarmer({{ farmer.id }})">
                                                <i class="fas fa-eye"></i>
                                            </button>
                                            <button class="btn btn-sm btn-warning" onclick="editFarmer({{ farmer.id }})">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <button class="btn btn-sm btn-danger" onclick="deleteFarmer({{ farmer.id }})">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Add Farmer Modal -->
<div class="modal fade" id="addFarmerModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fas fa-user-plus me-2"></i>Add New Farmer</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="addFarmerForm">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="farmerName" class="form-label">Full Name *</label>
                            <input type="text" class="form-control" id="farmerName" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="farmerAadhaar" class="form-label">Aadhaar Number *</label>
                            <input type="text" class="form-control" id="farmerAadhaar" maxlength="12" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="farmerPhone" class="form-label">Phone Number *</label>
                            <input type="tel" class="form-control" id="farmerPhone" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="farmerEmail" class="form-label">Email</label>
                            <input type="email" class="form-control" id="farmerEmail">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="farmerDistrict" class="form-label">District *</label>
                            <input type="text" class="form-control" id="farmerDistrict" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="farmerState" class="form-label">State *</label>
                            <input type="text" class="form-control" id="farmerState" required>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-success">
                        <i class="fas fa-save me-2"></i>Add Farmer
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- View Farmer Modal -->
<div class="modal fade" id="viewFarmerModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fas fa-user me-2"></i>Farmer Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="farmerDetailsContent">
                <!-- Farmer details will be loaded here -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<script>
// Initialize DataTable
$(document).ready(function() {
    $('#farmersTable').DataTable({
        order: [[0, 'desc']],
        pageLength: 10,
        responsive: true
    });
});

// Add Farmer Form
$('#addFarmerForm').on('submit', function(e) {
    e.preventDefault();
    
    const formData = {
        name: $('#farmerName').val(),
        aadhaar_number: $('#farmerAadhaar').val(),
        phone_number: $('#farmerPhone').val(),
        email: $('#farmerEmail').val(),
        district: $('#farmerDistrict').val(),
        state: $('#farmerState').val()
    };
    
    $.ajax({
        url: '/admin/add_farmer',
        method: 'POST',
        contentType: 'application/json',
        data: JSON.stringify(formData),
        success: function(response) {
            if (response.success) {
                showToast('Farmer added successfully!', 'success');
                $('#addFarmerModal').modal('hide');
                location.reload();
            } else {
                showToast(response.message || 'Error adding farmer', 'error');
            }
        },
        error: function() {
            showToast('Error adding farmer', 'error');
        }
    });
});

// View Farmer Details
function viewFarmer(farmerId) {
    $.ajax({
        url: `/admin/farmer/${farmerId}`,
        method: 'GET',
        success: function(farmer) {
            const content = `
                <div class="row">
                    <div class="col-md-6">
                        <h6>Personal Information</h6>
                        <p><strong>Name:</strong> ${farmer.name}</p>
                        <p><strong>Aadhaar:</strong> ${farmer.aadhaar_number}</p>
                        <p><strong>Phone:</strong> ${farmer.phone_number}</p>
                        <p><strong>Email:</strong> ${farmer.email || 'Not provided'}</p>
                    </div>
                    <div class="col-md-6">
                        <h6>Location</h6>
                        <p><strong>District:</strong> ${farmer.district}</p>
                        <p><strong>State:</strong> ${farmer.state}</p>
                        <p><strong>Registered:</strong> ${new Date(farmer.created_at).toLocaleDateString()}</p>
                    </div>
                </div>
                <hr>
                <h6>Farms (${farmer.farms.length})</h6>
                <div class="table-responsive">
                    <table class="table table-sm">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Area</th>
                                <th>Crops</th>
                                <th>Location</th>
                            </tr>
                        </thead>
                        <tbody>
                            ${farmer.farms.map(farm => `
                                <tr>
                                    <td>${farm.name}</td>
                                    <td>${farm.area} acres</td>
                                    <td>${farm.crop_types}</td>
                                    <td>${farm.latitude.toFixed(4)}, ${farm.longitude.toFixed(4)}</td>
                                </tr>
                            `).join('')}
                        </tbody>
                    </table>
                </div>
            `;
            $('#farmerDetailsContent').html(content);
            $('#viewFarmerModal').modal('show');
        },
        error: function() {
            showToast('Error loading farmer details', 'error');
        }
    });
}

// Edit Farmer
function editFarmer(farmerId) {
    // Implementation for edit farmer
    showToast('Edit farmer functionality coming soon!', 'info');
}

// Delete Farmer
function deleteFarmer(farmerId) {
    if (confirm('Are you sure you want to delete this farmer? This action cannot be undone.')) {
        $.ajax({
            url: `/admin/farmer/${farmerId}`,
            method: 'DELETE',
            success: function(response) {
                if (response.success) {
                    showToast('Farmer deleted successfully!', 'success');
                    location.reload();
                } else {
                    showToast(response.message || 'Error deleting farmer', 'error');
                }
            },
            error: function() {
                showToast('Error deleting farmer', 'error');
            }
        });
    }
}

// Toast notification function
function showToast(message, type) {
    const toast = document.createElement('div');
    toast.className = `alert alert-${type === 'success' ? 'success' : type === 'error' ? 'danger' : 'info'} alert-dismissible fade show position-fixed`;
    toast.style.top = '20px';
    toast.style.right = '20px';
    toast.style.zIndex = '9999';
    toast.innerHTML = `
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;
    document.body.appendChild(toast);
    
    setTimeout(() => {
        toast.remove();
    }, 5000);
}
</script>
{% endblock %}