@extends('backend.layouts.app')

@section('title', \App\Http\Helpers\MenuHelper::getPageTitle())

@section('content')
    <!-- Breadcrumb Start -->
    <div x-data="{ pageName: @js(\App\Http\Helpers\MenuHelper::getPageTitle()) }" class="mb-6">
        <div class="mb-6 flex flex-wrap items-center justify-between gap-3">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-white/90" x-text="pageName"></h2>

            <nav>
                <ol class="flex items-center gap-1.5">
                    <li>
                        <a class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
                            href="{{ route('admin.home') }}">Home</a>
                    </li>
                    <li class="flex items-center gap-1.5 text-sm text-gray-800 dark:text-white/90">
                        <svg class="stroke-current" width="17" height="16" viewBox="0 0 17 16" fill="none"><path d="M6.0765 12.667L10.2432 8.50033L6.0765 4.33366" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" /></svg>
                        <span x-text="pageName"></span>
                    </li>
                </ol>
            </nav>
        </div>
    </div>
    <!-- Breadcrumb End -->

    @if(session('generated_password'))
        <div class="mb-5 rounded-xl border border-success-200 bg-success-50 p-4 dark:border-success-500/20 dark:bg-success-500/10">
            <p class="text-sm font-medium text-success-700 dark:text-success-400">
                Temporary password generated for {{ session('generated_password_for') }}
            </p>
            <div class="mt-2 flex flex-wrap items-center gap-3">
                <code id="temp-password"
                    class="rounded-lg border border-success-200 bg-white px-3 py-1.5 text-sm font-semibold text-gray-800 dark:border-success-500/20 dark:bg-gray-900 dark:text-white/90">{{ session('generated_password') }}</code>
                <button type="button"
                    onclick="navigator.clipboard.writeText(document.getElementById('temp-password').textContent.trim()); this.textContent = 'Copied!';"
                    class="rounded-lg border border-success-300 px-3 py-1.5 text-xs font-medium text-success-700 hover:bg-success-100 dark:border-success-500/30 dark:text-success-400">
                    Copy
                </button>
            </div>
            <p class="mt-2 text-xs text-success-600 dark:text-success-400/80">
                Shown once only. The same password was emailed to the user. The user must change it after the first login.
            </p>
        </div>
    @endif

    <div class="space-y-5 sm:space-y-6">
        <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
            <div class="px-5 py-4 sm:px-6 sm:py-5">
                <!-- Top Bar with Title and Create Button -->
                <div class="mb-6 flex flex-wrap items-center justify-between gap-3">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">
                        All Backend Users
                    </h3>
                    <div class="flex flex-wrap items-center gap-2">
                        <a href="{{ route('backend-user.index', array_filter(['locked' => $lockedOnly ? null : 1, 'search' => $search ?: null])) }}"
                            class="inline-flex items-center gap-2 rounded-lg border px-4 py-2.5 text-theme-sm font-medium shadow-theme-xs {{ $lockedOnly ? 'border-orange-300 bg-orange-50 text-orange-700 dark:border-orange-500/30 dark:bg-orange-500/10 dark:text-orange-400' : 'border-gray-300 bg-white text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400' }}"
                            title="Show only users who must change their password">
                            <svg class="fill-current" width="18" height="18" viewBox="0 0 24 24"><path d="M12 2a5 5 0 00-5 5h2a3 3 0 116 0v3H6a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2v-8a2 2 0 00-2-2h-1V7a5 5 0 00-5-5zm0 13a1.75 1.75 0 110 3.5 1.75 1.75 0 010-3.5z"/></svg>
                            Locked ({{ $lockedCount }})
                        </a>
                    @can('backend-user.create')
                        <a href="{{ route('backend-user.create') }}"
                            class="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-theme-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 hover:text-gray-800 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] dark:hover:text-gray-200">
                            <svg class="fill-current" width="18" height="18" viewBox="0 0 20 20"
                                xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M11 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM2.615 16.428a1.224 1.224 0 0 1-.569-1.175 6.002 6.002 0 0 1 11.908 0c.058.467-.172.92-.57 1.174A9.953 9.953 0 0 1 8 18a9.953 9.953 0 0 1-5.385-1.572ZM16.25 5.75a.75.75 0 0 0-1.5 0v2h-2a.75.75 0 0 0 0 1.5h2v2a.75.75 0 0 0 1.5 0v-2h2a.75.75 0 0 0 0-1.5h-2v-2Z" />
                            </svg>
                            Create New
                        </a>
                    @endcan
                    </div>
                </div>

                <!-- Success Message -->
                <!-- @if (session('success'))
                                <div
                                                                                    class="mb-5 rounded-xl border border-green-200 bg-green-50 p-4 dark:border-green-500/20 dark:bg-green-500/10">
                                                                                    <div class="flex items-center gap-2">
                                                                                        <svg class="fill-green-500" width="20" height="20" viewBox="0 0 20 20" fill="none"
                                                                                            xmlns="http://www.w3.org/2000/svg">
                                                                                            <path fill-rule="evenodd" clip-rule="evenodd"
                                                                                                d="M10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18ZM13.7071 8.70711C14.0976 8.31658 14.0976 7.68342 13.7071 7.29289C13.3166 6.90237 12.6834 6.90237 12.2929 7.29289L9 10.5858L7.70711 9.29289C7.31658 8.90237 6.68342 8.90237 6.29289 9.29289C5.90237 9.68342 5.90237 10.3166 6.29289 10.7071L8.29289 12.7071C8.68342 13.0976 9.31658 13.0976 9.70711 12.7071L13.7071 8.70711Z"
                                                                                                fill=""></path>
                                                                                        </svg>
                                                                                        <p class="text-sm text-green-700 dark:text-green-400">{{ session('success') }}</p>
                                                                                    </div>
                                                                                </div>
                                @endif -->

                <div class="rounded-xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.02]">
                    <div class="p-5">
                        <form method="GET" action="{{ route('backend-user.index') }}" id="search-form" class="mb-4 flex items-center justify-end gap-3">
                            @if($lockedOnly)
                                <input type="hidden" name="locked" value="1">
                            @endif
                            <input type="text" name="search" value="{{ $search ?? '' }}" placeholder="Search..."
                                oninput="debounceSearch(this)"
                                class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-10 w-full max-w-xs rounded-lg border border-gray-300 bg-transparent px-4 py-2 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30">
                        </form>
                        <script>
                            let searchTimer;
                            function debounceSearch(el) {
                                clearTimeout(searchTimer);
                                searchTimer = setTimeout(() => el.form.submit(), 1500);
                            }
                        </script>
                        <!-- ====== Table Start ====== -->
                        <div class="max-w-full overflow-x-auto">
                            <div class="min-w-[800px]">
                                <table class="w-full">
                                    <!-- Table Header -->
                                    <thead>
                                        <tr class="border-b border-gray-100 dark:border-gray-800">
                                            <th class="px-5 py-3 text-left">
                                                <span
                                                    class="text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                                                    No
                                                </span>
                                            </th>
                                            <th class="px-5 py-3 text-left">
                                                <span
                                                    class="text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                                                    Username
                                                </span>
                                            </th>
                                            <th class="px-5 py-3 text-left">
                                                <span
                                                    class="text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                                                    Email
                                                </span>
                                            </th>
                                            <th class="px-5 py-3 text-left">
                                                <span
                                                    class="text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                                                    Full Name
                                                </span>
                                            </th>
                                            <th class="px-5 py-3 text-left">
                                                <span
                                                    class="text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                                                    Roles
                                                </span>
                                            </th>
                                            {{-- <th class="px-5 py-3 text-left">
                                                <span
                                                    class="text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                                                    Created At
                                                </span>
                                            </th> --}}
                                            <th class="px-5 py-3 text-left">
                                                <span
                                                    class="text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                                                    Last Login At
                                                </span>
                                            </th>
                                            <th class="px-5 py-3 text-left">
                                                <span
                                                    class="text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                                                    Status
                                                </span>
                                            </th>
                                            <th class="px-5 py-3 text-right">
                                                <span
                                                    class="text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                                                    Actions
                                                </span>
                                            </th>
                                        </tr>
                                    </thead>
                                    <!-- Table Body -->
                                    <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                                        @forelse($backendUsers as $user)
                                            <tr  class="transition-colors hover:bg-gray-50 dark:hover:bg-gray-800/50">
                                                <td class="px-5 py-4">
                                                    <span class="block text-sm font-medium text-gray-800 dark:text-white/90">
                                                        {{ ($backendUsers->currentPage() - 1) * $backendUsers->perPage() + $loop->iteration }}
                                                    </span>
                                                </td>
                                                <td class="px-5 py-4">
                                                    <span class="block text-sm text-gray-600 dark:text-gray-400">
                                                        {{ $user->username }}
                                                    </span>
                                                </td>
                                                <td class="px-5 py-4">
                                                    <span class="block text-sm text-gray-600 dark:text-gray-400">
                                                        {{ $user->email }}
                                                    </span>
                                                </td>
                                                <td class="px-5 py-4">
                                                    <span class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                                                        {{ $user->first_name ? $user->first_name . ' ' . ($user->last_name ?? '') : $user->last_name ?? '-' }}
                                                    </span>
                                                </td>
                                                <td class="px-5 py-4">
                                                    <span class="block text-sm text-gray-600 dark:text-gray-400">
                                                        {{ $user->roles->pluck('name')->join(', ') ?: '-' }}
                                                    </span>
                                                </td>
                                                {{-- <td class="px-5 py-4">
                                                    <div class="flex flex-col">
                                                        <span class="text-sm text-gray-600 dark:text-gray-400">
                                                            {{ $user->created_at ? $user->created_at->format('h:i A') : '-' }}
                                                        </span>
                                                        <span class="text-xs text-gray-500 dark:text-gray-500">
                                                            {{ $user->created_at ? $user->created_at->format('d-m-Y') : '-' }}
                                                        </span>
                                                    </div>
                                                </td> --}}
                                                <td class="px-5 py-4">
                                                    <div class="flex flex-col">
                                                        <span class="text-sm text-gray-600 dark:text-gray-400">
                                                            {{ $user->last_login_at ? $user->last_login_at->format('h:i A') : '-' }}
                                                        </span>
                                                        <span class="text-xs text-gray-500 dark:text-gray-500">
                                                            {{ $user->last_login_at ? $user->last_login_at->format('d-m-Y') : '-' }}
                                                        </span>
                                                    </div>
                                                </td>
                                                <td class="px-5 py-4">
                                                    <div class="flex flex-col items-start gap-1">
                                                        @if($user->is_active)
                                                            <span class="inline-flex items-center rounded-md bg-success-50 px-2 py-1 text-xs font-medium text-success-600 dark:bg-success-500/10 dark:text-success-400">Active</span>
                                                        @else
                                                            <span class="inline-flex items-center rounded-md bg-error-50 px-2 py-1 text-xs font-medium text-error-600 dark:bg-error-500/10 dark:text-error-400">Inactive</span>
                                                        @endif

                                                        @if($user->must_change_password)
                                                            <span class="inline-flex items-center rounded-md bg-orange-50 px-2 py-1 text-xs font-medium text-orange-600 dark:bg-orange-500/10 dark:text-orange-400"
                                                                title="This user must change their password on next login">
                                                                Must Change Password
                                                            </span>
                                                        @endif
                                                    </div>
                                                </td>
                                                <td class="px-5 py-4">
                                                    <div class="flex items-center justify-end gap-2">
                                                        {{-- View Button hidden --}}

                                                        @can('backend-user.update')
                                                            @if($user->must_change_password)
                                                                <form action="{{ route('backend-user.unlock-password-change', $user->id) }}"
                                                                    method="POST" class="inline">
                                                                    @csrf
                                                                    <button type="submit"
                                                                        class="inline-flex items-center justify-center rounded-lg bg-orange-50 p-2 text-orange-500 hover:bg-orange-100 dark:bg-orange-500/10 dark:text-orange-400 dark:hover:bg-orange-500/20"
                                                                        title="Clear forced password change">
                                                                        <svg class="fill-current" width="18" height="18"
                                                                            viewBox="0 0 24 24" fill="none"
                                                                            xmlns="http://www.w3.org/2000/svg">
                                                                            <path
                                                                                d="M12 2a5 5 0 00-5 5h2a3 3 0 116 0v3H6a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2v-8a2 2 0 00-2-2h-1V7a5 5 0 00-5-5zm0 13a1.75 1.75 0 110 3.5 1.75 1.75 0 010-3.5z"
                                                                                fill=""></path>
                                                                        </svg>
                                                                    </button>
                                                                </form>
                                                            @endif

                                                            <form action="{{ route('backend-user.send-reset-link', $user->id) }}"
                                                                method="POST" class="inline reset-form">
                                                                @csrf
                                                                <button type="submit"
                                                                    class="inline-flex items-center justify-center rounded-lg bg-brand-50 p-2 text-brand-500 hover:bg-brand-100 dark:bg-brand-500/10 dark:text-brand-400 dark:hover:bg-brand-500/20"
                                                                    title="Send Password Reset Link">
                                                                    <svg class="fill-current" width="18" height="18"
                                                                        viewBox="0 0 24 24" fill="none"
                                                                        xmlns="http://www.w3.org/2000/svg">
                                                                        <path
                                                                            d="M21 10h-8.35A5.99 5.99 0 0 0 7 6c-3.31 0-6 2.69-6 6s2.69 6 6 6a5.99 5.99 0 0 0 5.65-4H13l2 2 2-2 2 2 4-4.04L21 10ZM7 15c-1.65 0-3-1.35-3-3s1.35-3 3-3 3 1.35 3 3-1.35 3-3 3Z"
                                                                            fill=""></path>
                                                                    </svg>
                                                                </button>
                                                            </form>
                                                        @endcan
                                                        @can('backend-user.update')
                                                            @if($user->id !== auth('admin')->id())
                                                                <form action="{{ route('backend-user.toggle-status', $user->id) }}"
                                                                    method="POST" class="inline status-form"
                                                                    data-activate="{{ $user->is_active ? '0' : '1' }}">
                                                                    @csrf
                                                                    <button type="submit"
                                                                        class="inline-flex items-center justify-center rounded-lg p-2 {{ $user->is_active ? 'bg-error-50 text-error-500 hover:bg-error-100 dark:bg-error-500/10 dark:text-error-400 dark:hover:bg-error-500/20' : 'bg-success-50 text-success-500 hover:bg-success-100 dark:bg-success-500/10 dark:text-success-400 dark:hover:bg-success-500/20' }}"
                                                                        title="{{ $user->is_active ? 'Deactivate User' : 'Activate User' }}">
                                                                        <svg class="stroke-current" width="18" height="18"
                                                                            viewBox="0 0 24 24" fill="none"
                                                                            stroke="currentColor" stroke-width="2"
                                                                            stroke-linecap="round" stroke-linejoin="round"
                                                                            xmlns="http://www.w3.org/2000/svg">
                                                                            <path d="M18.36 6.64a9 9 0 1 1-12.73 0" />
                                                                            <line x1="12" y1="2" x2="12" y2="12" />
                                                                        </svg>
                                                                    </button>
                                                                </form>
                                                            @endif
                                                        @endcan
                                                        @can('backend-user.update')
                                                            <a href="{{ route('backend-user.edit', $user->id) }}"
                                                                class="inline-flex items-center justify-center rounded-lg bg-warning-50 p-2 text-warning-500 hover:bg-warning-100 dark:bg-warning-500/10 dark:text-warning-400 dark:hover:bg-warning-500/20"
                                                                title="Edit User">
                                                                <svg class="fill-current" width="18" height="18" viewBox="0 0 18 18"
                                                                    fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                                                        d="M13.5 2.5L15.5 4.5L5 15H3V13L13.5 2.5ZM14.5 1.5L12.5 3.5L14.5 5.5L16.5 3.5L14.5 1.5Z"
                                                                        fill=""></path>
                                                                </svg>
                                                            </a>
                                                        @endcan
                                                        @can('backend-user.delete')
                                                            <form action="{{ route('backend-user.destroy', $user->id) }}"
                                                                method="POST" class="inline delete-form">
                                                                @csrf
                                                                @method('DELETE')
                                                                <button type="submit"
                                                                    class="inline-flex items-center justify-center rounded-lg bg-error-50 p-2 text-error-500 hover:bg-error-100 dark:bg-error-500/10 dark:text-error-400 dark:hover:bg-error-500/20"
                                                                    title="Delete User">
                                                                    <svg class="fill-current" width="18" height="18"
                                                                        viewBox="0 0 18 18" fill="none"
                                                                        xmlns="http://www.w3.org/2000/svg">
                                                                        <path fill-rule="evenodd" clip-rule="evenodd"
                                                                            d="M6 2.5H12L13 3.5H16V5H2V3.5H5L6 2.5ZM3.5 6H14.5L14 15.5H4L3.5 6ZM6.5 8.5H8V13.5H6.5V8.5ZM10 8.5H11.5V13.5H10V8.5Z"
                                                                            fill=""></path>
                                                                    </svg>
                                                                </button>
                                                            </form>
                                                        @endcan
                                                    </div>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr >
                                                <td colspan="8" class="px-5 py-12 text-center">
                                                    <div class="mx-auto max-w-md">
                                                        {{-- <div class="mb-4 flex justify-center">
                                                            <div class="rounded-full bg-gray-100 p-3 dark:bg-gray-800">
                                                                <svg class="h-8 w-8 text-gray-400 dark:text-gray-600"
                                                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                                        stroke-width="1.5"
                                                                        d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
                                                                </svg>
                                                            </div>
                                                        </div> --}}
                                                        <h4 class="mb-1 text-base font-medium text-gray-700 dark:text-gray-300">
                                                            No users found
                                                        </h4>
                                                        <p class="text-sm text-gray-500 dark:text-gray-500">
                                                            Click the "Create New User" button to add your first backend
                                                            user.
                                                        </p>
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <!-- ====== Table End ====== -->

                        <!-- Pagination -->
                        <div class="mt-6 border-t border-gray-100 pt-5 dark:border-gray-800">
                            {{ $backendUsers->appends(request()->query())->links('vendor.pagination.custom') }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const deleteForms = document.querySelectorAll('.delete-form');
            deleteForms.forEach(form => {
                form.addEventListener('submit', function (e) {
                    e.preventDefault();

                    Swal.fire({
                        title: 'Are you sure?',
                        text: "You won't be able to revert this!",
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#ef4444',
                        cancelButtonColor: '#6b7280',
                        confirmButtonText: 'Yes, delete it!',
                        width: '380px', // Jadikan kotak lebih kecil
                        padding: '1.25em',
                        customClass: {
                            title: 'text-lg font-semibold',
                            htmlContainer: 'text-sm',
                            actions: 'text-sm'
                        }
                    }).then((result) => {
                        if (result.isConfirmed) {
                            form.submit();
                        }
                    });
                });
            });

            const resetForms = document.querySelectorAll('.reset-form');
            resetForms.forEach(form => {
                form.addEventListener('submit', function (e) {
                    e.preventDefault();

                    Swal.fire({
                        title: 'Send password reset link?',
                        text: 'The user will receive an email with a link to reset their password.',
                        icon: 'question',
                        showCancelButton: true,
                        confirmButtonColor: '#10b981',
                        cancelButtonColor: '#6b7280',
                        confirmButtonText: 'Yes, send it!',
                        width: '380px',
                        padding: '1.25em',
                        customClass: {
                            title: 'text-lg font-semibold',
                            htmlContainer: 'text-sm',
                            actions: 'text-sm'
                        }
                    }).then((result) => {
                        if (result.isConfirmed) {
                            form.submit();
                        }
                    });
                });
            });

            const statusForms = document.querySelectorAll('.status-form');
            statusForms.forEach(form => {
                form.addEventListener('submit', function (e) {
                    e.preventDefault();

                    const activating = form.dataset.activate === '1';

                    Swal.fire({
                        title: activating ? 'Activate this user?' : 'Deactivate this user?',
                        text: activating
                            ? 'This user will be able to sign in again.'
                            : 'This user will no longer be able to sign in.',
                        icon: activating ? 'question' : 'warning',
                        showCancelButton: true,
                        confirmButtonColor: activating ? '#10b981' : '#ef4444',
                        cancelButtonColor: '#6b7280',
                        confirmButtonText: activating ? 'Yes, activate!' : 'Yes, deactivate!',
                        width: '380px',
                        padding: '1.25em',
                        customClass: {
                            title: 'text-lg font-semibold',
                            htmlContainer: 'text-sm',
                            actions: 'text-sm'
                        }
                    }).then((result) => {
                        if (result.isConfirmed) {
                            form.submit();
                        }
                    });
                });
            });
        });
    </script>

@endsection