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

{% block title %}Insurance Information - Patients{% endblock %}

{% block css %}
<link href="{% static 'assets/plugins/datatables.net-bs5/css/dataTables.bootstrap5.min.css' %}" rel="stylesheet" />
<link href="{% static 'assets/plugins/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css' %}" rel="stylesheet" />
{% endblock %}

{% block content %}
<!-- BEGIN breadcrumb -->
<ol class="breadcrumb float-xl-end">
    <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 active">Insurance Information</li>
</ol>
<!-- END breadcrumb -->

<!-- BEGIN page-header -->
<h1 class="page-header">
    Insurance Information
    <small>Patient Insurance Management</small>
</h1>
<!-- END page-header -->

<!-- BEGIN row -->
<div class="row">
    <div class="col-xl-12">
        <!-- BEGIN panel -->
        <div class="panel panel-inverse">
            <div class="panel-heading">
                <h4 class="panel-title">Insurance Records</h4>
                <div class="panel-heading-btn">
                    <a href="{% url 'patients:insurance_create' %}" class="btn btn-xs btn-success me-2">
                        <i class="fa fa-plus"></i> Add Insurance
                    </a>
                    <button type="button" class="btn btn-xs btn-primary me-2" onclick="refreshData()">
                        <i class="fa fa-refresh"></i> Refresh
                    </button>
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
                </div>
            </div>
            <div class="panel-body">
                <!-- Statistics Cards -->
                <div class="row mb-4">
                    <div class="col-md-3">
                        <div class="card border-primary">
                            <div class="card-body text-center">
                                <div class="fs-24px fw-bold text-primary" id="total-insurance">{{ total_insurance }}</div>
                                <div class="small text-muted">Total Insurance Records</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card border-success">
                            <div class="card-body text-center">
                                <div class="fs-24px fw-bold text-success" id="active-insurance">{{ active_insurance }}</div>
                                <div class="small text-muted">Active Policies</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card border-warning">
                            <div class="card-body text-center">
                                <div class="fs-24px fw-bold text-warning" id="expiring-soon">{{ expiring_soon }}</div>
                                <div class="small text-muted">Expiring Soon</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card border-danger">
                            <div class="card-body text-center">
                                <div class="fs-24px fw-bold text-danger" id="expired-insurance">{{ expired_insurance }}</div>
                                <div class="small text-muted">Expired Policies</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Filters -->
                <div class="row mb-3">
                    <div class="col-md-3">
                        <div class="form-floating">
                            <select class="form-select" id="filter-status">
                                <option value="">All Statuses</option>
                                <option value="ACTIVE">Active</option>
                                <option value="INACTIVE">Inactive</option>
                                <option value="EXPIRED">Expired</option>
                                <option value="PENDING">Pending</option>
                            </select>
                            <label>Status</label>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-floating">
                            <select class="form-select" id="filter-type">
                                <option value="">All Types</option>
                                <option value="PRIMARY">Primary</option>
                                <option value="SECONDARY">Secondary</option>
                                <option value="TERTIARY">Tertiary</option>
                            </select>
                            <label>Insurance Type</label>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-floating">
                            <select class="form-select" id="filter-provider">
                                <option value="">All Providers</option>
                                {% for provider in insurance_providers %}
                                <option value="{{ provider }}">{{ provider }}</option>
                                {% endfor %}
                            </select>
                            <label>Insurance Provider</label>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-floating">
                            <input type="text" class="form-control" id="search-input" placeholder="Search...">
                            <label>Search Patient/Policy</label>
                        </div>
                    </div>
                </div>

                <!-- Bulk Actions -->
                <div class="row mb-3">
                    <div class="col-md-6">
                        <div class="btn-group" role="group">
                            <button type="button" class="btn btn-outline-primary btn-sm" onclick="selectAll()">
                                <i class="fa fa-check-square me-1"></i>Select All
                            </button>
                            <button type="button" class="btn btn-outline-secondary btn-sm" onclick="selectNone()">
                                <i class="fa fa-square me-1"></i>Select None
                            </button>
                        </div>
                    </div>
                    <div class="col-md-6 text-end">
                        <div class="btn-group" role="group">
                            <button type="button" class="btn btn-outline-info btn-sm" onclick="verifySelected()" disabled id="verify-btn">
                                <i class="fa fa-check-circle me-1"></i>Verify Selected
                            </button>
                            <button type="button" class="btn btn-outline-warning btn-sm" onclick="renewSelected()" disabled id="renew-btn">
                                <i class="fa fa-refresh me-1"></i>Renew Selected
                            </button>
                            <button type="button" class="btn btn-outline-success btn-sm" onclick="exportSelected()" disabled id="export-btn">
                                <i class="fa fa-download me-1"></i>Export Selected
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Insurance Table -->
                <div class="table-responsive">
                    <table id="insurance-table" class="table table-striped table-bordered align-middle">
                        <thead>
                            <tr>
                                <th width="30">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="select-all-checkbox">
                                    </div>
                                </th>
                                <th>Patient</th>
                                <th>Insurance Provider</th>
                                <th>Policy Number</th>
                                <th>Type</th>
                                <th>Status</th>
                                <th>Effective Date</th>
                                <th>Expiration Date</th>
                                <th>Coverage</th>
                                <th width="120">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for insurance in object_list %}
                            <tr>
                                <td>
                                    <div class="form-check">
                                        <input class="form-check-input row-checkbox" type="checkbox" value="{{ insurance.pk }}">
                                    </div>
                                </td>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <div class="w-40px h-40px bg-primary rounded-circle d-flex align-items-center justify-content-center me-3">
                                            <i class="fa fa-user text-white"></i>
                                        </div>
                                        <div>
                                            <div class="fw-bold">
                                                <a href="{% url 'patients:patient_detail' insurance.patient.pk %}" class="text-decoration-none">
                                                    {{ insurance.patient.get_full_name }}
                                                </a>
                                            </div>
                                            <small class="text-muted">{{ insurance.patient.patient_id }}</small>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div class="fw-bold">{{ insurance.insurance_provider }}</div>
                                    {% if insurance.group_number %}
                                    <small class="text-muted">Group: {{ insurance.group_number }}</small>
                                    {% endif %}
                                </td>
                                <td>
                                    <code>{{ insurance.policy_number }}</code>
                                    {% if insurance.member_id %}
                                    <br><small class="text-muted">Member: {{ insurance.member_id }}</small>
                                    {% endif %}
                                </td>
                                <td>
                                    <span class="badge bg-{% if insurance.insurance_type == 'PRIMARY' %}primary{% elif insurance.insurance_type == 'SECONDARY' %}info{% else %}secondary{% endif %}">
                                        {{ insurance.get_insurance_type_display }}
                                    </span>
                                </td>
                                <td>
                                    <span class="badge bg-{% if insurance.status == 'ACTIVE' %}success{% elif insurance.status == 'EXPIRED' %}danger{% elif insurance.status == 'PENDING' %}warning{% else %}secondary{% endif %}">
                                        {{ insurance.get_status_display }}
                                    </span>
                                    {% if insurance.status == 'ACTIVE' and insurance.is_expiring_soon %}
                                    <br><small class="text-warning">
                                        <i class="fa fa-exclamation-triangle"></i> Expiring Soon
                                    </small>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if insurance.effective_date %}
                                    {{ insurance.effective_date|date:"M d, Y" }}
                                    {% else %}
                                    <span class="text-muted">Not set</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if insurance.expiration_date %}
                                    {{ insurance.expiration_date|date:"M d, Y" }}
                                    {% if insurance.is_expired %}
                                    <br><small class="text-danger">
                                        <i class="fa fa-exclamation-circle"></i> Expired
                                    </small>
                                    {% elif insurance.is_expiring_soon %}
                                    <br><small class="text-warning">
                                        <i class="fa fa-clock"></i> {{ insurance.days_until_expiration }} days
                                    </small>
                                    {% endif %}
                                    {% else %}
                                    <span class="text-muted">No expiration</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if insurance.coverage_details %}
                                    <button type="button" class="btn btn-xs btn-outline-info" onclick="showCoverage('{{ insurance.pk }}')">
                                        <i class="fa fa-info-circle"></i> Details
                                    </button>
                                    {% else %}
                                    <span class="text-muted">No details</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <div class="btn-group" role="group">
                                        <a href="{% url 'patients:insurance_detail' insurance.pk %}" class="btn btn-xs btn-outline-primary" title="View">
                                            <i class="fa fa-eye"></i>
                                        </a>
                                        <a href="{% url 'patients:insurance_update' insurance.pk %}" class="btn btn-xs btn-outline-warning" title="Edit">
                                            <i class="fa fa-edit"></i>
                                        </a>
                                        <button type="button" class="btn btn-xs btn-outline-success" onclick="verifyInsurance('{{ insurance.pk }}')" title="Verify">
                                            <i class="fa fa-check-circle"></i>
                                        </button>
                                        <a href="{% url 'patients:insurance_delete' insurance.pk %}" class="btn btn-xs btn-outline-danger" title="Delete">
                                            <i class="fa fa-trash"></i>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="10" class="text-center text-muted py-4">
                                    <i class="fa fa-shield fa-3x mb-3"></i>
                                    <div>No insurance records found</div>
                                    <a href="{% url 'patients:insurance_create' %}" class="btn btn-primary mt-2">
                                        <i class="fa fa-plus me-2"></i>Add First Insurance Record
                                    </a>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                {% if is_paginated %}
                <nav aria-label="Insurance pagination">
                    <ul class="pagination justify-content-center">
                        {% if page_obj.has_previous %}
                        <li class="page-item">
                            <a class="page-link" href="?page=1">&laquo; First</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="?page={{ page_obj.previous_page_number }}">Previous</a>
                        </li>
                        {% endif %}
                        
                        {% for num in page_obj.paginator.page_range %}
                        {% if page_obj.number == num %}
                        <li class="page-item active">
                            <span class="page-link">{{ num }}</span>
                        </li>
                        {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ num }}">{{ num }}</a>
                        </li>
                        {% endif %}
                        {% endfor %}
                        
                        {% if page_obj.has_next %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ page_obj.next_page_number }}">Next</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}">Last &raquo;</a>
                        </li>
                        {% endif %}
                    </ul>
                </nav>
                {% endif %}
            </div>
        </div>
        <!-- END panel -->
    </div>
</div>
<!-- END row -->

<!-- Coverage Details Modal -->
<div class="modal fade" id="coverageModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Insurance Coverage Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="coverage-details">
                <!-- Coverage details will be loaded here -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- Verify Insurance Modal -->
<div class="modal fade" id="verifyModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Verify Insurance</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="verify-form">
                    <div class="mb-3">
                        <label class="form-label">Verification Method</label>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="verification_method" value="online" id="verify-online">
                            <label class="form-check-label" for="verify-online">
                                Online Verification
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="verification_method" value="phone" id="verify-phone">
                            <label class="form-check-label" for="verify-phone">
                                Phone Verification
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="verification_method" value="manual" id="verify-manual">
                            <label class="form-check-label" for="verify-manual">
                                Manual Verification
                            </label>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Verification Notes</label>
                        <textarea class="form-control" name="verification_notes" rows="3" placeholder="Enter verification details..."></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-success" onclick="saveVerification()">
                    <i class="fa fa-check-circle me-2"></i>Mark as Verified
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
<script src="{% static 'assets/plugins/datatables.net/js/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'assets/plugins/datatables.net-bs5/js/dataTables.bootstrap5.min.js' %}"></script>
<script src="{% static 'assets/plugins/datatables.net-responsive/js/dataTables.responsive.min.js' %}"></script>
<script src="{% static 'assets/plugins/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js' %}"></script>

<script>
var table;
var selectedInsuranceId;

$(document).ready(function() {
    // Initialize DataTable
    table = $('#insurance-table').DataTable({
        responsive: true,
        pageLength: 25,
        order: [[1, 'asc']],
        columnDefs: [
            { orderable: false, targets: [0, 9] }
        ]
    });
    
    // Filter handlers
    $('#filter-status, #filter-type, #filter-provider').on('change', function() {
        filterTable();
    });
    
    $('#search-input').on('keyup', function() {
        table.search(this.value).draw();
    });
    
    // Select all checkbox
    $('#select-all-checkbox').on('change', function() {
        $('.row-checkbox').prop('checked', this.checked);
        updateBulkButtons();
    });
    
    // Row checkboxes
    $(document).on('change', '.row-checkbox', function() {
        updateBulkButtons();
        
        // Update select all checkbox
        var totalCheckboxes = $('.row-checkbox').length;
        var checkedCheckboxes = $('.row-checkbox:checked').length;
        $('#select-all-checkbox').prop('indeterminate', checkedCheckboxes > 0 && checkedCheckboxes < totalCheckboxes);
        $('#select-all-checkbox').prop('checked', checkedCheckboxes === totalCheckboxes);
    });
    
    // Auto-refresh every 5 minutes
    setInterval(refreshData, 300000);
});

function filterTable() {
    var status = $('#filter-status').val();
    var type = $('#filter-type').val();
    var provider = $('#filter-provider').val();
    
    // Apply filters
    table.columns(5).search(status);
    table.columns(4).search(type);
    table.columns(2).search(provider);
    table.draw();
}

function updateBulkButtons() {
    var checkedCount = $('.row-checkbox:checked').length;
    $('#verify-btn, #renew-btn, #export-btn').prop('disabled', checkedCount === 0);
}

function selectAll() {
    $('.row-checkbox').prop('checked', true);
    $('#select-all-checkbox').prop('checked', true);
    updateBulkButtons();
}

function selectNone() {
    $('.row-checkbox').prop('checked', false);
    $('#select-all-checkbox').prop('checked', false);
    updateBulkButtons();
}

function showCoverage(insuranceId) {
    $.ajax({
        url: '{% url "patients:insurance_coverage" 0 %}'.replace('0', insuranceId),
        method: 'GET',
        success: function(response) {
            $('#coverage-details').html(response.html);
            $('#coverageModal').modal('show');
        },
        error: function() {
            toastr.error('Failed to load coverage details');
        }
    });
}

function verifyInsurance(insuranceId) {
    selectedInsuranceId = insuranceId;
    $('#verifyModal').modal('show');
}

function saveVerification() {
    var method = $('input[name="verification_method"]:checked').val();
    var notes = $('textarea[name="verification_notes"]').val();
    
    if (!method) {
        toastr.error('Please select a verification method');
        return;
    }
    
    $.ajax({
        url: '{% url "patients:verify_insurance" 0 %}'.replace('0', selectedInsuranceId),
        method: 'POST',
        data: {
            'csrfmiddlewaretoken': '{{ csrf_token }}',
            'verification_method': method,
            'verification_notes': notes
        },
        success: function(response) {
            toastr.success('Insurance verification saved');
            $('#verifyModal').modal('hide');
            refreshData();
        },
        error: function() {
            toastr.error('Failed to save verification');
        }
    });
}

function verifySelected() {
    var selectedIds = $('.row-checkbox:checked').map(function() {
        return this.value;
    }).get();
    
    if (selectedIds.length === 0) {
        toastr.warning('Please select insurance records to verify');
        return;
    }
    
    if (confirm('Verify ' + selectedIds.length + ' selected insurance records?')) {
        $.ajax({
            url: '{% url "patients:bulk_verify_insurance" %}',
            method: 'POST',
            data: {
                'csrfmiddlewaretoken': '{{ csrf_token }}',
                'insurance_ids': selectedIds
            },
            success: function(response) {
                toastr.success(response.message);
                refreshData();
            },
            error: function() {
                toastr.error('Failed to verify selected insurance records');
            }
        });
    }
}

function renewSelected() {
    var selectedIds = $('.row-checkbox:checked').map(function() {
        return this.value;
    }).get();
    
    if (selectedIds.length === 0) {
        toastr.warning('Please select insurance records to renew');
        return;
    }
    
    if (confirm('Mark ' + selectedIds.length + ' selected insurance records for renewal?')) {
        $.ajax({
            url: '{% url "patients:bulk_renew_insurance" %}',
            method: 'POST',
            data: {
                'csrfmiddlewaretoken': '{{ csrf_token }}',
                'insurance_ids': selectedIds
            },
            success: function(response) {
                toastr.success(response.message);
                refreshData();
            },
            error: function() {
                toastr.error('Failed to process renewal for selected insurance records');
            }
        });
    }
}

function exportSelected() {
    var selectedIds = $('.row-checkbox:checked').map(function() {
        return this.value;
    }).get();
    
    if (selectedIds.length === 0) {
        toastr.warning('Please select insurance records to export');
        return;
    }
    
    // Create form and submit for download
    var form = $('<form>', {
        method: 'POST',
        action: '{% url "patients:export_insurance" %}'
    });
    
    form.append($('<input>', {
        type: 'hidden',
        name: 'csrfmiddlewaretoken',
        value: '{{ csrf_token }}'
    }));
    
    selectedIds.forEach(function(id) {
        form.append($('<input>', {
            type: 'hidden',
            name: 'insurance_ids',
            value: id
        }));
    });
    
    $('body').append(form);
    form.submit();
    form.remove();
    
    toastr.info('Exporting ' + selectedIds.length + ' insurance records...');
}

function refreshData() {
    location.reload();
}
</script>
{% endblock %}