@extends('layouts.app')
@section('content')
<style>
    /* === Inventory Table Layout === */
    .wg-table-inventory .table-title-inventory,
    .wg-product-inventory {
        display: grid;
        grid-template-columns: 80px 600px 100px; /* tighter columns, no space between action & name */
        align-items: center;
        column-gap: 0; /* remove space between Action and Product Name */
    }

    /* optional: align icons & images neatly */
    /* .list-icon-function {
        display: flex;
        gap: 8px;
        justify-content: center;
    } */

    /* .list-icon-function .item a i {
        font-size: 16px;
    } */

    .wg-product-inventory .name {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .wg-product-inventory .name .image img {
        width: 50px;
        height: 50px;
        border-radius: 6px;
        object-fit: cover;
    }
    .wg-table.table-all-category .wg-product > *:nth-child(1) {
        width: 50px;
    }
    .wg-table.table-all-category ul.table-title > *:nth-child(1) {
        width: 50px;
    }
</style>
<div class="flex items-center flex-wrap justify-between gap20 mb-30">
    <h3>Archived Category</h3>
    <ul class="breadcrumbs flex items-center flex-wrap justify-start gap10">
        <li>
            <a href="javascript:void(0)"><div class="text-tiny">Dashboard</div></a>
        </li>
        <li>
            <i class="icon-chevron-right"></i>
        </li>
        <li>
            <a href="#"><div class="text-tiny">Product</div></a>
        </li>
        <li>
            <i class="icon-chevron-right"></i>
        </li>
        <li>
            <div class="text-tiny">Archived Category</div>
        </li>
    </ul>
</div>
<!-- all-category -->
<div class="wg-box">
    <div class="flex items-center justify-between gap10 flex-wrap">
        <div class="wg-filter flex-grow">
            <div class="show">
                <div class="text-tiny">Showing</div>
                <div class="select">
                    <select class="">
                        <option>10</option>
                        <option>20</option>
                        <option>30</option>
                    </select>
                </div>
                <div class="text-tiny">entries</div>
            </div>
            <form class="form-search">
                <fieldset class="name">
                    <input type="text" placeholder="Search here..." class="" name="name" tabindex="2" value="" aria-required="true" required="">
                </fieldset>
                <div class="button-submit">
                    <button class="" type="submit"><i class="icon-search"></i></button>
                </div>
            </form>
        </div>
    </div>
    <div class="wg-table table-all-category">
        <ul class="table-title flex gap20 mb-14">
            <li>
                <div class="body-title">Action</div>
            </li>
            <li>
                <div class="body-title">Category Name</div>
            </li>
            {{-- <li>
                <div class="body-title">Icon</div>
            </li> --}}
            <li>
                <div class="body-title">Date Created</div>
            </li>

        </ul>
        <ul class="flex flex-column">
            @foreach($categories as $category)

            <li class="wg-product item-row gap20">
                <div class="list-icon-function">
                    <div class="item edit">
                        <a href="{{route('shop-bo.category.undo-archived',['category_id' => $category->id])}}" class="confirm-link" data-confirm-message="Are you sure you want to move this category?" data-confirm-text="Yes"><i class="icon-edit-3"></i></a>
                    </div>
                    @if($whitelisted)
                    <div class="item edit">
                        <a href="{{route('shop-bo.category.permanent-delete',['category_id'=>Crypt::encrypt($category->id)])}}" class="confirm-link" data-confirm-message="Are you sure you want to permanent delete this category?" data-confirm-text="Yes"><i class="icon-trash-2"></i></a>
                    </div>
                    @endif
                </div>
                <div class="name">
                    <div class="image">
                        <img src="{{url('storage/admin/shop-bo/'.$category->image)}}" alt="{{$category->name}}">
                    </div>
                    <div class="title line-clamp-2 mb-0">
                        <a href="#" class="body-text">{{$category->name}}</a>
                    </div>
                </div>
                {{-- <div class="body-text text-main-dark mt-4">{{$category->icon}}</div> --}}
                <div class="body-text text-main-dark mt-4">{{$category->created_at}}</div>

            </li>
            @endforeach
        </ul>
    </div>
    @if($categories->count()>0)
    <div class="divider"></div>
    <div class="flex items-center justify-between flex-wrap gap10">
        <div class="text-tiny">
            Showing {{ $categories->count() }} entries
        </div>
        <ul class="wg-pagination">
            <!-- Previous Page Link -->
            @if ($categories->onFirstPage())
                <li class="disabled">
                    <a href="#"><i class="icon-chevron-left"></i></a>
                </li>
            @else
                <li>
                    <a href="{{ $categories->previousPageUrl() }}"><i class="icon-chevron-left"></i></a>
                </li>
            @endif

            <!-- Page Number Links -->
            @foreach ($categories->getUrlRange(1, $categories->lastPage()) as $page => $url)
                <li class="{{ $page == $categories->currentPage() ? 'active' : '' }}">
                    <a href="{{ $url }}">{{ $page }}</a>
                </li>
            @endforeach

            <!-- Next Page Link -->
            @if ($categories->hasMorePages())
                <li>
                    <a href="{{ $categories->nextPageUrl() }}"><i class="icon-chevron-right"></i></a>
                </li>
            @else
                <li class="disabled">
                    <a href="#"><i class="icon-chevron-right"></i></a>
                </li>
            @endif
        </ul>
    </div>
    @endif
</div>

@endsection
@section('page_script')
@parent
<script>
    $(".category-menu").addClass("active");
    $(".category-archived").addClass("active");
</script>
@endsection
<!-- App js -->