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

        <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 onclick="window.location.href='{{route('admin.userManagement')}}'"
                    class="cursor-pointer bg-[#FEFEFE] border border-[#E5E5E5] Poppins-medium text-[#313131] text-[16px] w-full sm:w-45.5 py-2.75 rounded-[5px]"
                    onclick="window.location.href='user-management'">
                    Users List
                </button>

                <button
                    class="cursor-pointer bg-[#133754] border border-[#E5E5E5] text-[#FFFFFF]  Poppins text-[14px] w-full sm:w-45.5 py-2.75 rounded-[5px]">
                    Tutors Requests
                </button>







            </div>

            <div class="flex flex-col sm:flex-row gap-3 w-full 2xl:w-auto">
                <form id="bulkApproveForm" action="{{ route('admin.tutor-request.update') }}" method="post">
                    @csrf
                    <input type="hidden" name="tutorIds[]" id="">
                    <button type="button" id="approveBtn"
                        class="bg-[#00AA25] cursor-pointer text-white w-full sm:w-49.25 text-[16px] h-12.25 Poppins-medium rounded-[4.11px]">
                        Approve Selected
                        <span id="tutor_counter"></span>
                    </button>
                </form>
            </div>

        </div>




        <div class="grid xldesk:grid-cols-4 xl:grid-cols-3  sm:grid-cols-2 grid-cols-1  gap-4.5">

            @include('admin.components.tutorCards', ['tutors' => $tutors, 'checkbox' => true])




        </div>
        <div class="w-full flex justify-center mt-12">
            {!! $tutors->links('components.pagination') !!}
        </div>


    </div>
    @push('script')
        <script>
            $(document).ready(function() {

                function updateCounter() {
                    let count = $('.tutor_id:checked').length;
                    $('#tutor_counter').text(count > 0 ? '(' + count + ')' : '');
                }

                // Update on checkbox change
                $(document).on('change', '.tutor_id', function() {
                    updateCounter();
                });

                // Approve button click
                $('#approveBtn').on('click', function() {

                    let selectedIds = [];

                    $('.tutor_id:checked').each(function() {
                        selectedIds.push($(this).val());
                    });

                    $('#bulkApproveForm input[name="tutorIds[]"]').remove();

                    $.each(selectedIds, function(index, id) {
                        $('#bulkApproveForm').append(
                            '<input type="hidden" name="tutorIds[]" value="' + id + '">'
                        );
                    });

                    if (selectedIds.length > 0) {
                        $('#bulkApproveForm').submit();
                    } else {
                        alert('Please select at least one tutor');
                    }
                });



                

            });
        </script>
    @endpush
@endsection
