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

{% block title %}{% if object %}Edit{% else %}Create{% endif %} Surgical Case - Operating Theatre{% endblock %}

{% block css %}
<link href="{% static 'assets/plugins/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css' %}" rel="stylesheet" />
<link href="{% static 'assets/plugins/bootstrap-timepicker/css/bootstrap-timepicker.min.css' %}" rel="stylesheet" />
<link href="{% static 'assets/plugins/select2/dist/css/select2.min.css' %}" rel="stylesheet" />
{% endblock %}

{% block content %}
<!-- BEGIN breadcrumb -->
<ol class="breadcrumb float-xl-end">
    <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:surgical_case_list' %}">Surgical Cases</a></li>
    <li class="breadcrumb-item active">{% if object %}Edit{% else %}Create{% endif %} Case</li>
</ol>
<!-- END breadcrumb -->

<!-- BEGIN page-header -->
<h1 class="page-header">
    {% if object %}Edit Surgical Case{% else %}Create Surgical Case{% endif %}
    <small>{% if object %}{{ object.case_number }}{% else %}New Surgery Scheduling{% endif %}</small>
</h1>
<!-- END page-header -->

<div class="row">
    <div class="col-xl-8">
        <!-- BEGIN panel -->
        <div class="panel panel-inverse">
            <div class="panel-heading">
                <h4 class="panel-title">Case Information</h4>
                <div class="panel-heading-btn">
                    <button type="button" class="btn btn-xs btn-secondary me-2" onclick="saveDraft()">
                        <i class="fa fa-save"></i> Save Draft
                    </button>
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
                </div>
            </div>
            <div class="panel-body">
                <form method="post" id="case-form">
                    {% csrf_token %}
                    
                    <!-- Patient Information -->
                    <h6 class="border-bottom pb-2 mb-3">Patient Information</h6>
                    
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <div class="form-floating">
                                {{ form.patient }}
                                <label for="{{ form.patient.id_for_label }}">Patient <span class="text-danger">*</span></label>
                                {% if form.patient.errors %}
                                <div class="invalid-feedback d-block">{{ form.patient.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div id="patient-info" class="mt-2" style="display: none;">
                                <div class="alert alert-info">
                                    <div id="patient-details"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Surgery Information -->
                    <h6 class="border-bottom pb-2 mb-3">Surgery Information</h6>
                    
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <div class="form-floating">
                                {{ form.procedure_name }}
                                <label for="{{ form.procedure_name.id_for_label }}">Procedure Name <span class="text-danger">*</span></label>
                                {% if form.procedure_name.errors %}
                                <div class="invalid-feedback d-block">{{ form.procedure_name.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-floating">
                                {{ form.procedure_code }}
                                <label for="{{ form.procedure_code.id_for_label }}">Procedure Code</label>
                                {% if form.procedure_code.errors %}
                                <div class="invalid-feedback d-block">{{ form.procedure_code.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-4">
                            <div class="form-floating">
                                {{ form.surgery_type }}
                                <label for="{{ form.surgery_type.id_for_label }}">Surgery Type <span class="text-danger">*</span></label>
                                {% if form.surgery_type.errors %}
                                <div class="invalid-feedback d-block">{{ form.surgery_type.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-floating">
                                {{ form.priority }}
                                <label for="{{ form.priority.id_for_label }}">Priority <span class="text-danger">*</span></label>
                                {% if form.priority.errors %}
                                <div class="invalid-feedback d-block">{{ form.priority.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-floating">
                                {{ form.estimated_duration }}
                                <label for="{{ form.estimated_duration.id_for_label }}">Estimated Duration (minutes) <span class="text-danger">*</span></label>
                                {% if form.estimated_duration.errors %}
                                <div class="invalid-feedback d-block">{{ form.estimated_duration.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>
                    </div>

                    <!-- Scheduling Information -->
                    <h6 class="border-bottom pb-2 mb-3">Scheduling Information</h6>
                    
                    <div class="row mb-3">
                        <div class="col-md-4">
                            <div class="form-floating">
                                {{ form.operating_room }}
                                <label for="{{ form.operating_room.id_for_label }}">Operating Room <span class="text-danger">*</span></label>
                                {% if form.operating_room.errors %}
                                <div class="invalid-feedback d-block">{{ form.operating_room.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-floating">
                                {{ form.scheduled_date }}
                                <label for="{{ form.scheduled_date.id_for_label }}">Scheduled Date <span class="text-danger">*</span></label>
                                {% if form.scheduled_date.errors %}
                                <div class="invalid-feedback d-block">{{ form.scheduled_date.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-floating">
                                {{ form.scheduled_start_time }}
                                <label for="{{ form.scheduled_start_time.id_for_label }}">Start Time <span class="text-danger">*</span></label>
                                {% if form.scheduled_start_time.errors %}
                                <div class="invalid-feedback d-block">{{ form.scheduled_start_time.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>
                    </div>

                    <!-- Room Availability Check -->
                    <div class="row mb-3">
                        <div class="col-md-12">
                            <div id="room-availability" class="alert alert-info" style="display: none;">
                                <i class="fa fa-info-circle me-2"></i>
                                <span id="availability-message"></span>
                            </div>
                        </div>
                    </div>

                    <!-- Surgical Team -->
                    <h6 class="border-bottom pb-2 mb-3">Surgical Team</h6>
                    
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <div class="form-floating">
                                {{ form.primary_surgeon }}
                                <label for="{{ form.primary_surgeon.id_for_label }}">Primary Surgeon <span class="text-danger">*</span></label>
                                {% if form.primary_surgeon.errors %}
                                <div class="invalid-feedback d-block">{{ form.primary_surgeon.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-floating">
                                {{ form.anesthesiologist }}
                                <label for="{{ form.anesthesiologist.id_for_label }}">Anesthesiologist</label>
                                {% if form.anesthesiologist.errors %}
                                <div class="invalid-feedback d-block">{{ form.anesthesiologist.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>
                    </div>

                    <!-- Additional Team Members -->
                    <div class="mb-3">
                        <label class="form-label">Additional Team Members</label>
                        <div id="team-members">
                            {% if object %}
                                {% for team_member in object.surgical_team.all %}
                                <div class="team-member-row mb-2">
                                    <div class="row">
                                        <div class="col-md-5">
                                            <select class="form-select" name="team_member_staff">
                                                <option value="{{ team_member.staff_member.id }}" selected>{{ team_member.staff_member.get_full_name }}</option>
                                            </select>
                                        </div>
                                        <div class="col-md-5">
                                            <input type="text" class="form-control" name="team_member_role" value="{{ team_member.role }}" placeholder="Role">
                                        </div>
                                        <div class="col-md-2">
                                            <button type="button" class="btn btn-outline-danger" onclick="removeTeamMember(this)">
                                                <i class="fa fa-times"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                {% endfor %}
                            {% endif %}
                        </div>
                        <button type="button" class="btn btn-outline-primary btn-sm" onclick="addTeamMember()">
                            <i class="fa fa-plus me-2"></i>Add Team Member
                        </button>
                    </div>

                    <!-- Equipment and Supplies -->
                    <h6 class="border-bottom pb-2 mb-3">Equipment & Supplies</h6>
                    
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label">Required Equipment</label>
                            <div id="equipment-list">
                                {% if object %}
                                    {% for equipment in object.equipment_required.all %}
                                    <div class="equipment-item mb-2">
                                        <div class="input-group">
                                            <select class="form-select" name="equipment">
                                                <option value="{{ equipment.id }}" selected>{{ equipment.name }}</option>
                                            </select>
                                            <button type="button" class="btn btn-outline-danger" onclick="removeEquipment(this)">
                                                <i class="fa fa-times"></i>
                                            </button>
                                        </div>
                                    </div>
                                    {% endfor %}
                                {% endif %}
                            </div>
                            <button type="button" class="btn btn-outline-primary btn-sm" onclick="addEquipment()">
                                <i class="fa fa-plus me-2"></i>Add Equipment
                            </button>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Required Supplies</label>
                            <div id="supplies-list">
                                {% if object %}
                                    {% for supply in object.supplies_required.all %}
                                    <div class="supply-item mb-2">
                                        <div class="row">
                                            <div class="col-8">
                                                <select class="form-select" name="supply">
                                                    <option value="{{ supply.item.id }}" selected>{{ supply.item.name }}</option>
                                                </select>
                                            </div>
                                            <div class="col-3">
                                                <input type="number" class="form-control" name="supply_quantity" value="{{ supply.quantity }}" placeholder="Qty">
                                            </div>
                                            <div class="col-1">
                                                <button type="button" class="btn btn-outline-danger btn-sm" onclick="removeSupply(this)">
                                                    <i class="fa fa-times"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    {% endfor %}
                                {% endif %}
                            </div>
                            <button type="button" class="btn btn-outline-primary btn-sm" onclick="addSupply()">
                                <i class="fa fa-plus me-2"></i>Add Supply
                            </button>
                        </div>
                    </div>

                    <!-- Clinical Notes -->
                    <h6 class="border-bottom pb-2 mb-3">Clinical Notes</h6>
                    
                    <div class="mb-3">
                        <label class="form-label">Pre-operative Notes</label>
                        {{ form.pre_operative_notes }}
                        {% if form.pre_operative_notes.help_text %}
                        <div class="form-text">{{ form.pre_operative_notes.help_text }}</div>
                        {% endif %}
                        {% if form.pre_operative_notes.errors %}
                        <div class="invalid-feedback d-block">{{ form.pre_operative_notes.errors.0 }}</div>
                        {% endif %}
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Special Instructions</label>
                        {{ form.special_instructions }}
                        {% if form.special_instructions.help_text %}
                        <div class="form-text">{{ form.special_instructions.help_text }}</div>
                        {% endif %}
                        {% if form.special_instructions.errors %}
                        <div class="invalid-feedback d-block">{{ form.special_instructions.errors.0 }}</div>
                        {% endif %}
                    </div>

                    <!-- Action Buttons -->
                    <div class="d-flex justify-content-between mt-4">
                        <div>
                            <a href="{% url 'operating_theatre:surgical_case_list' %}" class="btn btn-secondary">
                                <i class="fa fa-arrow-left me-2"></i>Cancel
                            </a>
                        </div>
                        <div>
                            <button type="button" class="btn btn-info me-2" onclick="saveDraft()">
                                <i class="fa fa-save me-2"></i>Save Draft
                            </button>
                            <button type="submit" class="btn btn-primary">
                                <i class="fa fa-check me-2"></i>{% if object %}Update{% else %}Schedule{% endif %} Surgery
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <!-- END panel -->
    </div>

    <div class="col-xl-4">
        <!-- BEGIN panel -->
        <div class="panel panel-inverse">
            <div class="panel-heading">
                <h4 class="panel-title">Scheduling Guidelines</h4>
            </div>
            <div class="panel-body">
                <div class="alert alert-info">
                    <h6 class="alert-heading">Surgery Scheduling Tips</h6>
                    <ul class="mb-0 small">
                        <li>Check room availability before scheduling</li>
                        <li>Ensure all team members are available</li>
                        <li>Verify equipment and supplies are in stock</li>
                        <li>Consider patient preparation time</li>
                        <li>Allow buffer time between surgeries</li>
                    </ul>
                </div>
                
                <div class="alert alert-warning">
                    <h6 class="alert-heading">Priority Guidelines</h6>
                    <ul class="mb-0 small">
                        <li><strong>Emergency:</strong> Life-threatening conditions</li>
                        <li><strong>Urgent:</strong> Within 24-48 hours</li>
                        <li><strong>Elective:</strong> Scheduled in advance</li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- END panel -->

        <!-- BEGIN panel -->
        <div class="panel panel-inverse">
            <div class="panel-heading">
                <h4 class="panel-title">Room Schedule</h4>
            </div>
            <div class="panel-body">
                <div id="room-schedule">
                    <p class="text-muted">Select a room and date to view schedule</p>
                </div>
            </div>
        </div>
        <!-- END panel -->

        {% if object %}
        <!-- BEGIN panel -->
        <div class="panel panel-inverse">
            <div class="panel-heading">
                <h4 class="panel-title">Case Status</h4>
            </div>
            <div class="panel-body">
                <table class="table table-borderless table-sm">
                    <tr>
                        <td class="fw-bold" width="100">Status:</td>
                        <td>
                            <span class="badge bg-{% if object.status == 'SCHEDULED' %}info{% elif object.status == 'IN_PROGRESS' %}warning{% elif object.status == 'COMPLETED' %}success{% else %}secondary{% endif %}">
                                {{ object.get_status_display }}
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <td class="fw-bold">Created:</td>
                        <td>{{ object.created_at|date:"M d, Y H:i" }}</td>
                    </tr>
                    <tr>
                        <td class="fw-bold">Case Number:</td>
                        <td><code>{{ object.case_number }}</code></td>
                    </tr>
                    {% if object.scheduled_start_time %}
                    <tr>
                        <td class="fw-bold">Scheduled:</td>
                        <td>{{ object.scheduled_start_time|date:"M d, Y H:i" }}</td>
                    </tr>
                    {% endif %}
                </table>
            </div>
        </div>
        <!-- END panel -->
        {% endif %}
    </div>
</div>
{% endblock %}

{% block js %}
<script src="{% static 'assets/plugins/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js' %}"></script>
<script src="{% static 'assets/plugins/bootstrap-timepicker/js/bootstrap-timepicker.min.js' %}"></script>
<script src="{% static 'assets/plugins/select2/dist/js/select2.min.js' %}"></script>

<script>
$(document).ready(function() {
    // Initialize date picker
    $('#id_scheduled_date').datepicker({
        format: 'yyyy-mm-dd',
        startDate: 'today',
        autoclose: true
    });
    
    // Initialize time picker
    $('#id_scheduled_start_time').timepicker({
        showMeridian: false,
        defaultTime: '08:00'
    });
    
    // Initialize select2
    $('select').select2({
        theme: 'bootstrap-5'
    });
    
    // Patient selection change
    $('#id_patient').on('change', function() {
        var patientId = $(this).val();
        if (patientId) {
            loadPatientInfo(patientId);
        } else {
            $('#patient-info').hide();
        }
    });
    
    // Room and date change
    $('#id_operating_room, #id_scheduled_date').on('change', function() {
        checkRoomAvailability();
        loadRoomSchedule();
    });
});

function loadPatientInfo(patientId) {
    $.ajax({
        url: '{% url "operating_theatre:patient_info" 0 %}'.replace('0', patientId),
        method: 'GET',
        success: function(response) {
            if (response.success) {
                var patient = response.patient;
                var html = `
                    <strong>${patient.name}</strong><br>
                    <small>ID: ${patient.patient_id} | DOB: ${patient.date_of_birth} | Age: ${patient.age}</small><br>
                    <small>Blood Type: ${patient.blood_type || 'Unknown'} | Allergies: ${patient.allergies || 'None known'}</small>
                `;
                $('#patient-details').html(html);
                $('#patient-info').show();
            }
        },
        error: function() {
            toastr.error('Failed to load patient information');
        }
    });
}

function checkRoomAvailability() {
    var roomId = $('#id_operating_room').val();
    var date = $('#id_scheduled_date').val();
    var startTime = $('#id_scheduled_start_time').val();
    var duration = $('#id_estimated_duration').val();
    
    if (roomId && date && startTime && duration) {
        $.ajax({
            url: '{% url "operating_theatre:check_room_availability" %}',
            method: 'POST',
            data: {
                'csrfmiddlewaretoken': '{{ csrf_token }}',
                'room_id': roomId,
                'date': date,
                'start_time': startTime,
                'duration': duration,
                'case_id': '{{ object.id|default:"" }}'
            },
            success: function(response) {
                if (response.available) {
                    $('#availability-message').html('Room is available for the selected time slot');
                    $('#room-availability').removeClass('alert-warning alert-danger').addClass('alert-success').show();
                } else {
                    $('#availability-message').html('Room conflict: ' + response.conflict_reason);
                    $('#room-availability').removeClass('alert-success alert-info').addClass('alert-danger').show();
                }
            },
            error: function() {
                $('#availability-message').html('Unable to check room availability');
                $('#room-availability').removeClass('alert-success alert-info').addClass('alert-warning').show();
            }
        });
    }
}

function loadRoomSchedule() {
    var roomId = $('#id_operating_room').val();
    var date = $('#id_scheduled_date').val();
    
    if (roomId && date) {
        $.ajax({
            url: '{% url "operating_theatre:room_schedule" %}',
            method: 'GET',
            data: {
                'room_id': roomId,
                'date': date
            },
            success: function(response) {
                $('#room-schedule').html(response.html);
            },
            error: function() {
                $('#room-schedule').html('<p class="text-danger">Unable to load room schedule</p>');
            }
        });
    }
}

function addTeamMember() {
    var html = `
        <div class="team-member-row mb-2">
            <div class="row">
                <div class="col-md-5">
                    <select class="form-select" name="team_member_staff">
                        <option value="">Select staff member...</option>
                        {% for staff in available_staff %}
                        <option value="{{ staff.id }}">{{ staff.get_full_name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-5">
                    <input type="text" class="form-control" name="team_member_role" placeholder="Role (e.g., Scrub Nurse, Resident)">
                </div>
                <div class="col-md-2">
                    <button type="button" class="btn btn-outline-danger" onclick="removeTeamMember(this)">
                        <i class="fa fa-times"></i>
                    </button>
                </div>
            </div>
        </div>
    `;
    $('#team-members').append(html);
}

function removeTeamMember(button) {
    $(button).closest('.team-member-row').remove();
}

function addEquipment() {
    var html = `
        <div class="equipment-item mb-2">
            <div class="input-group">
                <select class="form-select" name="equipment">
                    <option value="">Select equipment...</option>
                    {% for equipment in available_equipment %}
                    <option value="{{ equipment.id }}">{{ equipment.name }}</option>
                    {% endfor %}
                </select>
                <button type="button" class="btn btn-outline-danger" onclick="removeEquipment(this)">
                    <i class="fa fa-times"></i>
                </button>
            </div>
        </div>
    `;
    $('#equipment-list').append(html);
}

function removeEquipment(button) {
    $(button).closest('.equipment-item').remove();
}

function addSupply() {
    var html = `
        <div class="supply-item mb-2">
            <div class="row">
                <div class="col-8">
                    <select class="form-select" name="supply">
                        <option value="">Select supply...</option>
                        {% for supply in available_supplies %}
                        <option value="{{ supply.id }}">{{ supply.name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-3">
                    <input type="number" class="form-control" name="supply_quantity" placeholder="Qty" min="1">
                </div>
                <div class="col-1">
                    <button type="button" class="btn btn-outline-danger btn-sm" onclick="removeSupply(this)">
                        <i class="fa fa-times"></i>
                    </button>
                </div>
            </div>
        </div>
    `;
    $('#supplies-list').append(html);
}

function removeSupply(button) {
    $(button).closest('.supply-item').remove();
}

function saveDraft() {
    var formData = new FormData($('#case-form')[0]);
    formData.append('save_draft', 'true');
    
    $.ajax({
        url: window.location.href,
        method: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        beforeSend: function() {
            toastr.info('Saving draft...');
        },
        success: function(response) {
            toastr.success('Draft saved successfully');
        },
        error: function() {
            toastr.error('Failed to save draft');
        }
    });
}
</script>
{% endblock %}