@extends('admin.layouts.app')
@section('content')
<div class="container-fluid">

    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                <h4 class="mb-sm-0">{{$title}}</h4>

                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="javascript: void(0);">{{$title}}</a></li>
                        <li class="breadcrumb-item active">{{$subtitle}}</li>
                    </ol>
                </div>

            </div>
        </div>
    </div>
    <!-- end page title -->

    <div class="card">
        <div class="card-body">
            <div class="row g-2">
                <div class="col-sm-4">
                    <h4>Miembros del equipo</h4>
                    {{-- <div class="search-box">
                        <input type="text" class="form-control" id="searchMemberList" placeholder="Search for name or designation...">
                        <i class="ri-search-line search-icon"></i>
                    </div> --}}
                </div>
                <!--end col-->
                <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">
                            <li><a class="dropdown-item" href="#">All</a></li>
                            <li><a class="dropdown-item" href="#">Last Week</a></li>
                            <li><a class="dropdown-item" href="#">Last Month</a></li>
                            <li><a class="dropdown-item" href="#">Last Year</a></li>
                        </ul> --}}
                        <a class="btn btn-success addMembers-modal" href="{{(route('admin.users.create'))}}"><i class="ri-add-fill me-1 align-bottom"></i> Nuevo Miembro</a>
                    </div>
                </div>
                <!--end col-->
            </div>
            <!--end row-->
        </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-3 offcanvas-end border-0"  tabindex="-1">
                            <!--end offcanvas-header-->
                            <div class="offcanvas-body profile-offcanvas p-0" style="background-color: rgb(255, 255, 255); border-radius: 10px; position: relative;">
                                <div class="team-cover" style="position: relative; z-index: 1;">
                                    <img src="{{asset('assets_admin/images/small/img-9.jpg')}}" alt="" class="img-fluid" style="position: relative; z-index: 2;" />
                                </div>
                                <div class="p-3">
                                    <div class="team-settings">
                                        <div class="row"  style="position: relative; z-index: 2;" >
                                            <div class="col text-end dropdown">
                                                <a id="dropdownMenuLink14" data-bs-toggle="dropdown" aria-expanded="false">
                                                    <i class="ri-more-fill fs-17"></i>
                                                </a>
                                                <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink14" >
                                                    <li><a class="dropdown-item" href="{{route('admin.users.show', $user->id)}}"><i class="ri-eye-line me-2 align-middle"></i>Ver más</a></li>
                                                    <li><a class="dropdown-item" href="{{route('admin.users.edit', $user->id)}}"><i class="ri-edit-2-line me-2 align-middle"></i>Editar</a></li>
                                                    <li><a class="dropdown-item remove-item-btn"  data-id="{{$user->id}}" data-bs-toggle="modal" href="#deleteRecordModal"><i class="ri-delete-bin-5-line me-2 align-middle"></i>Delete</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <!--end col-->
                                </div>
                                <div class="p-3 text-center" style="background-color: rgb(255, 255, 255);">
                                    @if ($user->imagen_url)
                                        <img src="{{ $user->imagen_url }}" alt="Imagen de {{ $user->name }}" style="position: relative; z-index: 1;" class="avatar-lg img-thumbnail rounded-circle mx-auto profile-img">
                                    @else
                                        <img src="{{ asset('assets_admin/images_admin/user-dummy-img.jpg') }}" alt="Imagen de {{ $user->name }}" style="position: relative; z-index: 1;" class="avatar-lg img-thumbnail rounded-circle mx-auto profile-img">
                                    @endif
                                    <div class="mt-3" >
                                        <h5 class="fs-15 profile-name">{{ $user->name }}</h5>
                                        <p class="text-muted profile-designation">{{ $user->position_company }} <br> {{ $user->number_document }}</p>
                                    </div>
                                </div>
                                
                                <div class="offcanvas-foorter border p-3 hstack gap-3 text-center position-relative"  style="background-color: rgb(255, 255, 255);"> 
                                    <a href="{{route('admin.users.show', $user->id)}}" class="btn btn-primary w-100"><i class="ri-user-3-fill align-bottom ms-1"></i>Ver perfil</a>
                                </div>
                                <!--end row-->
                            </div>
                        </div>
                    @endforeach
                    <!--end offcanvas-->
                </div>
            </div>
        </div><!-- end col -->
    </div>
    <!--end row-->
</div>
  <!-- deleteRecordModal -->
  <div class="modal fade zoomIn" id="deleteRecordModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="btn-close" id="deleteRecord-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form action="{{ route('admin.users.delete') }}" method="post">
                    @csrf
                    <input type="hidden" id="itemRemoveId" name="id">
                    <div class="mt-2 text-center">
                        <lord-icon src="https://cdn.lordicon.com/gsqxdxog.json" trigger="loop" colors="primary:#f7b84b,secondary:#f06548" style="width:100px;height:100px"></lord-icon>
                        <div class="mt-4 pt-2 fs-15 mx-4 mx-sm-5">
                            <h4>¿Está seguro?</h4>
                            <p class="text-muted mx-4 mb-0">El usuario se eliminará de manera permanente.</p>
                        </div>
                        <div class="mt-4 pt-2 fs-15 mx-4 mx-sm-5">
                            <div class="modal-body">
                                <p>Debe elegir otro usuario al cual se le asignarán todas las tareas de este usuario (si tiene)</p>
                                <select id="newUserSelect" name="user_assignment" class="form-select">
                                    @foreach($users as $user)
                                        <option value="{{ $user->id }}">{{ $user->name }} {{ $user->lastname }} - {{ $user->number_document }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex gap-2 justify-content-center mt-4 mb-2">
                        <button type="button" class="btn w-sm btn-light" data-bs-dismiss="modal">No</button>
                        <button type="submit" class="btn w-sm btn-danger" id="delete-record">Sí, Estoy segur@!</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@section('scripts')
    <script src="{{asset('assets_admin/js/pages/team.init.js')}}"></script>
    <script>
        // Obtener todos los elementos con la clase "remove-item-btn"
        const removeButtons = document.querySelectorAll('.remove-item-btn');
        
        // Añadir evento click a cada botón de eliminación
        removeButtons.forEach(button => {
            button.addEventListener('click', function(event) {
                // Obtener el ID del usuario desde el atributo "data-id"
                const itemId = this.getAttribute('data-id');

                // Asignar el ID del usuario al input hidden en el modal
                document.getElementById('itemRemoveId').value = itemId;

                // Filtrar opciones en el select cuando se abre el modal
                const newUserSelect = document.getElementById('newUserSelect');
                
                // Primero, habilitar todas las opciones
                Array.from(newUserSelect.options).forEach(option => {
                    option.style.display = 'block'; // Hacer que todas las opciones sean visibles
                });

                // Luego, ocultar la opción del usuario a eliminar
                Array.from(newUserSelect.options).forEach(option => {
                    if (option.value === itemId) {
                        option.style.display = 'none'; // Ocultar la opción
                    }
                });
            });
        });
    </script>
@endsection
@endsection