@extends('layouts.admin')

@section('content')
<!-- Page content area start -->
<div class="page-content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="breadcrumb__content">
                    <div class="breadcrumb__content__left">
                        <div class="breadcrumb__title">
                            <h2>{{ __('Students') }}</h2>
                        </div>
                    </div>
                    <div class="breadcrumb__content__right">
                        <nav aria-label="breadcrumb">
                            <ul class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{route('admin.dashboard')}}">{{__('Dashboard')}}</a></li>
                                <li class="breadcrumb-item active" aria-current="page">{{ __('Pending student') }}</li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="customers__area bg-style mb-30">
                    <div class="item-title d-flex justify-content-between">
                        <h2>{{ __('Pending Students') }}</h2>
                    </div>
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <form method="GET" action="{{route('student.pending_list')}}">
                                <div class="row">
                                    <label for="search" class="col-12 gy-4 font-bold">Search</label>
                                    <input type="text" class="form-control col-12 gy-4" placeholder="Whatsapp Number" name="phone" aria-controls="phone" value="{{isset($phone) ? $phone : ''}}">
                                    <input type="text" class="form-control col-12 gy-4" placeholder="Student ID" name="ref_id" aria-controls="search" value="{{isset($ref_id) ? $ref_id : ''}}">
                                    <button type="submit" class="btn btn-blue mt-2">Search</button>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="customers__table">

                        <table id="customers-table" class="row-border table-style">
                            <thead>
                                <tr>
                                    <th>{{__('Image')}}</th>
                                    <th>{{__('Details')}}</th>
                                    <th>{{__('Reference')}}</th>
                                    <!-- <th>{{__('Address')}}</th> -->
                                    <th>{{__('Status')}}</th>
                                    @if(Auth::user()->hasRole('Counsilor'))
                                    <th>{{__('Request')}}</th>
                                    @endif
                                    @can('manage_student_options')
                                    <th>{{__('Action')}}</th>
                                    @endcan
                                </tr>
                            </thead>
                            <tbody>
                                <tr></tr>
                            </tbody>
                        </table>
                        <div class="mt-3 more-data-loading">
                            Please wait more data loading...
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<div class="all-student-modal">

</div>

@endsection

@push('style')
<link rel="stylesheet" href="{{asset('admin/css/jquery.dataTables.min.css')}}">
@endpush

@push('script')
<script src="{{asset('admin/js/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('admin/js/custom/data-table-page.js')}}"></script>
<script>
    'use strict'

    

    var page = 0;
    var isLoading = false;
    var isLastPage = false;
    const tableBody = $("#customers-table tbody");
    const allStudentModal = $(".all-student-modal");
    let serial = [];

    var phone = ""; // Set the default value for type
    var ref_id = ""; // Set the default value for ref_id

    // Check if the type, from, and to parameters exist in the current URL
    var urlParams = new URLSearchParams(window.location.search);
    if(urlParams.has("phone")) {
        phone = urlParams.get("phone");
    }
    if(urlParams.has("ref_id")) {
        ref_id = urlParams.get("ref_id");
    }


    
    $(document).ready(function(){
        // Send an AJAX request to load the next set of data

        // Build the AJAX request URL with the type, from, and to parameters
        var url = "{{route('student.get-student-pending')}}?page=" + (page + 1);
        if(phone != "") {
            url += "&phone=" + phone;
        }
        if(ref_id != "") {
            url += "&ref_id=" + ref_id;
        }

        $.ajax({
            url,
            type: "GET",
            data: {
                _token: "{{ csrf_token() }}"
            },
            success: function(response) {

            // Check if we have reached the last page
            if(response?.students?.current_page == response?.students?.last_page) {
                isLastPage = true;
                $('.more-data-loading').text('No more data available')
            }

            // Append the new data to the existing data
            response?.students?.data.map((student, key)=> {
                const row = $('<tr class="removable-item">');
                row.append($("<td>").html(serial?.length+1));
                row.append($("<td>").html(`<img src="${student?.user?.image ? student?.user?.image : 'https://webbdnet.com/uploads/default/instructor-default.png' }" width="80">`));
                row.append($("<td>").html(`Student Id: ${student?.user?.referral_code}<br>Name: ${student?.user?.name}<br>Email: ${student?.user?.email}<br>Phone: ${student?.user?.phone_number}<br>Join Date: ${student?.created_at ? new Date(student?.created_at).toLocaleString() : ''}<br><a href="https://api.whatsapp.com/send?phone=${student?.user?.area_code}${student?.user?.phone_number}" class="btn btn-blue mt-2" target="_blank">Whatsapp</a><br>`));
                row.append($("<td>").html(`Id : ${student?.parentU?.referral_code }<br>Name : ${student?.parentU?.name}<br>`));
                
                @can('manage_student_options')
                row.append($("<td>").html(`<span id="hidden_id" style="display: none">${student?.id}</span><div class="red-blue-action-btns">
                <button type="button" data-bs-toggle="modal" data-bs-target="#allStudentViewModal${student?.id}" class="btn btn-blue mt-2">Approve</button></div>`));
                @else
                row.append($("<td>").html(`<span>${student?.status == 1 ? 'Approved' : student?.status == 2 ? 'Blocked' : 'Inactive'}</span>`));
                @endcan
                @if(Auth::user()->hasRole('Counsellor'))

                row.append($("<td>").html(`<form action="{{route('admin.student.requestToAdmin', '')}}/${student?.user_id}" method="post"><textarea name="text" id="" cols="30" rows="10" placeholder="Message" required></textarea><input type="hidden" name="_token" value="{{ csrf_token() }}"><button type="submit" class="btn btn-blue mt-2">Request To Admin</button></form>`));
                
                @endif

                @can('manage_student_options')
                row.append($("<td>").html(`<span id="hidden_id" style="display: none">${student?.id}</span><select name="status" class="status label-inline font-weight-bolder mb-1 badge badge-info"><option value="1" ${student?.status == 1 && 'selected'}>Approved</option><option value="2" ${student?.status == 2 && 'selected'}>Blocked</option></select>`));
                @else       
                row.append($("<td>").html(`<span>${student?.status == 1 ? 'Active' : student?.status == 2 ? 'Blocked' : 'Inactive'}</span>`));
                @endcan
                @can('manage_student_options')
                row.append($("<td>").html(`<div class="action__buttons"><a href="{{route('student.view','')}}/${student?.uuid}" class="btn-action mr-30" title="View Details"><img src="{{asset('admin/images/icons/eye-2.svg')}}" alt="eye"></a><a href="{{route('student.edit', '')}}/${student?.uuid}" class="btn-action mr-30" title="Edit Details"><img src="{{asset('admin/images/icons/edit-2.svg')}}" alt="edit"></a><button class="ms-3"><span data-formid="delete_row_form_${student?.id}" class="deleteItem"><img src="{{asset('admin/images/icons/trash-2.svg')}}" alt="trash"></span></button><form action="{{route('student.delete', '')}}/${student?.uuid}" method="post" id="delete_row_form_${student?.id}">{{ method_field('DELETE') }}<input type="hidden" name="_token" value="{{ csrf_token() }}"></form></div>`));
                @endcan
                tableBody.append(row);

                let leaders = '';
                response?.leaders?.map((leader, key)=> (
                    leaders+=`<option value="${leader?.id}">${leader?.name} (ID: ${leader?.referral_code})</option>`
                ))

                const modal = $(`<div class="modal fade viewStudentModal" id="allStudentViewModal${student?.id}" tabindex="-1" aria-labelledby="allStudentViewModalLabel" aria-hidden="true">`);

                modal.append($(`<div class="modal-dialog modal-dialog-centered">').html('<div class="modal-content"><div class="modal-header"><h6 class="modal-title" id="allStudentViewModalLabel">Student Information</h6><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body"><form><div class="row mb-4"><div class="col-md-12"><div class="student-detail-info-row"><span id="hidden_id" style="display: none">${student?.id}</span><select name="leader_id" class="leader_id selectized col-md-12 my-4">${leaders}</select><select name="status" class="status label-inline font-weight-bolder mb-1 badge badge-info col-md-12 my-4"><option value="1">Approved</option><option value="0">PENDING</option></select><button type="button" class="btn btn-blue mt-2 submit col-md-12 my-4">Approve</button></div></div></div></form></div><div class="modal-footer d-flex justify-content-between align-items-center"><button type="button" class="theme-btn theme-button1 default-hover-btn default-back-btn" data-bs-dismiss="modal">Back</button></div></div>`));

                allStudentModal.append(modal);
                console.log(allStudentModal)

                serial.push(student);
            });

            

            // Increment the page number
            page++;

            isLoading = false;

            // console.log('loading..')
            loadedFn()
            }
        });
    })

    $(window).scroll(function() {
    if($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
        if(!isLoading && !isLastPage) {
        isLoading = true;

        // Build the AJAX request URL with the type, from, and to parameters
        var url = "{{route('student.get-student-pending')}}?page=" + (page + 1);
        if(phone != "") {
            url += "&phone=" + phone;
        }
        if(ref_id != "") {
            url += "&ref_id=" + ref_id;
        }
        
        // Send an AJAX request to load the next set of data
        $.ajax({
            url,
            type: "GET",
            data: {
                _token: "{{ csrf_token() }}"
            },
            success: function(response) {

            // Check if we have reached the last page
            if(response?.students?.current_page == response?.students?.last_page) {
                isLastPage = true;
                $('.more-data-loading').text('No more data available')
            }

            // Append the new data to the existing data
            response?.students?.data.map((student, key)=> {
                const row = $('<tr class="removable-item">');
                row.append($("<td>").html(serial?.length+1));
                row.append($("<td>").html(`<img src="${student?.user?.image ? student?.user?.image : 'https://webbdnet.com/uploads/default/instructor-default.png' }" width="80">`));
                row.append($("<td>").html(`Student Id: ${student?.user?.referral_code}<br>Name: ${student?.user?.name}<br>Email: ${student?.user?.email}<br>Phone: ${student?.user?.phone_number}<br>Join Date: ${student?.created_at ? new Date(student?.created_at).toLocaleString() : ''}<br><a href="https://api.whatsapp.com/send?phone=${student?.user?.area_code}${student?.user?.phone_number}" class="btn btn-blue mt-2" target="_blank">Whatsapp</a><br>`));
                row.append($("<td>").html(`Id : ${student?.parentU?.referral_code }<br>Name : ${student?.parentU?.name}<br>`));
                
                @can('manage_student_options')
                row.append($("<td>").html(`<span id="hidden_id" style="display: none">${student?.id}</span><div class="red-blue-action-btns">
                <button type="button" data-bs-toggle="modal" data-bs-target="#allStudentViewModal${student?.id}" class="btn btn-blue mt-2">Approve</button></div>`));
                @else
                row.append($("<td>").html(`<span>${student?.status == 1 ? 'Approved' : student?.status == 2 ? 'Blocked' : 'Inactive'}</span>`));
                @endcan

                @if(Auth::user()->hasRole('Counsellor'))
                row.append($("<td>").html(`<form action="{{route('admin.student.requestToAdmin', '')}}/${student?.user_id}" method="post"><textarea name="text" id="" cols="30" rows="10" placeholder="Message" required></textarea><input type="hidden" name="_token" value="{{ csrf_token() }}"><button type="submit" class="btn btn-blue mt-2">Request To Admin</button></form>`));
                @endif
                
                @can('manage_student_options')
                row.append($("<td>").html(`<span id="hidden_id" style="display: none">${student?.id}</span><select name="status" class="status label-inline font-weight-bolder mb-1 badge badge-info"><option value="1" ${student?.status == 1 && 'selected'}>Approved</option><option value="2" ${student?.status == 2 && 'selected'}>Blocked</option></select>`));
                @else       
                row.append($("<td>").html(`<span>${student?.status == 1 ? 'Active' : student?.status == 2 ? 'Blocked' : 'Inactive'}</span>`));
                @endcan
                @can('manage_student_options')
                row.append($("<td>").html(`<div class="action__buttons"><a href="{{route('student.view','')}}/${student?.uuid}" class="btn-action mr-30" title="View Details"><img src="{{asset('admin/images/icons/eye-2.svg')}}" alt="eye"></a><a href="{{route('student.edit', '')}}/${student?.uuid}" class="btn-action mr-30" title="Edit Details"><img src="{{asset('admin/images/icons/edit-2.svg')}}" alt="edit"></a><button class="ms-3"><span data-formid="delete_row_form_${student?.id}" class="deleteItem"><img src="{{asset('admin/images/icons/trash-2.svg')}}" alt="trash"></span></button><form action="{{route('student.delete', '')}}/${student?.uuid}" method="post" id="delete_row_form_${student?.id}">{{ method_field('DELETE') }}<input type="hidden" name="_token" value="{{ csrf_token() }}"></form></div>`));
                @endcan
                tableBody.append(row);

                let leaders = '';
                response?.leaders?.map((leader, key)=> (
                    leaders+=`<option value="${leader?.id}">${leader?.name} (ID: ${leader?.referral_code})</option>`
                ))

                const modal = $(`<div class="modal fade viewStudentModal" id="allStudentViewModal${student?.id}" tabindex="-1" aria-labelledby="allStudentViewModalLabel" aria-hidden="true">`);

                modal.append($(`<div class="modal-dialog modal-dialog-centered">').html('<div class="modal-content"><div class="modal-header"><h6 class="modal-title" id="allStudentViewModalLabel">Student Information</h6><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body"><form><div class="row mb-4"><div class="col-md-12"><div class="student-detail-info-row"><span id="hidden_id" style="display: none">${student?.id}</span><select name="leader_id" class="leader_id selectized col-md-12 my-4">${leaders}</select><select name="status" class="status label-inline font-weight-bolder mb-1 badge badge-info col-md-12 my-4"><option value="1">Approved</option><option value="0">PENDING</option></select><button type="button" class="btn btn-blue mt-2 submit col-md-12 my-4">Approve</button></div></div></div></form></div><div class="modal-footer d-flex justify-content-between align-items-center"><button type="button" class="theme-btn theme-button1 default-hover-btn default-back-btn" data-bs-dismiss="modal">Back</button></div></div>`));

                allStudentModal.append(modal);



                serial.push(student);
            });

            

            // Increment the page number
            page++;

            isLoading = false;

            // console.log('loading..')
            loadedFn()
            }
        });
        }
    }
    });


    function loadedFn(){
        $(".modal-content .submit").click(function() {
            var id = $(this).closest('.student-detail-info-row').find('#hidden_id').html();
            var status_value = $(this).closest('.student-detail-info-row').find('.status option:selected').val();
            var leader_id = $(this).closest('.student-detail-info-row').find('.leader_id option:selected').val();
            Swal.fire({
                title: "Are you sure to change status?",
                text: "You won't be able to revert this!",
                icon: "warning",
                showCancelButton: true,
                confirmButtonText: "Yes, Change it!",
                cancelButtonText: "No, cancel!",
                reverseButtons: true
            }).then(function(result) {
                if (result.value) {
                    $.ajax({
                        type: "POST",
                        url: "{{route('admin.student.changeStudentStatus')}}",
                        data: {
                            "status": status_value,
                            "leader_id": leader_id,
                            "id": id,
                            "_token": "{{ csrf_token() }}",
                        },
                        datatype: "json",
                        success: function(data) {
                            toastr.options.positionClass = 'toast-bottom-right';
                            toastr.success('', 'Student status has been updated');
                            window.location.reload()
                        },
                        error: function() {
                            alert("Error!");
                        },
                    });
                } else if (result.dismiss === "cancel") {}
            });
        });
    }
</script>
@endpush