@extends($layout)
@section('page_title', $isAdmin ? 'Perfil' : 'Meu Perfil')

{{-- Topbar do painel admin (ignorado pelo layout welcome) --}}
@section('page-header')
<div class="saas-row-gap-md">
    <a href="{{ route('admin_page') }}" class="saas-btn">
        <i class="bi bi-arrow-left"></i> Voltar
    </a>
    <h1><i class="bi bi-person-circle mp-page-icon"></i>Perfil</h1>
</div>
@endsection

@section('content')
<div class="{{ $isAdmin ? 'container-fluid mt-2' : 'mp-wrap' }}">

    {{-- Cabeçalho só para o layout welcome --}}
    @if(!$isAdmin)
    <div class="mp-header">
        <div class="mp-header-left">
            <p>Portal de Serviços</p>
            <h1>
                <i class="bi bi-person-circle mp-h1-icon"></i>
                Meu Perfil
            </h1>
        </div>
        <a href="/acompanhamento" class="mp-btn mp-btn-ghost">
            <i class="bi bi-arrow-left"></i> Voltar
        </a>
    </div>
    @endif

    <div class="{{ $isAdmin ? 'mp-admin-grid' : 'mp-grid' }}">

        {{-- ── Col 1: Identidade ── --}}
        <div class="{{ $isAdmin ? 'saas-stack-sm' : 'saas-stack-md' }}">

            <div class="mp-card">
                <div class="mp-card-header">
                    <div class="mp-card-header-icon blue"><i class="bi bi-person-fill"></i></div>
                    <h3>Identidade</h3>
                </div>
                <div class="mp-card-body">
                    <div class="mp-avatar-wrap">
                        <form action="{{ route('perfil.store') }}" method="post" enctype="multipart/form-data" id="fotoForm">
                            @csrf
                            <input type="hidden" name="user_user" value="{{ $user_info->id }}">
                            <div class="mp-avatar-ring" id="avatarRing" title="Clique para alterar foto">
                                <img src="{{ \App\Helpers\UserHelper::photoUrl($user_info->photo) }}"
                                     id="avatarImg" alt="Foto de perfil">
                                <div class="mp-avatar-overlay"><i class="bi bi-camera-fill"></i></div>
                            </div>
                            <input type="file" id="fotoInput" name="imagem" accept="image/*" class="d-none">
                        </form>
                        <p class="mp-avatar-name">{{ $user_info->name }}</p>
                        @if($user_info->role_name)
                        <span class="mp-badge mp-badge-blue">
                            <i class="bi bi-briefcase-fill"></i>{{ $user_info->role_name }}
                        </span>
                        @endif
                    </div>

                    <div id="fotoActions" class="mp-foto-actions">
                        <div class="mp-btn-row mt-0">
                            <button type="button" id="fotoCancelar" class="mp-btn mp-btn-ghost mp-btn-sm">
                                <i class="bi bi-x"></i> Cancelar
                            </button>
                            <button type="submit" form="fotoForm" class="mp-btn mp-btn-primary mp-btn-sm">
                                <i class="bi bi-cloud-upload-fill"></i> Salvar foto
                            </button>
                        </div>
                    </div>

                    <div class="mp-info-row mp-info-row--no-border">
                        <span class="mp-info-label">Matrícula</span>
                        <span class="mp-info-value">{{ $user_info->registration ?? '—' }}</span>
                    </div>
                    <div class="mp-info-row">
                        <span class="mp-info-label">Setor</span>
                        <span class="mp-info-value">{{ $user_info->sector_name ?? '—' }}</span>
                    </div>
                    @if($user_info->hire_date)
                    <div class="mp-info-row">
                        <span class="mp-info-label">Na empresa desde</span>
                        <span class="mp-info-value">{{ \Carbon\Carbon::parse($user_info->hire_date)->format('d/m/Y') }}</span>
                    </div>
                    @endif
                    @if($user_info->sit_description)
                    <div class="mp-info-row">
                        <span class="mp-info-label">Situação</span>
                        <span class="mp-info-value">
                            <span class="mp-badge mp-badge-green">{{ $user_info->sit_description }}</span>
                        </span>
                    </div>
                    @endif
                </div>
            </div>

            {{-- Admin: Emblemas | Usuário: Info pessoal --}}
            @if($isAdmin)
            @php
                if ($tec_count_tot >= 1000)    { $emb_next = null; $emb_pct = 100; }
                elseif ($tec_count_tot >= 500) { $emb_next = 1000; $emb_pct = round(($tec_count_tot - 500) / 500 * 100); }
                elseif ($tec_count_tot >= 100) { $emb_next = 500;  $emb_pct = round(($tec_count_tot - 100) / 400 * 100); }
                else                           { $emb_next = 100;  $emb_pct = round($tec_count_tot / 100 * 100); }

                // Rank / título atual do técnico
                if     ($tec_count_tot >= 1000) { $rankName = 'Mestre';   $rankCls = 'mestre';   $rankIcon = 'bi-trophy-fill'; }
                elseif ($tec_count_tot >= 500)  { $rankName = 'Especialista'; $rankCls = 'especialista'; $rankIcon = 'bi-award-fill'; }
                elseif ($tec_count_tot >= 100)  { $rankName = 'Iniciante';   $rankCls = 'iniciante';   $rankIcon = 'bi-star-fill'; }
                else                            { $rankName = 'Recruta';  $rankCls = 'recruta';  $rankIcon = 'bi-shield-fill'; }

                $embList = [
                    ['nome' => 'Iniciante',   'cls' => 'iniciante',   'icon' => 'bi-star-fill',  'req' => 100,  'earned' => $tec_count_tot >= 100],
                    ['nome' => 'Especialista', 'cls' => 'especialista', 'icon' => 'bi-award-fill', 'req' => 500,  'earned' => $tec_count_tot >= 500],
                    ['nome' => 'Mestre',   'cls' => 'mestre',   'icon' => 'bi-trophy-fill', 'req' => 1000, 'earned' => $tec_count_tot >= 1000],
                ];
                $embEarnedCount = collect($embList)->where('earned', true)->count();
            @endphp
            <div class="mp-card emb-card">
                <div class="mp-card-header">
                    <div class="mp-card-header-icon amber"><i class="bi bi-trophy-fill"></i></div>
                    <h3>Conquistas</h3>
                    <span class="emb-count-badge ml-auto">{{ $embEarnedCount }}/3</span>
                </div>

                {{-- Hero: rank atual --}}
                <div class="emb-hero emb-rank-{{ $rankCls }}">
                    <div class="emb-hero-medal">
                        <i class="bi {{ $rankIcon }}"></i>
                    </div>
                    <div class="emb-hero-info">
                        <span class="emb-hero-label">Seu nível</span>
                        <span class="emb-hero-rank">{{ $rankName }}</span>
                        <span class="emb-hero-xp"><strong>{{ $tec_count_tot }}</strong> chamados solucionados</span>
                    </div>
                </div>

                {{-- Grade de emblemas --}}
                <div class="emb-grid">
                    @foreach($embList as $emb)
                    <div class="emb-tile @if($emb['earned']) earned @endif">
                        <div class="emb-icon-wrap emb-{{ $emb['cls'] }} @if($emb['earned']) earned @endif">
                            <i class="bi {{ $emb['icon'] }}"></i>
                            @if(!$emb['earned'])<div class="emb-lock"><i class="bi bi-lock-fill"></i></div>@endif
                        </div>
                        <span class="emb-name">{{ $emb['nome'] }}</span>
                        <span class="emb-req">{{ $emb['req'] }}+</span>
                    </div>
                    @endforeach
                </div>

                @if($emb_next)
                <div class="emb-progress-wrap">
                    <div class="emb-progress-label">
                        <span><i class="bi bi-arrow-up-right-circle mr-1"></i>Próximo emblema</span>
                        <span>{{ $tec_count_tot }} / {{ $emb_next }}</span>
                    </div>
                    <div class="emb-progress-bar">
                        <div class="emb-progress-fill" style="width:{{ $emb_pct }}%;"></div>
                    </div>
                </div>
                @else
                <p class="emb-all-done"><i class="bi bi-stars mr-1"></i>Todas as conquistas desbloqueadas!</p>
                @endif
            </div>

            @else
            @if($user_info->birth || $user_info->education)
            <div class="mp-card">
                <div class="mp-card-header">
                    <div class="mp-card-header-icon slate"><i class="bi bi-info-circle-fill"></i></div>
                    <h3>Informações pessoais</h3>
                </div>
                <div class="mp-card-body mp-card-body-compact">
                    @if($user_info->birth)
                    <div class="mp-info-row mp-info-row--no-border">
                        <span class="mp-info-label">Nascimento</span>
                        <span class="mp-info-value">{{ \Carbon\Carbon::parse($user_info->birth)->format('d/m/Y') }}</span>
                    </div>
                    @endif
                    @if($user_info->education)
                    <div class="mp-info-row">
                        <span class="mp-info-label">Escolaridade</span>
                        <span class="mp-info-value">{{ $user_info->education }}</span>
                    </div>
                    @endif
                </div>
            </div>
            @endif
            @endif

        </div>{{-- /col 1 --}}

        {{-- ── Col 2 ── --}}
        <div class="{{ $isAdmin ? 'saas-stack-sm' : 'saas-stack-md' }}">

            @if($isAdmin)
            {{-- Stats este mês --}}
            <div class="mp-card">
                <div class="mp-card-header">
                    <div class="mp-card-header-icon cyan"><i class="bi bi-calendar3-week-fill"></i></div>
                    <h3>Este mês</h3>
                </div>
                <div class="mp-card-body mp-card-body-compact">
                    <div class="mp-stat-row mp-stat-row--no-border">
                        <span class="mp-stat-label"><i class="bi bi-check-lg mr-2 saas-text-success"></i>Solucionados</span>
                        <span class="mp-stat-value saas-text-success">{{ $tec_count }}</span>
                    </div>
                    <div class="mp-stat-row">
                        <span class="mp-stat-label"><i class="bi bi-chat-left-dots-fill mr-2 saas-text-warning"></i>Acompanhados</span>
                        <span class="mp-stat-value saas-text-warning">{{ $acomp }}</span>
                    </div>
                    <div class="mp-compare mp-compare--bordered">
                        <div class="mp-compare-block">
                            <div class="mp-compare-label">Mês anterior</div>
                            <div class="mp-compare-value">{{ $chamado_past }}</div>
                        </div>
                        <div class="mp-compare-delta">
                            @if($chamado_past < $tec_count)
                                <span class="mp-compare-delta-up">+{{ $tec_count - $chamado_past }}</span>
                                <i class="bi bi-capslock-fill mp-compare-icon-up"></i>
                            @elseif($chamado_past == $tec_count)
                                <i class="bi bi-pause-fill mp-compare-icon-even"></i>
                            @else
                                <span class="mp-compare-delta-down">-{{ $chamado_past - $tec_count }}</span>
                                <i class="bi bi-capslock-fill mp-compare-icon-down"></i>
                            @endif
                        </div>
                        <div class="mp-compare-block">
                            <div class="mp-compare-label">Atual</div>
                            <div class="mp-compare-value">{{ $tec_count }}</div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Stats totais --}}
            <div class="mp-card">
                <div class="mp-card-header">
                    <div class="mp-card-header-icon slate"><i class="bi bi-bar-chart-fill"></i></div>
                    <h3>Estatísticas totais</h3>
                </div>
                <div class="mp-card-body mp-card-body-compact">
                    <div class="mp-stat-row mp-stat-row--no-border">
                        <span class="mp-stat-label"><i class="bi bi-check-lg mr-2 saas-text-success"></i>Solucionados</span>
                        <span class="mp-stat-value saas-text-success">{{ $tec_count_tot }}</span>
                    </div>
                    <div class="mp-stat-row">
                        <span class="mp-stat-label"><i class="bi bi-chat-left-dots-fill mr-2 saas-text-warning"></i>Acompanhados</span>
                        <span class="mp-stat-value saas-text-warning">{{ $acomp_tot }}</span>
                    </div>
                    @if($user_info->hire_date)
                    <div class="mp-stat-row">
                        <span class="mp-stat-label"><i class="bi bi-clock-history mr-2"></i>Ativo desde</span>
                        <span class="mp-stat-value mp-stat-value-sm">{{ \Carbon\Carbon::parse($user_info->hire_date)->format('d/m/Y') }}</span>
                    </div>
                    @endif
                </div>
            </div>
            @endif

            {{-- Segurança (ambos) --}}
            <div class="mp-card">
                <div class="mp-card-header">
                    <div class="mp-card-header-icon green"><i class="bi bi-shield-lock-fill"></i></div>
                    <h3>Segurança</h3>
                </div>
                <div class="mp-card-body">
                    <form action="{{ route('perfil.pass') }}" method="post">
                        @csrf
                        <div class="mp-senha-grid">
                            <div class="mp-field">
                                <label class="mp-label" for="newPass">Nova senha</label>
                                <input class="mp-input" type="password" id="newPass" name="password"
                                    placeholder="••••••••" autocomplete="new-password">
                            </div>
                            <div class="mp-field">
                                <label class="mp-label" for="confPass">Confirmar senha</label>
                                <input class="mp-input" type="password" id="confPass" name="password2"
                                    placeholder="••••••••" autocomplete="new-password">
                            </div>
                        </div>
                        <div id="passStrength" class="mp-pass-strength">
                            <div class="mp-pass-bar-track">
                                <div id="passBar" class="mp-pass-bar"></div>
                            </div>
                            <p id="passLabel" class="mp-pass-label"></p>
                        </div>
                        <div id="passMismatch" class="mp-pass-mismatch">
                            <i class="bi bi-exclamation-circle-fill mr-1"></i>As senhas não coincidem.
                        </div>
                        <div class="mp-btn-row">
                            <button type="submit" class="mp-btn mp-btn-primary" id="btnSalvarSenha" disabled>
                                <i class="bi bi-check-lg"></i> Alterar senha
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            {{-- Usuário comum: email, chat e preferências ficam na col 2 --}}
            @if(!$isAdmin)

            <div class="mp-card">
                <div class="mp-card-header">
                    <div class="mp-card-header-icon amber"><i class="bi bi-envelope-fill"></i></div>
                    <h3>Email de contato</h3>
                </div>
                <div class="mp-card-body">
                    <form action="{{ route('user.perfil.config') }}" method="post">
                        @csrf
                        
                        <div class="mp-field">
                            <label class="mp-label" for="emailContact">Email para notificações</label>
                            <input class="mp-input" type="email" id="emailContact" name="email_contact"
                                value="{{ old('email_contact', $user->email_contact ?? '') }}"
                                placeholder="seu@email.com">
                            <p class="mp-input-hint">
                                <i class="bi bi-info-circle mp-input-hint-icon"></i>
                                Usado para receber atualizações dos seus chamados.
                                Deixe em branco para desativar notificações por email.
                            </p>
                        </div>
                        <div class="mp-btn-row mp-btn-row-compact">
                            <button type="submit" class="mp-btn mp-btn-primary">
                                <i class="bi bi-floppy-fill"></i> Salvar
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <div class="mp-card">
                <div class="mp-card-header">
                    <div class="mp-card-header-icon purple"><i class="bi bi-chat-dots-fill"></i></div>
                    <h3>Integração com chat</h3>
                    @if($user->chat_token)
                        <span class="mp-badge mp-badge-green ml-auto">
                            <i class="bi bi-check-circle-fill"></i> {{ $chat_username ?? 'Vinculado' }}
                        </span>
                    @else
                        <span class="mp-badge mp-badge-amber ml-auto">
                            <i class="bi bi-exclamation-triangle-fill"></i> Não vinculado
                        </span>
                    @endif
                </div>
                <div class="mp-card-body">
                    <form action="{{ route('user.perfil.config') }}" method="post">
                        @csrf
                        <input type="hidden" name="email_contact" value="{{ $user->email_contact ?? '' }}">
                        <div class="mp-field">
                            <label class="mp-label" for="chatId">Usuário do chat</label>
                            <input class="mp-input" type="text" id="chatId" name="chat_token"
                                value="{{ old('chat_token', $chat_username ?? $user->chat_token ?? '') }}"
                                placeholder="Seu login no Mattermost">
                            <p class="mp-input-hint">
                                <i class="bi bi-info-circle mp-input-hint-icon"></i>
                                Vincule sua conta para receber notificações em tempo real.
                            </p>
                        </div>
                        <div class="mp-btn-row mp-btn-row-compact">
                            @if($user->chat_token)
                            <button type="submit" name="desvincular_chat" value="1"
                                class="mp-btn mp-btn-danger"
                                onclick="return confirm('Deseja desvincular sua conta do chat?')">
                                <i class="bi bi-x-circle"></i> Desvincular
                            </button>
                            @endif
                            <button type="submit" class="mp-btn mp-btn-primary">
                                <i class="bi bi-floppy-fill"></i> Salvar
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <div class="mp-card">
                <div class="mp-card-header">
                    <div class="mp-card-header-icon slate"><i class="bi bi-sliders2"></i></div>
                    <h3>Preferências</h3>
                </div>
                <div class="mp-card-body mp-card-body-tight">
                    <div class="mp-toggle-row mp-toggle-row--no-border">
                        <div class="mp-toggle-info">
                            <strong>
                                <i class="bi bi-bell-fill mp-toggle-icon saas-text-warning"></i>
                                Notificações do navegador
                            </strong>
                            <small>Alertas quando seus chamados forem atualizados</small>
                        </div>
                        <label class="mp-switch">
                            <input type="checkbox" id="browserNotifToggle">
                            <span class="mp-switch-track"></span>
                        </label>
                    </div>
                </div>
            </div>

            @endif
        </div>{{-- /col 2 --}}

        {{-- ── Col 3: admin — email, chat e preferências ── --}}
        @if($isAdmin)
        <div class="saas-stack-sm">

            <div class="mp-card">
                <div class="mp-card-header">
                    <div class="mp-card-header-icon amber"><i class="bi bi-envelope-fill"></i></div>
                    <h3>Email de contato</h3>
                </div>
                <div class="mp-card-body">
                    <form action="{{ route('user.perfil.config') }}" method="post">
                        @csrf
                        
                        <div class="mp-field">
                            <label class="mp-label" for="emailContact">Email para notificações</label>
                            <input class="mp-input" type="email" id="emailContact" name="email_contact"
                                value="{{ old('email_contact', $user->email_contact ?? '') }}"
                                placeholder="seu@email.com">
                            <p class="mp-input-hint">
                                <i class="bi bi-info-circle mp-input-hint-icon"></i>
                                Deixe em branco para desativar notificações por email.
                            </p>
                        </div>
                        <div class="mp-btn-row mp-btn-row-compact">
                            <button type="submit" class="mp-btn mp-btn-primary">
                                <i class="bi bi-floppy-fill"></i> Salvar
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <div class="mp-card">
                <div class="mp-card-header">
                    <div class="mp-card-header-icon purple"><i class="bi bi-chat-dots-fill"></i></div>
                    <h3>Integração com chat</h3>
                    @if($user->chat_token)
                        <span class="mp-badge mp-badge-green ml-auto">
                            <i class="bi bi-check-circle-fill"></i> {{ $chat_username ?? 'Vinculado' }}
                        </span>
                    @else
                        <span class="mp-badge mp-badge-amber ml-auto">
                            <i class="bi bi-exclamation-triangle-fill"></i> Não vinculado
                        </span>
                    @endif
                </div>
                <div class="mp-card-body">
                    <form action="{{ route('user.perfil.config') }}" method="post">
                        @csrf
                        <input type="hidden" name="email_contact" value="{{ $user->email_contact ?? '' }}">
                        <div class="mp-field">
                            <label class="mp-label" for="chatIdAdmin">Usuário do chat</label>
                            <input class="mp-input" type="text" id="chatIdAdmin" name="chat_token"
                                value="{{ old('chat_token', $chat_username ?? $user->chat_token ?? '') }}"
                                placeholder="Seu login no Mattermost">
                            <p class="mp-input-hint">
                                <i class="bi bi-info-circle mp-input-hint-icon"></i>
                                Seu login do chat, usado para receber notificações em tempo real.
                            </p>
                        </div>
                        <div class="mp-btn-row mp-btn-row-compact">
                            @if($user->chat_token)
                            <button type="submit" name="desvincular_chat" value="1"
                                class="mp-btn mp-btn-danger"
                                onclick="return confirm('Desvincular conta do chat?')">
                                <i class="bi bi-x-circle"></i> Desvincular
                            </button>
                            @endif
                            <button type="submit" class="mp-btn mp-btn-primary">
                                <i class="bi bi-floppy-fill"></i> Salvar
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <div class="mp-card">
                <div class="mp-card-header">
                    <div class="mp-card-header-icon slate"><i class="bi bi-sliders2"></i></div>
                    <h3>Preferências</h3>
                </div>
                <div class="mp-card-body mp-card-body-tight">
                    <div class="mp-toggle-row mp-toggle-row--no-border">
                        <div class="mp-toggle-info">
                            <strong>
                                <i class="bi bi-moon-stars-fill mp-toggle-icon saas-text-purple"></i>
                                Modo escuro
                            </strong>
                            <small>Altera a aparência do painel</small>
                        </div>
                        <label class="mp-switch">
                            <input type="checkbox" id="darkModeToggle"
                                {{ Cookie::get('dark_mode') === 'true' ? 'checked' : '' }}>
                            <span class="mp-switch-track"></span>
                        </label>
                    </div>
                    <div class="mp-toggle-row">
                        <div class="mp-toggle-info">
                            <strong>
                                <i class="bi bi-bell-fill mp-toggle-icon saas-text-warning"></i>
                                Notificações do navegador
                            </strong>
                            <small>Alertas de atualizações em tempo real</small>
                        </div>
                        <label class="mp-switch">
                            <input type="checkbox" id="browserNotifToggle">
                            <span class="mp-switch-track"></span>
                        </label>
                    </div>
                </div>
            </div>

        </div>{{-- /col 3 admin --}}
        @endif

    </div>{{-- /grid --}}
</div>
@endsection

@section('scripts')
<script>
(function () {
    'use strict';

    /* ── Avatar ── */
    var avatarRing  = document.getElementById('avatarRing');
    var fotoInput   = document.getElementById('fotoInput');
    var avatarImg   = document.getElementById('avatarImg');
    var fotoActions = document.getElementById('fotoActions');
    var originalSrc = avatarImg ? avatarImg.src : '';

    if (avatarRing) avatarRing.addEventListener('click', function () { fotoInput.click(); });

    if (fotoInput) {
        fotoInput.addEventListener('change', function () {
            if (!fotoInput.files.length) return;
            var reader = new FileReader();
            reader.onload = function (e) { avatarImg.src = e.target.result; };
            reader.readAsDataURL(fotoInput.files[0]);
            fotoActions.style.display = 'block';
        });
    }

    var cancelBtn = document.getElementById('fotoCancelar');
    if (cancelBtn) {
        cancelBtn.addEventListener('click', function () {
            avatarImg.src = originalSrc;
            fotoInput.value = '';
            fotoActions.style.display = 'none';
        });
    }

    /* ── Senha ── */
    var newPass      = document.getElementById('newPass');
    var confPass     = document.getElementById('confPass');
    var passBar      = document.getElementById('passBar');
    var passLabel    = document.getElementById('passLabel');
    var passStrength = document.getElementById('passStrength');
    var passMismatch = document.getElementById('passMismatch');
    var btnSenha     = document.getElementById('btnSalvarSenha');

    function calcStrength(p) {
        var s = 0;
        if (p.length >= 8)           s++;
        if (p.length >= 12)          s++;
        if (/[A-Z]/.test(p))         s++;
        if (/[0-9]/.test(p))         s++;
        if (/[^A-Za-z0-9]/.test(p))  s++;
        return s;
    }

    function updatePass() {
        var p = newPass.value, c = confPass.value;
        if (!p) {
            passStrength.style.display = 'none';
            passMismatch.style.display = 'none';
            btnSenha.disabled = true;
            return;
        }
        passStrength.style.display = 'block';
        var s      = calcStrength(p);
        var colors = ['#e05252','#e05252','#f0b429','#4d7cf5','#22c97b','#22c97b'];
        var labels = ['Muito fraca','Muito fraca','Fraca','Boa','Forte','Muito forte'];
        passBar.style.width      = Math.min(s / 5 * 100, 100) + '%';
        passBar.style.background = colors[s];
        passLabel.textContent    = labels[s];
        passLabel.style.color    = colors[s];
        passMismatch.style.display = (c && p !== c) ? 'block' : 'none';
        btnSenha.disabled = !(c && p === c && p.length >= 6);
    }

    if (newPass)  newPass.addEventListener('input', updatePass);
    if (confPass) confPass.addEventListener('input', updatePass);

    /* ── Modo escuro ── */
    var darkToggle = document.getElementById('darkModeToggle');
    if (darkToggle) {
        darkToggle.addEventListener('change', function () {
            var next = darkToggle.checked ? 'true' : 'false';
            document.body.setAttribute('data-isDarkmode', next);
            $.post('{{ route('dark_mode') }}', {
                dark_mode: next,
                _token: '{{ csrf_token() }}'
            });
        });
    }

    /* ── Notificações do browser ── */
    var notifToggle = document.getElementById('browserNotifToggle');
    if (notifToggle) {
        if (!('Notification' in window)) {
            notifToggle.disabled = true;
        } else {
            notifToggle.checked = Notification.permission === 'granted';
            notifToggle.addEventListener('change', function () {
                if (!notifToggle.checked) return;
                Notification.requestPermission().then(function (perm) {
                    notifToggle.checked = perm === 'granted';
                    if (perm === 'granted') {
                        new Notification('Notificações ativadas!', {
                            body: 'Você será avisado sobre atualizações.',
                            icon: '/images/favicon-32x32.png'
                        });
                    }
                });
            });
        }
    }

})();
</script>
@endsection