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

{% block title %}Delete OR Block - {{ block.operating_room.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;
}

.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;
}

.block-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;
}

.affected-cases {
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    max-height: 300px;
    overflow-y: auto;
}

.case-item {
    padding: 1rem;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    justify-content-between;
    align-items: center;
}

.case-item:last-child {
    border-bottom: none;
}

.case-info {
    flex-grow: 1;
}

.case-title {
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.25rem;
}

.case-details {
    font-size: 0.875rem;
    color: #6c757d;
}

.case-status {
    margin-left: 1rem;
}

.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;
}

@media (max-width: 768px) {
    .delete-header {
        padding: 1.5rem;
    }
    
    .info-grid {
        grid-template-columns: 1fr;
    }
    
    .case-item {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .case-status {
        margin-left: 0;
        margin-top: 0.5rem;
    }
}
</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:block_schedule_list' %}">Block Schedule</a></li>
                <li class="breadcrumb-item"><a href="{% url 'operating_theatre:block_detail' block.pk %}">{{ block.operating_room.name }}</a></li>
                <li class="breadcrumb-item active">Delete Block</li>
            </ol>
            <h1 class="page-header mb-0">
                <i class="fas fa-trash-alt me-2"></i>Delete OR Block
            </h1>
        </div>
        <div class="ms-auto">
            <a href="{% url 'operating_theatre:block_detail' block.pk %}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-1"></i>Back to Block
            </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 Operating Room Block
                </h2>
                <p class="mb-0">
                    You are about to permanently delete this OR block. This action cannot be undone and will affect all scheduled cases within this block.
                </p>
            </div>
            <div class="col-md-4 text-end">
                <div class="mb-2">
                    <i class="fas fa-calendar-times 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 OR block will be permanently deleted</li>
            <li>All scheduled cases within this block will be affected</li>
            <li>Team assignments and resource allocations will be removed</li>
            <li>Historical data and logs will be preserved for audit purposes</li>
            <li>Patients and staff will need to be notified of schedule changes</li>
        </ul>
    </div>

    <!-- Block Information -->
    <div class="block-info">
        <h5 class="mb-3">Block Information</h5>
        <div class="info-grid">
            <div class="info-item">
                <div class="info-label">Operating Room</div>
                <div class="info-value">{{ block.operating_room.name }}</div>
            </div>
            <div class="info-item">
                <div class="info-label">Date & Time</div>
                <div class="info-value">
                    {{ block.date|date:"l, M d, Y" }}<br>
                    {{ block.start_time|time:"g:i A" }} - {{ block.end_time|time:"g:i A" }}
                </div>
            </div>
            <div class="info-item">
                <div class="info-label">Block Type</div>
                <div class="info-value">{{ block.get_block_type_display }}</div>
            </div>
            <div class="info-item">
                <div class="info-label">Primary Surgeon</div>
                <div class="info-value">
                    {% if block.assigned_surgeon %}
                        {{ block.assigned_surgeon.get_full_name }}
                    {% else %}
                        <span class="text-muted">Not assigned</span>
                    {% endif %}
                </div>
            </div>
            <div class="info-item">
                <div class="info-label">Anesthesiologist</div>
                <div class="info-value">
                    {% if block.assigned_anesthesiologist %}
                        {{ block.assigned_anesthesiologist.get_full_name }}
                    {% else %}
                        <span class="text-muted">Not assigned</span>
                    {% endif %}
                </div>
            </div>
            <div class="info-item">
                <div class="info-label">Status</div>
                <div class="info-value">
                    {% if block.status == 'scheduled' %}
                        <span class="badge bg-primary">Scheduled</span>
                    {% elif block.status == 'in_progress' %}
                        <span class="badge bg-success">In Progress</span>
                    {% elif block.status == 'completed' %}
                        <span class="badge bg-secondary">Completed</span>
                    {% elif block.status == 'cancelled' %}
                        <span class="badge bg-danger">Cancelled</span>
                    {% endif %}
                </div>
            </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-4">
                    <div class="text-center mb-3">
                        <div class="h3 text-danger">{{ affected_cases.count }}</div>
                        <div class="text-muted">Scheduled Cases</div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="text-center mb-3">
                        <div class="h3 text-warning">{{ affected_staff.count }}</div>
                        <div class="text-muted">Affected Staff</div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="text-center mb-3">
                        <div class="h3 text-info">{{ affected_patients.count }}</div>
                        <div class="text-muted">Affected Patients</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Affected Cases -->
    {% if affected_cases %}
    <div class="impact-section">
        <div class="section-header">
            <i class="fas fa-procedures me-2"></i>Affected Surgical Cases
        </div>
        <div class="section-content">
            <div class="affected-cases">
                {% for case in affected_cases %}
                <div class="case-item">
                    <div class="case-info">
                        <div class="case-title">{{ case.procedure_name }}</div>
                        <div class="case-details">
                            Patient: {{ case.patient.get_full_name }} | 
                            Surgeon: {{ case.surgeon.get_full_name }} | 
                            Time: {{ case.scheduled_start_time|time:"g:i A" }}
                        </div>
                    </div>
                    <div class="case-status">
                        {% if case.status == 'scheduled' %}
                            <span class="badge bg-primary">Scheduled</span>
                        {% elif case.status == 'confirmed' %}
                            <span class="badge bg-success">Confirmed</span>
                        {% elif case.status == 'in_progress' %}
                            <span class="badge bg-info">In Progress</span>
                        {% endif %}
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
    {% endif %}

    <!-- 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 block, consider these alternative actions:</p>
        
        <button class="btn btn-outline-primary action-button" onclick="rescheduleBlock()">
            <i class="fas fa-calendar-alt me-1"></i>Reschedule Block
        </button>
        
        <button class="btn btn-outline-warning action-button" onclick="postponeBlock()">
            <i class="fas fa-pause me-1"></i>Postpone Block
        </button>
        
        <button class="btn btn-outline-info action-button" onclick="transferCases()">
            <i class="fas fa-exchange-alt me-1"></i>Transfer Cases
        </button>
        
        <button class="btn btn-outline-secondary action-button" onclick="notifyStaff()">
            <i class="fas fa-bell me-1"></i>Notify Staff First
        </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 {{ block.operating_room.name }} {{ block.date|date:"Y-m-d" }}
                </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="schedule_conflict">Schedule Conflict</option>
                    <option value="surgeon_unavailable">Surgeon Unavailable</option>
                    <option value="equipment_failure">Equipment Failure</option>
                    <option value="emergency_case">Emergency Case Priority</option>
                    <option value="patient_cancellation">Patient Cancellation</option>
                    <option value="administrative">Administrative Decision</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="notifyStaffCheck" name="notify_staff" checked>
                    <label class="form-check-label" for="notifyStaffCheck">
                        Automatically notify affected staff members
                    </label>
                </div>
            </div>
            
            <div class="mb-3">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="notifyPatientsCheck" name="notify_patients" checked>
                    <label class="form-check-label" for="notifyPatientsCheck">
                        Automatically notify affected patients
                    </label>
                </div>
            </div>
            
            <div class="d-flex justify-content-between">
                <div>
                    <a href="{% url 'operating_theatre:block_detail' block.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 Block
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block js %}
<script>
$(document).ready(function() {
    const expectedText = 'DELETE {{ block.operating_room.name }} {{ block.date|date:"Y-m-d" }}';
    
    $('#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 rescheduleBlock() {
    window.location.href = '{% url "operating_theatre:block_reschedule" block.pk %}';
}

function postponeBlock() {
    if (confirm('Postpone this block to a later date?')) {
        $.ajax({
            url: '{% url "operating_theatre:block_postpone" block.pk %}',
            method: 'POST',
            data: {
                'csrfmiddlewaretoken': '{{ csrf_token }}'
            },
            success: function(response) {
                if (response.success) {
                    alert('Block has been postponed successfully.');
                    window.location.href = '{% url "operating_theatre:block_schedule_list" %}';
                } else {
                    alert('Error postponing block: ' + response.error);
                }
            },
            error: function() {
                alert('Error postponing block');
            }
        });
    }
}

function transferCases() {
    window.location.href = '{% url "operating_theatre:block_transfer_cases" block.pk %}';
}

function notifyStaff() {
    window.location.href = '{% url "operating_theatre:block_notify_staff" block.pk %}';
}

// Form submission with additional confirmation
$('#deleteForm').on('submit', function(e) {
    e.preventDefault();
    
    const affectedCases = {{ affected_cases.count }};
    const affectedStaff = {{ affected_staff.count }};
    
    let confirmMessage = 'Are you absolutely sure you want to delete this OR block?\n\n';
    confirmMessage += `This will affect ${affectedCases} scheduled case(s) and ${affectedStaff} staff member(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 %}