{% extends 'base.html.twig' %}

{% block title %}Mon profil — RentAuto{% endblock %}

{% block content %}
<div class="row justify-content-center g-4" style="max-width:860px;margin:auto">

    <!-- ── Infos du compte ── -->
    <div class="col-12">
        <div class="card shadow-sm">
            <div class="card-header bg-white">
                <h5 class="mb-0"><i class="fas fa-user-circle me-2 text-primary"></i>Mon profil</h5>
            </div>
            <div class="card-body p-4">
                <div class="d-flex align-items-center gap-4 mb-4">
                    <!-- Avatar -->
                    <div class="bg-primary rounded-circle d-flex align-items-center justify-content-center flex-shrink-0"
                         style="width:72px;height:72px">
                        <span class="text-white fs-3 fw-bold">
                            {{ user.firstName|slice(0,1)|upper }}{{ user.lastName|slice(0,1)|upper }}
                        </span>
                    </div>
                    <div>
                        <h4 class="mb-1">{{ user.firstName }} {{ user.lastName }}</h4>
                        <span class="badge bg-secondary me-1">
                            {% if user.isSuperAdmin() %}{{ user_role_label('ROLE_SUPER_ADMIN') }}
                            {% elseif user.isAdmin() %}{{ user_role_label('ROLE_ADMIN') }}
                            {% else %}{{ user_role_label('ROLE_USER') }}{% endif %}
                        </span>
                        <span class="badge {% if user.status == 'active' %}bg-success{% else %}bg-danger{% endif %}">
                            {{ user.status|capitalize }}
                        </span>
                    </div>
                </div>

                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label text-muted small">Prénom</label>
                        <div class="form-control bg-light">{{ user.firstName }}</div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label text-muted small">Nom</label>
                        <div class="form-control bg-light">{{ user.lastName }}</div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label text-muted small">Email</label>
                        <div class="form-control bg-light">{{ user.email }}</div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label text-muted small">Téléphone</label>
                        <div class="form-control bg-light">{{ user.phoneNumber ?? '—' }}</div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label text-muted small">Agence</label>
                        {% if is_granted('ROLE_SUPER_ADMIN') %}
                            <form method="POST" action="{{ path('app_profile_switch_agency') }}" class="d-flex gap-2">
                                <input type="hidden" name="_token" value="{{ csrf_token('switch_agency') }}">
                                <select name="agency_id" class="form-select form-select-sm">
                                    {% for agency in agencies %}
                                        <option value="{{ agency.id }}"
                                            {% if user.agency and user.agency.id == agency.id %}selected{% endif %}>
                                            {{ agency.name }} ({{ agency.code }})
                                        </option>
                                    {% endfor %}
                                </select>
                                <button type="submit" class="btn btn-sm btn-warning text-nowrap">
                                    <i class="fas fa-save"></i>
                                </button>
                            </form>
                            {% for msg in app.flashes('agency_error') %}
                                <div class="text-danger small mt-1"><i class="fas fa-exclamation-circle me-1"></i>{{ msg }}</div>
                            {% endfor %}
                            {% for msg in app.flashes('agency_success') %}
                                <div class="text-success small mt-1"><i class="fas fa-check-circle me-1"></i>{{ msg }}</div>
                            {% endfor %}
                        {% else %}
                            <div class="form-control bg-light">
                                {% if user.agency %}
                                    <i class="fas fa-building me-1 text-primary"></i>{{ user.agency.name }}
                                {% else %}
                                    <span class="text-muted fst-italic">—</span>
                                {% endif %}
                            </div>
                        {% endif %}
                    </div>
                    <div class="col-md-6">
                        <label class="form-label text-muted small">Dernière connexion</label>
                        <div class="form-control bg-light">
                            {{ user.lastLoginAt ? user.lastLoginAt|date('d/m/Y à H:i') : '—' }}
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label text-muted small">Membre depuis</label>
                        <div class="form-control bg-light">{{ user.createdAt|date('d/m/Y') }}</div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label text-muted small">Rôles</label>
                        <div class="form-control bg-light">
                            {% for role in user.roles %}
                                {% if role != 'ROLE_USER' %}
                                    <span class="badge bg-primary me-1">{{ user_role_label(role) }}</span>
                                {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- ── Changer le mot de passe ── -->
    <div class="col-12">
        <div class="card shadow-sm">
            <div class="card-header bg-white">
                <h5 class="mb-0"><i class="fas fa-lock me-2 text-warning"></i>Changer le mot de passe</h5>
            </div>
            <div class="card-body p-4">

                {% for msg in app.flashes('password_error') %}
                    <div class="alert alert-danger d-flex align-items-center gap-2">
                        <i class="fas fa-exclamation-circle"></i> {{ msg }}
                    </div>
                {% endfor %}

                {% for msg in app.flashes('password_success') %}
                    <div class="alert alert-success d-flex align-items-center gap-2">
                        <i class="fas fa-check-circle"></i> {{ msg }}
                    </div>
                {% endfor %}

                <form method="POST" action="{{ path('app_profile_password') }}" id="passwordForm">
                    <input type="hidden" name="_token" value="{{ csrf_token('change_password') }}">
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label fw-semibold">Mot de passe actuel <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <input type="password" name="current_password" class="form-control"
                                       id="currentPassword" required autocomplete="current-password" />
                                <button type="button" class="btn btn-outline-secondary toggle-password" data-target="currentPassword">
                                    <i class="fas fa-eye"></i>
                                </button>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-semibold">Nouveau mot de passe <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <input type="password" name="new_password" class="form-control"
                                       id="newPassword" required minlength="8" autocomplete="new-password" />
                                <button type="button" class="btn btn-outline-secondary toggle-password" data-target="newPassword">
                                    <i class="fas fa-eye"></i>
                                </button>
                            </div>
                            <div class="form-text text-muted">Minimum 8 caractères.</div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-semibold">Confirmer <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <input type="password" name="confirm_password" class="form-control"
                                       id="confirmPassword" required autocomplete="new-password" />
                                <button type="button" class="btn btn-outline-secondary toggle-password" data-target="confirmPassword">
                                    <i class="fas fa-eye"></i>
                                </button>
                            </div>
                            <div id="confirmFeedback" class="form-text"></div>
                        </div>
                    </div>
                    <div class="mt-3">
                        <button type="submit" class="btn btn-warning">
                            <i class="fas fa-key me-2"></i>Changer le mot de passe
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

</div>

<script type="module">
// Toggle visibilité mot de passe
document.querySelectorAll('.toggle-password').forEach(btn => {
    btn.addEventListener('click', () => {
        const input = document.getElementById(btn.dataset.target)
        const isText = input.type === 'text'
        input.type = isText ? 'password' : 'text'
        btn.querySelector('i').className = isText ? 'fas fa-eye' : 'fas fa-eye-slash'
    })
})

// Vérification confirmation en temps réel
const newPwd     = document.getElementById('newPassword')
const confirmPwd = document.getElementById('confirmPassword')
const feedback   = document.getElementById('confirmFeedback')

confirmPwd.addEventListener('input', () => {
    if (!confirmPwd.value) { feedback.textContent = ''; return }
    if (confirmPwd.value === newPwd.value) {
        feedback.innerHTML = '<span class="text-success"><i class="fas fa-check me-1"></i>Les mots de passe correspondent</span>'
    } else {
        feedback.innerHTML = '<span class="text-danger"><i class="fas fa-times me-1"></i>Les mots de passe ne correspondent pas</span>'
    }
})
</script>
{% endblock %}