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

{% block title %}{{ object|yesno:"Edit,Create" }} Surgery - Inpatients{% endblock %}

{% block css %}
<link href="{% static 'assets/plugins/select2/dist/css/select2.min.css' %}" rel="stylesheet" />
<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/summernote/dist/summernote-lite.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 'inpatients:dashboard' %}">Inpatients</a></li>
    <li class="breadcrumb-item"><a href="{% url 'inpatients:surgery_list' %}">Surgeries</a></li>
    <li class="breadcrumb-item active">{{ object|yesno:"Edit,Create" }} Surgery</li>
</ol>
<!-- END breadcrumb -->

<!-- BEGIN page-header -->
<h1 class="page-header">{{ object|yesno:"Edit,Create" }} Surgery</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">Surgery Information</h4>
                <div class="panel-heading-btn">
                    <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="surgery-form">
                    {% csrf_token %}
                    
                    <!-- Basic Information -->
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label" for="{{ form.patient.id_for_label }}">Patient <span class="text-danger">*</span></label>
                            {{ form.patient }}
                            {% if form.patient.errors %}
                                <div class="invalid-feedback d-block">{{ form.patient.errors.0 }}</div>
                            {% endif %}
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" for="{{ form.surgeon.id_for_label }}">Primary Surgeon <span class="text-danger">*</span></label>
                            {{ form.surgeon }}
                            {% if form.surgeon.errors %}
                                <div class="invalid-feedback d-block">{{ form.surgeon.errors.0 }}</div>
                            {% endif %}
                        </div>
                    </div>

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

                    <!-- Scheduling Information -->
                    <h5 class="mb-3 mt-4">Scheduling Information</h5>
                    <div class="row mb-3">
                        <div class="col-md-4">
                            <label class="form-label" for="{{ form.scheduled_date.id_for_label }}">Scheduled Date <span class="text-danger">*</span></label>
                            {{ form.scheduled_date }}
                            {% if form.scheduled_date.errors %}
                                <div class="invalid-feedback d-block">{{ form.scheduled_date.errors.0 }}</div>
                            {% endif %}
                        </div>
                        <div class="col-md-4">
                            <label class="form-label" for="{{ form.scheduled_start_time.id_for_label }}">Start Time <span class="text-danger">*</span></label>
                            {{ form.scheduled_start_time }}
                            {% if form.scheduled_start_time.errors %}
                                <div class="invalid-feedback d-block">{{ form.scheduled_start_time.errors.0 }}</div>
                            {% endif %}
                        </div>
                        <div class="col-md-4">
                            <label class="form-label" for="{{ form.estimated_duration.id_for_label }}">Estimated Duration (minutes)</label>
                            {{ form.estimated_duration }}
                            {% if form.estimated_duration.errors %}
                                <div class="invalid-feedback d-block">{{ form.estimated_duration.errors.0 }}</div>
                            {% endif %}
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label" for="{{ form.operating_room.id_for_label }}">Operating Room</label>
                            {{ form.operating_room }}
                            {% if form.operating_room.errors %}
                                <div class="invalid-feedback d-block">{{ form.operating_room.errors.0 }}</div>
                            {% endif %}
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" for="{{ form.anesthesia_type.id_for_label }}">Anesthesia Type</label>
                            {{ form.anesthesia_type }}
                            {% if form.anesthesia_type.errors %}
                                <div class="invalid-feedback d-block">{{ form.anesthesia_type.errors.0 }}</div>
                            {% endif %}
                        </div>
                    </div>

                    <!-- Team Information -->
                    <h5 class="mb-3 mt-4">Surgical Team</h5>
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label" for="{{ form.assistant_surgeons.id_for_label }}">Assistant Surgeons</label>
                            {{ form.assistant_surgeons }}
                            {% if form.assistant_surgeons.errors %}
                                <div class="invalid-feedback d-block">{{ form.assistant_surgeons.errors.0 }}</div>
                            {% endif %}
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" for="{{ form.anesthesiologist.id_for_label }}">Anesthesiologist</label>
                            {{ form.anesthesiologist }}
                            {% if form.anesthesiologist.errors %}
                                <div class="invalid-feedback d-block">{{ form.anesthesiologist.errors.0 }}</div>
                            {% endif %}
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label" for="{{ form.scrub_nurses.id_for_label }}">Scrub Nurses</label>
                            {{ form.scrub_nurses }}
                            {% if form.scrub_nurses.errors %}
                                <div class="invalid-feedback d-block">{{ form.scrub_nurses.errors.0 }}</div>
                            {% endif %}
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" for="{{ form.circulating_nurses.id_for_label }}">Circulating Nurses</label>
                            {{ form.circulating_nurses }}
                            {% if form.circulating_nurses.errors %}
                                <div class="invalid-feedback d-block">{{ form.circulating_nurses.errors.0 }}</div>
                            {% endif %}
                        </div>
                    </div>

                    <!-- Clinical Information -->
                    <h5 class="mb-3 mt-4">Clinical Information</h5>
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label" for="{{ form.urgency_level.id_for_label }}">Urgency Level</label>
                            {{ form.urgency_level }}
                            {% if form.urgency_level.errors %}
                                <div class="invalid-feedback d-block">{{ form.urgency_level.errors.0 }}</div>
                            {% endif %}
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" for="{{ form.status.id_for_label }}">Status</label>
                            {{ form.status }}
                            {% if form.status.errors %}
                                <div class="invalid-feedback d-block">{{ form.status.errors.0 }}</div>
                            {% endif %}
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label" for="{{ form.pre_operative_notes.id_for_label }}">Pre-operative Notes</label>
                        {{ form.pre_operative_notes }}
                        {% 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" for="{{ form.special_instructions.id_for_label }}">Special Instructions</label>
                        {{ form.special_instructions }}
                        {% if form.special_instructions.errors %}
                            <div class="invalid-feedback d-block">{{ form.special_instructions.errors.0 }}</div>
                        {% endif %}
                    </div>

                    <!-- Form Actions -->
                    <div class="d-flex justify-content-between">
                        <a href="{% url 'inpatients:surgery_list' %}" class="btn btn-default">
                            <i class="fa fa-arrow-left me-2"></i>Cancel
                        </a>
                        <div>
                            <button type="submit" name="action" value="save_draft" class="btn btn-warning me-2">
                                <i class="fa fa-save me-2"></i>Save as Draft
                            </button>
                            <button type="submit" name="action" value="save" class="btn btn-success">
                                <i class="fa fa-check me-2"></i>{{ object|yesno:"Update,Create" }} 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">Surgery Guidelines</h4>
                <div class="panel-heading-btn">
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
                </div>
            </div>
            <div class="panel-body">
                <div class="alert alert-info">
                    <h6><i class="fa fa-info-circle me-2"></i>Scheduling Guidelines</h6>
                    <ul class="mb-0">
                        <li>Schedule surgeries at least 24 hours in advance for elective procedures</li>
                        <li>Emergency surgeries can be scheduled immediately</li>
                        <li>Verify patient consent and pre-operative requirements</li>
                        <li>Ensure all team members are available for scheduled time</li>
                    </ul>
                </div>

                <div class="alert alert-warning">
                    <h6><i class="fa fa-exclamation-triangle me-2"></i>Urgency Levels</h6>
                    <ul class="mb-0">
                        <li><strong>Emergency:</strong> Life-threatening, immediate surgery required</li>
                        <li><strong>Urgent:</strong> Surgery needed within 24 hours</li>
                        <li><strong>Elective:</strong> Planned surgery, can be scheduled in advance</li>
                    </ul>
                </div>

                <div class="alert alert-success">
                    <h6><i class="fa fa-check-circle me-2"></i>Pre-operative Checklist</h6>
                    <ul class="mb-0">
                        <li>Patient consent obtained and documented</li>
                        <li>Pre-operative assessment completed</li>
                        <li>Laboratory results reviewed</li>
                        <li>Anesthesia consultation completed (if required)</li>
                        <li>Surgical site marked and verified</li>
                    </ul>
                </div>

                {% if object %}
                <div class="alert alert-secondary">
                    <h6><i class="fa fa-clock me-2"></i>Surgery Timeline</h6>
                    <ul class="mb-0">
                        <li><strong>Created:</strong> {{ object.created_at|date:"M d, Y H:i" }}</li>
                        {% if object.updated_at != object.created_at %}
                        <li><strong>Last Updated:</strong> {{ object.updated_at|date:"M d, Y H:i" }}</li>
                        {% endif %}
                        <li><strong>Status:</strong> <span class="badge bg-{{ object.get_status_color }}">{{ object.get_status_display }}</span></li>
                    </ul>
                </div>
                {% endif %}
            </div>
        </div>
        <!-- END panel -->
    </div>
</div>
{% endblock %}

{% block js %}
<script src="{% static 'assets/plugins/select2/dist/js/select2.min.js' %}"></script>
<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/summernote/dist/summernote-lite.min.js' %}"></script>
<script>
$(document).ready(function() {
    // Initialize Select2
    $('.select2').select2({
        theme: 'bootstrap-5',
        width: '100%'
    });

    // Initialize date picker
    $('input[type="date"]').datepicker({
        format: 'yyyy-mm-dd',
        autoclose: true,
        todayHighlight: true,
        startDate: new Date()
    });

    // Initialize time picker
    $('input[type="time"]').timepicker({
        showMeridian: false,
        defaultTime: false
    });

    // Initialize Summernote
    $('.summernote').summernote({
        height: 150,
        toolbar: [
            ['style', ['style']],
            ['font', ['bold', 'italic', 'underline', 'clear']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['insert', ['link']],
            ['view', ['fullscreen', 'codeview']]
        ]
    });

    // Form validation
    $('#surgery-form').on('submit', function(e) {
        var isValid = true;
        var requiredFields = ['patient', 'surgeon', 'procedure_name', 'scheduled_date', 'scheduled_start_time'];
        
        requiredFields.forEach(function(field) {
            var input = $('[name="' + field + '"]');
            if (!input.val()) {
                input.addClass('is-invalid');
                isValid = false;
            } else {
                input.removeClass('is-invalid');
            }
        });

        if (!isValid) {
            e.preventDefault();
            toastr.error('Please fill in all required fields.');
        }
    });

    // Real-time validation
    $('input, select, textarea').on('change blur', function() {
        if ($(this).val()) {
            $(this).removeClass('is-invalid');
        }
    });

    // Check for scheduling conflicts
    $('#id_scheduled_date, #id_scheduled_start_time, #id_operating_room').on('change', function() {
        var date = $('#id_scheduled_date').val();
        var time = $('#id_scheduled_start_time').val();
        var room = $('#id_operating_room').val();
        
        if (date && time && room) {
            // Check for conflicts (this would be an AJAX call in a real implementation)
            // For now, just show a placeholder message
            console.log('Checking for scheduling conflicts...');
        }
    });
});
</script>
{% endblock %}