@extends('layouts.app')
@section('content')
<style>
    /* === Inventory Table Layout === */
    .wg-table-inventory .table-title-inventory,
    .wg-product-inventory {
        display: grid;
        grid-template-columns: 80px 200px 100px 100px 150px;
        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: start;
    }

    /* .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:80px;
    }
    .wg-table.table-all-category ul.table-title > *:nth-child(1) {
        width:80px;
    }
</style>
<div class="flex items-center flex-wrap justify-between gap20 mb-30">
    <h3>User Permissions</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>
            <div class="text-tiny"> Roles And Permissions</div>
        </li>
         <li>
            <i class="icon-chevron-right">User Permissions</i>
        </li>
    </ul>
</div>
<!-- all-branch -->
<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="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>
        </div>
        <div class="wg-table table-all-category">
            <ul class="table-title flex mb-14">
                <li>
                    <div class="body-title">Action</div>
                </li>
                <li>
                    <div class="body-title">Name</div>
                </li>
                <li>
                    <div class="body-title">Username</div>
                </li>
                <li>
                    <div class="body-title">Role</div>
                </li>
                <li>
                    <div class="body-title">Email Address</div>
                </li>
                <li>
                    <div class="body-title">Contact</div>
                </li>
                <li>
                    <div class="body-title">Joined Date</div>
                </li>
            </ul>
            <ul class="flex flex-column">
                @foreach($users_query as $user)
                <li class="wg-product item-row">
                    <div class="list-icon-function">
                        <div class="item edit">
                            <a href="{{route('shop-bo.roles-and-permissions.users-list.edit',['users_id' => Crypt::encrypt($user->id)])}}">
                                <i class="icon-edit-3"></i>
                            </a>
                        </div>
                    </div>
                    <div class="body-text text-main-dark mt-4">
                        {{$user->firstname}} {{$user->middlename}} {{$user->surname}}
                    </div>
                    <div class="body-text text-main-dark mt-4">{{$user->username}}</div>
                    <div class="body-text text-main-dark mt-4">{{$user->role->title}}</div>
                    <div class="body-text text-main-dark mt-4">{{$user->email}}</div>
                    <div class="body-text text-main-dark mt-4">{{$user->contact}}</div>
                    <div class="body-text text-main-dark mt-4">{{$user->created_at}}</div>
                </li>
                @endforeach
            </ul>
        </div>
        @if($users_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 {{ $users_query->count() }} entries
                </div>
                <ul class="wg-pagination">
                    <!-- Previous Page Link -->
                    @if ($users_query->onFirstPage())
                        <li class="disabled">
                            <a href="#"><i class="icon-chevron-left"></i></a>
                        </li>
                    @else
                        <li>
                            <a href="{{ $users_query->previousPageUrl() }}"><i class="icon-chevron-left"></i></a>
                        </li>
                    @endif

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

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

@endsection
@section('page_script')
@parent
<script>
    $(".roles-and-permissions-menu").addClass("active");
    $(".roles-and-permissions-user-list").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 -->