@extends('admin.layouts.app')

@section('title', $title)

@section('content')
    <div class="col-md-12">
        <!-- Page Heading & Search Area -->
        <div class="row mb-3">
            <div class="col-md-9">
                <h4 class="c-grey-900">{{ $title }} <a class="btn btn-primary" href="{{ route('ch-admin.user.create') }}"><i class="ti-plus"></i></a></h4>
            </div>

            <div class="col-md-3">
                <form method="GET" action="{{ route('ch-admin.user.index') }}">
                    <div class="input-group">
                        <input type="text" name="search" class="form-control" placeholder="Search…" value="{{ request('search') }}">
                        <button class="btn btn-info" type="submit"><i class="ti ti-search"></i></button>
                    </div>
                    <!-- Include current filter values as hidden inputs -->
                    <input type="hidden" name="verification_status" value="{{ request('verification_status') }}">
                    <input type="hidden" name="role" value="{{ request('role') }}">
                </form>
            </div>
        </div>

        <!-- Main Content -->
        <div class="row">
            <div class="bgc-white bd bdrs-3 p-20 mB-20">
                <!-- Filters Section -->
                <div class="row mb-3">
                    <form method="GET" action="{{ route('ch-admin.user.index') }}" class="d-flex gap-3 w-100">
                        <!-- Filter by Verification -->
                        <div class="flex-shrink-0">
                            <select name="verification_status" class="form-control">
                                <option value="">All Statuses</option>
                                <option value="yes" {{ request('verification_status') == 'yes' ? 'selected' : '' }}>Verified</option>
                                <option value="no" {{ request('verification_status') == 'no' ? 'selected' : '' }}>Unverified</option>
                            </select>
                        </div>

                        <!-- Filter by Role -->
                        <div class="flex-shrink-0">
                            <select name="role" class="form-control">
                                <option value="">All Roles</option>
                                @foreach($roles as $id => $display_name)
                                    <option value="{{ $id }}" {{ old('roles') == $id ? 'selected' : '' }}>{{ $display_name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <!-- Filter / Delete Buttons -->
                        <div class="flex-shrink-0">
                            <button type="submit" class="btn btn-info">Apply Filters</button>
                            @if(request('verified') || request('role'))
                                <a href="{{ route('ch-admin.user.index') }}" class="btn btn-secondary">Reset</a>
                            @endif
                            <button class="btn btn-danger" id="delete-bulk-btn" type="button" style="display: none"><i class="fa fa-solid fa-trash"></i> Delete</button>
                        </div>

                        <input type="hidden" name="search" value="{{ request('search') }}">
                    </form>
                </div>

                <!-- Users Table -->
                <div class="row">
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th><input type="checkbox" id="select-all" class="form-check-input"></th>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Verified</th>
                            <th>Role</th>
                            <th>Last Login</th>
                            <th>Registered</th>
                            <th>Delete</th>
                        </tr>
                        </thead>
                        <tbody>
                        @forelse($users as $user)
                            <tr>
                                <td>
                                    @if(auth()->user()->id !== $user->id)
                                        <input type="checkbox" class="form-check-input select-user" value="{{ $user->id }}">
                                    @else
                                        <input type="checkbox" class="form-check-input select-user" value="{{ $user->id }}" disabled>
                                    @endif
                                </td>
                                <th scope="row">{{ $user->id }}</th>
                                <td><a href="{{ route( 'ch-admin.user.edit', [$user->id]) }}">{{ $user->name }}</a></td>
                                <td>{{ $user->email }}</td>
                                <td>{{ $user->hasVerifiedEmail() ? 'Yes' : 'No' }}</td>
                                <td>{{ ( $user->roles->first() !== null ) ? $user->roles->first()->display_name : 'N/A'  }}</td>
                                <td>{{ $user->last_login ? $user->last_login->diffForHumans() : 'Never' }}</td>
                                <td>{{ $user->created_at->diffForHumans() }}</td>
                                <td>
                                    @can('delete', $user)
                                        <form method="POST" action="{{ route('ch-admin.user.destroy', $user->id) }}" onsubmit="return confirm('Are you sure you want to delete this User?');">
                                            @method('DELETE')
                                            @csrf
                                            <button type="submit" class="btn btn-sm btn-danger"><i class="fa fa-solid fa-trash"></i></button>
                                        </form>
                                    @endcan
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="9" class="text-center">No users found</td>
                            </tr>
                        @endforelse
                        </tbody>
                    </table>

                    <!-- Pagination Link -->
                    @if($users->hasPages())
                        <div class="mt-4">
                            {{ $users->links() }}
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{url('assets/custom/js/axios.min.js')}}"></script>
    <script>
        const selectAllCheckbox = document.getElementById('select-all');
        const userCheckboxes = document.querySelectorAll('.select-user');
        const deleteBulkBtn = document.getElementById('delete-bulk-btn');

        selectAllCheckbox.addEventListener('click', () => {
            const isChecked = selectAllCheckbox.checked;
            userCheckboxes.forEach(checkbox => {
                if (!checkbox.disabled) {
                    checkbox.checked = isChecked;
                }
            });
            toggleDeleteButton();
        });

        userCheckboxes.forEach(checkbox => {
            checkbox.addEventListener('click', () => {
                selectAllCheckbox.checked = [...userCheckboxes].every(checkbox => checkbox.checked);
                toggleDeleteButton();
            });
        });

        function toggleDeleteButton() {
            deleteBulkBtn.style.display = [...userCheckboxes].some(checkbox => checkbox.checked) ? 'inline-block' : 'none';
        }

        function getSelectedUsers() {
            return [...userCheckboxes]
                .filter(checkbox => checkbox.checked && !checkbox.disabled)
                .map(checkbox => checkbox.value);
        }

        deleteBulkBtn.addEventListener('click', () => {
            const selectedUsers = getSelectedUsers();

            if (selectedUsers.length === 0) {
                alert('Please select at least one user.');
                return;
            }

            if (!confirm('Are you sure you want to delete the selected users?')) {
                return;
            }

            httpClient.delete('{{ route("ch-admin.user.bulk.destroy") }}', {
                data: {
                    user_ids: selectedUsers
                }
            })
                .then((response) => {
                    if (response.data.success) {
                        window.location.href = '{{ route("ch-admin.user.index") }}';
                    } else {
                        alert('Failed to delete users.');
                    }
                })
                .catch((error) => {
                    console.error(error);
                    alert('An error occurred. Please try again.');
                });
        });

        toggleDeleteButton();
    </script>
@endpush