{{-- Messagens da session --}}
        @include('partials.session-message')
   
    <div class="card shadow-lg mx-4 card-profile-bottom">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-auto">
                    <div class="avatar avatar-xl position-relative">
                        <i class="fa fa-users" style="color:#344767; font-size:48px !important"></i>
                    </div>
                </div>
                <div class="col-auto my-auto">
                    <div class="h-100">
                        <h5 id="head-name" class="mb-1">
                             {{ isset($user) ? $user->name : '-' }}
                        </h5>
                        <p id="head-username" class="mb-0 font-weight-bold text-sm">
                        {{ isset($user) ? $user->username : '-' }}
                        </p>
                    </div>
                </div>
                @if (isset($user))
                <div class="col-lg-2 col-md-2 my-sm-auto ms-sm-auto me-sm-0 mx-auto mt-3">
                    <div class="nav-wrapper position-relative end-0">
                        <div class="dropdown">
                            <a href="#" style="text-transform: uppercase;" class="btn bg-gradient-dark dropdown-toggle " data-bs-toggle="dropdown" id="navbarDropdownMenuLink2"> {{ isset($user) ? $user->status : old('status') }}
                            </a>
                            <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink2">
                                <li>
                                    <a id="ativo" class="dropdown-item form-status" href="#" data-status="ativo">ATIVO</a>
                                </li>
                                <li>
                                    <a id="inativo" class="dropdown-item form-status" href="#" data-status="inativo">INATIVO</a>
                                </li>
                            </ul>
                            </div>

                    </div>
                </div>
                @endif
            </div>
        </div>
    </div>
    <style>
        /* Tema dark – alinhado ao restante da aplicação */
        .agentes-select-list { display: flex; flex-direction: column; gap: 0.5rem; max-height: 420px; overflow-y: auto; padding-right: 4px; }
        .agentes-select-list::-webkit-scrollbar { width: 6px; }
        .agentes-select-list::-webkit-scrollbar-thumb { background: #565869; border-radius: 3px; }
        .agentes-select-list::-webkit-scrollbar-track { background: #25262e; }
        .agente-card {
            display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.75rem; border-radius: 10px;
            border: 1px solid #3d3e48; background: #343541; cursor: pointer; transition: border-color .2s, background .2s, box-shadow .15s;
        }
        .agente-card:hover { border-color: #565869; background: #40414f; }
        .agente-card--selected { border-color: #10a37f; background: rgba(16, 163, 127, 0.15); box-shadow: 0 0 0 1px #10a37f; }
        .agente-card__input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
        .agente-card__checkbox {
            width: 20px; height: 20px; border-radius: 4px; border: 2px solid #565869; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center; font-size: 0.7rem; color: #fff;
            transition: border-color .2s, background .2s; background: transparent;
        }
        .agente-card--selected .agente-card__checkbox { border-color: #10a37f; background: #10a37f; }
        .agente-card__checkbox i { opacity: 0; }
        .agente-card--selected .agente-card__checkbox i { opacity: 1; }
        .agente-card__avatar {
            width: 40px; height: 40px; border-radius: 8px; overflow: hidden; flex-shrink: 0;
            background: #565869; color: #ececf1; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 600;
        }
        .agente-card__img { width: 100%; height: 100%; object-fit: cover; }
        .agente-card__body { flex: 1; min-width: 0; }
        .agente-card__nome { font-weight: 600; color: #ececf1; font-size: 0.9rem; display: block; }
        .agente-card__resumo { font-size: 0.7rem; color: #8e8ea0; line-height: 1.25; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
        .agentes-actions { margin-bottom: 0.75rem; }
        .agentes-actions .btn-link { font-size: 0.8rem; padding: 0; }
        .agentes-actions .agente-select-all { color: #10a37f !important; }
        .agentes-actions .agente-deselect-all { color: #8e8ea0 !important; }
        .card-body:has(#associate-agentes-container) .text-uppercase { color: #ececf1; }
        .card-body:has(#associate-agentes-container) .text-muted { color: #8e8ea0 !important; }
    </style>
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header pb-0">
                        <div class="d-flex align-items-center">
                            <p class="mb-4">Usuário</p>
                            <div class="ms-auto">
                                <button type="submit" class="btn btn-success btn-sm ms-auto "><i class="fas fa-save me-3"></i>Salvar</button>
                                <button class="btn btn-danger btn-sm ms-auto d-none"><i class="fas fa-trash"></i></button>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <p class="text-uppercase text-sm">DADOS CADASTRAIS</p>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label>{{ __('Name') }}</label>
                                    <input class="form-control{{ $errors->has('name') ? ' is-invalid' : '' }}" 
                                    name="name" id="input-name" type="text"
                                    value="{{ isset($user) ? $user->name : old('name') }}"
                                    placeholder="{{ __('Name') }}" 
                                    required="true" aria-required="true"
                                    onkeyup="updateHeadName('input-name', 'head-name')" 
                                     />
                                @if ($errors->has('name'))
                                    <span id="name-error" class="error text-danger"
                                        for="input-name">{{ $errors->first('name') }}</span>
                                @endif
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>{{ __('E-mail') }}</label>
                                    <input class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" 
                                        name="email" id="input-email" type="text"
                                        value="{{ isset($user) ? $user->email : old('email') }}" 
                                        placeholder="{{ __('E-mail') }}" 
                                        required="true" aria-required="true" 
                                        />
                                    @if ($errors->has('email'))
                                        <span id="email-error" class="error text-danger"
                                            for="input-email">{{ $errors->first('email') }}</span>
                                    @endif
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                <label>{{ __('Telefone') }}</label>
                                    <input class="form-control cellphone {{ $errors->has('cellphone') ? ' is-invalid' : '' }}"
                                        name="cellphone" id="input-cellphone" type="text"
                                        value="{{ isset($user) ? $user->cellphone : old('cellphone') }}"
                                        placeholder="{{ __('Telefone') }}"  />
                                    @if ($errors->has('cellphone'))
                                        <span id="cellphone-error" class="error text-danger"
                                            for="input-cellphone">{{ $errors->first('cellphone') }}</span>
                                    @endif
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="example-text-input" class="form-control-label">Observação</label>
                                    <textarea name="about" id="input-about" class="form-control">{{ isset($user) ? $user->about : old('about') }}</textarea>
                                </div>
                            </div>
                        </div>
                        <hr class="horizontal dark">
                        <p class="text-uppercase text-sm">Acesso</p>
                        <div class="row">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label>{{ __('Username') }}</label>
                                        <input class="form-control{{ $errors->has('username') ? ' is-invalid' : '' }}"
                                        name="username" id="input-username" type="text"
                                        value="{{ isset($user) ? $user->username : old('username') }}" 
                                        placeholder="{{ __('Username') }}"
                                        required="true" aria-required="true"
                                        onkeyup="updateHeadName('input-username', 'head-username')" 
                                        />
                                        @if ($errors->has('username'))
                                            <span id="username-error" class="error text-danger"
                                                for="input-username">{{ $errors->first('username') }}</span>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label>{{ __('Tipo de permissão') }}</label>
                                        <select name="tipo_permissao" id="input-tipo-permissao" class="form-control{{ $errors->has('tipo_permissao') ? ' is-invalid' : '' }}">
                                            <option value="user" {{ (isset($user) && ($user->tipo_permissao ?? 'user') === 'user') || old('tipo_permissao') === 'user' ? 'selected' : '' }}>Usuário (Chat e Dashboard Chat)</option>
                                            <option value="admin" {{ (isset($user) && ($user->tipo_permissao ?? '') === 'admin') || old('tipo_permissao') === 'admin' ? 'selected' : '' }}>Admin (Agentes, Base de Dados, Usuários, Chat, Dashboard Chat)</option>
                                       
                                        </select>
                                        @if ($errors->has('tipo_permissao'))
                                            <span id="tipo_permissao-error" class="error text-danger" for="input-tipo-permissao">{{ $errors->first('tipo_permissao') }}</span>
                                        @endif
                                        <small class="text-muted d-block">Admin e Master veem todos os menus (exceto Clientes só Master). Usuário vê só Chat e Dashboard Chat.</small>
                                    </div>
                                </div>

                            </div>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label>{{ __('Senha') }}</label>
                                        <input class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}"
                                        name="password" id="input-password" type="password"
                                        placeholder="{{ __('senha') }}"
                                        />
                                        @if ($errors->has('password'))
                                            <span id="password-error" class="error text-danger"
                                                for="input-password">{{ $errors->first('password') }}</span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label>{{ __('Confirmação de Senha') }}</label>
                                        <input class="form-control" 
                                        name="password_confirmation" id="input-password2" type="password" 
                                        placeholder="Confirme a senha"/>
                                        @if ($errors->has('password2'))
                                            <span id="password2-error" class="error text-danger"
                                                for="input-password2">{{ $errors->first('password2') }}</span>
                                        @endif
                                    </div>
                                </div>
                            </div>            
                        </div>
                        
                    </div>
                </div>
               
                @if(isset($user))
                    @include('partials.upload', ['model' => $user])
                @endif
                
            </div>
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header pb-0">
                        <div class="d-flex align-items-center">
                            <p class="mb-4">Agentes</p>
                        </div>
                    </div>
                    <div class="card-body">
                        <p class="text-uppercase text-sm mb-1">Agentes que o usuário pode interagir</p>
                        <p class="text-xs text-muted mb-2">Para tipo "Usuário", marque os agentes com os quais esta pessoa poderá conversar. Admin/Master têm acesso a todos.</p>
                        @if (isset($user) && isset($agentes) && $agentes->isNotEmpty())
                        <div class="agentes-actions">
                            <button type="button" class="btn btn-link text-primary p-0 me-2 agente-select-all">Selecionar todos</button>
                            <span class="text-muted">|</span>
                            <button type="button" class="btn btn-link text-secondary p-0 ms-2 agente-deselect-all">Desmarcar todos</button>
                        </div>
                        @endif
                        <div id="associate-agentes-container" class="agentes-select-list">
                            @if (isset($user) && isset($agentes))
                                @foreach($agentes as $agente)
                                    @php
                                        $resumo = $agente->quem_e ?? $agente->o_que_faz ?? '';
                                        $resumo = \Illuminate\Support\Str::limit(strip_tags($resumo), 55);
                                        $fotoUrl = $agente->foto ? \Illuminate\Support\Facades\Storage::url($agente->foto) : null;
                                        $liberado = isset($user) && $user->id && $user->agentes->contains('idagente', $agente->idagente);
                                    @endphp
                                    <label class="agente-card {{ $liberado ? 'agente-card--selected' : '' }}" for="agente-{{ $agente->idagente }}">
                                        <input type="checkbox" class="agente-card__input" name="agentes[]" id="agente-{{ $agente->idagente }}" value="{{ $agente->idagente }}" {{ $liberado ? 'checked' : '' }}>
                                        <div class="agente-card__checkbox"><i class="fas fa-check"></i></div>
                                        <div class="agente-card__avatar">
                                            @if($fotoUrl)
                                                <img src="{{ $fotoUrl }}" alt="{{ $agente->nome }}" class="agente-card__img">
                                            @else
                                                <span>{{ \Illuminate\Support\Str::upper(\Illuminate\Support\Str::substr($agente->nome, 0, 2)) }}</span>
                                            @endif
                                        </div>
                                        <div class="agente-card__body">
                                            <span class="agente-card__nome">{{ $agente->nome }}</span>
                                            @if($agente->especialidade)
                                                <span class="agente-card__especialidade text-muted small d-block">{{ $agente->especialidade }}</span>
                                            @endif
                                            @if($resumo)
                                                <span class="agente-card__resumo" title="{{ \Illuminate\Support\Str::limit(strip_tags($agente->quem_e ?? $agente->o_que_faz ?? ''), 120) }}">{{ $resumo }}</span>
                                            @endif
                                        </div>
                                    </label>
                                @endforeach
                                @if($agentes->isEmpty())
                                    <p class="text-muted text-sm mb-0">Nenhum agente cadastrado.</p>
                                @endif
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            
        </div>

        <script src="/assets/js/jquery.min.js" type="text/javascript"></script>
        <script>
            function changeStatus(model, id, newStatus) {
                $.ajax({
                    url: `/status/${model}/${id}/${newStatus}`,
                    method: 'GET',
                    success: function(response) {
                        console.log(response);
                        $('#navbarDropdownMenuLink2').text(newStatus).css('text-transform', 'uppercase');
                        // Atualize a UI aqui
                    },
                    error: function(error) {
                        console.error(error);
                        // Lidar com erros aqui
                    }
                });
            }
        </script>
        <script>
            document.addEventListener('DOMContentLoaded', () => {
                const userId = {{ $user->id ?? 'undefined' }};
                if (typeof userId !== 'undefined') {
                    const statusElements = document.querySelectorAll('.form-status');
                    statusElements.forEach((element) => {
                        element.addEventListener('click', () => {
                            const status = element.getAttribute('data-status');
                            changeStatus('user', userId, status);
                        });
                    });
                }
            });
        </script>
        <script>
            function updateHeadName(inputId, outputId) {
                var inputValue = $('#' + inputId).val();
                $('#' + outputId).text(inputValue);
            }
                    
        </script>
        <script>
        $(document).ready(function(){
        $('#input-cellphone').mask('(00) 00000-0000');
        });
        </script>
        <script>
        document.addEventListener('DOMContentLoaded', function() {
            var container = document.getElementById('associate-agentes-container');
            if (!container) return;
            container.querySelectorAll('.agente-card').forEach(function(card) {
                var input = card.querySelector('.agente-card__input');
                if (!input) return;
                function sync() { card.classList.toggle('agente-card--selected', input.checked); }
                input.addEventListener('change', sync);
            });
            var selectAll = document.querySelector('.agente-select-all');
            var deselectAll = document.querySelector('.agente-deselect-all');
            if (selectAll) selectAll.addEventListener('click', function() {
                container.querySelectorAll('.agente-card__input').forEach(function(cb) { cb.checked = true; });
                container.querySelectorAll('.agente-card').forEach(function(c) { c.classList.add('agente-card--selected'); });
            });
            if (deselectAll) deselectAll.addEventListener('click', function() {
                container.querySelectorAll('.agente-card__input').forEach(function(cb) { cb.checked = false; });
                container.querySelectorAll('.agente-card').forEach(function(c) { c.classList.remove('agente-card--selected'); });
            });
        });
        </script>

        @include('partials.upload-js')
        @include('layouts.footers.auth.footer')
    </div>