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

{% block title %}Delete Equipment - {{ object.name }}{% endblock %}

{% block content %}
<div class="d-flex align-items-center mb-3">
    <div>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'radiology:dashboard' %}">Radiology</a></li>
            <li class="breadcrumb-item"><a href="{% url 'radiology:equipment_list' %}">Equipment</a></li>
            <li class="breadcrumb-item"><a href="{% url 'radiology:equipment_detail' object.pk %}">{{ object.name }}</a></li>
            <li class="breadcrumb-item active">Delete</li>
        </ol>
        <h1 class="page-header mb-0">Delete Equipment</h1>
    </div>
</div>

<div class="row">
    <div class="col-xl-8">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">
                    <i class="fas fa-exclamation-triangle text-danger me-2"></i>
                    Confirm Equipment Deletion
                </h4>
            </div>
            <div class="card-body">
                <div class="alert alert-danger">
                    <h5><i class="fas fa-exclamation-triangle me-2"></i>Warning</h5>
                    <p class="mb-0">You are about to permanently delete this equipment record. This action cannot be undone and will affect scheduling and historical data.</p>
                </div>

                <!-- Equipment Information -->
                <div class="row mb-4">
                    <div class="col-md-6">
                        <h6 class="text-muted mb-2">Equipment Information</h6>
                        <table class="table table-sm">
                            <tr>
                                <td class="fw-bold">Name:</td>
                                <td>{{ object.name }}</td>
                            </tr>
                            <tr>
                                <td class="fw-bold">Modality:</td>
                                <td>{{ object.get_modality_display }}</td>
                            </tr>
                            <tr>
                                <td class="fw-bold">Location:</td>
                                <td>{{ object.location }}</td>
                            </tr>
                            <tr>
                                <td class="fw-bold">Manufacturer:</td>
                                <td>{{ object.manufacturer|default:"Not specified" }}</td>
                            </tr>
                            <tr>
                                <td class="fw-bold">Model:</td>
                                <td>{{ object.model|default:"Not specified" }}</td>
                            </tr>
                            <tr>
                                <td class="fw-bold">Serial Number:</td>
                                <td>{{ object.serial_number|default:"Not specified" }}</td>
                            </tr>
                            <tr>
                                <td class="fw-bold">Status:</td>
                                <td>
                                    <span class="badge bg-{% if object.status == 'operational' %}success{% elif object.status == 'maintenance' %}warning{% elif object.status == 'offline' %}danger{% else %}secondary{% endif %}">
                                        {{ object.get_status_display }}
                                    </span>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="col-md-6">
                        <h6 class="text-muted mb-2">Usage Statistics</h6>
                        <table class="table table-sm">
                            <tr>
                                <td class="fw-bold">Total Studies:</td>
                                <td>{{ object.total_studies|default:0 }}</td>
                            </tr>
                            <tr>
                                <td class="fw-bold">Studies This Month:</td>
                                <td>{{ object.studies_this_month|default:0 }}</td>
                            </tr>
                            <tr>
                                <td class="fw-bold">Last Used:</td>
                                <td>{{ object.last_used|date:"M d, Y"|default:"Never" }}</td>
                            </tr>
                            <tr>
                                <td class="fw-bold">Installation Date:</td>
                                <td>{{ object.installation_date|date:"M d, Y"|default:"Unknown" }}</td>
                            </tr>
                            <tr>
                                <td class="fw-bold">Purchase Cost:</td>
                                <td>{{ object.purchase_cost|default:"Not specified" }}</td>
                            </tr>
                            <tr>
                                <td class="fw-bold">Utilization Rate:</td>
                                <td>{{ object.utilization_rate|default:0 }}%</td>
                            </tr>
                        </table>
                    </div>
                </div>

                <!-- Active Studies Warning -->
                {% if object.active_studies_count > 0 %}
                <div class="alert alert-danger">
                    <h6><i class="fas fa-calendar-times me-2"></i>Active Studies Warning</h6>
                    <p class="mb-0">This equipment has {{ object.active_studies_count }} active or scheduled studies. Deleting this equipment will affect these studies.</p>
                </div>
                {% endif %}

                <!-- High Usage Warning -->
                {% if object.total_studies > 100 %}
                <div class="alert alert-warning">
                    <h6><i class="fas fa-chart-line me-2"></i>High Usage Equipment</h6>
                    <p class="mb-0">This equipment has been used for {{ object.total_studies }} studies. Deleting it will remove significant historical data.</p>
                </div>
                {% endif %}

                <!-- Operational Equipment Warning -->
                {% if object.status == 'operational' %}
                <div class="alert alert-warning">
                    <h6><i class="fas fa-power-off me-2"></i>Operational Equipment</h6>
                    <p class="mb-0">This equipment is currently operational and available for scheduling. Consider taking it offline first.</p>
                </div>
                {% endif %}

                <!-- Service Contract Warning -->
                {% if object.service_contract_active %}
                <div class="alert alert-info">
                    <h6><i class="fas fa-file-contract me-2"></i>Active Service Contract</h6>
                    <p class="mb-0">This equipment has an active service contract. Ensure the contract is properly terminated before deletion.</p>
                </div>
                {% endif %}

                <!-- Impact Assessment -->
                <div class="alert alert-info">
                    <h6><i class="fas fa-info-circle me-2"></i>Deletion Impact</h6>
                    <ul class="mb-0">
                        <li><strong>Scheduling:</strong> Equipment will no longer be available for new studies</li>
                        <li><strong>Historical Data:</strong> All study records will lose equipment reference</li>
                        <li><strong>Reports:</strong> Equipment-specific reports will be affected</li>
                        <li><strong>Maintenance:</strong> Service history will be preserved but orphaned</li>
                        <li><strong>Asset Tracking:</strong> Equipment will be removed from asset inventory</li>
                        <li><strong>QR Codes:</strong> Any printed QR codes will become invalid</li>
                    </ul>
                </div>

                <!-- Related Data -->
                <div class="row">
                    <div class="col-md-6">
                        <div class="card bg-light">
                            <div class="card-header">
                                <h6 class="card-title mb-0">Related Data</h6>
                            </div>
                            <div class="card-body">
                                <ul class="list-unstyled mb-0">
                                    <li><i class="fas fa-calendar me-2"></i>{{ object.scheduled_studies_count|default:0 }} Scheduled Studies</li>
                                    <li><i class="fas fa-wrench me-2"></i>{{ object.maintenance_records_count|default:0 }} Maintenance Records</li>
                                    <li><i class="fas fa-chart-bar me-2"></i>{{ object.usage_reports_count|default:0 }} Usage Reports</li>
                                    <li><i class="fas fa-file-alt me-2"></i>{{ object.documents_count|default:0 }} Documents</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card bg-light">
                            <div class="card-header">
                                <h6 class="card-title mb-0">Financial Impact</h6>
                            </div>
                            <div class="card-body">
                                <ul class="list-unstyled mb-0">
                                    <li><i class="fas fa-dollar-sign me-2"></i>Asset Value: {{ object.current_value|default:"Unknown" }}</li>
                                    <li><i class="fas fa-tools me-2"></i>Service Costs: {{ object.total_service_cost|default:"Unknown" }}</li>
                                    <li><i class="fas fa-chart-line me-2"></i>Revenue Generated: {{ object.revenue_generated|default:"Unknown" }}</li>
                                    <li><i class="fas fa-calendar-dollar me-2"></i>Monthly Revenue: {{ object.monthly_revenue|default:"Unknown" }}</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Alternative Actions -->
                <div class="card bg-light mt-3">
                    <div class="card-body">
                        <h6 class="card-title">Alternative Actions</h6>
                        <p class="card-text">Consider these alternatives to deletion:</p>
                        <div class="btn-group-vertical w-100" role="group">
                            <a href="{% url 'radiology:equipment_update' object.pk %}" class="btn btn-outline-primary btn-sm">
                                <i class="fas fa-edit me-2"></i>Edit Equipment Information
                            </a>
                            <button type="button" class="btn btn-outline-warning btn-sm" onclick="takeOffline()">
                                <i class="fas fa-pause me-2"></i>Take Offline (Recommended)
                            </button>
                            <button type="button" class="btn btn-outline-info btn-sm" onclick="archiveEquipment()">
                                <i class="fas fa-archive me-2"></i>Archive Equipment
                            </button>
                            <button type="button" class="btn btn-outline-secondary btn-sm" onclick="transferEquipment()">
                                <i class="fas fa-exchange-alt me-2"></i>Transfer to Another Department
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-4">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">Deletion Confirmation</h4>
            </div>
            <div class="card-body">
                <form method="post">
                    {% csrf_token %}
                    
                    <div class="mb-3">
                        <label class="form-label">Reason for Deletion <span class="text-danger">*</span></label>
                        <select class="form-select" name="deletion_reason" required>
                            <option value="">Select reason...</option>
                            <option value="decommissioned">Equipment Decommissioned</option>
                            <option value="sold">Equipment Sold</option>
                            <option value="transferred">Transferred to Another Facility</option>
                            <option value="broken">Permanently Broken</option>
                            <option value="obsolete">Technology Obsolete</option>
                            <option value="duplicate">Duplicate Entry</option>
                            <option value="error">Data Entry Error</option>
                            <option value="other">Other</option>
                        </select>
                    </div>

                    <div class="mb-3" id="replacementEquipment" style="display: none;">
                        <label class="form-label">Replacement Equipment</label>
                        <select class="form-select" name="replacement_equipment">
                            <option value="">Select replacement...</option>
                            {% for equipment in replacement_options %}
                            <option value="{{ equipment.pk }}">{{ equipment.name }}</option>
                            {% endfor %}
                        </select>
                        <div class="form-text">Equipment to handle future studies</div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Asset Disposition</label>
                        <select class="form-select" name="asset_disposition">
                            <option value="">Select disposition...</option>
                            <option value="sold">Sold</option>
                            <option value="donated">Donated</option>
                            <option value="recycled">Recycled</option>
                            <option value="disposed">Disposed</option>
                            <option value="transferred">Transferred</option>
                            <option value="unknown">Unknown</option>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Final Asset Value</label>
                        <input type="number" class="form-control" name="final_value" step="0.01" placeholder="0.00">
                        <div class="form-text">Final disposal or sale value</div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Additional Notes</label>
                        <textarea class="form-control" name="deletion_notes" rows="3" placeholder="Provide additional context for this deletion..."></textarea>
                    </div>

                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="confirmBackup" required>
                            <label class="form-check-label" for="confirmBackup">
                                I confirm that all important data has been backed up
                            </label>
                        </div>
                    </div>

                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="confirmStudies" required>
                            <label class="form-check-label" for="confirmStudies">
                                I confirm that active studies have been handled
                            </label>
                        </div>
                    </div>

                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="confirmAsset" required>
                            <label class="form-check-label" for="confirmAsset">
                                I confirm that asset management has been notified
                            </label>
                        </div>
                    </div>

                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="confirmUnderstand" required>
                            <label class="form-check-label" for="confirmUnderstand">
                                I understand this action cannot be undone
                            </label>
                        </div>
                    </div>

                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-danger" id="deleteBtn" disabled>
                            <i class="fas fa-trash me-2"></i>Delete Equipment
                        </button>
                        <a href="{% url 'radiology:equipment_detail' object.pk %}" class="btn btn-secondary">
                            <i class="fas fa-times me-2"></i>Cancel
                        </a>
                    </div>
                </form>
            </div>
        </div>

        <!-- Contact Information -->
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">Need Help?</h4>
            </div>
            <div class="card-body">
                <p class="card-text">If you're unsure about deleting this equipment, contact:</p>
                <ul class="list-unstyled">
                    <li><i class="fas fa-user-md me-2"></i><strong>Chief Radiologist:</strong> ext. 2100</li>
                    <li><i class="fas fa-cog me-2"></i><strong>Biomedical Engineering:</strong> ext. 3100</li>
                    <li><i class="fas fa-dollar-sign me-2"></i><strong>Asset Management:</strong> ext. 4200</li>
                    <li><i class="fas fa-users me-2"></i><strong>IT Support:</strong> ext. 3000</li>
                </ul>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const reasonSelect = document.querySelector('select[name="deletion_reason"]');
    const replacementDiv = document.getElementById('replacementEquipment');
    const confirmBackup = document.getElementById('confirmBackup');
    const confirmStudies = document.getElementById('confirmStudies');
    const confirmAsset = document.getElementById('confirmAsset');
    const confirmUnderstand = document.getElementById('confirmUnderstand');
    const deleteBtn = document.getElementById('deleteBtn');

    // Show replacement equipment field when relevant
    reasonSelect.addEventListener('change', function() {
        if (this.value === 'decommissioned' || this.value === 'broken' || this.value === 'obsolete') {
            replacementDiv.style.display = 'block';
        } else {
            replacementDiv.style.display = 'none';
        }
        updateDeleteButton();
    });

    function updateDeleteButton() {
        const allChecked = confirmBackup.checked && confirmStudies.checked && 
                          confirmAsset.checked && confirmUnderstand.checked;
        const reasonSelected = reasonSelect.value !== '';
        deleteBtn.disabled = !(allChecked && reasonSelected);
    }

    confirmBackup.addEventListener('change', updateDeleteButton);
    confirmStudies.addEventListener('change', updateDeleteButton);
    confirmAsset.addEventListener('change', updateDeleteButton);
    confirmUnderstand.addEventListener('change', updateDeleteButton);
    reasonSelect.addEventListener('change', updateDeleteButton);
});

function takeOffline() {
    if (confirm('Take this equipment offline instead of deleting it?')) {
        fetch('{% url "radiology:equipment_detail" object.pk %}', {
            method: 'PATCH',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
            },
            body: JSON.stringify({status: 'offline'})
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                window.location.href = '{% url "radiology:equipment_detail" object.pk %}';
            }
        });
    }
}

function archiveEquipment() {
    if (confirm('Archive this equipment instead of deleting it?')) {
        window.location.href = '{% url "radiology:equipment_detail" object.pk %}?action=archive';
    }
}

function transferEquipment() {
    if (confirm('Transfer this equipment to another department?')) {
        window.location.href = '{% url "radiology:equipment_detail" object.pk %}?action=transfer';
    }
}
</script>
{% endblock %}