@extends('admin.layouts.leadManagement')
@section('style')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css?v={{ env('CRM_VERSION') }}"
        rel="stylesheet" />
    <link rel="stylesheet" href="{{ asset('backend') }}/lead-management/css/lead.css?v={{ env('CRM_VERSION') }}">
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css?v={{ env('CRM_VERSION') }}" />
    <link rel="shortcut icon" href="/uploads/app/logo/3OtxeXcMv5lhQzNLERhnmclPXorAN4msV8upXbCm.png">
    

    <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css?v={{ env('CRM_VERSION') }}" />
    <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css?v={{ env('CRM_VERSION') }}" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
        <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css?v={{ env('CRM_VERSION') }}" />
    
@endsection
@section('content')
    <div class="row " style="width: 90%; justify-content: center; margin: auto; margin-top:20px;">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header row m-0">
                    <h3 class="card-title  col-sm-12 col-md-6">Demo Classes List
                        <span class="ml-1 badge bg-primary" id="count_show">
                            --
                        </span>

                    </h3>

                    <div class="align-items-center m-0 col-sm-12 col-md-6">
                        @if (userCan('DemoClass.create'))
                            <a href="{{ route('DemoClass.create') }}"
                                class="btn bg-primary float-right d-flex align-items-center justify-content-center m-0 "
                                style="width: 130px; color:white;    float: right;">
                                <i class="fas fa-plus"></i>
                                &nbsp; {{ __('create') }}
                            </a>
                        @endif
                    </div>

                </div>

                <form id="formSubmit">
                    <div class="row p-1 mt-2 mx-2">
                        <div class="col-md-4 col-lg-2  mt-2">
                            <input type="text" @if (request('Keyword')) value="{{ request('Keyword') }}" @endif
                                id="Keyword" class="form-control mr-2" placeholder="{{ __('search') }}..."
                                name="Keyword" aria-label="">
                        </div>
                        <div class="col-md-4 col-lg-2  mt-2">
                            <a href="{{ route('DemoClass.index') }}" id="order_filter_close_btn"
                                style="display: :none;     height: 38px; margin:0px; margin-right:10px; 
                        padding-top: 10px; float:left !important;"class=" mr-1 float-right btn btn-danger align-items-center justify-content-center"><i
                                    class="fas fa-times"></i> </a>
                            <p type="submit" onclick="get_classes()" id="search_show"
                                class="btn btn-primary float-left m-0" style=""><i class="fas fa-search"></i>
                                {{ __('search') }}
                            </p>
                            <p class="btn btn-primary float-left m-0" id="loader_show"
                                style="    
                            height: 38px; display:none;">
                               <img  src="{{asset('/backend/loader/three-dot-loader.gif') }}" style="height: 25px; " class="countloader">
                            </p>
                        </div>
                    </div>
                    <hr>
                    <div class="loader_div" style="background: #dbd5d5c5; z-index:5; height: 500px; position: relative;">
                        <div class="loader"></div>
                    </div>
                    
                    <div id="form_table_show" class="table-scroll" style="overflow: scroll; height:auto;">

                    
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js?v={{ env('CRM_VERSION') }}"
        integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="{{ asset('backend') }}/lead-management/js/common.js?v={{ env('CRM_VERSION') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js?v={{ env('CRM_VERSION') }}">
        < script src = "{{ asset('backend') }}/lead-management/js/customer-detail.js?v={{ env('CRM_VERSION') }}" >
    </script>
    </script>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js?v={{ env('CRM_VERSION') }}">
    </script>
    <script type="text/javascript"
        src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js?v={{ env('CRM_VERSION') }}"></script>
    <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js?v={{ env('CRM_VERSION') }}">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js?v={{ env('CRM_VERSION') }}">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js?v={{ env('CRM_VERSION') }}"
        integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <script src="{{ asset('backend') }}/lead-management/js/customer-detail.js?v={{ env('CRM_VERSION') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js?v={{ env('CRM_VERSION') }}">
    </script>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js?v={{ env('CRM_VERSION') }}">
    </script>
    <script type="text/javascript"
        src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js?v={{ env('CRM_VERSION') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $(document).ready(function() {
            get_classes();
        });
    </script>
    <script>
        function get_classes() {
            $('.loader_div').show();
            $('#form_table_show').hide();
            var listItem = $('.page-item.active');
            var valueAttribute = listItem.attr('value');
            
            // $('.loader_overlay_new').show();
            $('#search_show').hide();
            $('#loader_show').show();

            var form = document.getElementById('formSubmit');

            if (!form) {
                console.error("Form element with ID 'formSubmit' not found.");
                return;
            }

            var formData = new FormData();

            // Process input elements
            var inputs = form.querySelectorAll('input[name]');
            inputs.forEach(function(input) {
                formData.append(input.name, input.value);
            });

            // Process select elements
            var selects = form.querySelectorAll('select[name]');
            selects.forEach(function(select) {
                var selectedOptions = Array.from(select.selectedOptions).map(option => option.value);
                formData.append(select.name, selectedOptions);
            });

            formData.append("_method", "post");

            $.ajax({
                type: 'POST',
                url: "{{ route('DemoClass.get_data') }}",
                data: formData,
                cache: false,
                processData: false,
                contentType: false,
                success: function(res) {
                    // $('.loader_overlay_new').hide();
                    $('#loader_div').hide();
                    $('#count_show').html(res.count);
                    $('#search_show').show();
                    $('.loader_div').hide();
                    $('#loader_show').hide();
                    
                    $('#form_table_show').show();

                    document.getElementById('form_table_show').innerHTML = res.code;

                    if (res.any_filter_exist == 1) {
                        document.getElementById('order_filter_close_btn').style.display = "inline-block";
                    } else {
                        document.getElementById('order_filter_close_btn').style.display = "none";
                    }
                },
                error: function(xhr, status, error) {
                    // $('.loader_overlay_new').hide();
                    console.error("Error in AJAX request:", status, error);
                }
            });
        }




        $("#formSubmit").submit(function(e) {
            e.preventDefault();
        });

    

        function handlePageClick(pageValue, totalPages) {
            console.log("Clicked on page:", pageValue);
            var paginationList = document.getElementById('paginationList');
            var currentActiveLi = paginationList.querySelector('.active');
            var allLiElements = paginationList.getElementsByTagName('LI');
            for (var i = 0; i < allLiElements.length; i++) {
                allLiElements[i].classList.remove('active');
            }
            if (pageValue === "Next" && currentActiveLi && currentActiveLi.nextElementSibling) {
                currentActiveLi.nextElementSibling.classList.add('active');
                if (currentActiveLi) {
                    var pageValue = currentActiveLi.getAttribute('value');

                    if (pageValue !== null) {
                        console.log("Value attribute:", pageValue);
                    } else {
                        console.log("Value attribute is null");
                    }
                    pageValue = pageValue.slice(1, -1);;

                    pageValue++;
                } else {
                    console.log("No element with class 'active' found");
                }
            } else if (pageValue === "Previous" && currentActiveLi && currentActiveLi.previousElementSibling) {
                currentActiveLi.previousElementSibling.classList.add('active');
                if (currentActiveLi) {
                    var pageValue = currentActiveLi.getAttribute('value');

                    if (pageValue !== null) {
                        console.log("Value attribute:", pageValue);
                    } else {
                        console.log("Value attribute is null");
                    }
                    pageValue = pageValue.slice(1, -1);;

                    pageValue--;
                } else {
                    console.log("No element with class 'active' found");
                }
            } else {
               
                if(pageValue != null){
                    var clickedLi = document.querySelector(`#paginationList li:nth-child(${pageValue})`);
                    if (clickedLi) {
                        clickedLi.classList.add('active');
                    }
                }
                
            }
            document.getElementById('page').value = pageValue;
            get_classes();
        }

        function select_filter(type, id, currency_type) {

            var form = document.getElementById('formSubmit');
            if (form) {
                for (var i = 0; i < form.elements.length; i++) {
                    var element = form.elements[i];

                    // Check if the element is a select dropdown
                    if (element.tagName === 'SELECT') {
                        // Reset the select element to its default value
                        element.selectedIndex = 0;
                    } else {
                        // For other input elements, reset their values to empty
                        element.value = '';
                    }
                }
            } else {
                console.error('Form element with ID "formSubmit" not found.');
            }

            var date = $('#received_date_summary').val();
            $('#received_date').val(date);

            var admin_id = $('#CreatedByNew').val();
            $('#CreatedBy').val(admin_id).trigger('change');


            $('#status').val("").trigger('change');
            $('#candidate_id').val("").trigger('change');

            if (type === "Order Created By") {
                if (id !== null) {
                    $('#CreatedBy').val(id).trigger('change');
                } else {
                    $('#CreatedBy').val("").trigger('change');
                }
            } else if (type === "Order Status") {
                if (id !== null) {
                    $('#status').val(id).trigger('change');
                } else {
                    $('#status').val("").trigger('change');
                }
            } else if (type === "Plan Order") {
                if (id !== null) {

                    $('#plan_category').val(id).trigger('change');
                } else {
                    $('#plan_category').val("").trigger('change');
                }
            } else if (type === "Order According Price") {
                if (id !== null) {
                    $('#payment_filter_min').val(id);
                    $('#payment_filter_max').val(id);
                    $('#currency_type').val(currency_type).trigger('change');
                } else {
                    $('#payment_filter_min').val("");
                    $('#payment_filter_max').val("");
                    $('#currency_type').val("").trigger('change');
                }
            }
            get_classes();
        }
    </script>
    <script>
        function change_class_status(class_id ,page) {
            
            // $(".overlay").show();
            // $(".upload-loader").show();
            var status = 0;
            
            var user_id = user_id;
            $.ajax({
                    type: "post",
                    url: "{{ route('DemoClass.change_class_status') }}",
                    data: {
                        'user_id': user_id,
                        'class_id': class_id,
                    },
                    success: function(res) {
                        // $(".overlay").show();
                        $('#demo_class_popup').html(res);
                        // $(".upload-loader").hide();

                        if (res.status == 1) {
                            toastr.success(res.message);
                            if (!page) {
                                page = 1;
                            }
                            handlePageClick(page,{{ @$totalPages }});
                        } else if (res.status == 2) {
                            toastr.error(res.message);
                            if (!page) {
                                page = 1;
                            }
                            handlePageClick(page,{{ @$totalPages }});
                        }
    
                    }
                })
                .fail(function(jqXHR, textStatus, errorThrown) {
                    // Function to execute when the request fails
                    var code = textStatus + ' ' + errorThrown;
                    toastr.error(code);
                });
        }

        @if (session('toaster_type') == 'toast_success')
           toastr.success('{{ session('message') }}');
           {{ session()->forget('toaster_type') }}
       @elseif (session('toaster_type') == 'toast_info')
           toastr.info('{{ session('message') }}');
           {{ session()->forget('toaster_type') }}
       @elseif (session('toaster_type') == 'toast_error')
           toastr.error('{{ session('message') }}');
           {{ session()->forget('toaster_type') }}
       @endif
    </script>
@endsection