{% load i18n static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% trans "Select Hospital" %} - PX360</title>
    <link rel="stylesheet" href="{% static 'dist/css/tailwind.css' %}">
    <script src="https://unpkg.com/lucide@latest"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'vendor/fonts/noto-kufi-arabic/arabic.css' %}">
    <style>
        body { font-family: 'Inter', 'Noto Kufi Arabic', sans-serif; }
        [dir="rtl"] body,
        [dir="rtl"] input,
        [dir="rtl"] textarea,
        [dir="rtl"] select,
        [dir="rtl"] button {
            font-family: 'Noto Kufi Arabic', sans-serif;
        }
        .hospital-card {
            transition: all 0.2s ease;
        }
        .hospital-card:hover {
            transform: translateY(-2px);
        }
        .hospital-card.selected {
            border-color: #007bbd;
            background-color: rgba(0, 123, 189, 0.05);
        }
    </style>
</head>
<body class="bg-gradient-to-br from-navy via-blue to-light min-h-screen flex items-center justify-center p-4">
    <div class="w-full max-w-4xl">
        <!-- Card -->
        <div class="bg-white rounded-[2rem] shadow-2xl overflow-hidden">
            <!-- Header -->
            <div class="bg-gradient-to-br from-navy to-blue text-white p-8 text-center">
                <div class="mb-4">
                    <img src="{% static 'img/hh-logo.png' %}" alt="Al Hammadi Hospital" class="h-20 w-auto mx-auto bg-white/90 backdrop-blur-sm p-2 rounded-2xl inline-block">
                </div>
                <h1 class="text-2xl font-bold mb-2">{% trans "Select Hospital" %}</h1>
                <p class="text-white/90 text-sm max-w-lg mx-auto">
                    {% trans "As a PX Admin, you must select a hospital to continue. You can change your selection later from the sidebar." %}
                </p>
            </div>

            <!-- Body -->
            <div class="p-8">
                {% if messages %}
                    <div class="mb-6 space-y-3">
                        {% for message in messages %}
                        <div class="{% if message.tags == 'error' or message.tags == 'danger' %}bg-red-50 border-red-200 text-red-700{% elif message.tags == 'warning' %}bg-amber-50 border-amber-200 text-amber-700{% elif message.tags == 'success' %}bg-green-50 border-green-200 text-green-700{% else %}bg-blue-50 border-blue-200 text-blue-700{% endif %} border rounded-xl px-4 py-3 flex items-start gap-3" role="alert">
                            {% if message.tags == 'error' or message.tags == 'danger' %}
                                <i data-lucide="alert-triangle" class="w-5 h-5 flex-shrink-0 mt-0.5"></i>
                            {% elif message.tags == 'warning' %}
                                <i data-lucide="alert-circle" class="w-5 h-5 flex-shrink-0 mt-0.5"></i>
                            {% elif message.tags == 'success' %}
                                <i data-lucide="check-circle" class="w-5 h-5 flex-shrink-0 mt-0.5"></i>
                            {% else %}
                                <i data-lucide="info" class="w-5 h-5 flex-shrink-0 mt-0.5"></i>
                            {% endif %}
                            <p class="text-sm flex-1">{{ message }}</p>
                        </div>
                        {% endfor %}
                    </div>
                {% endif %}

                <form method="post" id="hospitalForm">
                    {% csrf_token %}
                    <input type="hidden" name="next" value="{{ next }}">

                    {% if hospitals %}
                    <!-- Hospital Selection Grid -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                        {% for hospital in hospitals %}
                        {% with hospital_id_str=hospital.id|stringformat:"s" %}
                        <div 
                            class="hospital-card cursor-pointer rounded-xl border-2 p-4
                                {% if hospital_id_str == selected_hospital_id %}
                                    border-blue selected bg-blue-50/50
                                {% else %}
                                    border-gray-200 hover:border-blue/50 hover:shadow-md
                                {% 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="sr-only"
                            >
                            
                            <div class="flex items-start gap-3">
                                <!-- Icon -->
                                <div class="w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0
                                    {% if hospital_id_str == selected_hospital_id %}
                                        bg-gradient-to-br from-blue to-navy
                                    {% else %}
                                        bg-gray-100
                                    {% endif %}">
                                    <i data-lucide="building-2" class="w-6 h-6
                                        {% if hospital_id_str == selected_hospital_id %}
                                            text-white
                                        {% else %}
                                            text-gray-500
                                        {% endif %}"></i>
                                </div>
                                
                                <!-- Content -->
                                <div class="flex-1 min-w-0">
                                    <div class="flex items-center gap-2">
                                        <h3 class="font-bold text-navy truncate
                                            {% if hospital_id_str == selected_hospital_id %}text-blue{% endif %}">
                                            {{ hospital.name }}
                                        </h3>
                                        {% if hospital_id_str == selected_hospital_id %}
                                        <i data-lucide="check-circle-2" class="w-5 h-5 text-blue flex-shrink-0"></i>
                                        {% endif %}
                                    </div>
                                    {% if hospital.city %}
                                    <p class="text-sm text-slate mt-1 flex items-center gap-1">
                                        <i data-lucide="map-pin" class="w-3.5 h-3.5"></i>
                                        {{ hospital.city }}{% if hospital.country %}, {{ hospital.country }}{% endif %}
                                    </p>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        {% endwith %}
                        {% endfor %}
                    </div>
                    {% else %}
                    <!-- Empty State -->
                    <div class="bg-amber-50 border border-amber-200 rounded-xl p-8 text-center mb-6">
                        <div class="inline-flex items-center justify-center w-16 h-16 bg-amber-100 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 %}

                    <!-- Submit Button -->
                    {% if hospitals %}
                    <button type="submit" class="w-full bg-navy hover:bg-blue text-white py-3.5 rounded-xl font-semibold shadow-lg hover:shadow-xl transition-all duration-300 flex items-center justify-center gap-2">
                        <i data-lucide="check" class="w-5 h-5"></i>
                        {% trans "Continue to Dashboard" %}
                    </button>
                    {% endif %}
                </form>
            </div>

            <!-- Footer -->
            <div class="bg-gray-50 px-8 py-4 text-center border-t border-gray-100">
                <p class="text-xs text-gray-500">
                    {% trans "You must select a hospital to access the system" %}
                </p>
            </div>
        </div>
    </div>

    <script>
        // Initialize Lucide icons
        lucide.createIcons();

        function selectHospital(hospitalId) {
            // Check the radio button
            const radio = document.getElementById('hospital_' + hospitalId);
            if (radio) {
                radio.checked = true;
            }
            
            // Update all cards
            document.querySelectorAll('.hospital-card').forEach(card => {
                const cardId = card.dataset.hospitalId;
                const isSelected = cardId === hospitalId;
                
                // Update card styling
                if (isSelected) {
                    card.classList.add('border-blue', 'selected', 'bg-blue-50/50');
                    card.classList.remove('border-gray-200');
                } else {
                    card.classList.remove('border-blue', 'selected', 'bg-blue-50/50');
                    card.classList.add('border-gray-200');
                }
                
                // Update icon container
                const iconContainer = card.querySelector('.w-12');
                const icon = iconContainer?.querySelector('i');
                if (iconContainer && icon) {
                    if (isSelected) {
                        iconContainer.classList.add('bg-gradient-to-br', 'from-blue', 'to-navy');
                        iconContainer.classList.remove('bg-gray-100');
                        icon.classList.add('text-white');
                        icon.classList.remove('text-gray-500');
                    } else {
                        iconContainer.classList.remove('bg-gradient-to-br', 'from-blue', 'to-navy');
                        iconContainer.classList.add('bg-gray-100');
                        icon.classList.remove('text-white');
                        icon.classList.add('text-gray-500');
                    }
                }
                
                // Update title
                const title = card.querySelector('h3');
                if (title) {
                    if (isSelected) {
                        title.classList.add('text-blue');
                    } else {
                        title.classList.remove('text-blue');
                    }
                }
                
                // Update check icon
                const checkWrapper = card.querySelector('.flex.items-center.gap-2');
                if (checkWrapper) {
                    let checkIcon = checkWrapper.querySelector('i[data-lucide="check-circle-2"]');
                    if (isSelected && !checkIcon) {
                        const newIcon = document.createElement('i');
                        newIcon.setAttribute('data-lucide', 'check-circle-2');
                        newIcon.className = 'w-5 h-5 text-blue flex-shrink-0';
                        checkWrapper.appendChild(newIcon);
                        lucide.createIcons();
                    } else if (!isSelected && checkIcon) {
                        checkIcon.remove();
                    }
                }
            });
        }
    </script>
</body>
</html>
