@extends('layouts.layout')

@section('title', __('ui.common.edit') . ' — ' . $user->name)

@section('content')

    <div class="page-header">
        <div>
            <h1 class="page-title">
                <i class="fas fa-user-edit me-2" style="color:var(--warning);"></i>
                {{ __('ui.common.edit') }} — {{ $user->name }}
            </h1>
            <small class="text-muted">
                <a href="{{ route('users.index') }}" class="text-muted">
                    <i class="fas fa-users me-1"></i>{{ __('ui.users.title') }}
                </a>
                <i class="fas fa-chevron-right mx-1" style="font-size:0.6rem;"></i>
                {{ $user->name }}
            </small>
        </div>
        <a href="{{ route('users.index') }}" class="btn btn-secondary btn-sm">
            <i class="fas fa-arrow-left me-1"></i>{{ __('ui.common.back') }}
        </a>
    </div>

    <div class="row justify-content-center">
        <div class="col-12 col-md-8 col-lg-6">

            {{-- User Info Banner --}}
            <div class="card mb-3" style="border-left:4px solid var(--warning);">
                <div class="card-body d-flex align-items-center gap-3 py-2">
                    <div style="width:42px;height:42px;border-radius:50%;
                            background:linear-gradient(135deg,var(--warning),#d97706);
                            display:flex;align-items:center;justify-content:center;
                            color:white;font-weight:800;font-size:1.1rem;flex-shrink:0;">
                        {{ strtoupper(substr($user->name, 0, 1)) }}
                    </div>
                    <div class="flex-grow-1">
                        <div style="font-weight:700;color:var(--text-primary);">{{ $user->name }}</div>
                        <small class="text-muted">{{ $user->email }}</small>
                    </div>
                    <div>
                        @if($user->role === 'admin')
                            <span class="badge" style="background:rgba(239,68,68,0.15);color:var(--danger);">
                            <i class="fas fa-shield-alt me-1"></i>{{ __('ui.users.admin') }}
                        </span>
                        @else
                            <span class="badge" style="background:rgba(59,130,246,0.15);color:var(--primary-500);">
                            <i class="fas fa-user me-1"></i>{{ __('ui.users.operator') }}
                        </span>
                        @endif
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-edit me-2 text-warning"></i>
                        {{ app()->getLocale() === 'fr' ? 'Modifier les informations' : 'Edit Information' }}
                    </h5>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('users.update', $user) }}">
                        @csrf
                        @method('PUT')

                        {{-- Name --}}
                        <div class="mb-3">
                            <label class="form-label">
                                <i class="fas fa-user me-1 text-muted"></i>
                                {{ __('ui.users.name') }}
                                <span class="text-danger">*</span>
                            </label>
                            <input type="text" name="name"
                                   class="form-control @error('name') is-invalid @enderror"
                                   value="{{ old('name', $user->name) }}" required>
                            @error('name')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Email --}}
                        <div class="mb-3">
                            <label class="form-label">
                                <i class="fas fa-envelope me-1 text-muted"></i>
                                {{ __('ui.users.email') }}
                                <span class="text-danger">*</span>
                            </label>
                            <input type="email" name="email"
                                   class="form-control @error('email') is-invalid @enderror"
                                   value="{{ old('email', $user->email) }}" required>
                            @error('email')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Role --}}
                        <div class="mb-3">
                            <label class="form-label">
                                <i class="fas fa-shield-alt me-1 text-muted"></i>
                                {{ __('ui.users.role') }}
                                <span class="text-danger">*</span>
                            </label>
                            <div class="row g-2">
                                <div class="col-6">
                                    <label class="d-block" style="cursor:pointer;">
                                        <input type="radio" name="role" value="operator"
                                               {{ old('role', $user->role) === 'operator' ? 'checked' : '' }}
                                               class="d-none role-radio" id="role_operator">
                                        <div class="role-card" id="card_operator"
                                             style="border:2px solid var(--border-color);border-radius:var(--border-radius);
                                                padding:0.875rem;text-align:center;transition:var(--transition);
                                                background:var(--bg-tertiary);">
                                            <i class="fas fa-user fa-lg mb-2" style="color:var(--primary-500);"></i>
                                            <div style="font-weight:600;font-size:0.8rem;color:var(--text-primary);">
                                                {{ __('ui.users.operator') }}
                                            </div>
                                            <small class="text-muted" style="font-size:0.65rem;">
                                                {{ app()->getLocale() === 'fr' ? 'Accès standard' : 'Standard access' }}
                                            </small>
                                        </div>
                                    </label>
                                </div>
                                <div class="col-6">
                                    <label class="d-block" style="cursor:pointer;">
                                        <input type="radio" name="role" value="admin"
                                               {{ old('role', $user->role) === 'admin' ? 'checked' : '' }}
                                               class="d-none role-radio" id="role_admin">
                                        <div class="role-card" id="card_admin"
                                             style="border:2px solid var(--border-color);border-radius:var(--border-radius);
                                                padding:0.875rem;text-align:center;transition:var(--transition);
                                                background:var(--bg-tertiary);">
                                            <i class="fas fa-shield-alt fa-lg mb-2" style="color:var(--danger);"></i>
                                            <div style="font-weight:600;font-size:0.8rem;color:var(--text-primary);">
                                                {{ __('ui.users.admin') }}
                                            </div>
                                            <small class="text-muted" style="font-size:0.65rem;">
                                                {{ app()->getLocale() === 'fr' ? 'Accès complet' : 'Full access' }}
                                            </small>
                                        </div>
                                    </label>
                                </div>
                            </div>
                            @error('role')
                            <div class="text-danger" style="font-size:0.75rem;margin-top:0.25rem;">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Language --}}
                        <div class="mb-3">
                            <label class="form-label">
                                <i class="fas fa-globe me-1 text-muted"></i>
                                {{ __('ui.change_language') }}
                            </label>
                            <div class="row g-2">
                                <div class="col-6">
                                    <label class="d-block" style="cursor:pointer;">
                                        <input type="radio" name="preferred_lang" value="en"
                                               {{ old('preferred_lang', $user->preferred_lang) === 'en' ? 'checked' : '' }}
                                               class="d-none lang-radio" id="lang_en">
                                        <div class="lang-card" id="langcard_en"
                                             style="border:2px solid var(--border-color);border-radius:var(--border-radius);
                                                padding:0.75rem;text-align:center;transition:var(--transition);
                                                background:var(--bg-tertiary);">
                                            <div style="font-size:1.25rem;">🇬🇧</div>
                                            <div style="font-weight:600;font-size:0.8rem;color:var(--text-primary);">{{ __('ui.english') }}</div>
                                        </div>
                                    </label>
                                </div>
                                <div class="col-6">
                                    <label class="d-block" style="cursor:pointer;">
                                        <input type="radio" name="preferred_lang" value="fr"
                                               {{ old('preferred_lang', $user->preferred_lang) === 'fr' ? 'checked' : '' }}
                                               class="d-none lang-radio" id="lang_fr">
                                        <div class="lang-card" id="langcard_fr"
                                             style="border:2px solid var(--border-color);border-radius:var(--border-radius);
                                                padding:0.75rem;text-align:center;transition:var(--transition);
                                                background:var(--bg-tertiary);">
                                            <div style="font-size:1.25rem;">🇫🇷</div>
                                            <div style="font-weight:600;font-size:0.8rem;color:var(--text-primary);">{{ __('ui.french') }}</div>
                                        </div>
                                    </label>
                                </div>
                            </div>
                        </div>

                        {{-- Password --}}
                        <div class="mb-3">
                            <label class="form-label">
                                <i class="fas fa-lock me-1 text-muted"></i>
                                {{ __('ui.users.password') }}
                                <span class="text-muted">({{ __('ui.common.optional') }})</span>
                            </label>
                            <div class="input-group">
                                <input type="password" name="password" id="password"
                                       class="form-control @error('password') is-invalid @enderror"
                                       placeholder="{{ app()->getLocale() === 'fr' ? 'Laisser vide pour ne pas changer' : 'Leave blank to keep current' }}">
                                <button type="button" class="btn btn-secondary"
                                        onclick="togglePass('password', this)"
                                        style="border:1px solid var(--dark-600);">
                                    <i class="fas fa-eye"></i>
                                </button>
                                @error('password')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        {{-- Password Confirm --}}
                        <div class="mb-4">
                            <label class="form-label">
                                <i class="fas fa-lock me-1 text-muted"></i>
                                {{ __('ui.users.password_conf') }}
                            </label>
                            <div class="input-group">
                                <input type="password" name="password_confirmation" id="password_confirmation"
                                       class="form-control"
                                       placeholder="{{ app()->getLocale() === 'fr' ? 'Confirmer le nouveau mot de passe' : 'Confirm new password' }}">
                                <button type="button" class="btn btn-secondary"
                                        onclick="togglePass('password_confirmation', this)"
                                        style="border:1px solid var(--dark-600);">
                                    <i class="fas fa-eye"></i>
                                </button>
                            </div>
                        </div>

                        {{-- Actions --}}
                        <div class="d-flex gap-2 justify-content-end">
                            <a href="{{ route('users.index') }}" class="btn btn-secondary">
                                <i class="fas fa-times me-1"></i>{{ __('ui.common.cancel') }}
                            </a>
                            <button type="submit" class="btn btn-warning">
                                <i class="fas fa-save me-1"></i>{{ __('ui.common.save') }}
                            </button>
                        </div>

                    </form>
                </div>
            </div>

        </div>
    </div>

@endsection

@push('scripts')
    <script>
        function togglePass(id, btn) {
            const input = document.getElementById(id);
            const icon  = btn.querySelector('i');
            if (input.type === 'password') {
                input.type = 'text';
                icon.className = 'fas fa-eye-slash';
            } else {
                input.type = 'password';
                icon.className = 'fas fa-eye';
            }
        }

        function updateRoleCards() {
            document.querySelectorAll('.role-radio').forEach(function(radio) {
                const card = document.getElementById('card_' + radio.value);
                if (radio.checked) {
                    card.style.borderColor = radio.value === 'admin' ? 'var(--danger)' : 'var(--primary-500)';
                    card.style.background  = radio.value === 'admin' ? 'rgba(239,68,68,0.08)' : 'rgba(59,130,246,0.08)';
                } else {
                    card.style.borderColor = 'var(--border-color)';
                    card.style.background  = 'var(--bg-tertiary)';
                }
            });
        }

        function updateLangCards() {
            document.querySelectorAll('.lang-radio').forEach(function(radio) {
                const card = document.getElementById('langcard_' + radio.value);
                if (radio.checked) {
                    card.style.borderColor = 'var(--primary-500)';
                    card.style.background  = 'rgba(59,130,246,0.08)';
                } else {
                    card.style.borderColor = 'var(--border-color)';
                    card.style.background  = 'var(--bg-tertiary)';
                }
            });
        }

        document.addEventListener('DOMContentLoaded', function () {
            updateRoleCards();
            updateLangCards();
            document.querySelectorAll('.role-radio').forEach(r => r.addEventListener('change', updateRoleCards));
            document.querySelectorAll('.lang-radio').forEach(r => r.addEventListener('change', updateLangCards));
        });
    </script>
@endpush