@extends('admin.layouts.master')
@section('title')
{{ translate('Members - List') }}
@endsection

@section('content')
<div class="group-data-[sidebar-size=lg]:ltr:md:ml-vertical-menu group-data-[sidebar-size=lg]:rtl:md:mr-vertical-menu group-data-[sidebar-size=md]:ltr:ml-vertical-menu-md group-data-[sidebar-size=md]:rtl:mr-vertical-menu-md group-data-[sidebar-size=sm]:ltr:ml-vertical-menu-sm group-data-[sidebar-size=sm]:rtl:mr-vertical-menu-sm pt-[calc(theme('spacing.header')_*_1)] pb-[calc(theme('spacing.header')_*_0.8)] px-4 group-data-[navbar=bordered]:pt-[calc(theme('spacing.header')_*_1.3)] group-data-[navbar=hidden]:pt-0 group-data-[layout=horizontal]:mx-auto group-data-[layout=horizontal]:max-w-screen-2xl group-data-[layout=horizontal]:px-0 group-data-[layout=horizontal]:group-data-[sidebar-size=lg]:ltr:md:ml-auto group-data-[layout=horizontal]:group-data-[sidebar-size=lg]:rtl:md:mr-auto group-data-[layout=horizontal]:md:pt-[calc(theme('spacing.header')_*_1.6)] group-data-[layout=horizontal]:px-3 group-data-[layout=horizontal]:group-data-[navbar=hidden]:pt-[calc(theme('spacing.header')_*_0.9)]">
    <div class="container-fluid group-data-[content=boxed]:max-w-boxed mx-auto">

        <div class="flex flex-col gap-2 py-4 md:flex-row md:items-center print:hidden">
            <div class="grow">
                <h5 class="text-16">{{ translate('List View') }}</h5>
            </div>
            <ul class="flex items-center gap-2 text-sm font-normal shrink-0">
                <li class="relative before:content-['\ea54'] before:font-remix ltr:before:-right-1 rtl:before:-left-1  before:absolute before:text-[18px] before:-top-[3px] ltr:pr-4 rtl:pl-4 before:text-slate-400 dark:text-zink-200">
                    <a href="#!" class="text-slate-400 dark:text-zink-200">{{ translate('Users') }}</a>
                </li>
                <li class="text-slate-700 dark:text-zink-100">
                    {{ translate('List View') }}
                </li>
            </ul>
        </div>
        <div class="grid grid-cols-1 gap-x-5 xl:grid-cols-12">
            <div class="xl:col-span-12">
                <div class="card" id="usersTable">
                    <div class="card-body">
                        <div class="flex items-center">
                            <h6 class="text-15 grow">{{ translate('Users List') }}</h6>
                            <div class="shrink-0">
                                {{-- <button data-modal-target="addUserModal" type="button" class="text-white btn bg-custom-500 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20"><i data-lucide="plus" class="inline-block size-4"></i> <span class="align-middle">Add User</span></button> --}}

                                @if($permissionForMembers !== null && $permissionForMembers->can_create == '1')
                                    <a href="{{route('admin.members.create', ['status' => 'pass'])}}" class="text-white btn bg-custom-500 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20"><i data-lucide="plus" class="inline-block size-4"></i> <span class="align-middle">{{ translate('Add Member') }}</span></a>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="!py-3.5 card-body border-y border-dashed border-slate-200 dark:border-zink-500">
                    <form method="GET" action="{{ route('admin.members.index') }}">
                            <div class="grid grid-cols-1 gap-5 xl:grid-cols-12">
                                <div class="xl:col-span-2">
                                @if($permissionForBulkActions !== null && $permissionForBulkActions->can_show == '1')
                                    <select name="action" class="form-select border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500" id="bulk-action-select">
                                        <option value="">{{ translate('Bulk Select') }}</option>
                                        <option value="active">{{ translate('Active') }}</option>
                                        <option value="inactive">{{ translate('Inactive') }}</option>
                                        <option value="block">{{ translate('Blocked') }}</option>
                                        <option value="unblock">{{ translate('Unblocked') }}</option>
                                        <option value="delete">{{ translate('Delete') }}</option>
                                    </select>
                                @endif
                                </div>
                                <div class="relative xl:col-span-2">
                                    <input type="text" name="searching" id="searching" placeholder="Search by user_name or email" value="{{ request('search') }}"
                                    class="ltr:pl-8 rtl:pr-8  form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200">
                                    <i data-lucide="" class="inline-block size-4 absolute ltr:left-2.5 rtl:right-2.5 top-2.5 text-slate-500 dark:text-zink-200 fill-slate-100 dark:fill-zink-600"></i>
                                </div>
                                <!--end col-->
                                <div class="xl:col-span-2">
                                    <select name="status" class="form-select border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500" data-choices id="choices-single-default" onchange="this.form.submit()">
                                    <option value="">{{ translate('Select Status') }}</option>
                                        <option value="all" {{ isset($selectedStatus) && $selectedStatus == 'all' ? 'selected' : '' }}>{{ translate('All Members') }}</option>
                                        <option value="active" {{ isset($selectedStatus) && $selectedStatus == 'active' ? 'selected' : '' }}>Active</option>
                                        <option value="Inactive" {{ isset($selectedStatus) && $selectedStatus == 'Inactive' ? 'selected' : '' }}>Inactive</option>
                                        <option value="vip" {{ isset($selectedStatus) && $selectedStatus == 'vip' ? 'selected' : '' }}>Vip</option>
                                        <option value="free" {{ isset($selectedStatus) && $selectedStatus == 'free' ? 'selected' : '' }}>Free</option>
                                        <option value="male" {{ isset($selectedStatus) && $selectedStatus == 'male' ? 'selected' : '' }}>Males</option>
                                        <option value="females" {{ isset($selectedStatus) && $selectedStatus == 'females' ? 'selected' : '' }}>Females</option>
                                        <option value="blocked" {{ isset($selectedStatus) && $selectedStatus == 'blocked' ? 'selected' : '' }}>Blocked</option>
                                    </select>
                                </div>
                                <!--end col-->
                                <div class="xl:col-span-3 xl:col-start-10">
                                    <div class="flex gap-2 xl:justify-end">
                                        {{-- <div>
                                            <button type="button" class="bg-white border-dashed text-custom-500 btn border-custom-500 hover:text-custom-500 hover:bg-custom-50 hover:border-custom-600 focus:text-custom-600 focus:bg-custom-50 focus:border-custom-600 active:text-custom-600 active:bg-custom-50 active:border-custom-600 dark:bg-zink-700 dark:ring-custom-400/20 dark:hover:bg-custom-800/20 dark:focus:bg-custom-800/20 dark:active:bg-custom-800/20"><i data-lucide="download" class="inline-block size-4"></i> <span class="align-middle">Import</span></button>
                                        </div> --}}
                                        <!-- <button class="flex items-center justify-center size-[37.5px] p-0 text-slate-500 btn bg-slate-100 hover:text-white hover:bg-slate-600 focus:text-white focus:bg-slate-600 focus:ring focus:ring-slate-100 active:text-white active:bg-slate-600 active:ring active:ring-slate-100 dark:bg-slate-500/20 dark:text-slate-400 dark:hover:bg-slate-500 dark:hover:text-white dark:focus:bg-slate-500 dark:focus:text-white dark:active:bg-slate-500 dark:active:text-white dark:ring-slate-400/20"><i data-lucide="sliders-horizontal" class="size-4"></i></button> -->
                                    </div>
                                </div>
                                <!--end col-->
                            </div>
                            <!--end grid-->
                    </form>
                    </div>
                    <div class="card-body">
                        <div class="-mx-5 -mb-5 overflow-x-auto">
                            <table class="w-full border-separate table-custom border-spacing-y-1 whitespace-nowrap">
                                <thead class="text-left">
                                    <tr class="relative rounded-md bg-slate-100 dark:bg-zink-600 after:absolute ltr:after:border-l-2 rtl:after:border-r-2 ltr:after:left-0 rtl:after:right-0 after:top-0 after:bottom-0 after:border-transparent [&.active]:after:border-custom-500 [&.active]:bg-slate-100 dark:[&.active]:bg-zink-600">
                                        <th class="px-3.5 py-2.5 first:pl-5 last:pr-5 font-semibold sort" data-sort="select">{{ translate('Bulk Select') }}</th>
                                        <th class="px-3.5 py-2.5 first:pl-5 last:pr-5 font-semibold sort" data-sort="user-id">#</th>
                                        <th class="px-3.5 py-2.5 first:pl-5 last:pr-5 font-semibold sort" data-sort="name">{{ translate('Username') }}</th>
                                        <th class="px-3.5 py-2.5 first:pl-5 last:pr-5 font-semibold sort" data-sort="gender">{{ translate('Gender') }}</th>
                                        <th class="px-3.5 py-2.5 first:pl-5 last:pr-5 font-semibold sort" data-sort="age">{{ translate('Age') }}</th>
                                        <th class="px-3.5 py-2.5 first:pl-5 last:pr-5 font-semibold sort" data-sort="email">{{ translate('Email') }}</th>
                                        <th class="px-3.5 py-2.5 first:pl-5 last:pr-5 font-semibold sort" data-sort="city">{{ translate('City') }}</th>
                                        <th class="px-3.5 py-2.5 first:pl-5 last:pr-5 font-semibold sort" data-sort="joining-date">{{ translate('Member from') }}</th>
                                        <th class="px-3.5 py-2.5 first:pl-5 last:pr-5 font-semibold sort" data-sort="status">{{ translate('VIP') }}</th>
                                        <th class="px-3.5 py-2.5 first:pl-5 last:pr-5 font-semibold sort" data-sort="status">{{ translate('Member Status') }}</th>
                                        <th class="px-3.5 py-2.5 first:pl-5 last:pr-5 font-semibold">{{ translate('Option') }}</th>
                                    </tr>
                                </thead>
                                <tbody class="list">
                                @php
                                    $a=1;
                                @endphp
                                  @foreach ($members as $member)

                                    <tr class="relative rounded-md after:absolute ltr:after:border-l-2 rtl:after:border-r-2 ltr:after:left-0 rtl:after:right-0 after:top-0 after:bottom-0 after:border-transparent [&.active]:after:border-custom-500 [&.active]:bg-slate-100 dark:[&.active]:bg-zink-600">
                                        <td class="px-3.5 py-2.5 first:pl-5 last:pr-5 select">
                                            <input type="checkbox" name="selected_members[]" value="{{ $member->id }}" class="row-checkbox">
                                        </td>
                                        <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">
                                            <a href="#" class="transition-all duration-150 ease-linear text-custom-500 hover:text-custom-600 user-id">
                                                {{ $general_setting->member_code_prefix }}{{ $member->id }}
                                            </a>
                                        </td>
                                        <td class="px-3.5 py-2.5 first:pl-5 last:pr-5"><a href="{{route('admin.members.get', $member->id )}}" class="transition-all duration-150 ease-linear text-custom-500 hover:text-custom-600 member-id">{{$member->user_name}}</a></td>
                                        <td class="px-3.5 py-2.5 first:pl-5 last:pr-5 gender">{{$member->gender}}</td>
                                        <td class="px-3.5 py-2.5 first:pl-5 last:pr-5 age">{{$member->age}}</td>
                                        <td class="px-3.5 py-2.5 first:pl-5 last:pr-5 email">{{$member->email}}</td>

                                        @if ($member->User_detail)
                                        <td class="px-3.5 py-2.5 first:pl-5 last:pr-5 city">{{$member->User_detail->city->name}}</td>
                                        @else
                                        <td class="px-3.5 py-2.5 first:pl-5 last:pr-5 city">-</td>
                                        @endif



                                        <td class="px-3.5 py-2.5 first:pl-5 last:pr-5 joining-date">{{ formatDate($member->created_at) }}</td>
                                        <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">
                                            @if ($member->userPackage)
                                                <span class="px-2.5 py-0.5 text-xs font-medium rounded border bg-sky-200 border-transparent text-blue-500 dark:bg-blue-500/20 dark:border-transparent inline-flex items-center status">
                                                    <i data-lucide="check-circle" class="size-3 mr-1.5"></i>
                                                    {{ translate('VIP Member') }}
                                                </span>
                                            @else
                                                <span class="px-2.5 py-0.5 text-xs font-medium rounded border bg-gray-200 border-transparent text-gray-500 dark:bg-gray-500/20 dark:border-transparent inline-flex items-center status">
                                                    <i data-lucide="user" class="size-3 mr-1.5"></i>
                                                    {{ translate('Free Member') }}
                                                </span>
                                            @endif
                                        </td>

                                        <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">
                                            @if ($member->email_verified_at != null)
                                                <span class="px-2.5 py-0.5 text-xs font-medium rounded border bg-green-100 border-transparent text-green-500 dark:bg-green-500/20 dark:border-transparent inline-flex items-center status">
                                                    <i data-lucide="check-circle" class="size-3 mr-1.5"></i>
                                                    {{ translate('Active') }}
                                                </span>
                                                @else
                                                <span class="px-2.5 py-0.5 text-xs font-medium rounded border bg-red-100 border-transparent text-red-500 dark:bg-red-500/20 dark:border-transparent inline-flex items-center status">
                                                    <i data-lucide="x-circle" class="size-3 mr-1.5"></i>
                                                    {{ translate('Inactive') }}
                                                </span>

                                            @endif
                                        </td>
                                        <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">
                                            @if($permissionForMembers !== null && $permissionForMembers->can_view == '1')
                                                <a href="{{ route('admin.members.get', $member->id) }}" class="transition-all duration-150 ease-linear text-custom-500 hover:text-custom-600"><i class="ri-eye-line"></i></a>
                                            @endif
                                            @if($permissionForMembers !== null && $permissionForMembers->can_edit == '1')
                                                <a href="{{ route('admin.members.edit', ['id' => $member->id, 'status' => 'pass']) }}" class="transition-all duration-150 ease-linear text-custom-500 hover:text-custom-600"><i class="ri-edit-2-line"></i></a>
                                            @endif
                                            @if($permissionForMembers !== null && $permissionForMembers->can_delete == '1')
                                                <a href="javascript:void(0);" class="transition-all duration-150 ease-linear text-red-500 hover:text-red-600" onclick="confirmDelete('{{ route('admin.members.destroy', $member->id) }}', {{ $member->id }})">
                                                <i class="ri-delete-bin-2-line"></i>
                                            @endif
                                            </a>
                                        </td>

                                    </tr>
                                        @php
                                        $a++;
                                        @endphp
                                    @endforeach
                                </tbody>
                            </table>
                            <div class="noresult" style="display: none">
                                <div class="py-6 text-center">
                                    <i data-lucide="search" class="w-6 h-6 mx-auto text-sky-500 fill-sky-100 dark:fill-sky-500/20"></i>
                                    <h5 class="mt-2">{{ translate('Sorry! No Result Found') }}</h5>
                                    <p class="mb-0 text-slate-500 dark:text-zink-200">{{ translate('We\'ve searched more than 199+ users We did not find any users for you search.') }}</p>
                                </div>
                            </div>
                        </div>
                        <div class="flex flex-col items-center mt-8 md:flex-row">
                            <div class="mb-4 grow md:mb-0">
                                {{-- <p class="text-slate-500 dark:text-zink-200">Showing <b>{{ $members->count() }}</b> of <b>{{ $members->total() }}</b> Results</p> --}}
                                <p class="text-slate-500 dark:text-zink-200">
                                    {!! sprintf(translate('Showing <b>%d</b> of <b>%d</b> Results'), $members->count(), $members->total()) !!}
                                </p>

                            </div>
                            <ul class="flex flex-wrap items-center gap-2">
                                @foreach($members->links()->elements[0] as $page => $link)
                                <li>
                                    <a href="{{ $link }}" class="inline-flex items-center justify-center bg-white dark:bg-zink-700 size-8 transition-all duration-150 ease-linear border border-slate-200 dark:border-zink-500 rounded text-slate-500 dark:text-zink-200 hover:text-custom-500 dark:hover:text-custom-500 hover:bg-custom-50 dark:hover:bg-custom-500/10 focus:bg-custom-50 dark:focus:bg-custom-500/10 focus:text-custom-500 dark:focus:text-custom-500 [&.active]:text-custom-50 dark:[&.active]:text-custom-50 [&.active]:bg-custom-500 dark:[&.active]:bg-custom-500 [&.active]:border-custom-500 dark:[&.active]:border-custom-500 [&.disabled]:text-slate-400 dark:[&.disabled]:text-zink-300 [&.disabled]:bg-slate-100 dark:[&.disabled]:bg-zink-600/20 [&.disabled]:border-transparent">
                                        {{ $page }}
                                    </a>
                                </li>
                                @endforeach
                            </ul>
                            <!-- <ul class="flex flex-wrap items-center gap-2">
                                <li>
                                    <a href="#!" class="inline-flex items-center justify-center bg-white dark:bg-zink-700 size-8 transition-all duration-150 ease-linear border border-slate-200 dark:border-zink-500 rounded text-slate-500 dark:text-zink-200 hover:text-custom-500 dark:hover:text-custom-500 hover:bg-custom-50 dark:hover:bg-custom-500/10 focus:bg-custom-50 dark:focus:bg-custom-500/10 focus:text-custom-500 dark:focus:text-custom-500 [&.active]:text-custom-50 dark:[&.active]:text-custom-50 [&.active]:bg-custom-500 dark:[&.active]:bg-custom-500 [&.active]:border-custom-500 dark:[&.active]:border-custom-500 [&.disabled]:text-slate-400 dark:[&.disabled]:text-zink-300 [&.disabled]:cursor-auto"><i class="size-4 rtl:rotate-180" data-lucide="chevrons-left"></i></a>
                                </li>
                                <li>
                                    <a href="#!" class="inline-flex items-center justify-center bg-white dark:bg-zink-700 size-8 transition-all duration-150 ease-linear border border-slate-200 dark:border-zink-500 rounded text-slate-500 dark:text-zink-200 hover:text-custom-500 dark:hover:text-custom-500 hover:bg-custom-50 dark:hover:bg-custom-500/10 focus:bg-custom-50 dark:focus:bg-custom-500/10 focus:text-custom-500 dark:focus:text-custom-500 [&.active]:text-custom-50 dark:[&.active]:text-custom-50 [&.active]:bg-custom-500 dark:[&.active]:bg-custom-500 [&.active]:border-custom-500 dark:[&.active]:border-custom-500 [&.disabled]:text-slate-400 dark:[&.disabled]:text-zink-300 [&.disabled]:cursor-auto"><i class="size-4 rtl:rotate-180" data-lucide="chevron-left"></i></a>
                                </li>
                                <li>
                                    <a href="#!" class="inline-flex items-center justify-center bg-white dark:bg-zink-700 size-8 transition-all duration-150 ease-linear border border-slate-200 dark:border-zink-500 rounded text-slate-500 dark:text-zink-200 hover:text-custom-500 dark:hover:text-custom-500 hover:bg-custom-50 dark:hover:bg-custom-500/10 focus:bg-custom-50 dark:focus:bg-custom-500/10 focus:text-custom-500 dark:focus:text-custom-500 [&.active]:text-custom-50 dark:[&.active]:text-custom-50 [&.active]:bg-custom-500 dark:[&.active]:bg-custom-500 [&.active]:border-custom-500 dark:[&.active]:border-custom-500 [&.disabled]:text-slate-400 dark:[&.disabled]:text-zink-300 [&.disabled]:cursor-auto">1</a>
                                </li>
                                <li>
                                    <a href="#!" class="inline-flex items-center justify-center bg-white dark:bg-zink-700 size-8 transition-all duration-150 ease-linear border border-slate-200 dark:border-zink-500 rounded text-slate-500 dark:text-zink-200 hover:text-custom-500 dark:hover:text-custom-500 hover:bg-custom-50 dark:hover:bg-custom-500/10 focus:bg-custom-50 dark:focus:bg-custom-500/10 focus:text-custom-500 dark:focus:text-custom-500 [&.active]:text-custom-50 dark:[&.active]:text-custom-50 [&.active]:bg-custom-500 dark:[&.active]:bg-custom-500 [&.active]:border-custom-500 dark:[&.active]:border-custom-500 [&.disabled]:text-slate-400 dark:[&.disabled]:text-zink-300 [&.disabled]:cursor-auto">2</a>
                                </li>
                                <li>
                                    <a href="#!" class="inline-flex items-center justify-center bg-white dark:bg-zink-700 size-8 transition-all duration-150 ease-linear border border-slate-200 dark:border-zink-500 rounded text-slate-500 dark:text-zink-200 hover:text-custom-500 dark:hover:text-custom-500 hover:bg-custom-50 dark:hover:bg-custom-500/10 focus:bg-custom-50 dark:focus:bg-custom-500/10 focus:text-custom-500 dark:focus:text-custom-500 [&.active]:text-custom-50 dark:[&.active]:text-custom-50 [&.active]:bg-custom-500 dark:[&.active]:bg-custom-500 [&.active]:border-custom-500 dark:[&.active]:border-custom-500 [&.disabled]:text-slate-400 dark:[&.disabled]:text-zink-300 [&.disabled]:cursor-auto active">3</a>
                                </li>
                                <li>
                                    <a href="#!" class="inline-flex items-center justify-center bg-white dark:bg-zink-700 size-8 transition-all duration-150 ease-linear border border-slate-200 dark:border-zink-500 rounded text-slate-500 dark:text-zink-200 hover:text-custom-500 dark:hover:text-custom-500 hover:bg-custom-50 dark:hover:bg-custom-500/10 focus:bg-custom-50 dark:focus:bg-custom-500/10 focus:text-custom-500 dark:focus:text-custom-500 [&.active]:text-custom-50 dark:[&.active]:text-custom-50 [&.active]:bg-custom-500 dark:[&.active]:bg-custom-500 [&.active]:border-custom-500 dark:[&.active]:border-custom-500 [&.disabled]:text-slate-400 dark:[&.disabled]:text-zink-300 [&.disabled]:cursor-auto">4</a>
                                </li>
                                <li>
                                    <a href="#!" class="inline-flex items-center justify-center bg-white dark:bg-zink-700 size-8 transition-all duration-150 ease-linear border border-slate-200 dark:border-zink-500 rounded text-slate-500 dark:text-zink-200 hover:text-custom-500 dark:hover:text-custom-500 hover:bg-custom-50 dark:hover:bg-custom-500/10 focus:bg-custom-50 dark:focus:bg-custom-500/10 focus:text-custom-500 dark:focus:text-custom-500 [&.active]:text-custom-50 dark:[&.active]:text-custom-50 [&.active]:bg-custom-500 dark:[&.active]:bg-custom-500 [&.active]:border-custom-500 dark:[&.active]:border-custom-500 [&.disabled]:text-slate-400 dark:[&.disabled]:text-zink-300 [&.disabled]:cursor-auto">5</a>
                                </li>
                                <li>
                                    <a href="#!" class="inline-flex items-center justify-center bg-white dark:bg-zink-700 size-8 transition-all duration-150 ease-linear border border-slate-200 dark:border-zink-500 rounded text-slate-500 dark:text-zink-200 hover:text-custom-500 dark:hover:text-custom-500 hover:bg-custom-50 dark:hover:bg-custom-500/10 focus:bg-custom-50 dark:focus:bg-custom-500/10 focus:text-custom-500 dark:focus:text-custom-500 [&.active]:text-custom-50 dark:[&.active]:text-custom-50 [&.active]:bg-custom-500 dark:[&.active]:bg-custom-500 [&.active]:border-custom-500 dark:[&.active]:border-custom-500 [&.disabled]:text-slate-400 dark:[&.disabled]:text-zink-300 [&.disabled]:cursor-auto">6</a>
                                </li>
                                <li>
                                    <a href="#!" class="inline-flex items-center justify-center bg-white dark:bg-zink-700 size-8 transition-all duration-150 ease-linear border border-slate-200 dark:border-zink-500 rounded text-slate-500 dark:text-zink-200 hover:text-custom-500 dark:hover:text-custom-500 hover:bg-custom-50 dark:hover:bg-custom-500/10 focus:bg-custom-50 dark:focus:bg-custom-500/10 focus:text-custom-500 dark:focus:text-custom-500 [&.active]:text-custom-50 dark:[&.active]:text-custom-50 [&.active]:bg-custom-500 dark:[&.active]:bg-custom-500 [&.active]:border-custom-500 dark:[&.active]:border-custom-500 [&.disabled]:text-slate-400 dark:[&.disabled]:text-zink-300 [&.disabled]:cursor-auto"><i class="size-4 rtl:rotate-180" data-lucide="chevron-right"></i></a>
                                </li>
                                <li>
                                    <a href="#!" class="inline-flex items-center justify-center bg-white dark:bg-zink-700 size-8 transition-all duration-150 ease-linear border border-slate-200 dark:border-zink-500 rounded text-slate-500 dark:text-zink-200 hover:text-custom-500 dark:hover:text-custom-500 hover:bg-custom-50 dark:hover:bg-custom-500/10 focus:bg-custom-50 dark:focus:bg-custom-500/10 focus:text-custom-500 dark:focus:text-custom-500 [&.active]:text-custom-50 dark:[&.active]:text-custom-50 [&.active]:bg-custom-500 dark:[&.active]:bg-custom-500 [&.active]:border-custom-500 dark:[&.active]:border-custom-500 [&.disabled]:text-slate-400 dark:[&.disabled]:text-zink-300 [&.disabled]:cursor-auto"><i class="size-4 rtl:rotate-180" data-lucide="chevrons-right"></i></a>
                                </li>
                            </ul> -->
                        </div>
                    </div>
                </div><!--end card-->
            </div><!--end col-->
        </div><!--end grid-->

    </div>
    <!-- container-fluid -->
</div>
@endsection

@section('scripts')
<script src="{{asset('admin/assets/libs/choices.js/public/assets/scripts/choices.min.js')}}"></script>
<script src="{{asset('admin/assets/libs/@popperjs/core/umd/popper.min.js')}}"></script>
<script src="{{asset('admin/assets/libs/tippy.js/tippy-bundle.umd.min.js')}}"></script>
<script src="{{asset('admin/assets/libs/simplebar/simplebar.min.js')}}"></script>
<script src="{{asset('admin/assets/libs/prismjs/prism.js')}}"></script>
<script src="{{asset('admin/assets/libs/lucide/umd/lucide.js')}}"></script>
<script src="{{asset('admin/assets/js/tailwick.bundle.js')}}"></script>
<!-- list js-->
<script src="{{asset('admin/assets/libs/list.js/list.min.js')}}"></script>
<script src="{{asset('admin/assets/libs/list.pagination.js/list.pagination.min.js')}}"></script>

<!-- User list init js -->
<script src="{{asset('admin/assets/js/pages/apps-user-list.init.js')}}"></script>

<!-- App js -->
<script src="{{asset('admin/assets/js/app.js')}}"></script>


<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    @if(session('success'))
        Swal.fire({
            title: 'Success!',
            text: '{{ session('success') }}',
            icon: 'success',
            confirmButtonColor: '#3085d6',
            confirmButtonText: 'OK'
        });
    @endif
</script>

<script>
    function confirmDelete(url, id) {
        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Yes, delete it!',
            cancelButtonText: 'Cancel'
        }).then((result) => {
            if (result.isConfirmed) {
                window.location.href = `${url}`;
            }
        });
    }
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $('#status-dropdown').change(function() {
            var status = $(this).val();  // Get the selected status value

            $.ajax({
                url: '{{ route("admin.members.index") }}',  // Laravel route
                type: 'GET',
                data: { status: status },
                success: function(response) {
                    $('#user-list').html(response);  // Replace the user list with the filtered users
                },
                error: function(xhr) {
                    console.error(xhr.responseText);  // Handle error if needed
                }
            });
        });
    });
</script>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
    let memberRoute = "{{ route('admin.members.get', ':id') }}";
    let editMemberRoute = "{{ route('admin.members.edit', ['id' => ':id', 'status' => ':status']) }}";
</script>

<script>
    $(document).ready(function() {
        $('#searching').on('keyup', function() {
            let searchTerm = $(this).val();

            $.ajax({
                url: '{{ route('admin.members.searching') }}',
                method: 'GET',
                data: { search: searchTerm },
                success: function(data) {
                    // Clear the existing table body
                    $('.list').empty();

                    // Check if any members were found
                    if (data.length > 0) {
                        let rows = '';
                        let a = 1; // Counter for the row number

                        data.forEach(function(member) {
                            let memberUrl = memberRoute.replace(':id', member.id);
                            let editmemberUrl = editMemberRoute.replace(':id', member.id);


                            let vipBadge = member.vip_status === 'VIP'
                                ? `
                                    <span class="px-2.5 py-0.5 text-xs font-medium rounded border bg-sky-200 border-transparent text-blue-500 dark:bg-blue-500/20 dark:border-transparent inline-flex items-center status">
                                        <i data-lucide="check-circle" class="size-3 mr-1.5"></i> VIP Member
                                    </span>
                                `
                                : `
                                    <span class="px-2.5 py-0.5 text-xs font-medium rounded border bg-gray-200 border-transparent text-gray-500 dark:bg-gray-500/20 dark:border-transparent inline-flex items-center status">
                                        <i data-lucide="user" class="size-3 mr-1.5"></i> Free Member
                                    </span>
                                `;


                            rows += `
                                <tr class="relative rounded-md after:absolute ltr:after:border-l-2 rtl:after:border-r-2 ltr:after:left-0 rtl:after:right-0 after:top-0 after:bottom-0 after:border-transparent">
                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5"><a href="#" class="transition-all duration-150 ease-linear text-custom-500 hover:text-custom-600 user-id"><input type="checkbox" name="selected_members[]" value="${member.id}" class="row-checkbox"></a></td>
                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5"><a href="#" class="transition-all duration-150 ease-linear text-custom-500 hover:text-custom-600 user-id">${a}</a></td>
                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5"><a href="${memberUrl}" class="transition-all duration-150 ease-linear text-custom-500 hover:text-custom-600 user-id">${member.user_name || '-'}</a></td>
                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5 gender">${member.gender || '-'}</td>
                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5 age">${member.age || '-'}</td>
                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5 email">${member.email || '-'}</td>
                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5 city">${member.User_detail && member.User_detail.city ? member.User_detail.city.name : '-'}</td>
                                   <td class="px-3.5 py-2.5 first:pl-5 last:pr-5 joining-date">${member.formatted_created_at || '-'}</td>

                                   
                                   <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">
                                        ${vipBadge}
                                    </td>


                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">
                                        <span class="px-2.5 py-0.5 text-xs font-medium rounded border ${member.email_verified_at !== null ? 'bg-green-100 text-green-500' : 'bg-red-100 text-red-500'}">
                                            <i data-lucide="${member.email_verified_at !== null ? 'check-circle' : 'x-circle'}" class="size-3 mr-1.5"></i>
                                            ${member.email_verified_at !== null ? 'Active' : 'Inactive'}
                                        </span>
                                    </td>

                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">
                                        <a href="${memberUrl}" class="transition-all duration-150 ease-linear text-custom-500 hover:text-custom-600"><i class="ri-eye-line"></i></a>
                                        <a href="${editmemberUrl}" class="transition-all duration-150 ease-linear text-custom-500 hover:text-custom-600"><i class="ri-edit-2-line"></i></a>
                                        <a href="javascript:void(0);" class="transition-all duration-150 ease-linear text-red-500 hover:text-red-600" onclick="confirmDelete('{{ route('admin.members.destroy', '__member_id__') }}'.replace('__member_id__', ${member.id}), ${member.id})">
                                            <i class="ri-delete-bin-2-line"></i>
                                        </a>
                                    </td>
                                </tr>
                            `;
                            a++; // Increment the counter for the row number
                        });

                        // Append new rows to the table body
                        $('.list').append(rows);
                    } else {
                        $('.list').append('<tr><td colspan="8" class="text-center py-2">No results found</td></tr>');
                    }
                },
                error: function() {
                    console.error("An error occurred while fetching members.");
                }
            });
        });
    });
</script>



<script>
    $(document).ready(function() {
        $('#bulk-action-select').change(function() {
            var action = $(this).val();
            var selectedIds = [];

            // Gather all checked checkboxes from the table
            $('input[name="selected_members[]"]:checked').each(function() {
                selectedIds.push($(this).val());
            });

            // Check if any checkbox is selected
            if (selectedIds.length === 0) {
            Swal.fire({
                title: 'No Members Selected',
                text: 'Please select at least one member.',
                icon: 'warning',
                confirmButtonText: 'OK'
            });
            return;
        }


            // Check if an action is selected
            if (action === '') {
                alert('Please select an action.');
                return;
            }

            // Send AJAX request
            $.ajax({
                url: '{{ route('admin.members.bulk.update') }}',
                type: 'POST',
                data: {
                    ids: selectedIds,
                    action: action,
                    _token: '{{ csrf_token() }}' // Include CSRF token
                },
                success: function(response) {
                Swal.fire({
                    icon: 'success', 
                    title: 'Success',
                    text: response.message,
                    confirmButtonText: 'OK'
                }).then(() => {
                    location.reload(); 
                });
            },
                error: function(xhr) {
                    // Handle error response
                    alert('An error occurred. Please try again.');
                }
            });
        });
    });
    </script>


@endsection