@extends('layouts.app')

@section('title', __('messages.manage_users'))

@section('breadcrumb')
    <a href="{{ route('settings.index') }}" class="text-decoration-none text-secondary">{{ __('messages.settings') }}</a>
    / <span class="text-secondary">{{ __('messages.users') }}</span>
@endsection

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title"><i class="bi bi-people-fill me-2 text-primary"></i>{{ __('messages.manage_users') }}</h1>
    </div>
    <div class="d-flex gap-2">
        @role('admin')
        <a href="{{ route('settings.permissions') }}" class="btn btn-outline-secondary">
            <i class="bi bi-shield-lock me-1"></i>{{ __('messages.permissions') }}
        </a>
        @endrole
        @can('create settings')
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#userModal">
            <i class="bi bi-plus-lg me-1"></i>{{ __('messages.add_user') }}
        </button>
        @endcan
    </div>
</div>

<div class="card">
    <div class="table-responsive">
        <table class="table table-hover mb-0">
            <thead>
                <tr>
                    <th>{{ __('messages.name') }}</th>
                    <th>{{ __('messages.email') }}</th>
                    <th>{{ __('messages.role') }}</th>
                    <th>{{ __('messages.status') }}</th>
                    <th class="text-center">{{ __('messages.actions') }}</th>
                </tr>
            </thead>
            <tbody>
                @forelse($users as $user)
                <tr>
                    <td>{{ $user->name }}</td>
                    <td>{{ $user->email }}</td>
                    <td>
                        @if($user->roles->count() > 0)
                            <span class="badge bg-secondary">{{ $user->roles->first()->name }}</span>
                        @else
                            <span class="badge bg-secondary-emphasis">{{ __('messages.no_role') }}</span>
                        @endif
                    </td>
                    <td><span class="badge bg-success">{{ __('messages.active') }}</span></td>
                    <td class="text-center">
                        @if($user->id === auth()->id() || auth()->user()->hasRole('admin'))
                        <button
                            type="button"
                            class="btn btn-sm btn-outline-warning"
                            data-bs-toggle="modal"
                            data-bs-target="#editNameModal"
                            data-user-id="{{ $user->id }}"
                            data-user-name="{{ $user->name }}"
                            data-user-is-self="{{ $user->id === auth()->id() ? '1' : '0' }}"
                            title="{{ __('messages.edit_name') }}"
                        >
                            <i class="bi bi-pencil"></i>
                        </button>
                        @endif
                        @role('admin')
                        @if($user->id !== auth()->id())
                        <a href="{{ route('settings.permissions', ['user' => $user->id]) }}" class="btn btn-sm btn-outline-secondary" title="{{ __('messages.manage_permissions') }}">
                            <i class="bi bi-shield-lock"></i>
                        </a>
                        @endif
                        @endrole
                        @can('delete settings')
                        @if($user->id !== auth()->id())
                        <button class="btn btn-sm btn-outline-danger" onclick="if(confirm('{{ __('messages.delete_user') }}')) document.getElementById('del-{{ $user->id }}').submit()">
                            <i class="bi bi-trash"></i>
                        </button>
                        <form id="del-{{ $user->id }}" action="{{ route('settings.destroyUser', $user) }}" method="POST" class="d-none">
                            @csrf @method('DELETE')
                        </form>
                        @elseif($user->id === auth()->id())
                        <span class="text-muted small">{{ __('messages.current_user') }}</span>
                        @endif
                        @endcan
                        @cannot('delete settings')
                        @if($user->id === auth()->id())
                        <span class="text-muted small">{{ __('messages.current_user') }}</span>
                        @endif
                        @endcannot
                    </td>
                </tr>
                @empty
                <tr><td colspan="5" class="text-center py-4 text-muted">{{ __('messages.no_users') }}</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

{{-- Modal --}}
<div class="modal fade" id="userModal" tabindex="-1">
    <div class="modal-dialog">
        <form method="POST" action="{{ route('settings.storeUser') }}" class="modal-content">
            @csrf
            <div class="modal-header">
                <h5 class="modal-title">{{ __('messages.add_new_user') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label">{{ __('messages.full_name') }} *</label>
                    <input type="text" class="form-control @error('name') is-invalid @enderror" name="name" required>
                    @error('name')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                </div>
                <div class="mb-3">
                    <label class="form-label">{{ __('messages.email') }} *</label>
                    <input type="email" class="form-control @error('email') is-invalid @enderror" name="email" required>
                    @error('email')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                </div>
                <div class="mb-3">
                    <label class="form-label">{{ __('messages.password') }} *</label>
                    <input type="password" class="form-control @error('password') is-invalid @enderror" name="password" required>
                    @error('password')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{{ __('messages.cancel') }}</button>
                <button type="submit" class="btn btn-primary">{{ __('messages.create_user') }}</button>
            </div>
        </form>
    </div>
</div>

<div class="modal fade" id="editNameModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <form method="POST" id="editNameForm" class="modal-content">
            @csrf
            @method('PUT')
            <div class="modal-header">
                <h5 class="modal-title">{{ __('messages.edit_name') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" name="edit_user_id" id="editUserId" value="{{ old('edit_user_id') }}">
                <input type="hidden" name="edit_is_self" id="editIsSelf" value="{{ old('edit_is_self') }}">
                <div class="mb-3">
                    <label class="form-label">{{ __('messages.full_name') }} *</label>
                    <input type="text" class="form-control @error('name') is-invalid @enderror" name="name" id="editUserName" required>
                    @error('name')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                </div>
                <div id="passwordFields" class="d-none">
                    <hr>
                    <div class="mb-3">
                        <label class="form-label">{{ __('messages.old_password') }}</label>
                        <div class="input-group">
                            <input type="password" class="form-control @error('current_password') is-invalid @enderror" name="current_password" id="editCurrentPassword" autocomplete="current-password">
                            <button type="button" class="btn btn-outline-secondary password-toggle" data-target="editCurrentPassword" style="border-color:var(--border-color)">
                                <i class="bi bi-eye"></i>
                            </button>
                        </div>
                        @error('current_password')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                    </div>
                    <div class="mb-3">
                        <label class="form-label">{{ __('messages.new_password') }}</label>
                        <div class="input-group">
                            <input type="password" class="form-control @error('new_password') is-invalid @enderror" name="new_password" id="editNewPassword" autocomplete="new-password">
                            <button type="button" class="btn btn-outline-secondary password-toggle" data-target="editNewPassword" style="border-color:var(--border-color)">
                                <i class="bi bi-eye"></i>
                            </button>
                        </div>
                        @error('new_password')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                    </div>
                    <div class="mb-3">
                        <label class="form-label">{{ __('messages.confirm_new_password') }}</label>
                        <div class="input-group">
                            <input type="password" class="form-control" name="new_password_confirmation" id="editNewPasswordConfirmation" autocomplete="new-password">
                            <button type="button" class="btn btn-outline-secondary password-toggle" data-target="editNewPasswordConfirmation" style="border-color:var(--border-color)">
                                <i class="bi bi-eye"></i>
                            </button>
                        </div>
                    </div>
                    <p class="text-muted small mb-0">{{ __('messages.leave_password_blank') }}</p>
                </div>
                <p class="text-muted small mb-0" id="editNameHelp">{{ __('messages.only_name_editable') }}</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{{ __('messages.cancel') }}</button>
                <button type="submit" class="btn btn-primary">{{ __('messages.update') }}</button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const editNameModal = document.getElementById('editNameModal');
    const editNameForm = document.getElementById('editNameForm');
    const editUserName = document.getElementById('editUserName');
    const editUserId = document.getElementById('editUserId');
    const editIsSelf = document.getElementById('editIsSelf');
    const passwordFields = document.getElementById('passwordFields');
    const editNameHelp = document.getElementById('editNameHelp');
    const editCurrentPassword = document.getElementById('editCurrentPassword');
    const editNewPassword = document.getElementById('editNewPassword');
    const editNewPasswordConfirmation = document.getElementById('editNewPasswordConfirmation');
    const passwordToggles = Array.from(document.querySelectorAll('.password-toggle'));

    if (!editNameModal) {
        return;
    }

    const configureEditModal = (userId, userName, isSelf) => {
        editNameForm.action = `/settings/users/${userId}`;
        editUserName.value = userName || '';
        editUserId.value = userId || '';
        editIsSelf.value = isSelf ? '1' : '0';
        passwordFields.classList.toggle('d-none', !isSelf);
        editNameHelp.classList.toggle('d-none', isSelf);

        if (!isSelf) {
            editCurrentPassword.value = '';
            editNewPassword.value = '';
            editNewPasswordConfirmation.value = '';
        }
    };

    editNameModal.addEventListener('show.bs.modal', function (event) {
        const button = event.relatedTarget;

        if (!button) {
            return;
        }

        configureEditModal(button.dataset.userId, button.dataset.userName || '', button.dataset.userIsSelf === '1');
    });

    const previousEditUserId = @json(old('edit_user_id'));
    const previousEditIsSelf = @json(old('edit_is_self'));

    if (previousEditUserId) {
        configureEditModal(previousEditUserId, @json(old('name')), previousEditIsSelf === '1');
        bootstrap.Modal.getOrCreateInstance(editNameModal).show();
    }

    passwordToggles.forEach((button) => {
        button.addEventListener('click', function (event) {
            event.preventDefault();

            const targetInput = document.getElementById(this.dataset.target);

            if (!targetInput) {
                return;
            }

            const nextType = targetInput.getAttribute('type') === 'password' ? 'text' : 'password';
            targetInput.setAttribute('type', nextType);

            const icon = this.querySelector('i');
            icon.classList.toggle('bi-eye', nextType === 'password');
            icon.classList.toggle('bi-eye-slash', nextType === 'text');
        });
    });
});
</script>
@endpush
@endsection