@extends('layouts.master')
@section('title') @lang('translation.team') @endsection
@section('content')
@component('components.breadcrumb')
@slot('li_1') Pages @endslot
@slot('title') Usuários @endslot
@endcomponent

<div class="card">
    <div class="card-body">
        <div class="row g-2">
            <div class="col-sm-4">
                <div class="search-box">
                    <input type="text" class="form-control" id="searchMemberList" placeholder="Search for name, role, phone, address, status, or email...">
                    <i class="ri-search-line search-icon"></i>
                </div>
            </div>
            <script>
                document.getElementById("searchMemberList").addEventListener("keyup", function() {
                    let searchText = this.value.toLowerCase();
                    let users = document.querySelectorAll("#team-member-list .col-xl-3");

                    users.forEach(user => {
                        let name = user.querySelector("h5").textContent.toLowerCase();
                        let role = user.querySelector("p.text-muted").textContent.toLowerCase();

                        if (name.includes(searchText) || role.includes(searchText)) {
                            user.style.display = "";
                        } else {
                            user.style.display = "none";
                        }
                    });
                });
            </script>

            <div class="col-sm-auto ms-auto">
                <div class="list-grid-nav hstack gap-1">
                    <button type="button" id="grid-view-button" class="btn btn-soft-info nav-link btn-icon fs-14 active filter-button"><i class="ri-grid-fill"></i></button>
                    <button type="button" id="list-view-button" class="btn btn-soft-info nav-link btn-icon fs-14 filter-button"><i class="ri-list-unordered"></i></button>
                    <button type="button" id="dropdownMenuLink1" data-bs-toggle="dropdown" aria-expanded="false" class="btn btn-soft-info btn-icon fs-14"><i class="ri-more-2-fill"></i></button>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink1" id="filterMenu">
                        <li><a class="dropdown-item filter-option" data-filter="all" href="#">Todos</a></li>
                        <li><a class="dropdown-item filter-option" data-filter="week" href="#">Última Semana</a></li>
                        <li><a class="dropdown-item filter-option" data-filter="month" href="#">Último Mês</a></li>
                        <li><a class="dropdown-item filter-option" data-filter="year" href="#">Último Ano</a></li>
                    </ul>
                    <button class="btn btn-success addMembers-modal" data-bs-toggle="modal" data-bs-target="#addmemberModal"><i class="ri-add-fill me-1 align-bottom"></i> Add user</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-12">
        <div id="teamlist">
            <div class="team-list grid-view-filter row" id="team-member-list">
                @foreach($users as $user)
                <div class="col-xl-3 col-lg-6" data-created-at="{{ $user->created_at }}">
                    <div class="card text-center user-card">
                        <div class="card-body">
                            @php
                                $image = 'user-dummy-img.jpg'; // imagem default local
                                if($user->image){
                                    if(Str::startsWith($user->image, ['http://', 'https://'])) {
                                        $image = $user->image;
                                    } else {
                                        $image = asset('storage/' . $user->image);
                                    }
                                } else {
                                    $image = asset($image);
                                }
                            @endphp

                            <img src="{{ $image }}" alt="" class="avatar-lg rounded-circle mb-2" />
                            <h5 class="mb-1 user-name">{{ $user->name }}</h5>
                            <p class="text-muted user-role">{{ $user->role }}</p>
                            <p class="text-muted">Telefone: <span class="user-phone">{{ $user->phone }}</span></p>
                            <span class="badge 
                                @if($user->status == 'ativo') bg-success 
                                @elseif($user->status == 'inativo') bg-danger 
                                @else bg-warning 
                                @endif">
                                {{ ucfirst($user->status) }}
                            </span>

                            <!-- Ícones de ação -->
                            <div class="mt-2">
                                <button class="btn btn-info btn-sm" data-bs-toggle="modal" data-bs-target="#viewUserModal{{ $user->id }}"><i class="ri-eye-fill"></i> Ver</button>
                                <button class="btn btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#editUserModal{{ $user->id }}"><i class="ri-pencil-fill"></i> Editar</button>
                                <button class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#deleteUserModal{{ $user->id }}"><i class="ri-delete-bin-fill"></i> Apagar</button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Modal para Ver Detalhes -->
                <div class="modal fade" id="viewUserModal{{ $user->id }}" tabindex="-1" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">Detalhes do Usuário</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                @php
                                $image = 'user-dummy-img.jpg'; // imagem default local
                                if($user->image){
                                    if(Str::startsWith($user->image, ['http://', 'https://'])) {
                                        $image = $user->image;
                                    } else {
                                        $image = asset('storage/' . $user->image);
                                    }
                                } else {
                                    $image = asset($image);
                                }
                            @endphp

                            <img src="{{ $image }}" alt="" class="avatar-lg rounded-circle mb-2" />
                                <p><strong>Nome:</strong> {{ $user->name }}</p>
                                <p><strong>Cargo:</strong> {{ $user->role }}</p>
                                <p><strong>Telefone:</strong> {{ $user->phone }}</p>
                                <p><strong>Status:</strong> {{ ucfirst($user->status) }}</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Modal para Editar -->
                <div class="modal fade" id="editUserModal{{ $user->id }}" tabindex="-1" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">Editar Usuário</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <form method="POST" action="{{ route('users.update', $user->id) }}" enctype="multipart/form-data">
                                    @csrf
                                    @method('PUT')
                                    @php
                                    $image = 'user-dummy-img.jpg'; // imagem default local
                                    if($user->image){
                                        if(Str::startsWith($user->image, ['http://', 'https://'])) {
                                            $image = $user->image;
                                        } else {
                                            $image = asset('storage/' . $user->image);
                                        }
                                    } else {
                                        $image = asset($image);
                                    }
                                @endphp
    
                                <img src="{{ $image }}" alt="" class="avatar-lg rounded-circle mb-2" />
                                    <div class="mb-3">
                                        <label for="editName{{ $user->id }}" class="form-label">Nome</label>
                                        <input type="text" class="form-control" id="editName{{ $user->id }}" name="name" value="{{ $user->name }}">
                                    </div>
                                    <div class="mb-3">
                                        <label for="editRole{{ $user->id }}" class="form-label">Cargo</label>
                                        <input type="text" class="form-control" id="editRole{{ $user->id }}" name="role" value="{{ $user->role }}">
                                    </div>
                                    <div class="mb-3">
                                        <label for="editPhone{{ $user->id }}" class="form-label">Telefone</label>
                                        <input type="text" class="form-control" id="editPhone{{ $user->id }}" name="phone" value="{{ $user->phone }}">
                                    </div>
                                    <div class="mb-3">
                                        <label for="editStatus{{ $user->id }}" class="form-label">Status</label>
                                        <select class="form-control" id="editStatus{{ $user->id }}" name="status">
                                            <option value="ativo" {{ $user->status == 'ativo' ? 'selected' : '' }}>Ativo</option>
                                            <option value="inativo" {{ $user->status == 'inativo' ? 'selected' : '' }}>Inativo</option>
                                            <option value="pendente" {{ $user->status == 'pendente' ? 'selected' : '' }}>Pendente</option>
                                        </select>
                                    </div>
                                     <!-- Campo para imagem -->
                                     <input type="file" name="image">
                                     
                                    <div class="text-end">
                                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Fechar</button>
                                        <button type="submit" class="btn btn-warning">Salvar Alterações</button>
                                    </div>
                                </form>




                              
                                
                                    
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Modal para Apagar -->
                <div class="modal fade" id="deleteUserModal{{ $user->id }}" tabindex="-1" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">Confirmar Exclusão</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <p>Tem certeza de que deseja excluir este usuário?</p>
                            </div>
                            <div class="modal-footer">
                                <form action="{{ route('users.destroy', $user->id) }}" method="POST">
                                    @csrf
                                    @method('DELETE')
                                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancelar</button>
                                    <button type="submit" class="btn btn-danger">Excluir</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</div>

<!-- Modal de Adicionar Membro -->
<div class="modal fade" id="addmemberModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0">
            <div class="modal-body">
                <form action="{{ route('users.store') }}" method="POST" enctype="multipart/form-data" class="needs-validation" novalidate>
                    @csrf
                    <div class="row">
                        <div class="col-lg-12">
                            <input type="hidden" id="memberid-input" name="id" value="">
                            
                            <!-- Capa do Membro -->
                            <div class="px-1 pt-1">
                                <div class="modal-team-cover position-relative mb-0 mt-n4 mx-n4 rounded-top overflow-hidden">
                                    <img src="{{URL::asset('build/images/small/img-9.jpg')}}" alt="Cover Image" id="cover-img" class="img-fluid">
                                </div>
                            </div>
                            
                            <!-- Foto do Membro -->
                            <div class="text-center mb-4 mt-n5 pt-2">
                                <div class="position-relative d-inline-block">
                                    <div class="avatar-lg">
                                        <div class="avatar-title bg-light rounded-circle">
                                            <img src="{{URL::asset('build/images/users/user-dummy-img.jpg')}}" id="member-img" class="avatar-md rounded-circle h-auto" />
                                        </div>
                                    </div>
                                </div>
                                <input type="file" name="image" class="form-control mt-2" accept="image/png, image/gif, image/jpeg">
                            </div>
                            
                            <!-- Nome -->
                            <div class="mb-3">
                                <label for="teammembersName" class="form-label">Nome</label>
                                <input type="text" name="name" class="form-control" id="teammembersName" placeholder="Digite o nome" required>
                                <div class="invalid-feedback">Por favor, digite um nome.</div>
                            </div>
                            
                            <!-- Telefone -->
                            <div class="mb-3">
                                <label for="phone" class="form-label">Telefone</label>
                                <input type="text" name="phone" class="form-control" id="phone" placeholder="Digite o telefone">
                            </div>
                            
                            <!-- Cargo -->
                            <div class="mb-3">
                                <label for="role" class="form-label">Cargo</label>
                                <input type="text" name="role" class="form-control" id="role" placeholder="Digite o cargo">
                            </div>
                            
                            <!-- Status -->
                            <div class="mb-3">
                                <label for="status" class="form-label">Status</label>
                                <select name="status" class="form-control" id="status" required>
                                    <option value="ativo">Ativo</option>
                                    <option value="inativo">Inativo</option>
                                    <option value="pendente">Pendente</option>
                                </select>
                                <div class="invalid-feedback">Selecione um status.</div>
                            </div>
                            
                            <div class="hstack gap-2 justify-content-end">
                                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Fechar</button>
                                <button type="submit" class="btn btn-success">Adicionar</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection