@extends('backend.layouts.app')

@section('content')
@section('page-css')
    <link href="https://unpkg.com/cropperjs/dist/cropper.css" rel="stylesheet" />
@endsection

@php
    use App\Upload;
    $getAllProfileImage = [];
@endphp

{{-- New Design --}}
<div class="aiz-titlebar text-left mt-2 mb-3">
    <div class="row align-items-center">
        <div class="col-md-6 col-sm-6">
            <h1 class="h3">{{ translate('All Keywords') }}</h1>
        </div>
        <div class="col-md-6 col-sm-6 text-md-right d-flex align-items-center">
            <a href="javascript:void(0);" class="add-items-btn ml-auto clearForm addpopup">
                <span><i class="icons icon-plus"></i></span> Add New Keyword
            </a>
        </div>
    </div>
</div>

<div class="admin-list-table pt-0 border-0">
    <div class="py-3 tableTab-freeze" style="border-top:1px solid #d2d2d2;">
        <div>
            <div class="d-flex align-items-start flex-column justify-content-start">
              {{--    <label for="" style="font-size:14px;font-weight:500;">Import xlsx/csv file</label>
                <div class="d-flex align-items-start" style="gap:12px">
                   <form action="{{ url('keys/importKeywords') }}" 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/sample-keywords-excel.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>
        <div class="headerResponsive mt-3">
            <div class="common-tbl-head m-0 ml-1">
                <div class="common-tbl-heading">{{ translate(' Keyword List') }}</div>
                <div class="selected-prod">Selected Keyword (<span id="sProduct">0</span>)</div>
                <div class="delete-select" id="deletedData" style="display:none"><a href="javascript:void(0);"
                        id="delete_records">Delete Selected <i class="icons icon-delete"></i></a>
                </div>
            </div>
            <div class="table-search searchnadcolumnbox">
                <i class="icons icon-search-s" id="memberSearch"></i>
                <input type="text" class="form-control form-control-sm searching" id="search" name="search"
                    @isset($sort_search) value="{{ $sort_search }}" @endisset
                    placeholder="Search By Name">
            </div>
        </div>
    </div>

    <div class="admin-table table-freezed" id="brandsData">
        <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>
@endsection

@section('modal')
@include('modals.delete_modal')

<!--Specification section End-->
<div class="modal right fade newAttributes-modal" data-refresh="true" id="newAttributes-modal" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header close-btn" style="padding:16px;">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class=""
                    style="border-bottom:1px solid rgba(0,0,0,.1);width:100%;padding:0rem 0 12px 0;font-size:18px;">Add
                    New Keyword</h4>
            </div>
            <div class="modal-body" style="padding:0px 16px 16px 16px">
                @if ($errors->any())
                    <div class="alert alert-danger d-flex align-items-center" role="alert">
                        @foreach ($errors->all() as $error)
                            <i class="icons icon-error-outline"></i> {{ $error }}
                        @endforeach
                    </div>
                @endif

                <form id="myform" enctype="multipart/form-data">
                    @csrf
                    <div class="form-group mb-3 error-text">
                        <label for="name" class="labelstyle">{{ translate('Name') }}<span class="text-danger ml-1">*</span>
                        </label>
                        <input class="form-control" type="text" placeholder="Name" name="name">
                        <span class="error_class_category text-danger errortextstyle" style="margin-top: 1px;display:none;" id="errorname"></span>
                    </div>
                    <div class="form-group mb-3 error-text">
                        <label for="name" class="labelstyle">{{ translate('Volume') }}<span class="text-danger ml-1">*</span>
                        </label>
                        <input class="form-control" type="number" placeholder="0" name="volume">
                        <span class="error_class_category text-danger errortextstyle" style="margin-top: 1px;display:none;" id="errorvol"></span>
                    </div>
                    <div class="form-group mb-3 error-text">
                        <label for="name" class="labelstyle">{{ translate('Rank') }}<span class="text-danger ml-1">*</span>
                        </label>
                        <input class="form-control" type="number" placeholder="100" name="rank">
                        <span class="error_class_category text-danger errortextstyle" style="margin-top: 1px;display:none;" id="errorrank"></span>
                    </div>
                    <div class="form-group mb-3 error-text">
                        <label for="name" class="labelstyle">{{ translate('Key Number') }}<span class="text-danger ml-1">*</span>
                        </label>
                        <input class="form-control" type="number" placeholder="100" name="keyword_no">
                        <span class="error_class_category text-danger errortextstyle" style="margin-top: 1px;display:none;" id="errorkey"></span>
                    </div>
                    <div class="form-group mb-3 error-text">
                        <label for="name" class="labelstyle">{{ translate('Average Kd') }}<span class="text-danger ml-1">*</span>
                        </label>
                        <input class="form-control" type="number" placeholder="100" name="avg_kd">
                        <span class="error_class_category text-danger errortextstyle" style="margin-top: 1px;display:none;" id="erroravg"></span>
                    </div>

                    <div class="form-group mb-3 error-text">
                        <label for="name" class="labelstyle">{{ translate('Related To') }}<span class="text-danger ml-1">*</span>
                        </label>
                        <select class="form-control" placeholder="100" name="related_to">
                            <option value="category"> Category </option>
                            <option value="brand"> Brand </option>
                            <option value="product"> Product </option>
                            <option value="product_application"> Product Application </option>
                            <option value="use_case"> Use Case </option>
                        </select>
                    </div>

                    <div class="form-group mb-3 error-text">
                        <label for="name" class="labelstyle">{{ translate('Status') }}<span class="text-danger ml-1">*</span>
                        </label>
                        <select class="form-control" placeholder="100" name="status">
                            <option value="active"> Active </option>
                            <option value="inactive"> Inactive </option>
                        </select>
                    </div>

                    <div class="form-group mb-3 text-right">
                        <button type="button" id="resetFilter" class="btn btn-primary" style="display: inline;">Reset</button></a>
                        <input class="btn btn-primary" type="button" id="saveKeywords" value="{{ translate('Save') }}">
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

{{-- Update Modal --}}

<div class="modal right fade newAttributes-modal" data-refresh="true" id="newAttributes-modal1" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header close-btn" style="padding:16px;">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="" style="border-bottom:1px solid rgba(0,0,0,.1);width:100%;padding:0rem 0 12px 0;font-size:18px;"> Edit Keyword</h4>
            </div>
            <div class="modal-body" id ="editData" style="padding: 0px 16px 16px 16px">
            </div>
        </div>
    </div>
</div>

@endsection

@section('script')
<script type="text/javascript">
    $(document).ready(function() {
        dataList();
 
        function dataList(data, url) {
            $.ajax({
                url: "{{ route('keyword-table') }}",
                data: data,
                type: 'GET',
                success: function(data) { 
                    $("#brandsData").html(data);
                }
            });
        }

        function sort_brands(el) {
            $('#sort_brands').submit();
        }

        function update_approval_status(el) {
            var status = el.checked ? 1 : 0;
            $.post('{{ route('brands.approved') }}', {
                _token: '{{ csrf_token() }}',
                id: el.value,
                status: status
            }, function(data) {
                if (data == 1) {
                    if (status === 1) {
                        AIZ.plugins.notify('success', '{{ translate('Brand Status Approved successfully') }}');
                        dataList();
                    } else {
                        AIZ.plugins.notify('success', '{{ translate('Brand Status UnApproved successfully') }}');
                    }
                } else {
                    AIZ.plugins.notify('danger', '{{ translate('Something went wrong') }}');
                }
            });
        }

        $(document).on('click', '.addpopup', function(event) {
            $('#newAttributes-modal').modal('show');
        });

        $(document).on('click', '#editUnit', function(event) {
            $('#newAttributes-modal1').modal('show');
        });

        $(document).on('click', '#saveKeywords', function(event) {
            event.preventDefault();
            var form = $('#myform')[0];
            var formData = new FormData(form);
            $.ajax({
                url: "{{ url('/newsidebar-keys') }}",
                data: formData,
                processData: false,
                contentType: false,
                type: 'POST',
                success: function(data) { 
                    // $(".invalid-feedback").remove();
                    if (data.error) {
                        $("#errorname").css("display", "block").text(data.error.name);
                        $("#errorvol").css("display", "block").text(data.error.volume);
                        $("#errorrank").css("display", "block").text(data.error.rank);
                        $("#errorkey").css("display", "block").text(data.error.keyword_no);
                        $("#erroravg").css("display", "block").text(data.error.avg_kd); 
                    } else {
                        $("#newAttributes-modal").modal('hide');
                        $("#brandsData").html(data);
                        AIZ.plugins.notify('success', '{{ translate('Keyword created successfully') }}');
                        dataList();
                    } 
                },
                error: function(error) {
                    // console.log(error.name);
                }
            });
        });

        $(document).on('input', '.form-control', function() {
            $(this).closest('.error-text').find('.error_class_category').hide();
        });
         
        $(document).on('click', '.clearForm', function() {
            document.getElementById("myform").reset();

            $('#meta_description_message').hide();
            $('#errorname').hide();
            $('#errorfile').hide();
        });

        $("#search").keyup(function() {
            var query = $(this).val();
            $.ajax({
                url: "{{ route('keyword-table') }}",
                data: {
                    'search': query
                },
                type: 'GET',
                success: function(data) {
                    //$(".footable-empty").remove();

                }
            });
        });

        $(document).on("keypress", "input[name='search']", function(event) {
            if (event.keyCode == 13) {
                var searchTerm = $("input[name='search']").val();
                memberSearchAjax(searchTerm);
            }
        });

        $(document).on("click", "#memberSearch", function(event) {
            var searchTerm = $("input[name='search']").val();
            memberSearchAjax(searchTerm);
        });

        var typingTimer;
        var doneTypingInterval = 1000;

        function memberSearchAjax(searchTerm) {
            var url = "{{ url('/admin/softdelete/ajax_user_data') }}";
            if (searchTerm) {
                var data = {
                    'search': searchTerm
                };
                dataList(data, url);
            } else {
                var data = {
                    'search': ''
                };
                dataList(data, url);
            }
        }

        $(document).on('click', '#resetFilter', function() {
            $('#myform')[0].reset();
            $('#customFile').text('{{ translate('Choose File') }}');
            $('#meta_description_message').hide();
        });

        $(document).on('click', '#btnSendData', function(event) {
            event.preventDefault();
            var form = $('#myform')[0];
            var formData = new FormData(form);

            $("#errorname").css("display", "none").text('');
            $("#errorfile").css("display", "none").text('');

            $.ajax({

                data: formData,
                processData: false,
                contentType: false,
                type: 'POST',
                success: function(data) {
                    if (data.error) {
                        $("#errorname").css("display", "block").text(data.error.name);
                        $("#errorfile").css("display", "block").text(data.error.logo);
                    } else {
                        $("#newAttributes-modal").modal('hide');
                        $("#brandsData").html(data);
                        AIZ.plugins.notify('success',
                            '{{ translate('Brand created successfully') }}');
                    }
                },
                error: function(error) {
                    console.log(error.name);
                }
            });
        });
  
        $(document).on('click', '#editUnit', function(e) {
            var url = $(this).data('url');
            $.ajax({
                url: url,
                type: 'get',
                success: function(e) {
                    $("#editData").html(e);
                }
            });
        });

        $(document).on('click', '#updateBrand', function(event) {
            event.preventDefault();
            var url = $('#myform1').attr('action');
            var form = $('#myform1')[0];
            var formData = new FormData(form); 

            $.ajax({
                url: url,
                data: formData,
                processData: false,
                contentType: false,
                type: 'POST',
                success: function(data) {

                    if (data.error) {
                        $("#errorname1").css("display", "block").text(data.error.name);
                    } else {
                        $("#newAttributes-modal1").modal('hide');
                        $('.modal-backdrop').remove();
                        $("#brandsData").html(data);
                        AIZ.plugins.notify('success',
                            '{{ translate('Keys updated successfully') }}');
                        dataList();
                    }
                },
                error: function(error) {
                    console.log(error.name);
                }
            });
        });
        $(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(data) {
                    $("#brandsData").html(data);
                }
            });
            $('#sProduct').text('0');
            $('#deletedData').hide();
            $('#restoreData').hide();
        });

        function loadStoredPagination() {
            var storedURL = localStorage.getItem('paginationURL');  
            
            if (storedURL) {
                $.ajax({
                    url: storedURL,
                    cache: false,
                    success: function(data) { 
                        $("#brandsData").html(data); 
                    }
                });
            }
        }

        // Data Delete
        $(document).on('click', '#deletebtn', function() {
    var url = $(this).data('href');

    var checkThis = $(this);
    $('#delete-modal').modal({
        backdrop: false,
        keyboard: false
    });

    var storedURL = localStorage.getItem('paginationURL');
    var requestURL = storedURL && storedURL.trim() !== "" ? storedURL : '{{ route('keyword-table') }}';

    // Fixing the misplaced dot here
    $('#delete-link').one('click', function(e) {
        $.ajax({
            url: url,
            type: "GET",
            success: function(obj) {
                $("[data-dismiss=modal]").trigger({ type: "click" });
                AIZ.plugins.notify('success', '{{ translate('KeyRule deleted successfully') }}');
                // loadStoredPagination();  
                dataList(requestURL);
                $('#sProduct').text('0');  
            }
        });
    });
});
window.onload = function() {
    localStorage.removeItem('paginationURL');
};






        // Delete Multiple Data

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

        // Multiple Data Deletion Handler
        $(document).on('click', '#deleteSelected', function() {
            var selected = [];
            $("input.product_checkbox:checked").each(function() {
                selected.push($(this).val());
            });

            if (selected.length > 0) {
                // Assuming you have the backend URL to handle bulk delete
                var url = '/your-delete-url';
                $.ajax({
                    url: url,
                    type: 'POST',
                    data: {
                        ids: selected
                    },
                    success: function(response) {
                        AIZ.plugins.notify('success', '{{ translate('Selected items deleted successfully') }}');
                        dataList();
                        $('#sProduct').text('0');  
                        $("#deletedData").hide();
                        $("#restoreData").hide();
                    }
                });
            } else {
                AIZ.plugins.notify('warning', '{{ translate('No items selected') }}');
            }
        });


        $(document).on('click', '#delete_records', function() {
            var row = $(this).closest('tr');
            var products = [];
            var deleteModal = $('#delete-modal');
            $(".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: "{{ route('keys.multipleLkeyruleDelete') }}",
                        cache: false,
                        data: 'emp_id=' + selected_values,

                        success: function(response) {
                            $('.modal-backdrop').removeClass('show');

                            AIZ.plugins.notify('success',
                                '{{ translate('Keys Deleted successfully') }}'
                            );
                            $('#delete-modal').modal('hide');
                            $("#deletedData").hide();
                            dataList();
                        }
                    });
                });
            }
        });

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

        /////// Change Image When Upload in Edit

        $(document).on('click', '#updateKeywords', function(event) {
            event.preventDefault();
            var form = $('#myform1')[0];
            var formData = new FormData(form);

            var actionUrl = $('#myform1').attr('action');
            $.ajax({
                url: actionUrl,
                data: formData,
                processData: false,
                contentType: false,
                type: 'POST',
                success: function(data) {
                    $(".invalid-feedback").remove();
                    if (data.error) {
                        $.each(data.error, function(key, val) {

                            var inputField = $("input[name=" + key + "]");
                            var errorMessage =
                                '<span class="invalid-feedback" style="display: block;" role="alert">' +
                                val + '</span>';
                            inputField.after(
                                errorMessage
                            ); // Use "after" to append the error message after the input field
                        });

                    } else {
                        $("#newAttributes-modal1").modal('hide');
                        $("#brandsData").html(data);

                        AIZ.plugins.notify('success','{{ translate('Brand created successfully') }}');
                        window.location.reload();
                    }
                },
                error: function(error) {
                    // console.log(error.name);
                }
            });
        });
     

        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;
        }
    });
</script>
@endsection