{% extends "layouts/dashboard.twig" %}

{% block title %}{{ __('auth.profile_title') }} - {% endblock %}

{% block content %}
<div class="row">
    <div class="col-lg-8">
        <div class="card shadow">
            <div class="card-header">
                <h3 class="card-title">{{ __('auth.profile_title') }}</h3>
            </div>
            <div class="card-body">
                {% if success %}
                    <div class="alert alert-success" role="alert">
                        {{ __('auth.profile_updated') }}
                    </div>
                {% endif %}
                
                {% if error %}
                    <div class="alert alert-danger" role="alert">
                        {{ error }}
                    </div>
                {% endif %}
                
                <form method="POST" action="{{ url('profile') }}" enctype="multipart/form-data">
                    {{ csrf_field() }}
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="name" class="form-label">{{ __('auth.name') }}</label>
                            <input type="text" class="form-control" id="name" name="name" value="{{ user.name }}" required>
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label for="email" class="form-label">{{ __('auth.email') }}</label>
                            <input type="email" class="form-control" id="email" name="email" value="{{ user.email }}" required>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="phone" class="form-label">{{ __('auth.phone') }}</label>
                            <input type="text" class="form-control" id="phone" name="phone" value="{{ user.phone }}">
                        </div>
                        
                        <div class="col-md-12 mb-3">
                            <label for="bio" class="form-label">{{ __('auth.bio') }}</label>
                            <textarea class="form-control" id="bio" name="bio" rows="4">{{ user.bio }}</textarea>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="avatar" class="form-label">{{ __('auth.avatar') }}</label>
                            <input type="file" class="form-control" id="avatar" name="avatar" accept="image/*">
                            <div id="avatarPreview" class="mt-2"></div>
                            {% if user.avatar %}
                                <div class="mt-2">
                                    <small class="form-text text-muted">{{ __('auth.current_avatar') }}:</small>
                                    <img src="{{ user.avatar_url }}" alt="{{ __('auth.current_avatar') }}" class="img-thumbnail" style="max-width: 100px;">
                                </div>
                            {% endif %}
                        </div>
                        
                        <div class="col-md-6 mb-3" x-data="{ show: false }">
                            <label for="current_password" class="form-label">{{ __('auth.current_password') }}</label>
                            <div class="input-group">
                                <input :type="show ? 'text' : 'password'" class="form-control" id="current_password" name="current_password" placeholder="{{ __('auth.current_password_placeholder') }}" autocomplete="new-password" value="">
                                <button class="btn btn-outline-secondary" type="button" @click="show = !show">
                                    <i :class="show ? 'bi bi-eye-slash' : 'bi bi-eye'"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3" x-data="{ show: false }">
                            <label for="password" class="form-label">{{ __('auth.new_password') }}</label>
                            <div class="input-group">
                                <input :type="show ? 'text' : 'password'" class="form-control" id="password" name="password" placeholder="{{ __('auth.new_password_placeholder') }}" autocomplete="new-password" value="">
                                <button class="btn btn-outline-secondary" type="button" @click="show = !show">
                                    <i :class="show ? 'bi bi-eye-slash' : 'bi bi-eye'"></i>
                                </button>
                            </div>
                        </div>
                        
                        <div class="col-md-6 mb-3" x-data="{ show: false }">
                            <label for="password_confirmation" class="form-label">{{ __('auth.password_confirmation') }}</label>
                            <div class="input-group">
                                <input :type="show ? 'text' : 'password'" class="form-control" id="password_confirmation" name="password_confirmation" placeholder="{{ __('auth.password_confirmation_placeholder') }}" autocomplete="new-password" value="">
                                <button class="btn btn-outline-secondary" type="button" @click="show = !show">
                                    <i :class="show ? 'bi bi-eye-slash' : 'bi bi-eye'"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-12">
                            <button type="submit" class="btn btn-primary">{{ __('auth.update_profile') }}</button>
                            <a href="{{ url('dashboard') }}" class="btn btn-secondary">{{ __('auth.cancel') }}</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    // Preview avatar before upload
    document.addEventListener('DOMContentLoaded', function() {
        const avatarInput = document.getElementById('avatar');
        const avatarPreview = document.getElementById('avatarPreview');
        
        if (avatarInput && avatarPreview) {
            avatarInput.addEventListener('change', function(e) {
                const file = e.target.files[0];
                
                if (file && file.type.startsWith('image/')) {
                    const reader = new FileReader();
                    
                    reader.onload = function(e) {
                        avatarPreview.innerHTML = `<img src="${e.target.result}" alt="{{ __('auth.preview') }}" class="img-thumbnail" style="max-width: 200px;">`;
                    };
                    
                    reader.readAsDataURL(file);
                }
            });
        }
    });
</script>
{% endblock %}