@extends('layouts.admin')

@section('page-title', 'کاربران')

@section('content')

    <div class="bg-white p-4 sm:p-5 rounded-lg shadow-sm text-sm">
        <div class="flex justify-between items-center mb-4">
            <h1 class="text-lg font-bold text-gray-800">لیست کاربران</h1>
            @if(auth()->user()->role === 'admin')
                <a href="{{ route('admin.users.create') }}"
                   class="bg-blue-600 text-white px-4 sm:px-6 py-2.5 rounded-full text-xs hover:bg-blue-700 transition flex items-center shadow-md">
                    <i class="fas fa-plus ml-1"></i>
                    ایجاد کاربر جدید
                </a>
            @endif
        </div>

        <!-- desktop table -->
        <div class="hidden sm:block overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 text-xs">
                <thead class="bg-gradient-to-r from-orange-400 to-yellow-400 text-white">
                <tr>
                    <th class="px-3 py-2 text-right border-l border-white/20 first:border-l-0">نام</th>
                    <th class="px-3 py-2 text-right border-l border-white/20">نام خانوادگی</th>
                    <th class="px-3 py-2 text-right border-l border-white/20">نام کاربری</th>
                    <th class="px-3 py-2 text-right border-l border-white/20">شماره همراه</th>
                    <th class="px-3 py-2 text-right border-l border-white/20">کد ملی</th>
                    <th class="px-3 py-2 text-right border-l border-white/20">وضعیت</th>
                    <th class="px-3 py-2 text-right">عملیات</th>
                </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                @foreach($users as $user)
                    <tr class="{{ $loop->even ? 'bg-gray-50/50' : 'bg-white' }} hover:bg-gray-100 transition">
                        <td class="px-3 py-2 text-right align-middle">{{ $user->first_name }}</td>
                        <td class="px-3 py-2 text-right align-middle">{{ $user->last_name }}</td>
                        <td class="px-3 py-2 text-right align-middle font-mono">{{ $user->username }}</td>
                        <td class="px-3 py-2 text-right align-middle" dir="ltr">{{ $user->phone }}</td>
                        <td class="px-3 py-2 text-right align-middle font-mono" dir="ltr">{{ $user->national_id }}</td>
                        <td class="px-3 py-2 text-right align-middle">
                            @if(auth()->user()->role === 'admin')
                                <form action="{{ route('admin.users.toggle', $user) }}" method="POST">
                                    @csrf
                                    @method('PATCH')
                                    <label class="inline-flex items-center cursor-pointer">
                                        <input type="checkbox"
                                               class="sr-only peer"
                                               name="is_active"
                                               onchange="this.form.submit()"
                                            {{ ($user->is_active ?? true) ? 'checked' : '' }}>
                                        <div class="relative w-10 h-5 bg-gray-300 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-500 rounded-full peer
                                    peer-checked:after:translate-x-5 peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px]
                                    after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all
                                    peer-checked:bg-green-500">
                                        </div>
                                    </label>
                                </form>
                            @else
                                <div class="relative w-10 h-5 bg-gray-300 rounded-full">
                                    <div class="absolute top-[2px] left-[2px] w-4 h-4 bg-white rounded-full"></div>
                                </div>
                            @endif
                        </td>
                        <td class="px-3 py-2 text-right align-middle whitespace-nowrap">
                            @if(auth()->user()->role === 'admin')
                                <div class="flex justify-content-start items-center gap-3">
                                    <a href="{{ route('admin.users.edit', $user) }}" class="text-blue-600 hover:text-blue-800 transition" title="ویرایش">
                                        <i class="fas fa-edit text-sm"></i>
                                    </a>
                                    <button type="button" onclick="confirmDelete({{ $user->id }}, '{{ addslashes($user->first_name . ' ' . $user->last_name) }}')" class="text-red-600 hover:text-red-800 transition" title="حذف">
                                        <i class="fas fa-trash-alt text-sm"></i>
                                    </button>
                                    <form id="delete-form-{{ $user->id }}" action="{{ route('admin.users.destroy', $user) }}" method="POST" class="hidden">
                                        @csrf
                                        @method('DELETE')
                                    </form>
                                </div>
                            @else
                                <span class="text-gray-400 text-xs">بدون دسترسی</span>
                            @endif
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>

        <!-- mobile carts -->
        <div class="sm:hidden space-y-4">
            @foreach($users as $user)
                <div class="bg-gray-50 p-3 rounded-lg shadow-sm flex flex-col gap-2">
                    <div class="flex justify-between items-start">
                        <span class="font-medium text-right">{{ $user->first_name }} {{ $user->last_name }}</span>
                        @if(auth()->user()->role === 'admin')
                            <div class="flex flex-row-reverse items-center gap-3">
                                <a href="{{ route('admin.users.edit', $user) }}" class="text-blue-600 hover:text-blue-800 transition">
                                    <i class="fas fa-edit text-sm"></i>
                                </a>
                                <button type="button" onclick="confirmDelete({{ $user->id }}, '{{ addslashes($user->first_name . ' ' . $user->last_name) }}')" class="text-red-600 hover:text-red-800 transition">
                                    <i class="fas fa-trash text-sm"></i>
                                </button>
                                <form id="delete-form-{{ $user->id }}" action="{{ route('admin.users.destroy', $user) }}" method="POST" class="hidden">
                                    @csrf
                                    @method('DELETE')
                                </form>
                            </div>
                        @endif
                    </div>
                    <p class="text-gray-600 text-right text-sm">نام کاربری: {{ $user->username }}</p>
                    <p class="text-gray-600 text-right text-sm" dir="ltr">شماره همراه: {{ $user->phone }}</p>
                    <p class="text-gray-600 text-right text-sm" dir="ltr">کد ملی: {{ $user->national_id }}</p>
                    <p class="text-gray-600 text-right text-sm">
                        وضعیت: {{ ($user->is_active ?? true) ? 'فعال' : 'غیرفعال' }}
                    </p>
                </div>
            @endforeach
        </div>

        <!-- pagination -->
        <div class="mt-4 flex justify-center">
            {{ $users->links('pagination::tailwind') }}
        </div>

    </div>

    <script>
        function confirmDelete(id, name) {
            Swal.fire({
                title: 'مطمئنی می‌خوای حذف کنی؟',
                text: `"${name}" حذف بشه؟`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'بله',
                cancelButtonText: 'خیر',
                reverseButtons: true,
                heightAuto: false,
                width: '360px',
                padding: '1.5rem',
                buttonsStyling: false,
                customClass: {
                    title: 'text-lg font-bold',
                    text: 'text-sm text-gray-600',
                    confirmButton: 'bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-6 rounded-lg mx-1',
                    cancelButton: 'bg-gray-500 hover:bg-gray-600 text-white font-medium py-2 px-6 rounded-lg mx-1',
                    popup: 'rounded-xl shadow-2xl'
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById('delete-form-' + id).submit();
                }
            });
        }
    </script>

@endsection