@extends('backend.layouts.app')
@section('content')
    <style>
        .set_cat_box{
           align-items:end;
           gap:25px;
        }
        .cat_bold{
             font-size: 12px;
             font-weight: 600;
             color: black;

        }
        ul.category-list {
            display: flex;
            list-style: none;
            padding-left: 0px !important;
            gap: 5px;
            margin: 5px 0px;
            align-items: center;
        }
        ul.category-list li {
           white-space:nowrap;
        }
        ul.category-list {
           white-space:nowrap;
        }

        .category-list.hidden_cat {

            display: none;
        }

        button#view-all {
            border: none;
            color: #D7282F;
            background: none;
            text-decoration: underline;
        }

        .attr_cat {
            align-items: end;
            /* justify-content:space-between; */
        }

        .category-list,
        #cat_assoc {
            font-size: 12px;
            font-weight: 00;
            color: gray;
        }
    </style>

    <div class="aiz-titlebar text-left mt-2 mb-3 ">
        <div class="row align-items-center">
            <div class="col-md-6">
                <h1 class="h3">{{ translate('Attribute Search and Filtering in Admin') }}</h1>
            </div>
        </div>
    </div>
    <div class="page-content bg-white" id="NewTabs">
        <div class="attributeFlexBox">
            <div class="attrTabs">
                <ul class="nav nav-pills" id="pills-tab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="pills-home-tab" data-toggle="pill" data-target="#pills-home"
                            type="button" role="tab" aria-controls="pills-home" aria-selected="true">Attribute</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="pills-profile-tab" data-toggle="pill" data-target="#pills-profile"
                            type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Attribute Sets
                        </button>
                    </li>
                </ul>

            </div>
            <div class="button-search">
                <div class="">
                    <div class="table-search ml-auto">
                        <form method ="GET" action = "" id="attr_search">
                            <i class="icons icon-search-s" id="memberSearch"></i>
                            <input type="text" class="form-control" id="search" name="search" placeholder="Search">
                        </form>
                    </div>
                </div>
                <div>
                    <a href="{{ url('admin/create/attributes') }}" id="addAccountType" class="add-items-btn ml-auto">
                        <span><i class="icons icon-plus"></i></span>
                        {{ translate('Create New Attribute') }}
                    </a>
                </div>
            </div>
        </div>
        <div class="all_attributes">

            <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>

        {{-- Attribute Sets --}}
        <!-- <div class="tab-pane " id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
            <div class="attribute-settable  set_pagination">
                <div class="table-responsive " id="attr_set">

                    <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>
        </div> -->
    </div>
    </div>
@endsection

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

@section('script')
    <script type="text/javascript">
        $('#search').on('keydown', function(event) {
            // Check if the pressed key is Enter (key code 13)
            if (event.key === 'Enter') {
                // Prevent the default form submission
                event.preventDefault();
            }
        });




        function performAjaxRequest(url, data = {}, onSuccess) {
            $.ajax({
                url: url,
                type: 'GET',
                data: data,
                success: function(response) {
                    onSuccess(response);
                },
                error: function(xhr) {
                    console.error(xhr);
                    $('#searchPage').html('<p>An error occurred</p>');
                }
            });
        }








        $(document).on('click', '#pills-profile-tab', function(event) {
            $('#memberSearch').attr('id', 'setsearch');

            $('#loader').show();
            // $('.all_attributes').hide('');
            $('.attribute-settable').show('');


            var url = "{{ url('admin/list/attributes/set') }}";

            $.ajax({
                url: url,
                success: function(data) {

                    $('.all_attributes').html(data);


                },


                error: function(error) {
                    console.log(error);
                },
            });
        });



        $(document).on('click', '#setsearch', function() {

            var searchQuery = $('#search').val();
            var url = "{{ url('admin/list/attributes/set') }}";

            performAjaxRequest(url, {
                search: searchQuery
            }, function(response) {
                $('.all_attributes').empty();
                $('.all_attributes').html(response);
            });
        });


        $(document).ready(function() {


            var url = "{{ url('admin/list/attrlist') }}";

            $.ajax({
                url: url,
                method: 'GET',
                dataType: 'html',
                success: function(data) {
                    $('.all_attributes').html(data);
                },
                error: function(error) {
                    console.log(error);
                }
            });
        });


        $(document).on('click', '.set_pagination a.page-link', function(event) {
            event.preventDefault();
            var url = $(this).attr('href');



            $.ajax({
                url: url,
                cache: false,
                success: function(data) {
                    $(".all_attributes").html(data);
                }
            });

            $('#sProduct').text('0');
            $('#deletedData').hide();
            $('#restoreData').hide();
        })

        $(document).on('click', '.all_attributes a.page-link', function(event) {
            event.preventDefault();
            var url = $(this).attr('href');



            $.ajax({
                url: url,
                cache: false,
                success: function(data) {
                    $(".all_attributes").html(data);
                }
            });

            $('#sProduct').text('0');
            $('#deletedData').hide();
            $('#restoreData').hide();
        })

        $(document).on('click', '.delete_set', function() {

            var id = $(this).attr('id');
            var url = "{{ url('admin/list/delete/set') }}/" + id;


            var checkThis = $(this);

            $('#delete-modal').modal({
                backdrop: 'static',
                keyboard: false
            }).one('click', '#delete-link', function(e) {
                e.preventDefault();
                $.ajax({
                    url: "{{ url('admin/list/delete/set') }}/" + id,
                    type: "GET",
                    success: function(response) {
                        $('#pills-profile-tab').click();
                        $('#delete-modal').modal('hide');

                        AIZ.plugins.notify('success',
                            '{{ translate('Attribute Set deleted successfully') }}');



                        $("#sProduct").text("0");


                    },
                    error: function(error) {
                        AIZ.plugins.notify('danger',
                            '{{ translate('Failed to delete the attribute set') }}');
                    }
                });
            });

        });


        $(document).on('click', '.cancel_btn', function() {

            var id = $(this).attr('id');
            var set_id = $(this).data('id');
            var  url = "{{ url('admin/list/delete/childset') }}/" + set_id + "/" + id;


            var checkThis = $(this);

            $('#delete-modal').modal({
                backdrop: 'static',
                keyboard: false
            }).one('click', '#delete-link', function(e) {
                e.preventDefault();
                $.ajax({
                    url: url,
                    type: "GET",
                    set_id:set_id,
                    success: function(response) {
                        $('#delete-modal').modal('hide');
                        $('#pills-profile-tab').click();
                        AIZ.plugins.notify('success',
                            '{{ translate('Attribute Set removed successfully') }}');

                        checkThis.closest('ul').remove();

                        $("#sProduct").text("0");
                        

                    },
                    error: function(error) {
                        AIZ.plugins.notify('danger',
                            '{{ translate('Failed to remove the attribute set') }}');
                    }
                });
            });

        });
        $(document).on('click', '.attrcancel_btn', function() {
var lastLiId = $(this).closest('ul').find('li:last').attr('id');

            var id = $(this).attr('id');
            
            var set_id = $(this).data('id');
            var  url = "{{ url('admin/list/delete/childcat') }}/" + set_id + "/" + id+"/"+lastLiId;


            var checkThis = $(this);

            $('#delete-modal').modal({
                backdrop: 'static',
                keyboard: false
            }).one('click', '#delete-link', function(e) {
                e.preventDefault();
                $.ajax({
                    url: url,
                    type: "GET",
                    set_id:set_id,
                    success: function(response) {
                        $('#delete-modal').modal('hide');
                        
                        AIZ.plugins.notify('success',
                            '{{ translate('Attribute Set removed successfully') }}');

                        checkThis.closest('ul').remove();

                        $("#sProduct").text("0");

                    },
                    error: function(error) {
                        AIZ.plugins.notify('danger',
                            '{{ translate('Failed to remove the attribute set') }}');
                    }
                });
            });

        });

        $(document).on('click', '.delete_attr', function() {
            var id = $(this).attr('id');

            //  var url = "{{ url('admin/list/delete/attribute') }}/" + id;


            var checkThis = $(this);

            $('#delete-modal').modal({
                backdrop: 'static',
                keyboard: false
            }).one('click', '#delete-link', function(e) {
                e.preventDefault();
                $.ajax({
                    url: "{{ url('admin/list/delete/attribute') }}/" + id,
                    type: "GET",
                    success: function(response) {

                        $('#pills-home-tab').click();
                        $('#delete-modal').modal('hide');
                        AIZ.plugins.notify('success',
                            '{{ translate('Attribute Set deleted successfully') }}');

                        checkThis.closest('tr').remove();

                        $("#sProduct").text("0");

                    },
                    error: function(error) {
                        AIZ.plugins.notify('danger',
                            '{{ translate('Failed to delete the attribute set') }}');
                    }
                });
            });

        });

        $(document).on('click', '#pills-home-tab', function(event) {
            $('#setsearch').attr('id', 'memberSearch');
            $('.attribute-settable').hide('');
            $('.all_attributes').show('');

            $('#setsearch').attr('id', 'memberSearch');
            var url = "{{ url('admin/list/attrlist') }}";

            $.ajax({
                url: url,
                success: function(data) {

                    $('.all_attributes').html(data);


                },


                error: function(error) {
                    console.log(error);
                },
            });
        });




        $('#memberSearch').on('click', function() {

            var searchQuery = $('#search').val(); // Assuming #memberSearchInput is the input field for search

            $.ajax({
                url: "{{ url('admin/list/attrlist') }}", // Adjust route as needed
                type: 'GET',
                data: {
                    search: searchQuery
                },
                success: function(response) {



                    $('.all_attributes').html(response);



                }
            });
        });
        $(document).on('click', '.edit_attr', function() {
            var attr_id = $(this).attr('id');
            var cat_id = $(this).closest('tr').find('.cat_id').data('category-id');

            // window.location.href = "{{ url('admin/create/attributes') }}" + "?id=" + attr_id;

            window.location.href = "{{ url('admin/create/attributes') }}" + "?id=" + attr_id + "&category=" +
                cat_id;


        });


        $(document).on('click', '.cat_assbtn', function() {

            var set_id = $(this).attr('id');

            var cat_id = $(this).closest('tr').find('.cat_id').data('category-id');
            window.location.href = "{{ url('admin/create/attributes') }}" + "?set_id=" + set_id + "&setcategory=" +
                cat_id;;


        });

        $(document).on('click', '.ed_atrset', function() {

            var set_id = $(this).attr('id');

            var cat_id = $(this).closest('tr').find('.cat_id').data('category-id');
            window.location.href = "{{ url('admin/create/attributes') }}" + "?set_edit=" + set_id +
                "&setcategory=" + cat_id;;


        });



        function toggleViewAll() {
            const closestRow = $(this).closest('tr');
            const viewAllButton = closestRow.find('#view-all');

            closestRow.find('.category-list').not('.first-category-list').toggleClass('hidden_cat');

            if (viewAllButton.text() === "View All") {
                viewAllButton.text("View Less");
            } else {
                viewAllButton.text("View All");
            }
        }

        $(document).on('click', '#view-all', toggleViewAll);

    </script>
@endsection