@extends('layouts.app')

@section('page_title', 'Users')

@section('content')

<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">

    {{-- Create User --}}
    <form
        method="post"
        action="{{ route('admin.users.store') }}"
        class="fp-card p-5 h-fit"
        autocomplete="off"
    >
        @csrf

        <h2 class="font-semibold text-[14px]">Create User</h2>

        <div class="space-y-3 mt-4">

            <input
                name="name"
                type="text"
                class="fp-input"
                placeholder="Full name"
                autocomplete="off"
                required
            >

            <input
                name="email"
                type="email"
                class="fp-input"
                placeholder="Email"
                autocomplete="new-email"
                required
            >

            <input
                name="password"
                type="password"
                class="fp-input"
                placeholder="Password"
                autocomplete="new-password"
                required
            >

            <input
                name="password_confirmation"
                type="password"
                class="fp-input"
                placeholder="Confirm password"
                autocomplete="new-password"
                required
            >

            <select
                name="role"
                class="fp-input"
                autocomplete="off"
            >
                <option value="user">User</option>
                <option value="super_admin">Super Admin</option>
            </select>

            <button class="fp-btn fp-primary w-full" type="submit">
                Create User
            </button>

        </div>
    </form>


    {{-- Users List --}}
    <div class="fp-card p-5 lg:col-span-2">

        <div class="overflow-x-auto">

            <table class="fp-table fp-mobile-nowrap-table w-full">

                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Role</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>

                <tbody>

                    @foreach($users as $u)

                        <tr>

                            <td class="font-semibold">
                                {{ $u->name }}
                            </td>

                            <td>
                                {{ $u->email }}
                            </td>

                            <td>
                                <form
                                    method="post"
                                    action="{{ route('admin.users.role', $u) }}"
                                >
                                    @csrf
                                    @method('PATCH')

                                    <select
                                        name="role"
                                        onchange="this.form.submit()"
                                        class="fp-input !py-1 !w-32"
                                    >
                                        <option
                                            value="user"
                                            {{ $u->role === 'user' ? 'selected' : '' }}
                                        >
                                            User
                                        </option>

                                        <option
                                            value="super_admin"
                                            {{ $u->role === 'super_admin' ? 'selected' : '' }}
                                        >
                                            Super Admin
                                        </option>
                                    </select>

                                </form>
                            </td>

                            <td>
                                <span
                                    class="text-[10px] {{ $u->is_active ? 'text-emerald-600' : 'text-red-500' }}"
                                >
                                    {{ $u->is_active ? 'Active' : 'Inactive' }}
                                </span>
                            </td>

                            <td>
                                <form
                                    method="post"
                                    action="{{ route('admin.users.toggle', $u) }}"
                                >
                                    @csrf
                                    @method('PATCH')

                                    <button
                                        type="submit"
                                        class="text-[10px] text-violet-600"
                                    >
                                        {{ $u->is_active ? 'Deactivate' : 'Activate' }}
                                    </button>

                                </form>
                            </td>

                        </tr>

                    @endforeach

                </tbody>

            </table>

        </div>

        <div class="mt-3">
            {{ $users->links() }}
        </div>

    </div>

</div>

@endsection