{% extends "layouts/base.html" %}
{% load i18n static %}

{% block title %}{% trans "Select Hospital" %} - PX360{% endblock %}

{% block content %}
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <!-- Header -->
    <div class="text-center mb-8">
        <div class="mb-4">
            <img src="{% static 'img/hh-logo.png' %}" alt="Al Hammadi Hospital" class="h-20 mx-auto">
        </div>
        <h1 class="text-3xl font-bold text-navy mb-3">
            {% trans "Select Hospital" %}
        </h1>
        <p class="text-slate text-lg max-w-2xl mx-auto">
            {% trans "As a PX Admin, you can view and manage data for any hospital. Please select the hospital you want to work with:" %}
        </p>
    </div>

    <!-- Hospital Selection Form -->
    <form method="post" class="space-y-6" id="hospitalForm">
        {% csrf_token %}
        <input type="hidden" name="next" value="{{ next }}">

        {% if hospitals %}
        <!-- Hospital Cards Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {% for hospital in hospitals %}
            {% with hospital_id_str=hospital.id|stringformat:"s" %}
            <div 
                class="hospital-card group relative cursor-pointer rounded-2xl border-2 transition-all duration-200
                    {% if hospital_id_str == selected_hospital_id %}
                        border-blue bg-blue-50/50 shadow-md selected
                    {% else %}
                        border-slate-200 bg-white hover:border-blue/50 hover:-translate-y-1
                    {% endif %}"
                onclick="selectHospital('{{ hospital_id_str }}')"
                data-hospital-id="{{ hospital_id_str }}"
            >
                <input 
                    type="radio"
                    id="hospital_{{ hospital.id }}"
                    name="hospital_id"
                    value="{{ hospital.id }}"
                    {% if hospital_id_str == selected_hospital_id %}checked{% endif %}
                    class="hospital-radio sr-only"
                >
                
                <!-- Card Content -->
                <div class="p-6">
                    <!-- Selection Indicator -->
                    <div class="absolute top-4 right-4">
                        <div class="selection-indicator w-6 h-6 rounded-full border-2 flex items-center justify-center transition-all
                            {% if hospital_id_str == selected_hospital_id %}
                                border-blue bg-blue
                            {% else %}
                                border-slate-300
                            {% endif %}">
                            <i data-lucide="check" class="w-3.5 h-3.5 text-white transition-opacity
                                {% if hospital_id_str == selected_hospital_id %}
                                    opacity-100
                                {% else %}
                                    opacity-0
                                {% endif %}"></i>
                        </div>
                    </div>

                    <!-- Hospital Icon -->
                    <div class="hospital-icon w-14 h-14 rounded-xl flex items-center justify-center mb-4 transition-all
                        {% if hospital_id_str == selected_hospital_id %}
                            bg-gradient-to-br from-blue to-navy ring-4 ring-blue/20
                        {% else %}
                            bg-slate-100 group-hover:bg-blue-50
                        {% endif %}">
                        <i data-lucide="building-2" class="w-7 h-7 transition-colors
                            {% if hospital_id_str == selected_hospital_id %}
                                text-white
                            {% else %}
                                text-slate-500 group-hover:text-blue
                            {% endif %}"></i>
                    </div>

                    <!-- Hospital Name -->
                    <h3 class="hospital-name text-lg font-bold mb-2 transition-colors pr-8
                        {% if hospital_id_str == selected_hospital_id %}
                            text-blue
                        {% else %}
                            text-navy group-hover:text-blue
                        {% endif %}">
                        {{ hospital.name }}
                    </h3>

                    <!-- Location -->
                    {% if hospital.city %}
                    <div class="flex items-center gap-2 text-slate text-sm">
                        <i data-lucide="map-pin" class="w-4 h-4 text-slate/70"></i>
                        <span>
                            {{ hospital.city }}
                            {% if hospital.country %}, {{ hospital.country }}{% endif %}
                        </span>
                    </div>
                    {% else %}
                    <div class="flex items-center gap-2 text-slate/50 text-sm">
                        <i data-lucide="map-pin" class="w-4 h-4"></i>
                        <span>{% trans "Location not specified" %}</span>
                    </div>
                    {% endif %}

                    <!-- Selected Badge -->
                    <div class="selected-badge mt-4 pt-4 border-t transition-all
                        {% if hospital_id_str == selected_hospital_id %}
                            block border-blue/20
                        {% else %}
                            hidden border-slate-100
                        {% endif %}">
                        <span class="inline-flex items-center gap-1.5 text-sm font-semibold text-blue">
                            <i data-lucide="check-circle-2" class="w-4 h-4"></i>
                            {% trans "Currently Selected" %}
                        </span>
                    </div>
                </div>
            </div>
            {% endwith %}
            {% endfor %}
        </div>
        {% else %}
        <!-- Empty State -->
        <div class="bg-white rounded-2xl border border-slate-200 p-12 text-center">
            <div class="inline-flex items-center justify-center w-16 h-16 bg-amber-50 rounded-full mb-4">
                <i data-lucide="alert-triangle" class="w-8 h-8 text-amber-500"></i>
            </div>
            <h3 class="text-lg font-semibold text-navy mb-2">
                {% trans "No Hospitals Available" %}
            </h3>
            <p class="text-slate text-sm">
                {% trans "No hospitals found in the system. Please contact your administrator." %}
            </p>
        </div>
        {% endif %}

        <!-- Action Buttons -->
        {% if hospitals %}
        <div class="bg-white rounded-2xl border border-slate-200 p-6 mt-8">
            <div class="flex flex-col sm:flex-row justify-between items-center gap-4">
                <a href="/" class="w-full sm:w-auto px-6 py-3 border border-slate-200 text-slate rounded-xl font-semibold hover:bg-slate-50 transition flex items-center justify-center gap-2">
                    <i data-lucide="arrow-left" class="w-5 h-5"></i>
                    {% trans "Back to Dashboard" %}
                </a>
                <button type="submit" class="w-full sm:w-auto px-8 py-3 bg-gradient-to-r from-blue to-navy text-white rounded-xl font-semibold hover:from-navy hover:to-blue transition flex items-center justify-center gap-2 shadow-lg shadow-blue/20">
                    <i data-lucide="check" class="w-5 h-5"></i>
                    {% trans "Continue" %}
                </button>
            </div>
        </div>
        {% endif %}
    </form>

    <!-- Info Banner -->
    <div class="bg-blue-50 border border-blue-200 rounded-2xl p-4 mt-6">
        <div class="flex items-start gap-3">
            <i data-lucide="info" class="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0"></i>
            <div>
                <p class="text-sm font-semibold text-blue-800 mb-1">
                    {% trans "Tip" %}
                </p>
                <p class="text-xs text-blue-700">
                    {% trans "You can change your selected hospital at any time by clicking on the hospital name in the top navigation bar." %}
                </p>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    lucide.createIcons();
});

function selectHospital(hospitalId) {
    // Check the radio button
    const radio = document.getElementById('hospital_' + hospitalId);
    if (radio) {
        radio.checked = true;
    }
    
    // Update all cards visual state
    document.querySelectorAll('.hospital-card').forEach(card => {
        const cardHospitalId = card.dataset.hospitalId;
        const isSelected = cardHospitalId === hospitalId;
        
        // Update card border and background
        if (isSelected) {
            card.classList.remove('border-slate-200', 'bg-white');
            card.classList.add('border-blue', 'bg-blue-50/50', 'shadow-md', 'selected');
        } else {
            card.classList.remove('border-blue', 'bg-blue-50/50', 'shadow-md', 'selected');
            card.classList.add('border-slate-200', 'bg-white');
        }
        
        // Update selection indicator (check circle)
        const indicator = card.querySelector('.selection-indicator');
        if (indicator) {
            if (isSelected) {
                indicator.classList.remove('border-slate-300');
                indicator.classList.add('border-blue', 'bg-blue');
            } else {
                indicator.classList.remove('border-blue', 'bg-blue');
                indicator.classList.add('border-slate-300');
            }
        }
        
        // Update check icon
        const checkIcon = card.querySelector('.selection-indicator i');
        if (checkIcon) {
            if (isSelected) {
                checkIcon.classList.remove('opacity-0');
                checkIcon.classList.add('opacity-100');
            } else {
                checkIcon.classList.remove('opacity-100');
                checkIcon.classList.add('opacity-0');
            }
        }
        
        // Update hospital icon
        const iconContainer = card.querySelector('.hospital-icon');
        if (iconContainer) {
            if (isSelected) {
                iconContainer.classList.remove('bg-slate-100');
                iconContainer.classList.add('bg-gradient-to-br', 'from-blue', 'to-navy', 'ring-4', 'ring-blue/20');
            } else {
                iconContainer.classList.remove('bg-gradient-to-br', 'from-blue', 'to-navy', 'ring-4', 'ring-blue/20');
                iconContainer.classList.add('bg-slate-100');
            }
        }
        
        // Update icon color
        const icon = card.querySelector('.hospital-icon i');
        if (icon) {
            if (isSelected) {
                icon.classList.remove('text-slate-500');
                icon.classList.add('text-white');
            } else {
                icon.classList.remove('text-white');
                icon.classList.add('text-slate-500');
            }
        }
        
        // Update hospital name color
        const name = card.querySelector('.hospital-name');
        if (name) {
            if (isSelected) {
                name.classList.remove('text-navy');
                name.classList.add('text-blue');
            } else {
                name.classList.remove('text-blue');
                name.classList.add('text-navy');
            }
        }
        
        // Update selected badge
        const badge = card.querySelector('.selected-badge');
        if (badge) {
            if (isSelected) {
                badge.classList.remove('hidden');
                badge.classList.add('block', 'border-blue/20');
            } else {
                badge.classList.remove('block', 'border-blue/20');
                badge.classList.add('hidden');
            }
        }
    });
    
    // Re-render icons
    lucide.createIcons();
}
</script>
{% endblock %}