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

{% block title %}Profil Saya - Inventaris{% endblock %}

{% block page_title %}Profil Saya{% endblock %}
{% block page_subtitle %}Kelola profil dan pengaturan akun Anda{% endblock %}

{% block content %}
<div class="min-h-screen bg-gradient-to-br from-green-50 via-white to-green-50 py-2 sm:py-4 lg:py-6 px-2 sm:px-4 lg:px-8">
    <div class="max-w-6xl mx-auto" x-data="profileManager()">
        <!-- Profile Header -->
        <div class="bg-white rounded-2xl shadow-xl overflow-hidden border-2 border-green-100 mb-3 sm:mb-4 lg:mb-6">
            <div class="p-3 sm:p-4 lg:p-6 xl:p-8 bg-gradient-to-r from-green-50 to-emerald-50">
                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 sm:gap-4">
                    <div class="flex items-center mb-2 sm:mb-0">
                        <!-- Profile Photo -->
                        <div class="w-16 h-16 sm:w-20 sm:h-20 rounded-full overflow-hidden border-4 border-white shadow-lg mr-3 sm:mr-4 lg:mr-6 flex-shrink-0">
                            {% if profil.foto_profil %}
                                <img src="{{ profil.foto_profil.url }}" alt="{{ profil.nama_lengkap }}" class="w-full h-full object-cover">
                            {% else %}
                                <div class="w-full h-full bg-gradient-to-br from-green-500 to-green-600 flex items-center justify-center">
                                    <i class="fas fa-user text-white text-lg sm:text-xl lg:text-2xl"></i>
                                </div>
                            {% endif %}
                        </div>
                        
                        <!-- Profile Info -->
                        <div class="min-w-0 flex-1">
                            <h1 class="text-lg sm:text-xl lg:text-2xl font-bold text-gray-900 mb-1 sm:mb-2 truncate">{{ profil.nama_lengkap|default:"Belum Diisi" }}</h1>
                            <p class="text-xs sm:text-sm text-gray-600 mb-1.5 sm:mb-2 truncate">{{ profil.jabatan|default:"No Position" }} - {{ profil.departemen|default:"No Department" }}</p>
                            
                            <!-- Level Badge -->
                            <span class="inline-flex items-center px-2 sm:px-3 py-0.5 sm:py-1 rounded-full text-xs sm:text-sm font-medium
                                {% if profil.level_akses == 'admin' %}bg-red-100 text-red-800
                                {% elif profil.level_akses == 'supervisor' %}bg-yellow-100 text-yellow-800
                                {% elif profil.level_akses == 'operator' %}bg-green-100 text-green-800
                                {% else %}bg-gray-100 text-gray-800{% endif %}">
                                <i class="fas fa-shield-alt mr-1 sm:mr-2 text-xs"></i>
                                {{ profil.level_akses_display }}
                            </span>
                        </div>
                    </div>
                    
                    <!-- Action Buttons -->
                    <div class="flex flex-col sm:flex-row gap-2 sm:gap-3">
                        <button @click="activeTab = 'edit'" 
                                :class="activeTab === 'edit' ? 'bg-gradient-to-r from-green-500 to-green-600 text-white' : 'bg-white border-2 border-gray-300 text-gray-700 hover:border-green-300'"
                                class="inline-flex items-center justify-center px-3 sm:px-4 lg:px-6 py-2 sm:py-2.5 rounded-xl text-xs sm:text-sm font-semibold transition-all duration-200 shadow-md hover:shadow-lg">
                            <i class="fas fa-edit mr-1.5 sm:mr-2"></i>
                            <span class="hidden sm:inline">Edit Profil</span>
                            <span class="sm:hidden">Edit</span>
                        </button>
                        <button @click="activeTab = 'password'" 
                                :class="activeTab === 'password' ? 'bg-gradient-to-r from-green-500 to-green-600 text-white' : 'bg-white border-2 border-gray-300 text-gray-700 hover:border-green-300'"
                                class="inline-flex items-center justify-center px-3 sm:px-4 lg:px-6 py-2 sm:py-2.5 rounded-xl text-xs sm:text-sm font-semibold transition-all duration-200 shadow-md hover:shadow-lg">
                            <i class="fas fa-key mr-1.5 sm:mr-2"></i>
                            <span class="hidden sm:inline">Ganti Password</span>
                            <span class="sm:hidden">Password</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Tab Navigation -->
        <div class="bg-white rounded-2xl shadow-xl border-2 border-gray-200 mb-3 sm:mb-4 lg:mb-6 overflow-hidden">
            <div class="border-b-2 border-gray-200">
                <nav class="flex overflow-x-auto scrollbar-hide px-2 sm:px-4 lg:px-6" aria-label="Tabs" style="scrollbar-width: none; -ms-overflow-style: none;">
                    <button @click="activeTab = 'view'" 
                            :class="activeTab === 'view' ? 'border-green-500 text-green-600 bg-green-50' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                            class="whitespace-nowrap py-3 sm:py-4 px-2 sm:px-3 lg:px-4 border-b-2 font-semibold text-xs sm:text-sm transition-colors flex-shrink-0">
                        <i class="fas fa-eye mr-1.5 sm:mr-2"></i>
                        <span class="hidden sm:inline">Lihat Profil</span>
                        <span class="sm:hidden">Lihat</span>
                    </button>
                    <button @click="activeTab = 'edit'" 
                            :class="activeTab === 'edit' ? 'border-green-500 text-green-600 bg-green-50' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                            class="whitespace-nowrap py-3 sm:py-4 px-2 sm:px-3 lg:px-4 border-b-2 font-semibold text-xs sm:text-sm transition-colors flex-shrink-0">
                        <i class="fas fa-edit mr-1.5 sm:mr-2"></i>
                        <span class="hidden sm:inline">Edit Profil</span>
                        <span class="sm:hidden">Edit</span>
                    </button>
                    <button @click="activeTab = 'password'" 
                            :class="activeTab === 'password' ? 'border-green-500 text-green-600 bg-green-50' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                            class="whitespace-nowrap py-3 sm:py-4 px-2 sm:px-3 lg:px-4 border-b-2 font-semibold text-xs sm:text-sm transition-colors flex-shrink-0">
                        <i class="fas fa-key mr-1.5 sm:mr-2"></i>
                        <span class="hidden sm:inline">Ganti Password</span>
                        <span class="sm:hidden">Password</span>
                    </button>
                    <button @click="activeTab = 'roles'" 
                            :class="activeTab === 'roles' ? 'border-green-500 text-green-600 bg-green-50' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                            class="whitespace-nowrap py-3 sm:py-4 px-2 sm:px-3 lg:px-4 border-b-2 font-semibold text-xs sm:text-sm transition-colors flex-shrink-0">
                        <i class="fas fa-user-tag mr-1.5 sm:mr-2"></i>
                        <span class="hidden sm:inline">Role & Permission</span>
                        <span class="sm:hidden">Role</span>
                    </button>
                    <button @click="activeTab = 'settings'" 
                            :class="activeTab === 'settings' ? 'border-green-500 text-green-600 bg-green-50' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                            class="whitespace-nowrap py-3 sm:py-4 px-2 sm:px-3 lg:px-4 border-b-2 font-semibold text-xs sm:text-sm transition-colors flex-shrink-0">
                        <i class="fas fa-cog mr-1.5 sm:mr-2"></i>
                        <span class="hidden sm:inline">Pengaturan</span>
                        <span class="sm:hidden">Setting</span>
                    </button>
                </nav>
            </div>
        </div>

        <!-- Tab Content -->
        <div class="bg-white rounded-2xl shadow-xl border-2 border-gray-200">
            
            <!-- View Profile Tab -->
            <div x-show="activeTab === 'view'" x-transition class="p-3 sm:p-4 lg:p-6 xl:p-8">
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
                <!-- Personal Information -->
                <div class="space-y-3 sm:space-y-4 lg:space-y-6">
                    <h3 class="text-base sm:text-lg font-bold text-gray-900 flex items-center mb-3 sm:mb-4">
                        <div class="w-8 h-8 sm:w-10 sm:h-10 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg flex items-center justify-center mr-2 sm:mr-3 shadow-md">
                            <i class="fas fa-user text-white text-sm sm:text-base"></i>
                        </div>
                        Informasi Personal
                    </h3>
                    
                    <div class="space-y-2.5 sm:space-y-3 lg:space-y-4">
                        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between py-2 sm:py-3 border-b border-gray-100 gap-1 sm:gap-0">
                            <span class="text-xs sm:text-sm font-semibold text-gray-500">Nama Lengkap</span>
                            <span class="text-xs sm:text-sm text-gray-900 font-medium">{{ profil.nama_lengkap|default:"-" }}</span>
                        </div>
                        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between py-2 sm:py-3 border-b border-gray-100 gap-1 sm:gap-0">
                            <span class="text-xs sm:text-sm font-semibold text-gray-500">Email</span>
                            <span class="text-xs sm:text-sm text-gray-900 font-medium break-all">{{ profil.email|default:"-" }}</span>
                        </div>
                        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between py-2 sm:py-3 border-b border-gray-100 gap-1 sm:gap-0">
                            <span class="text-xs sm:text-sm font-semibold text-gray-500">No. Telepon</span>
                            <span class="text-xs sm:text-sm text-gray-900 font-medium">{{ profil.no_telepon|default:"-" }}</span>
                        </div>
                        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between py-2 sm:py-3 border-b border-gray-100 gap-1 sm:gap-0">
                            <span class="text-xs sm:text-sm font-semibold text-gray-500">Tanggal Lahir</span>
                            <span class="text-xs sm:text-sm text-gray-900 font-medium">{{ profil.tanggal_lahir|date:"d M Y"|default:"-" }}</span>
                        </div>
                        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between py-2 sm:py-3 border-b border-gray-100 gap-1 sm:gap-0">
                            <span class="text-xs sm:text-sm font-semibold text-gray-500">Jenis Kelamin</span>
                            <span class="text-xs sm:text-sm text-gray-900 font-medium">
                                {% if profil.jenis_kelamin == 'L' %}Laki-laki
                                {% elif profil.jenis_kelamin == 'P' %}Perempuan
                                {% else %}-{% endif %}
                            </span>
                        </div>
                        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between py-2 sm:py-3 border-b border-gray-100 gap-1 sm:gap-0">
                            <span class="text-xs sm:text-sm font-semibold text-gray-500">Usia</span>
                            <span class="text-xs sm:text-sm text-gray-900 font-medium">
                                {% if profil and profil.tanggal_lahir %}
                                    {{ profil.usia|default:"-" }} tahun
                                {% else %}
                                    -
                                {% endif %}
                            </span>
                        </div>
                    </div>
                    
                    {% if profil.alamat %}
                    <div class="mt-4 sm:mt-6">
                        <h4 class="text-xs sm:text-sm font-semibold text-gray-500 mb-1.5 sm:mb-2">Alamat</h4>
                        <p class="text-xs sm:text-sm text-gray-900 bg-gradient-to-r from-gray-50 to-gray-100 p-2 sm:p-3 rounded-lg border border-gray-200">{{ profil.alamat }}</p>
                    </div>
                    {% endif %}
                </div>

                <!-- Job Information -->
                <div class="space-y-3 sm:space-y-4 lg:space-y-6">
                    <h3 class="text-base sm:text-lg font-bold text-gray-900 flex items-center mb-3 sm:mb-4">
                        <div class="w-8 h-8 sm:w-10 sm:h-10 bg-gradient-to-br from-green-500 to-green-600 rounded-lg flex items-center justify-center mr-2 sm:mr-3 shadow-md">
                            <i class="fas fa-briefcase text-white text-sm sm:text-base"></i>
                        </div>
                        Informasi Jabatan
                    </h3>
                    
                    <div class="space-y-2.5 sm:space-y-3 lg:space-y-4">
                        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between py-2 sm:py-3 border-b border-gray-100 gap-1 sm:gap-0">
                            <span class="text-xs sm:text-sm font-semibold text-gray-500">Jabatan</span>
                            <span class="text-xs sm:text-sm text-gray-900 font-medium">{{ profil.jabatan|default:"-" }}</span>
                        </div>
                        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between py-2 sm:py-3 border-b border-gray-100 gap-1 sm:gap-0">
                            <span class="text-xs sm:text-sm font-semibold text-gray-500">Departemen</span>
                            <span class="text-xs sm:text-sm text-gray-900 font-medium">{{ profil.departemen|default:"-" }}</span>
                        </div>
                        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between py-2 sm:py-3 border-b border-gray-100 gap-1 sm:gap-0">
                            <span class="text-xs sm:text-sm font-semibold text-gray-500">Level Akses</span>
                            <span class="inline-flex items-center px-2 sm:px-2.5 py-0.5 rounded-full text-xs font-medium
                                {% if profil.level_akses == 'admin' %}bg-red-100 text-red-800
                                {% elif profil.level_akses == 'supervisor' %}bg-yellow-100 text-yellow-800
                                {% elif profil.level_akses == 'operator' %}bg-green-100 text-green-800
                                {% else %}bg-gray-100 text-gray-800{% endif %}">
                                {{ profil.level_akses_display }}
                            </span>
                        </div>
                        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between py-2 sm:py-3 border-b border-gray-100 gap-1 sm:gap-0">
                            <span class="text-xs sm:text-sm font-semibold text-gray-500">Status</span>
                            <span class="inline-flex items-center px-2 sm:px-2.5 py-0.5 rounded-full text-xs font-medium
                                {% if profil.is_active %}bg-green-100 text-green-800{% else %}bg-red-100 text-red-800{% endif %}">
                                <i class="fas fa-circle w-1.5 h-1.5 sm:w-2 sm:h-2 mr-1"></i>
                                {% if profil.is_active %}Aktif{% else %}Tidak Aktif{% endif %}
                            </span>
                        </div>
                    </div>
                    
                    <!-- Account Information -->
                    <div class="mt-4 sm:mt-6">
                        <h4 class="text-xs sm:text-sm font-semibold text-gray-500 mb-2 sm:mb-3 lg:mb-4">Informasi Akun</h4>
                        <div class="space-y-2 sm:space-y-3">
                            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between py-1.5 sm:py-2 gap-1 sm:gap-0">
                                <span class="text-xs sm:text-sm text-gray-600">Username</span>
                                <span class="text-xs sm:text-sm text-gray-900 font-medium">{{ profil.user.username }}</span>
                            </div>
                            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between py-1.5 sm:py-2 gap-1 sm:gap-0">
                                <span class="text-xs sm:text-sm text-gray-600">Terdaftar</span>
                                <span class="text-xs sm:text-sm text-gray-900 font-medium">{{ profil.created_at|date:"d M Y" }}</span>
                            </div>
                            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between py-1.5 sm:py-2 gap-1 sm:gap-0">
                                <span class="text-xs sm:text-sm text-gray-600">Terakhir Update</span>
                                <span class="text-xs sm:text-sm text-gray-900 font-medium">{{ profil.updated_at|date:"d M Y H:i" }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Edit Profile Tab -->
        <div x-show="activeTab === 'edit'" x-transition class="p-3 sm:p-4 lg:p-6 xl:p-8">
            <form method="post" enctype="multipart/form-data" @submit="submitProfileForm">
                {% csrf_token %}
                <input type="hidden" name="action" value="edit_profile">
                
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
                    <!-- Personal Information -->
                    <div class="space-y-3 sm:space-y-4 lg:space-y-6">
                        <h3 class="text-base sm:text-lg font-bold text-gray-900 flex items-center mb-3 sm:mb-4">
                            <div class="w-8 h-8 sm:w-10 sm:h-10 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg flex items-center justify-center mr-2 sm:mr-3 shadow-md">
                                <i class="fas fa-user text-white text-sm sm:text-base"></i>
                            </div>
                            Informasi Personal
                        </h3>
                        
                        <div class="space-y-3 sm:space-y-4">
                            <!-- Nama Lengkap -->
                            <div>
                                <label for="nama_lengkap" class="block text-xs sm:text-sm font-semibold text-gray-700 mb-1.5 sm:mb-2">
                                    Nama Lengkap <span class="text-red-500">*</span>
                                </label>
                                <input type="text" 
                                       name="nama_lengkap" 
                                       id="nama_lengkap" 
                                       value="{{ profil.nama_lengkap|default:'' }}"
                                       class="form-input w-full"
                                       required>
                            </div>

                            <!-- Email -->
                            <div>
                                <label for="email" class="block text-xs sm:text-sm font-semibold text-gray-700 mb-1.5 sm:mb-2">
                                    Email
                                </label>
                                <input type="email" 
                                       name="email" 
                                       id="email" 
                                       value="{{ profil.email|default:'' }}"
                                       class="form-input w-full">
                            </div>

                            <!-- No Telepon -->
                            <div>
                                <label for="no_telepon" class="block text-sm font-semibold text-gray-700 mb-2">
                                    No. Telepon
                                </label>
                                <input type="tel" 
                                       name="no_telepon" 
                                       id="no_telepon" 
                                       value="{{ profil.no_telepon|default:'' }}"
                                       class="form-input w-full">
                            </div>

                            <!-- Tanggal Lahir -->
                            <div>
                                <label for="tanggal_lahir" class="block text-sm font-semibold text-gray-700 mb-2">
                                    Tanggal Lahir
                                </label>
                                <input type="date" 
                                       name="tanggal_lahir" 
                                       id="tanggal_lahir" 
                                       value="{{ profil.tanggal_lahir|date:'Y-m-d'|default:'' }}"
                                       class="form-input w-full">
                            </div>

                            <!-- Jenis Kelamin -->
                            <div>
                                <label for="jenis_kelamin" class="block text-sm font-semibold text-gray-700 mb-2">
                                    Jenis Kelamin
                                </label>
                                <select name="jenis_kelamin" id="jenis_kelamin" class="form-select w-full">
                                    <option value="">Pilih Jenis Kelamin</option>
                                    <option value="L" {% if profil.jenis_kelamin == 'L' %}selected{% endif %}>Laki-laki</option>
                                    <option value="P" {% if profil.jenis_kelamin == 'P' %}selected{% endif %}>Perempuan</option>
                                </select>
                            </div>

                            <!-- Alamat -->
                            <div>
                                <label for="alamat" class="block text-sm font-semibold text-gray-700 mb-2">
                                    Alamat
                                </label>
                                <textarea name="alamat" 
                                          id="alamat" 
                                          rows="3" 
                                          class="form-input w-full">{{ profil.alamat|default:'' }}</textarea>
                            </div>
                        </div>
                    </div>

                    <!-- Job Information -->
                    <div class="space-y-3 sm:space-y-4 lg:space-y-6">
                        <h3 class="text-base sm:text-lg font-bold text-gray-900 flex items-center mb-3 sm:mb-4">
                            <div class="w-8 h-8 sm:w-10 sm:h-10 bg-gradient-to-br from-green-500 to-green-600 rounded-lg flex items-center justify-center mr-2 sm:mr-3 shadow-md">
                                <i class="fas fa-briefcase text-white text-sm sm:text-base"></i>
                            </div>
                            Informasi Jabatan
                        </h3>
                        
                        <div class="space-y-3 sm:space-y-4">
                            <!-- Jabatan -->
                            <div>
                                <label for="jabatan" class="block text-xs sm:text-sm font-semibold text-gray-700 mb-1.5 sm:mb-2">
                                    Jabatan
                                </label>
                                <input type="text" 
                                       name="jabatan" 
                                       id="jabatan" 
                                       value="{{ profil.jabatan|default:'' }}"
                                       class="form-input w-full">
                            </div>

                            <!-- Departemen -->
                            <div>
                                <label for="departemen" class="block text-sm font-semibold text-gray-700 mb-2">
                                    Departemen
                                </label>
                                <input type="text" 
                                       name="departemen" 
                                       id="departemen" 
                                       value="{{ profil.departemen|default:'' }}"
                                       class="form-input w-full">
                            </div>

                            <!-- Level Akses -->
                            <div>
                                <label for="level_akses" class="block text-sm font-semibold text-gray-700 mb-2">
                                    Level Akses <span class="text-red-500">*</span>
                                </label>
                                <select name="level_akses" id="level_akses" class="form-select w-full" required>
                                    <option value="">Pilih Level Akses</option>
                                    <option value="admin" {% if profil.level_akses == 'admin' %}selected{% endif %}>Administrator</option>
                                    <option value="supervisor" {% if profil.level_akses == 'supervisor' %}selected{% endif %}>Supervisor</option>
                                    <option value="operator" {% if profil.level_akses == 'operator' %}selected{% endif %}>Operator</option>
                                    <option value="viewer" {% if profil.level_akses == 'viewer' %}selected{% endif %}>Viewer</option>
                                </select>
                            </div>
                        </div>

                        <!-- Photo Upload -->
                        <div class="mt-4 sm:mt-6">
                            <h4 class="text-xs sm:text-sm font-semibold text-gray-700 mb-2 sm:mb-3 lg:mb-4">Foto Profil</h4>
                            
                            <!-- Current Photo -->
                            {% if profil.foto_profil %}
                            <div class="mb-3 sm:mb-4">
                                <p class="text-xs sm:text-sm text-gray-600 mb-1.5 sm:mb-2">Foto saat ini:</p>
                                <div class="w-20 h-20 sm:w-24 sm:h-24 rounded-lg overflow-hidden border-2 border-gray-200">
                                    <img src="{{ profil.foto_profil.url }}" alt="Current photo" class="w-full h-full object-cover">
                                </div>
                            </div>
                            {% endif %}

                            <!-- Upload New Photo -->
                            <div>
                                <label for="foto_profil" class="block text-xs sm:text-sm font-semibold text-gray-700 mb-1.5 sm:mb-2">
                                    Upload Foto Baru
                                </label>
                                <input type="file" 
                                       name="foto_profil" 
                                       id="foto_profil" 
                                       accept="image/*"
                                       class="form-input w-full"
                                       @change="previewImage($event)">
                                
                                <!-- Photo Preview -->
                                <div x-show="photoPreview" x-transition class="mt-3">
                                    <p class="text-sm text-gray-600 mb-2">Preview:</p>
                                    <div class="w-24 h-24 rounded-lg overflow-hidden border-2 border-gray-200">
                                        <img :src="photoPreview" alt="Preview" class="w-full h-full object-cover">
                                    </div>
                                </div>
                                
                                <p class="text-xs text-gray-500 mt-2">Format: JPG, PNG, GIF. Maksimal 2MB</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Form Actions -->
                <div class="mt-4 sm:mt-6 lg:mt-8 flex flex-col sm:flex-row sm:items-center sm:justify-end gap-2 sm:gap-3 lg:gap-4 pt-4 sm:pt-5 lg:pt-6 border-t-2 border-gray-200">
                    <button type="button" 
                            @click="activeTab = 'view'"
                            class="w-full sm:w-auto inline-flex items-center justify-center px-4 sm:px-6 py-2.5 sm:py-3 bg-white border-2 border-gray-300 rounded-xl text-xs sm:text-sm font-semibold text-gray-700 hover:bg-gray-50 hover:border-gray-400 transition-all duration-200 shadow-md hover:shadow-lg">
                        <i class="fas fa-times mr-1.5 sm:mr-2"></i>Batal
                    </button>
                    <button type="submit" 
                            class="w-full sm:w-auto inline-flex items-center justify-center px-6 sm:px-8 py-2.5 sm:py-3 bg-gradient-to-r from-green-500 to-green-600 text-white text-xs sm:text-sm font-semibold rounded-xl hover:from-green-600 hover:to-green-700 transition-all duration-200 shadow-lg hover:shadow-xl">
                        <i class="fas fa-save mr-1.5 sm:mr-2"></i>Simpan Perubahan
                    </button>
                </div>
            </form>
        </div>

        <!-- Change Password Tab -->
        <div x-show="activeTab === 'password'" x-transition class="p-3 sm:p-4 lg:p-6 xl:p-8">
            <form method="post" @submit="submitPasswordForm">
                {% csrf_token %}
                <input type="hidden" name="action" value="change_password">
                
                <div class="max-w-md mx-auto">
                    <h3 class="text-base sm:text-lg font-bold text-gray-900 mb-4 sm:mb-6 flex items-center">
                        <div class="w-8 h-8 sm:w-10 sm:h-10 bg-gradient-to-br from-red-500 to-red-600 rounded-lg flex items-center justify-center mr-2 sm:mr-3 shadow-md">
                            <i class="fas fa-key text-white text-sm sm:text-base"></i>
                        </div>
                        Ganti Password
                    </h3>
                    
                    <div class="space-y-3 sm:space-y-4">
                        <!-- Current Password -->
                        <div>
                            <label for="old_password" class="block text-xs sm:text-sm font-semibold text-gray-700 mb-1.5 sm:mb-2">
                                Password Saat Ini <span class="text-red-500">*</span>
                            </label>
                            <div class="relative">
                                <input type="password" 
                                       name="old_password" 
                                       id="old_password" 
                                       class="form-input w-full pr-10"
                                       required>
                                <button type="button" 
                                        @click="togglePassword('old_password')"
                                        class="absolute inset-y-0 right-0 pr-3 flex items-center">
                                    <i class="fas fa-eye text-gray-400 hover:text-gray-600"></i>
                                </button>
                            </div>
                        </div>

                        <!-- New Password -->
                        <div>
                            <label for="new_password1" class="block text-xs sm:text-sm font-semibold text-gray-700 mb-1.5 sm:mb-2">
                                Password Baru <span class="text-red-500">*</span>
                            </label>
                            <div class="relative">
                                <input type="password" 
                                       name="new_password1" 
                                       id="new_password1" 
                                       class="form-input w-full pr-10"
                                       required
                                       minlength="8">
                                <button type="button" 
                                        @click="togglePassword('new_password1')"
                                        class="absolute inset-y-0 right-0 pr-3 flex items-center">
                                    <i class="fas fa-eye text-gray-400 hover:text-gray-600"></i>
                                </button>
                            </div>
                            <p class="text-xs text-gray-500 mt-1">Minimal 8 karakter</p>
                        </div>

                        <!-- Confirm Password -->
                        <div>
                            <label for="new_password2" class="block text-xs sm:text-sm font-semibold text-gray-700 mb-1.5 sm:mb-2">
                                Konfirmasi Password Baru <span class="text-red-500">*</span>
                            </label>
                            <div class="relative">
                                <input type="password" 
                                       name="new_password2" 
                                       id="new_password2" 
                                       class="form-input w-full pr-10"
                                       required>
                                <button type="button" 
                                        @click="togglePassword('new_password2')"
                                        class="absolute inset-y-0 right-0 pr-3 flex items-center">
                                    <i class="fas fa-eye text-gray-400 hover:text-gray-600"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Password Strength Indicator -->
                    <div class="mt-4">
                        <div class="flex items-center justify-between text-sm text-gray-600 mb-2">
                            <span>Kekuatan Password:</span>
                            <span x-text="passwordStrength"></span>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-2">
                            <div class="h-2 rounded-full transition-all duration-300" 
                                 :class="passwordStrengthClass"
                                 :style="`width: ${passwordStrengthWidth}%`"></div>
                        </div>
                    </div>

                    <!-- Form Actions -->
                    <div class="mt-4 sm:mt-6 lg:mt-8 flex flex-col sm:flex-row sm:items-center sm:justify-end gap-2 sm:gap-3 lg:gap-4 pt-4 sm:pt-5 lg:pt-6 border-t-2 border-gray-200">
                        <button type="button" 
                                @click="activeTab = 'view'"
                                class="w-full sm:w-auto inline-flex items-center justify-center px-4 sm:px-6 py-2.5 sm:py-3 bg-white border-2 border-gray-300 rounded-xl text-xs sm:text-sm font-semibold text-gray-700 hover:bg-gray-50 hover:border-gray-400 transition-all duration-200 shadow-md hover:shadow-lg">
                            <i class="fas fa-times mr-1.5 sm:mr-2"></i>Batal
                        </button>
                        <button type="submit" 
                                class="w-full sm:w-auto inline-flex items-center justify-center px-6 sm:px-8 py-2.5 sm:py-3 bg-gradient-to-r from-red-500 to-red-600 text-white text-xs sm:text-sm font-semibold rounded-xl hover:from-red-600 hover:to-red-700 transition-all duration-200 shadow-lg hover:shadow-xl">
                            <i class="fas fa-key mr-1.5 sm:mr-2"></i>Ganti Password
                        </button>
                    </div>
                </div>
            </form>
        </div>

        <!-- Roles & Permissions Tab -->
        <div x-show="activeTab === 'roles'" x-transition class="p-3 sm:p-4 lg:p-6 xl:p-8">
            <div class="max-w-4xl mx-auto">
                <h3 class="text-base sm:text-lg font-bold text-gray-900 mb-4 sm:mb-6 flex items-center">
                    <div class="w-8 h-8 sm:w-10 sm:h-10 bg-gradient-to-br from-purple-500 to-purple-600 rounded-lg flex items-center justify-center mr-2 sm:mr-3 shadow-md">
                        <i class="fas fa-user-tag text-white text-sm sm:text-base"></i>
                    </div>
                    Role & Permission
                </h3>
                
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
                    <!-- Current Roles -->
                    <div class="bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl p-4 sm:p-5 lg:p-6 border-2 border-gray-200">
                        <h4 class="text-sm sm:text-base font-bold text-gray-900 mb-3 sm:mb-4 flex items-center">
                            <div class="w-7 h-7 sm:w-8 sm:h-8 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg flex items-center justify-center mr-2 shadow-md">
                                <i class="fas fa-user-tag text-white text-xs sm:text-sm"></i>
                            </div>
                            Role Aktif
                        </h4>
                        
                        {% if role_assignments %}
                            <div class="space-y-2.5 sm:space-y-3">
                                {% for assignment in role_assignments %}
                                <div class="bg-white rounded-xl p-3 sm:p-4 border-2 border-gray-200 hover:border-green-300 transition-all duration-200 shadow-sm hover:shadow-md">
                                    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-0">
                                        <div class="flex-1 min-w-0">
                                            <h5 class="text-sm sm:text-base font-semibold text-gray-900">{{ assignment.role.name }}</h5>
                                            <p class="text-xs sm:text-sm text-gray-600 mt-0.5">{{ assignment.role.description|default:"-" }}</p>
                                        </div>
                                        <span class="inline-flex items-center px-2 sm:px-2.5 py-0.5 rounded-full text-xs font-medium flex-shrink-0
                                            {% if assignment.is_active %}bg-green-100 text-green-800{% else %}bg-red-100 text-red-800{% endif %}">
                                            {% if assignment.is_active %}Aktif{% else %}Tidak Aktif{% endif %}
                                        </span>
                                    </div>
                                    {% if assignment.notes %}
                                    <p class="text-xs text-gray-500 mt-2">{{ assignment.notes }}</p>
                                    {% endif %}
                                </div>
                                {% endfor %}
                            </div>
                        {% else %}
                            <div class="text-center py-6 sm:py-8">
                                <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-3 sm:mb-4">
                                    <i class="fas fa-user-slash text-gray-400 text-2xl sm:text-3xl"></i>
                                </div>
                                <p class="text-xs sm:text-sm text-gray-600">Belum ada role yang ditetapkan</p>
                            </div>
                        {% endif %}
                    </div>

                    <!-- Available Roles -->
                    <div class="bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl p-4 sm:p-5 lg:p-6 border-2 border-gray-200">
                        <h4 class="text-sm sm:text-base font-bold text-gray-900 mb-3 sm:mb-4 flex items-center">
                            <div class="w-7 h-7 sm:w-8 sm:h-8 bg-gradient-to-br from-green-500 to-green-600 rounded-lg flex items-center justify-center mr-2 shadow-md">
                                <i class="fas fa-list text-white text-xs sm:text-sm"></i>
                            </div>
                            Role Tersedia
                        </h4>
                        
                        <div class="space-y-2.5 sm:space-y-3">
                            <div class="bg-white rounded-xl p-3 sm:p-4 border-2 border-gray-200 hover:border-green-300 transition-all duration-200 shadow-sm hover:shadow-md">
                                <h5 class="text-sm sm:text-base font-semibold text-gray-900">Administrator</h5>
                                <p class="text-xs sm:text-sm text-gray-600 mt-0.5">Akses penuh ke semua fitur sistem</p>
                                <div class="mt-2">
                                    <span class="inline-flex items-center px-2 py-0.5 rounded-lg text-xs font-medium bg-red-100 text-red-800">
                                        Admin
                                    </span>
                                </div>
                            </div>
                            
                            <div class="bg-white rounded-xl p-3 sm:p-4 border-2 border-gray-200 hover:border-green-300 transition-all duration-200 shadow-sm hover:shadow-md">
                                <h5 class="text-sm sm:text-base font-semibold text-gray-900">Supervisor</h5>
                                <p class="text-xs sm:text-sm text-gray-600 mt-0.5">Akses terbatas untuk mengawasi operasional</p>
                                <div class="mt-2">
                                    <span class="inline-flex items-center px-2 py-0.5 rounded-lg text-xs font-medium bg-yellow-100 text-yellow-800">
                                        Supervisor
                                    </span>
                                </div>
                            </div>
                            
                            <div class="bg-white rounded-xl p-3 sm:p-4 border-2 border-gray-200 hover:border-green-300 transition-all duration-200 shadow-sm hover:shadow-md">
                                <h5 class="text-sm sm:text-base font-semibold text-gray-900">Operator</h5>
                                <p class="text-xs sm:text-sm text-gray-600 mt-0.5">Akses untuk menjalankan tugas harian</p>
                                <div class="mt-2">
                                    <span class="inline-flex items-center px-2 py-0.5 rounded-lg text-xs font-medium bg-green-100 text-green-800">
                                        Operator
                                    </span>
                                </div>
                            </div>
                            
                            <div class="bg-white rounded-xl p-3 sm:p-4 border-2 border-gray-200 hover:border-green-300 transition-all duration-200 shadow-sm hover:shadow-md">
                                <h5 class="text-sm sm:text-base font-semibold text-gray-900">Viewer</h5>
                                <p class="text-xs sm:text-sm text-gray-600 mt-0.5">Hanya dapat melihat data</p>
                                <div class="mt-2">
                                    <span class="inline-flex items-center px-2 py-0.5 rounded-lg text-xs font-medium bg-gray-100 text-gray-800">
                                        Viewer
                                    </span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mt-4 sm:mt-6">
                            <a href="/admin/role/role/" 
                               class="inline-flex items-center px-3 sm:px-4 py-2 bg-gradient-to-r from-blue-500 to-blue-600 text-white text-xs sm:text-sm font-semibold rounded-lg hover:from-blue-600 hover:to-blue-700 transition-all duration-200 shadow-md hover:shadow-lg">
                                <i class="fas fa-cog mr-1.5 sm:mr-2"></i>Kelola Role (Admin Panel)
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Settings Tab -->
        <div x-show="activeTab === 'settings'" x-transition class="p-3 sm:p-4 lg:p-6 xl:p-8">
            <div class="max-w-2xl mx-auto">
                <h3 class="text-base sm:text-lg font-bold text-gray-900 mb-4 sm:mb-6 flex items-center">
                    <div class="w-8 h-8 sm:w-10 sm:h-10 bg-gradient-to-br from-purple-500 to-purple-600 rounded-lg flex items-center justify-center mr-2 sm:mr-3 shadow-md">
                        <i class="fas fa-cog text-white text-sm sm:text-base"></i>
                    </div>
                    Pengaturan Akun
                </h3>
                
                <div class="space-y-3 sm:space-y-4 lg:space-y-6">
                    <!-- Account Status -->
                    <div class="bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl p-3 sm:p-4 border-2 border-gray-200">
                        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-0">
                            <div class="flex-1">
                                <h4 class="text-xs sm:text-sm font-bold text-gray-900">Status Akun</h4>
                                <p class="text-xs sm:text-sm text-gray-600 mt-0.5">Kelola status aktif akun Anda</p>
                            </div>
                            <div class="flex items-center flex-shrink-0">
                                <span class="inline-flex items-center px-2 sm:px-2.5 py-0.5 rounded-full text-xs font-medium
                                    {% if profil.is_active %}bg-green-100 text-green-800{% else %}bg-red-100 text-red-800{% endif %}">
                                    <i class="fas fa-circle w-1.5 h-1.5 sm:w-2 sm:h-2 mr-1"></i>
                                    {% if profil.is_active %}Aktif{% else %}Tidak Aktif{% endif %}
                                </span>
                            </div>
                        </div>
                    </div>

                    <!-- Notification Settings -->
                    <div class="bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl p-3 sm:p-4 border-2 border-gray-200">
                        <h4 class="text-xs sm:text-sm font-bold text-gray-900 mb-2 sm:mb-3">Pengaturan Notifikasi</h4>
                        <div class="space-y-2 sm:space-y-3">
                            <label class="flex items-center">
                                <input type="checkbox" class="form-checkbox text-green-600">
                                <span class="ml-2 text-xs sm:text-sm text-gray-700">Email notifikasi untuk aktivitas inventaris</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" class="form-checkbox text-green-600">
                                <span class="ml-2 text-xs sm:text-sm text-gray-700">Notifikasi untuk peminjaman barang</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" class="form-checkbox text-green-600">
                                <span class="ml-2 text-xs sm:text-sm text-gray-700">Reminder untuk pengembalian barang</span>
                            </label>
                        </div>
                    </div>

                    <!-- Privacy Settings -->
                    <div class="bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl p-3 sm:p-4 border-2 border-gray-200">
                        <h4 class="text-xs sm:text-sm font-bold text-gray-900 mb-2 sm:mb-3">Pengaturan Privasi</h4>
                        <div class="space-y-2 sm:space-y-3">
                            <label class="flex items-center">
                                <input type="checkbox" class="form-checkbox text-green-600">
                                <span class="ml-2 text-xs sm:text-sm text-gray-700">Tampilkan profil saya di daftar pengguna</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" class="form-checkbox text-green-600">
                                <span class="ml-2 text-xs sm:text-sm text-gray-700">Izinkan pengguna lain melihat kontak saya</span>
                            </label>
                        </div>
                    </div>

                    <!-- Danger Zone -->
                    <div class="bg-gradient-to-br from-red-50 to-red-100 border-2 border-red-200 rounded-xl p-3 sm:p-4">
                        <h4 class="text-xs sm:text-sm font-bold text-red-900 mb-2 sm:mb-3">Zona Bahaya</h4>
                        <p class="text-xs sm:text-sm text-red-700 mb-3 sm:mb-4">Tindakan ini tidak dapat dibatalkan. Hati-hati!</p>
                        <button type="button" 
                                class="inline-flex items-center px-3 sm:px-4 py-2 bg-gradient-to-r from-red-500 to-red-600 text-white text-xs sm:text-sm font-semibold rounded-lg hover:from-red-600 hover:to-red-700 transition-all duration-200 shadow-md hover:shadow-lg"
                                id="deleteAccountBtn">
                            <i class="fas fa-trash mr-1.5 sm:mr-2"></i>Hapus Akun
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
/* Modern Form Styling */
.form-input, .form-select {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    color: #1e293b;
}

@media (min-width: 640px) {
    .form-input, .form-select {
        padding: 12px 16px;
    }
}

.form-input:focus, .form-select:focus {
    outline: none;
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1), 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
    background-color: #f0fdf4;
}

.form-input:hover, .form-select:hover {
    border-color: #cbd5e1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.form-checkbox {
    width: 18px;
    height: 18px;
    border: 2px solid #d1d5db;
    border-radius: 4px;
    background-color: #ffffff;
    transition: all 0.2s;
}

.form-checkbox:checked {
    background-color: #3b82f6;
    border-color: #3b82f6;
}

/* Button Styles */
.btn-primary {
    @apply inline-flex items-center justify-center px-4 sm:px-6 py-2.5 sm:py-3 bg-gradient-to-r from-green-500 to-green-600 text-white text-xs sm:text-sm font-semibold rounded-xl hover:from-green-600 hover:to-green-700 transition-all duration-200 shadow-lg hover:shadow-xl;
}

.btn-secondary {
    @apply inline-flex items-center justify-center px-4 sm:px-6 py-2.5 sm:py-3 bg-white border-2 border-gray-300 text-gray-700 text-xs sm:text-sm font-semibold rounded-xl hover:bg-gray-50 hover:border-gray-400 transition-all duration-200 shadow-md hover:shadow-lg;
}

/* Hide scrollbar for tab navigation */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* Card Hover Effect */
.card-hover {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Tab Transitions */
[x-cloak] {
    display: none !important;
}

/* Mobile Optimizations */
@media (max-width: 640px) {
    .form-input, .form-select {
        font-size: 16px;
        padding: 14px 16px;
    }
    
    button, a {
        min-height: 48px;
    }
}
</style>

<script>
function profileManager() {
    return {
        activeTab: 'view',
        photoPreview: null,
        passwordStrength: 'Lemah',
        passwordStrengthWidth: 0,
        passwordStrengthClass: 'bg-red-500',
        
        init() {
            // Initialize any default values
        },
        
        previewImage(event) {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = (e) => {
                    this.photoPreview = e.target.result;
                };
                reader.readAsDataURL(file);
            }
        },
        
        togglePassword(fieldId) {
            const field = document.getElementById(fieldId);
            const icon = field.nextElementSibling.querySelector('i');
            
            if (field.type === 'password') {
                field.type = 'text';
                icon.classList.remove('fa-eye');
                icon.classList.add('fa-eye-slash');
            } else {
                field.type = 'password';
                icon.classList.remove('fa-eye-slash');
                icon.classList.add('fa-eye');
            }
        },
        
        checkPasswordStrength() {
            const password = document.getElementById('new_password1')?.value || '';
            let strength = 0;
            
            if (password.length >= 8) strength++;
            if (/[a-z]/.test(password)) strength++;
            if (/[A-Z]/.test(password)) strength++;
            if (/[0-9]/.test(password)) strength++;
            if (/[^A-Za-z0-9]/.test(password)) strength++;
            
            if (strength <= 2) {
                this.passwordStrength = 'Lemah';
                this.passwordStrengthWidth = 25;
                this.passwordStrengthClass = 'bg-red-500';
            } else if (strength <= 3) {
                this.passwordStrength = 'Sedang';
                this.passwordStrengthWidth = 50;
                this.passwordStrengthClass = 'bg-yellow-500';
            } else if (strength <= 4) {
                this.passwordStrength = 'Kuat';
                this.passwordStrengthWidth = 75;
                this.passwordStrengthClass = 'bg-blue-500';
            } else {
                this.passwordStrength = 'Sangat Kuat';
                this.passwordStrengthWidth = 100;
                this.passwordStrengthClass = 'bg-green-500';
            }
        },
        
        submitProfileForm(event) {
            // Add loading state
            const submitBtn = event.target.querySelector('button[type="submit"]');
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Menyimpan...';
        },
        
        submitPasswordForm(event) {
            const newPassword = document.getElementById('new_password1').value;
            const confirmPassword = document.getElementById('new_password2').value;
            
            if (newPassword !== confirmPassword) {
                event.preventDefault();
                showError('Password Tidak Cocok', 'Password baru dan konfirmasi password tidak cocok!');
                return;
            }
            
            // Add loading state
            const submitBtn = event.target.querySelector('button[type="submit"]');
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Mengubah Password...';
        }
    }
}

// Password strength checker
document.addEventListener('DOMContentLoaded', function() {
    const passwordField = document.getElementById('new_password1');
    if (passwordField) {
        passwordField.addEventListener('input', function() {
            // Trigger Alpine.js method
            const alpineComponent = Alpine.$data(document.querySelector('[x-data]'));
            if (alpineComponent && alpineComponent.checkPasswordStrength) {
                alpineComponent.checkPasswordStrength();
            }
        });
    }
    
    // Handle delete account button
    const deleteAccountBtn = document.getElementById('deleteAccountBtn');
    if (deleteAccountBtn) {
        deleteAccountBtn.addEventListener('click', async function() {
            const confirmed = await confirmDelete('Apakah Anda yakin ingin menghapus akun? Tindakan ini tidak dapat dibatalkan!');
            if (confirmed) {
                // Redirect to delete account page or submit form
                showInfo('Hapus Akun', 'Fitur hapus akun akan diimplementasikan.');
            }
        });
    }
});
</script>
{% endblock %}