@extends('voyager::master')

@section('page_title', 'Usuarios')

@section('head')
    <style>
            .suggestions {
                position: absolute;
                background-color: #fff;
                z-index: 1000;
                max-height: 200px;
                overflow-y: auto;
                width: 100%;
                max-width: 177px;
            }

            .client-list-item, .user-list-item {
                padding: 10px;
                width: 100%;
                font-size: 14px;
                cursor: pointer;
                color: #333;
                border-bottom: 1px solid #eee;
            }

            .client-list-item:nth-child(odd), .user-list-item:nth-child(odd) {
                background-color: #f9f9f9;
            }

            .client-list-item:nth-child(even), .user-list-item:nth-child(even) {
                background-color: #e9ecef;
            }

            .client-list-item:hover, .user-list-item:hover {
                background-color: #dfefff;
                color: #007bff;
            }



    </style>
@endsection

@section('page_header')
    <div class="d-flex justify-between items-center" style="margin: 0px 20px;">
        <div class="d-flex header-title">
            <img src="{{voyager_asset('images/iconos/user.webp')}}" alt="">
            <h1 class="page-title">
                Usuarios
            </h1>
        </div>
        <div class="btn-group"
            style="display: flex; justify-content: center; gap: 5px; align-items: center; margin-right: 130px;">
            <div class="dropdown">
                <button class="btn btn-primary dropdown-toggle" style="margin: 0px !important;" type="button"
                    data-bs-toggle="dropdown" aria-expanded="false">
                    Acciones disponibles
                </button>
                <ul class="dropdown-menu" style="margin: 0px !important; background: #fff !important">
                    <li>
                        <a class="dropdown-item" href="/admin/users/create">
                            <img src="{{voyager_asset('images/iconos/mas.webp')}}" alt="">
                            Crear un nuevo usuario
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="/admin/importacion-users">
                            <img src="{{voyager_asset('images/iconos/excel.webp')}}" alt="">
                            Exportar / Importar en excel
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
@stop

@section('content')
    <div class="page-content container-fluid">
        @include('voyager::alerts')
        @if (session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif
        @if (session('error'))
            <div class="alert alert-danger">
                {{ session('error') }}
            </div>
        @endif
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-bordered">
                    <div class="panel-body">
                        <form action="/admin/usuarios" method="GET" class="form-inline" style="margin-bottom: 15px;">

                        <div class="form-group">
                            <input 
                                type="text" 
                                name="cliente" 
                                id="search-users-by-client" 
                                class="form-control" 
                                placeholder="Buscar por cliente" 
                            >
                            <div id="search-users-by-client-suggestions" class="suggestions"></div>
                        </div>


                            <div class="form-group">
                                <input 
                                    type="text" 
                                    name="search" 
                                    id="search-users" 
                                    class="form-control" 
                                    placeholder="Buscar por nombre, apellido o nombre de fantasía..." 
                                    value="{{ $search }}"
                                >
                                <div id="search-users-suggestions" class="suggestions"></div>
                            </div>


                            <div class="form-group">
                                <select name="role" class="form-control">
                                    <option value="">Seleccionar rol</option>
                                    <option value="1">Administrador</option>
                                    <option value="2">Comprador</option>
                                    <option value="3">Vendedor</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <select name="status" class="form-control">
                                    <option value="">Seleccionar estado</option>
                                    <option value="1" {{ $status == 1 ? 'selected' : '' }}>Activo</option>
                                    <option value="2" {{ $status == 2 ? 'selected' : '' }}>Pendiente - Autorización</option>
                                    <option value="inactive" {{ $status == 'inactive' ? 'selected' : '' }}>Inactivo</option>
                                </select>

                            </div>
                            <button type="submit" class="btn btn-primary">Buscar</button>
                        </form>
                        <div class="table-responsive">
                            <table id="dataTable" class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Apellido y nombre</th>
                                        <th>Cliente</th>
                                        <th>Email</th>
                                        <th>Tipo de acceso</th>
                                        <th>Nombre de fantasia</th>
                                        <th>Estado</th>
                                        {{-- <th>Acciones</th> --}}
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($users as $user)
                                        <tr>
                                            <td>{{ $user->id }}</td>
                                            <td>
                                                <a href="/admin/users/{{$user->id}}">
                                                    {{ $user->name }}
                                                </a>
                                            </td>
                                            <td>
                                                @if ($user->clienteAsignado)
                                                    <a href="{{ url('/admin/cliente/' . $user->clienteAsignado->id . '/show') }}">
                                                        {{ $user->clienteAsignado->razon_social ?? $user->clienteAsignado->name ?? '' }}
                                                    </a>
                                                @else
                                                    Sin cliente asignado
                                                @endif
                                            </td>

                                            <td>{{ $user->email }}</td>
                                            <td>{{ $user->role->display_name ?? '' }}</td>
                                            <td>{{ $user->fantasia_name }}</td>
                                            <td>
                                                @if($user->status == 1)
                                                    Activo
                                                @elseif($user->status == 2)
                                                    Pendiente - Autorización
                                                @elseif($user->status != 1 && $user->status != 2)
                                                    Inactivo 
                                                @endif
                                            </td>
                                            {{-- <td class="no-sort no-click bread-actions">
                                                @can('delete', $user)
                                                    <a href="javascript:;" title="{{ __('voyager::generic.delete') }}"
                                                        class="btn btn-sm btn-danger pull-right delete"
                                                        data-id="{{ $user->id }}" id="delete-{{ $user->id }}">
                                                        <i class="voyager-trash"></i> <span
                                                            class="hidden-xs hidden-sm">{{ __('voyager::generic.delete') }}</span>
                                                    </a>
                                                @endcan
                                                @can('edit', $user)
                                                    <a href="/admin/users/{{ $user->id }}/edit"
                                                        title="{{ __('voyager::generic.edit') }}"
                                                        class="btn btn-sm btn-primary pull-right edit">
                                                        <i class="voyager-edit"></i> <span
                                                            class="hidden-xs hidden-sm">{{ __('voyager::generic.edit') }}</span>
                                                    </a>
                                                @endcan
                                                @can('read', $user)
                                                    <a href="/admin/users/{{ $user->id }}"
                                                        title="{{ __('voyager::generic.view') }}"
                                                        class="btn btn-sm btn-warning pull-right">
                                                        <i class="voyager-eye"></i> <span
                                                            class="hidden-xs hidden-sm">{{ __('voyager::generic.view') }}</span>
                                                    </a>
                                                @endcan
                                            </td> --}}
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        <div class="pull-left">
                            <div role="status" class="show-res" aria-live="polite">
                                {{ trans_choice('voyager::generic.showing_entries', $users->total(), [
                                    'from' => $users->firstItem(),
                                    'to' => $users->lastItem(),
                                    'all' => $users->total(),
                                ]) }}
                            </div>
                        </div>
                        <div class="pull-right">
                            {{ $users->appends(['search' => $search, 'role' => $role, 'status' => $status])->links('vendor.pagination.bootstrap-4') }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Single delete modal --}}
    <div class="modal modal-danger fade" tabindex="-1" id="delete_modal" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                        aria-label="{{ __('voyager::generic.close') }}"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title"><i class="voyager-trash"></i> {{ __('voyager::generic.delete_question') }}
                        {{ strtolower('usuario') }}?</h4>
                </div>
                <div class="modal-footer">
                    <form action="#" id="delete_form" method="POST">
                        {{ method_field('DELETE') }}
                        {{ csrf_field() }}
                        <input type="submit" class="btn btn-danger pull-right delete-confirm"
                            value="{{ __('voyager::generic.delete_confirm') }}">
                    </form>
                    <button type="button" class="btn btn-default pull-right"
                        data-dismiss="modal">{{ __('voyager::generic.cancel') }}</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
@stop

@section('javascript')
    <script>
        var deleteFormAction;
        $('td').on('click', '.delete', function(e) {
            $('#delete_form')[0].action = '/admin/users/' + $(this).data('id');
            $('#delete_modal').modal('show');
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {

        //buscar por usuario
        const usersInput = document.getElementById('search-users');
        const usersSuggestions = document.getElementById('search-users-suggestions');
        
        usersInput.addEventListener('input', function () {
            const query = usersInput.value;
            if (query.length > 2) {
                fetch(`/admin/search-users?query=${query}`)
                    .then(response => response.json())
                    .then(data => {
                        usersSuggestions.innerHTML = data.html;
                    })
                    .catch(error => console.error('Error buscando usuarios:', error));
            } else {
                usersSuggestions.innerHTML = '';
            }
        });
        
        document.body.addEventListener('click', function (e) {
            if (e.target.classList.contains('user-list-item')) {
                const userId = e.target.getAttribute('data-id');
                window.location.href = `/admin/users/${userId}`;
            }
        });




        //buscar por clientes
        const clientInput = document.getElementById('search-users-by-client');
        const clientSuggestions = document.getElementById('search-users-by-client-suggestions');

        clientInput.addEventListener('input', function () {
            const query = clientInput.value;

            if (query.length > 2) {
                fetch(`/admin/search-by-client?cliente=${query}`)
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('Cliente no encontrado');
                        }
                        return response.json();
                    })
                    .then(data => {
                        clientSuggestions.innerHTML = data.data
                            .map(
                                user =>
                                    `<div class="client-list-item" data-id="${user.id}">${user.name} (${user.email})</div>`
                            )
                            .join('');
                    })
                    .catch(error => {
                        clientSuggestions.innerHTML = `<div class="client-list-item error">${error.message}</div>`;
                    });
            } else {
                clientSuggestions.innerHTML = '';
            }
        });

        // Redirigir al hacer clic en un usuario
            document.body.addEventListener('click', function (e) {
                if (e.target.classList.contains('client-list-item') && !e.target.classList.contains('error')) {
                    const userId = e.target.getAttribute('data-id');
                    window.location.href = `/admin/users/${userId}`;
                }
            });
        });

    </script>
@stop