@extends('layouts.app')

@section('title', 'Users')

@section('page-title', 'Users')

@section('content')

Manage system users, account status, and role assignments.

{{-- Page Actions --}}
<div class="mb-5 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-end">

    @can('users.create')
        <a
            href="{{ route('users.create') }}"
            class="btn btn-primary"
        >
            <i class="fa-solid fa-plus"></i>
            Add User
        </a>
    @endcan

</div>


{{-- Filters --}}
<div class="card mb-5">

    <form
        action="{{ route('users.index') }}"
        method="GET"
        class="p-5"
    >

        <div class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">

            {{-- Search --}}
            <div class="xl:col-span-2">

                <label
                    for="search"
                    class="mb-1.5 block text-sm font-medium text-text"
                >
                    Search
                </label>

                <div class="relative">

                    {{-- <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                        <i class="fa-solid fa-magnifying-glass text-sm text-muted"></i>
                    </div> --}}

                    <input
                        type="text"
                        id="search"
                        name="search"
                        value="{{ request('search') }}"
                        placeholder="Search by name or email..."
                        autocomplete="off"
                        class="form-input w-full pl-9"
                    >

                </div>

            </div>


            {{-- Role --}}
            <div>

                <label
                    for="role"
                    class="mb-1.5 block text-sm font-medium text-text"
                >
                    Role
                </label>

                <select
                    id="role"
                    name="role"
                    class="form-select w-full"
                >

                    <option value="">
                        All Roles
                    </option>

                    @foreach ($roles as $role)

                        <option
                            value="{{ $role->name }}"
                            @selected(request('role') === $role->name)
                        >
                            {{ $role->name }}
                        </option>

                    @endforeach

                </select>

            </div>


            {{-- Status --}}
            <div>

                <label
                    for="status"
                    class="mb-1.5 block text-sm font-medium text-text"
                >
                    Status
                </label>

                <select
                    id="status"
                    name="status"
                    class="form-select w-full"
                >

                    <option value="">
                        All Statuses
                    </option>

                    <option
                        value="active"
                        @selected(request('status') === 'active')
                    >
                        Active
                    </option>

                    <option
                        value="inactive"
                        @selected(request('status') === 'inactive')
                    >
                        Inactive
                    </option>

                </select>

            </div>

        </div>


        {{-- Filter Actions --}}
        <div class="mt-4 flex flex-col-reverse gap-3 sm:flex-row sm:items-center sm:justify-end">

            @if (
                request()->filled('search')
                || request()->filled('role')
                || request()->filled('status')
            )

                <a
                    href="{{ route('users.index') }}"
                    class="btn btn-secondary"
                >
                    <i class="fa-solid fa-rotate-left"></i>
                    Reset
                </a>

            @endif


            <button
                type="submit"
                class="btn btn-primary"
            >
                <i class="fa-solid fa-filter"></i>
                Apply Filters
            </button>

        </div>

    </form>

</div>


{{-- Users --}}
<div class="card overflow-hidden">

    {{-- Header --}}
    <div class="border-b border-border px-5 py-4">

        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">

            <div>

                <h2 class="text-base font-semibold text-text">
                    System Users
                </h2>

                <p class="mt-1 text-xs text-muted">
                    Manage user accounts and their assigned system roles.
                </p>

            </div>


            <div class="flex items-center gap-2">

                <span class="text-xs text-muted">
                    Total
                </span>

                <span class="inline-flex min-w-7 items-center justify-center rounded-full bg-sky-50 px-2.5 py-1 text-xs font-semibold text-sky-700">
                    {{ $users->total() }}
                </span>

            </div>

        </div>

    </div>


    @if ($users->count())

        {{-- Desktop Table --}}
        <div class="hidden overflow-x-auto lg:block">

            <table class="w-full text-left">

                <thead class="border-b border-border bg-background/50">

                    <tr class="text-xs font-semibold uppercase tracking-wide text-muted">

                        <th class="w-16 px-5 py-3">
                            #
                        </th>

                        <th class="px-5 py-3">
                            User
                        </th>

                        <th class="px-5 py-3">
                            Role
                        </th>

                        <th class="px-5 py-3">
                            Status
                        </th>

                        <th class="px-5 py-3">
                            Email Verified
                        </th>

                        <th class="px-5 py-3">
                            Created
                        </th>

                        <th class="w-32 px-5 py-3 text-right">
                            Actions
                        </th>

                    </tr>

                </thead>


                <tbody class="divide-y divide-border">

                    @foreach ($users as $user)

                        @php

                            $role = $user->roles->first();

                            $roleClasses = match ($role?->name) {
                                'Super Admin' =>
                                    'bg-purple-50 text-purple-700',

                                'Admin' =>
                                    'bg-sky-50 text-sky-700',

                                'Teacher' =>
                                    'bg-emerald-50 text-emerald-700',

                                'Parent' =>
                                    'bg-amber-50 text-amber-700',

                                'Student' =>
                                    'bg-indigo-50 text-indigo-700',

                                default =>
                                    'bg-background text-muted',
                            };

                        @endphp


                        <tr class="transition hover:bg-background/40">

                            {{-- Number --}}
                            <td class="whitespace-nowrap px-5 py-4 text-sm text-muted">

                                {{ $users->firstItem() + $loop->index }}

                            </td>


                            {{-- User --}}
                            <td class="px-5 py-4">

                                <div class="flex items-center gap-3">

                                    {{-- Avatar --}}
                                    <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-sky-50 text-sm font-semibold uppercase text-sky-700">

                                        {{ mb_substr($user->name, 0, 1) }}

                                    </div>


                                    <div class="min-w-0">

                                        <div class="flex flex-wrap items-center gap-2">

                                            <p class="truncate text-sm font-semibold text-text">
                                                {{ $user->name }}
                                            </p>


                                            @if (auth()->id() === $user->id)

                                                <span class="inline-flex rounded-full bg-sky-50 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-sky-700">
                                                    You
                                                </span>

                                            @endif

                                        </div>


                                        <p class="mt-0.5 truncate text-xs text-muted">
                                            {{ $user->email }}
                                        </p>

                                    </div>

                                </div>

                            </td>


                            {{-- Role --}}
                            <td class="px-5 py-4">

                                @if ($role)

                                    <span class="inline-flex items-center rounded-full px-2.5 py-1 text-xs font-medium {{ $roleClasses }}">
                                        {{ $role->name }}
                                    </span>

                                @else

                                    <span class="inline-flex items-center rounded-full bg-background px-2.5 py-1 text-xs font-medium text-muted">
                                        No Role
                                    </span>

                                @endif

                            </td>


                            {{-- Status --}}
                            <td class="px-5 py-4">

                                @if ($user->is_active)

                                    <span class="inline-flex items-center gap-1.5 rounded-full bg-emerald-50 px-2.5 py-1 text-xs font-medium text-emerald-700">

                                        <span class="h-1.5 w-1.5 rounded-full bg-emerald-500"></span>

                                        Active

                                    </span>

                                @else

                                    <span class="inline-flex items-center gap-1.5 rounded-full bg-red-50 px-2.5 py-1 text-xs font-medium text-red-700">

                                        <span class="h-1.5 w-1.5 rounded-full bg-red-500"></span>

                                        Inactive

                                    </span>

                                @endif

                            </td>


                            {{-- Email Verification --}}
                            <td class="px-5 py-4">

                                @if ($user->email_verified_at)

                                    <span class="inline-flex items-center gap-1.5 text-xs font-medium text-emerald-600">

                                        <i class="fa-solid fa-circle-check"></i>

                                        Verified

                                    </span>

                                @else

                                    <span class="inline-flex items-center gap-1.5 text-xs font-medium text-amber-600">

                                        <i class="fa-regular fa-clock"></i>

                                        Not Verified

                                    </span>

                                @endif

                            </td>


                            {{-- Created --}}
                            <td class="whitespace-nowrap px-5 py-4">

                                <p class="text-sm text-text">
                                    {{ $user->created_at?->format('d M Y') ?? '—' }}
                                </p>

                                <p class="mt-0.5 text-xs text-muted">
                                    {{ $user->created_at?->format('h:i A') ?? '' }}
                                </p>

                            </td>


                            {{-- Actions --}}
                            <td class="px-5 py-4">

                                <div class="flex items-center justify-end gap-1">

                                    {{-- View --}}
                                    @can('users.view')

                                        <a
                                            href="{{ route('users.show', $user) }}"
                                            class="flex h-8 w-8 items-center justify-center rounded-lg text-muted transition hover:bg-sky-50 hover:text-sky-600"
                                            title="View User"
                                        >
                                            <i class="fa-regular fa-eye"></i>
                                        </a>

                                    @endcan


                                    {{-- Edit --}}
                                    @can('users.edit')

                                        <a
                                            href="{{ route('users.edit', $user) }}"
                                            class="flex h-8 w-8 items-center justify-center rounded-lg text-muted transition hover:bg-amber-50 hover:text-amber-600"
                                            title="Edit User"
                                        >
                                            <i class="fa-regular fa-pen-to-square"></i>
                                        </a>

                                    @endcan


                                    {{-- Delete --}}
                                    @can('users.delete')

                                        @if (auth()->id() !== $user->id)

                                            <form
                                                action="{{ route('users.destroy', $user) }}"
                                                method="POST"
                                                class="inline delete-user-form"
                                            >

                                                @csrf
                                                @method('DELETE')

                                                <button
                                                    type="submit"
                                                    class="flex h-8 w-8 items-center justify-center rounded-lg text-muted transition hover:bg-red-50 hover:text-red-600"
                                                    title="Delete User"
                                                >
                                                    <i class="fa-regular fa-trash-can"></i>
                                                </button>

                                            </form>

                                        @endif

                                    @endcan

                                </div>

                            </td>

                        </tr>

                    @endforeach

                </tbody>

            </table>

        </div>


        {{-- Mobile / Tablet --}}
        <div class="divide-y divide-border lg:hidden">

            @foreach ($users as $user)

                @php

                    $role = $user->roles->first();

                    $roleClasses = match ($role?->name) {
                        'Super Admin' =>
                            'bg-purple-50 text-purple-700',

                        'Admin' =>
                            'bg-sky-50 text-sky-700',

                        'Teacher' =>
                            'bg-emerald-50 text-emerald-700',

                        'Parent' =>
                            'bg-amber-50 text-amber-700',

                        'Student' =>
                            'bg-indigo-50 text-indigo-700',

                        default =>
                            'bg-background text-muted',
                    };

                @endphp


                <div class="p-5">

                    <div class="flex items-start gap-3">

                        {{-- Avatar --}}
                        <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-sky-50 text-sm font-semibold uppercase text-sky-700">

                            {{ mb_substr($user->name, 0, 1) }}

                        </div>


                        <div class="min-w-0 flex-1">

                            <div class="flex flex-wrap items-center gap-2">

                                <h3 class="truncate text-sm font-semibold text-text">
                                    {{ $user->name }}
                                </h3>


                                @if (auth()->id() === $user->id)

                                    <span class="inline-flex rounded-full bg-sky-50 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-sky-700">
                                        You
                                    </span>

                                @endif

                            </div>


                            <p class="mt-0.5 break-all text-xs text-muted">
                                {{ $user->email }}
                            </p>


                            <div class="mt-3 flex flex-wrap items-center gap-2">

                                @if ($role)

                                    <span class="inline-flex items-center rounded-full px-2.5 py-1 text-xs font-medium {{ $roleClasses }}">
                                        {{ $role->name }}
                                    </span>

                                @else

                                    <span class="inline-flex rounded-full bg-background px-2.5 py-1 text-xs font-medium text-muted">
                                        No Role
                                    </span>

                                @endif


                                @if ($user->is_active)

                                    <span class="inline-flex items-center gap-1.5 rounded-full bg-emerald-50 px-2.5 py-1 text-xs font-medium text-emerald-700">

                                        <span class="h-1.5 w-1.5 rounded-full bg-emerald-500"></span>

                                        Active

                                    </span>

                                @else

                                    <span class="inline-flex items-center gap-1.5 rounded-full bg-red-50 px-2.5 py-1 text-xs font-medium text-red-700">

                                        <span class="h-1.5 w-1.5 rounded-full bg-red-500"></span>

                                        Inactive

                                    </span>

                                @endif

                            </div>


                            <div class="mt-4 flex items-center justify-between">

                                <p class="text-xs text-muted">

                                    Created

                                    {{ $user->created_at?->format('d M Y') ?? '—' }}

                                </p>


                                <div class="flex items-center gap-1">

                                    @can('users.view')

                                        <a
                                            href="{{ route('users.show', $user) }}"
                                            class="flex h-8 w-8 items-center justify-center rounded-lg text-muted hover:bg-sky-50 hover:text-sky-600"
                                            title="View User"
                                        >
                                            <i class="fa-regular fa-eye"></i>
                                        </a>

                                    @endcan


                                    @can('users.edit')

                                        <a
                                            href="{{ route('users.edit', $user) }}"
                                            class="flex h-8 w-8 items-center justify-center rounded-lg text-muted hover:bg-amber-50 hover:text-amber-600"
                                            title="Edit User"
                                        >
                                            <i class="fa-regular fa-pen-to-square"></i>
                                        </a>

                                    @endcan


                                    @can('users.delete')

                                        @if (auth()->id() !== $user->id)

                                            <form
                                                action="{{ route('users.destroy', $user) }}"
                                                method="POST"
                                                class="inline delete-user-form"
                                            >

                                                @csrf
                                                @method('DELETE')

                                                <button
                                                    type="submit"
                                                    class="flex h-8 w-8 items-center justify-center rounded-lg text-muted hover:bg-red-50 hover:text-red-600"
                                                    title="Delete User"
                                                >
                                                    <i class="fa-regular fa-trash-can"></i>
                                                </button>

                                            </form>

                                        @endif

                                    @endcan

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            @endforeach

        </div>


        {{-- Pagination --}}
        @if ($users->hasPages())

            <div class="border-t border-border px-5 py-4">

                {{ $users->links() }}

            </div>

        @endif

    @else

        {{-- Empty State --}}
        <div class="px-5 py-16 text-center">

            <div class="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-sky-50 text-sky-600">

                <i class="fa-solid fa-users text-xl"></i>

            </div>


            <h3 class="mt-4 text-sm font-semibold text-text">

                @if (
                    request()->filled('search')
                    || request()->filled('role')
                    || request()->filled('status')
                )

                    No Users Found

                @else

                    No Users Yet

                @endif

            </h3>


            <p class="mx-auto mt-1 max-w-md text-xs leading-5 text-muted">

                @if (
                    request()->filled('search')
                    || request()->filled('role')
                    || request()->filled('status')
                )

                    No users match the selected filters. Try changing or
                    resetting your search criteria.

                @else

                    Create your first system user and assign an appropriate
                    role to control their access.

                @endif

            </p>


            <div class="mt-5 flex justify-center gap-3">

                @if (
                    request()->filled('search')
                    || request()->filled('role')
                    || request()->filled('status')
                )

                    <a
                        href="{{ route('users.index') }}"
                        class="btn btn-secondary"
                    >
                        <i class="fa-solid fa-rotate-left"></i>
                        Reset Filters
                    </a>

                @else

                    @can('users.create')

                        <a
                            href="{{ route('users.create') }}"
                            class="btn btn-primary"
                        >
                            <i class="fa-solid fa-plus"></i>
                            Add User
                        </a>

                    @endcan

                @endif

            </div>

        </div>

    @endif

</div>


{{-- Delete Confirmation --}}
<script>
    document.addEventListener('DOMContentLoaded', function () {

        const deleteForms = document.querySelectorAll(
            '.delete-user-form'
        );

        deleteForms.forEach(function (form) {

            form.addEventListener('submit', function (event) {

                const confirmed = window.confirm(
                    'Are you sure you want to delete this user? This action cannot be undone.'
                );

                if (!confirmed) {
                    event.preventDefault();
                }

            });

        });

    });
</script>

@endsection