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

{% block title %}{% if object %}Edit Ward{% else %}Add Ward{% endif %} - {{ block.super }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-1">
                {% if object %}
                    <i class="fas fa-edit me-2"></i>Edit Ward
                {% else %}
                    <i class="fas fa-hospital me-2"></i>Add Ward
                {% endif %}
            </h1>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="{% url 'inpatients:dashboard' %}">Inpatients</a></li>
                    <li class="breadcrumb-item"><a href="{% url 'inpatients:ward_list' %}">Wards</a></li>
                    {% if object %}
                        <li class="breadcrumb-item"><a href="{% url 'inpatients:ward_detail' object.pk %}">{{ object.name }}</a></li>
                        <li class="breadcrumb-item active">Edit</li>
                    {% else %}
                        <li class="breadcrumb-item active">Add</li>
                    {% endif %}
                </ol>
            </nav>
        </div>
        <div class="btn-group">
            <a href="{% if object %}{% url 'inpatients:ward_detail' object.pk %}{% else %}{% url 'inpatients:ward_list' %}{% endif %}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-2"></i>Back
            </a>
        </div>
    </div>

    <form method="post" novalidate>
        {% csrf_token %}
        
        <div class="row">
            <!-- Main Form -->
            <div class="col-lg-8">
                <!-- Basic Information -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-info-circle me-2"></i>Basic Information
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="{{ form.ward_id.id_for_label }}" class="form-label">
                                        Ward ID <span class="text-danger">*</span>
                                    </label>
                                    {{ form.ward_id }}
                                    {% if form.ward_id.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.ward_id.errors.0 }}
                                        </div>
                                    {% endif %}
                                    <div class="form-text">Unique identifier for the ward</div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="{{ form.name.id_for_label }}" class="form-label">
                                        Ward Name <span class="text-danger">*</span>
                                    </label>
                                    {{ form.name }}
                                    {% if form.name.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.name.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="{{ form.ward_type.id_for_label }}" class="form-label">
                                        Ward Type <span class="text-danger">*</span>
                                    </label>
                                    {{ form.ward_type }}
                                    {% if form.ward_type.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.ward_type.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="{{ form.specialty.id_for_label }}" class="form-label">
                                        Medical Specialty <span class="text-danger">*</span>
                                    </label>
                                    {{ form.specialty }}
                                    {% if form.specialty.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.specialty.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label for="{{ form.description.id_for_label }}" class="form-label">
                                Description
                            </label>
                            {{ form.description }}
                            {% if form.description.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.description.errors.0 }}
                                </div>
                            {% endif %}
                            <div class="form-text">Brief description of the ward's purpose and services</div>
                        </div>
                    </div>
                </div>

                <!-- Capacity Configuration -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-bed me-2"></i>Capacity Configuration
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="mb-3">
                                    <label for="{{ form.total_beds.id_for_label }}" class="form-label">
                                        Total Beds <span class="text-danger">*</span>
                                    </label>
                                    {{ form.total_beds }}
                                    {% if form.total_beds.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.total_beds.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="mb-3">
                                    <label for="{{ form.private_rooms.id_for_label }}" class="form-label">
                                        Private Rooms
                                    </label>
                                    {{ form.private_rooms }}
                                    {% if form.private_rooms.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.private_rooms.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="mb-3">
                                    <label for="{{ form.semi_private_rooms.id_for_label }}" class="form-label">
                                        Semi-Private Rooms
                                    </label>
                                    {{ form.semi_private_rooms }}
                                    {% if form.semi_private_rooms.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.semi_private_rooms.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="mb-3">
                                    <label for="{{ form.shared_rooms.id_for_label }}" class="form-label">
                                        Shared Rooms
                                    </label>
                                    {{ form.shared_rooms }}
                                    {% if form.shared_rooms.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.shared_rooms.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        
                        <div class="alert alert-info" role="alert">
                            <i class="fas fa-info-circle me-2"></i>
                            <strong>Note:</strong> The sum of private, semi-private, and shared rooms should equal the total number of beds.
                        </div>
                    </div>
                </div>

                <!-- Location and Management -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-map-marker-alt me-2"></i>Location and Management
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="{{ form.building.id_for_label }}" class="form-label">
                                        Building
                                    </label>
                                    {{ form.building }}
                                    {% if form.building.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.building.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="{{ form.floor.id_for_label }}" class="form-label">
                                        Floor
                                    </label>
                                    {{ form.floor }}
                                    {% if form.floor.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.floor.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="{{ form.wing.id_for_label }}" class="form-label">
                                        Wing/Section
                                    </label>
                                    {{ form.wing }}
                                    {% if form.wing.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.wing.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="{{ form.nurse_manager.id_for_label }}" class="form-label">
                                        Nurse Manager
                                    </label>
                                    {{ form.nurse_manager }}
                                    {% if form.nurse_manager.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.nurse_manager.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="{{ form.phone_extension.id_for_label }}" class="form-label">
                                        Phone Extension
                                    </label>
                                    {{ form.phone_extension }}
                                    {% if form.phone_extension.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.phone_extension.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Features and Equipment -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-cogs me-2"></i>Features and Equipment
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <h6 class="mb-3">Ward Features</h6>
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="checkbox" id="has_isolation_rooms" name="has_isolation_rooms" 
                                           {% if form.has_isolation_rooms.value %}checked{% endif %}>
                                    <label class="form-check-label" for="has_isolation_rooms">
                                        Isolation Rooms Available
                                    </label>
                                </div>
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="checkbox" id="has_telemetry" name="has_telemetry"
                                           {% if form.has_telemetry.value %}checked{% endif %}>
                                    <label class="form-check-label" for="has_telemetry">
                                        Telemetry Monitoring
                                    </label>
                                </div>
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="checkbox" id="has_oxygen" name="has_oxygen"
                                           {% if form.has_oxygen.value %}checked{% endif %}>
                                    <label class="form-check-label" for="has_oxygen">
                                        Oxygen Supply
                                    </label>
                                </div>
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="checkbox" id="has_suction" name="has_suction"
                                           {% if form.has_suction.value %}checked{% endif %}>
                                    <label class="form-check-label" for="has_suction">
                                        Suction Equipment
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <h6 class="mb-3">Additional Equipment</h6>
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="checkbox" id="has_nurse_call" name="has_nurse_call"
                                           {% if form.has_nurse_call.value %}checked{% endif %}>
                                    <label class="form-check-label" for="has_nurse_call">
                                        Nurse Call System
                                    </label>
                                </div>
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="checkbox" id="has_wifi" name="has_wifi"
                                           {% if form.has_wifi.value %}checked{% endif %}>
                                    <label class="form-check-label" for="has_wifi">
                                        WiFi Access
                                    </label>
                                </div>
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="checkbox" id="has_tv" name="has_tv"
                                           {% if form.has_tv.value %}checked{% endif %}>
                                    <label class="form-check-label" for="has_tv">
                                        Television
                                    </label>
                                </div>
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="checkbox" id="has_family_area" name="has_family_area"
                                           {% if form.has_family_area.value %}checked{% endif %}>
                                    <label class="form-check-label" for="has_family_area">
                                        Family Waiting Area
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Sidebar -->
            <div class="col-lg-4">
                <!-- Form Actions -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-cog me-2"></i>Actions
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save me-2"></i>
                                {% if object %}Update Ward{% else %}Create Ward{% endif %}
                            </button>
                            <a href="{% if object %}{% url 'inpatients:ward_detail' object.pk %}{% else %}{% url 'inpatients:ward_list' %}{% endif %}" class="btn btn-outline-secondary">
                                <i class="fas fa-times me-2"></i>Cancel
                            </a>
                            <button type="button" class="btn btn-outline-info" onclick="clearForm()">
                                <i class="fas fa-eraser me-2"></i>Clear Form
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Ward Type Guide -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-question-circle me-2"></i>Ward Type Guide
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="accordion" id="wardTypeGuide">
                            <div class="accordion-item">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#generalWards">
                                        General Wards
                                    </button>
                                </h2>
                                <div id="generalWards" class="accordion-collapse collapse" data-bs-parent="#wardTypeGuide">
                                    <div class="accordion-body">
                                        <ul class="list-unstyled mb-0">
                                            <li><strong>General Medical:</strong> General medical patients</li>
                                            <li><strong>Surgical:</strong> Post-operative patients</li>
                                            <li><strong>Emergency:</strong> Emergency department patients</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="accordion-item">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#specialtyWards">
                                        Specialty Wards
                                    </button>
                                </h2>
                                <div id="specialtyWards" class="accordion-collapse collapse" data-bs-parent="#wardTypeGuide">
                                    <div class="accordion-body">
                                        <ul class="list-unstyled mb-0">
                                            <li><strong>ICU:</strong> Intensive care patients</li>
                                            <li><strong>CCU:</strong> Cardiac care patients</li>
                                            <li><strong>NICU:</strong> Neonatal intensive care</li>
                                            <li><strong>Maternity:</strong> Obstetric patients</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Capacity Calculator -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-calculator me-2"></i>Capacity Calculator
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label class="form-label">Room Distribution</label>
                            <div class="progress mb-2" style="height: 20px;">
                                <div class="progress-bar bg-success" id="private-bar" style="width: 0%"></div>
                                <div class="progress-bar bg-info" id="semi-private-bar" style="width: 0%"></div>
                                <div class="progress-bar bg-warning" id="shared-bar" style="width: 0%"></div>
                            </div>
                            <div class="d-flex justify-content-between">
                                <small><span class="badge bg-success">Private</span> <span id="private-count">0</span></small>
                                <small><span class="badge bg-info">Semi-Private</span> <span id="semi-private-count">0</span></small>
                                <small><span class="badge bg-warning">Shared</span> <span id="shared-count">0</span></small>
                            </div>
                        </div>
                        
                        <div class="alert alert-sm" id="capacity-alert" style="display: none;">
                            <i class="fas fa-exclamation-triangle me-2"></i>
                            <span id="capacity-message"></span>
                        </div>
                        
                        <div class="text-center">
                            <h6>Total Beds: <span id="total-calculated">0</span></h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<script>
// Ward form functionality
document.addEventListener('DOMContentLoaded', function() {
    // Add Bootstrap classes to form elements
    const form = document.querySelector('form');
    const inputs = form.querySelectorAll('input, select, textarea');
    
    inputs.forEach(input => {
        if (!input.classList.contains('form-control') && !input.classList.contains('form-select') && !input.classList.contains('form-check-input')) {
            if (input.tagName === 'SELECT') {
                input.classList.add('form-select');
            } else if (input.type !== 'checkbox') {
                input.classList.add('form-control');
            }
        }
    });
    
    // Initialize capacity calculator
    updateCapacityCalculator();
    
    // Add event listeners for capacity inputs
    ['total_beds', 'private_rooms', 'semi_private_rooms', 'shared_rooms'].forEach(fieldName => {
        const field = document.getElementById(`id_${fieldName}`);
        if (field) {
            field.addEventListener('input', updateCapacityCalculator);
        }
    });
});

function updateCapacityCalculator() {
    const totalBeds = parseInt(document.getElementById('id_total_beds').value) || 0;
    const privateRooms = parseInt(document.getElementById('id_private_rooms').value) || 0;
    const semiPrivateRooms = parseInt(document.getElementById('id_semi_private_rooms').value) || 0;
    const sharedRooms = parseInt(document.getElementById('id_shared_rooms').value) || 0;
    
    const calculatedTotal = privateRooms + semiPrivateRooms + sharedRooms;
    
    // Update progress bar
    if (totalBeds > 0) {
        const privatePercent = (privateRooms / totalBeds) * 100;
        const semiPrivatePercent = (semiPrivateRooms / totalBeds) * 100;
        const sharedPercent = (sharedRooms / totalBeds) * 100;
        
        document.getElementById('private-bar').style.width = privatePercent + '%';
        document.getElementById('semi-private-bar').style.width = semiPrivatePercent + '%';
        document.getElementById('shared-bar').style.width = sharedPercent + '%';
    }
    
    // Update counts
    document.getElementById('private-count').textContent = privateRooms;
    document.getElementById('semi-private-count').textContent = semiPrivateRooms;
    document.getElementById('shared-count').textContent = sharedRooms;
    document.getElementById('total-calculated').textContent = calculatedTotal;
    
    // Show alert if mismatch
    const alert = document.getElementById('capacity-alert');
    const message = document.getElementById('capacity-message');
    
    if (calculatedTotal !== totalBeds && totalBeds > 0) {
        alert.style.display = 'block';
        alert.className = 'alert alert-sm alert-warning';
        message.textContent = `Room distribution (${calculatedTotal}) doesn't match total beds (${totalBeds})`;
    } else if (calculatedTotal === totalBeds && totalBeds > 0) {
        alert.style.display = 'block';
        alert.className = 'alert alert-sm alert-success';
        message.textContent = 'Room distribution matches total beds';
    } else {
        alert.style.display = 'none';
    }
}

function clearForm() {
    if (confirm('Are you sure you want to clear all form data?')) {
        const form = document.querySelector('form');
        const inputs = form.querySelectorAll('input, select, textarea');
        
        inputs.forEach(input => {
            if (input.type !== 'hidden' && input.name !== 'csrfmiddlewaretoken') {
                if (input.type === 'checkbox') {
                    input.checked = false;
                } else {
                    input.value = '';
                }
            }
        });
        
        updateCapacityCalculator();
    }
}

// Form submission with loading state
document.querySelector('form').addEventListener('submit', function() {
    const submitBtn = document.querySelector('button[type="submit"]');
    const originalText = submitBtn.innerHTML;
    
    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Saving...';
    submitBtn.disabled = true;
    
    // Re-enable if form validation fails
    setTimeout(() => {
        if (document.querySelector('.is-invalid')) {
            submitBtn.innerHTML = originalText;
            submitBtn.disabled = false;
        }
    }, 100);
});

// Real-time validation
document.querySelectorAll('input[required], select[required]').forEach(input => {
    input.addEventListener('blur', function() {
        if (this.value.trim() === '') {
            this.classList.add('is-invalid');
        } else {
            this.classList.remove('is-invalid');
        }
    });
    
    input.addEventListener('input', function() {
        if (this.classList.contains('is-invalid') && this.value.trim() !== '') {
            this.classList.remove('is-invalid');
        }
    });
});
</script>

<style>
.is-invalid {
    border-color: #dc3545;
}

.invalid-feedback {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: #dc3545;
}

.accordion-button:not(.collapsed) {
    background-color: #e7f1ff;
    color: #0d6efd;
}

.text-danger {
    color: #dc3545 !important;
}

.alert-sm {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
}

.progress {
    background-color: #e9ecef;
}

.form-check-label {
    cursor: pointer;
}

@media (max-width: 768px) {
    .row.mb-4 .col-md-3,
    .row.mb-4 .col-md-4,
    .row.mb-4 .col-md-6 {
        margin-bottom: 1rem;
    }
    
    .d-flex.justify-content-between {
        flex-direction: column;
        gap: 0.5rem;
    }
}
</style>
{% endblock %}