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

{% block title %}{% if bed %}Edit Bed{% else %}Add New Bed{% endif %} | {{ block.super }}{% endblock %}

{% block css %}
{{ block.super }}
<link href="{% static 'plugins/select2/dist/css/select2.min.css' %}" rel="stylesheet" />
<link href="{% static 'plugins/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css' %}" rel="stylesheet" />
<style>
    .help-sidebar {
        background-color: rgba(45, 53, 60, 0.05);
        border-radius: 5px;
        padding: 15px;
        margin-bottom: 20px;
    }
    .help-sidebar h5 {
        border-bottom: 1px solid #ddd;
        padding-bottom: 10px;
        margin-bottom: 15px;
    }
    .help-sidebar ul {
        padding-left: 20px;
    }
    .form-label .badge {
        font-size: 0.65rem;
        vertical-align: middle;
    }
    .bed-type-info {
        display: none;
        margin-top: 10px;
        padding: 10px;
        border-radius: 5px;
        background-color: rgba(45, 53, 60, 0.05);
    }
    .bed-type-info.active {
        display: block;
    }
</style>
{% endblock %}

{% block breadcrumb %}
<ol class="breadcrumb float-xl-end">
    <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Home</a></li>
    <li class="breadcrumb-item"><a href="{% url 'inpatients:dashboard' %}">Inpatients</a></li>
    <li class="breadcrumb-item"><a href="{% url 'inpatients:bed_management' %}">Bed Management</a></li>
    <li class="breadcrumb-item active">{% if bed %}Edit Bed{% else %}Add New Bed{% endif %}</li>
</ol>
{% endblock %}

{% block page_header %}
<h1 class="page-header">{% if bed %}Edit Bed{% else %}Add New Bed{% endif %} <small>Manage bed information</small></h1>
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-xl-8">
        <div class="panel panel-inverse">
            <div class="panel-heading">
                <h4 class="panel-title">{% if bed %}Edit Bed: {{ bed.bed_number }} ({{ bed.ward.name }}){% else %}Add New Bed{% endif %}</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-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
                </div>
            </div>
            <div class="panel-body">
                <form method="post" id="bedForm">
                    {% csrf_token %}
                    
                    {% if form.errors %}
                    <div class="alert alert-danger">
                        <h5><i class="fa fa-exclamation-circle"></i> Please correct the following errors:</h5>
                        <ul>
                            {% for field in form %}
                                {% for error in field.errors %}
                                    <li><strong>{{ field.label }}:</strong> {{ error }}</li>
                                {% endfor %}
                            {% endfor %}
                            {% for error in form.non_field_errors %}
                                <li>{{ error }}</li>
                            {% endfor %}
                        </ul>
                    </div>
                    {% endif %}
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="{{ form.ward.id_for_label }}" class="form-label">Ward <span class="text-danger">*</span></label>
                            {{ form.ward }}
                            {% if form.ward.help_text %}
                            <div class="form-text">{{ form.ward.help_text }}</div>
                            {% endif %}
                        </div>
                        
                        <div class="col-md-3 mb-3">
                            <label for="{{ form.room_number.id_for_label }}" class="form-label">Room Number <span class="text-danger">*</span></label>
                            {{ form.room_number }}
                            {% if form.room_number.help_text %}
                            <div class="form-text">{{ form.room_number.help_text }}</div>
                            {% endif %}
                        </div>
                        
                        <div class="col-md-3 mb-3">
                            <label for="{{ form.bed_number.id_for_label }}" class="form-label">Bed Number <span class="text-danger">*</span></label>
                            {{ form.bed_number }}
                            {% if form.bed_number.help_text %}
                            <div class="form-text">{{ form.bed_number.help_text }}</div>
                            {% endif %}
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="{{ form.bed_type.id_for_label }}" class="form-label">Bed Type <span class="text-danger">*</span></label>
                            {{ form.bed_type }}
                            {% if form.bed_type.help_text %}
                            <div class="form-text">{{ form.bed_type.help_text }}</div>
                            {% endif %}
                            
                            <!-- Bed Type Info Boxes -->
                            <div id="standard-info" class="bed-type-info">
                                <p><strong>Standard Bed:</strong> Regular hospital bed suitable for most patients.</p>
                            </div>
                            <div id="bariatric-info" class="bed-type-info">
                                <p><strong>Bariatric Bed:</strong> Reinforced bed designed for patients with higher weight requirements.</p>
                            </div>
                            <div id="pediatric-info" class="bed-type-info">
                                <p><strong>Pediatric Bed:</strong> Specialized bed with safety features for children.</p>
                            </div>
                            <div id="icu-info" class="bed-type-info">
                                <p><strong>ICU Bed:</strong> Advanced bed with monitoring capabilities for critical care.</p>
                            </div>
                            <div id="labor-info" class="bed-type-info">
                                <p><strong>Labor & Delivery Bed:</strong> Specialized bed for obstetric patients.</p>
                            </div>
                            <div id="stretcher-info" class="bed-type-info">
                                <p><strong>Stretcher:</strong> Mobile bed for temporary patient placement or transport.</p>
                            </div>
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label for="{{ form.room_type.id_for_label }}" class="form-label">Room Type <span class="text-danger">*</span></label>
                            {{ form.room_type }}
                            {% if form.room_type.help_text %}
                            <div class="form-text">{{ form.room_type.help_text }}</div>
                            {% endif %}
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="{{ form.status.id_for_label }}" class="form-label">Status <span class="text-danger">*</span></label>
                            {{ form.status }}
                            {% if form.status.help_text %}
                            <div class="form-text">{{ form.status.help_text }}</div>
                            {% endif %}
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label class="form-label d-block">Features</label>
                            <div class="form-check form-check-inline">
                                {{ form.is_isolation_capable }}
                                <label class="form-check-label" for="{{ form.is_isolation_capable.id_for_label }}">
                                    Isolation Capable
                                </label>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="{{ form.equipment.id_for_label }}" class="form-label">Equipment</label>
                        {{ form.equipment }}
                        <div class="form-text">List any permanent equipment attached to this bed (e.g., ventilator, monitors).</div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="{{ form.features.id_for_label }}" class="form-label">Additional Features</label>
                        {{ form.features }}
                        <div class="form-text">Describe any additional features of this bed (e.g., pressure relief mattress, built-in scale).</div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="{{ form.notes.id_for_label }}" class="form-label">Notes</label>
                        {{ form.notes }}
                        <div class="form-text">Any additional information about this bed.</div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <a href="{% url 'inpatients:bed_management' %}" class="btn btn-secondary btn-lg d-block w-100">
                                <i class="fa fa-arrow-left"></i> Cancel
                            </a>
                        </div>
                        <div class="col-md-6">
                            <button type="submit" class="btn btn-primary btn-lg d-block w-100">
                                <i class="fa fa-save"></i> {% if bed %}Update{% else %}Save{% endif %} Bed
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <div class="col-xl-4">
        <div class="panel panel-inverse">
            <div class="panel-heading">
                <h4 class="panel-title">Help & 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-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
                </div>
            </div>
            <div class="panel-body">
                <div class="help-sidebar">
                    <h5><i class="fa fa-info-circle"></i> Bed Information</h5>
                    <p>Each bed must have a unique combination of ward, room number, and bed number.</p>
                    <ul>
                        <li><strong>Ward:</strong> The ward where this bed is located.</li>
                        <li><strong>Room Number:</strong> The room identifier within the ward.</li>
                        <li><strong>Bed Number:</strong> The unique identifier for this bed within the room.</li>
                    </ul>
                </div>
                
                <div class="help-sidebar">
                    <h5><i class="fa fa-bed"></i> Bed Types</h5>
                    <p>Select the appropriate bed type based on patient needs:</p>
                    <ul>
                        <li><strong>Standard:</strong> Regular hospital bed for most patients</li>
                        <li><strong>Bariatric:</strong> Reinforced bed for patients with higher weight requirements</li>
                        <li><strong>Pediatric:</strong> Specialized bed with safety features for children</li>
                        <li><strong>ICU:</strong> Advanced bed with monitoring capabilities</li>
                        <li><strong>Labor & Delivery:</strong> Specialized bed for obstetric patients</li>
                        <li><strong>Stretcher:</strong> Mobile bed for temporary placement</li>
                    </ul>
                </div>
                
                <div class="help-sidebar">
                    <h5><i class="fa fa-door-open"></i> Room Types</h5>
                    <p>Room types determine billing and patient placement:</p>
                    <ul>
                        <li><strong>Private:</strong> Single-occupancy room</li>
                        <li><strong>Semi-Private:</strong> Two-bed room</li>
                        <li><strong>Ward:</strong> Multi-bed room (3+ beds)</li>
                        <li><strong>Isolation:</strong> Room for patients requiring isolation</li>
                        <li><strong>Negative Pressure:</strong> Specialized room for infection control</li>
                        <li><strong>VIP:</strong> Enhanced amenities room</li>
                    </ul>
                </div>
                
                <div class="help-sidebar">
                    <h5><i class="fa fa-exclamation-triangle"></i> Status Information</h5>
                    <p>Bed status affects availability for patient assignment:</p>
                    <ul>
                        <li><strong>Available:</strong> Ready for patient assignment</li>
                        <li><strong>Occupied:</strong> Currently assigned to a patient</li>
                        <li><strong>Reserved:</strong> Reserved for upcoming admission</li>
                        <li><strong>Cleaning:</strong> Being cleaned after discharge</li>
                        <li><strong>Maintenance:</strong> Undergoing repairs or maintenance</li>
                        <li><strong>Blocked:</strong> Temporarily unavailable for assignment</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
{{ block.super }}
<script src="{% static 'plugins/select2/dist/js/select2.min.js' %}"></script>
<script>
    $(document).ready(function() {
        // Initialize Select2
        $('.form-select').select2({
            placeholder: "Select an option",
            allowClear: true
        });
        
        // Show bed type info when selected
        $('#{{ form.bed_type.id_for_label }}').change(function() {
            // Hide all info boxes
            $('.bed-type-info').removeClass('active');
            
            // Show the selected one
            var selectedType = $(this).val().toLowerCase();
            $('#' + selectedType + '-info').addClass('active');
        });
        
        // Trigger change to show initial selection
        $('#{{ form.bed_type.id_for_label }}').trigger('change');
        
        // Form validation
        $('#bedForm').submit(function(e) {
            var isValid = true;
            
            // Required fields
            var requiredFields = ['#{{ form.ward.id_for_label }}', '#{{ form.room_number.id_for_label }}', 
                                 '#{{ form.bed_number.id_for_label }}', '#{{ form.bed_type.id_for_label }}',
                                 '#{{ form.room_type.id_for_label }}', '#{{ form.status.id_for_label }}'];
            
            $.each(requiredFields, function(index, field) {
                if ($(field).val() === '' || $(field).val() === null) {
                    $(field).addClass('is-invalid');
                    isValid = false;
                } else {
                    $(field).removeClass('is-invalid');
                }
            });
            
            if (!isValid) {
                e.preventDefault();
                $('html, body').animate({
                    scrollTop: $('.is-invalid:first').offset().top - 100
                }, 200);
            }
        });
    });
</script>
{% endblock %}