@extends('layouts.app')
@section('content')

<style>
    /* === Inventory Table Layout === */
    .wg-table-inventory .table-title-inventory,
    .wg-product-inventory {
        display: grid;
        grid-template-columns: 80px 1fr 120px 80px 120px; /* 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>Inventory</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">Inventory</div></a>
        </li>
    </ul>
</div>
<div class="wg-box">
    @if(is_null($branch_id))
    <h3>Main Branch Inventory</h3>
    @else
    <div>
        <h3 class="mb-0">{{$branch_query->city." ".$branch_query->province." Branch"}} Inventory</h3>
    </div>
    @endif
    <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 class="" type="submit"><i class="icon-search"></i></button>
                </div>
            </form>
        </div>
        @can('update','inventory')
        <a class="tf-button style-1 w208" href="{{route('shop-bo.inventory.adjust',['branch_id' => Crypt::encrypt($branch_id)])}}"><i class="icon-plus"></i>Adjust Inventory</a>
        @endcan
    </div>


    <div class="wg-table table-all-category wg-table-inventory">
        <ul class="table-title flex gap20 mb-14 table-title-inventory">
            <li >
                <div class="body-title">Action</div>
            </li>
            <li >
                <div class="body-title">Product Name</div>
            </li>
            <li>
                <div class="body-title">Stock Status</div>
            </li>
            <li>
                <div class="body-title">Stock</div>
            </li>
            <li>
                <div class="body-title">Last Update</div>
            </li>

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

            <li class="wg-product item-row gap20 wg-product-inventory">
                <div class="list-icon-function">
                    {{-- <div class="item eye">
                        <a href="{{route('shop-bo.inventory',['branch_id' => Crypt::encrypt($branch_id),'product_id' => Crypt::encrypt($product->id)])}}"><i class="icon-eye"></i></a>
                    </div> --}}
                    <div class="item edit">
                        <a href="{{route('shop-bo.inventory.adjust',['branch_id' => Crypt::encrypt($branch_id),'product_id' => Crypt::encrypt($product->id)])}}"><i class="icon-edit-3"></i></a>
                    </div>
                    <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>
                </div>
                <div class="name">
                    <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">

                    @if($product->stocks[0]->amount > $product->stocks[0]->threshold)
                    <div class="block-available bg-1 fw-7">In Stock</div>
                    @elseif($product->stocks[0]->amount > 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>
                <div class="body-text text-main-dark mt-4">{{$product->stocks[0]->amount}}</div>
                <div class="body-text text-main-dark mt-4">{{$product->updated_at}}</div>

            </li>
            @endforeach
        </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
    <h3>Stock History</h3>
    <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="stock-history-row-filter">
                    <select>
                        <option {{$stock_history_filters['stock_history_rows'] == 10 ? 'selected' : ''}}>10</option>
                        <option {{$stock_history_filters['stock_history_rows'] == 50 ? 'selected' : ''}}>50</option>
                        <option {{$stock_history_filters['stock_history_rows'] == 100 ? 'selected' : ''}}>100</option>
                        <option {{$stock_history_filters['stock_history_rows'] == "All" ? 'selected' : ''}}>All</option>
                    </select>
                </div>
                <div class="text-tiny">entries</div>
            </div>
            <form class="form-search">
                <input type="hidden" name="stock_history_rows">
                <fieldset class="name">
                    <input type="text" placeholder="Search here..." class="" name="stock_history_search" tabindex="2" value="{{$stock_history_filters['stock_history_search']??""}}">
                </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"></div>
            </li>
           <li>
                <div class="body-title">Product Name</div>
            </li>
            <li>
                <div class="body-title">User</div>
            </li>
            <li>
                <div class="body-title">Category</div>
            </li>
            <li>
                <div class="body-title">Description</div>
            </li>
            <li>
                <div class="body-title">Old Quantity</div>
            </li>
            <li>
                <div class="body-title">New Quantity</div>
            </li>
            <li>
                <div class="body-title">Date</div>
            </li>
        </ul>
        <ul class="flex flex-column">
             @foreach($inventory_history_query as $inventory_log)
            <li class="wg-product item-row gap20">
                <div class="list-icon-function">
                    <div class="item">
                    </div>
                </div>
                <div class="name">
                    <div class="image">
                        <img src="{{ url('storage/admin/shop-bo/' .$inventory_log->inventory->product->image) }}" alt="{{ $inventory_log->inventory->product->name }}">
                    </div>
                    <div class="title line-clamp-2 mb-0">
                        <a href="#" class="body-text">{{$inventory_log->inventory->product->name}}</a>
                    </div>
                </div>
                <div class="body-text text-main-dark mt-4">{!! !empty($inventory_log->user->username) ? $inventory_log->user->username."<br>".$inventory_log->user->id_number : 'Guest'!!}</div>
                <div class="body-text text-main-dark mt-4">{{$inventory_log->category}}</div>
                <div class="body-text text-main-dark mt-4">{!!$inventory_log->description ?? '-'!!}</div>
                <div class="body-text text-main-dark mt-4">{{number_format($inventory_log->old_stock,0)}}</div>
                <div class="body-text text-main-dark mt-4">{{number_format($inventory_log->new_stock,0)}}</div>
                <div class="body-text text-main-dark mt-4">{{$inventory_log->created_at}}</div>
            </li>
            @endforeach
        </ul>
    </div>
    @if($inventory_history_query->count()>0)
    @if($stock_history_filters['stock_history_rows'] != "All")
    <div class="divider"></div>
    <div class="flex items-center justify-between flex-wrap gap10">
        <div class="text-tiny">
            Showing {{ $inventory_history_query->count() }} entries
        </div>
        <ul class="wg-pagination">
            <!-- Previous Page Link -->
            @if ($inventory_history_query->onFirstPage())
                <li class="disabled">
                    <a href="#"><i class="icon-chevron-left"></i></a>
                </li>
            @else
                <li>
                    <a href="{{ $inventory_history_query->previousPageUrl() }}"><i class="icon-chevron-left"></i></a>
                </li>
            @endif

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

            <!-- Next Page Link -->
            @if ($inventory_history_query->hasMorePages())
                <li>
                    <a href="{{ $inventory_history_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
    @if(is_null($branch_id))
    <div class="divider"></div>
    <h3>Branch List</h3>
    <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="branch-list-row-filter">
                    <select>
                        <option {{$branch_list_filters['branch_list_rows'] == 10 ? 'selected' : ''}}>10</option>
                        <option {{$branch_list_filters['branch_list_rows'] == 50 ? 'selected' : ''}}>50</option>
                        <option {{$branch_list_filters['branch_list_rows'] == 100 ? 'selected' : ''}}>100</option>
                        <option {{$branch_list_filters['branch_list_rows'] == "All" ? 'selected' : ''}}>All</option>
                    </select>
                </div>
                <div class="text-tiny">entries</div>
            </div>
            <form class="form-search">
                <input type="hidden" name="branch_list_rows">
                <fieldset class="name">
                    <input type="text" placeholder="Search here..." class="" name="branch_list_search" tabindex="2" value="{{$branch_list_filters['branch_list_search']??""}}">
                </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">Province</div>
            </li>
            <li>
                <div class="body-title">City</div>
            </li>
        </ul>
        <ul class="flex flex-column">
            @foreach($branch_query as $branch)
            <li class="wg-product item-row gap20">
                <div class="list-icon-function">
                    {{-- <div class="item">
                        <a href="{{route('shop-bo.inventory',['branch_id' => Crypt::encrypt($branch->id)])}}"><i class="icon-eye"></i></a>
                    </div> --}}
                    <div class="item edit">
                        <a href="{{route('shop-bo.branches.destroy',['id'=>$branch->id])}}"  class="confirm-link" data-confirm-message="Are you sure you want to move this branch to archived?" data-confirm-text="Yes"><i class="icon-trash-2"></i></a>
                    </div>
                </div>
                <div class="name">
                    <a href="#" class="body-title-2">{{$branch->province}}</a>
                </div>
                <div class="body-text text-main-dark mt-4">{{$branch->city}}</div>
            </li>
            @endforeach
        </ul>
    </div>

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

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

                <!-- Next Page Link -->
                @if ($branch_query->hasMorePages())
                    <li>
                        <a href="{{ $branch_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
    @endif
</div>

@endsection
@section('page_script')
@parent
<script>
    $(".inventory-menu").addClass("active");
    $(".inventory-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>
<script>
    $('input[name="stock_history_rows"]').val("{{$stock_history_filters['stock_history_rows']??"10"}}");
    $('.stock-history-row-filter select').change(function () {
        var stockHistorySelectedValue = $(this).val();
        $('input[name="stock_history_rows"]').val(stockHistorySelectedValue);
    });
</script>
<script>
    $('input[name="branch_list_rows"]').val("{{$branch_list_filters['branch_list_rows']??"10"}}");
    $('.branch-list-row-filter select').change(function () {
        var branchListSelectedValue = $(this).val();
        $('input[name="branch_list_rows"]').val(branchListSelectedValue);
    });
</script>
@endsection
<!-- App js -->