@extends('layouts.admin')

@section('title', __('admin.users'))

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-4xl font-extrabold text-orange-500 mb-10 drop-shadow-lg tracking-wide text-center uppercase w-full">
            {{ __('admin.users') }}
        </h1>
        <button type="button" id="bulk-delete-users-btn" class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded hidden">
            {{ __('admin.delete_selected') }}
        </button>
    </div>

    @if(session('success'))
        <div class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 mb-4" role="alert">
            <p>{{ session('success') }}</p>
        </div>
    @endif

    <div class="bg-white shadow-md rounded-lg overflow-hidden">
        <div class="px-6 py-4 flex items-center gap-2">
            <h2 class="text-xl font-semibold text-gray-700">{{ __('admin.all_users') }}</h2>
        </div>
        <div class="overflow-x-auto">
            <table class="min-w-full bg-white">
                <thead class="bg-gray-100">
                    <tr>
                        <th class="py-3 px-4 text-center">
                            <input type="checkbox" id="select-all-users" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                        </th>
                        <th class="py-3 px-4 text-left">{{ __('admin.id') }}</th>
                        <th class="py-3 px-4 text-left">{{ __('admin.name') }}</th>
                        <th class="py-3 px-4 text-left">{{ __('admin.email') }}</th>
                        <th class="py-3 px-4 text-center">{{ __('admin.orders_count') }}</th>
                        <th class="py-3 px-4 text-left">{{ __('admin.registered_at') }}</th>
                        <th class="py-3 px-4 text-center">{{ __('admin.actions') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($users as $user)
                        <tr class="hover:bg-gray-50" data-user-id="{{ $user->id }}">
                            <td class="py-2 px-4 text-center">
                                <input type="checkbox" class="user-checkbox rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" value="{{ $user->id }}">
                            </td>
                            <td class="py-2 px-4">{{ $user->id }}</td>
                            <td class="py-2 px-4 font-medium">{{ $user->name }}</td>
                            <td class="py-2 px-4">{{ $user->email }}</td>
                            <td class="py-2 px-4 text-center">
                                <span class="px-2 py-1 text-xs font-semibold rounded-full bg-blue-200 text-blue-800">
                                    {{ $user->orders_count }}
                                </span>
                            </td>
                            <td class="py-2 px-4">{{ $user->created_at->format('Y-m-d H:i') }}</td>
                            <td class="py-2 px-4 text-center">
                                <button type="button" class="text-red-600 hover:text-red-900 delete-user-btn" data-url="{{ route('admin.users.destroy', $user) }}" data-user-name="{{ $user->name }}">
                                    {{ __('admin.delete') }}
                                </button>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="py-4 px-4 text-center text-gray-500">{{ __('admin.no_users_found') }}</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if ($users->hasPages())
        <div class="px-6 py-4">
            {{ $users->links() }}
        </div>
        @endif
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const selectAll = document.getElementById('select-all-users');
    const checkboxes = document.querySelectorAll('.user-checkbox');
    const bulkDeleteBtn = document.getElementById('bulk-delete-users-btn');

    function updateBulkDeleteBtn() {
        const anyChecked = Array.from(checkboxes).some(cb => cb.checked);
        bulkDeleteBtn.classList.toggle('hidden', !anyChecked);
    }

    if (selectAll) {
        selectAll.addEventListener('change', function() {
            checkboxes.forEach(cb => { cb.checked = selectAll.checked; });
            updateBulkDeleteBtn();
        });
    }
    
    checkboxes.forEach(cb => {
        cb.addEventListener('change', function() {
            if (!cb.checked && selectAll.checked) selectAll.checked = false;
            updateBulkDeleteBtn();
        });
    });

    document.querySelectorAll('.delete-user-btn').forEach(function(btn) {
        btn.addEventListener('click', function() {
            const url = this.getAttribute('data-url');
            const userName = this.getAttribute('data-user-name');
            const row = this.closest('tr');
            
            if (!confirm(`{{ __('admin.are_you_sure_you_want_to_delete_user') ?? 'Are you sure you want to delete' }} "${userName}"?`)) {
                return;
            }
            
            fetch(url, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json',
                },
            })
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    row.remove();
                    showUserSuccess('{{ __('admin.user_deleted_successfully') ?? 'User deleted successfully' }}');
                } else {
                    alert(data.message || '{{ __('admin.failed_to_delete_user') ?? 'Failed to delete user' }}');
                }
            })
            .catch(() => alert('{{ __('admin.failed_to_delete_user') ?? 'Failed to delete user' }}'));
        });
    });

    bulkDeleteBtn.addEventListener('click', function() {
        const selected = Array.from(checkboxes).filter(cb => cb.checked).map(cb => cb.value);
        if (selected.length === 0) return;
        
        if (!confirm(`{{ __('admin.are_you_sure_you_want_to_delete_selected_users') ?? 'Are you sure you want to delete the selected users?' }}`)) return;
        
        fetch("{{ route('admin.users.bulk-delete') }}", {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ users: selected })
        })
        .then(res => res.json())
        .then(data => {
            if (data.success !== false) {
                selected.forEach(id => {
                    const row = document.querySelector(`tr[data-user-id='${id}']`);
                    if (row) row.remove();
                });
                selectAll.checked = false;
                updateBulkDeleteBtn();
                showUserSuccess('{{ __('admin.users_deleted_successfully') ?? 'Users deleted successfully' }}');
            } else {
                alert(data.message || '{{ __('admin.failed_to_delete_users') ?? 'Failed to delete selected users' }}');
            }
        })
        .catch(() => alert('{{ __('admin.failed_to_delete_users') ?? 'Failed to delete selected users' }}'));
    });
});

function showUserSuccess(message) {
    const alert = document.createElement('div');
    alert.className = 'fixed top-4 right-4 bg-green-100 border-l-4 border-green-500 text-green-700 p-4 z-50';
    alert.innerHTML = `<p>${message}</p>`;
    document.body.appendChild(alert);
    setTimeout(() => alert.remove(), 3000);
}
</script>
@endpush