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

{% block title %}{% trans "Settings" %}{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <!-- Page Header -->
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-800 mb-2 flex items-center gap-2">
            <i data-lucide="settings" class="w-8 h-8 text-navy"></i>
            {% trans "Settings" %}
        </h1>
        <p class="text-gray-500">{% trans "Manage your account preferences and configurations" %}</p>
    </div>

    <!-- Settings Card -->
    <div class="bg-white rounded-2xl shadow-sm border border-gray-50 overflow-hidden">
        <!-- Tab Navigation -->
        <div class="border-b border-gray-100 overflow-x-auto">
            <div class="flex gap-1 p-2 min-w-max" role="tablist">
                <button class="settings-tab px-6 py-3 rounded-xl font-medium text-sm transition flex items-center gap-2 active" data-tab="profile">
                    <i data-lucide="user-circle" class="w-4 h-4"></i>
                    {% trans "Profile" %}
                </button>
                <button class="settings-tab px-6 py-3 rounded-xl font-medium text-sm transition flex items-center gap-2" data-tab="notifications">
                    <i data-lucide="bell" class="w-4 h-4"></i>
                    {% trans "Notifications" %}
                </button>
                <button class="settings-tab px-6 py-3 rounded-xl font-medium text-sm transition flex items-center gap-2" data-tab="security">
                    <i data-lucide="shield" class="w-4 h-4"></i>
                    {% trans "Security" %}
                </button>
                <button class="settings-tab px-6 py-3 rounded-xl font-medium text-sm transition flex items-center gap-2" data-tab="account">
                    <i data-lucide="info" class="w-4 h-4"></i>
                    {% trans "Account" %}
                </button>
                {% if user.is_px_admin or user.is_hospital_admin %}
                <button class="settings-tab px-6 py-3 rounded-xl font-medium text-sm transition flex items-center gap-2" data-tab="sla">
                    <i data-lucide="clock" class="w-4 h-4"></i>
                    {% trans "SLA" %}
                </button>
                <button class="settings-tab px-6 py-3 rounded-xl font-medium text-sm transition flex items-center gap-2" data-tab="hospital-notifications">
                    <i data-lucide="bell-ring" class="w-4 h-4"></i>
                    {% trans "Hospital Notifications" %}
                </button>
                {% endif %}
            </div>
        </div>

        <!-- Tab Content -->
        <div class="p-6">
            
            <!-- Profile Tab -->
            <div class="settings-content" id="profile-content">
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                    <div class="lg:col-span-2">
                        <h5 class="text-xl font-bold text-gray-800 mb-6 flex items-center gap-2">
                            <i data-lucide="user-circle" class="w-5 h-5 text-navy"></i>
                            {% trans "Profile Settings" %}
                        </h5>
                        
                        <form method="post" enctype="multipart/form-data">
                            {% csrf_token %}
                            <input type="hidden" name="form_type" value="profile">
                            
                            <!-- Avatar -->
                            <div class="text-center mb-8">
                                {% if user.avatar %}
                                    <img src="{{ user.avatar.url }}" alt="{{ user.get_full_name }}" class="w-32 h-32 rounded-full mx-auto mb-4 border-4 border-gray-100 object-cover">
                                {% else %}
                                    <div class="w-32 h-32 rounded-full bg-gray-100 mx-auto mb-4 border-4 border-gray-100 flex items-center justify-center">
                                        <i data-lucide="user" class="w-16 h-16 text-gray-400"></i>
                                    </div>
                                {% endif %}
                                <div class="mt-3">
                                    <label for="avatar" class="inline-flex items-center gap-2 px-4 py-2 text-navy bg-light rounded-xl hover:bg-light transition cursor-pointer">
                                        <i data-lucide="camera" class="w-4 h-4"></i>
                                        {% trans "Change Avatar" %}
                                    </label>
                                    <input type="file" id="avatar" name="avatar" class="hidden" accept="image/*">
                                </div>
                            </div>

                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div>
                                    <label for="first_name" class="block text-sm font-bold text-gray-700 mb-2">
                                        {% trans "First Name" %}
                                    </label>
                                    <input type="text" class="w-full px-4 py-2.5 border-2 border-gray-200 rounded-xl text-gray-800 focus:ring-2 focus:ring-navy focus:border-transparent transition" id="first_name" name="first_name" value="{{ user.first_name }}" required>
                                </div>

                                <div>
                                    <label for="last_name" class="block text-sm font-bold text-gray-700 mb-2">
                                        {% trans "Last Name" %}
                                    </label>
                                    <input type="text" class="w-full px-4 py-2.5 border-2 border-gray-200 rounded-xl text-gray-800 focus:ring-2 focus:ring-navy focus:border-transparent transition" id="last_name" name="last_name" value="{{ user.last_name }}" required>
                                </div>

                                <div class="md:col-span-2">
                                    <label for="email" class="block text-sm font-bold text-gray-700 mb-2">
                                        {% trans "Email" %}
                                    </label>
                                    <input type="email" class="w-full px-4 py-2.5 border-2 border-gray-200 rounded-xl text-gray-800 bg-gray-50" id="email" value="{{ user.email }}" readonly>
                                    <p class="text-sm text-gray-400 mt-1">{% trans "Contact administrator to change email" %}</p>
                                </div>

                                <div>
                                    <label for="phone" class="block text-sm font-bold text-gray-700 mb-2">
                                        {% trans "Phone Number" %}
                                    </label>
                                    <input type="tel" class="w-full px-4 py-2.5 border-2 border-gray-200 rounded-xl text-gray-800 focus:ring-2 focus:ring-navy focus:border-transparent transition" id="phone" name="phone" value="{{ user.phone|default:'' }}">
                                    <p class="text-sm text-gray-400 mt-1">{% trans "Required for SMS notifications" %}</p>
                                </div>

                                <div>
                                    <label for="language" class="block text-sm font-bold text-gray-700 mb-2">
                                        {% trans "Language" %}
                                    </label>
                                    <select class="w-full px-4 py-2.5 border-2 border-gray-200 rounded-xl text-gray-800 focus:ring-2 focus:ring-navy focus:border-transparent transition" id="language" name="language">
                                        {% for lang_code, lang_name in languages %}
                                            <option value="{{ lang_code }}" {% if user.language == lang_code %}selected{% endif %}>
                                                {{ lang_name }}
                                            </option>
                                        {% endfor %}
                                    </select>
                                </div>

                                <div class="md:col-span-2">
                                    <label for="bio" class="block text-sm font-bold text-gray-700 mb-2">
                                        {% trans "Bio" %}
                                    </label>
                                    <textarea class="w-full px-4 py-2.5 border-2 border-gray-200 rounded-xl text-gray-800 focus:ring-2 focus:ring-navy focus:border-transparent transition" id="bio" name="bio" rows="4">{{ user.bio|default:'' }}</textarea>
                                </div>

                                <div class="md:col-span-2">
                                    <button type="submit" class="bg-light0 text-white px-6 py-3 rounded-xl font-bold hover:bg-navy transition flex items-center gap-2">
                                        <i data-lucide="save" class="w-4 h-4"></i>
                                        {% trans "Save Profile" %}
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                    
                    <div>
                        <div class="bg-gray-50 rounded-2xl p-6">
                            <h6 class="font-bold text-gray-800 mb-4 flex items-center gap-2">
                                <i data-lucide="lightbulb" class="w-4 h-4 text-navy"></i>
                                {% trans "Profile Tips" %}
                            </h6>
                            <ul class="space-y-3 text-sm text-gray-600">
                                <li class="flex gap-2">
                                    <i data-lucide="check" class="w-4 h-4 text-green-500 flex-shrink-0"></i>
                                    <span>{% trans "Add a professional photo to help others recognize you" %}</span>
                                </li>
                                <li class="flex gap-2">
                                    <i data-lucide="check" class="w-4 h-4 text-green-500 flex-shrink-0"></i>
                                    <span>{% trans "Keep your phone number updated for SMS notifications" %}</span>
                                </li>
                                <li class="flex gap-2">
                                    <i data-lucide="check" class="w-4 h-4 text-green-500 flex-shrink-0"></i>
                                    <span>{% trans "Add a bio to share your role and expertise" %}</span>
                                </li>
                                <li class="flex gap-2">
                                    <i data-lucide="check" class="w-4 h-4 text-green-500 flex-shrink-0"></i>
                                    <span>{% trans "Choose your preferred language for the interface" %}</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Notifications Tab -->
            <div class="settings-content hidden" id="notifications-content">
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                    <div class="lg:col-span-2">
                        <h5 class="text-xl font-bold text-gray-800 mb-6 flex items-center gap-2">
                            <i data-lucide="bell" class="w-5 h-5 text-navy"></i>
                            {% trans "Notification Preferences" %}
                        </h5>
                        
                        <form method="post">
                            {% csrf_token %}
                            <input type="hidden" name="form_type" value="preferences">

                            <!-- Email Notifications -->
                            <div class="bg-gray-50 rounded-2xl p-6 mb-6">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <strong class="text-gray-800">{% trans "Email Notifications" %}</strong>
                                        <p class="text-sm text-gray-500 mt-1">{% trans "Receive notifications via email for complaint assignments, updates, and escalations" %}</p>
                                    </div>
                                    <label class="relative inline-flex items-center cursor-pointer">
                                        <input type="checkbox" id="notification_email_enabled" name="notification_email_enabled" class="sr-only peer" {% if user.notification_email_enabled %}checked{% endif %}>
                                        <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-navy/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-light0"></div>
                                    </label>
                                </div>
                            </div>

                            <!-- SMS Notifications -->
                            <div class="bg-gray-50 rounded-2xl p-6 mb-6">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <strong class="text-gray-800">{% trans "SMS Notifications" %}</strong>
                                        <p class="text-sm text-gray-500 mt-1">{% trans "Receive critical notifications via SMS (requires phone number)" %}</p>
                                    </div>
                                    <label class="relative inline-flex items-center cursor-pointer">
                                        <input type="checkbox" id="notification_sms_enabled" name="notification_sms_enabled" class="sr-only peer" {% if user.notification_sms_enabled %}checked{% endif %}>
                                        <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-navy/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-light0"></div>
                                    </label>
                                </div>
                            </div>

                            <div class="space-y-6">
                                <div>
                                    <label for="preferred_notification_channel" class="block text-sm font-bold text-gray-700 mb-2">
                                        {% trans "Preferred Notification Channel" %}
                                    </label>
                                    <select class="w-full px-4 py-2.5 border-2 border-gray-200 rounded-xl text-gray-800 focus:ring-2 focus:ring-navy focus:border-transparent transition" id="preferred_notification_channel" name="preferred_notification_channel">
                                        {% for channel_code, channel_name in notification_channels %}
                                            <option value="{{ channel_code }}" {% if user.preferred_notification_channel == channel_code %}selected{% endif %}>
                                                {{ channel_name }}
                                            </option>
                                        {% endfor %}
                                    </select>
                                    <p class="text-sm text-gray-400 mt-1">{% trans "Default channel for general notifications" %}</p>
                                </div>

                                <div>
                                    <label for="explanation_notification_channel" class="block text-sm font-bold text-gray-700 mb-2">
                                        {% trans "Explanation Request Channel" %}
                                    </label>
                                    <select class="w-full px-4 py-2.5 border-2 border-gray-200 rounded-xl text-gray-800 focus:ring-2 focus:ring-navy focus:border-transparent transition" id="explanation_notification_channel" name="explanation_notification_channel">
                                        {% for channel_code, channel_name in notification_channels %}
                                            <option value="{{ channel_code }}" {% if user.explanation_notification_channel == channel_code %}selected{% endif %}>
                                                {{ channel_name }}
                                            </option>
                                        {% endfor %}
                                    </select>
                                    <p class="text-sm text-gray-400 mt-1">{% trans "Default channel when requesting complaint explanations" %}</p>
                                </div>

                                <div>
                                    <label for="phone" class="block text-sm font-bold text-gray-700 mb-2">
                                        {% trans "Phone Number for SMS" %}
                                    </label>
                                    <input type="tel" class="w-full px-4 py-2.5 border-2 border-gray-200 rounded-xl text-gray-800 focus:ring-2 focus:ring-navy focus:border-transparent transition" id="phone" name="phone" value="{{ user.phone|default:'' }}" placeholder="+966 5X XXX XXXX">
                                    <p class="text-sm text-gray-400 mt-1">{% trans "Required to receive SMS notifications" %}</p>
                                </div>

                                <button type="submit" class="bg-blue-500 text-white px-6 py-3 rounded-xl font-bold hover:bg-blue-600 transition flex items-center gap-2">
                                    <i data-lucide="save" class="w-4 h-4"></i>
                                    {% trans "Save Preferences" %}
                                </button>
                            </div>
                        </form>
                    </div>
                    
                    <div>
                        <div class="bg-gray-50 rounded-2xl p-6">
                            <h6 class="font-bold text-gray-800 mb-4 flex items-center gap-2">
                                <i data-lucide="lightbulb" class="w-4 h-4 text-navy"></i>
                                {% trans "Notification Tips" %}
                            </h6>
                            <p class="text-sm text-gray-600 mb-4">
                                {% trans "Configure how you receive notifications to stay informed without being overwhelmed." %}
                            </p>
                            <ul class="space-y-3 text-sm text-gray-600">
                                <li class="flex gap-2">
                                    <i data-lucide="mail" class="w-4 h-4 text-blue-500 flex-shrink-0"></i>
                                    <span>{% trans "Email is best for detailed information" %}</span>
                                </li>
                                <li class="flex gap-2">
                                    <i data-lucide="smartphone" class="w-4 h-4 text-green-500 flex-shrink-0"></i>
                                    <span>{% trans "SMS is best for urgent alerts" %}</span>
                                </li>
                                <li class="flex gap-2">
                                    <i data-lucide="bell" class="w-4 h-4 text-orange-500 flex-shrink-0"></i>
                                    <span>{% trans "In-app notifications are always enabled" %}</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Security Tab -->
            <div class="settings-content hidden" id="security-content">
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                    <div class="lg:col-span-2">
                        <h5 class="text-xl font-bold text-gray-800 mb-6 flex items-center gap-2">
                            <i data-lucide="shield" class="w-5 h-5 text-navy"></i>
                            {% trans "Security Settings" %}
                        </h5>
                        
                        <form method="post">
                            {% csrf_token %}
                            <input type="hidden" name="form_type" value="password">

                            <div class="bg-gray-50 rounded-2xl p-6">
                                <div class="space-y-6">
                                    <div>
                                        <label for="current_password" class="block text-sm font-bold text-gray-700 mb-2">{% trans "Current Password" %}</label>
                                        <input type="password" class="w-full px-4 py-2.5 border-2 border-gray-200 rounded-xl text-gray-800 focus:ring-2 focus:ring-navy focus:border-transparent transition" id="current_password" name="current_password" required>
                                    </div>

                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                        <div>
                                            <label for="new_password" class="block text-sm font-bold text-gray-700 mb-2">{% trans "New Password" %}</label>
                                            <input type="password" class="w-full px-4 py-2.5 border-2 border-gray-200 rounded-xl text-gray-800 focus:ring-2 focus:ring-navy focus:border-transparent transition" id="new_password" name="new_password" required minlength="8">
                                            <p class="text-sm text-gray-400 mt-1">{% trans "Minimum 8 characters" %}</p>
                                        </div>

                                        <div>
                                            <label for="confirm_password" class="block text-sm font-bold text-gray-700 mb-2">{% trans "Confirm New Password" %}</label>
                                            <input type="password" class="w-full px-4 py-2.5 border-2 border-gray-200 rounded-xl text-gray-800 focus:ring-2 focus:ring-navy focus:border-transparent transition" id="confirm_password" name="confirm_password" required minlength="8">
                                        </div>
                                    </div>

                                    <button type="submit" class="bg-orange-500 text-white px-6 py-3 rounded-xl font-bold hover:bg-orange-600 transition flex items-center gap-2">
                                        <i data-lucide="key" class="w-4 h-4"></i>
                                        {% trans "Change Password" %}
                                    </button>
                                </div>
                            </div>
                        </form>

                        <div class="bg-gray-50 rounded-2xl p-6 mt-6">
                            <h6 class="font-bold text-gray-800 mb-4 flex items-center gap-2">
                                <i data-lucide="clock" class="w-4 h-4 text-gray-500"></i>
                                {% trans "Password History" %}
                            </h6>
                            <p class="text-sm text-gray-600">
                                <i data-lucide="clock" class="w-4 h-4 inline mr-1"></i>
                                {% trans "Last password change:" %} {% if user.password %}{% trans "Recently" %}{% else %}{% trans "Never" %}{% endif %}
                            </p>
                        </div>
                    </div>
                    
                    <div>
                        <div class="bg-gray-50 rounded-2xl p-6">
                            <h6 class="font-bold text-gray-800 mb-4 flex items-center gap-2">
                                <i data-lucide="lightbulb" class="w-4 h-4 text-navy"></i>
                                {% trans "Security Tips" %}
                            </h6>
                            <ul class="space-y-3 text-sm text-gray-600">
                                <li class="flex gap-2">
                                    <i data-lucide="check" class="w-4 h-4 text-green-500 flex-shrink-0"></i>
                                    <span>{% trans "Use strong passwords with letters, numbers, and symbols" %}</span>
                                </li>
                                <li class="flex gap-2">
                                    <i data-lucide="check" class="w-4 h-4 text-green-500 flex-shrink-0"></i>
                                    <span>{% trans "Don't reuse passwords from other sites" %}</span>
                                </li>
                                <li class="flex gap-2">
                                    <i data-lucide="check" class="w-4 h-4 text-green-500 flex-shrink-0"></i>
                                    <span>{% trans "Change your password regularly" %}</span>
                                </li>
                                <li class="flex gap-2">
                                    <i data-lucide="check" class="w-4 h-4 text-green-500 flex-shrink-0"></i>
                                    <span>{% trans "Never share your password with anyone" %}</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Account Tab -->
            <div class="settings-content hidden" id="account-content">
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                    <div class="lg:col-span-2">
                        <h5 class="text-xl font-bold text-gray-800 mb-6 flex items-center gap-2">
                            <i data-lucide="info" class="w-5 h-5 text-navy"></i>
                            {% trans "Account Information" %}
                        </h5>
                        
                        <div class="bg-gray-50 rounded-2xl p-6">
                            <div class="space-y-4">
                                <div class="flex justify-between items-center py-3 border-b border-gray-200">
                                    <div class="flex items-center gap-3">
                                        <i data-lucide="user" class="w-5 h-5 text-gray-500"></i>
                                        <span class="text-gray-600">{% trans "Full Name" %}</span>
                                    </div>
                                    <span class="font-bold text-gray-800">{{ user.get_full_name }}</span>
                                </div>
                                <div class="flex justify-between items-center py-3 border-b border-gray-200">
                                    <div class="flex items-center gap-3">
                                        <i data-lucide="mail" class="w-5 h-5 text-gray-500"></i>
                                        <span class="text-gray-600">{% trans "Email" %}</span>
                                    </div>
                                    <span class="font-bold text-gray-800">{{ user.email }}</span>
                                </div>
                                <div class="flex justify-between items-center py-3 border-b border-gray-200">
                                    <div class="flex items-center gap-3">
                                        <i data-lucide="calendar" class="w-5 h-5 text-gray-500"></i>
                                        <span class="text-gray-600">{% trans "Member Since" %}</span>
                                    </div>
                                    <span class="font-bold text-gray-800">{{ user.date_joined|date:"F d, Y" }}</span>
                                </div>
                                <div class="flex justify-between items-center py-3 border-b border-gray-200">
                                    <div class="flex items-center gap-3">
                                        <i data-lucide="building-2" class="w-5 h-5 text-gray-500"></i>
                                        <span class="text-gray-600">{% trans "Hospital" %}</span>
                                    </div>
                                    <span class="font-bold text-gray-800">{% if user.hospital %}{{ user.hospital.name }}{% else %}{% trans "Not assigned" %}{% endif %}</span>
                                </div>
                                <div class="flex justify-between items-center py-3 border-b border-gray-200">
                                    <div class="flex items-center gap-3">
                                        <i data-lucide="building" class="w-5 h-5 text-gray-500"></i>
                                        <span class="text-gray-600">{% trans "Department" %}</span>
                                    </div>
                                    <span class="font-bold text-gray-800">{% if user.department %}{{ user.department.name }}{% else %}{% trans "Not assigned" %}{% endif %}</span>
                                </div>
                                <div class="flex justify-between items-center py-3 border-b border-gray-200">
                                    <div class="flex items-center gap-3">
                                        <i data-lucide="badge" class="w-5 h-5 text-gray-500"></i>
                                        <span class="text-gray-600">{% trans "Employee ID" %}</span>
                                    </div>
                                    <span class="font-bold text-gray-800">{{ user.employee_id|default:"N/A" }}</span>
                                </div>
                                <div class="flex justify-between items-center py-3">
                                    <div class="flex items-center gap-3">
                                        <i data-lucide="user-tie" class="w-5 h-5 text-gray-500"></i>
                                        <span class="text-gray-600">{% trans "Role" %}</span>
                                    </div>
                                    <div>
                                        {% if user.is_px_admin %}
                                            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-light text-navy">{% trans "PX Admin" %}</span>
                                        {% elif user.is_hospital_admin %}
                                            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-green-100 text-green-700">{% trans "Hospital Admin" %}</span>
                                        {% elif user.is_department_head %}
                                            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-blue-100 text-blue-700">{% trans "Department Head" %}</span>
                                        {% else %}
                                            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-gray-100 text-gray-700">{% trans "Staff" %}</span>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div>
                        <div class="bg-gray-50 rounded-2xl p-6">
                            <h6 class="font-bold text-gray-800 mb-4 flex items-center gap-2">
                                <i data-lucide="lightbulb" class="w-4 h-4 text-navy"></i>
                                {% trans "Account Info" %}
                            </h6>
                            <p class="text-sm text-gray-600">
                                {% trans "This information is managed by your organization's administrators. Contact them if you need to update your hospital, department, or employee ID." %}
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Hospital Notifications Configuration Tab (Admins only) -->
            {% if user.is_px_admin or user.is_hospital_admin %}
            <div class="settings-content hidden" id="hospital-notifications-content">
                <div class="mb-6">
                    <div class="flex justify-between items-center">
                        <h5 class="text-xl font-bold text-gray-800 flex items-center gap-2">
                            <i data-lucide="bell-ring" class="w-5 h-5 text-navy"></i>
                            {% trans "Hospital Notification Configuration" %}
                        </h5>
                        <a href="{% url 'notifications:settings' %}" class="bg-light0 text-white px-4 py-2 rounded-xl font-bold text-sm hover:bg-navy transition flex items-center gap-2">
                            <i data-lucide="external-link" class="w-4 h-4"></i>
                            {% trans "Open Full Settings" %}
                        </a>
                    </div>
                </div>
                
                <div class="bg-blue-50 border border-blue-200 rounded-xl p-4 mb-6">
                    <div class="flex items-center gap-2 text-blue-700">
                        <i data-lucide="info" class="w-5 h-5"></i>
                        <span>{% trans "Configure which notifications are sent to staff and patients, and through which channels (Email, SMS, WhatsApp)." %}</span>
                    </div>
                </div>
                
                <!-- Quick Stats -->
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
                    <div class="bg-blue-500 text-white p-4 rounded-xl text-center">
                        <i data-lucide="mail" class="w-8 h-8 mx-auto mb-2"></i>
                        <h6 class="font-bold mb-0">{% trans "Email" %}</h6>
                        <span class="text-xs text-white/80">{% trans "Most Reliable" %}</span>
                    </div>
                    <div class="bg-green-500 text-white p-4 rounded-xl text-center">
                        <i data-lucide="smartphone" class="w-8 h-8 mx-auto mb-2"></i>
                        <h6 class="font-bold mb-0">{% trans "SMS" %}</h6>
                        <span class="text-xs text-white/80">{% trans "Instant Delivery" %}</span>
                    </div>
                    <div class="bg-teal-500 text-white p-4 rounded-xl text-center">
                        <i data-lucide="message-circle" class="w-8 h-8 mx-auto mb-2"></i>
                        <h6 class="font-bold mb-0">{% trans "WhatsApp" %}</h6>
                        <span class="text-xs text-white/80">{% trans "Rich Messages" %}</span>
                    </div>
                    <div class="bg-amber-500 text-white p-4 rounded-xl text-center">
                        <i data-lucide="moon" class="w-8 h-8 mx-auto mb-2"></i>
                        <h6 class="font-bold mb-0">{% trans "Quiet Hours" %}</h6>
                        <span class="text-xs text-white/80">{% trans "Do Not Disturb" %}</span>
                    </div>
                </div>
                
                <!-- Notification Categories -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <!-- Complaint Notifications -->
                    <a href="{% url 'notifications:settings' %}#complaint" class="block bg-white border-2 border-blue-200 rounded-xl p-4 hover:border-blue-400 hover:shadow-md transition">
                        <div class="flex items-center gap-3 mb-2">
                            <i data-lucide="alert-triangle" class="w-8 h-8 text-blue-500"></i>
                            <div>
                                <h6 class="font-bold text-gray-800">{% trans "Complaint Notifications" %}</h6>
                                <span class="text-xs text-gray-500">{% trans "5 events" %}</span>
                            </div>
                        </div>
                        <p class="text-sm text-gray-600">{% trans "Complaint acknowledgment, assignment, status changes, resolution, and closure notifications." %}</p>
                        <span class="inline-flex items-center gap-1 mt-3 text-sm font-bold text-blue-600 hover:text-blue-700">
                            {% trans "Configure" %}
                            <i data-lucide="chevron-right" class="w-4 h-4"></i>
                        </span>
                    </a>
                    
                    <!-- Explanation Notifications -->
                    <a href="{% url 'notifications:settings' %}#explanation" class="block bg-white border-2 border-blue-200 rounded-xl p-4 hover:border-blue-400 hover:shadow-md transition">
                        <div class="flex items-center gap-3 mb-2">
                            <i data-lucide="message-square" class="w-8 h-8 text-blue-500"></i>
                            <div>
                                <h6 class="font-bold text-gray-800">{% trans "Explanation Workflow" %}</h6>
                                <span class="text-xs text-gray-500">{% trans "4 events" %}</span>
                            </div>
                        </div>
                        <p class="text-sm text-gray-600">{% trans "Explanation requests, reminders, escalations, and received confirmations." %}</p>
                        <span class="inline-flex items-center gap-1 mt-3 text-sm font-bold text-blue-600 hover:text-blue-700">
                            {% trans "Configure" %}
                            <i data-lucide="chevron-right" class="w-4 h-4"></i>
                        </span>
                    </a>
                    
                    <!-- Survey Notifications -->
                    <a href="{% url 'notifications:settings' %}#survey" class="block bg-white border-2 border-green-200 rounded-xl p-4 hover:border-green-400 hover:shadow-md transition">
                        <div class="flex items-center gap-3 mb-2">
                            <i data-lucide="bar-chart-2" class="w-8 h-8 text-green-500"></i>
                            <div>
                                <h6 class="font-bold text-gray-800">{% trans "Survey Notifications" %}</h6>
                                <span class="text-xs text-gray-500">{% trans "3 events" %}</span>
                            </div>
                        </div>
                        <p class="text-sm text-gray-600">{% trans "Survey invitations, reminders, and completion confirmations." %}</p>
                        <span class="inline-flex items-center gap-1 mt-3 text-sm font-bold text-green-600 hover:text-green-700">
                            {% trans "Configure" %}
                            <i data-lucide="chevron-right" class="w-4 h-4"></i>
                        </span>
                    </a>
                    
                    <!-- Action Plan Notifications -->
                    <a href="{% url 'notifications:settings' %}#action" class="block bg-white border-2 border-amber-200 rounded-xl p-4 hover:border-amber-400 hover:shadow-md transition">
                        <div class="flex items-center gap-3 mb-2">
                            <i data-lucide="check-square" class="w-8 h-8 text-amber-500"></i>
                            <div>
                                <h6 class="font-bold text-gray-800">{% trans "Action Plan" %}</h6>
                                <span class="text-xs text-gray-500">{% trans "3 events" %}</span>
                            </div>
                        </div>
                        <p class="text-sm text-gray-600">{% trans "Action assignments, due soon reminders, and overdue alerts." %}</p>
                        <span class="inline-flex items-center gap-1 mt-3 text-sm font-bold text-amber-600 hover:text-amber-700">
                            {% trans "Configure" %}
                            <i data-lucide="chevron-right" class="w-4 h-4"></i>
                        </span>
                    </a>
                    
                    <!-- SLA Notifications -->
                    <a href="{% url 'notifications:settings' %}#sla" class="block bg-white border-2 border-red-200 rounded-xl p-4 hover:border-red-400 hover:shadow-md transition">
                        <div class="flex items-center gap-3 mb-2">
                            <i data-lucide="timer" class="w-8 h-8 text-red-500"></i>
                            <div>
                                <h6 class="font-bold text-gray-800">{% trans "SLA Notifications" %}</h6>
                                <span class="text-xs text-gray-500">{% trans "2 events" %}</span>
                            </div>
                        </div>
                        <p class="text-sm text-gray-600">{% trans "SLA reminders and breach alerts for timely resolution." %}</p>
                        <span class="inline-flex items-center gap-1 mt-3 text-sm font-bold text-red-600 hover:text-red-700">
                            {% trans "Configure" %}
                            <i data-lucide="chevron-right" class="w-4 h-4"></i>
                        </span>
                    </a>
                    
                    <!-- Onboarding Notifications -->
                    <a href="{% url 'notifications:settings' %}#onboarding" class="block bg-white border-2 border-green-200 rounded-xl p-4 hover:border-green-400 hover:shadow-md transition">
                        <div class="flex items-center gap-3 mb-2">
                            <i data-lucide="user-plus" class="w-8 h-8 text-green-500"></i>
                            <div>
                                <h6 class="font-bold text-gray-800">{% trans "Onboarding" %}</h6>
                                <span class="text-xs text-gray-500">{% trans "3 events" %}</span>
                            </div>
                        </div>
                        <p class="text-sm text-gray-600">{% trans "Invitation, reminder, and completion notifications for new user onboarding." %}</p>
                        <span class="inline-flex items-center gap-1 mt-3 text-sm font-bold text-green-600 hover:text-green-700">
                            {% trans "Configure" %}
                            <i data-lucide="chevron-right" class="w-4 h-4"></i>
                        </span>
                    </a>
                </div>
                
                <div class="bg-amber-50 rounded-2xl p-6 mt-6">
                    <h6 class="font-bold text-gray-800 mb-4 flex items-center gap-2">
                        <i data-lucide="lightbulb" class="w-4 h-4 text-amber-500"></i>
                        {% trans "Notification Best Practices" %}
                    </h6>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm text-gray-600">
                        <ul class="space-y-2">
                            <li class="flex gap-2">
                                <i data-lucide="check" class="w-4 h-4 text-green-500 flex-shrink-0"></i>
                                <span>{% trans "Enable Email for all critical notifications" %}</span>
                            </li>
                            <li class="flex gap-2">
                                <i data-lucide="check" class="w-4 h-4 text-green-500 flex-shrink-0"></i>
                                <span>{% trans "Use SMS only for urgent/escalation alerts" %}</span>
                            </li>
                        </ul>
                        <ul class="space-y-2">
                            <li class="flex gap-2">
                                <i data-lucide="check" class="w-4 h-4 text-green-500 flex-shrink-0"></i>
                                <span>{% trans "Configure quiet hours to respect staff rest time" %}</span>
                            </li>
                            <li class="flex gap-2">
                                <i data-lucide="check" class="w-4 h-4 text-green-500 flex-shrink-0"></i>
                                <span>{% trans "Review notification logs regularly" %}</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            {% endif %}
            
            <!-- SLA Configuration Tab (Admins only) -->
            {% if user.is_px_admin or user.is_hospital_admin %}
            <div class="settings-content hidden" id="sla-content">
                <h5 class="text-xl font-bold text-gray-800 mb-6 flex items-center gap-2">
                    <i data-lucide="timer" class="w-5 h-5 text-navy"></i>
                    {% trans "SLA Configuration" %}
                </h5>
                
                <div class="bg-blue-50 border border-blue-200 rounded-xl p-4 mb-6">
                    <div class="flex items-center gap-2 text-blue-700">
                        <i data-lucide="info" class="w-5 h-5"></i>
                        <span>{% trans "Configure Service Level Agreements, escalation rules, and complaint thresholds for your organization." %}</span>
                    </div>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <!-- SLA Configurations -->
                    <a href="{% url 'complaints:sla_config_list' %}" class="block bg-white border-2 border-gray-200 rounded-xl p-6 hover:border-blue hover:shadow-md transition text-center">
                        <i data-lucide="timer" class="w-12 h-12 text-navy mx-auto mb-4"></i>
                        <h6 class="font-bold text-gray-800 mb-2">{% trans "SLA Configurations" %}</h6>
                        <p class="text-sm text-gray-600">{% trans "Manage deadline settings for complaint resolution" %}</p>
                    </a>
                    
                    <!-- Escalation Rules -->
                    <a href="{% url 'complaints:escalation_rule_list' %}" class="block bg-white border-2 border-gray-200 rounded-xl p-6 hover:border-blue hover:shadow-md transition text-center">
                        <i data-lucide="trending-up" class="w-12 h-12 text-orange-500 mx-auto mb-4"></i>
                        <h6 class="font-bold text-gray-800 mb-2">{% trans "Escalation Rules" %}</h6>
                        <p class="text-sm text-gray-600">{% trans "Configure automatic escalation when deadlines are exceeded" %}</p>
                    </a>
                    
                    <!-- Complaint Thresholds -->
                    <a href="{% url 'complaints:complaint_threshold_list' %}" class="block bg-white border-2 border-gray-200 rounded-xl p-6 hover:border-blue hover:shadow-md transition text-center">
                        <i data-lucide="bar-chart" class="w-12 h-12 text-blue-500 mx-auto mb-4"></i>
                        <h6 class="font-bold text-gray-800 mb-2">{% trans "Complaint Thresholds" %}</h6>
                        <p class="text-sm text-gray-600">{% trans "Set alert thresholds for complaint volume monitoring" %}</p>
                    </a>
                    
                    <!-- On-Call Admin Schedules -->
                    <a href="{% url 'complaints:oncall_dashboard' %}" class="block bg-white border-2 border-gray-200 rounded-xl p-6 hover:border-blue hover:shadow-md transition text-center">
                        <i data-lucide="moon" class="w-12 h-12 text-indigo-500 mx-auto mb-4"></i>
                        <h6 class="font-bold text-gray-800 mb-2">{% trans "On-Call Schedules" %}</h6>
                        <p class="text-sm text-gray-600">{% trans "Configure working hours and on-call admin assignments for notifications" %}</p>
                    </a>
                    
                    <!-- Send SMS -->
                    <a href="{% url 'notifications:send_sms_direct' %}" class="block bg-white border-2 border-gray-200 rounded-xl p-6 hover:border-blue hover:shadow-md transition text-center">
                        <i data-lucide="message-square" class="w-12 h-12 text-green-500 mx-auto mb-4"></i>
                        <h6 class="font-bold text-gray-800 mb-2">{% trans "Send SMS" %}</h6>
                        <p class="text-sm text-gray-600">{% trans "Send text messages directly to any phone number" %}</p>
                    </a>
                </div>
                
                <div class="bg-gray-50 rounded-2xl p-6 mt-6">
                    <h6 class="font-bold text-gray-800 mb-4 flex items-center gap-2">
                        <i data-lucide="lightbulb" class="w-4 h-4 text-navy"></i>
                        {% trans "SLA Best Practices" %}
                    </h6>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm text-gray-600">
                        <ul class="space-y-2">
                            <li class="flex gap-2">
                                <i data-lucide="check" class="w-4 h-4 text-green-500 flex-shrink-0"></i>
                                <span>{% trans "Set realistic deadlines based on complaint severity" %}</span>
                            </li>
                            <li class="flex gap-2">
                                <i data-lucide="check" class="w-4 h-4 text-green-500 flex-shrink-0"></i>
                                <span>{% trans "Configure multiple escalation levels for smooth handoffs" %}</span>
                            </li>
                        </ul>
                        <ul class="space-y-2">
                            <li class="flex gap-2">
                                <i data-lucide="check" class="w-4 h-4 text-green-500 flex-shrink-0"></i>
                                <span>{% trans "Monitor thresholds to identify trends and issues early" %}</span>
                            </li>
                            <li class="flex gap-2">
                                <i data-lucide="check" class="w-4 h-4 text-green-500 flex-shrink-0"></i>
                                <span>{% trans "Review and adjust SLA settings regularly" %}</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    lucide.createIcons();
    
    // Tab switching
    const tabs = document.querySelectorAll('.settings-tab');
    const contents = document.querySelectorAll('.settings-content');
    
    // Load saved tab
    const savedTab = localStorage.getItem('activeSettingsTab') || 'profile';
    
    function activateTab(tabName) {
        tabs.forEach(tab => {
            const isActive = tab.dataset.tab === tabName;
            if (isActive) {
                tab.classList.add('bg-light', 'text-navy');
                tab.classList.remove('text-gray-500', 'hover:bg-gray-100');
            } else {
                tab.classList.remove('bg-light', 'text-navy');
                tab.classList.add('text-gray-500', 'hover:bg-gray-100');
            }
        });
        
        contents.forEach(content => {
            if (content.id === `${tabName}-content`) {
                content.classList.remove('hidden');
            } else {
                content.classList.add('hidden');
            }
        });
        
        localStorage.setItem('activeSettingsTab', tabName);
    }
    
    tabs.forEach(tab => {
        tab.addEventListener('click', function() {
            const tabName = this.dataset.tab;
            activateTab(tabName);
        });
    });
    
    // Initialize with saved tab
    activateTab(savedTab);
    
    // Password confirmation validation
    const passwordForm = document.querySelector('form input[name="form_type"][value="password"]')?.closest('form');
    if (passwordForm) {
        passwordForm.addEventListener('submit', function(e) {
            const newPassword = this.querySelector('#new_password').value;
            const confirmPassword = this.querySelector('#confirm_password').value;
            
            if (newPassword !== confirmPassword) {
                e.preventDefault();
                alert('{% trans "Passwords do not match!" %}');
            }
        });
    }
});
</script>
{% endblock %}