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

{% block title %}Delete Payment {{ object.payment_number }} - {{ block.super }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-1 text-danger">
                <i class="fas fa-exclamation-triangle me-2"></i>Delete Payment
            </h1>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="{% url 'billing:dashboard' %}">Billing</a></li>
                    <li class="breadcrumb-item"><a href="{% url 'billing:payment_list' %}">Payments</a></li>
                    <li class="breadcrumb-item"><a href="{% url 'billing:payment_detail' object.payment_id %}">{{ object.payment_number }}</a></li>
                    <li class="breadcrumb-item active">Delete</li>
                </ol>
            </nav>
        </div>
        <div class="btn-group">
            <a href="{% url 'billing:payment_detail' object.payment_id %}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-2"></i>Back to Payment
            </a>
        </div>
    </div>

    <div class="row justify-content-center">
        <div class="col-lg-8">
            <!-- Warning Alert -->
            <div class="alert alert-danger mb-4">
                <div class="d-flex align-items-center">
                    <div class="me-3">
                        <i class="fas fa-exclamation-triangle fa-2x"></i>
                    </div>
                    <div>
                        <h5 class="alert-heading mb-1">Warning: Permanent Deletion</h5>
                        <p class="mb-0">
                            You are about to permanently delete this payment record. This action cannot be undone and will affect billing calculations.
                        </p>
                    </div>
                </div>
            </div>

            <!-- Payment Information Card -->
            <div class="card mb-4">
                <div class="card-header bg-light">
                    <h5 class="mb-0">
                        <i class="fas fa-credit-card me-2"></i>Payment to be Deleted
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <table class="table table-borderless table-sm">
                                <tr>
                                    <td class="fw-bold">Payment Number:</td>
                                    <td>{{ object.payment_number }}</td>
                                </tr>
                                <tr>
                                    <td class="fw-bold">Patient:</td>
                                    <td>{{ object.medical_bill.patient.get_full_name }}</td>
                                </tr>
                                <tr>
                                    <td class="fw-bold">Bill Number:</td>
                                    <td>
                                        <a href="{% url 'billing:bill_detail' object.medical_bill.bill_id %}" class="text-decoration-none">
                                            {{ object.medical_bill.bill_number }}
                                        </a>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="fw-bold">Payment Date:</td>
                                    <td>{{ object.payment_date|date:"M d, Y" }}</td>
                                </tr>
                            </table>
                        </div>
                        <div class="col-md-6">
                            <table class="table table-borderless table-sm">
                                <tr>
                                    <td class="fw-bold">Payment Amount:</td>
                                    <td class="fw-bold text-success">${{ object.payment_amount|floatformat:2 }}</td>
                                </tr>
                                <tr>
                                    <td class="fw-bold">Payment Method:</td>
                                    <td>{{ object.get_payment_method_display }}</td>
                                </tr>
                                <tr>
                                    <td class="fw-bold">Status:</td>
                                    <td>
                                        {% if object.status == 'PENDING' %}
                                            <span class="badge bg-warning">Pending</span>
                                        {% elif object.status == 'PROCESSING' %}
                                            <span class="badge bg-info">Processing</span>
                                        {% elif object.status == 'COMPLETED' %}
                                            <span class="badge bg-success">Completed</span>
                                        {% elif object.status == 'FAILED' %}
                                            <span class="badge bg-danger">Failed</span>
                                        {% elif object.status == 'REFUNDED' %}
                                            <span class="badge bg-secondary">Refunded</span>
                                        {% endif %}
                                    </td>
                                </tr>
                                <tr>
                                    <td class="fw-bold">Reference:</td>
                                    <td>{{ object.reference_number|default:"-" }}</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Impact Assessment -->
            <div class="card mb-4">
                <div class="card-header bg-warning text-dark">
                    <h5 class="mb-0">
                        <i class="fas fa-impact me-2"></i>Deletion Impact
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h6 class="fw-bold text-danger">Will be Affected:</h6>
                            <ul class="list-unstyled">
                                <li><i class="fas fa-times text-danger me-2"></i>Payment record will be permanently deleted</li>
                                <li><i class="fas fa-times text-danger me-2"></i>Bill balance will be recalculated</li>
                                <li><i class="fas fa-times text-danger me-2"></i>Payment history will be updated</li>
                                <li><i class="fas fa-times text-danger me-2"></i>Financial reports will be affected</li>
                                <li><i class="fas fa-times text-danger me-2"></i>Audit trail will show deletion</li>
                            </ul>
                        </div>
                        <div class="col-md-6">
                            <h6 class="fw-bold text-info">Financial Impact:</h6>
                            <div class="alert alert-info">
                                <strong>Current Bill Status:</strong><br>
                                Total Amount: ${{ object.medical_bill.total_amount|floatformat:2 }}<br>
                                Paid Amount: ${{ object.medical_bill.paid_amount|floatformat:2 }}<br>
                                <strong>After Deletion:</strong><br>
                                New Paid Amount: ${{ object.medical_bill.paid_amount|add:object.payment_amount|floatformat:2 }}<br>
                                New Balance: ${{ object.medical_bill.balance_amount|add:object.payment_amount|floatformat:2 }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Deletion Restrictions -->
            {% if object.status == 'COMPLETED' and object.processed_at %}
            <div class="card mb-4">
                <div class="card-header bg-danger text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-ban me-2"></i>Deletion Restrictions
                    </h5>
                </div>
                <div class="card-body">
                    <div class="alert alert-warning">
                        <h6 class="alert-heading">Caution: Processed Payment</h6>
                        <p class="mb-2">This payment has been processed and completed. Deleting it may cause:</p>
                        <ul class="mb-3">
                            <li>Discrepancies in financial reconciliation</li>
                            <li>Issues with bank statement matching</li>
                            <li>Audit trail complications</li>
                            <li>Patient account confusion</li>
                        </ul>
                        <p class="mb-0">
                            <strong>Recommendation:</strong> Consider creating a refund or adjustment instead of deleting the payment.
                        </p>
                    </div>
                    <div class="text-center">
                        <a href="{% url 'billing:payment_refund' object.payment_id %}" class="btn btn-warning me-2">
                            <i class="fas fa-undo me-2"></i>Process Refund Instead
                        </a>
                        <a href="{% url 'billing:payment_detail' object.payment_id %}" class="btn btn-primary">
                            <i class="fas fa-arrow-left me-2"></i>Return to Payment Details
                        </a>
                    </div>
                </div>
            </div>
            {% elif object.status == 'REFUNDED' %}
            <div class="card mb-4">
                <div class="card-header bg-danger text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-ban me-2"></i>Cannot Delete Refunded Payment
                    </h5>
                </div>
                <div class="card-body">
                    <div class="alert alert-danger">
                        <h6 class="alert-heading">Refunded Payment Cannot Be Deleted</h6>
                        <p class="mb-0">
                            This payment has already been refunded and cannot be deleted. Refunded payments must be retained for audit and reconciliation purposes.
                        </p>
                    </div>
                    <div class="text-center">
                        <a href="{% url 'billing:payment_detail' object.payment_id %}" class="btn btn-primary">
                            <i class="fas fa-arrow-left me-2"></i>Return to Payment Details
                        </a>
                    </div>
                </div>
            </div>
            {% else %}
            <!-- Confirmation Form -->
            <div class="card">
                <div class="card-header bg-danger text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-trash me-2"></i>Confirm Deletion
                    </h5>
                </div>
                <div class="card-body">
                    <form method="post">
                        {% csrf_token %}
                        
                        <!-- Confirmation Checkbox -->
                        <div class="form-check mb-3">
                            <input class="form-check-input" type="checkbox" id="confirmDeletion" required>
                            <label class="form-check-label fw-bold" for="confirmDeletion">
                                I understand that this action is permanent and will affect billing calculations
                            </label>
                        </div>

                        <!-- Reason for Deletion -->
                        <div class="mb-3">
                            <label for="deletionReason" class="form-label fw-bold">Reason for Deletion *</label>
                            <select class="form-select" id="deletionReason" name="deletion_reason" required>
                                <option value="">Select a reason...</option>
                                <option value="DUPLICATE">Duplicate payment entry</option>
                                <option value="INCORRECT_AMOUNT">Incorrect payment amount</option>
                                <option value="WRONG_PATIENT">Payment applied to wrong patient</option>
                                <option value="WRONG_BILL">Payment applied to wrong bill</option>
                                <option value="DATA_ENTRY_ERROR">Data entry error</option>
                                <option value="FAILED_PROCESSING">Payment processing failed</option>
                                <option value="OTHER">Other (specify in notes)</option>
                            </select>
                        </div>

                        <!-- Additional Notes -->
                        <div class="mb-4">
                            <label for="deletionNotes" class="form-label fw-bold">Additional Notes</label>
                            <textarea class="form-control" id="deletionNotes" name="deletion_notes" rows="3" placeholder="Provide additional details about why this payment is being deleted..."></textarea>
                        </div>

                        <!-- Supervisor Approval (if required) -->
                        {% if object.payment_amount > 1000 %}
                        <div class="mb-4">
                            <div class="alert alert-warning">
                                <h6 class="alert-heading">Supervisor Approval Required</h6>
                                <p class="mb-2">This payment amount exceeds $1,000. Supervisor approval is required for deletion.</p>
                                <div class="form-floating">
                                    <input type="text" class="form-control" id="supervisorApproval" name="supervisor_approval" placeholder="Supervisor Name" required>
                                    <label for="supervisorApproval">Supervisor Name *</label>
                                </div>
                            </div>
                        </div>
                        {% endif %}

                        <!-- Final Warning -->
                        <div class="alert alert-danger">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-exclamation-triangle fa-2x me-3"></i>
                                <div>
                                    <h6 class="alert-heading mb-1">Final Warning</h6>
                                    <p class="mb-0">
                                        Once you click "Delete Payment", this payment record will be permanently removed and the bill balance will be updated.
                                        This action cannot be reversed.
                                    </p>
                                </div>
                            </div>
                        </div>

                        <!-- Action Buttons -->
                        <div class="d-flex justify-content-between">
                            <a href="{% url 'billing:payment_detail' object.payment_id %}" class="btn btn-outline-secondary">
                                <i class="fas fa-times me-2"></i>Cancel
                            </a>
                            <button type="submit" class="btn btn-danger" id="deleteButton" disabled>
                                <i class="fas fa-trash me-2"></i>Delete Payment Permanently
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<script>
// Enable delete button only when all requirements are met
function checkFormValidity() {
    const confirmCheckbox = document.getElementById('confirmDeletion');
    const reasonSelect = document.getElementById('deletionReason');
    const supervisorInput = document.getElementById('supervisorApproval');
    const deleteButton = document.getElementById('deleteButton');
    
    let isValid = confirmCheckbox.checked && reasonSelect.value;
    
    // Check supervisor approval if required
    if (supervisorInput) {
        isValid = isValid && supervisorInput.value.trim();
    }
    
    deleteButton.disabled = !isValid;
}

// Add event listeners
document.getElementById('confirmDeletion').addEventListener('change', checkFormValidity);
document.getElementById('deletionReason').addEventListener('change', checkFormValidity);

const supervisorInput = document.getElementById('supervisorApproval');
if (supervisorInput) {
    supervisorInput.addEventListener('input', checkFormValidity);
}

// Final confirmation before submission
document.querySelector('form').addEventListener('submit', function(e) {
    const paymentNumber = '{{ object.payment_number }}';
    const paymentAmount = '{{ object.payment_amount|floatformat:2 }}';
    
    const confirmation = confirm(
        `Are you absolutely sure you want to delete payment ${paymentNumber}?\n\n` +
        `Amount: $${paymentAmount}\n` +
        'This action is PERMANENT and cannot be undone.\n' +
        'The bill balance will be updated immediately.\n\n' +
        'Click OK to proceed with deletion, or Cancel to abort.'
    );
    
    if (!confirmation) {
        e.preventDefault();
        return false;
    }
});
</script>
{% endblock %}