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

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

{% block css %}
<style>
.delete-header {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
    border-radius: 0.5rem;
    padding: 2rem;
    margin-bottom: 2rem;
}

.warning-section {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 0.375rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.equipment-info {
    background: #f8f9fa;
    border-radius: 0.375rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.info-item {
    display: flex;
    flex-direction: column;
}

.info-label {
    font-size: 0.875rem;
    color: #6c757d;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.info-value {
    color: #495057;
    font-weight: 500;
}

.impact-section {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    margin-bottom: 1.5rem;
}

.section-header {
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    padding: 1rem 1.5rem;
    font-weight: 600;
    color: #495057;
}

.section-content {
    padding: 1.5rem;
}

.alternative-actions {
    background: #e7f3ff;
    border: 1px solid #b3d9ff;
    border-radius: 0.375rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.action-button {
    margin-bottom: 0.5rem;
    margin-right: 0.5rem;
}

.confirmation-section {
    background: #fff5f5;
    border: 2px solid #fed7d7;
    border-radius: 0.375rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.type-to-confirm {
    background: #f7fafc;
    border: 2px solid #e2e8f0;
    border-radius: 0.25rem;
    padding: 0.75rem;
    font-family: monospace;
    font-weight: bold;
    text-align: center;
    margin-bottom: 1rem;
}

.equipment-image {
    max-width: 150px;
    max-height: 150px;
    border-radius: 0.375rem;
    border: 2px solid #dee2e6;
}

@media (max-width: 768px) {
    .delete-header {
        padding: 1.5rem;
    }
    
    .info-grid {
        grid-template-columns: 1fr;
    }
}
</style>
{% endblock %}

{% block content %}
<div id="content" class="app-content">
    <!-- Page Header -->
    <div class="d-flex align-items-center mb-3">
        <div>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{% url 'operating_theatre:dashboard' %}">Operating Theatre</a></li>
                <li class="breadcrumb-item"><a href="{% url 'operating_theatre:equipment_list' %}">Equipment</a></li>
                <li class="breadcrumb-item"><a href="{% url 'operating_theatre:equipment_detail' equipment.pk %}">{{ equipment.name }}</a></li>
                <li class="breadcrumb-item active">Delete Equipment</li>
            </ol>
            <h1 class="page-header mb-0">
                <i class="fas fa-trash-alt me-2"></i>Delete Equipment
            </h1>
        </div>
        <div class="ms-auto">
            <a href="{% url 'operating_theatre:equipment_detail' equipment.pk %}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-1"></i>Back to Equipment
            </a>
        </div>
    </div>

    <!-- Delete Header -->
    <div class="delete-header">
        <div class="row">
            <div class="col-md-8">
                <h2 class="mb-3">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    Delete Equipment
                </h2>
                <p class="mb-0">
                    You are about to permanently delete this equipment from the system. This action cannot be undone and will affect all related records and maintenance history.
                </p>
            </div>
            <div class="col-md-4 text-end">
                <div class="mb-2">
                    <i class="fas fa-tools fa-3x"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Warning Section -->
    <div class="warning-section">
        <h5 class="mb-3">
            <i class="fas fa-exclamation-triangle me-2"></i>
            Critical Warning
        </h5>
        <ul class="mb-0">
            <li>This equipment record will be permanently deleted</li>
            <li>All maintenance history and logs will be removed</li>
            <li>Any active reservations will be cancelled</li>
            <li>Financial records and depreciation data will be lost</li>
            <li>QR codes and asset tags will become invalid</li>
            <li>Related documents and images will be deleted</li>
        </ul>
    </div>

    <!-- Equipment Information -->
    <div class="equipment-info">
        <h5 class="mb-3">Equipment Information</h5>
        <div class="row">
            <div class="col-md-9">
                <div class="info-grid">
                    <div class="info-item">
                        <div class="info-label">Equipment Name</div>
                        <div class="info-value">{{ equipment.name }}</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">Equipment ID</div>
                        <div class="info-value">{{ equipment.equipment_id|default:"Not assigned" }}</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">Serial Number</div>
                        <div class="info-value">{{ equipment.serial_number }}</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">Manufacturer</div>
                        <div class="info-value">{{ equipment.manufacturer }} {{ equipment.model }}</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">Category</div>
                        <div class="info-value">{{ equipment.get_category_display }}</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">Current Location</div>
                        <div class="info-value">{{ equipment.current_location|default:"Not specified" }}</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">Status</div>
                        <div class="info-value">
                            {% if equipment.status == 'available' %}
                                <span class="badge bg-success">Available</span>
                            {% elif equipment.status == 'in_use' %}
                                <span class="badge bg-primary">In Use</span>
                            {% elif equipment.status == 'maintenance' %}
                                <span class="badge bg-warning">Maintenance</span>
                            {% elif equipment.status == 'out_of_order' %}
                                <span class="badge bg-danger">Out of Order</span>
                            {% endif %}
                        </div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">Purchase Cost</div>
                        <div class="info-value">
                            {% if equipment.purchase_cost %}
                                ${{ equipment.purchase_cost|floatformat:2 }}
                            {% else %}
                                Not specified
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3 text-center">
                {% if equipment.image %}
                    <img src="{{ equipment.image.url }}" alt="{{ equipment.name }}" class="equipment-image">
                {% else %}
                    <div class="equipment-image d-flex align-items-center justify-content-center bg-light">
                        <i class="fas fa-tools fa-3x text-muted"></i>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Impact Analysis -->
    <div class="impact-section">
        <div class="section-header">
            <i class="fas fa-exclamation-circle me-2"></i>Impact Analysis
        </div>
        <div class="section-content">
            <div class="row">
                <div class="col-md-3">
                    <div class="text-center mb-3">
                        <div class="h3 text-danger">{{ maintenance_records_count }}</div>
                        <div class="text-muted">Maintenance Records</div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="text-center mb-3">
                        <div class="h3 text-warning">{{ active_reservations_count }}</div>
                        <div class="text-muted">Active Reservations</div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="text-center mb-3">
                        <div class="h3 text-info">{{ usage_logs_count }}</div>
                        <div class="text-muted">Usage Logs</div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="text-center mb-3">
                        <div class="h3 text-secondary">{{ documents_count }}</div>
                        <div class="text-muted">Related Documents</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Blocking Conditions -->
    {% if blocking_conditions %}
    <div class="impact-section">
        <div class="section-header">
            <i class="fas fa-ban me-2"></i>Deletion Blocked
        </div>
        <div class="section-content">
            <div class="alert alert-danger">
                <h6 class="alert-heading">Cannot Delete Equipment</h6>
                <p class="mb-0">This equipment cannot be deleted due to the following conditions:</p>
                <ul class="mt-2 mb-0">
                    {% for condition in blocking_conditions %}
                    <li>{{ condition }}</li>
                    {% endfor %}
                </ul>
            </div>
            <p class="mb-0">Please resolve these issues before attempting to delete this equipment.</p>
        </div>
    </div>
    {% else %}

    <!-- Alternative Actions -->
    <div class="alternative-actions">
        <h5 class="mb-3">
            <i class="fas fa-lightbulb me-2"></i>
            Consider These Alternatives
        </h5>
        <p class="mb-3">Before deleting this equipment, consider these alternative actions:</p>
        
        <button class="btn btn-outline-primary action-button" onclick="deactivateEquipment()">
            <i class="fas fa-power-off me-1"></i>Deactivate Equipment
        </button>
        
        <button class="btn btn-outline-warning action-button" onclick="markOutOfOrder()">
            <i class="fas fa-exclamation-triangle me-1"></i>Mark Out of Order
        </button>
        
        <button class="btn btn-outline-info action-button" onclick="transferEquipment()">
            <i class="fas fa-exchange-alt me-1"></i>Transfer to Storage
        </button>
        
        <button class="btn btn-outline-secondary action-button" onclick="archiveEquipment()">
            <i class="fas fa-archive me-1"></i>Archive Equipment
        </button>
    </div>

    <!-- Confirmation Section -->
    <div class="confirmation-section">
        <h5 class="mb-3">
            <i class="fas fa-shield-alt me-2"></i>
            Deletion Confirmation Required
        </h5>
        
        <form method="post" id="deleteForm">
            {% csrf_token %}
            
            <div class="mb-3">
                <label class="form-label">
                    <strong>Type the following text to confirm deletion:</strong>
                </label>
                <div class="type-to-confirm">
                    DELETE {{ equipment.name }} {{ equipment.serial_number }}
                </div>
                <input type="text" class="form-control" id="confirmationText" 
                       placeholder="Type the confirmation text here..." required>
                <div class="form-text">This confirmation helps prevent accidental deletions.</div>
            </div>
            
            <div class="mb-3">
                <label class="form-label">Reason for Deletion</label>
                <select class="form-select" name="deletion_reason" required>
                    <option value="">Select a reason...</option>
                    <option value="equipment_failure">Equipment Failure</option>
                    <option value="obsolete">Equipment Obsolete</option>
                    <option value="replaced">Replaced by New Equipment</option>
                    <option value="sold">Equipment Sold</option>
                    <option value="donated">Equipment Donated</option>
                    <option value="scrapped">Equipment Scrapped</option>
                    <option value="lost_stolen">Lost or Stolen</option>
                    <option value="other">Other</option>
                </select>
            </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="cancelReservationsCheck" name="cancel_reservations" checked>
                    <label class="form-check-label" for="cancelReservationsCheck">
                        Automatically cancel all active reservations
                    </label>
                </div>
            </div>
            
            <div class="mb-3">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="notifyUsersCheck" name="notify_users" checked>
                    <label class="form-check-label" for="notifyUsersCheck">
                        Notify users with active reservations
                    </label>
                </div>
            </div>
            
            <div class="mb-3">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="archiveDataCheck" name="archive_data">
                    <label class="form-check-label" for="archiveDataCheck">
                        Archive maintenance and usage data before deletion
                    </label>
                </div>
            </div>
            
            <div class="d-flex justify-content-between">
                <div>
                    <a href="{% url 'operating_theatre:equipment_detail' equipment.pk %}" class="btn btn-outline-secondary">
                        <i class="fas fa-times me-1"></i>Cancel
                    </a>
                </div>
                <div>
                    <button type="submit" class="btn btn-danger" id="deleteButton" disabled>
                        <i class="fas fa-trash-alt me-1"></i>
                        Permanently Delete Equipment
                    </button>
                </div>
            </div>
        </form>
    </div>
    {% endif %}
</div>
{% endblock %}

{% block js %}
<script>
$(document).ready(function() {
    const expectedText = 'DELETE {{ equipment.name }} {{ equipment.serial_number }}';
    
    $('#confirmationText').on('input', function() {
        const enteredText = $(this).val().trim();
        const deleteButton = $('#deleteButton');
        
        if (enteredText === expectedText) {
            deleteButton.prop('disabled', false);
            $(this).removeClass('is-invalid').addClass('is-valid');
        } else {
            deleteButton.prop('disabled', true);
            $(this).removeClass('is-valid');
            if (enteredText.length > 0) {
                $(this).addClass('is-invalid');
            }
        }
    });
});

function deactivateEquipment() {
    if (confirm('Deactivate this equipment instead of deleting it?')) {
        $.ajax({
            url: '{% url "operating_theatre:equipment_deactivate" equipment.pk %}',
            method: 'POST',
            data: {
                'csrfmiddlewaretoken': '{{ csrf_token }}'
            },
            success: function(response) {
                if (response.success) {
                    alert('Equipment has been deactivated successfully.');
                    window.location.href = '{% url "operating_theatre:equipment_list" %}';
                } else {
                    alert('Error deactivating equipment: ' + response.error);
                }
            },
            error: function() {
                alert('Error deactivating equipment');
            }
        });
    }
}

function markOutOfOrder() {
    if (confirm('Mark this equipment as out of order?')) {
        $.ajax({
            url: '{% url "operating_theatre:equipment_out_of_order" equipment.pk %}',
            method: 'POST',
            data: {
                'csrfmiddlewaretoken': '{{ csrf_token }}'
            },
            success: function(response) {
                if (response.success) {
                    alert('Equipment has been marked as out of order.');
                    window.location.href = '{% url "operating_theatre:equipment_detail" equipment.pk %}';
                } else {
                    alert('Error updating equipment status: ' + response.error);
                }
            },
            error: function() {
                alert('Error updating equipment status');
            }
        });
    }
}

function transferEquipment() {
    window.location.href = '{% url "operating_theatre:equipment_transfer" equipment.pk %}';
}

function archiveEquipment() {
    if (confirm('Archive this equipment instead of deleting it?')) {
        $.ajax({
            url: '{% url "operating_theatre:equipment_archive" equipment.pk %}',
            method: 'POST',
            data: {
                'csrfmiddlewaretoken': '{{ csrf_token }}'
            },
            success: function(response) {
                if (response.success) {
                    alert('Equipment has been archived successfully.');
                    window.location.href = '{% url "operating_theatre:equipment_list" %}';
                } else {
                    alert('Error archiving equipment: ' + response.error);
                }
            },
            error: function() {
                alert('Error archiving equipment');
            }
        });
    }
}

// Form submission with additional confirmation
$('#deleteForm').on('submit', function(e) {
    e.preventDefault();
    
    const maintenanceRecords = {{ maintenance_records_count }};
    const activeReservations = {{ active_reservations_count }};
    
    let confirmMessage = 'Are you absolutely sure you want to delete this equipment?\n\n';
    confirmMessage += `This will remove ${maintenanceRecords} maintenance record(s) and cancel ${activeReservations} active reservation(s).\n\n`;
    confirmMessage += 'This action cannot be undone.';
    
    if (confirm(confirmMessage)) {
        // Show loading state
        $('#deleteButton').html('<i class="fas fa-spinner fa-spin me-1"></i>Deleting...').prop('disabled', true);
        
        // Submit the form
        this.submit();
    }
});
</script>
{% endblock %}