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

{% block title %}Delete Claim {{ object.claim_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 Insurance Claim
            </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:claim_list' %}">Insurance Claims</a></li>
                    <li class="breadcrumb-item"><a href="{% url 'billing:claim_detail' object.claim_id %}">{{ object.claim_number }}</a></li>
                    <li class="breadcrumb-item active">Delete</li>
                </ol>
            </nav>
        </div>
        <div class="btn-group">
            <a href="{% url 'billing:claim_detail' object.claim_id %}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-2"></i>Back to Claim
            </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 insurance claim. This action cannot be undone and may affect reimbursement tracking.
                        </p>
                    </div>
                </div>
            </div>

            <!-- Claim Information Card -->
            <div class="card mb-4">
                <div class="card-header bg-light">
                    <h5 class="mb-0">
                        <i class="fas fa-file-medical me-2"></i>Claim 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">Claim Number:</td>
                                    <td>{{ object.claim_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">Insurance Company:</td>
                                    <td>{{ object.insurance_info.insurance_company }}</td>
                                </tr>
                            </table>
                        </div>
                        <div class="col-md-6">
                            <table class="table table-borderless table-sm">
                                <tr>
                                    <td class="fw-bold">Billed Amount:</td>
                                    <td class="fw-bold text-primary">${{ object.billed_amount|floatformat:2 }}</td>
                                </tr>
                                <tr>
                                    <td class="fw-bold">Status:</td>
                                    <td>
                                        {% if object.status == 'DRAFT' %}
                                            <span class="badge bg-secondary">Draft</span>
                                        {% elif object.status == 'SUBMITTED' %}
                                            <span class="badge bg-info">Submitted</span>
                                        {% elif object.status == 'PENDING' %}
                                            <span class="badge bg-warning">Pending</span>
                                        {% elif object.status == 'APPROVED' %}
                                            <span class="badge bg-success">Approved</span>
                                        {% elif object.status == 'PARTIALLY_APPROVED' %}
                                            <span class="badge bg-primary">Partially Approved</span>
                                        {% elif object.status == 'DENIED' %}
                                            <span class="badge bg-danger">Denied</span>
                                        {% elif object.status == 'PAID' %}
                                            <span class="badge bg-success">Paid</span>
                                        {% elif object.status == 'APPEALED' %}
                                            <span class="badge bg-dark">Appealed</span>
                                        {% endif %}
                                    </td>
                                </tr>
                                <tr>
                                    <td class="fw-bold">Submission Date:</td>
                                    <td>
                                        {% if object.submission_date %}
                                            {{ object.submission_date|date:"M d, Y" }}
                                        {% else %}
                                            <span class="text-muted">Not submitted</span>
                                        {% endif %}
                                    </td>
                                </tr>
                                <tr>
                                    <td class="fw-bold">Created:</td>
                                    <td>{{ object.created_at|date:"M d, Y" }}</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 Deleted:</h6>
                            <ul class="list-unstyled">
                                <li><i class="fas fa-times text-danger me-2"></i>Claim record and all line items</li>
                                <li><i class="fas fa-times text-danger me-2"></i>Claim submission history</li>
                                <li><i class="fas fa-times text-danger me-2"></i>Insurance correspondence records</li>
                                <li><i class="fas fa-times text-danger me-2"></i>Approval/denial documentation</li>
                                <li><i class="fas fa-times text-danger me-2"></i>Reimbursement tracking data</li>
                            </ul>
                        </div>
                        <div class="col-md-6">
                            <h6 class="fw-bold text-success">Will be Preserved:</h6>
                            <ul class="list-unstyled">
                                <li><i class="fas fa-check text-success me-2"></i>Original medical bill</li>
                                <li><i class="fas fa-check text-success me-2"></i>Patient insurance information</li>
                                <li><i class="fas fa-check text-success me-2"></i>Medical records and encounters</li>
                                <li><i class="fas fa-check text-success me-2"></i>Payment records (if any)</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Deletion Restrictions -->
            {% if object.status not in 'DRAFT,DENIED' %}
            <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">Cannot Delete This Claim</h6>
                        <p class="mb-2">This claim cannot be deleted because:</p>
                        <ul class="mb-0">
                            {% if object.status == 'SUBMITTED' %}
                            <li>The claim has been submitted to the insurance company</li>
                            {% endif %}
                            {% if object.status == 'PENDING' %}
                            <li>The claim is currently pending with the insurance company</li>
                            {% endif %}
                            {% if object.status == 'APPROVED' %}
                            <li>The claim has been approved by the insurance company</li>
                            {% endif %}
                            {% if object.status == 'PARTIALLY_APPROVED' %}
                            <li>The claim has been partially approved by the insurance company</li>
                            {% endif %}
                            {% if object.status == 'PAID' %}
                            <li>The claim has been paid by the insurance company</li>
                            {% endif %}
                            {% if object.status == 'APPEALED' %}
                            <li>The claim is currently under appeal</li>
                            {% endif %}
                        </ul>
                    </div>
                    <div class="text-center">
                        {% if object.status == 'SUBMITTED' or object.status == 'PENDING' %}
                        <a href="{% url 'billing:claim_withdraw' object.claim_id %}" class="btn btn-warning me-2">
                            <i class="fas fa-undo me-2"></i>Withdraw Claim First
                        </a>
                        {% endif %}
                        <a href="{% url 'billing:claim_detail' object.claim_id %}" class="btn btn-primary">
                            <i class="fas fa-arrow-left me-2"></i>Return to Claim 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 cannot be undone
                            </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 claim created in error</option>
                                <option value="INCORRECT_PATIENT">Incorrect patient assigned</option>
                                <option value="INCORRECT_INSURANCE">Wrong insurance information</option>
                                <option value="INCORRECT_SERVICES">Incorrect services claimed</option>
                                <option value="BILLING_ERROR">Billing error or mistake</option>
                                <option value="DENIED_FINAL">Claim denied and no appeal planned</option>
                                <option value="SUPERSEDED">Superseded by corrected claim</option>
                                <option value="OTHER">Other (specify in notes)</option>
                            </select>
                        </div>

                        <!-- Replacement Claim Information -->
                        <div id="replacementClaimSection" style="display: none;">
                            <div class="mb-3">
                                <label for="replacementClaim" class="form-label fw-bold">Replacement Claim Number</label>
                                <input type="text" class="form-control" id="replacementClaim" name="replacement_claim" placeholder="Enter replacement claim number if applicable">
                                <div class="form-text">If this claim is being replaced by a corrected claim, enter the new claim number.</div>
                            </div>
                        </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 claim is being deleted..."></textarea>
                        </div>

                        <!-- Insurance Company Notification -->
                        {% if object.status == 'SUBMITTED' %}
                        <div class="mb-4">
                            <div class="alert alert-info">
                                <h6 class="alert-heading">Insurance Company Notification</h6>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="notifyInsurance" name="notify_insurance">
                                    <label class="form-check-label" for="notifyInsurance">
                                        Notify {{ object.insurance_info.insurance_company }} about claim withdrawal
                                    </label>
                                </div>
                                <div class="form-text">Check this box to automatically notify the insurance company that this claim is being withdrawn.</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 Claim", this claim and all associated data will be permanently removed from the system.
                                        This action cannot be reversed and may affect reimbursement tracking.
                                    </p>
                                </div>
                            </div>
                        </div>

                        <!-- Action Buttons -->
                        <div class="d-flex justify-content-between">
                            <a href="{% url 'billing:claim_detail' object.claim_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 Claim Permanently
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<script>
// Enable delete button only when confirmation is checked and reason is selected
function checkFormValidity() {
    const confirmCheckbox = document.getElementById('confirmDeletion');
    const reasonSelect = document.getElementById('deletionReason');
    const deleteButton = document.getElementById('deleteButton');
    
    const isValid = confirmCheckbox.checked && reasonSelect.value;
    deleteButton.disabled = !isValid;
}

// Show/hide replacement claim section based on reason
function toggleReplacementSection() {
    const reasonSelect = document.getElementById('deletionReason');
    const replacementSection = document.getElementById('replacementClaimSection');
    
    if (reasonSelect.value === 'SUPERSEDED') {
        replacementSection.style.display = 'block';
    } else {
        replacementSection.style.display = 'none';
        document.getElementById('replacementClaim').value = '';
    }
}

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

// Final confirmation before submission
document.querySelector('form').addEventListener('submit', function(e) {
    const claimNumber = '{{ object.claim_number }}';
    const billedAmount = '{{ object.billed_amount|floatformat:2 }}';
    
    const confirmation = confirm(
        `Are you absolutely sure you want to delete claim ${claimNumber}?\n\n` +
        `Billed Amount: $${billedAmount}\n` +
        'Insurance Company: {{ object.insurance_info.insurance_company }}\n\n' +
        'This action is PERMANENT and cannot be undone.\n' +
        'This may affect reimbursement tracking and reporting.\n\n' +
        'Click OK to proceed with deletion, or Cancel to abort.'
    );
    
    if (!confirmation) {
        e.preventDefault();
        return false;
    }
});
</script>
{% endblock %}