@extends('admin.layouts.leadManagement')
@section('title')
    {{ __('Index') }}
@endsection

@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/customer-detail.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') }}" />
    <style>
        .select2-container .select2-selection--single .select2-selection__rendered {
            display: block;
            padding-left: 8px;
            padding-right: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding-top: 7px;

            height: 38px;
            border: 1px solid #ced4da;
            border-radius: 3px;
        }
    </style>
@endsection

@section('content')




    <div class="row mt-3" style="width: 90%; justify-content: center; margin: auto; margin-top:20px;">
        <div class="col-md-12">

            {{-- <div class="card">
                <div class="card-header" data-toggle="collapse" data-target="#demo" style="cursor: pointer">
                    <div class="" style="">
                        <h3 class="card-title" style="    margin-top: 5px;">Order Summary</h3>
                    </div>
                    <button class="btn btn-link float-end" type="button" data-toggle="collapse" data-target="#demo" aria-expanded="true" aria-controls="demo">
                        <i class="fas fa-chevron-down"></i>
                    </button>
                </div>
                <div id="demo" class="collapse">
                    <form id="get_summary_form">
                        <div class="row p-1 mt-2 mx-2">
                            <div class="col-md-4 col-lg-2 dropdown">
                                
                                <input type="text" id="received_date_summary" name="received_date" value="{{ request('created_at') }}"
                                    class="form-control" autocomplete="off" id="my_txtbox" placeholder="Date Range" readonly />
                                <x-forms.error name="received_date" />
                            </div>

                            <div class="col-md-4 col-lg-2 dropdown">
                                <select name="created_by" class="form-control " id="CreatedByNew">
                                    <option value="" >
                                         Select Admin 
                                    </option>
                                    @foreach($admins as $admin)
                                        <option value="{{@$admin['id']}}" >{{@$admin['name']}} ({{@$admin['id']}})  </option>
                                    @endforeach
                                </select>
                            </div>
    
    
                           
                            <div class="" style="    margin-top: -40px;
                            padding-right: 8px;">
                                <p type="submit" onclick="get_slot_summary()" id="search_show_new" class="btn btn-primary float-right"><i
                                        class="fas fa-search"></i>
                                    {{ __('search') }}</p>
                                
                                <p class="btn btn-primary float-right" id="loader_show_new" style="    
                                height: 38px; display:none;">
                                <span style="position: relative;
                                top: -10px;">Loading Data</span>
                                    <span class="spinner-border " role="status" style="position:relative; top: -3px;
                                        left: 5px; color:white; ">
                                            
                                    </span>
                                </p>
                                <a href="{{ route('order.index') }}" id="order_filter_close_btn_summary"
                                    style="display: :none; height: 38px;
                                padding-top: 10px;"class="mr-1 float-right btn btn-danger align-items-center justify-content-center"><i
                                        class="fas fa-times"></i></a>
    
    
                            </div>
    
    
                        </div>
                        <div id="sammary_data">
                        </div>
    
                    </form>
                </div>
                
            </div> --}}

            <div class="card">
                <div class="card-header row m-0">
                    <h3 class="card-title col-sm-12 col-md-6">slot 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('slot.create'))
                            <a href="{{ route('slot.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 dropdown">
                           
                            <input type="text" id="created_at" name="created_at" value="{{ request('created_at') }}"
                                class="form-control" autocomplete="off" id="my_txtbox" placeholder="Date Range" readonly />
                            <x-forms.error name="created_at" />
                        </div>

                        
                        <div class="col-md-4 col-lg-2  mt-2 dropdown">
                            <input type="text" id="received_date" name="received_date"
                                value="{{ request('received_date') }}" class="form-control" autocomplete="off"
                                id="my_txtbox" placeholder="Received Date Range" readonly />
                            <x-forms.error name="received_date" />
                        </div>

                        <div class="col-md-4 col-lg-2  mt-2 dropdown">
                            <select name="candidate_id" id="candidate_id" class="form-control select2candidate">
                                <option value="">Select Candidate</option>
                            </select>
                        </div>

                        <div class="col-md-4 col-lg-2  mt-2 dropdown">
                            <select name="status" class="form-control " id="status">
                                <option value="" >
                                     Status
                                </option>
                                <option value="All" {{ request('status') == 'All' ? 'selected' : '' }}>All</option>
                                <option value="paid" {{ request('status') == 'paid' ? 'selected' : '' }}>Paid</option>
                                <option value="unpaid" {{ request('status') == 'unpaid' ? 'selected' : '' }}>Unpaid</option>
                            </select>
                        </div> --}}
                        {{-- <div class="col-md-4 col-lg-2  mt-2 dropdown">
                            <select name="created_by" class="form-control " id="CreatedBy">
                                <option value="" >
                                     Select Admin 
                                </option>
                                @foreach($admins as $admin)
                                    <option value="{{@$admin['id']}}" >{{@$admin['name']}} ({{@$admin['id']}})  </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4 col-lg-2  mt-2 dropdown">
                            <select name="plan" class="form-control " id="plan">
                                <option value="" >
                                     Plan 
                                </option>
                                @foreach($plans as $plan)
                                    <option value="{{@$plan['id']}}" >{{@$plan['title']}} ({{@$plan['id']}})  </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4 col-lg-2  mt-2 dropdown">
                            <select name="plan_category" class="form-control " id="plan_category">
                                <option value="" >
                                    Plan Category
                                </option>
                                @foreach($plan_categories as $plan_category)
                                    <option value="{{@$plan_category['id']}}" >{{@$plan_category['name']}} ({{@$plan_category['id']}})  </option>
                                @endforeach
                            </select>
                        </div>
                        --}}
                        {{-- <div class="col-md-4 col-lg-2  mt-2 dropdown d-flex">
                            <div class="col-md-4  dropdown">
                                <select name="currency_type" class="form-control " id="currency_type">
                                    <option value="" >
                                        Currency Type
                                    </option>
                                    @foreach($currencyType as $currency)
                                        <option value="{{@$currency}}" >{{@$currency}}</option>
                                    @endforeach
                                </select>
                            </div> 
                            <div class="col-md-4  dropdown">
                                <input type="text" @if (request('payment_filter_min')) value="{{ request('payment_filter_min') }}" @endif
                                    id="payment_filter_min" onchange="payment_filter()" class="form-control mr-2" placeholder="Min Amount" name="payment_filter_min"
                                    aria-label="">
                            </div>
                            <div class="col-md-4  dropdown">
                                <input type="text" @if (request('payment_filter_max')) value="{{ request('payment_filter_max') }}" @endif
                                    id="payment_filter_max" class="form-control mr-2" placeholder="Max Amount" name="payment_filter_max"
                                    aria-label="" onchange="payment_filter()">
                            </div>
                            
                        </div> --}}
                        



                        <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('slot.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_slot()" 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 id="form_table_show">
    
                    </div>
                </form>
                

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

@section('script')
@if(Session::has('toast_success'))
    <script>
        toastr.success('{{ Session::get('toast_success') }}');
    </script>
@endif

@if(Session::has('toast_info'))
    <script>
        toastr.info('{{ Session::get('toast_info') }}');
    </script>
@endif

@if(Session::has('toast_error'))
    <script>
        toastr.error('{{ Session::get('toast_error') }}');
    </script>
@endif
@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>
        $(document).ready(function() {
            get_slot();
        });
        // $(document).ready(function() {

        //     // var candidateId = '{{ request('candidate_id') }}';

            

        //     // $('.select2candidate').select2({
        //     //     theme: 'bootstrap4',
        //     //     ajax: {
        //     //         url: '{{ route('order.searchCandidate') }}',
        //     //         dataType: 'json',
        //     //         type: "GET",
        //     //         quietMillis: 50,
        //     //         data: function(term) {
        //     //             console.log('item', term);
        //     //             return {
        //     //                 term: term,
        //     //             };
        //     //         },
        //     //         processResults: function(data) {
        //     //             console.log('data', data)
        //     //             return {
        //     //                 results: $.map(data, function(item) {
        //     //                     return {
        //     //                         id: item.id,
        //     //                         text: `${item.name} (${item.user_id})`
        //     //                     }
        //     //                 })
        //     //             };
        //     //         }
        //     //     }
        //     // });

        //     // if (candidateId) {
        //     //     $.ajax({
        //     //         url: '{{ route('order.searchCandidate') }}',
        //     //         type: "GET",
        //     //         dataType: 'json',
        //     //         data: {
        //     //             id: candidateId,
        //     //             _token: '{{ csrf_token() }}'
        //     //         },
        //     //         success: function(item) {
        //     //             console.log(item);
        //     //             $('.select2candidate').append(new Option(`${item.name} (${item.id})`, item.id,
        //     //                 true, true)).trigger('change');
        //     //         }
        //     //     });
        //     // }

        //     // $('.select2bs4').select2({
        //     //     theme: 'bootstrap4',
        //     //     minimumResultsForSearch: 8,
        //     // })


        // });

        // 



       
    </script>
  

   <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js?v={{env('CRM_VERSION')}}"></script>
   <script>
       @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





<script>
    
    function get_slot() {
        // $('.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('slot.get_data') }}",
            data: formData,
            cache: false,
            processData: false,
            contentType: false,
            success: function(res) {
                // $('.loader_overlay_new').hide();
                $('#search_show').show();
                $('#loader_show').hide();
                
                console.log(res.count);
                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";
                }
                // $('#form_table_show').html(res.code);
                $('#count_show').html(res.count);
            },
            error: function(xhr, status, error) {
                // $('.loader_overlay_new').hide();
                console.error("Error in AJAX request:", status, error);
            }
        });
    }


    function handlePageClick(pageValue, totalPages) {
        // Your logic for handling the page click goes here
        console.log("Clicked on page:", pageValue);

        var paginationList = document.getElementById('paginationList');

        // Get the currently active 'LI' element
        var currentActiveLi = paginationList.querySelector('.active');


        // Remove 'active' class from all 'LI' elements
        var allLiElements = paginationList.getElementsByTagName('LI');
        for (var i = 0; i < allLiElements.length; i++) {
            allLiElements[i].classList.remove('active');
        }

        // Handle "Next" and "Previous" logic
        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 {
            // Add 'active' class to the clicked 'LI' element
            var clickedLi = document.querySelector(`#paginationList li:nth-child(${pageValue})`);
            if (clickedLi) {
                clickedLi.classList.add('active');
            }
        }

        // Toggle visibility of "Next" and "Previous" buttons





        // Set the pageValue to the hidden input field
        document.getElementById('page').value = pageValue;

        // Call the get_slot function
        get_slot();
    }

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

    function delete_order(id) {


        let text = "are you sure you want to delete this item";
        if (confirm(text) == true) {


            $('.loader_overlay').show();

            // Creating a new FormData object to hold form data
            var formData = new FormData();

            // Appending order_id to the form data
            formData.append("order_id", id);

            // Appending _method as DELETE to simulate DELETE request
            formData.append("_method", "DELETE");

            $.ajax({
                type: 'delete', // Change type to POST since FormData can't handle DELETE directly
                url: '{{ route('order.delete', ':id') }}'.replace(':id',
                id), // Replace :id in route URL with actual ID
                data: formData,
                cache: false,
                processData: false,
                contentType: false,
                success: function(res) {
                    toastr.success(res.message);
                    get_slot();
                    $('.loader_overlay').hide();
                },
                error: function(xhr, status, error) {
                    $('.loader_overlay').hide();
                    console.error("Error in AJAX request:", status, error);
                    // Check if response contains error message
                    if (xhr.responseJSON && xhr.responseJSON.error) {
                        // Display error message in toaster
                        toastr.error(xhr.responseJSON.error);
                    } else {
                        // Display a generic error message
                        toastr.error("An error occurred while processing your request.");
                    }
                }
            });
        } else {

        }
    }

    function get_slot_summary() {
        // $('.loader_overlay_new').show();
        var date = $('#received_date_summary').val();

        if(!date){
            toastr.error("Enter First Date ");
            return;
        }
        $('#search_show_new').hide();
        $('#loader_show_new').show();
        // $('#order_filter_close_btn_summary').show();
        $('.loader_overlay').show();
        var form = document.getElementById('get_summary_form');

        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('order.getOrderSummary') }}",
            data: formData,
            cache: false,
            processData: false,
            contentType: false,
            success: function(res) {
                // $('.loader_overlay_new').hide();
                $('#search_show_new').show();
                $('#loader_show_new').hide();
              
                $('#sammary_data').html(res.code);
               console.log(res);
            },
            error: function(xhr, status, error) {
                // $('.loader_overlay_new').hide();
                console.error("Error in AJAX request:", status, error);
            }
        });
    }
    

    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_slot();
    }


    function payment_filter() {
        var minInput = document.getElementById('payment_filter_min');
        var maxInput = document.getElementById('payment_filter_max');

        if (minInput.value !== '' && maxInput.value !== '' && parseInt(minInput.value) > parseInt(maxInput.value)) {
            // If min value is greater than max value, set max value equal to min value
            maxInput.value = minInput.value;
        } else if (minInput.value === '' && maxInput.value !== '') {
            // If min value is empty, set min value equal to max value
            minInput.value = maxInput.value;
        }
    }

    
</script>