@extends('layouts.app', ['page' => __('Administración de Usuarios'), 'pageSlug' => 'users', 'section' => 'settings'])

@section('content')

    @component('components.searchBar', ['fields' => $fields , 'action' => route('users.index'), 'search' => $search, 'roles' => $roles]) @endcomponent

    <div class="row">
        <div class="col-md-12">
            <div class="card ">
                <div class="card-header">
                    <div class="row">
                        <div class="col-8">
                            <h4 class="card-title">{{ __('Usuarios') }}</h4>
                        </div>
                        <div class="col-4 text-right">
                            <a href="{{ route('users.create') }}" class="btn btn-sm btn-primary btn-gradient">{{ __('Agregar usuario') }}</a>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="">
                        <table class="table tablesorter " id="">
                            <thead class=" text-primary">
                                <th scope="col">{{ __('Nombre') }}</th>
                                <th scope="col">{{ __('Correo electrónico') }}</th>
                                <th scope="col">{{ __('Rol') }}</th>
                                <th scope="col">{{ __('Fecha Registro') }}</th>
                                <th scope="col"></th>
                            </thead>
                            <tbody>
                                @foreach ($users as $user)
                                    <tr class="table-row-hover">
                                        <td>
                                            <a class="d-block" href="{{ route('users.edit', $user) }}">
                                              {{ $user->name }}
                                            </a>
                                        </td>
                                        <td>
                                            <a href="mailto:{{ $user->email }}">{{ $user->email }}</a>
                                        </td>
                                        <td>
                                          <a class="d-block" href="{{ route('users.edit', $user) }}">
                                            {{ $user->role_name }}
                                          </a>
                                        </td>
                                        <td>
                                          <a class="d-block" href="{{ route('users.edit', $user) }}">
                                            {{ $user->formatted_created_at }}
                                          </a>
                                        </td>
                                        <td class="text-right">
                                                <div class="dropdown">
                                                    <a class="btn btn-sm btn-icon-only text-light bw-btn-anchor" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                        <i class="tim-icons icon-settings-gear-63"></i>
                                                    </a>
                                                    <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                                                        <a class="dropdown-item" href="{{ route('users.edit', $user) }}">{{ __('Editar') }}</a>
                                                        <a class="dropdown-item" onclick="deleteUser({{  $user->id }}, '{{  $user->role_name }}')">
                                                                    {{ __('Eliminar') }}
                                                        </a>
                                                    </div>
                                                </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="card-footer py-4">
                    <nav class="d-flex justify-content-end" aria-label="...">
                        {{ $users->appends($_GET)->links() }}
                    </nav>
                </div>
            </div>
        </div>
    </div>
@endsection

<script>
    function deleteUser(userId, roleName) {
        if (roleName !== 'vendedor') {
            deleteUserAjax(userId);
        } else {
            showReassignSellerModal(userId);
        }
    }

    function deleteUserAjax(userId) {

        $.ajax({
            url: `/users/${userId}`,
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') // Obtén el token CSRF automáticamente
            },
            success: function(response) {
                Swal.fire('Éxito', 'Usuario eliminado exitosamente.', 'success').then(() => {
                    window.location.reload();
                });
            },
            error: function(xhr, status, error) {
                console.error(">>> ERROR: ", error);
                Swal.fire('Error', 'Hubo un problema al eliminar el usuario.', 'error');
            }
        });
    }

    function showReassignSellerModal(userId) {
        const sellers = {!! json_encode($sellers) !!};
        const filteredSellers = sellers.filter(seller => seller.id !== userId);

        const modalContent = `
            <div class="form-group">
                <label for="newSeller">Seleccione un nuevo vendedor:</label>
                <select class="form-control" id="newSeller">
                    ${filteredSellers.map(seller => `<option value="${seller.id}">${seller.name}</option>`).join('')}
                </select>
            </div>
        `;

        Swal.fire({
            title: 'Reasignar cotizaciones',
            html: modalContent,
            showCancelButton: true,
            confirmButtonText: 'Reasignar y Eliminar',
            cancelButtonText: 'Cancelar',
            preConfirm: () => {
                const newSellerId = document.getElementById('newSeller').value;
                if (!newSellerId) {
                    Swal.showValidationMessage('Por favor seleccione un vendedor');
                }
                return { newSellerId: newSellerId };
            }
        }).then((result) => {
            if (result.isConfirmed) {
                deleteAndRelateSeller(userId, result.value.newSellerId);
            }
        });
    }

    function deleteAndRelateSeller(userId, newSellerId) {
        fetch(`/admin/users/${userId}/delete-and-relate`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({
                new_seller_id: newSellerId
            })
        }).then(response => {
            if (response.ok) {
                Swal.fire('Éxito', 'El vendedor ha sido eliminado y las cotizaciones reasignadas.', 'success').then(() => {
                    window.location.reload();
                });
            } else {
                Swal.fire('Error', 'Hubo un problema al procesar la solicitud.', 'error');
            }
        });
    }
</script>