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

{% block title %}Start 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>Start Surgical Case</h4>
                        <h6>Initialize surgical case and begin procedure 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 Details</h5>
                    </div>
                    <div class="card-body">
                        <form method="post" id="startCaseForm">
                            {% csrf_token %}
                            <input type="hidden" name="case_id" value="{{ surgical_case.case_id }}">
                            
                            <!-- Patient Information -->
                            <div class="row mb-4">
                                <div class="col-12">
                                    <h6 class="text-primary">Patient Information</h6>
                                    <hr>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Patient Name</label>
                                        <input type="text" class="form-control" value="{{ surgical_case.patient.get_full_name }}" readonly>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="mb-3">
                                        <label class="form-label">MRN</label>
                                        <input type="text" class="form-control" value="{{ surgical_case.patient.medical_record_number }}" readonly>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="mb-3">
                                        <label class="form-label">Age</label>
                                        <input type="text" class="form-control" value="{{ surgical_case.patient.age }} years" readonly>
                                    </div>
                                </div>
                            </div>

                            <!-- Procedure Information -->
                            <div class="row mb-4">
                                <div class="col-12">
                                    <h6 class="text-primary">Procedure Information</h6>
                                    <hr>
                                </div>
                                <div class="col-md-8">
                                    <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-4">
                                    <div class="mb-3">
                                        <label class="form-label">Procedure Code</label>
                                        <input type="text" class="form-control" value="{{ surgical_case.procedure_code }}" readonly>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Primary Surgeon</label>
                                        <input type="text" class="form-control" value="{{ surgical_case.primary_surgeon.get_full_name }}" readonly>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Operating Room</label>
                                        <input type="text" class="form-control" value="{{ surgical_case.operating_room.room_number }}" readonly>
                                    </div>
                                </div>
                            </div>

                            <!-- Start Case Details -->
                            <div class="row mb-4">
                                <div class="col-12">
                                    <h6 class="text-primary">Case Start Information</h6>
                                    <hr>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Actual Start Time *</label>
                                        <input type="datetime-local" name="actual_start_time" class="form-control" required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Anesthesia Type *</label>
                                        <select name="anesthesia_type" class="form-select" required>
                                            <option value="">Select Anesthesia Type</option>
                                            <option value="general">General Anesthesia</option>
                                            <option value="regional">Regional Anesthesia</option>
                                            <option value="local">Local Anesthesia</option>
                                            <option value="sedation">Conscious Sedation</option>
                                            <option value="mac">Monitored Anesthesia Care</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Anesthesiologist</label>
                                        <select name="anesthesiologist" class="form-select">
                                            <option value="">Select Anesthesiologist</option>
                                            {% for doctor in anesthesiologists %}
                                            <option value="{{ doctor.id }}">{{ doctor.get_full_name }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Patient Position *</label>
                                        <select name="patient_position" class="form-select" required>
                                            <option value="">Select Position</option>
                                            <option value="supine">Supine</option>
                                            <option value="prone">Prone</option>
                                            <option value="lateral">Lateral</option>
                                            <option value="lithotomy">Lithotomy</option>
                                            <option value="trendelenburg">Trendelenburg</option>
                                            <option value="reverse_trendelenburg">Reverse Trendelenburg</option>
                                            <option value="sitting">Sitting</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <!-- Team Members -->
                            <div class="row mb-4">
                                <div class="col-12">
                                    <h6 class="text-primary">Surgical Team</h6>
                                    <hr>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Scrub Nurse</label>
                                        <select name="scrub_nurse" class="form-select">
                                            <option value="">Select Scrub Nurse</option>
                                            {% for nurse in scrub_nurses %}
                                            <option value="{{ nurse.id }}">{{ nurse.get_full_name }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Circulating Nurse</label>
                                        <select name="circulating_nurse" class="form-select">
                                            <option value="">Select Circulating Nurse</option>
                                            {% for nurse in circulating_nurses %}
                                            <option value="{{ nurse.id }}">{{ nurse.get_full_name }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="mb-3">
                                        <label class="form-label">Additional Team Members</label>
                                        <select name="additional_team_members" class="form-select" multiple>
                                            {% for member in available_team_members %}
                                            <option value="{{ member.id }}">{{ member.get_full_name }} - {{ member.role }}</option>
                                            {% endfor %}
                                        </select>
                                        <div class="form-text">Hold Ctrl/Cmd to select multiple members</div>
                                    </div>
                                </div>
                            </div>

                            <!-- Pre-operative Checklist -->
                            <div class="row mb-4">
                                <div class="col-12">
                                    <h6 class="text-primary">Pre-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_patient_identity" id="checkPatientId" required>
                                        <label class="form-check-label" for="checkPatientId">
                                            Patient identity verified
                                        </label>
                                    </div>
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="checkbox" name="checklist_procedure_verified" id="checkProcedure" required>
                                        <label class="form-check-label" for="checkProcedure">
                                            Procedure and site verified
                                        </label>
                                    </div>
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="checkbox" name="checklist_consent_obtained" id="checkConsent" required>
                                        <label class="form-check-label" for="checkConsent">
                                            Informed consent obtained
                                        </label>
                                    </div>
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="checkbox" name="checklist_allergies_reviewed" id="checkAllergies" required>
                                        <label class="form-check-label" for="checkAllergies">
                                            Allergies reviewed
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="checkbox" name="checklist_equipment_ready" id="checkEquipment" required>
                                        <label class="form-check-label" for="checkEquipment">
                                            Equipment ready and functional
                                        </label>
                                    </div>
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="checkbox" name="checklist_antibiotics_given" id="checkAntibiotics">
                                        <label class="form-check-label" for="checkAntibiotics">
                                            Prophylactic antibiotics given (if applicable)
                                        </label>
                                    </div>
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="checkbox" name="checklist_timeout_completed" id="checkTimeout" required>
                                        <label class="form-check-label" for="checkTimeout">
                                            Surgical timeout completed
                                        </label>
                                    </div>
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="checkbox" name="checklist_fire_safety" id="checkFireSafety" required>
                                        <label class="form-check-label" for="checkFireSafety">
                                            Fire safety precautions in place
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <!-- Notes -->
                            <div class="row mb-4">
                                <div class="col-12">
                                    <div class="mb-3">
                                        <label class="form-label">Pre-operative Notes</label>
                                        <textarea name="preop_notes" class="form-control" rows="4" placeholder="Enter any pre-operative observations or 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>
                                        <button type="submit" class="btn btn-success btn-lg">
                                            <i class="fa fa-play"></i> Start Surgical Case
                                        </button>
                                    </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 Summary</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>Scheduled Time:</strong><br>
                            {{ surgical_case.scheduled_start_time|date:"M d, Y H:i" }}
                        </div>
                        <div class="mb-3">
                            <strong>Estimated Duration:</strong><br>
                            {{ surgical_case.estimated_duration }} minutes
                        </div>
                        <div class="mb-3">
                            <strong>Priority:</strong><br>
                            <span class="badge bg-{{ surgical_case.priority_color }}">{{ surgical_case.priority|title }}</span>
                        </div>
                        <div class="mb-3">
                            <strong>Current Status:</strong><br>
                            <span class="badge bg-warning">{{ surgical_case.status|title }}</span>
                        </div>
                    </div>
                </div>

                <!-- Equipment Status -->
                <div class="card mt-3">
                    <div class="card-header">
                        <h5 class="card-title">Equipment Status</h5>
                    </div>
                    <div class="card-body">
                        {% for equipment in required_equipment %}
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span>{{ equipment.name }}</span>
                            <span class="badge bg-{{ equipment.status_color }}">{{ equipment.status|title }}</span>
                        </div>
                        {% empty %}
                        <p class="text-muted">No specific equipment requirements</p>
                        {% endfor %}
                    </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 Patient Chart
                            </a>
                            <a href="#" class="btn btn-outline-info btn-sm">
                                <i class="fa fa-image"></i> View Imaging
                            </a>
                            <a href="#" class="btn btn-outline-warning btn-sm">
                                <i class="fa fa-flask"></i> View Lab Results
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

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

    // Form validation
    const form = document.getElementById('startCaseForm');
    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 starting the case.');
            return false;
        }

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

    // 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');
            }
        });
    });
});
</script>
{% endblock %}