@extends('partials.layout')
@section('titulo', 'Usuários')
@section('conteudo')
<h2 class="page">Usuários</h2>

<details class="secao-cad">
    <summary>+ Novo usuário</summary>
<div class="card">
    <form method="post" action="{{ route('usuarios.store') }}" enctype="multipart/form-data">@csrf
        <div class="grid3">
            <div><label>Nome *</label><input name="nome" required></div>
            <div><label>Login *</label><input name="login" required></div>
            <div><label>Senha *</label><input name="senha" required></div>
            <div><label>Grupos</label><select name="papel"><option value="gestao">Administrador</option><option value="lancar">Financeiro</option><option value="observador">Observador</option></select></div>
            <div><label>Centro de custo</label><select name="escopo"><option value="todos">Todos</option><option value="alguns">Só alguns</option></select></div>
            <div>
                <label>Foto</label>
                <label for="foto-new" class="avatar-pick" id="av-new" title="Escolher foto">+</label>
                <input type="file" id="foto-new" name="foto" accept=".jpg,.jpeg,.png,.webp" style="display:none" onchange="previewAvatar(this,'av-new')">
            </div>
        </div>
        <div style="margin-top:10px">
            <label>Projetos (se centro de custo = "Só alguns")</label>
            <div style="display:flex;gap:12px;flex-wrap:wrap">
                @foreach($projetos as $p)<label style="display:flex;gap:5px;align-items:center;font-weight:600;color:var(--ink)"><input type="checkbox" name="projetos[]" value="{{ $p->id }}" style="width:auto">@if($p->centro_custo)CC {{ $p->centro_custo }} · @endif{{ $p->nome }}</label>@endforeach
            </div>
        </div>
        <div style="margin-top:12px"><button class="btn pri">Criar usuário</button></div>
    </form>
</div>
</details>

@foreach($usuarios as $u)
<details class="secao-cad">
    <summary>@if($u->foto)<img src="{{ route('usuarios.foto',$u) }}" style="width:26px;height:26px;border-radius:50%;object-fit:cover">@else<span style="width:26px;height:26px;border-radius:50%;background:var(--steel);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800">{{ mb_strtoupper(mb_substr($u->nome,0,1)) }}</span>@endif {{ $u->nome }} <span class="cont">{{ ['gestao'=>'Administrador','lancar'=>'Financeiro','observador'=>'Observador'][$u->papel] }}</span>@unless($u->ativo)<span class="cont" style="background:var(--alertaBg);color:var(--alerta)">Inativo</span>@endunless</summary>
<div class="card">
    <form method="post" action="{{ route('usuarios.update',$u) }}" enctype="multipart/form-data">@csrf @method('PUT')
        <div class="grid3">
            <div><label>Nome</label><input name="nome" value="{{ $u->nome }}"></div>
            <div><label>Login</label><input name="login" value="{{ $u->login }}" required></div>
            <div><label>Nova senha (deixe vazio p/ manter)</label><input name="senha"></div>
            <div><label>Grupos</label><select name="papel">@foreach(['gestao'=>'Administrador','lancar'=>'Financeiro','observador'=>'Observador'] as $k=>$v)<option value="{{ $k }}" @selected($u->papel==$k)>{{ $v }}</option>@endforeach</select></div>
            <div><label>Centro de custo</label><select name="escopo"><option value="todos" @selected($u->escopo=='todos')>Todos</option><option value="alguns" @selected($u->escopo=='alguns')>Só alguns</option></select></div>
            <div><label>Ativo</label><select name="ativo"><option value="1" @selected($u->ativo)>Sim</option><option value="0" @selected(!$u->ativo)>Não</option></select></div>
        </div>
        <div style="margin-top:10px">
            <label>Foto de perfil</label>
            <div style="display:flex;align-items:center;gap:12px">
                <label for="foto-{{ $u->id }}" class="avatar-pick" id="av-{{ $u->id }}" style="{{ $u->foto ? "background-image:url('".route('usuarios.foto',$u)."')" : '' }}" title="Trocar foto">@unless($u->foto){{ mb_strtoupper(mb_substr($u->nome,0,1)) }}@endunless</label>
                <input type="file" id="foto-{{ $u->id }}" name="foto" accept=".jpg,.jpeg,.png,.webp" style="display:none" onchange="previewAvatar(this,'av-{{ $u->id }}')">
                <div>
                    <div class="muted" style="font-size:12px">Clique na bolinha para trocar a foto</div>
                    @if($u->foto)<label style="display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--alerta);cursor:pointer;margin-top:4px"><input type="checkbox" name="remover_foto" value="1" style="width:auto"> Remover foto</label>@endif
                </div>
            </div>
        </div>
        <div style="margin-top:10px">
            <label>Projetos liberados</label>
            <div style="display:flex;gap:12px;flex-wrap:wrap">
                @foreach($projetos as $p)<label style="display:flex;gap:5px;align-items:center;font-weight:600;color:var(--ink)"><input type="checkbox" name="projetos[]" value="{{ $p->id }}" style="width:auto" @checked($u->projetos->contains($p->id))>@if($p->centro_custo)CC {{ $p->centro_custo }} · @endif{{ $p->nome }}</label>@endforeach
            </div>
        </div>
        <div style="margin-top:10px;display:flex;gap:8px">
            <button class="btn ghost sm">Salvar</button>
        </div>
    </form>
    @if($u->id !== $me->id)
    <form method="post" action="{{ route('usuarios.destroy',$u) }}" onsubmit="return confirm('Remover usuário?')" style="margin-top:6px">@csrf @method('DELETE')<button class="btn danger sm">Remover</button></form>
    @endif
</div>
</details>
@endforeach
<script>
function previewAvatar(input, elId){
    if(input.files && input.files[0]){
        var r = new FileReader();
        r.onload = function(e){ var el=document.getElementById(elId); el.style.backgroundImage="url('"+e.target.result+"')"; el.textContent=''; };
        r.readAsDataURL(input.files[0]);
    }
}
</script>
@endsection