@extends('admin.layouts.layout')
@section('title', 'User management')
@section('content')
    <div class="py-3 px-1">

        <form action="{{ route('admin.userManagement') }}">
            <div class="flex flex-col 2xl:flex-row flex-wrap 2xl:items-center justify-between gap-4 mb-6
        ">
                <div class="flex flex-wrap gap-2 w-full 2xl:w-auto">

                    <button
                        class="cursor-pointer bg-[#133754] text-[#FFFFFF] Poppins-medium text-[16px] w-full sm:w-45.5 py-2.75 rounded-[5px]">
                        Users List
                    </button>

                    <button type="button"
                        class="cursor-pointer bg-[#FEFEFE] border border-[#E5E5E5] text-[#313131] Poppins text-[14px] w-full sm:w-45.5 py-2.75 rounded-[5px]"
                        onclick="window.location.href='{{ route('admin.tutorRequest') }}'">
                        Tutors Requests
                    </button>

                    <div class="relative w-full sm:w-46 2xl:ml-2">
                        <select name="role"
                            class="appearance-none w-full border border-[#EEEEEE] py-2.75 outline-0 rounded-md Poppins text-[14px] px-4 pr-10 text-[#4C4C4C] bg-white">
                            <option value="">All Users</option>
                            <option value="2" {{ request('role') == 2 ? 'selected' : '' }}>Tutor</option>
                            <option value="3" {{ request('role') == 3 ? 'selected' : '' }}>Student</option>
                        </select>

                        <div class="pointer-events-none absolute inset-y-0 right-3 flex items-center text-gray-500">
                            <img src="{{ asset('newsites/admin/images/select-arrow.png') }}" />
                        </div>
                    </div>

                    <div class="relative w-full sm:w-46">
                        <select name="status"
                            class="appearance-none w-full border border-[#EEEEEE] py-2.75 outline-0 rounded-md Poppins text-[14px] px-4 pr-10 text-[#4C4C4C] bg-white">
                            <option value="">Status</option>
                            <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>Active</option>
                            <option value="declined" {{ request('status') == 'declined' ? 'selected' : '' }}>Suspended
                            </option>
                        </select>

                        <div class="pointer-events-none absolute inset-y-0 right-3 flex items-center text-gray-500">
                            <img src="{{ asset('newsites/admin/images/select-arrow.png') }}" />
                        </div>
                    </div>

                    <div class="relative w-full sm:w-[310px]">
                        <div class="absolute inset-y-0 left-3 flex items-center pointer-events-none">
                            <i class="fa-solid fa-magnifying-glass text-[#9CA3AF]"></i>
                        </div>

                        <input type="text" name="search" value="{{ request('search') }}" placeholder="Search by Name"
                            class="border border-[#EEEEEE] placeholder:text-[#4C4C4C] rounded-md pl-10 pr-4 py-2.75 text-[#4C4C4C] Poppins text-[14px] w-full focus:outline-none" />

                    </div>

                </div>

                <div class="flex flex-col sm:flex-row gap-3 w-full 2xl:w-auto">
                    <button type="button" id="suspend_users"
                        class="bg-[#B20000] text-white w-full sm:w-49.25 cursor-pointer text-[16px] h-12.25 Poppins-medium rounded-[4.11px]">
                        Suspend Selected (<span id="suspend_count">0</span>)
                    </button>

                    <button type="button" id="delete_users"
                        class="bg-[#B20000] text-white w-full sm:w-49.25 cursor-pointer text-[16px] h-12.25 Poppins-medium rounded-[4.11px]">
                        Delete Selected (<span id="delete_count">0</span>)
                    </button>
                </div>

            </div>

            <div class="w-full overflow-x-auto">
                <table class="min-w-225 w-full text-left text-[#1F1F1F] text-sm bg-white border-separate border-spacing-0">
                    <thead class="bg-[#F9F9FB] border ">
                        <tr>
                            <th class="py-2 px-3">
                                <label class="text-[#222222] Poppins-medium cursor-pointer" unselectable="on">
                                    <input type="checkbox" class="allselect hidden peer">
                                    <span
                                        class="w-5 h-5 flex left items-center justify-center rounded-[5.65px] border border-[#D8DADF] bg-white peer-checked:bg-[#3ED468] peer-checked:[&>img]:block">
                                        <img src="{{ asset('newsites/admin/images/tick-icon.png') }}" class="hidden w-3" />
                                    </span>
                                </label>
                            </th>
                            <th
                                class="sm:py-3.25 py-2 px-4 Poppins-medium text-[#44444A] text-[15px] rounded-bl-[6.79px] rounded-tl-[6.79px] overflow-hidden">
                                User</th>
                            <th class="py-2 px-3 Poppins-medium text-[#44444A] text-[15px]">Email Address</th>
                            <th class="py-2 px-3 Poppins-medium text-[#44444A] text-[15px]">Role</th>
                            <th class="py-2 px-3 Poppins-medium text-[#44444A] text-[15px]">Status</th>
                            <th class="py-2 px-3 Poppins-medium text-[#44444A] text-[15px] min-w-[115px]">Joined Date</th>
                            <th
                                class="py-2 px-3 Poppins-medium text-[#44444A] text-[15px] rounded-tr-[6.79px] rounded-br-[6.79px] overflow-hidden">
                                Actions</th>
                        </tr>
                    </thead>

                    <tbody>
                        @foreach ($users as $user)
                            <tr>
                                <td class="px-3 border-b border-[#E6E6E6]">
                                    <label class="text-[#222222] Poppins-medium cursor-pointer">
                                        <input type="checkbox" class="users hidden peer">
                                        <span
                                            class="selector_image w-5 h-5 flex left items-center justify-center rounded-[5.65px] border border-[#D8DADF] bg-white peer-checked:bg-[#3ED468] peer-checked:[&>img]:block">
                                            <img src="{{ asset('newsites/admin/images/tick-icon.png') }}"
                                                class="hidden w-3" />
                                        </span>
                                    </label>
                                </td>
                                <td class="py-4 px-3 border-b border-[#E6E6E6]">
                                    <div
                                        class="flex items-center gap-2 text-[#636363] text-[17px] Poppins-medium min-w-[204px]">
                                        <img src="{{ asset($user->userDefaultProfile) }}"
                                            class="w-11 rounded-[4.62px] h-11 border border-[#D8DADF]" />
                                        {{ $user->name }}
                                    </div>
                                </td>
                                <td
                                    class="py-4 px-3 text-[#636363] Poppins-medium text-[15px] text-[14.65px] font-medium Inter-m border-b border-[#E6E6E6]">
                                    {{ $user->email }} </td>
                                <td class="py-4 px-3 border-b border-[#E6E6E6]">
                                    @if ($user->role == 3)
                                        <button type="button"
                                            class="bg-[#F4C701] text-[#010101] Poppins-medium text-[15px] w-29.5 h-7.75 rounded text-xs font-bold">{{ $user->role_name }}</button>
                                    @else
                                        <button type="button"
                                            class="bg-[#1CD8C4] text-[#010101] Poppins-medium text-[15px] w-29.5 h-7.75 rounded  font-bold ">Tutor</button>
                                    @endif

                                </td>
                                @if ($user->status == 'declined')
                                    <td
                                        class="py-4 px-3 text-[#B20000] Poppins-medium text-[15px] border-b border-[#E6E6E6]">
                                        Suspended
                                    </td>
                                @elseif($user->status == 'requested')
                                    <td
                                        class="py-4 px-3 text-[#F4C701] Poppins-medium text-[15px] border-b border-[#E6E6E6]">
                                        {{ Ucfirst($user->status) }}
                                    </td>
                                @else
                                    <td
                                        class="py-4 px-3 text-[#009D2C] Poppins-medium text-[15px] border-b border-[#E6E6E6]">
                                        {{ Ucfirst($user->status) }}
                                    </td>
                                @endif
                                <td class="py-4 px-3 text-[#121212] Poppins-medium text-[15px] border-b border-[#E6E6E6]">
                                    {{ dateFormate($user->date,'d-m-Y') }}
                                </td>
                                <td class="py-4 px-3 border-b border-[#E6E6E6]">
                                    <div class="flex gap-2">
                                        <button type="button" command="show-modal" commandfor="delete{{ $user->id }}"
                                            class="bg-[#B20000] h-11.25 w-11.25 rounded-[3px]  cursor-pointer"><i
                                                class="fa-regular fa-trash-can text-white "></i></button>

                                        @if ($user->status == 'active')
                                            <button type="button" command="show-modal"
                                                commandfor="decline{{ $user->id }}"
                                                class="border h-11.25 w-11.25 border-[#E6C1C1] cursor-pointer  rounded-[11.31px] bg-[#FFEAEA]"><i
                                                    class="fa-solid fa-ban text-[#D80000]"></i></button>
                                        @endif


                                        @if ($user->status != 'active')
                                            <button type="button" command="show-modal"
                                                commandfor="active{{ $user->id }}"
                                                class="border h-11.25 w-11.25 border-[#009D2C] cursor-pointer  rounded-[11.31px] bg-[#ffff]"><i
                                                    class="fa-solid fa-check text-[#009D2C]"></i>

                                            </button>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @endforeach

                    </tbody>
                </table>
            </div>


            <div class="flex flex-wrap items-center justify-between mt-6 gap-4 text-sm text-gray-600">

                <div class="flex items-center gap-3">
                    <span class="text-[#4E4F54] text-sm Poppins">Items per page:</span>
                    <select name="per_page" onchange="this.form.submit()"
                        class="border border-[#E1E2E3] text-[#171717] Poppins rounded-md bg-[#F8F8F8] px-2 py-2">
                        <option value="5" {{ request('per_page') == 5 ? 'selected' : '' }}>5</option>
                        <option value="10" {{ (!request('per_page') || request('per_page') == 10 )? 'selected' : '' }}>10</option>
                        <option value="20" {{ request('per_page') == 20 ? 'selected' : '' }}>20</option>

                    </select>
                    <span class="text-[#4E4F54] text-sm Poppins">
                        {{ $users->firstItem() }}–{{ $users->lastItem() }} of {{ $users->total() }} Users
                    </span>
                </div>

                <div class="flex items-center gap-3">
                    <select name="page" onchange="this.form.submit()"
                        class="border border-[#E1E2E3] text-[#171717] Poppins rounded-md bg-[#F8F8F8] px-4 py-2">
                        @for ($i = 1; $i <= $users->lastPage(); $i++)
                            <option value="{{ $i }}" {{ $users->currentPage() == $i ? 'selected' : '' }}>
                                {{ $i }}
                            </option>
                        @endfor
                    </select>
                    <span class="text-[#4E4F54] text-sm Poppins">
                        of {{ $users->lastPage() }} pages
                    </span>
                    <button type="submit" name="page" value="{{ $users->currentPage() - 1 }}"
                        {{ $users->onFirstPage() ? 'disabled' : '' }}
                        class="border w-11 h-11 border-[#E1E2E3] rounded-md hover:bg-gray-100 cursor-pointer">
                        <i class="fa-solid fa-angle-left"></i>
                    </button>

                    <button type="submit" name="page" value="{{ $users->currentPage() + 1 }}"
                        {{ $users->hasMorePages() ? '' : 'disabled' }}
                        class="border w-11 h-11 border-[#E1E2E3] rounded-md hover:bg-gray-100 cursor-pointer">
                        <i class="fa-solid fa-angle-right"></i>
                    </button>
                </div>

            </div>
        </form>

    </div>

    @include('admin.components.multiDeclineUserModal')

    @include('admin.components.multiDeleteUserModal')

    @foreach ($users as $user)
        @include('components.declineModal', [
            'id' => $user->id,
            'route' => route('admin.tutor-request.update', $user->id),
        ])

        @include('components.deleteModal', [
            'id' => $user->id,
            'route' => route('admin.user.delete', $user->id),
        ])
        
        @include('components.activeModal', [
            'id' => $user->id,
            'route' => route('admin.user.update', $user->id),
        ])
        
    @endforeach

    @push('script')
        <script>
            $('select').on('change keyup', function() {
                $(this).closest('form').submit();
            });

            $(document).ready(function() {


                $('.allselect').on('change', function() {
                    $('.users').prop('checked', $(this).prop('checked'));
                });


                $('.users').on('change', function() {
                    let total = $('.users').length;
                    let checked = $('.users:checked').length;
                    $('.allselect').prop('checked', total === checked);
                });





                function updateSelectedUsers() {
                    let selected = [];
                    $('.users:checked').each(function() {
                        let userId = $(this).closest('tr').data('user-id');
                        if (userId) selected.push(userId);
                    });
                    $('#suspend_count').text(selected.length);
                    $('#delete_count').text(selected.length);

                    // Not used here for modal; JS will append on button click
                }

                // Add data-user-id to each row
                $('tbody tr').each(function() {
                    let userId = $(this).find('button[command="show-modal"]').attr('commandfor');
                    if (userId) {
                        let id = userId.replace(/\D/g, ''); // extract numeric ID
                        $(this).attr('data-user-id', id);
                    }
                });

                // Checkbox events
                $('.allselect').on('change', function() {
                    $('.users').prop('checked', $(this).prop('checked'));
                    updateSelectedUsers();
                });
                $('.users').on('change', function() {
                    updateSelectedUsers();
                });



                // Multi-suspend button
                $('#suspend_users').on('click', function() {

                    let selectedIds = [];
                    $('.users:checked').each(function() {
                        let userId = $(this).closest('tr').data('user-id');
                        if (userId) selectedIds.push(userId);
                    });

                    if (selectedIds.length === 0) {
                        toastr.error('Please select users first!');

                        return;
                    }




                    $('#multiDeclineUserIds').val(selectedIds.join(','));
                    document.getElementById('multiDeclineModal').showModal();
                });



                // Multi-suspend button
                $('#delete_users').on('click', function() {

                    selectedIds = [];
                    $('.users:checked').each(function() {
                        let userId = $(this).closest('tr').data('user-id');
                        if (userId) selectedIds.push(userId);
                    });

                    if (selectedIds.length === 0) {
                        toastr.error('Please select users first!');

                        return;
                    }




                    $('#multiDeleteUserIds').val(selectedIds.join(','));
                    document.getElementById('multiDeleteModal').showModal();
                });




            });
        </script>
    @endpush
@endsection
