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

{% block title %}{{ object|yesno:"Edit,Create" }} Discharge - 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:discharge_list' %}">Discharges</a></li>
    <li class="breadcrumb-item active">{{ object|yesno:"Edit,Create" }} Discharge</li>
</ol>
<!-- END breadcrumb -->

<!-- BEGIN page-header -->
<h1 class="page-header">{{ object|yesno:"Edit,Create" }} Patient Discharge</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">Discharge 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="discharge-form">
                    {% csrf_token %}
                    
                    <!-- Patient and Admission Information -->
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label" for="{{ form.admission.id_for_label }}">Admission <span class="text-danger">*</span></label>
                            {{ form.admission }}
                            {% if form.admission.errors %}
                                <div class="invalid-feedback d-block">{{ form.admission.errors.0 }}</div>
                            {% endif %}
                            <div class="form-text">Select the admission to discharge</div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" for="{{ form.discharge_type.id_for_label }}">Discharge Type <span class="text-danger">*</span></label>
                            {{ form.discharge_type }}
                            {% if form.discharge_type.errors %}
                                <div class="invalid-feedback d-block">{{ form.discharge_type.errors.0 }}</div>
                            {% endif %}
                        </div>
                    </div>

                    <!-- Discharge Date and Time -->
                    <div class="row mb-3">
                        <div class="col-md-4">
                            <label class="form-label" for="{{ form.discharge_date.id_for_label }}">Discharge Date <span class="text-danger">*</span></label>
                            {{ form.discharge_date }}
                            {% if form.discharge_date.errors %}
                                <div class="invalid-feedback d-block">{{ form.discharge_date.errors.0 }}</div>
                            {% endif %}
                        </div>
                        <div class="col-md-4">
                            <label class="form-label" for="{{ form.discharge_time.id_for_label }}">Discharge Time <span class="text-danger">*</span></label>
                            {{ form.discharge_time }}
                            {% if form.discharge_time.errors %}
                                <div class="invalid-feedback d-block">{{ form.discharge_time.errors.0 }}</div>
                            {% endif %}
                        </div>
                        <div class="col-md-4">
                            <label class="form-label" for="{{ form.discharge_status.id_for_label }}">Status</label>
                            {{ form.discharge_status }}
                            {% if form.discharge_status.errors %}
                                <div class="invalid-feedback d-block">{{ form.discharge_status.errors.0 }}</div>
                            {% endif %}
                        </div>
                    </div>

                    <!-- Discharge Destination -->
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label" for="{{ form.discharge_destination.id_for_label }}">Discharge Destination</label>
                            {{ form.discharge_destination }}
                            {% if form.discharge_destination.errors %}
                                <div class="invalid-feedback d-block">{{ form.discharge_destination.errors.0 }}</div>
                            {% endif %}
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" for="{{ form.attending_physician.id_for_label }}">Attending Physician</label>
                            {{ form.attending_physician }}
                            {% if form.attending_physician.errors %}
                                <div class="invalid-feedback d-block">{{ form.attending_physician.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.primary_diagnosis.id_for_label }}">Primary Diagnosis</label>
                            {{ form.primary_diagnosis }}
                            {% if form.primary_diagnosis.errors %}
                                <div class="invalid-feedback d-block">{{ form.primary_diagnosis.errors.0 }}</div>
                            {% endif %}
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" for="{{ form.secondary_diagnoses.id_for_label }}">Secondary Diagnoses</label>
                            {{ form.secondary_diagnoses }}
                            {% if form.secondary_diagnoses.errors %}
                                <div class="invalid-feedback d-block">{{ form.secondary_diagnoses.errors.0 }}</div>
                            {% endif %}
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label" for="{{ form.discharge_summary.id_for_label }}">Discharge Summary</label>
                        {{ form.discharge_summary }}
                        {% if form.discharge_summary.errors %}
                            <div class="invalid-feedback d-block">{{ form.discharge_summary.errors.0 }}</div>
                        {% endif %}
                        <div class="form-text">Comprehensive summary of the patient's stay and treatment</div>
                    </div>

                    <!-- Medications and Instructions -->
                    <h5 class="mb-3 mt-4">Discharge Instructions</h5>
                    <div class="mb-3">
                        <label class="form-label" for="{{ form.discharge_medications.id_for_label }}">Discharge Medications</label>
                        {{ form.discharge_medications }}
                        {% if form.discharge_medications.errors %}
                            <div class="invalid-feedback d-block">{{ form.discharge_medications.errors.0 }}</div>
                        {% endif %}
                        <div class="form-text">List all medications the patient should continue at home</div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label" for="{{ form.discharge_instructions.id_for_label }}">Patient Instructions</label>
                        {{ form.discharge_instructions }}
                        {% if form.discharge_instructions.errors %}
                            <div class="invalid-feedback d-block">{{ form.discharge_instructions.errors.0 }}</div>
                        {% endif %}
                        <div class="form-text">Detailed instructions for patient care at home</div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label" for="{{ form.follow_up_instructions.id_for_label }}">Follow-up Instructions</label>
                        {{ form.follow_up_instructions }}
                        {% if form.follow_up_instructions.errors %}
                            <div class="invalid-feedback d-block">{{ form.follow_up_instructions.errors.0 }}</div>
                        {% endif %}
                        <div class="form-text">When and where the patient should follow up</div>
                    </div>

                    <!-- Activity and Diet -->
                    <h5 class="mb-3 mt-4">Activity and Diet Restrictions</h5>
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label" for="{{ form.activity_restrictions.id_for_label }}">Activity Restrictions</label>
                            {{ form.activity_restrictions }}
                            {% if form.activity_restrictions.errors %}
                                <div class="invalid-feedback d-block">{{ form.activity_restrictions.errors.0 }}</div>
                            {% endif %}
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" for="{{ form.diet_restrictions.id_for_label }}">Diet Restrictions</label>
                            {{ form.diet_restrictions }}
                            {% if form.diet_restrictions.errors %}
                                <div class="invalid-feedback d-block">{{ form.diet_restrictions.errors.0 }}</div>
                            {% endif %}
                        </div>
                    </div>

                    <!-- Additional Information -->
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <div class="form-check">
                                {{ form.patient_education_provided }}
                                <label class="form-check-label" for="{{ form.patient_education_provided.id_for_label }}">
                                    Patient education provided
                                </label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-check">
                                {{ form.discharge_planning_completed }}
                                <label class="form-check-label" for="{{ form.discharge_planning_completed.id_for_label }}">
                                    Discharge planning completed
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label" for="{{ form.notes.id_for_label }}">Additional Notes</label>
                        {{ form.notes }}
                        {% if form.notes.errors %}
                            <div class="invalid-feedback d-block">{{ form.notes.errors.0 }}</div>
                        {% endif %}
                    </div>

                    <!-- Form Actions -->
                    <div class="d-flex justify-content-between">
                        <a href="{% url 'inpatients:discharge_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,Complete" }} Discharge
                            </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">Discharge 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>Discharge Checklist</h6>
                    <ul class="mb-0">
                        <li>Patient is medically stable for discharge</li>
                        <li>All necessary medications prescribed</li>
                        <li>Follow-up appointments scheduled</li>
                        <li>Patient/family education completed</li>
                        <li>Transportation arranged</li>
                        <li>Discharge summary completed</li>
                    </ul>
                </div>

                <div class="alert alert-warning">
                    <h6><i class="fa fa-exclamation-triangle me-2"></i>Required Documentation</h6>
                    <ul class="mb-0">
                        <li>Discharge summary with diagnoses</li>
                        <li>Medication reconciliation</li>
                        <li>Patient instruction sheet</li>
                        <li>Follow-up appointment details</li>
                        <li>Emergency contact information</li>
                    </ul>
                </div>

                <div class="alert alert-success">
                    <h6><i class="fa fa-check-circle me-2"></i>Discharge Types</h6>
                    <ul class="mb-0">
                        <li><strong>Home:</strong> Patient returns to home environment</li>
                        <li><strong>Transfer:</strong> Transfer to another facility</li>
                        <li><strong>AMA:</strong> Against medical advice</li>
                        <li><strong>Expired:</strong> Patient deceased during stay</li>
                    </ul>
                </div>

                {% if object and object.admission %}
                <div class="alert alert-secondary">
                    <h6><i class="fa fa-user me-2"></i>Patient Information</h6>
                    <ul class="mb-0">
                        <li><strong>Patient:</strong> {{ object.admission.patient.get_full_name }}</li>
                        <li><strong>MRN:</strong> {{ object.admission.patient.medical_record_number }}</li>
                        <li><strong>Admission Date:</strong> {{ object.admission.admission_date|date:"M d, Y" }}</li>
                        <li><strong>Length of Stay:</strong> {{ object.admission.get_length_of_stay }} days</li>
                    </ul>
                </div>
                {% endif %}
            </div>
        </div>
        <!-- END panel -->

        {% if object and object.admission %}
        <!-- BEGIN panel -->
        <div class="panel panel-inverse">
            <div class="panel-heading">
                <h4 class="panel-title">Admission Summary</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="small">
                    <div class="mb-2">
                        <strong>Admission Reason:</strong><br>
                        {{ object.admission.admission_reason|default:"Not specified" }}
                    </div>
                    
                    <div class="mb-2">
                        <strong>Attending Physician:</strong><br>
                        {{ object.admission.attending_physician.get_full_name|default:"Not assigned" }}
                    </div>
                    
                    <div class="mb-2">
                        <strong>Current Bed:</strong><br>
                        {{ object.admission.bed|default:"Not assigned" }}
                    </div>
                    
                    <div class="mb-2">
                        <strong>Admission Type:</strong><br>
                        {{ object.admission.get_admission_type_display }}
                    </div>
                    
                    <div class="mb-2">
                        <strong>Insurance:</strong><br>
                        {{ object.admission.insurance_information|default:"Not provided" }}
                    </div>
                </div>
            </div>
        </div>
        <!-- END panel -->
        {% endif %}
    </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,
        endDate: new Date()
    });

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

    // 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
    $('#discharge-form').on('submit', function(e) {
        var isValid = true;
        var requiredFields = ['admission', 'discharge_type', 'discharge_date', 'discharge_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');
        }
    });

    // Load admission details when admission is selected
    $('select[name="admission"]').on('change', function() {
        var admissionId = $(this).val();
        if (admissionId) {
            $.ajax({
                url: '{% url "inpatients:admission_detail_api" 0 %}'.replace('0', admissionId),
                success: function(data) {
                    // Pre-fill attending physician if available
                    if (data.attending_physician) {
                        $('select[name="attending_physician"]').val(data.attending_physician).trigger('change');
                    }
                    
                    // Show admission information
                    toastr.info('Admission details loaded: ' + data.patient_name);
                },
                error: function() {
                    toastr.warning('Could not load admission details');
                }
            });
        }
    });

    // Auto-populate current date and time
    if (!$('input[name="discharge_date"]').val()) {
        $('input[name="discharge_date"]').val(new Date().toISOString().split('T')[0]);
    }
    
    if (!$('input[name="discharge_time"]').val()) {
        var now = new Date();
        var time = now.getHours().toString().padStart(2, '0') + ':' + 
                   now.getMinutes().toString().padStart(2, '0');
        $('input[name="discharge_time"]').val(time);
    }

    // Discharge type change handler
    $('select[name="discharge_type"]').on('change', function() {
        var dischargeType = $(this).val();
        
        // Show/hide relevant fields based on discharge type
        if (dischargeType === 'transfer') {
            $('input[name="discharge_destination"]').closest('.col-md-6').show();
            $('input[name="discharge_destination"]').attr('required', true);
        } else if (dischargeType === 'ama') {
            // Show warning for AMA discharge
            if (!$('.ama-warning').length) {
                $('<div class="alert alert-warning ama-warning mt-2">' +
                  '<strong>Against Medical Advice:</strong> Ensure proper documentation and patient acknowledgment.' +
                  '</div>').insertAfter($(this).closest('.col-md-6'));
            }
        } else {
            $('.ama-warning').remove();
        }
    });
});
</script>
{% endblock %}