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

{% block title %}Claim {{ claim.claim_number }} - Details{% endblock %}

{% block extra_css %}
<style>
    .claim-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 15px;
        padding: 2rem;
        margin-bottom: 2rem;
    }
    .info-card {
        border: none;
        border-radius: 15px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        margin-bottom: 1.5rem;
        transition: transform 0.3s ease;
    }
    .info-card:hover {
        transform: translateY(-2px);
    }
    .info-card .card-header {
        background: #f8f9fa;
        border-bottom: 1px solid #e9ecef;
        border-radius: 15px 15px 0 0 !important;
        padding: 1rem 1.5rem;
    }
    .info-card .card-body {
        padding: 1.5rem;
    }
    .status-badge {
        font-size: 1rem;
        padding: 0.5rem 1rem;
        border-radius: 50px;
    }
    .priority-indicator {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        display: inline-block;
        margin-right: 8px;
    }
    .priority-low { background-color: #28a745; }
    .priority-normal { background-color: #17a2b8; }
    .priority-high { background-color: #ffc107; }
    .priority-urgent { background-color: #fd7e14; }
    .priority-emergency { background-color: #dc3545; }
    .timeline {
        position: relative;
        padding-left: 2rem;
    }
    .timeline::before {
        content: '';
        position: absolute;
        left: 15px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: #e9ecef;
    }
    .timeline-item {
        position: relative;
        margin-bottom: 1.5rem;
    }
    .timeline-item::before {
        content: '';
        position: absolute;
        left: -23px;
        top: 8px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #007bff;
        border: 3px solid #fff;
        box-shadow: 0 0 0 2px #e9ecef;
    }
    .timeline-item.success::before { background: #28a745; }
    .timeline-item.warning::before { background: #ffc107; }
    .timeline-item.danger::before { background: #dc3545; }
    .timeline-item.info::before { background: #17a2b8; }
    .financial-summary {
        background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
        color: white;
        border-radius: 15px;
        padding: 1.5rem;
    }
    .approval-progress {
        height: 8px;
        border-radius: 10px;
        background: #e9ecef;
        overflow: hidden;
    }
    .approval-progress-bar {
        height: 100%;
        background: linear-gradient(90deg, #28a745 0%, #20c997 100%);
        transition: width 0.5s ease;
    }
    .document-item {
        border: 1px solid #e9ecef;
        border-radius: 10px;
        padding: 1rem;
        margin-bottom: 1rem;
        transition: all 0.3s ease;
    }
    .document-item:hover {
        border-color: #007bff;
        box-shadow: 0 2px 10px rgba(0, 123, 255, 0.1);
    }
    .action-buttons .btn {
        margin-right: 0.5rem;
        margin-bottom: 0.5rem;
    }
</style>
{% endblock %}

{% block content %}
<div id="content" class="app-content">
    <!-- Breadcrumb -->
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
        <li class="breadcrumb-item"><a href="{% url 'patients:patient_list' %}">Patients</a></li>
        <li class="breadcrumb-item"><a href="{% url 'patients:insurance_claims_list' %}">Claims</a></li>
        <li class="breadcrumb-item active">{{ claim.claim_number }}</li>
    </ol>

    <!-- Claim Header -->
    <div class="claim-header">
        <div class="row align-items-center">
            <div class="col-md-8">
                <h1 class="mb-2">
                    <i class="fas fa-file-medical me-3"></i>
                    Claim {{ claim.claim_number }}
                </h1>
                <div class="d-flex align-items-center mb-3">
                    {% if claim.status == 'DRAFT' %}
                        <span class="badge bg-secondary status-badge me-3">{{ claim.get_status_display }}</span>
                    {% elif claim.status == 'SUBMITTED' %}
                        <span class="badge bg-primary status-badge me-3">{{ claim.get_status_display }}</span>
                    {% elif claim.status == 'UNDER_REVIEW' %}
                        <span class="badge bg-warning status-badge me-3">{{ claim.get_status_display }}</span>
                    {% elif claim.status == 'APPROVED' or claim.status == 'PARTIALLY_APPROVED' %}
                        <span class="badge bg-success status-badge me-3">{{ claim.get_status_display }}</span>
                    {% elif claim.status == 'DENIED' %}
                        <span class="badge bg-danger status-badge me-3">{{ claim.get_status_display }}</span>
                    {% elif claim.status == 'PAID' %}
                        <span class="badge bg-dark status-badge me-3">{{ claim.get_status_display }}</span>
                    {% else %}
                        <span class="badge bg-light text-dark status-badge me-3">{{ claim.get_status_display }}</span>
                    {% endif %}
                    
                    <span class="priority-indicator priority-{{ claim.priority|lower }}"></span>
                    <span class="me-3">{{ claim.get_priority_display }} Priority</span>
                    
                    <span class="badge bg-info">{{ claim.get_claim_type_display }}</span>
                </div>
                <p class="mb-0 opacity-75">
                    <i class="fas fa-user me-2"></i>{{ claim.patient.get_full_name }} ({{ claim.patient.mrn }})
                    <span class="mx-3">|</span>
                    <i class="fas fa-calendar me-2"></i>Service Date: {{ claim.service_date|date:"F d, Y" }}
                </p>
            </div>
            <div class="col-md-4 text-md-end">
                <div class="action-buttons">
                    <a href="{% url 'patients:insurance_claim_edit' claim.id %}" class="btn btn-light">
                        <i class="fas fa-edit me-2"></i>Edit Claim
                    </a>
                    <button type="button" class="btn btn-warning" onclick="showStatusModal()">
                        <i class="fas fa-sync me-2"></i>Update Status
                    </button>
                    <div class="btn-group">
                        <button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown">
                            <i class="fas fa-ellipsis-v"></i>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#" onclick="printClaim()">
                                <i class="fas fa-print me-2"></i>Print Claim
                            </a></li>
                            <li><a class="dropdown-item" href="#" onclick="exportClaim()">
                                <i class="fas fa-download me-2"></i>Export PDF
                            </a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item text-danger" href="{% url 'patients:insurance_claim_delete' claim.id %}">
                                <i class="fas fa-trash me-2"></i>Delete Claim
                            </a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Left Column -->
        <div class="col-lg-8">
            <!-- Patient Information -->
            <div class="info-card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-user me-2"></i>Patient Information
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label text-muted">Full Name</label>
                                <div class="fw-bold">{{ claim.patient.get_full_name }}</div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label text-muted">Medical Record Number</label>
                                <div class="fw-bold">{{ claim.patient.mrn }}</div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label text-muted">Date of Birth</label>
                                <div class="fw-bold">{{ claim.patient.date_of_birth|date:"F d, Y" }}</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label text-muted">Saudi ID/Iqama</label>
                                <div class="fw-bold">{{ claim.saudi_id_number|default:"Not provided" }}</div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label text-muted">Phone Number</label>
                                <div class="fw-bold">{{ claim.patient.phone_number|default:"Not provided" }}</div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label text-muted">Email</label>
                                <div class="fw-bold">{{ claim.patient.email|default:"Not provided" }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Insurance Information -->
            <div class="info-card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-shield-alt me-2"></i>Insurance Information
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label text-muted">Insurance Company</label>
                                <div class="fw-bold">{{ claim.insurance_info.insurance_company }}</div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label text-muted">Policy Number</label>
                                <div class="fw-bold">{{ claim.insurance_info.policy_number }}</div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label text-muted">Plan Type</label>
                                <div class="fw-bold">{{ claim.insurance_info.get_plan_type_display|default:"Not specified" }}</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label text-muted">Insurance Card Number</label>
                                <div class="fw-bold">{{ claim.insurance_card_number|default:"Not provided" }}</div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label text-muted">Authorization Number</label>
                                <div class="fw-bold">{{ claim.authorization_number|default:"Not required" }}</div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label text-muted">Insurance Type</label>
                                <div class="fw-bold">{{ claim.insurance_info.get_insurance_type_display }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Service Information -->
            <div class="info-card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-hospital me-2"></i>Service Information
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label text-muted">Service Provider</label>
                                <div class="fw-bold">{{ claim.service_provider }}</div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label text-muted">Provider License</label>
                                <div class="fw-bold">{{ claim.service_provider_license|default:"Not provided" }}</div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label text-muted">Service Date</label>
                                <div class="fw-bold">{{ claim.service_date|date:"F d, Y" }}</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label text-muted">Healthcare Facility</label>
                                <div class="fw-bold">{{ claim.facility_name|default:"Not specified" }}</div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label text-muted">Facility License</label>
                                <div class="fw-bold">{{ claim.facility_license|default:"Not provided" }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Medical Information -->
            <div class="info-card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-stethoscope me-2"></i>Medical Information
                    </h5>
                </div>
                <div class="card-body">
                    <div class="mb-4">
                        <label class="form-label text-muted">Primary Diagnosis</label>
                        <div class="fw-bold">{{ claim.primary_diagnosis_code }}</div>
                        <div class="text-muted">{{ claim.primary_diagnosis_description }}</div>
                    </div>
                    
                    {% if claim.secondary_diagnosis_codes %}
                    <div class="mb-4">
                        <label class="form-label text-muted">Secondary Diagnoses</label>
                        {% for diagnosis in claim.secondary_diagnosis_codes %}
                        <div class="mb-2">
                            <span class="fw-bold">{{ diagnosis.code }}</span> - {{ diagnosis.description }}
                        </div>
                        {% endfor %}
                    </div>
                    {% endif %}
                    
                    {% if claim.procedure_codes %}
                    <div class="mb-4">
                        <label class="form-label text-muted">Procedures</label>
                        {% for procedure in claim.procedure_codes %}
                        <div class="mb-2">
                            <span class="fw-bold">{{ procedure.code }}</span> - {{ procedure.description }}
                        </div>
                        {% endfor %}
                    </div>
                    {% endif %}
                    
                    {% if claim.notes %}
                    <div class="mb-0">
                        <label class="form-label text-muted">Notes</label>
                        <div>{{ claim.notes|linebreaks }}</div>
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- Documents -->
            {% if documents %}
            <div class="info-card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-paperclip me-2"></i>Attached Documents ({{ documents.count }})
                    </h5>
                </div>
                <div class="card-body">
                    {% for document in documents %}
                    <div class="document-item">
                        <div class="d-flex align-items-center justify-content-between">
                            <div class="d-flex align-items-center">
                                <div class="me-3">
                                    {% if document.mime_type == 'application/pdf' %}
                                        <i class="fas fa-file-pdf fa-2x text-danger"></i>
                                    {% elif 'image' in document.mime_type %}
                                        <i class="fas fa-file-image fa-2x text-info"></i>
                                    {% elif 'word' in document.mime_type %}
                                        <i class="fas fa-file-word fa-2x text-primary"></i>
                                    {% else %}
                                        <i class="fas fa-file fa-2x text-muted"></i>
                                    {% endif %}
                                </div>
                                <div>
                                    <div class="fw-bold">{{ document.title }}</div>
                                    <small class="text-muted">
                                        {{ document.get_document_type_display }} • 
                                        {{ document.file_size|filesizeformat }} • 
                                        {{ document.uploaded_at|date:"M d, Y g:i A" }}
                                    </small>
                                    {% if document.description %}
                                    <div class="text-muted small mt-1">{{ document.description }}</div>
                                    {% endif %}
                                </div>
                            </div>
                            <div>
                                <button class="btn btn-sm btn-outline-primary" onclick="viewDocument('{{ document.file_path }}')">
                                    <i class="fas fa-eye"></i>
                                </button>
                                <button class="btn btn-sm btn-outline-secondary" onclick="downloadDocument('{{ document.file_path }}')">
                                    <i class="fas fa-download"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
            {% endif %}
        </div>

        <!-- Right Column -->
        <div class="col-lg-4">
            <!-- Financial Summary -->
            <div class="financial-summary mb-4">
                <h5 class="mb-3">
                    <i class="fas fa-calculator me-2"></i>Financial Summary
                </h5>
                <div class="row text-center">
                    <div class="col-6">
                        <div class="fs-4 fw-bold">{{ claim.billed_amount|floatformat:2 }}</div>
                        <div class="opacity-75">Billed Amount (SAR)</div>
                    </div>
                    <div class="col-6">
                        <div class="fs-4 fw-bold">{{ claim.approved_amount|floatformat:2 }}</div>
                        <div class="opacity-75">Approved Amount (SAR)</div>
                    </div>
                </div>
                <hr class="my-3 opacity-50">
                <div class="row text-center">
                    <div class="col-6">
                        <div class="fs-5 fw-bold">{{ claim.paid_amount|floatformat:2 }}</div>
                        <div class="opacity-75">Paid Amount (SAR)</div>
                    </div>
                    <div class="col-6">
                        <div class="fs-5 fw-bold">{{ claim.patient_responsibility|floatformat:2 }}</div>
                        <div class="opacity-75">Patient Responsibility (SAR)</div>
                    </div>
                </div>
                
                <!-- Approval Progress -->
                <div class="mt-4">
                    <div class="d-flex justify-content-between mb-2">
                        <span class="opacity-75">Approval Rate</span>
                        <span class="fw-bold">{{ approval_percentage|floatformat:1 }}%</span>
                    </div>
                    <div class="approval-progress">
                        <div class="approval-progress-bar" style="width: {{ approval_percentage }}%"></div>
                    </div>
                </div>
            </div>

            <!-- Status Timeline -->
            <div class="info-card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-history me-2"></i>Status History
                    </h5>
                </div>
                <div class="card-body">
                    <div class="timeline">
                        {% for history in status_history %}
                        <div class="timeline-item {% if history.to_status == 'APPROVED' or history.to_status == 'PAID' %}success{% elif history.to_status == 'DENIED' %}danger{% elif history.to_status == 'UNDER_REVIEW' %}warning{% else %}info{% endif %}">
                            <div class="d-flex justify-content-between align-items-start">
                                <div>
                                    <div class="fw-bold">
                                        {% if history.from_status %}
                                            {{ history.get_from_status_display }} → {{ history.get_to_status_display }}
                                        {% else %}
                                            {{ history.get_to_status_display }}
                                        {% endif %}
                                    </div>
                                    {% if history.reason %}
                                    <div class="text-muted small">{{ history.reason }}</div>
                                    {% endif %}
                                    {% if history.changed_by %}
                                    <div class="text-muted small">
                                        <i class="fas fa-user me-1"></i>{{ history.changed_by.get_full_name|default:history.changed_by.username }}
                                    </div>
                                    {% endif %}
                                </div>
                                <small class="text-muted">{{ history.changed_at|date:"M d, g:i A" }}</small>
                            </div>
                        </div>
                        {% empty %}
                        <div class="text-muted text-center py-3">
                            <i class="fas fa-clock fa-2x mb-2"></i>
                            <div>No status history available</div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>

            <!-- Quick Actions -->
            <div class="info-card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-bolt me-2"></i>Quick Actions
                    </h5>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        {% if claim.status == 'DRAFT' %}
                        <button class="btn btn-primary" onclick="updateClaimStatus('SUBMITTED')">
                            <i class="fas fa-paper-plane me-2"></i>Submit Claim
                        </button>
                        {% elif claim.status == 'SUBMITTED' %}
                        <button class="btn btn-warning" onclick="updateClaimStatus('UNDER_REVIEW')">
                            <i class="fas fa-search me-2"></i>Mark Under Review
                        </button>
                        {% elif claim.status == 'UNDER_REVIEW' %}
                        <button class="btn btn-success" onclick="updateClaimStatus('APPROVED')">
                            <i class="fas fa-check me-2"></i>Approve Claim
                        </button>
                        <button class="btn btn-danger" onclick="updateClaimStatus('DENIED')">
                            <i class="fas fa-times me-2"></i>Deny Claim
                        </button>
                        {% elif claim.status == 'APPROVED' %}
                        <button class="btn btn-dark" onclick="updateClaimStatus('PAID')">
                            <i class="fas fa-money-bill me-2"></i>Mark as Paid
                        </button>
                        {% endif %}
                        
                        <button class="btn btn-outline-info" onclick="showStatusModal()">
                            <i class="fas fa-sync me-2"></i>Change Status
                        </button>
                        
                        <hr>
                        
                        <a href="{% url 'patients:patient_detail' claim.patient.id %}" class="btn btn-outline-primary">
                            <i class="fas fa-user me-2"></i>View Patient
                        </a>
                        
                        <a href="{% url 'patients:insurance_claims_list' %}" class="btn btn-outline-secondary">
                            <i class="fas fa-list me-2"></i>Back to Claims
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Status Update Modal -->
<div class="modal fade" id="statusModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Update Claim Status</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="statusForm">
                    <div class="mb-3">
                        <label class="form-label">Current Status</label>
                        <input type="text" class="form-control" value="{{ claim.get_status_display }}" readonly>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">New Status</label>
                        <select class="form-select" id="newStatus" name="status" required>
                            <option value="DRAFT" {% if claim.status == 'DRAFT' %}selected{% endif %}>Draft</option>
                            <option value="SUBMITTED" {% if claim.status == 'SUBMITTED' %}selected{% endif %}>Submitted</option>
                            <option value="UNDER_REVIEW" {% if claim.status == 'UNDER_REVIEW' %}selected{% endif %}>Under Review</option>
                            <option value="APPROVED" {% if claim.status == 'APPROVED' %}selected{% endif %}>Approved</option>
                            <option value="PARTIALLY_APPROVED" {% if claim.status == 'PARTIALLY_APPROVED' %}selected{% endif %}>Partially Approved</option>
                            <option value="DENIED" {% if claim.status == 'DENIED' %}selected{% endif %}>Denied</option>
                            <option value="PAID" {% if claim.status == 'PAID' %}selected{% endif %}>Paid</option>
                            <option value="CANCELLED" {% if claim.status == 'CANCELLED' %}selected{% endif %}>Cancelled</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Reason</label>
                        <textarea class="form-control" name="reason" rows="3" 
                                  placeholder="Enter reason for status change..."></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="updateStatus()">Update Status</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function showStatusModal() {
    $('#statusModal').modal('show');
}

function updateStatus() {
    const formData = new FormData($('#statusForm')[0]);
    
    $.ajaxSetup({
        beforeSend: function(xhr, settings) {
            if (!this.crossDomain) {
                xhr.setRequestHeader("X-CSRFToken", $('[name=csrfmiddlewaretoken]').val());
            }
        }
    });
    
    $.ajax({
        url: '{% url "patients:update_claim_status" claim.id %}',
        method: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
            if (response.success) {
                $('#statusModal').modal('hide');
                location.reload();
            } else {
                alert('Error: ' + response.error);
            }
        },
        error: function() {
            alert('Error updating status. Please try again.');
        }
    });
}

function updateClaimStatus(status) {
    if (!confirm(`Are you sure you want to change the status to ${status}?`)) {
        return;
    }
    
    $.ajaxSetup({
        beforeSend: function(xhr, settings) {
            if (!this.crossDomain) {
                xhr.setRequestHeader("X-CSRFToken", $('[name=csrfmiddlewaretoken]').val());
            }
        }
    });
    
    $.ajax({
        url: '{% url "patients:update_claim_status" claim.id %}',
        method: 'POST',
        data: {
            status: status,
            reason: `Quick action: ${status}`
        },
        success: function(response) {
            if (response.success) {
                location.reload();
            } else {
                alert('Error: ' + response.error);
            }
        },
        error: function() {
            alert('Error updating status. Please try again.');
        }
    });
}

function printClaim() {
    window.print();
}

function exportClaim() {
    alert('Export functionality will be implemented soon.');
}

function viewDocument(filePath) {
    // Open document in new window/tab
    window.open(filePath, '_blank');
}

function downloadDocument(filePath) {
    // Create temporary link and trigger download
    const link = document.createElement('a');
    link.href = filePath;
    link.download = '';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}
</script>
{% endblock %}