@extends('backend.layouts.app')

@section('content')
    <div class="aiz-titlebar text-left mt-2 mb-3 ">
        <div class="row align-items-center">
            <div class="col-sm-6 col-md-6 col-lg-6">
                <h1 class="h3">{{ translate('Product Applications List') }}</h1>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6 text-md-right d-flex align-items-center" id="add_modal">
                {{-- <form action="{{ url('admin/category/import/product_applications') }}" method="POST"
                    enctype="multipart/form-data" onsubmit="return validateForm()">
                    @csrf
                    <input type="file" name="file"
                        accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" id="fileInput" />
                    <button type="submit" id="submit"><span class="btn-text">Import</span></button>
                </form>

                <a href="{{ asset('/public/sampleExcel/product_application_sample_data.xlsx') }}" download>Sample Excel</a> --}}
                <a href="javascript:void(0);" class="add-items-btn ml-auto" data-toggle="modal"
                    data-target="#addPost-modal"><span><i class="icons icon-plus"></i></span>Add Product Application</a>
            </div>
        </div>
    </div>

    <div class=" m-0 ml-1 py-3 " style="border-top:1px solid #d2d2d2 ">
        {{-- <div class="d-flex align-items-start flex-column justify-content-start">
            <label for="">Add Product Application using xlsx/csv file</label>
            <div class="d-flex align-items-start" style="gap:12px">
                <form action="{{ url('admin/category/import/product_applications') }}" method="POST"
                    enctype="multipart/form-data" onsubmit="return validateForm()">
                    @csrf
                    <input type="file" name="file"
                        accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" id="fileInput"
                        style="border:1px solid #d2d2d2;background-color:#fff;border-radius:4px;padding-right:6px" />
                    <button type="submit" id="submit"
                        style="border:1px solid #d7282f;color:#fff;background-color:#fff;padding:4px 8px;border-radius:4px;background-color:#d7282f;">
                        <i class="fa-solid fa-file-import"></i> Import
                    </button>
                </form>
                <a href="{{ asset('/public/sampleExcel/product_application_sample_data.xlsx') }}" download
                    style="border:1px solid #d7282f;color:#d7282f;background-color:#fff;padding:4px 8px;border-radius:4px;">
                    <i class="icons icon-download-1"></i> Download Excel File
                </a>
            </div>
        </div> --}}
        <div class="headerResponsive">
            <div class="selected-prod" style="padding:0 14px;border-left:1px solid #d2d2d2;">Selected Lists (<span
                    id="sProduct">0</span>)
                <div class="delete-select" id="deletedData"
                    style="display:none;padding:0 14px;border-left:1px solid #d2d2d2;margin:0px 14px;">
                    <a href="javascript:void(0);" id="delete_records">Delete Selected <i class="icons icon-delete"></i></a>
                </div>
            </div>
            <div class="productSearch searchnadcolumnbox d-flex">
                <div class="form-group mb-0 position-relative">
                    <i class="icons icon-search-s" id="memberSearch"></i>
                    <input type="text" class="form-control form-control-sm" id="search" name="search"
                        @isset($sort_search) value="{{ $sort_search }}" @endisset placeholder="Search">
                </div>
                <div class="mt-2">
                    <a href="javascript:void(0);" class="filter-link" data-toggle="modal" id="filterButton"
                        data-target="#filterFlyout">
                        <i class="icons icon-filter"></i>Filters
                    </a>
                </div>

            </div>

        </div>
    </div>

    <div class="admin-table table-freezed " id="table_list">
        <div class="loader_main"
            style="  position: relative;
    top: 50%;
    left: 40%;
    transform: translate(50%, 50%);
    width: 100px;
    height:50vh;
    text-align: center;">
            <img width="100" src="{{ url('public/assets/img/ZKZg.gif') }}">
        </div>
    </div>
    <div class="modal right fade filterFlyout" id="filterFlyout" tabindex="-1" role="dialog"
        aria-labelledby="myModalLabel2" aria-hidden="true" style="height:40vh !important; display:none;">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel2">User Search Filter</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body c-scrollbar">
                    <form class="step_form" id="sort_sellers" action="{{ url('admin/category/product_application_table') }}"
                        method="GET">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="field">
                                    <div class="field-in">
                                        <label class="field_label focus-in">Product Application</label>
                                        <input type="text" class="form-control search_name" name="product_application"
                                            @isset($sort_search) value="{{ $sort_search }}" @endisset
                                            placeholder="Type product application name">
                                    </div>
                                </div>
                            </div>

                      
                            <div class="col-md-6">
                                <div class="field">
                                    <div class="field-in">
                                        <label class="field_label focus-in">Type</label>
                                        <input type="text" class="form-control search_name" name="type"
                                            @isset($sort_search) value="{{ $sort_search }}" @endisset
                                            placeholder="Type">
                                    </div>
                                </div>
                            </div>


                            <div class="col-md-6">
                                <div class="field">
                                    <div class="field-in">
                                        <label class="field_label focus-in">Status</label>
                                        <input type="text" class="form-control search_name" name="status"
                                            @isset($sort_search) value="{{ $sort_search }}" @endisset
                                            placeholder="Type status">
                                    </div>
                                </div>
                            </div>


                            <!-- Date of Creation -->
                            <div class="col-md-6">
                                <div class="field">
                                    <div class="field-in">
                                        <label class="field_label focus-in">Date of Creation</label>
                                        <input type="text" class="aiz-date-range form-control" name="date"
                                            value="" placeholder="Filter by date & time"
                                            data-format="DD-MM-Y HH:mm:ss" data-separator=" to "
                                            data-advanced-range="true" autocomplete="off">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>

                <!-- Modal Footer -->
                <div class="modal-footer">
                    <input type="button" class="btn btn-outline-secondary btn-sm" id="resetFilter" value="Reset"
                        aria-label="Reset">
                    <input type="button" class="btn btn-outline-secondary btn-sm" value="Cancel" data-dismiss="modal"
                        aria-label="Close">
                    <input type="button" class="btn btn-primary btn-sm searchFilter" id="searchFilters" value="Search" name="search">
                </div>
            </div>
        </div>
    </div>
@endsection

@section('modal')
    <!-- Delete Modal -->
    @include('modals.delete_modal')

    <div class="modal right fade addPost-modal" data-refresh="true" id="addPost-modal" role="dialog">
        <div class="modal-dialog" id="modals_datas" style="min-width:800px">

        </div>
    </div>
@endsection

@section('script')
    <script type="text/javascript">
        $(document).ready(function() {
            var urls = "{{ url('admin/category/product_application_table') }}"
            localStorage.setItem('paginationURL', urls);
            data_index(urls);

            $(document).on('click', '#filterButton', function() {
                $('#filterFlyout').modal('show');
            });

            $(document).on('click', '.searchFilter', function() {
                $('#filterFlyout').modal('hide');
                // var url = $('#sort_sellers').attr('action');
                // var formData = $('#sort_sellers').serialize();
                // var tab = $(".admin-list-table a").data('tab');
                // data_List(formData, url);
            });

            $(document).on('click', '#resetFilter', function() {
                $('#sort_sellers')[0].reset();
            });

            function dataList() {
                $.ajax({
                    url: "{{ route('category.add_product_application') }}",
                    type: 'GET',
                    cache: false,
                    success: function(data) {
                        $("#modals_datas").html(data);
                        $('.select2me').select2({
                            tags: true,
                            maximumSelectionLength: 10,
                            createTag: function(params) {
                                var term = $.trim(params.term);
                                if (term === '') {
                                    return null;
                                }
                                return {
                                    id: term,
                                    text: term,
                                    newTag: true
                                };
                            },
                            tokenSeparators: [',', '\n'],
                            placeholder: function() {
                                return $(this).data('placeholder');
                            },
                            language: {
                                noResults: function() {
                                    return "No Options";
                                }
                            }
                        });
                        AIZ.plugins.textEditor();
                        AIZ.plugins.tagify();
                    }
                });
            }

            function data_index(url, data) {
                $.ajax({
                    url: url,
                    data: data,
                    type: 'GET',
                    success: function(data) {
                        $("#table_list").html(data);
                    }
                });
            }

            $(document).on('click', 'a.page-link', function(event) {
                event.preventDefault();
                var url = $(this).attr('href');
                localStorage.setItem('paginationURL', url);
                $.ajax({
                    url: url,
                    cache: false,
                    success: function(html) {
                        $("#table_list").html(html);
                    }
                });
                $('#sProduct').text('0');
                $('#deletedData').hide();
                $('#restoreData').hide();
            });

            function loadStoredPagination() {
                var storedURL = localStorage.getItem('paginationURL');

                if (storedURL) {
                    $.ajax({
                        url: storedURL,
                        cache: false,
                        success: function(data) {
                            $("#table_list").html(data);
                        }
                    });
                }
            }

            // function fetchDataAndRenderRows() {
            //     $.ajax({
            //         type: 'GET',
            //         url: "{{ url('admin/category/product_application_table') }}",
            //         success: function(response) {
            //             $('#mytable tbody').html(response);
            //         },
            //         error: function(xhr, status, error) {
            //             console.error(xhr.responseText);
            //         }
            //     });
            // }

            $(document).on('click', '#add_modal', function(event) {
                dataList();

            });

            $(document).on('click', '#saveUnit', function(event) {
                event.preventDefault();
                var formData = new FormData($("#addFormData")[0]);
                let action = $(this).closest('.modal-content').find('form').attr('action');
                $("#errorname").css("display", "none").text('');
                // $("#errorkeywords").css("display", "none").text(''); 
                $.ajax({
                    method: "POST",
                    url: action,
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function(data) {
                        if (data.errors) {
                            $("#errorname").css("display", "block").text(data.errors.name);
                            // $("#errorkeywords").css("display", "block").text(data.errors.keywords); 
                        } else {
                            AIZ.plugins.notify('success',
                                'Product Application created successfully');
                            $('#addPost-modal').modal('hide');
                            var urls = "{{ url('admin/category/product_application_table') }}"
                            data_index(urls);
                        }
                    },
                    error: function(error) {
                        debugger;
                        if(error.responseJSON.errors){
                            $("#errorname").css("display", "block").text(error.responseJSON.errors.name);
                            // $("#errordescription").css("display", "block").text(error.responseJSON.errors.name);
                            // $("#errorkeywords").css("display", "block").text(error.responseJSON.errors.keywords+" "+ error.responseJSON.errors.ratings);
                            let errors = error.responseJSON.errors;
                            let message = "";
                            Object.keys(errors).forEach(function (key) {
                                 if (key.startsWith("keywords") || key.startsWith("ratings")) {
                                    message += errors[key][0] + "<br>";
                                }
                            });
                            if (message !== "") {
                                $("#errorkeywords")
                                    .show()
                                    .html(message);
                            }
                        }
                    },
                });
            });

            $(document).on('input', '.form-control', function() {
                $(this).closest('.error-text').find('.error_class_category').hide();
            });

            function edit_application(url) {
                $.ajax({
                    url: url,
                    success: function(data) {
                        $("#modals_datas").html(data);
                        $('.select2me').select2({
                            tags: true,
                            maximumSelectionLength: 10,
                            createTag: function(params) {
                                var term = $.trim(params.term);
                                if (term === '') {
                                    return null;
                                }
                                return {
                                    id: term,
                                    text: term,
                                    newTag: true
                                };
                            },
                            tokenSeparators: [',', '\n'],
                            placeholder: function() {
                                $(this).data('placeholder');
                            }
                        });
                        AIZ.plugins.textEditor();
                        AIZ.plugins.tagify();
                    }
                });
            }

            $(document).on('click', '#edit_application', function(event) {
                let id = $(this).data('id');
                var url = "{{ url('/admin/category/edit_product_application/') }}" + "/" + id + "?lang=" +
                    "{{ env('DEFAULT_LANGUAGE') }}";
                edit_application(url);
            });

            $(document).on('click', '#update_application', function() {
                var formData = new FormData($("#update_form")[0]);
                let action = $(this).closest('.modal-content').find('form').attr('action');
                $("#errorname1").css("display", "none").text('');

                $.ajax({
                    method: "POST",
                    url: action,
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function(data) {
                        if (data.errors) {
                            $("#errorname1").css("display", "block").text(data.errors.name);
                        } else {
                            AIZ.plugins.notify('success',
                                'Product Application updated successfully');
                            $('#addPost-modal').modal('hide');
                            var urls = "{{ url('admin/category/product_application_table') }}";
                            data_index(urls);
                        }
                    }
                });
            });

            // =============single delete=====================

            $(document).on('click', '.confirm-delete', function(e) {
                e.preventDefault();
                var url = $(this).data('href');
                var checkThis = $(this);
                var trToDelete = $(this).closest('tr');
                var deleteModal = $('#delete-modal');
                deleteModal.modal({
                    backdrop: 'static',
                    keyboard: false
                });
                $('#delete-link').one('click', function(e) {
                    var storedURL = localStorage.getItem('paginationURL');
                    var requestURL = storedURL && storedURL.trim() !== "" ? storedURL :
                    '{{ url('admin/category/product_application_table') }}';
                    

                    $.ajax({
                        url: url,
                        type: "GET",
                        success: function(obj) {
                            $('#delete-modal').modal('hide');
                            AIZ.plugins.notify('success',
                                'Product Application deleted successfully');


                            data_index(requestURL);
                            trToDelete.remove();
                        }
                    });
                });
            });

            $('#delete-modal').on('hidden.bs.modal', function() {
                $(this).find('#delete-link').off('click');
            });

            // =============multi delete=====================

            $(document).on('click', '#checkAll', function() {
                $("#sProduct").text("0");
                if ($(this).is(":checked")) {
                    $("#deletedData").css("display", "block");
                    $("#restoreData").css("display", "block");
                    $(this).closest('table').find('#searchPage tr').addClass('active');
                } else {
                    $("#deletedData").css("display", "none");
                    $("#restoreData").css("display", "none");
                    $(this).closest('table').find('#searchPage tr').removeClass('active');
                }
                $(".product_checkbox").prop("checked", this.checked);
                $("#select_count").html($("input.product_checkbox:checked").length + " Selected");

            });

            $(document).on('click', '.product_checkbox,#checkAll', function() {
                if ($(this).is(':checked')) {
                    $(this).closest('tr').addClass('active');
                } else {
                    $(this).closest('tr').removeClass('active');
                }
                if ($('.product_checkbox:checked').length == $('.product_checkbox').length) {
                    $('#checkAll').prop('checked', true);
                    $("#deletedData").css("display", "block");
                    $("#restoreData").css("display", "block");

                } else {
                    if ($('.product_checkbox:checked').length == "0") {
                        $("#deletedData").css("display", "none");
                        $("#restoreData").css("display", "none");
                    } else {
                        $("#deletedData").css("display", "block");
                        $("#restoreData").css("display", "block");
                    }
                    $('#checkAll').prop('checked', false);
                }
                $("#sProduct").text($("input.product_checkbox:checked").length);
            });

            $(document).on('click', '#delete_records', function() {
                var row = $(this).closest('tr');
                var deleteModal = $('#delete-modal');
                var products = [];
                $(".product_checkbox:checked").each(function() {
                    products.push($(this).val());
                });

                if (products.length <= 0) {
                    alert("Please select records.");
                } else {
                    var selected_values = products.join(",");
                    deleteModal.modal({
                        backdrop: 'static',
                        keyboard: false
                    });

                    $('#delete-link').one('click', function(e) {
                        $.ajax({
                            type: "POST",
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            url: "{{ url('/admin/category/multi_delete') }}",
                            cache: false,
                            data: 'emp_id=' + selected_values,
                            success: function(response) {
                                var emp_ids = response.data.split(",");
                                for (var i = 0; i < emp_ids.length; i++) {
                                    $("#" + emp_ids[i]).closest("tr").remove();
                                }
                                $("#sProduct").text("0");
                                if (emp_ids.length > 0) {
                                    AIZ.plugins.notify('success',
                                        'Product Application Deleted successfully');
                                    var urls =
                                        "{{ url('admin/category/product_application_table') }}";
                                    data_index(urls);
                                } else {
                                    AIZ.plugins.notify('success',
                                        'Product Application Not Deleted successfully'
                                    );
                                }
                                $('#delete-modal').modal('hide');
                                $("#deletedData").hide();
                            }
                        });
                    });
                }
            });

            ///////////////////////////////// Searching

            $(document).on("keypress", "input[name='search']", function(event) {
            if (event.keyCode == 13) {
                var searchTerm = $(this).val();
                var productApplication = $("input[name='product_application']").val();
                var type = $("input[name='type']").val();
                var status = $("input[name='status']").val();
                var dateRange = $("input[name='date']").val();

                productSearchAjax(searchTerm, productApplication, type, status, dateRange);
            }
        });

        $(document).on("click", "#searchFilters, #memberSearch", function(event) {
            var searchTerm = $("input[name='search']").val();
            var productApplication = $("input[name='product_application']").val();
            var type = $("input[name='type']").val();
            var status = $("input[name='status']").val();
            var dateRange = $("input[name='date']").val();

            productSearchAjax(searchTerm, productApplication, type, status, dateRange);
        });


            var typingTimer;
            var doneTypingInterval = 1000;

            function productSearchAjax(searchTerm, productApplication, type, status, dateRange) {
            var urls = "{{ url('admin/category/product_application_table') }}";

            var data = {
                'search': searchTerm,
                'product_application': productApplication,
                'type': type,
                'status': status,
                'date': dateRange
            };

            data_index(urls, data);
        }
        });

        // function disableButton() {
        //   var button = document.getElementById("submitaddPost-modal"");
        //   button.disabled = true;
        //   button.querySelector(".btn-text").innerHTML = "wait...";
        // }

        function disableButton() {
            var button = document.getElementById("submit");
            button.disabled = true;
            button.querySelector(".btn-text").innerHTML = "wait...";
        }

        function validateForm() {
            var fileInput = document.getElementById("fileInput");
            if (fileInput.files.length === 0) {
                AIZ.plugins.notify('danger', 'Please select a file');
                return false;
            }
            disableButton();
            return true;
        }

        ////// Keywords with rating
        let removedKeywordIds = [];
        $(document).on('click', '.remove-keyword-rating', function() {
            let masterId = $(this).closest('.keyword-rating-pair').find('input[name="master_id[]"]').val();

            if (masterId) {
                removedKeywordIds.push(masterId);
            }

            $(this).closest('.keyword-rating-pair').remove();
            $('#removed_keyword_ids').val(removedKeywordIds.join(','));

            updateButtons(); //temp
        });


        //ADD BUTTON
        /*
                $(document).on('click', '.add-keyword-rating', function() {
                   
                    let newPair = $('.keyword-rating-pair:first').clone(true); 
                    var a =  $('.keyword-rating-pair:first').length;
                    newPair.find('input').val(''); 
                    newPair.find('.remove-keyword-rating').remove();
                    newPair.find('.add-keyword-rating').remove(); 
                    newPair.find('.input-group-append').append('<button class="btn btn-danger remove-keyword-rating" type="button">Remove</button>');
         
                    $('#keywords-container').append(newPair);
                }); 
                */

        // Add keyword-rating pair
        $(document).on('click', '.add-keyword-rating', function() {
            let newPair = $('.keyword-rating-pair:first').clone(true);
            newPair.find('input').val('');
            newPair.find('.input-group-append').empty();
            newPair.find('.input-group-append').append(`
                <button class="btn btn-danger remove-keyword-rating" type="button">Remove</button>
            `);
            $('#keywords-container').append(newPair);

            updateButtons(); //temp
        });

        // Function to update the buttons: add "Add" only to the last pair
        function updateButtons() {
            let pairs = $('.keyword-rating-pair');

            pairs.each(function(index) {
                $(this).find('.input-group-append').empty(); // Clear buttons first

                if (pairs.length === 1) {
                    // If only one pair is left, only show the "Add" button
                    $(this).find('.input-group-append').append(`
                        <button class="btn AddMore add-keyword-rating" type="button">Add More</button>
                    `);
                } else if (index === pairs.length - 1) {
                    // If it's the last pair, show both "Add" and "Remove" buttons
                    $(this).find('.input-group-append').append(`
                    <button class="btn RemoveBTN remove-keyword-rating" type="button">Remove</button>
                    <button class="btn AddMore add-keyword-rating" type="button">Add More</button>
                    `);
                } else {
                    // All other pairs should only have "Remove"
                    $(this).find('.input-group-append').append(`
                        <button class="btn RemoveBTN remove-keyword-rating" type="button">Remove</button>
                    `);
                }
            });
        }
        updateButtons(); //temp
    </script>
@endsection