@extends('backend.layouts.app')
<style>
    i.icons.icon-tick.active:before {
    color: #D7282F  !important;
}
ul.nested-list {
    list-style: none;
}
</style>
@section('content')
    <!--Activity Section Start-->
    <div class="col-md-12">
        <div style="display: flex;align-items:center;justify-content:space-between;">
            <h3 style="font-size:18px;">Activity Log</h3>
            <div class="form-group mb-2 position-relative" style="display: flex;justify-content:flex-end">
                {{-- <label class="field_label focus-in">Date of Creation</label> --}}
                <div class="table-search">
                    <i class="icons icon-search-s" id="productSearch"></i>
                    <input type="text" class="aiz-date-range form-control" name="date" placeholder="Filter by date"
                        data-format="DD-MM-Y" data-separator=" to " data-advanced-range="true" autocomplete="off"
                        id="searchInput" value="{{ $request->date ?? '' }}">
                </div>
            </div>
        </div>

    </div>



    <div class="card filter_Activities">
        <div class="row">
            <div class="col-md-8 col-xl-9">
                <div class="activityLog-col">
                    <div class="seeAct-txt">
                        <h6>Only you can see your Activity log.</h6>
                        {{-- <span>Now you can review and see everything- {{ request()->date }}. when you first started using
                        <strong>"Power Cozmo"</strong></span> --}}

                        <span>Records are showing from {{ request()->date }}. </span>

                    </div>
                    @php
                        $checkClass = [];
                    @endphp
                    @if (isset($activity) and !empty($activity) and sizeof($activity) > 0)
                        @foreach ($activity as $actval)
                            <div class="activityDate">{{ date('M d, Y', strtotime($actval->date)) }} @if ($actval->date == date('Y-m-d'))
                                    Today
                                @endif
                            </div>
                            @if (!empty($actval->history))
                                @foreach ($actval->history as $hisval)
                                    @php
                                        $img = $hisval->icons->icon ?? 'default.svg';

                                        $ch = false;
                                        if (in_array($hisval->type, $checkClass)) {
                                            $ch = true;
                                        }
                                        $checkClass[] = 'hide_' . $hisval->type;

                                    @endphp 
                                    <ul class="logsList hide_{{ $hisval->type }}" dashboard>
                                        <li
                                            class="{{ $hisval->icons->class_name ?? '' }} @php if($ch==true){ echo 'smallCircle';} @endphp">
                                            <i><img src="{{ $hisval->icons->icon ?? '' }}" alt=""
                                                    style="height: 18px;">
                                                @if ($hisval->type == 'dashboard')
                                                    <span class="path1"></span>
                                                    <span class="path2"></span>
                                                @endif
                                            </i> {{ $hisval->icons->name ?? '' }}
                                        </li>
                                        @if (!empty($hisval->changes))
                                            <ul class="subLog-list">
                                                @foreach ($hisval->changes as $hisval)

                                                    <li class="blue-act"><i></i>
                                                    @if(!empty($hisval->view_activity))
                                                    
                                                    <a href="{{url('/')}}/{{$hisval->view_activity}}">{!! $hisval->message !!} -
                                                            <strong>{{ \Carbon\Carbon::createFromTimeStamp(strtotime($hisval->created_at))->diffForHumans() }}</strong>
                                                        </a>
                                                        @else
                                                    <span>{!! $hisval->message !!} -
                                                            <strong>{{ \Carbon\Carbon::createFromTimeStamp(strtotime($hisval->created_at))->diffForHumans() }}</strong>
                                                        </span>
                                                    </li>
                                                    @endif
                                                @endforeach
                                            </ul>
                                        @endif
                                    </ul>
                                @endforeach
                            @endif
                        @endforeach
                    @else


                    <div class="nodata-col text-center" style="height:20pc;    display: flex;justify-content: center;align-items: center;">
                        <div class="nodata">
                        <i
                                class="icons @if (!empty(request()->search)) icon-no-data @else icon-no-items @endif"></i>
                            
                                <h1>No result found</h1>
                        </div>
                           
                           
                        </div>
                    @endif
                </div>
            </div>
            <div class=" Activities-responsive col-xl-3">
                <div class="activities-Filter">
                    <div class="filterHeading">
                        <h4>Activities Navigation</h4>
                    </div>

                   <div class="filterListing">
    @if (!empty($list) && count($list) > 0)
        @foreach ($list as $listval)
            <li class="main_list mt-2" data-value="{{ $listval->id }}" data-type="hide_{{ $listval->type }}">
                <a href="javascript:void(0);">
                    <img src="{{ $listval->icon }}" alt="" style="height: 18px;">
                    {{ $listval->name }} <i class="icons icon-tick"></i>
                </a>
                @if (count($listval->parent) > 0)
                    <ul class="nested-list">
                        @foreach ($listval->parent as $parentItem)
                            <li class="parent_list mt-1 mb-0" data-value="{{ $parentItem->id }}" 
                                data-type="hide_{{ $parentItem->type }}">
                                <a href="javascript:void(0);">
                                    {{ $parentItem->name }} <i class="icons icon-tick"></i>
                                </a>
                            </li>
                        @endforeach
                    </ul>
                @endif
            </li>
        @endforeach
    @endif
</div>
                </div>
            </div>
        </div>
    </div>

    <!--Activity Section End-->
@endsection


@section('script')
    @php
        $checkClass = array_unique($checkClass);
    @endphp

    <script type="text/javascript">
        $(document).ready(function() {


            var url = "{{ url('/admin/admin_activities') }}";
            var data = "";

            product_list(data, url);

            function product_list(data, url) {
                $.ajax({
                    url: url,
                    type: "GET",
                    data: data,
                    success: function(obj) {
                        $("#productListData").html(obj);
                        //column_data();
                    }
                });
            }


            //     $(document).on('change', '#searchInput', function() {
            //     var searchTerm = $(this).val();           
            //     productSearchAjax(searchTerm);        
            // });

            //     $(document).on("click", "#productSearch", function(event) {
            //         var searchTerm = $("input[name='date']").val();
            //         productSearchAjax(searchTerm);
            //     });

            //     var typingTimer;
            //     var doneTypingInterval = 1000;

            //     function productSearchAjax(searchTerm) {
            //         var url = "{{ url('/admin/admin_activities') }}";

            //         if (searchTerm) {
            //             var data = {
            //                 'search': searchTerm
            //             };
            //             product_list(data, url);
            //         } else {
            //             var data = {
            //                 'search': ''
            //             };
            //             product_list(data, url);
            //         }
            //     }
// Initialize with checked items
var checkJson = 'null';
try {
    var data = JSON.parse(checkJson);
    $.each(data, function(i, filtertype) {
        $('[data-type="' + filtertype + '"]').addClass('active');
        $('.logsList.' + filtertype).show();
    });
} catch (e) {
    console.error("Error parsing checkJson:", e);
}

// Main list item click - toggle itself and all nested
$(document).on("click", ".filterListing li.main_list", function() {
    var $mainItem = $(this);
    var filtertype = $mainItem.attr("data-type");
    var isActive = !$mainItem.hasClass('active');
    
    // Toggle main item
    $mainItem.toggleClass('active', isActive);
    $('.logsList.' + filtertype).toggle(isActive);
    
    // Toggle all nested items
    $mainItem.find('.parent_list').each(function() {
        var $nested = $(this);
        var nestedType = $nested.attr("data-type");
        $nested.toggleClass('active', isActive);
        $('.logsList.' + nestedType).toggle(isActive);
    });
});


$(document).on("click", ".filterListing li.parent_list", function(e) {
    e.stopPropagation();
    
    var $nested = $(this);
    var $nestedli = $nested.closest('li.main_list');
    var nestedType = $nested.attr("data-type");

    $nested.toggleClass('active');
    
    var $allParents = $nestedli.find('.nested-list li.parent_list');
    var allActive = $allParents.length && $allParents.filter('.active').length === $allParents.length;

    $nestedli.toggleClass('active', allActive);

    $('.logsList.' + nestedType).toggle();
});

          
        });
        // $(".filterListing li.parent_list").on("click", function() {
        //     $(this).toggleClass('active');
        //     // Toggle the active state of the icon
        //      $(this).find('.icons').toggleClass('active');
        // });

        //  



        // $(document).on('click', "#productSearch", function(event) {
        //     var searchTerm = $("#searchInput").val();
        //     var url = "{{ url('/admin/admin_activities') }}"; 
        //     window.location.href = url + "?date=" + searchTerm;




        // });

        $(document).on('click', "#productSearch", function(event) {
            search();
        });

        $("#searchInput").keypress(function(event) {
            if (event.which == 13) { // Check if the Enter key is pressed
                event.preventDefault(); // Prevent the default form submission behavior
                search();
            }
        });

        function search() {
            var searchTerm = $("#searchInput").val();
            var newUrl = "{{ url('/admin/admin_activities') }}";
            var Url = newUrl + "?date=" + searchTerm;
            window.location.href = Url;
        }

        var currentUrl = window.location.href;
        if (currentUrl.includes("?date=")) {
            var cleanUrl = currentUrl.split("?")[0];
            window.history.replaceState({}, document.title, cleanUrl);
        }
    </script>
@endsection('script')