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

{% block title %}Void Sale {{ sale.invoice_number }} - Ghana Wholesale{% endblock %}

{% 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"><i class="fas fa-exclamation-triangle"></i> Void/Cancel Sale</h5>
            </div>
            <div class="card-body">
                <div class="alert alert-danger">
                    <h5><i class="fas fa-exclamation-circle"></i> WARNING: This action cannot be undone!</h5>
                    <p class="mb-0">
                        You are about to void sale <strong>{{ sale.invoice_number }}</strong>.
                        This will restore stock to the shop and mark the sale as cancelled.
                    </p>
                </div>
                
                <div class="card mb-4">
                    <div class="card-body">
                        <h6>Sale Details:</h6>
                        <div class="row">
                            <div class="col-md-6">
                                <p><strong>Invoice:</strong> {{ sale.invoice_number }}</p>
                                <p><strong>Date:</strong> {{ sale.created_at|date:"d M Y, H:i" }}</p>
                                <p><strong>Shop:</strong> {{ sale.shop.name }} ({{ sale.shop.code }})</p>
                            </div>
                            <div class="col-md-6">
                                <p><strong>Items:</strong> {{ sale.items_count }}</p>
                                <p><strong>Total Amount:</strong> GH₵ {{ sale.total_amount|floatformat:2 }}</p>
                                <p><strong>Status:</strong> {{ sale.get_status_display }}</p>
                            </div>
                        </div>
                        
                        {% if sale.items.all %}
                        <h6 class="mt-3">Items to be Restored:</h6>
                        <ul class="list-group">
                            {% for item in sale.items.all %}
                            <li class="list-group-item">
                                {{ item.product.name }} - {{ item.quantity }} {{ item.product.unit }}
                            </li>
                            {% endfor %}
                        </ul>
                        {% endif %}
                    </div>
                </div>
                
                <form method="post">
                    {% csrf_token %}
                    
                    <div class="mb-3">
                        <label for="reason" class="form-label">Reason for Voiding *</label>
                        <textarea class="form-control" id="reason" name="reason" rows="4" 
                                  placeholder="Please provide a reason for voiding this sale..." required></textarea>
                        <div class="form-text">This will be recorded in the sale notes.</div>
                    </div>
                    
                    <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" id="confirmVoid" required>
                        <label class="form-check-label" for="confirmVoid">
                            I understand that this action will restore stock and cannot be undone.
                        </label>
                    </div>
                    
                    <div class="d-flex justify-content-between">
                        <a href="{% url 'sale_detail' sale.pk %}" class="btn btn-secondary">
                            <i class="fas fa-times"></i> Cancel
                        </a>
                        <button type="submit" class="btn btn-danger" id="voidBtn" disabled>
                            <i class="fas fa-ban"></i> Confirm Void Sale
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const confirmCheckbox = document.getElementById('confirmVoid');
    const voidBtn = document.getElementById('voidBtn');
    
    confirmCheckbox.addEventListener('change', function() {
        voidBtn.disabled = !this.checked;
    });
});
</script>
{% endblock %}