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

{% block title %}Bed Assignment - {{ block.super }}{% endblock %}

{% block css %}
<style>
.assignment-wizard {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 30px;
    margin-bottom: 30px;
}
.step-indicator {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}
.step {
    display: flex;
    align-items: center;
    margin: 0 20px;
}
.step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #dee2e6;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-right: 10px;
}
.step.active .step-number {
    background: #007bff;
    color: white;
}
.step.completed .step-number {
    background: #28a745;
    color: white;
}
.patient-card {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin: 15px 0;
    border-left: 4px solid #007bff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.bed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    margin: 20px 0;
}
.bed-option {
    border: 2px solid #dee2e6;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
}
.bed-option:hover {
    border-color: #007bff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.bed-option.selected {
    border-color: #007bff;
    background: #e3f2fd;
}
.bed-available { border-left: 4px solid #28a745; }
.bed-preferred { border-left: 4px solid #007bff; }
.bed-isolation { border-left: 4px solid #ffc107; }
.priority-high { border-left-color: #dc3545; }
.priority-medium { border-left-color: #ffc107; }
.priority-low { border-left-color: #28a745; }
.assignment-summary {
    background: #e8f5e8;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
}
.criteria-list {
    background: white;
    border-radius: 8px;
    padding: 15px;
    margin: 15px 0;
}
.criteria-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}
.criteria-item:last-child {
    border-bottom: none;
}
.match-indicator {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: bold;
}
.match-yes { background: #d4edda; color: #155724; }
.match-no { background: #f8d7da; color: #721c24; }
.match-partial { background: #fff3cd; color: #856404; }
</style>
{% endblock %}

{% block content %}
<div class="content">
    <div class="container-fluid">
        <!-- Page Header -->
        <div class="row">
            <div class="col-12">
                <div class="page-header">
                    <div class="page-title">
                        <h4><i class="fas fa-bed"></i> Bed Assignment</h4>
                        <h6>Assign patients to appropriate beds</h6>
                    </div>
                    <div class="page-btn">
                        <a href="{% url 'inpatients:admission_list' %}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left"></i> Back to Admissions
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Assignment Wizard -->
        <div class="row">
            <div class="col-12">
                <div class="assignment-wizard">
                    <div class="step-indicator">
                        <div class="step completed">
                            <div class="step-number">1</div>
                            <div class="step-label">Patient Selection</div>
                        </div>
                        <div class="step active">
                            <div class="step-number">2</div>
                            <div class="step-label">Bed Selection</div>
                        </div>
                        <div class="step">
                            <div class="step-number">3</div>
                            <div class="step-label">Confirmation</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Patient Information -->
        <div class="row">
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header">
                        <h5><i class="fas fa-user"></i> Patient Information</h5>
                    </div>
                    <div class="card-body">
                        <div class="patient-card priority-high">
                            <h6><strong>Sarah Johnson</strong></h6>
                            <p><strong>MRN:</strong> MRN789012</p>
                            <p><strong>Age:</strong> 45 years</p>
                            <p><strong>Gender:</strong> Female</p>
                            <p><strong>Admission Type:</strong> Emergency</p>
                            <p><strong>Primary Diagnosis:</strong> Acute Chest Pain</p>
                            <p><strong>Attending Physician:</strong> Dr. Smith</p>
                            <div class="mt-3">
                                <span class="badge bg-danger">High Priority</span>
                                <span class="badge bg-warning">Isolation Required</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card mt-3">
                    <div class="card-header">
                        <h5><i class="fas fa-list-check"></i> Assignment Criteria</h5>
                    </div>
                    <div class="card-body">
                        <div class="criteria-list">
                            <div class="criteria-item">
                                <span>Gender Preference</span>
                                <span class="match-indicator match-yes">Female Ward</span>
                            </div>
                            <div class="criteria-item">
                                <span>Isolation Required</span>
                                <span class="match-indicator match-yes">Available</span>
                            </div>
                            <div class="criteria-item">
                                <span>Cardiac Monitoring</span>
                                <span class="match-indicator match-yes">Required</span>
                            </div>
                            <div class="criteria-item">
                                <span>Specialty Unit</span>
                                <span class="match-indicator match-partial">Cardiology Preferred</span>
                            </div>
                            <div class="criteria-item">
                                <span>Insurance Coverage</span>
                                <span class="match-indicator match-yes">Private Room</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        <h5><i class="fas fa-hospital"></i> Available Beds</h5>
                        <div class="card-tools">
                            <div class="legend">
                                <span class="badge bg-success me-2">Available</span>
                                <span class="badge bg-primary me-2">Preferred Match</span>
                                <span class="badge bg-warning">Isolation Capable</span>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <!-- Filter Options -->
                        <div class="row mb-3">
                            <div class="col-md-4">
                                <select class="form-control" id="wardFilter">
                                    <option value="">All Wards</option>
                                    <option value="cardiology">Cardiology</option>
                                    <option value="icu">ICU</option>
                                    <option value="surgery">Surgery</option>
                                    <option value="general">General Medicine</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <select class="form-control" id="roomTypeFilter">
                                    <option value="">All Room Types</option>
                                    <option value="private">Private Room</option>
                                    <option value="semi-private">Semi-Private</option>
                                    <option value="ward">Ward</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="isolationOnly">
                                    <label class="form-check-label" for="isolationOnly">
                                        Isolation Capable Only
                                    </label>
                                </div>
                            </div>
                        </div>

                        <!-- Bed Options -->
                        <div class="bed-grid">
                            <div class="bed-option bed-preferred" data-bed="C201">
                                <h6>Room C201</h6>
                                <p><strong>Cardiology Ward</strong></p>
                                <p>Private Room</p>
                                <p>Cardiac Monitoring</p>
                                <div class="mt-2">
                                    <span class="badge bg-success">Available</span>
                                    <span class="badge bg-primary">Best Match</span>
                                </div>
                                <div class="mt-2">
                                    <small class="text-muted">Last cleaned: 2 hours ago</small>
                                </div>
                            </div>

                            <div class="bed-option bed-isolation" data-bed="I105">
                                <h6>Room I105</h6>
                                <p><strong>Isolation Unit</strong></p>
                                <p>Private Room</p>
                                <p>Negative Pressure</p>
                                <div class="mt-2">
                                    <span class="badge bg-success">Available</span>
                                    <span class="badge bg-warning">Isolation</span>
                                </div>
                                <div class="mt-2">
                                    <small class="text-muted">Last cleaned: 1 hour ago</small>
                                </div>
                            </div>

                            <div class="bed-option bed-available" data-bed="G301">
                                <h6>Room G301</h6>
                                <p><strong>General Medicine</strong></p>
                                <p>Semi-Private Room</p>
                                <p>Basic Monitoring</p>
                                <div class="mt-2">
                                    <span class="badge bg-success">Available</span>
                                </div>
                                <div class="mt-2">
                                    <small class="text-muted">Last cleaned: 30 minutes ago</small>
                                </div>
                            </div>

                            <div class="bed-option bed-preferred" data-bed="C203">
                                <h6>Room C203</h6>
                                <p><strong>Cardiology Ward</strong></p>
                                <p>Semi-Private Room</p>
                                <p>Cardiac Monitoring</p>
                                <div class="mt-2">
                                    <span class="badge bg-success">Available</span>
                                    <span class="badge bg-primary">Good Match</span>
                                </div>
                                <div class="mt-2">
                                    <small class="text-muted">Last cleaned: 3 hours ago</small>
                                </div>
                            </div>

                            <div class="bed-option bed-available" data-bed="S401">
                                <h6>Room S401</h6>
                                <p><strong>Surgery Ward</strong></p>
                                <p>Private Room</p>
                                <p>Post-op Monitoring</p>
                                <div class="mt-2">
                                    <span class="badge bg-success">Available</span>
                                </div>
                                <div class="mt-2">
                                    <small class="text-muted">Last cleaned: 4 hours ago</small>
                                </div>
                            </div>

                            <div class="bed-option bed-available" data-bed="G302">
                                <h6>Room G302</h6>
                                <p><strong>General Medicine</strong></p>
                                <p>Ward Bed</p>
                                <p>Basic Care</p>
                                <div class="mt-2">
                                    <span class="badge bg-success">Available</span>
                                </div>
                                <div class="mt-2">
                                    <small class="text-muted">Last cleaned: 1 hour ago</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Assignment Summary -->
        <div class="row" id="assignmentSummary" style="display: none;">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5><i class="fas fa-check-circle"></i> Assignment Summary</h5>
                    </div>
                    <div class="card-body">
                        <div class="assignment-summary">
                            <div class="row">
                                <div class="col-md-6">
                                    <h6>Patient Details:</h6>
                                    <p><strong>Name:</strong> Sarah Johnson</p>
                                    <p><strong>MRN:</strong> MRN789012</p>
                                    <p><strong>Admission Type:</strong> Emergency</p>
                                    <p><strong>Priority:</strong> High</p>
                                </div>
                                <div class="col-md-6">
                                    <h6>Bed Assignment:</h6>
                                    <p><strong>Room:</strong> <span id="selectedRoom">-</span></p>
                                    <p><strong>Ward:</strong> <span id="selectedWard">-</span></p>
                                    <p><strong>Room Type:</strong> <span id="selectedRoomType">-</span></p>
                                    <p><strong>Special Features:</strong> <span id="selectedFeatures">-</span></p>
                                </div>
                            </div>
                            <div class="row mt-3">
                                <div class="col-12">
                                    <h6>Assignment Notes:</h6>
                                    <textarea class="form-control" rows="3" placeholder="Enter any special instructions or notes for this assignment..."></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Action Buttons -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body text-center">
                        <button type="button" class="btn btn-success btn-lg me-3" id="confirmAssignment" disabled>
                            <i class="fas fa-check"></i> Confirm Assignment
                        </button>
                        <button type="button" class="btn btn-warning btn-lg me-3">
                            <i class="fas fa-clock"></i> Schedule Later
                        </button>
                        <button type="button" class="btn btn-info btn-lg me-3">
                            <i class="fas fa-list"></i> View Waiting List
                        </button>
                        <button type="button" class="btn btn-secondary btn-lg">
                            <i class="fas fa-times"></i> Cancel
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
<script>
$(document).ready(function() {
    var selectedBed = null;
    
    // Bed selection handler
    $('.bed-option').click(function() {
        $('.bed-option').removeClass('selected');
        $(this).addClass('selected');
        
        selectedBed = $(this).data('bed');
        var roomText = $(this).find('h6').text();
        var wardText = $(this).find('p:first').text();
        var roomTypeText = $(this).find('p:nth-child(3)').text();
        var featuresText = $(this).find('p:nth-child(4)').text();
        
        // Update summary
        $('#selectedRoom').text(roomText);
        $('#selectedWard').text(wardText);
        $('#selectedRoomType').text(roomTypeText);
        $('#selectedFeatures').text(featuresText);
        
        // Show summary and enable confirm button
        $('#assignmentSummary').show();
        $('#confirmAssignment').prop('disabled', false);
        
        // Update step indicator
        $('.step').removeClass('active');
        $('.step:last').addClass('active');
    });
    
    // Filter functionality
    $('#wardFilter, #roomTypeFilter').change(function() {
        filterBeds();
    });
    
    $('#isolationOnly').change(function() {
        filterBeds();
    });
    
    function filterBeds() {
        var wardFilter = $('#wardFilter').val().toLowerCase();
        var roomTypeFilter = $('#roomTypeFilter').val().toLowerCase();
        var isolationOnly = $('#isolationOnly').is(':checked');
        
        $('.bed-option').each(function() {
            var bedWard = $(this).find('p:first').text().toLowerCase();
            var bedRoomType = $(this).find('p:nth-child(3)').text().toLowerCase();
            var hasIsolation = $(this).hasClass('bed-isolation');
            
            var showBed = true;
            
            if (wardFilter && !bedWard.includes(wardFilter)) {
                showBed = false;
            }
            
            if (roomTypeFilter && !bedRoomType.includes(roomTypeFilter)) {
                showBed = false;
            }
            
            if (isolationOnly && !hasIsolation) {
                showBed = false;
            }
            
            $(this).toggle(showBed);
        });
    }
    
    // Confirm assignment
    $('#confirmAssignment').click(function() {
        if (selectedBed) {
            if (confirm('Are you sure you want to assign Sarah Johnson to ' + $('#selectedRoom').text() + '?')) {
                // Process assignment
                alert('Bed assignment completed successfully!');
                // Redirect to admission list or patient details
                window.location.href = "{% url 'inpatients:admission_list' %}";
            }
        }
    });
    
    // Auto-select best match if available
    setTimeout(function() {
        var bestMatch = $('.bed-preferred').first();
        if (bestMatch.length) {
            bestMatch.click();
        }
    }, 1000);
});
</script>
{% endblock %}