{% extends 'base.html' %}
{% load static %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header bg-danger text-white">
                <h5 class="mb-0">Delete Expense #{{ object.reference }}</h5>
            </div>
            <div class="card-body">
                <div class="alert alert-danger">
                    <h5 class="alert-heading">Warning!</h5>
                    <p class="mb-0">
                        You are about to permanently delete this expense. This action cannot be undone.
                        The following information will be permanently removed:
                    </p>
                    <ul class="mt-2 mb-0">
                        <li>Expense details and items</li>
                        <li>Associated attachments and files</li>
                        <li>Audit history and activity logs</li>
                    </ul>
                </div>

                <div class="card border-danger mb-4">
                    <div class="card-header bg-danger bg-opacity-10">
                        <h6 class="mb-0">Expense Details</h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <dl class="row mb-0">
                                    <dt class="col-sm-5">Reference:</dt>
                                    <dd class="col-sm-7">{{ object.reference }}</dd>
                                    
                                    <dt class="col-sm-5">Date:</dt>
                                    <dd class="col-sm-7">{{ object.date|date:"M d, Y" }}</dd>
                                    
                                    <dt class="col-sm-5">Category:</dt>
                                    <dd class="col-sm-7">{{ object.category }}</dd>
                                </dl>
                            </div>
                            <div class="col-md-6">
                                <dl class="row mb-0">
                                    <dt class="col-sm-5">Status:</dt>
                                    <dd class="col-sm-7">
                                        <span class="badge bg-{{ object.status_badge }}">
                                            {{ object.get_status_display }}
                                        </span>
                                    </dd>
                                    
                                    <dt class="col-sm-5">Total Amount:</dt>
                                    <dd class="col-sm-7">${{ object.total_amount|floatformat:2|intcomma }}</dd>
                                    
                                    <dt class="col-sm-5">Items:</dt>
                                    <dd class="col-sm-7">{{ object.items.count }}</dd>
                                </dl>
                            </div>
                        </div>
                        
                        {% if object.description %}
                        <div class="mt-3">
                            <dt>Description:</dt>
                            <dd class="mb-0">{{ object.description|linebreaksbr }}</dd>
                        </div>
                        {% endif %}
                    </div>
                </div>

                <div class="card border-warning mb-4">
                    <div class="card-header bg-warning bg-opacity-10">
                        <h6 class="mb-0">Items to be Deleted</h6>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-sm table-hover mb-0">
                                <thead>
                                    <tr class="table-light">
                                        <th>#</th>
                                        <th>Description</th>
                                        <th class="text-end">Qty</th>
                                        <th class="text-end">Unit Price</th>
                                        <th class="text-end">Amount</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for item in object.items.all %}
                                    <tr>
                                        <td>{{ forloop.counter }}</td>
                                        <td>{{ item.description }}</td>
                                        <td class="text-end">{{ item.quantity|floatformat:2|intcomma }} {{ item.unit|default:'' }}</td>
                                        <td class="text-end">${{ item.unit_price|floatformat:2|intcomma }}</td>
                                        <td class="text-end">${{ item.amount|floatformat:2|intcomma }}</td>
                                    </tr>
                                    {% empty %}
                                    <tr>
                                        <td colspan="5" class="text-center">No items found</td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                {% if object.attachments.exists %}
                <div class="alert alert-warning">
                    <div class="d-flex align-items-center">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        <div>
                            <strong>Note:</strong> This expense has {{ object.attachments.count }} attachment(s) that will also be deleted.
                        </div>
                    </div>
                </div>
                {% endif %}

                <form method="post" class="mt-4">
                    {% csrf_token %}
                    
                    <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" id="confirm-delete" required>
                        <label class="form-check-label fw-bold" for="confirm-delete">
                            I understand that this action cannot be undone and I want to proceed with the deletion.
                        </label>
                    </div>
                    
                    <div class="form-group mb-3">
                        <label for="delete-reason" class="form-label fw-bold">Reason for Deletion</label>
                        <textarea class="form-control" id="delete-reason" name="reason" rows="3" 
                                  placeholder="Please provide a reason for deleting this expense (required)" required></textarea>
                    </div>
                    
                    <div class="d-flex justify-content-between">
                        <a href="{% if object %}{% url 'expenses:expense_detail' object.id %}{% else %}{% url 'expenses:expense_list' %}{% endif %}" 
                           class="btn btn-outline-secondary">
                            <i class="fas fa-times me-1"></i> Cancel
                        </a>
                        <button type="submit" class="btn btn-danger">
                            <i class="fas fa-trash-alt me-1"></i> Confirm Delete
                        </button>
                    </div>
                </form>
            </div>
            <div class="card-footer text-muted small">
                <div class="d-flex justify-content-between">
                    <div>
                        <i class="fas fa-user me-1"></i> 
                        Created by {{ object.created_by.get_full_name|default:object.created_by.username }}
                        on {{ object.created_at|date:"M d, Y H:i" }}
                    </div>
                    <div>
                        <i class="fas fa-history me-1"></i> 
                        Last updated {{ object.updated_at|timesince }} ago
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}