@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Usuários'])
    <div class="row mt-4 mx-4">
        <div class="col-12">
            @if(session('success'))
                <div class="alert alert-success">
                    {{ session('success') }}
                </div>
            @endif

            @if(session('error'))
                <div class="alert alert-danger">
                    {{ session('error') }}
                </div>
            @endif

            @if ($errors->any())
                <div class="alert alert-danger text-white">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
            <div class="card mb-4">
                <div class="card-header pb-0">
                    <a href="{{ route('user-create') }}" class="btn btn-primary">Adicionar Usuário</a>
                </div>
                <div class="card-body px-0 pt-0 pb-2">
                    <div class="table-responsive p-0">
                        <table class="table align-items-center mb-0">
                            <thead>
                                <tr>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Nome</th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Permissão</th>
                                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Data de Criação</th>
                                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Clientes</th>

                                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Ações</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($users as $user)
                                <tr>
                                    <td>
                                        <div class="d-flex px-3 py-1">
                                            <div>
                                                <img src="{{ $user->profile_image_url }}" class="avatar me-3" alt="user image">
                                            </div>
                                            <div class="d-flex flex-column justify-content-center">
                                                <h6 class="mb-0 text-sm">{{ $user->name }}</h6>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        @if ($user->roles->isNotEmpty())
                                            <p class="text-sm font-weight-bold mb-0">{{ $user->roles->first()->name }}</p>
                                        @else
                                            <p class="text-sm font-weight-bold mb-0">No role assigned</p>
                                        @endif
                                    </td>
                                    <td class="align-middle text-center text-sm">
                                        <p class="text-sm font-weight-bold mb-0">{{ $user->created_at->format('d/m/Y') }}</p>
                                    </td>
                <td>
                    @if($user->hasRole('Usuário'))
                        <form action="{{ route('user-link-client', $user->id) }}" method="POST">
                            @csrf
                            <select name="cliente_id" class="form-control" onchange="this.form.submit()">
                                <option value="">Selecione um cliente</option>
                                @foreach($clientes as $cliente)
                                    <option value="{{ $cliente->id }}">{{ $cliente->nome }}</option>
                                @endforeach
                            </select>
                        </form>
                        <ul>
                            @foreach($user->clientes as $cliente)
                                <li class="d-flex justify-content-start align-items-center p-1">
                                    
                                    <form action="{{ route('user-unlink-client', [$user->id, $cliente->id]) }}" method="POST" style="display:inline-block;">
                                        @csrf
                                        <button type="submit" class="btn btn-link p-0 m-0" style="color: red;">
                                            <i class="fas fa-times"></i> {{ $cliente->nome }}
                                        </button>

                                    </form>
                                </li>
                            @endforeach
                        </ul>
                    @else
                        Administrador
                    @endif
                </td>
                                    <td class="align-middle text-end">
                                        <form action="{{ route('user-edit') }}" method="POST" style="display: inline-block;">
                                            @csrf
                                            <input type="hidden" name="user_id" value="{{ $user->id }}">
                                            <button type="submit" class="btn btn-warning btn-sm">Editar</button>
                                        </form>
                                        <form action="{{ route('user-destroy', $user->id) }}" method="POST" onsubmit="return confirm('Essa ação é irreversível, deseja prosseguir?');" style="display: inline-block;">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-danger btn-sm">Excluir</button>
                                        </form>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        @include('layouts.footers.auth.footer')
    </div>
@endsection