@extends('layouts.app')
@section('content')
<div class="flex items-center flex-wrap justify-between gap20 mb-30">
    <h3>All Products</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">All Products</div>
        </li>
    </ul>
</div>
<!-- product-list -->
<div class="wg-box">
    <div class="title-box">
        <i class="icon-coffee"></i>
        <div class="body-text">Tip search by Product ID: Each product is provided with a unique ID, which you can rely on to find the exact product you need.</div>
    </div>
    <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="row-filter">
                        <select>
                            <option {{$filters['rows'] == 10 ? 'selected' : ''}}>10</option>
                            <option {{$filters['rows'] == 50 ? 'selected' : ''}}>50</option>
                            <option {{$filters['rows'] == 100 ? 'selected' : ''}}>100</option>
                            <option {{$filters['rows'] == "All" ? 'selected' : ''}}>All</option>
                        </select>
                    </div>
                    <div class="text-tiny">entries</div>
                </div>
                <form class="form-search">
                    <input type="hidden" name="rows">
                    <fieldset class="name">
                        <input type="text" placeholder="Search here..." class="" name="search" tabindex="2" value="{{$filters['search']??""}}">
                    </fieldset>
                    <div class="button-submit">
                        <button type="submit"><i class="icon-search"></i></button>
                    </div>
                </form>
            </div>
        @can('create','product')
        <a class="tf-button style-1 w208" href="{{route('shop-bo.product.add')}}"><i class="icon-plus"></i>Add new</a>
        @endcan
    </div>
    <div class="wg-table table-product-list">
        <ul class="table-title flex gap20 mb-14">
            <li style="flex: 0 0 80px;">
                <div class="body-title">Action</div>
            </li>
            <li style="flex: 1 1 150px;">
                <div class="body-title">Product</div>
            </li>
            <li>
                <div class="body-title">Category</div>
            </li>
            <li>
                <div class="body-title">SKU</div>
            </li>
            <li>
                <div class="body-title">Sale</div>
            </li>
            <li>
                <div class="body-title">Quantity</div>
            </li>
            <li>
                <div class="body-title">Stock</div>
            </li>

        </ul>
        <ul class="flex flex-column">
            @if(count($products_query) == 0)
                <div class="alert alert-warning py-3">No record found</div>
            @else
                @foreach($products_query as $product)
                <li class="wg-product item-row gap20">
                    <div class="list-icon-function " style="flex: 0 0 80px;">
                        @can('update','product')
                        <div class="item edit">
                            <a href="{{route('shop-bo.product.edit',['product_id' => Crypt::encrypt($product->id)])}}"><i class="icon-edit-3"></i></a>
                        </div>
                        @endcan
                        @can('delete','product')
                        <div class="item edit">
                            <a href="{{route('shop-bo.product.destroy',['product_id' => Crypt::encrypt($product->id)])}}" class="confirm-link" data-confirm-message="Are you sure you want to move this product to archived?" data-confirm-text="Yes"><i class="icon-trash-2"></i></a>
                        </div>
                        @endcan
                    </div>
                    <div class="name" style="flex: 1 1 150px;">
                        <div class="image">
                            <img src="{{url('storage/admin/shop-bo/'.$product->image)}}" alt="{{$product->name}}">
                        </div>
                        <div class="title line-clamp-2 mb-0">
                            <a href="#" class="body-text">{{$product->name}}</a>
                        </div>
                    </div>
                    <div class="body-text text-main-dark mt-4">{{$product->category ?? $product->categories}}</div>
                    <div class="body-text text-main-dark mt-4">{{$product->sku}}</div>
                    <div class="body-text text-main-dark mt-4">{{$product->sales ?? 0}}</div>
                    <div class="body-text text-main-dark mt-4">{{$product->stock}}</div>
                    <div>
                        @if($product->stock > $product->stock_treshold)
                        <div class="block-available bg-1 fw-7">In Stock</div>
                        @elseif($product->stock > 0)
                        <div class="block-stock bg-1 fw-7">Low Stock</div>
                        @else
                        <div class="block-not-available bg-1 fw-7">Out Of Stock</div>
                        @endif
                    </div>
                </li>
                @endforeach
            @endif
        </ul>
    </div>
    @if($products_query->count()>0)
        @if($filters['rows'] != "All")
        <div class="divider"></div>
        <div class="flex items-center justify-between flex-wrap gap10">
            <div class="text-tiny">
                Showing {{ $products_query->count() }} entries
            </div>
            <ul class="wg-pagination">
                <!-- Previous Page Link -->
                @if ($products_query->onFirstPage())
                    <li class="disabled">
                        <a href="#"><i class="icon-chevron-left"></i></a>
                    </li>
                @else
                    <li>
                        <a href="{{ $products_query->previousPageUrl() }}"><i class="icon-chevron-left"></i></a>
                    </li>
                @endif

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

                <!-- Next Page Link -->
                @if ($products_query->hasMorePages())
                    <li>
                        <a href="{{ $products_query->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
    @endif
    {{--<div class="flex items-center justify-between flex-wrap gap10">
        <div class="text-tiny">Showing 10 entries</div>
        <ul class="wg-pagination">
            <li>
                <a href="#"><i class="icon-chevron-left"></i></a>
            </li>
            <li>
                <a href="#">1</a>
            </li>
            <li class="active">
                <a href="#">2</a>
            </li>
            <li>
                <a href="#">3</a>
            </li>
            <li>
                <a href="#"><i class="icon-chevron-right"></i></a>
            </li>
        </ul>
    </div>--}}
</div>


@endsection
@section('page_script')
@parent
<script>
    $(".product-menu").addClass("active");
    $(".product-index").addClass("active");
</script>
<script>
    $('input[name="rows"]').val("{{$filters['rows']??"10"}}");
    $('.row-filter select').change(function () {
        var selectedValue = $(this).val();
        $('input[name="rows"]').val(selectedValue);
    });
</script>
@endsection
<!-- App js -->