@extends('app')
@section('content')
<style>
    .navbar-light.bg-light.border-top.border-bottom {
        display: none;
    }
    .selected-category{
        background: #F56B03;
    }
</style>
<div class="container-xl">
<div class="row">
    <div class="col-4 col-md-4 col-lg-2 p-0">
        <div class="border">
            <div class="p-3 border-bottom fs-16 fw-600">
                <a href="javascript:void(0);" 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">Just for you</span>
                </a>
            </div>
        </div>
        @foreach($categories as $category)
        @if(is_null($category->parent_id))
        <div class="border">
            <div class="p-3 border-bottom fs-16 fw-600">
                <a href="javascript:void(0)" class="opacity-60 d-flex flex-column align-item-center text-reset" onclick="loadCategories({{ $category->id }}, this)">
                    <img
                        class="cat-image m-auto w-25 ls-is-cached lazyloaded"
                        src="{{ asset('posadmin/images/category/' . $category->image) }}"
                        data-src="{{ asset('posadmin/images/category/' . $category->image) }}"
                        alt="Baking Tools"
                    />
                    <span class="text-center">{{ $category->name }}</span>
                </a>
            </div>
        </div>
        @endif
        @endforeach
    </div>
    <div class="col p-0">
        <div id="accordion">
            
        </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) {
            $('#accordion').html(`
                <div class="card m-0">
                    <div class="card-body">
                        <div class="row">
                            <!-- Static category content -->
                            @foreach($categories as $category)
                            <div class="col-4 col-md-3 col-lg-2">
                                <a class="d-flex flex-column align-items-center text-reset" href="{{ route('shop',['cat_id'=>$category->id])}}">
                                    <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">{{ $category->name }}</span>
                                </a>
                            </div>
                            @endforeach
                            <!-- Add more static items as needed -->
                        </div>
                    </div>
                </div>
            `);
            return;
        }

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

        // Show a loading spinner
        $('#accordion').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
            $('#accordion').html(data);
        }).fail(() => {
            // Handle errors
            $('#accordion').html('<div class="text-danger text-center">Failed to load categories. Please try again later.</div>');
        });
    }
</script>
@endpush