@extends('admin.layout')

@section('content')
<div class="mb-6">
    <div class="flex justify-between items-center">
        <div>
            <h1 class="text-3xl font-bold text-gray-800">Users</h1>
            <p class="text-gray-600 mt-1">Manage all registered users and their information</p>
        </div>
        <div class="flex space-x-3">
            <a href="{{ route('users.export.page') }}" style="background-color: #10b981;" class="inline-flex items-center text-white px-5 py-2.5 rounded-lg font-semibold shadow-md hover:shadow-lg transition-all duration-200 transform hover:-translate-y-0.5">
                <svg class="w-5 h-5 mr-2" style="fill: #ffffff;" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                </svg>
                Export Users
            </a>
            <a href="{{ route('users.create') }}" style="background-color: #2563eb;" class="inline-flex items-center text-white px-5 py-2.5 rounded-lg font-semibold shadow-md hover:shadow-lg transition-all duration-200 transform hover:-translate-y-0.5">
                <svg class="w-5 h-5 mr-2" style="fill: #ffffff;" viewBox="0 0 20 20">
                    <path d="M8 9a3 3 0 100-6 3 3 0 000 6zM8 11a6 6 0 016 6H2a6 6 0 016-6zM16 7a1 1 0 10-2 0v1h-1a1 1 0 100 2h1v1a1 1 0 102 0v-1h1a1 1 0 100-2h-1V7z"></path>
                </svg>
                Add User
            </a>
        </div>
    </div>
</div>

@if(session('success'))
    <div class="mb-6 bg-green-50 border-l-4 border-green-500 rounded-lg shadow-sm">
        <div class="flex items-start p-4">
            <svg class="w-5 h-5 mr-3 mt-0.5" style="fill: #10b981;" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
            </svg>
            <p class="text-green-800 font-medium">{{ session('success') }}</p>
        </div>
    </div>
@endif

{{-- Filter Form --}}
<div class="bg-white rounded-xl shadow-lg overflow-hidden mb-6">
    <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);" class="px-6 py-4">
        <h2 class="text-xl font-bold text-white flex items-center">
            <svg class="w-6 h-6 mr-2" style="fill: #ffffff;" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 018 17v-5.586L3.293 6.707A1 1 0 013 6V3z" clip-rule="evenodd"></path>
            </svg>
            Filters
        </h2>
    </div>

    <form method="GET" action="{{ route('users.index') }}" class="p-6">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <div>
                <label for="search" class="block text-sm font-medium text-gray-700 mb-2">Search</label>
                <input
                    type="text"
                    name="search"
                    id="search"
                    value="{{ request('search') }}"
                    placeholder="Name, email, phone..."
                    class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
                >
            </div>

            <div>
                <label for="gender" class="block text-sm font-medium text-gray-700 mb-2">Gender</label>
                <select name="gender" id="gender" class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
                    <option value="">All Genders</option>
                    <option value="male" {{ request('gender') === 'male' ? 'selected' : '' }}>Male</option>
                    <option value="female" {{ request('gender') === 'female' ? 'selected' : '' }}>Female</option>
                    <option value="non_binary" {{ request('gender') === 'non_binary' ? 'selected' : '' }}>Non-Binary</option>
                    <option value="not_specified" {{ request('gender') === 'not_specified' ? 'selected' : '' }}>Not Specified</option>
                </select>
            </div>

            <div>
                <label for="role" class="block text-sm font-medium text-gray-700 mb-2">Role</label>
                <select name="role" id="role" class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
                    <option value="">All Roles</option>
                    <option value="user" {{ request('role') === 'user' ? 'selected' : '' }}>User</option>
                    <option value="admin" {{ request('role') === 'admin' ? 'selected' : '' }}>Admin</option>
                </select>
            </div>

            <div class="flex items-end space-x-3">
                <button type="submit" style="background-color: #2563eb;" class="inline-flex items-center text-white px-6 py-3 rounded-lg font-semibold shadow-md hover:shadow-lg transition-all duration-200 transform hover:-translate-y-0.5">
                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"></path>
                    </svg>
                    Filter
                </button>
                @if(request('search') || request('gender') || request('role'))
                    <a href="{{ route('users.index') }}" style="background-color: #6b7280;" class="inline-flex items-center text-white px-6 py-3 rounded-lg font-semibold shadow-md hover:shadow-lg transition-all duration-200">
                        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                        Clear
                    </a>
                @endif
            </div>
        </div>
    </form>
</div>

{{-- Results Count --}}
<div class="mb-4 flex items-center justify-between">
    <p class="text-sm text-gray-600">
        Showing <span class="font-semibold text-gray-900">{{ $users->count() }}</span> of <span class="font-semibold text-gray-900">{{ $users->total() }}</span> user(s)
        @if(request('search'))
            <span class="ml-2">
                for "<span class="font-semibold text-blue-600">{{ request('search') }}</span>"
            </span>
        @endif
    </p>
</div>

{{-- Users Table --}}
<div class="bg-white rounded-xl shadow-lg overflow-hidden">
    <div class="overflow-x-auto table-container">
        <table class="w-full">
            <thead style="background-color: #f9fafb;">
                <tr>
                    @php
                        $currentSortBy = request('sort_by', 'id');
                        $currentSortOrder = request('sort_order', 'desc');

                        $getSortUrl = function($column) use ($currentSortBy, $currentSortOrder) {
                            $params = request()->all();
                            $params['sort_by'] = $column;

                            // Toggle sort order if clicking the same column
                            if ($currentSortBy === $column) {
                                $params['sort_order'] = $currentSortOrder === 'asc' ? 'desc' : 'asc';
                            } else {
                                $params['sort_order'] = 'asc';
                            }

                            return route('users.index', $params);
                        };

                        $getSortIcon = function($column) use ($currentSortBy, $currentSortOrder) {
                            if ($currentSortBy !== $column) {
                                return '<svg class="w-4 h-4 inline ml-1 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"></path></svg>';
                            }

                            if ($currentSortOrder === 'asc') {
                                return '<svg class="w-4 h-4 inline ml-1 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path></svg>';
                            } else {
                                return '<svg class="w-4 h-4 inline ml-1 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>';
                            }
                        };
                    @endphp

                    <th class="px-6 py-4 text-left text-sm font-semibold text-gray-700">
                        <a href="{{ $getSortUrl('id') }}" class="flex items-center hover:text-blue-600 transition-colors cursor-pointer">
                            ID
                            {!! $getSortIcon('id') !!}
                        </a>
                    </th>
                    <th class="px-6 py-4 text-left text-sm font-semibold text-gray-700">
                        <a href="{{ $getSortUrl('first_name') }}" class="flex items-center hover:text-blue-600 transition-colors cursor-pointer">
                            Name
                            {!! $getSortIcon('first_name') !!}
                        </a>
                    </th>
                    <th class="px-6 py-4 text-left text-sm font-semibold text-gray-700">
                        <a href="{{ $getSortUrl('gender') }}" class="flex items-center hover:text-blue-600 transition-colors cursor-pointer">
                            Gender
                            {!! $getSortIcon('gender') !!}
                        </a>
                    </th>
                    <th class="px-6 py-4 text-left text-sm font-semibold text-gray-700">
                        <a href="{{ $getSortUrl('phone') }}" class="flex items-center hover:text-blue-600 transition-colors cursor-pointer">
                            Phone #
                            {!! $getSortIcon('phone') !!}
                        </a>
                    </th>
                    <th class="px-6 py-4 text-left text-sm font-semibold text-gray-700">
                        <a href="{{ $getSortUrl('email') }}" class="flex items-center hover:text-blue-600 transition-colors cursor-pointer">
                            Email
                            {!! $getSortIcon('email') !!}
                        </a>
                    </th>
                    <th class="px-6 py-4 text-left text-sm font-semibold text-gray-700">
                        <a href="{{ $getSortUrl('role') }}" class="flex items-center hover:text-blue-600 transition-colors cursor-pointer">
                            Role
                            {!! $getSortIcon('role') !!}
                        </a>
                    </th>
                    <th class="px-6 py-4 text-center text-sm font-semibold text-gray-700">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($users as $user)
                <tr class="hover:bg-gray-50 border-b border-gray-100 transition">
                    <td class="px-6 py-4 text-sm font-medium text-gray-800">#{{ $user->id }}</td>
                    <td class="px-6 py-4">
                        <div class="flex items-center">
                            <div class="ml-3">
                                <p class="text-sm font-semibold text-gray-900">{{ $user->first_name }} {{ $user->last_name }}</p>
                            </div>
                        </div>
                    </td>
                    <td class="px-6 py-4 text-sm text-gray-800">
                        @if($user->gender)
                            <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold {{ $user->gender === 'male' ? 'bg-blue-100 text-blue-800' : ($user->gender === 'female' ? 'bg-pink-100 text-pink-800' : 'bg-purple-100 text-purple-800') }}">
                                {{ ucfirst($user->gender) }}
                            </span>
                        @else
                            <span class="text-gray-400 text-xs">Not specified</span>
                        @endif
                    </td>
                    <td class="px-6 py-4 text-sm text-gray-800">{{ $user->phone ?? '-' }}</td>
                    <td class="px-6 py-4 text-sm text-gray-600">{{ $user->email }}</td>
                    <td class="px-6 py-4 text-sm">
                        <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold {{ $user->role === 'admin' ? 'bg-purple-100 text-purple-800' : 'bg-gray-100 text-gray-800' }}">
                            {{ ucfirst($user->role ?? 'user') }}
                        </span>
                    </td>
                    <td class="px-6 py-4 text-sm">
                        <div class="flex items-center justify-center gap-3 mobile-actions sm:flex-row flex-col">
                            {{-- View Button --}}
                            <a href="{{ route('users.show', $user) }}" style="background-color: #10b981;" class="inline-flex items-center px-3 py-2 rounded-lg text-white text-xs font-medium shadow-sm hover:shadow-md transition-all duration-200 transform hover:-translate-y-0.5">
                                <svg class="w-4 h-4 mr-1" style="fill: #ffffff;" viewBox="0 0 20 20">
                                    <path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path>
                                    <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path>
                                </svg>
                                View
                            </a>

                            {{-- Edit Button --}}
                            <a href="{{ route('users.edit', $user) }}" style="background-color: #3b82f6;" class="inline-flex items-center px-3 py-2 rounded-lg text-white text-xs font-medium shadow-sm hover:shadow-md transition-all duration-200 transform hover:-translate-y-0.5">
                                <svg class="w-4 h-4 mr-1" style="fill: #ffffff;" viewBox="0 0 20 20">
                                    <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"></path>
                                </svg>
                                Edit
                            </a>

                            {{-- Delete Button --}}
                            <form action="{{ route('users.destroy', $user) }}" method="POST" class="inline" onsubmit="return confirm('Are you sure you want to delete this user? This action cannot be undone.');">
                                @csrf
                                @method('DELETE')
                                <button type="submit" style="background-color: #ef4444;" class="inline-flex items-center px-3 py-2 rounded-lg text-white text-xs font-medium shadow-sm hover:shadow-md transition-all duration-200 transform hover:-translate-y-0.5">
                                    <svg class="w-4 h-4 mr-1" style="fill: #ffffff;" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"></path>
                                    </svg>
                                    Delete
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="7" class="px-6 py-16 text-center">
                        <svg class="w-16 h-16 mx-auto text-gray-300 mb-4" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z"></path>
                        </svg>
                        <p class="text-gray-500 text-lg font-medium">No users found</p>
                        <p class="text-gray-400 text-sm mt-1">Try adjusting your filters or create a new user</p>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

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