@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">{{ __('All 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>{{ __('All Students') }}</h2>
                    </div>
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <form method="GET" action="{{route('student.index')}}">
                                <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>
                            @if(Auth::user()->hasRole('Team Leader') || Auth::user()->hasRole('Super Admin') || Auth::user()->hasRole('Senior  Manager'))
                            <div class="my-4">
                                <h2>Search Leads</h2>
                                <form action="{{route('student.index')}}" method="get" class="my-4" id="search_leads">
                                    @csrf

                                    <label for="type" class="d-block my-2">Type</label>
                                    <select name="type" class="form-control" id="type">
                                        <option value="converted">Converted</option>
                                        <option value="leads">Leads</option>
                                    </select>
                                    <br>
                                    <label for="from" class="d-block my-2">From</label>
                                    <input type="date" name="from" id="from" required class="border border-2 border-black p-2 mx-2 my-2" /><br>
                                    <label for="to" class="d-block my-2">To</label>
                                    <input type="date" name="to" id="to" required class="border border-2 border-black p-2 mx-2 my-2" /><br>
                                    <input type="submit" value="Search Leads" class="btn btn-blue mt-2">
                                </form>
                                @if(isset($searchStudents) )
                                <p>
                                    From: {{isset($_GET['from']) ? $_GET['from'] : null}}
                                    To: {{isset($_GET['to']) ? $_GET['to'] : null}}
                                </p>
                                <p>
                                    <strong>
                                        @if(isset($_GET['type']))
                                        @if($_GET['type'] == 'converted')
                                        {{__('Converted Leads')}}
                                        @else
                                        {{__('Leads')}}
                                        @endif

                                        @endif By Date</strong>: {{count($searchStudents)}}
                                </p>
                                @endif
                                @if(Auth::user()->hasRole('Super Admin'))
                                @if(isset($todayStudentList))
                                <p><strong>Total Leads</strong>: {{count($totalstudents)}}</p>
                                @endif
                                @endif
                                @if(isset($todayStudentList))
                                <p><strong>Today Leads</strong>: {{count($todayStudentList)}}</p>
                                @endif
                                <div class="search_leads_result_show">

                                </div>
                            </div>
                            @endif
                        </div>

                        @can('send_notice')
                        <div class="col-md-6 text-md-end text-center mt-4 mt-md-0">
                            <button data-bs-toggle="modal" class="btn btn-blue mt-2" data-bs-target="#sendNoticeModal">Send Notice</button>
                        </div>
                        @endcan
                    </div>
                    <div class="customers__table">
                        <table id="customers-table" class="row-border data-table-filter table-style">
                            <thead>
                                <tr>
                                    <th>{{__('Serial')}}</th>
                                    <th>{{__('Image')}}</th>

                                    <th>{{__('Details')}}</th>
                                    <th>{{__('Reference')}}</th>
                                    @can('send_student_status')
                                    <th>{{__('Profile Status')}}</th>
                                    @endcan
                                    <th>{{__('Address')}}</th>
                                    <th>{{__('Team Leader')}}</th>
                                    <th>{{__('Instructor')}}</th>
                                    <th>{{__('Status')}}</th>
                                    @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>
<!-- Page content area end -->

@can('send_notice')
<div class="modal fade viewStudentModal" id="sendNoticeModal" tabindex="-1" aria-labelledby="sendNoticeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="sendNoticeModalLabel">{{__('Send Notice')}}</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="notice-detail-info-row">

                                <label for="message" class="col-md-12">Message</label>

                                <textarea name="message" id="" cols="30" rows="10" class="form-control w-100" class="message"></textarea>

                                <button type="button" class="btn btn-blue mt-2 submit col-md-12 my-4 submit-notice">{{ __('Send') }}</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>
    </div>
</div>
@endcan

@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");
    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
        let url = "{{route('student.get-student-list')}}?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.current_page == response.last_page) {
                isLastPage = true;
                $('.more-data-loading').text('No more data available')
            }

            // Append the new data to the existing data
            response?.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?.approved_at ? new Date(student?.approved_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(`<td>Id : ${student?.parentU?.referral_code }<br>Name : ${student?.parentU?.name}<br></td>`));
                @can('send_student_status')
                row.append($("<td>").html(`<td><form action="{{route('admin.student.edit.warning', '')}}${student?.user?.id}" method="POST"><input type="hidden" name="_token" value="{{ csrf_token() }}">${student?.user?.p_status ? student?.user?.p_status == 1 ? '<input type="hidden" name="status" value="0" />' : '<input type="hidden" name="status" value="1" />' : '<input type="hidden" name="status" value="1" />'}<button type="submit" class="btn ${student?.user?.p_status ? $student?.user?.p_status == 1 ? 'btn-red': 'btn-blue': '' } mt-2">${student?.user?.p_status ? $student?.user?.p_status == 1 ? 'Warned' : 'Progress' : ''}</button></form></td>`));
                @endcan

                row.append($("<td>").html(`<td>${student?.address ? student?.address : ''}</td>`));
                
                //team leader
                row.append($("<td>").html(`<td>${student?.leader_user?.name ? student?.leader_user?.name : ''}<br> (${student?.leader_user?.referral_code ? student?.leader_user?.referral_code : ''}) <br><a href="https://api.whatsapp.com/send?phone=${student?.leader_user?.phone_number}" class="btn btn-blue mt-2" target="_blank">Whatsapp</a></td>`));
                //instructor
                row.append($("<td>").html(`<td>${student?.instructor_user?.name ? student?.instructor_user?.name : ''}<br> (${student?.instructor_user?.referral_code ? student?.instructor_user?.referral_code : ''}) <br><a href="https://api.whatsapp.com/send?phone=${student?.instructor_user?.area_code}${student?.instructor_user?.phone_number}" class="btn btn-blue mt-2" target="_blank">Whatsapp</a></td>`));

                @can('manage_student_options')
                



                row.append($("<td>").html(`<td><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></td>`));
                @else       
                row.append($("<td>").html(`<td><span>${student?.status == 1 ? 'Active' : student?.status == 2 ? 'Blocked' : 'Inactive'}</span></td>`));
                @endcan
                @can('manage_student_options')
                row.append($("<td>").html(`<td><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></td>`));
                @endcan
                tableBody.append(row);

                serial.push(student);
            });

            

            // Increment the page number
            page++;

            isLoading = false;

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

    $(window).scroll(function() {
        console.log($(window).scrollTop() + $(window).height() - 100 == $(document).height() - 100)
    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-list')}}?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.current_page == response.last_page) {
                isLastPage = true;
                $('.more-data-loading').text('No more data available')
            }

            // Append the new data to the existing data
            response?.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?.approved_at ? new Date(student?.approved_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(`<td>Id : ${student?.parentU?.referral_code }<br>Name : ${student?.parentU?.name}<br></td>`));
                @can('send_student_status')
                row.append($("<td>").html(`<td><form action="{{route('admin.student.edit.warning', '')}}${student?.user?.id}" method="POST"><input type="hidden" name="_token" value="{{ csrf_token() }}">${student?.user?.p_status ? student?.user?.p_status == 1 ? '<input type="hidden" name="status" value="0" />' : '<input type="hidden" name="status" value="1" />' : '<input type="hidden" name="status" value="1" />'}<button type="submit" class="btn ${student?.user?.p_status ? $student?.user?.p_status == 1 ? 'btn-red': 'btn-blue': '' } mt-2">${student?.user?.p_status ? $student?.user?.p_status == 1 ? 'Warned' : 'Progress' : ''}</button></form></td>`));
                @endcan

                row.append($("<td>").html(`<td>${student?.address ? student?.address : ''}</td>`));
                
                //team leader
                row.append($("<td>").html(`<td>${student?.leader_user?.name ? student?.leader_user?.name : ''}<br> (${student?.leader_user?.referral_code ? student?.leader_user?.referral_code : ''}) <br><a href="https://api.whatsapp.com/send?phone=${student?.leader_user?.phone_number}" class="btn btn-blue mt-2" target="_blank">Whatsapp</a></td>`));
                
                
                //instructor
                row.append($("<td>").html(`<td>${student?.instructor_user?.name ? student?.instructor_user?.name : ''}<br> (${student?.instructor_user?.referral_code ? student?.instructor_user?.referral_code : ''}) <br><a href="https://api.whatsapp.com/send?phone=${student?.instructor_user?.area_code}${student?.instructor_user?.phone_number}" class="btn btn-blue mt-2" target="_blank">Whatsapp</a></td>`));
                
                @can('manage_student_options')
                row.append($("<td>").html(`<td><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></td>`));
                @else       
                row.append($("<td>").html(`<td><span>${student?.status == 1 ? 'Active' : student?.status == 2 ? 'Blocked' : 'Inactive'}</span></td>`));
                @endcan
                @can('manage_student_options')
                row.append($("<td>").html(`<td><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></td>`));
                @endcan
                tableBody.append(row);

                serial.push(student);
            });

            

            // Increment the page number
            page++;

            isLoading = false;

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


    function loadedFn(){
        $(".status").change(function() {
            var id = $(this).closest('tr').find('#hidden_id').html();
            var status_value = $(this).closest('tr').find('.status 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,
                            "id": id,
                            "_token": "{{ csrf_token() }}",
                        },
                        datatype: "json",
                        success: function(data) {
                            toastr.options.positionClass = 'toast-bottom-right';
                            toastr.success('', "{{ __('Student status has been updated') }}");
                        },
                        error: function() {
                            alert("Error!");
                        },
                    });
                } else if (result.dismiss === "cancel") {}
            });
        });

        $(".submit-notice").click(function() {
            // var id = $(this).closest('').find('#hidden_id').html();
            var message = $(this).closest('.notice-detail-info-row').find('textarea').val();
            Swal.fire({
                title: "{{ __('Are you sure to change message?') }}",
                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.send.notice')}}",
                        data: {
                            "message": message,
                            "_token": "{{ csrf_token() }}",
                        },
                        datatype: "json",
                        success: function(data) {
                            toastr.options.positionClass = 'toast-bottom-right';
                            toastr.success('', "{{ __('Successfully Send to all Students') }}");
                            window.location.reload();

                        },
                        error: function() {
                            alert("Error!");
                        },
                    });
                } else if (result.dismiss === "cancel") {}
            });
        });
    }
</script>


<script>
   // Wait for the document to be ready
    $(document).ready(function() {

    // When the search_leads form is submitted
    $('#search_leads').submit(function(event) {

    // Prevent the default form submission behavior
    event.preventDefault();

    $('.search_leads_result_show').html('Loading Please Wait...')
    
    // Get the values of type, from, and to
    var type = $('select#type').val();
    var from = $('input#from').val();
    var to = $('input#to').val();

    // Make the GET request with the query parameters
    $.get('{{route("student.get-student-leads")}}', {
        type: type,
        from: from,
        to: to
    }, function(data) {
        let content = '';

        // Handle the response data here
        content += `<p>From: ${from} To: ${to}</p>`;
        if(data?.searchStudents) {
            content += `<p><strong> ${type == 'converted' ? 'Converted Leads' : 'Leads'} By Date</strong>: ${data?.searchStudents?.length}</p>`
        }
        if(data?.totalstudents) {
            content += `<p><strong>Total Leads</strong>: ${data?.totalstudents?.length}</p>`;
        }
        content += `<p><strong>Today Leads</strong>: ${data?.todayStudentList?.length}</p>`;
        $('.search_leads_result_show').html(content);
    });

    });

    });



</script>

@endpush