@extends('layouts.guru')

@section('title', 'Profil Guru')
@section('header', 'Profil Saya')

@section('content')
<div class="bg-white rounded-lg shadow max-w-2xl mx-auto">
    <div class="p-6 border-b">
        <h2 class="text-xl font-semibold">Edit Profil Guru</h2>
    </div>
    
    <form action="{{ route('guru.profile.update') }}" method="POST" enctype="multipart/form-data" class="p-6">
        @csrf
        @method('PUT')
        
        <div class="flex justify-center mb-6">
            <div class="relative">
                @if($user->foto)
                <img src="{{ asset('uploads/' . $user->foto) }}" class="w-24 h-24 rounded-full object-cover">
                @else
                <div class="w-24 h-24 rounded-full bg-purple-600 flex items-center justify-center text-white text-3xl">
                    {{ strtoupper(substr($user->name, 0, 1)) }}
                </div>
                @endif
            </div>
        </div>
        
        <div class="mb-4">
            <label class="block text-gray-700 font-semibold mb-2">Foto Profil</label>
            <input type="file" name="foto" accept="image/*" class="w-full border rounded-lg p-2">
        </div>
        
        <div class="mb-4">
            <label class="block text-gray-700 font-semibold mb-2">Nama Lengkap</label>
            <input type="text" name="name" value="{{ old('name', $user->name) }}" required class="w-full border rounded-lg p-2">
        </div>
        
        <div class="mb-4">
            <label class="block text-gray-700 font-semibold mb-2">Email</label>
            <input type="email" name="email" value="{{ old('email', $user->email) }}" required class="w-full border rounded-lg p-2">
        </div>
        
        <div class="mb-4">
            <label class="block text-gray-700 font-semibold mb-2">NIP</label>
            <input type="text" name="nip" value="{{ old('nip', $guru->nip ?? '') }}" class="w-full border rounded-lg p-2">
        </div>
        
        <div class="mb-4">
            <label class="block text-gray-700 font-semibold mb-2">NUPTK</label>
            <input type="text" name="nuptk" value="{{ old('nuptk', $guru->nuptk ?? '') }}" class="w-full border rounded-lg p-2">
        </div>
        
        <div class="mb-4">
            <label class="block text-gray-700 font-semibold mb-2">No Telepon</label>
            <input type="text" name="no_telepon" value="{{ old('no_telepon', $guru->no_telepon ?? '') }}" class="w-full border rounded-lg p-2">
        </div>
        
        <div class="mb-4">
            <label class="block text-gray-700 font-semibold mb-2">Alamat</label>
            <textarea name="alamat" rows="3" class="w-full border rounded-lg p-2">{{ old('alamat', $guru->alamat ?? '') }}</textarea>
        </div>
        
        <div class="border-t pt-4 mt-4">
            <h3 class="text-lg font-semibold mb-4">Ganti Password</h3>
            
            <div class="mb-4">
                <label class="block text-gray-700 font-semibold mb-2">Password Saat Ini</label>
                <div class="relative">
                    <input type="password" name="current_password" id="current_password" class="w-full border rounded-lg p-2 pr-10">
                    <button type="button" id="toggleCurrentPassword" class="absolute right-3 top-2.5 text-gray-400 hover:text-purple-600 transition">
                        <i class="fas fa-eye"></i>
                    </button>
                </div>
            </div>
            
            <div class="mb-4">
                <label class="block text-gray-700 font-semibold mb-2">Password Baru</label>
                <div class="relative">
                    <input type="password" name="new_password" id="new_password" class="w-full border rounded-lg p-2 pr-10">
                    <button type="button" id="toggleNewPassword" class="absolute right-3 top-2.5 text-gray-400 hover:text-purple-600 transition">
                        <i class="fas fa-eye"></i>
                    </button>
                </div>
            </div>
            
            <div class="mb-4">
                <label class="block text-gray-700 font-semibold mb-2">Konfirmasi Password Baru</label>
                <div class="relative">
                    <input type="password" name="new_password_confirmation" id="new_password_confirmation" class="w-full border rounded-lg p-2 pr-10">
                    <button type="button" id="toggleConfirmPassword" class="absolute right-3 top-2.5 text-gray-400 hover:text-purple-600 transition">
                        <i class="fas fa-eye"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <div class="flex justify-end space-x-2 mt-4">
            <a href="{{ route('guru.dashboard') }}" class="px-4 py-2 bg-gray-300 rounded-lg">Batal</a>
            <button type="submit" class="px-4 py-2 bg-purple-600 text-white rounded-lg">Update Profil</button>
        </div>
    </form>
</div>

<script>
    // Toggle Current Password
    const toggleCurrent = document.getElementById('toggleCurrentPassword');
    const currentPassword = document.getElementById('current_password');
    if (toggleCurrent && currentPassword) {
        toggleCurrent.addEventListener('click', function() {
            const type = currentPassword.getAttribute('type') === 'password' ? 'text' : 'password';
            currentPassword.setAttribute('type', type);
            this.querySelector('i').classList.toggle('fa-eye');
            this.querySelector('i').classList.toggle('fa-eye-slash');
        });
    }
    
    // Toggle New Password
    const toggleNew = document.getElementById('toggleNewPassword');
    const newPassword = document.getElementById('new_password');
    if (toggleNew && newPassword) {
        toggleNew.addEventListener('click', function() {
            const type = newPassword.getAttribute('type') === 'password' ? 'text' : 'password';
            newPassword.setAttribute('type', type);
            this.querySelector('i').classList.toggle('fa-eye');
            this.querySelector('i').classList.toggle('fa-eye-slash');
        });
    }
    
    // Toggle Confirm Password
    const toggleConfirm = document.getElementById('toggleConfirmPassword');
    const confirmPassword = document.getElementById('new_password_confirmation');
    if (toggleConfirm && confirmPassword) {
        toggleConfirm.addEventListener('click', function() {
            const type = confirmPassword.getAttribute('type') === 'password' ? 'text' : 'password';
            confirmPassword.setAttribute('type', type);
            this.querySelector('i').classList.toggle('fa-eye');
            this.querySelector('i').classList.toggle('fa-eye-slash');
        });
    }
</script>
@endsection