@extends('adminlte::page')

@section('title','Editar Usuário')

@section('content_header')
    <h1>Editar de usuário</h1>
@endsection
@section('css')
  {{-- Select2 + tema Bootstrap4 --}}
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ttskch/select2-bootstrap4-theme@1.5.2/dist/select2-bootstrap4.min.css">

  <style>
/* Remove o contorno preto nos chips e no "x" */
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice:focus,
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice:focus-visible,
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove:focus,
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* (opcional) tira qualquer borda do "x" */
.select2-selection__choice__remove {
  border: 0 !important;
}

/* foco suave no select todo */
.select2-container--bootstrap4.select2-container--focus .select2-selection {
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.25);
}

.select2-selection--single {
    height: 38px !important;

}

.select2-container{
    width: 100% !important;
}

  </style>

@section('content')
    @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                <h5><i class="icon fas fa-ban"></i> Ocorreu um erro</h5>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="card">
        <div class="card-body">
            <form action="{{ route('users.update', ['user' => $user->id]) }}" method="POST" class="form-horizontal">
                @method('PUT')
                @csrf
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label">Nome completo</label>
                    <div class="col-sm-10">
                        <input type="text" name="name"
                               class="form-control @error('name') is-invalid @enderror"
                               value="{{ old('name', $user->name) }}">
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label">E-mail</label>
                    <div class="col-sm-10">
                        <input type="email" name="email"
                               class="form-control @error('email') is-invalid @enderror"
                               value="{{ old('email', $user->email) }}">
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label">Nova senha</label>
                    <div class="col-sm-10">
                        <input type="password" name="password"
                               class="form-control @error('password') is-invalid @enderror">
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label">Confirmação de senha</label>
                    <div class="col-sm-10">
                        <input type="password" name="password_confirmation" class="form-control">
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label">Acesso</label>
                    <div class="col-sm-10">
                        <select class="form-control" name="admin">
                            <option value="1" @selected(old('admin', $user->admin) == 1)>Administrador</option>
                            <option value="2" @selected(old('admin', $user->admin) == 2)>Gerência</option>
                            <option value="5" @selected(old('admin', $user->admin) == 5)>Coordenador</option>
                            <option value="3" @selected(old('admin', $user->admin) == 3)>Vendedor</option>
                            <option value="4" @selected(old('admin', $user->admin) == 4)>Médico</option>
                        </select>
                    </div>
                </div>
                @if ($user->id == 1)
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label">Unidade</label>
                        <div class="col-sm-10">
                            <select class="col-sm-12 form-control select2-cg" name="id_unidade_empresarial" id="id_unidade_empresarial"
                                @error('id_unidade_empresarial') is-invalid @enderror id="id_unidade_empresarial">
                                @foreach ($select_unidade_empresarial as $unidade)
                                    <option @if ($unidade->id == $user->id_unidade_empresarial ) selected="selected" @endif value="{{ $unidade->id }}">{{ $unidade->nome}}</option>
                                @endforeach
                            </select>
                            @error('id_unidade_empresarial')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                @endif
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label">
                        Funis
                    </label>
                    <div class="col-sm-10">
                        @php
                        $selecionados = collect(old('funis', $funisSelecionados ?? []))->map(fn($v)=>(int)$v);
                        // mapeia cores por tipo (ajuste se quiser)
                        $mapTipo = [1 => 'primary', 2 => 'success', 0 => 'secondary']; // 1=Particular, 2=Convênio, default=Outro
                        @endphp

                        <select class="form-control" name="funis[]" id="funis" multiple style="width:100%;">
                        @foreach ($funil_select as $funil)
                            <option
                            value="{{ $funil->id_funil }}"
                            data-tipo="{{ (int)($funil->vd_tipo ?? 0) }}"
                            data-badge="{{ $mapTipo[$funil->vd_tipo ?? 0] ?? 'secondary' }}"
                            {{ $selecionados->contains((int)$funil->id_funil) ? 'selected' : '' }}
                            >
                            @switch($funil->vd_tipo)
                                @case(1) Particular @break
                                @case(2) Convênio @break
                                @default Outro
                            @endswitch
                            — {{ $funil->funil_nome }}
                            </option>
                        @endforeach
                        </select>

                        @error('funis')
                        <span class="text-danger small">{{ $message }}</span>
                        @enderror

                        {{-- <small class="form-text text-muted mt-1">
                        Dica: comece a digitar para filtrar; use Backspace para remover um chip.
                        </small> --}}
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label"></label>
                    <div class="col-sm-10">
                        <input type="submit" class="btn btn-success" value="Salvar">
                    </div>
                </div>
            </form>
            </div>
    </div>
@endsection

{{-- Inclua CSS/JS do Select2 conforme o seu layout --}}
@section('css')
    {{-- se já possuir no layout, pode remover --}}
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet"/>
@endsection

@section('js')
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.full.min.js"></script>
  <script>
    $(function () {

      $('.select2-cg').select2();

      function tipoLabel(t){ switch(parseInt(t)){case 1:return 'Particular';case 2:return 'Convênio';default:return 'Outro';} }
      function badgeClass(t){
        t=parseInt(t);
        if(t===1) return 'badge badge-primary';
        if(t===2) return 'badge badge-success';
        return 'badge badge-secondary';
      }

      // templates de item/seleção
      function templateResult (data) {
        if (!data.id) return data.text;
        var tipo = $(data.element).data('tipo');
        var $badge = $('<span class="s2-badge '+badgeClass(tipo)+'">'+tipoLabel(tipo)+'</span>');
        var $text  = $('<span>'+ data.text.replace(/^(\s*-*\s*)/,'') +'</span>');
        var $row   = $('<div class="d-flex align-items-center"></div>');
        $row.append($badge).append($text);
        return $row;
      }
      function templateSelection (data) {
        if (!data.id) return data.text;
        var tipo = $(data.element).data('tipo');
        // chip simples (texto curto)
        return tipoLabel(tipo)+': '+data.text.replace(/^.*—\s*/,'');
      }

      $('#funis').select2({
        theme: 'bootstrap4',
        placeholder: 'Selecione um ou mais funis',
        allowClear: true,
        width: '100%',
        closeOnSelect: false,
        dropdownAutoWidth: true,
        templateResult: templateResult,
        templateSelection: templateSelection
      });
    });
  </script>
@endsection