{% extends 'base.html' %}

{% block page_title %}Dashboard Overview{% endblock %}

{% block content %}
<div class="row">
    <!-- Stat Cards -->
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card stat-card border-left-primary h-100">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs fw-bold text-primary text-uppercase mb-1">
                            Today's Sales
                        </div>
                        <div class="h5 mb-0 fw-bold">KSh {{ today_sales_amount|default:"0.00"|floatformat:2 }}</div>
                        <div class="text-muted">{{ today_sales_quantity|default:"0" }} units sold</div>
                    </div>
                    <div class="col-auto">
                        <div class="stat-icon bg-primary text-white">
                            <i class="fas fa-money-bill-wave"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card stat-card border-left-success h-100">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs fw-bold text-success text-uppercase mb-1">
                            Total Products
                        </div>
                        <div class="h5 mb-0 fw-bold">{{ total_products|default:"0" }}</div>
                        <div class="text-muted">{{ low_stock_products|default:"0" }} low stock</div>
                    </div>
                    <div class="col-auto">
                        <div class="stat-icon bg-success text-white">
                            <i class="fas fa-boxes"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card stat-card border-left-warning h-100">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs fw-bold text-warning text-uppercase mb-1">
                            Active Loans
                        </div>
                        <div class="h5 mb-0 fw-bold">KSh {{ total_active_loan_amount|default:"0.00"|floatformat:2 }}</div>
                        <div class="text-muted">{{ overdue_loans_count|default:"0" }} overdue</div>
                    </div>
                    <div class="col-auto">
                        <div class="stat-icon bg-warning text-white">
                            <i class="fas fa-hand-holding-usd"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card stat-card border-left-danger h-100">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs fw-bold text-danger text-uppercase mb-1">
                            Stock Alerts
                        </div>
                        <div class="h5 mb-0 fw-bold">{{ stock_alerts|length|default:"0" }}</div>
                        <div class="text-muted">Require attention</div>
                    </div>
                    <div class="col-auto">
                        <div class="stat-icon bg-danger text-white">
                            <i class="fas fa-exclamation-triangle"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- Quick Actions -->
    <div class="col-lg-4 mb-4">
        <div class="card shadow h-100">
            <div class="card-header bg-primary text-white">
                <h6 class="m-0 fw-bold"><i class="fas fa-bolt me-2"></i>Quick Actions</h6>
            </div>
            <div class="card-body">
                <div class="d-grid gap-2">
                    <a href="{% url 'product_list' %}" class="btn btn-outline-primary text-start">
                        <i class="fas fa-plus me-2"></i>Add New Product
                    </a>
                    <button class="btn btn-outline-success text-start" data-bs-toggle="modal" data-bs-target="#quickSaleModal">
                        <i class="fas fa-cash-register me-2"></i>Record Quick Sale
                    </button>
                    <button class="btn btn-outline-warning text-start" data-bs-toggle="modal" data-bs-target="#quickLoanModal">
                        <i class="fas fa-handshake me-2"></i>Issue New Loan
                    </button>
                    <a href="{% url 'sales_report' %}" class="btn btn-outline-info text-start">
                        <i class="fas fa-chart-bar me-2"></i>View Sales Report
                    </a>
                </div>
            </div>
        </div>
        
        <!-- Stock Alerts -->
        <div class="card shadow mt-4">
            <div class="card-header bg-danger text-white">
                <h6 class="m-0 fw-bold"><i class="fas fa-exclamation-triangle me-2"></i>Stock Alerts</h6>
            </div>
            <div class="card-body">
                {% if stock_alerts %}
                <div class="list-group list-group-flush">
                    {% for alert in stock_alerts %}
                    <div class="list-group-item px-0">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="mb-1">{{ alert.product.name }}</h6>
                                <small class="text-muted">{{ alert.message }}</small>
                            </div>
                            <span class="badge bg-danger">Alert</span>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <p class="text-muted text-center mb-0">No stock alerts</p>
                {% endif %}
            </div>
        </div>
    </div>
    
    <!-- Charts -->
    <div class="col-lg-8 mb-4">
        <div class="card shadow h-100">
            <div class="card-header bg-white">
                <h6 class="m-0 fw-bold text-primary">Sales Trend - Last 7 Days</h6>
            </div>
            <div class="card-body">
                <canvas id="salesChart" height="250"></canvas>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- Recent Sales -->
    <div class="col-lg-6 mb-4">
        <div class="card shadow">
            <div class="card-header bg-white d-flex justify-content-between align-items-center">
                <h6 class="m-0 fw-bold text-primary">Recent Sales</h6>
                <a href="{% url 'sales_report' %}" class="btn btn-sm btn-outline-primary">View All</a>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-sm">
                        <thead>
                            <tr>
                                <th>Product</th>
                                <th>Qty</th>
                                <th>Amount</th>
                                <th>Time</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for sale in recent_sales|slice:":5" %}
                            <tr>
                                <td>{{ sale.product.name|truncatechars:20 }}</td>
                                <td>{{ sale.quantity }}</td>
                                <td>KSh {{ sale.total_amount|floatformat:2 }}</td>
                                <td>{{ sale.sale_date|date:"H:i" }}</td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="4" class="text-center text-muted">No recent sales</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Active Loans -->
    <div class="col-lg-6 mb-4">
        <div class="card shadow">
            <div class="card-header bg-white d-flex justify-content-between align-items-center">
                <h6 class="m-0 fw-bold text-warning">Active Loans</h6>
                <a href="{% url 'loans_dashboard' %}" class="btn btn-sm btn-outline-warning">View All</a>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-sm">
                        <thead>
                            <tr>
                                <th>Borrower</th>
                                <th>Amount</th>
                                <th>Due Date</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for loan in active_loans|slice:":5" %}
                            <tr>
                                <td>{{ loan.borrower_name|truncatechars:15 }}</td>
                                <td>KSh {{ loan.amount|floatformat:2 }}</td>
                                <td>{{ loan.due_date|date:"M d" }}</td>
                                <td>
                                    {% if loan.is_overdue %}
                                    <span class="badge bg-danger">Overdue</span>
                                    {% else %}
                                    <span class="badge bg-success">Active</span>
                                    {% endif %}
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="4" class="text-center text-muted">No active loans</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Quick Sale Modal -->
<div class="modal fade" id="quickSaleModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title">
                    <i class="fas fa-cash-register me-2"></i>Quick Sale
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form id="quickSaleForm">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="productSelect" class="form-label">Product *</label>
                        <select class="form-select" id="productSelect" required>
                            <option value="">Select product...</option>
                            {% for target in yearly_targets %}
                            <option value="{{ target.product.id }}">
                                {{ target.product.name }} ({{ target.product.quantity_in_stock }} in stock)
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="saleQuantity" class="form-label">Quantity *</label>
                        <input type="number" class="form-control" id="saleQuantity" min="1" required>
                    </div>
                    <div class="mb-3">
                        <label for="paymentMethod" class="form-label">Payment Method *</label>
                        <select class="form-select" id="paymentMethod" required>
                            <option value="cash">Cash</option>
                            <option value="mpesa">M-Pesa</option>
                            <option value="card">Card</option>
                        </select>
                    </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-check me-1"></i> Record Sale
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Quick Loan Modal -->
<div class="modal fade" id="quickLoanModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-warning text-white">
                <h5 class="modal-title">
                    <i class="fas fa-handshake me-2"></i>Quick Loan
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form id="quickLoanForm">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="borrowerName" class="form-label">Borrower Name *</label>
                        <input type="text" class="form-control" id="borrowerName" required>
                    </div>
                    <div class="mb-3">
                        <label for="loanAmount" class="form-label">Amount (KSh) *</label>
                        <input type="number" class="form-control" id="loanAmount" step="0.01" required>
                    </div>
                    <div class="mb-3">
                        <label for="dueDate" class="form-label">Due Date *</label>
                        <input type="date" class="form-control" id="dueDate" required>
                    </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-warning">
                        <i class="fas fa-handshake me-1"></i> Issue Loan
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    // Sales Chart
    const ctx = document.getElementById('salesChart').getContext('2d');
    const salesChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            datasets: [{
                label: 'Sales (KSh)',
                data: [12000, 19000, 15000, 25000, 22000, 30000, 28000],
                borderColor: '#3498db',
                backgroundColor: 'rgba(52, 152, 219, 0.1)',
                borderWidth: 2,
                fill: true,
                tension: 0.4
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        callback: function(value) {
                            return 'KSh ' + value.toLocaleString();
                        }
                    }
                }
            }
        }
    });
    
    // Quick Sale Form
    $('#quickSaleForm').submit(function(e) {
        e.preventDefault();
        
        const productId = $('#productSelect').val();
        const quantity = $('#saleQuantity').val();
        const paymentMethod = $('#paymentMethod').val();
        
        if (!productId || !quantity) {
            alert('Please fill all required fields');
            return;
        }
        
        $.ajax({
            url: '/api/record-sale/',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({
                product_id: productId,
                quantity: quantity,
                payment_method: paymentMethod
            }),
            success: function(response) {
                if (response.success) {
                    alert('Sale recorded successfully!');
                    $('#quickSaleModal').modal('hide');
                    $('#quickSaleForm')[0].reset();
                    location.reload();
                } else {
                    alert('Error: ' + response.error);
                }
            },
            error: function() {
                alert('An error occurred. Please try again.');
            }
        });
    });
    
    // Quick Loan Form
    $('#quickLoanForm').submit(function(e) {
        e.preventDefault();
        
        const borrowerName = $('#borrowerName').val();
        const loanAmount = $('#loanAmount').val();
        const dueDate = $('#dueDate').val();
        
        if (!borrowerName || !loanAmount || !dueDate) {
            alert('Please fill all required fields');
            return;
        }
        
        $.ajax({
            url: '/api/add-loan/',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({
                borrower_name: borrowerName,
                amount: loanAmount,
                due_date: dueDate,
                interest_rate: 0
            }),
            success: function(response) {
                if (response.success) {
                    alert('Loan issued successfully!');
                    $('#quickLoanModal').modal('hide');
                    $('#quickLoanForm')[0].reset();
                    location.reload();
                } else {
                    alert('Error: ' + response.error);
                }
            },
            error: function() {
                alert('An error occurred. Please try again.');
            }
        });
    });
</script>
{% endblock %}