@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 Master 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" data-toggle="modal"
        data-target="#newAttributes-modal">
        <span><i class="icons icon-plus"></i></span>Add New Key Rules
    </a>
        </div> -->
    </div>
</div>

<div class="admin-list-table pt-0 border-0">
    <div class="headerResponsive py-3 tableTab-freeze" style="border-top:1px solid #d2d2d2;">
        <div class="common-tbl-head m-0 ml-1">
            <div class="common-tbl-heading">{{ translate('Master Keywords') }}</div>
            <div class="selected-prod">Selected Keywords (<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 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 16px 0px 16px;">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 style="border-bottom:1px solid rgba(0,0,0,.1);width:100%;padding:0rem 0 12px 0;font-size:18px;">Add New Rules</h4>
            </div>
            <div class="modal-body" style="padding: 16px 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 method="POST" action="{{ url('/keyrules') }}" 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 type="text" placeholder="{{ translate('Key Name') }}" name="name" class="form-control">
                        <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('Start range') }}<span class="text-danger ml-1">*</span></label>
                        <input type="text" placeholder="{{ translate('000') }}" name="range_start" class="form-control" id="rangeStartInput">
                        <span class="error_class_category text-danger errortextstyle" style="margin-top: 1px;display:none;" id="errorstart"></span>
                    </div>

                    <div class="form-group mb-3 error-text">
                        <label for="name" class="labelstyle">{{ translate('End Range') }}<span class="text-danger ml-1">*</span></label>
                        <input type="text" placeholder="{{ translate('000') }}" name="range_end" class="form-control" id="rangeEndInput">
                        <span class="error_class_category text-danger errortextstyle" style="margin-top: 1px;display:none;" id="errorend"></span>
                    </div>
                     
                    <div class="form-group mb-3 error-text">
                        <label for="name" class="labelstyle">{{ translate('Pick the Colour') }}<span class="text-danger ml-1">*</span> </label>

                        <input type="color" placeholder="{{ translate('#9999') }}" name="color" class="form-control">
                    </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" id="saveKeywords"  type="submit" value="{{ translate('Save') }}">
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

{{-- Update Modal --}}

<div class="modal right fade newAttributes-modal1" 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 style="border-bottom:1px solid rgba(0,0,0,.1);width:100%;padding:0rem 0 12px 0;font-size:18px;"> Keyword Detail </h4>
            </div>
            <div class="modal-body" id ="editData" style="padding: 0px">
            </div>
        </div>
    </div>
</div>

@endsection

@section('script')
<script type="text/javascript">
    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).ready(function() {
        dataList();

        function dataList(data, url){
            $.ajax({
                url: "{{ url('admin/masterkeyword/listing') }}",
                data:data,
                type: 'GET',
                success: function (data) {
                    $("#brandsData").html(data);
                }
            });
        }

        function sort_brands(el) {
            $('#sort_brands').submit();
        }
 
        $(document).on('click', '.clearForm', function() {
            document.getElementById("myform").reset();
            $('.errortextstyle').hide();
        });

        ///// Only numeric value entered
        $('#rangeStartInput,#rangeEndInput').on('input', function() {
            let currentValue = $(this).val(); 
            let sanitizedValue = currentValue.replace(/[^0-9]/g, ''); 
            if (currentValue !== sanitizedValue) {
                $(this).val(sanitizedValue);
            }
        }); 
 
        $(document).on('click', '#saveKeywords', function(event) {
            event.preventDefault();
            var form = $('#myform')[0];
            var formData = new FormData(form);

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

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

                    if (data.error) {
                        $("#errorname").css("display", "block").text(data.error.name);
                        $("#errorstart").css("display", "block").text(data.error.range_start);
                        $("#errorend").css("display", "block").text(data.error.range_end);
                    } else {
                        $("#newAttributes-modal").modal('hide');
                        $("#brandsData").html(data);
                        AIZ.plugins.notify('success', '{{ translate('New Rules created successfully') }}');
                        dataList();
                    }
                },
                error: function(error) {
                }
            });
        });

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

        $(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', '#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) {

                    if (data.error) {
                        $("#errorname1").css("display", "block").text(data.error.name);
                        $("#errorstart1").css("display", "block").text(data.error.range_start);
                        $("#errorend1").css("display", "block").text(data.error.range_end);
                    } else {
                        $("#newAttributes-modal1").modal('hide');
                        $("#brandsData").html(data);
                        AIZ.plugins.notify('success', '{{ translate('New Rules updated successfully') }}');
                        dataList();
                    }
                },
                error: function(error) {
                }
            });
        });

        $(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/masterkeyword/listing') }}";
            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', '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); 
                    }
                });
            }
        } 

        $(document).on('click', '#deletebtn', function() {
            var url = $(this).data('href');
            var checkThis = $(this);
            $('#delete-modal').modal({
                backdrop: '',
                keyboard: false
            })
            .one('click', '#delete-link', function(e) {


                var storedURL = localStorage.getItem('paginationURL');
                var requestURL = storedURL && storedURL.trim() !== "" ? storedURL : '{{ url('admin/masterkeyword/listing') }}';
             
                $.ajax({

                    url: url,
                    type: "GET",
                    success: function(obj) {
                        $('#delete-modal').modal('hide');
                        $('.modal-backdrop').css('display','none');
                        AIZ.plugins.notify('success', '{{ translate('KeyRule deleted successfully') }}');
                       
                        dataList('',requestURL);
                    }
                });
            });
        });

        $(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 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) {

                    var storedURL = localStorage.getItem('paginationURL');
                var requestURL = storedURL && storedURL.trim() !== "" ? storedURL : '{{ url('admin/masterkeyword/listing') }}';
                    $.ajax({
                        type: "POST",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: "{{ route('delete.multimaster_key') }}",
                        cache: false,
                        data: 'emp_id=' + selected_values,

                        success: function(response) {
                            AIZ.plugins.notify('success', '{{ translate('Keys Deleted successfully') }}' );
                            $("#sProduct").text("0");
                            $('#delete-modal').modal('hide');
                            $("#deletedData").hide();


                            dataList('', requestURL);
                        }
                    });
                });
            }
        });

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

    });
    window.onload = function() {
    localStorage.removeItem('paginationURL');
};

</script>
@endsection