@extends('backend.layouts.app')

@section('content')
    <div class=" pt-0 border-0">
        <div class="d-flex align-items-center pb-3 tableTab-freeze">
            <ul class="memberTable-tabs">
                <li class="active"><a href="javascript:void(0);" data-tab="">{{ translate('Products Wishlist') }}</a></li>
            </ul>
            {{--  <div class="common-tbl-head m-0 ml-1">
                <div class="selected-prod">
                    Selected Report (<span id="sProduct">0</span>)
                </div>
                <div class="delete-select" id="deletedData" style="display:none">
                    <a href="javascript:void(0);" id="delete_records">Remove from Wishlist <i class="icons icon-delete"></i></a>
                </div>
            </div>  --}}
            <div class="d-flex align-items-center ml-auto">
                <div class="form-group mb-0 ">
                    <label class="col-form-label">{{ translate('Sort by Sectors') }}:</label>
                </div>
                <div class="form-group mb-0 ml-2">
                    <select id="demo-ease" class="form-control" name="category_id">
                        <!-- {{-- <option value="">{{ translate('Select Serctor') }}</option> --}} -->
                        <option value="" disabled selected hidden><b>Select Sector</b></option>
                        <!-- <optgroup label="Select Category">Select Serctor</optgroup> -->
                        @foreach ($catList as $key => $category)
                            <option value="{{ $key }}">{{ $category }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            {{-- <a href="javascript:void(0);" class="add-items-btn ml-auto " data-toggle="modal" data-target="#newAttributes-modal"><span><i class="icons icon-plus"></i></span> Add New Brand</a> --}}
        </div>
        <div class="admin-table whishlist-member">
            <div class="customFlyout wishlist_model flyout-position-t" style="display: none;">
                <div class="FlyoutHeader">
                    <h4 style="border-bottom:1px solid rgba(0,0,0,.1);width:100%;padding:0rem 0 12px 0;font-size:18px;">List
                        of Wishlist Members</h4>
                    <button type="button" class="closeBtn"><i class="icons icon-cross-thin"></i></button>
                </div>
                <div class="flyoutBody">
                    <div class="admin-table" id="showWishlistCount" style="position: inherit;">
                        <div class="table-responsive border-0">
                            <table class="table mb-0">
                                <thead>
                                    <tr>
                                        <th>S.No.</th>
                                        <th>Member Name</th>
                                        <th>Email</th>
                                        <th>Gender</th>
                                        <th>User Type</th>
                                        <th class="text-left">Mobile</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>  
            <div id="wishData">
                <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>
    </div>
@endsection


@section('modal')
    <!-- Delete Modal -->
    @include('modals.delete_modal')
    
    <div class="customFlyout flyout-position-t memberProduct" id="product_detail">

        <div id="productListData loader_seller" style=" position: absolute; top: 30pc; left: 30pc;">
            <div id="loader"style=" display:none;  text-align: center; width: 100px; margin: 0 auto;">
                <img width="100" src="{{ url('public/assets/img/ZKZg.gif') }}">
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script type="text/javascript">
        $(document).ready(function() {
            var data = "";
            var url = "{{ url('/admin/reports/wish_reports_ajax') }}";
            dataList(data, url);


            $(document).on('click', 'a.page-link', function(event) {
                event.preventDefault();
                var data = ""
                var url = $(this).attr('href');
                dataList(data, url);
                $('#sProduct').text('0');
                $('#deletedData').hide();
                $('#restoreData').hide();
            });

            $(document).on('click', '.closeBtn', function() {
                $('.wishlist_model').removeClass('active');
            });
            $(document).on('click', '.openWishlistPopup', function(e) {
                var getID = $(this).data('table');
 
                var productID = $(this).data('product_id');
                var checkText = $(this).text();
                if (checkText > 0) {
                    $('.wishlist_model').addClass('active');
                    $('body').toggleClass('OverlayBg');
                    $('body').css('overflow', 'hidden');
                    $.ajax({
                        url: "{{ url('/admin/products/getWishUsers') }}",
                        type: "POST",
                        data: {
                            _token: '{{ csrf_token() }}',
                            'product_id': productID
                        },
                        success: function(data) {  
                            $(getID).find('tbody').html(data);
                        }
                    });
                    $('.wishlist_model').css("display", "block");
                    $(getID).show();
                } else {
                    $(getID).hide();
                    $('.wishlist_model').css("display", "none");
                    $(getID).find('tbody').html('');
                }

            });

            $("#demo-ease").change(function() {
                var category = $(this).val();
                filterByCategory(category);
            });

            function filterByCategory(category) {
                var data = {
                    'category': category
                }
                var url = "{{ url('/admin/reports/wish_reports_ajax') }}";
                dataList(data, url);
            }

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

            $(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 checkThis = $(this);
                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: "{{ url('/admin/reports/wishlist_multi_delete') }}",
                            cache: false,
                            data: 'productId=' + selected_values,
                            success: function(response) {
                                checkThis.closest('tr').remove();
                                AIZ.plugins.notify('success',
                                    '{{ translate('Whishlist Deleted successfully') }}'
                                    );
                                $("#sProduct").text("0");
                                $('#delete-modal').modal('hide');
                                $("#deletedData").hide();
                                var url =
                                    "{{ url('/admin/reports/wish_reports_ajax') }}";
                                dataList(data, url);
                            }
                        });
                    });
                }
            });

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

            $(document).on('click', '.open-approveCate-modal-product', function() {
                // $('.memberProduct').toggleClass('active');
                $('.memberProduct').addClass('active');
                $('body').toggleClass('OverlayBg');
                $('.memberProduct').find('#loader').css('display', 'block');
                $('.memberProduct').find('.v-scroll').css('display', 'none');

                var product = $(this).data('product_id');
                var checkThis = $(this);
                callToGetProducts(product);
            });

            @if (request()->notify)
                @if (!empty($checkTrashed))
                    $('.memberProduct').toggleClass('active');
                    $('body').toggleClass('OverlayBg');
                @endif
                var product = '{{ request()->notify }}';
                callToGetProducts(product);
            @endif

            function callToGetProducts(product) {
                $.ajax({
                    url: "{{ url('/admin/products/product_detail_ajax') }}",
                    type: "GET",
                    data: {
                        'product_id': product
                    },
                    success: function(obj) {
                        $('#product_detail').html(obj);
                        $(document).find('.PCSimpleVariablesAppend_New .accordion-card:first').find(
                            'h3').trigger(
                            'click');
                        $('.memberProduct').find('.v-scroll').css('display', 'block');
                        runandcheck();
                        AIZ.plugins.tagify();
                        loadMatrix(product);
                    }
                });
            }

        });
    </script>
@endsection