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

{% block title %}Complete Surgical Case - Operating Theatre{% endblock %}

{% block content %}
<div class="content">
    <div class="container-fluid">
        <!-- Page Header -->
        <div class="row">
            <div class="col-12">
                <div class="page-header">
                    <div class="page-title">
                        <h4>Complete Surgical Case</h4>
                        <h6>Finalize surgical case and complete documentation</h6>
                    </div>
                    <div class="page-btn">
                        <a href="{% url 'operating_theatre:surgical_case_list' %}" class="btn btn-secondary">
                            <i class="fa fa-arrow-left"></i> Back to Cases
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Case Information -->
        <div class="row">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">Case Completion Details</h5>
                    </div>
                    <div class="card-body">
                        <form method="post" id="completeCaseForm">
                            {% csrf_token %}
                            <input type="hidden" name="case_id" value="{{ surgical_case.case_id }}">
                            
                            <!-- Case Summary -->
                            <div class="row mb-4">
                                <div class="col-12">
                                    <h6 class="text-primary">Case Summary</h6>
                                    <hr>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Patient</label>
                                        <input type="text" class="form-control" value="{{ surgical_case.patient.get_full_name }}" readonly>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Procedure</label>
                                        <input type="text" class="form-control" value="{{ surgical_case.procedure_name }}" readonly>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Start Time</label>
                                        <input type="text" class="form-control" value="{{ surgical_case.actual_start_time|date:'M d, Y H:i' }}" readonly>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Duration So Far</label>
                                        <input type="text" class="form-control" value="{{ case_duration }} minutes" readonly>
                                    </div>
                                </div>
                            </div>

                            <!-- Completion Details -->
                            <div class="row mb-4">
                                <div class="col-12">
                                    <h6 class="text-primary">Completion Information</h6>
                                    <hr>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Actual End Time *</label>
                                        <input type="datetime-local" name="actual_end_time" class="form-control" required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Case Status *</label>
                                        <select name="case_status" class="form-select" required>
                                            <option value="">Select Status</option>
                                            <option value="completed">Completed Successfully</option>
                                            <option value="cancelled">Cancelled</option>
                                            <option value="aborted">Aborted</option>
                                            <option value="converted">Converted to Open</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Primary Procedure Performed</label>
                                        <input type="text" name="primary_procedure" class="form-control" value="{{ surgical_case.procedure_name }}">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Secondary Procedures</label>
                                        <input type="text" name="secondary_procedures" class="form-control" placeholder="Additional procedures performed">
                                    </div>
                                </div>
                            </div>

                            <!-- Procedure Outcomes -->
                            <div class="row mb-4">
                                <div class="col-12">
                                    <h6 class="text-primary">Procedure Outcomes</h6>
                                    <hr>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Estimated Blood Loss (mL)</label>
                                        <input type="number" name="estimated_blood_loss" class="form-control" min="0">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Fluid Balance (mL)</label>
                                        <input type="number" name="fluid_balance" class="form-control">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Complications</label>
                                        <select name="complications" class="form-select">
                                            <option value="none">None</option>
                                            <option value="minor">Minor Complications</option>
                                            <option value="major">Major Complications</option>
                                            <option value="life_threatening">Life-threatening</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Patient Condition</label>
                                        <select name="patient_condition" class="form-select" required>
                                            <option value="">Select Condition</option>
                                            <option value="stable">Stable</option>
                                            <option value="critical">Critical</option>
                                            <option value="unstable">Unstable</option>
                                            <option value="deceased">Deceased</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <!-- Specimens and Implants -->
                            <div class="row mb-4">
                                <div class="col-12">
                                    <h6 class="text-primary">Specimens and Implants</h6>
                                    <hr>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Specimens Collected</label>
                                        <textarea name="specimens_collected" class="form-control" rows="3" placeholder="List all specimens sent to pathology..."></textarea>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Implants Used</label>
                                        <textarea name="implants_used" class="form-control" rows="3" placeholder="List all implants, devices, or foreign materials..."></textarea>
                                    </div>
                                </div>
                            </div>

                            <!-- Post-operative Orders -->
                            <div class="row mb-4">
                                <div class="col-12">
                                    <h6 class="text-primary">Post-operative Orders</h6>
                                    <hr>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Recovery Location *</label>
                                        <select name="recovery_location" class="form-select" required>
                                            <option value="">Select Location</option>
                                            <option value="pacu">PACU</option>
                                            <option value="icu">ICU</option>
                                            <option value="ward">General Ward</option>
                                            <option value="discharge">Direct Discharge</option>
                                            <option value="morgue">Morgue</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Pain Management</label>
                                        <select name="pain_management" class="form-select">
                                            <option value="">Select Pain Management</option>
                                            <option value="oral">Oral Medications</option>
                                            <option value="iv">IV Medications</option>
                                            <option value="pca">PCA Pump</option>
                                            <option value="epidural">Epidural</option>
                                            <option value="nerve_block">Nerve Block</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="mb-3">
                                        <label class="form-label">Post-operative Instructions</label>
                                        <textarea name="postop_instructions" class="form-control" rows="4" placeholder="Detailed post-operative care instructions..."></textarea>
                                    </div>
                                </div>
                            </div>

                            <!-- Post-operative Checklist -->
                            <div class="row mb-4">
                                <div class="col-12">
                                    <h6 class="text-primary">Post-operative Checklist</h6>
                                    <hr>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="checkbox" name="checklist_counts_correct" id="checkCounts" required>
                                        <label class="form-check-label" for="checkCounts">
                                            Instrument and sponge counts correct
                                        </label>
                                    </div>
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="checkbox" name="checklist_specimens_labeled" id="checkSpecimens" required>
                                        <label class="form-check-label" for="checkSpecimens">
                                            Specimens properly labeled and sent
                                        </label>
                                    </div>
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="checkbox" name="checklist_equipment_removed" id="checkEquipment" required>
                                        <label class="form-check-label" for="checkEquipment">
                                            All equipment removed from patient
                                        </label>
                                    </div>
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="checkbox" name="checklist_dressing_applied" id="checkDressing" required>
                                        <label class="form-check-label" for="checkDressing">
                                            Appropriate dressing applied
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="checkbox" name="checklist_patient_stable" id="checkStable" required>
                                        <label class="form-check-label" for="checkStable">
                                            Patient hemodynamically stable
                                        </label>
                                    </div>
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="checkbox" name="checklist_orders_written" id="checkOrders" required>
                                        <label class="form-check-label" for="checkOrders">
                                            Post-operative orders written
                                        </label>
                                    </div>
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="checkbox" name="checklist_family_notified" id="checkFamily">
                                        <label class="form-check-label" for="checkFamily">
                                            Family notified of completion
                                        </label>
                                    </div>
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="checkbox" name="checklist_documentation_complete" id="checkDocs" required>
                                        <label class="form-check-label" for="checkDocs">
                                            All documentation complete
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <!-- Final Notes -->
                            <div class="row mb-4">
                                <div class="col-12">
                                    <div class="mb-3">
                                        <label class="form-label">Final Operative Notes</label>
                                        <textarea name="final_notes" class="form-control" rows="5" placeholder="Final observations, complications, or special notes..."></textarea>
                                    </div>
                                </div>
                            </div>

                            <!-- Action Buttons -->
                            <div class="row">
                                <div class="col-12">
                                    <div class="d-flex justify-content-between">
                                        <button type="button" class="btn btn-secondary" onclick="history.back()">
                                            <i class="fa fa-times"></i> Cancel
                                        </button>
                                        <div>
                                            <button type="button" class="btn btn-warning me-2" id="saveProgressBtn">
                                                <i class="fa fa-save"></i> Save Progress
                                            </button>
                                            <button type="submit" class="btn btn-success btn-lg">
                                                <i class="fa fa-check"></i> Complete Case
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Case Summary Sidebar -->
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">Case Information</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <strong>Case ID:</strong><br>
                            <span class="text-primary">{{ surgical_case.case_id }}</span>
                        </div>
                        <div class="mb-3">
                            <strong>Operating Room:</strong><br>
                            {{ surgical_case.operating_room.room_number }}
                        </div>
                        <div class="mb-3">
                            <strong>Primary Surgeon:</strong><br>
                            {{ surgical_case.primary_surgeon.get_full_name }}
                        </div>
                        <div class="mb-3">
                            <strong>Anesthesiologist:</strong><br>
                            {{ surgical_case.anesthesiologist.get_full_name|default:"Not assigned" }}
                        </div>
                        <div class="mb-3">
                            <strong>Current Status:</strong><br>
                            <span class="badge bg-info">{{ surgical_case.status|title }}</span>
                        </div>
                    </div>
                </div>

                <!-- Team Members -->
                <div class="card mt-3">
                    <div class="card-header">
                        <h5 class="card-title">Surgical Team</h5>
                    </div>
                    <div class="card-body">
                        {% for member in surgical_team %}
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span>{{ member.name }}</span>
                            <span class="badge bg-secondary">{{ member.role }}</span>
                        </div>
                        {% empty %}
                        <p class="text-muted">No team members assigned</p>
                        {% endfor %}
                    </div>
                </div>

                <!-- Time Tracking -->
                <div class="card mt-3">
                    <div class="card-header">
                        <h5 class="card-title">Time Tracking</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-2">
                            <strong>Scheduled:</strong><br>
                            <small>{{ surgical_case.scheduled_start_time|date:"H:i" }} - {{ surgical_case.scheduled_end_time|date:"H:i" }}</small>
                        </div>
                        <div class="mb-2">
                            <strong>Actual Start:</strong><br>
                            <small>{{ surgical_case.actual_start_time|date:"H:i" }}</small>
                        </div>
                        <div class="mb-2">
                            <strong>Current Duration:</strong><br>
                            <small class="text-primary">{{ case_duration }} minutes</small>
                        </div>
                        <div class="mb-2">
                            <strong>Estimated Remaining:</strong><br>
                            <small>{{ estimated_remaining }} minutes</small>
                        </div>
                    </div>
                </div>

                <!-- Quick Actions -->
                <div class="card mt-3">
                    <div class="card-header">
                        <h5 class="card-title">Quick Actions</h5>
                    </div>
                    <div class="card-body">
                        <div class="d-grid gap-2">
                            <a href="#" class="btn btn-outline-primary btn-sm">
                                <i class="fa fa-file-text"></i> View Operative Note
                            </a>
                            <a href="#" class="btn btn-outline-info btn-sm">
                                <i class="fa fa-print"></i> Print Case Summary
                            </a>
                            <a href="#" class="btn btn-outline-warning btn-sm">
                                <i class="fa fa-phone"></i> Contact Recovery
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Set current time as default end time
    const now = new Date();
    const localDateTime = new Date(now.getTime() - now.getTimezoneOffset() * 60000).toISOString().slice(0, 16);
    document.querySelector('input[name="actual_end_time"]').value = localDateTime;

    // Form validation
    const form = document.getElementById('completeCaseForm');
    form.addEventListener('submit', function(e) {
        const requiredCheckboxes = document.querySelectorAll('input[type="checkbox"][required]');
        let allChecked = true;

        requiredCheckboxes.forEach(checkbox => {
            if (!checkbox.checked) {
                allChecked = false;
                checkbox.closest('.form-check').classList.add('text-danger');
            } else {
                checkbox.closest('.form-check').classList.remove('text-danger');
            }
        });

        if (!allChecked) {
            e.preventDefault();
            alert('Please complete all required checklist items before completing the case.');
            return false;
        }

        // Confirm case completion
        if (!confirm('Are you sure you want to complete this surgical case? This action cannot be undone.')) {
            e.preventDefault();
            return false;
        }
    });

    // Save progress functionality
    document.getElementById('saveProgressBtn').addEventListener('click', function() {
        const formData = new FormData(form);
        formData.append('save_progress', 'true');
        
        fetch(form.action, {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('Progress saved successfully!');
            } else {
                alert('Error saving progress: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error saving progress');
        });
    });

    // Real-time checklist validation
    const checkboxes = document.querySelectorAll('input[type="checkbox"][required]');
    checkboxes.forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            if (this.checked) {
                this.closest('.form-check').classList.remove('text-danger');
                this.closest('.form-check').classList.add('text-success');
            } else {
                this.closest('.form-check').classList.remove('text-success');
            }
        });
    });

    // Auto-calculate duration
    const startTime = new Date('{{ surgical_case.actual_start_time|date:"c" }}');
    const endTimeInput = document.querySelector('input[name="actual_end_time"]');
    
    endTimeInput.addEventListener('change', function() {
        const endTime = new Date(this.value);
        const duration = Math.round((endTime - startTime) / (1000 * 60));
        
        if (duration > 0) {
            console.log(`Case duration: ${duration} minutes`);
        }
    });
});
</script>
{% endblock %}