@extends('app')
@section('content')
<style>
    .navbar-light.bg-light.border-top.border-bottom {
        display: none;
    }
    .selected-category{
        background: #f14705;
        color: #fff;
    }
    .selected-category .textStyle {
        color: #fff !important;
    }
    
    .sidebarStyle{
        box-shadow: 0 0px 3px 1px #d66f47;
        margin: 10px;
    }
    .subcategoryStyle{
        box-shadow: 0 3px 7px 2px #d66f47;
    }
    .textStyle{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        width: 100%;
    }
</style>
<div class="container-xl mt-4">
    <div class="row">
        <div class="col-4 col-md-4 col-lg-2 p-0">
            <div class="sidebarStyle" style="margin-top: 0px;">
                <div class="p-0 border-bottom fs-16 fw-600">
                    <a href="javascript:void(0);" style="padding: 5px 8px;" class="d-flex opacity-60 flex-column align-item-center text-reset" onclick="loadCategories(0, this)">
                        <i class="fas fa-user las m-auto" style="font-size: 3rem;"></i>
                        <span class="text-center text-success textStyle">Just for you</span>
                    </a>
                </div>
            </div>
            @foreach($categories->where('is_active', 1) as $category)
            @if(is_null($category->parent_id))
            <div class="sidebarStyle">
                <div class="p-0 border-bottom fs-16 fw-600">
                    <a href="javascript:void(0)" style="padding: 5px 8px;" class="opacity-60 d-flex flex-column align-item-center text-reset" onclick="loadCategories({{ $category->id }}, this)">
                        <img
                            class="cat-image m-auto w-50 ls-is-cached lazyloaded" style="border-radius: 100%"
                            src="{{ asset('posadmin/images/category/' . $category->image) }}"
                            data-src="{{ asset('posadmin/images/category/' . $category->image) }}"
                            alt="Baking Tools"
                        />
                        <span class="text-center text-success textStyle" style="white-space: nowrap;">{{ $category->name }}</span>
                    </a>
                </div>
            </div>
            @endif
            @endforeach
        </div>
        <div class="col p-0">
            <div id="categoryBody">
                
            </div>
        </div>
    </div>
</div>
@endsection

@push('js')
<script>
    $(document).ready(() => {
        loadCategories(0);
    });

    function loadCategories(id, element = null) {
        $('.selected-category').removeClass('selected-category');
        
        if (element) {
            $(element).parent().addClass('selected-category');
        }

        
        // Add highlight to the selected element, if any
        if (element) {
            $(element).parent().addClass('bg-rating');
        }

        // Check if id is 0 or empty; load static categories if true
        if (!id) {
            $('#categoryBody').html(`
                <div class="row mx-1">
                    <!-- Static category content -->
                    @foreach($categories as $category)
                    <div class="col-6 col-sm-4 col-md-3 col-lg-2 px-1 mb-3">
                        <a class="d-flex flex-column align-items-center text-reset subcategoryStyle" href="@if(is_null($category->parent_id)) {{ route('shop',['cat_id'=>$category->id])}} @else {{ route('shop',['sub_cat_id'=>$category->id])}} @endif">
                            <img class="cat-image lazyload m-auto mw-100"
                                src="{{ asset('posadmin/images/category/' . $category->image) }}"
                                data-src="{{ asset('posadmin/images/category/' . $category->image) }}"
                                alt="{{ $category->name }}"
                                onerror="this.onerror=null;this.src='{{ asset('posadmin/images/category/default.png') }}';">
                            <span class="text-center textStyle" style="white-space: nowrap;">{{ $category->name }}</span>
                        </a>
                    </div>
                    @endforeach
                    <!-- Add more static items as needed -->
                </div>
            `);
            return;
        }

        // Scroll to the top of the page for a better UX
        window.scrollTo({ top: 0, behavior: 'smooth' });

        // Show a loading spinner
        $('#categoryBody').html(`<span class="spinner-border position-absolute border-dark" style="top: 50%; left: 50%;"></span>`);

        // AJAX request to load categories dynamically
        $.post(
            "{{ route('categoryList') }}", 
            { 
                _token: '{{ csrf_token() }}',  // Use Laravel's CSRF token
                id: id 
            }
        ).done(function(data) {
            // Update the content with the loaded data
            $('#categoryBody').html(data);
        }).fail(() => {
            // Handle errors
            $('#categoryBody').html('<div class="text-danger text-center">Failed to load categories. Please try again later.</div>');
        });
    }
</script>
@endpush