{% extends 'base.html' %}

{% block title %}Loan Management - Fox Fitt{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="fw-bold mb-0">Loan Management</h2>
        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addLoanModal">
            + New Loan
        </button>
    </div>

    <!-- Filters -->
    <div class="card shadow-sm border-0 mb-4">
        <div class="card-body p-2">
            <ul class="nav nav-pills nav-fill">
                <li class="nav-item">
                    <a class="nav-link {% if filter_status == 'active' %}active{% endif %}" href="?status=active">Outstanding Loans</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {% if filter_status == 'history' %}active{% endif %}" href="?status=history">Loan History (Repaid)</a>
                </li>
            </ul>
        </div>
    </div>

    <!-- Loan Table -->
    <div class="card shadow-sm border-0">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="bg-light">
                        <tr>
                            <th class="ps-4">Date Issued</th>
                            <th>Worker</th>
                            <th>Original Amount</th>
                            <th>Balance (Outstanding)</th>
                            <th>Reason</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for loan in loans %}
                        <tr>
                            <td class="ps-4 text-nowrap">{{ loan.date|date:"M d, Y" }}</td>
                            <td class="fw-medium">{{ loan.worker.name }}</td>
                            <td>R {{ loan.amount }}</td>
                            <td class="fw-bold {% if loan.balance > 0 %}text-danger{% else %}text-success{% endif %}">
                                R {{ loan.balance }}
                            </td>
                            <td><small class="text-muted">{{ loan.reason|default:"-" }}</small></td>
                            <td>
                                {% if loan.is_active %}
                                <span class="badge bg-warning text-dark">Active</span>
                                {% else %}
                                <span class="badge bg-success">Repaid</span>
                                {% endif %}
                            </td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="6" class="text-center py-5 text-muted">
                                No loans found in this category.
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Add Loan Modal -->
<div class="modal fade" id="addLoanModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title fw-bold">Issue New Loan</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{% url 'add_loan' %}" method="POST">
                {% csrf_token %}
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Worker</label>
                        <select name="worker" class="form-select" required>
                            <option value="">Select a worker...</option>
                            {% for worker in workers %}
                            <option value="{{ worker.id }}">{{ worker.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Amount (R)</label>
                        <input type="number" name="amount" class="form-control" step="0.01" min="1" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Date Issued</label>
                        <input type="date" name="date" class="form-control" value="{% now 'Y-m-d' %}">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Reason / Notes</label>
                        <textarea name="reason" class="form-control" rows="2"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save Loan</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}
