@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 120px;
        align-items: center;
        column-gap: 0; /* remove space between Action and Product Name */
    }

    /* optional: align icons & images neatly */
    .list-icon-function {
        display: flex;
        gap: 15px;
        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>Partner</h3>
    <ul class="breadcrumbs flex items-center flex-wrap justify-start gap10">
        <li>
            <a href="#"><div class="text-tiny">Users</div></a>
        </li>
        <li>
            <i class="icon-chevron-right"></i>
        </li>
        <li>
            <div class="text-tiny">Partner</div>
        </li>
    </ul>
</div>
<!-- all-user -->
<div class="wg-box">
    <div class="flex items-center justify-between gap10 flex-wrap">
        <div class="wg-filter flex-grow">
            <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">User</div>
            </li>
            <li>
                <div class="body-title">Phone</div>
            </li>
            <li>
                <div class="body-title">Email</div>
            </li>
        </ul>
        <ul class="flex flex-column">
           @foreach($users as $user)
            <li class="wg-product item-row gap20">

                <div class="list-icon-function">
                    <div class="item eye">
                        <a href="{{ route('shop-bo.account.dealer.show',['dealer_id' => Crypt::encrypt($user->id)]) }}"><i class="icon-eye"></i></a>
                    </div>
                     <div class="item edit">
                        <a href="{{ route('shop-bo.account.destroy',['id'=>$user->id]) }}" class="confirm-link"
                            data-confirm-message="Are you sure you want to move this dealer to archived?"
                            data-confirm-text="Yes">

                            <i class="icon-trash-2"></i>
                        </a>
                    </div>
                </div>
                <div class="name flex-grow">
                    <div class="image">
                        <img src="{{(!empty($user->profile)?url("storage/shop/".$user->profile):url('assets/backoffice/media/profile/default.jpg'))}}" alt="{{$user->profile}}">
                    </div>
                    <div>
                        <div class="title">
                            <a href="#" class="body-title-2">{{$user->firstname.' '.$user->middlename.' '.$user->surname}}</a>
                        </div>
                        <div class="text-tiny">{{$user->username}} {{$user->id_number}}</div>
                    </div>
                </div>
                <div class="body-text">{{$user->contact}}</div>
                <div class="body-text">{{$user->email}}</div>
                {{-- <div class="list-icon-function">
                    <div class="item eye">
                        <a href="{{route('shop-bo.account.dealer.show',['dealer_id' => Crypt::encrypt($user->id)])}}"><i class="icon-eye"></i></a>
                    </div>
                    <div class="list-icon-function">
                        <div class="item edit">
                            <a href="{{route('shop-bo.account.destroy',['id'=>$user->id])}}" class="confirm-link" data-confirm-message="Are you sure you want to move this dealer to archived?" data-confirm-text="Yes"><i class="icon-trash-2"></i></a>
                        </div>
                    </div>
                </div> --}}
                {{-- <div class="">
                    <div class="icon" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        <svg width="20" height="22" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd"
                                d="M6.85353 1.81675C7.00421 0.91265 7.78644 0.25 8.70302 0.25H11.297C12.2136 0.25 12.9958 0.91265 13.1465 1.81675L13.36 3.0978C13.3789 3.21129 13.463 3.34312 13.6275 3.43418C13.7099 3.47981 13.7914 3.52694 13.8719 3.57554C14.0328 3.67272 14.1891 3.67975 14.297 3.63933L15.5139 3.18345C16.3722 2.86189 17.3372 3.208 17.7955 4.00177L19.0924 6.24821C19.5507 7.04199 19.368 8.05075 18.6603 8.63329L17.656 9.46011C17.5671 9.5333 17.4952 9.67172 17.4987 9.85864C17.4996 9.90566 17.5 9.95278 17.5 10C17.5 10.0472 17.4996 10.0943 17.4987 10.1413C17.4952 10.3283 17.5671 10.4667 17.656 10.5399L18.6603 11.3667C19.368 11.9492 19.5507 12.958 19.0924 13.7518L17.7955 15.9982C17.3372 16.792 16.3722 17.1381 15.5139 16.8165L14.297 16.3607C14.1891 16.3202 14.0328 16.3273 13.8719 16.4244C13.7914 16.4731 13.7099 16.5202 13.6275 16.5658C13.463 16.6569 13.3789 16.7887 13.36 16.9022L13.1465 18.1832C12.9958 19.0874 12.2136 19.75 11.297 19.75H8.70302C7.78644 19.75 7.00421 19.0873 6.85353 18.1832L6.64002 16.9022C6.62111 16.7887 6.53703 16.6569 6.37251 16.5658C6.29008 16.5202 6.20861 16.4731 6.12812 16.4245C5.96719 16.3273 5.81089 16.3203 5.703 16.3607L4.48613 16.8166C3.62781 17.1381 2.66282 16.792 2.20454 15.9982L0.907557 13.7518C0.44927 12.958 0.632026 11.9493 1.33966 11.3667L1.81634 11.9457L1.33966 11.3667L2.34401 10.5399C2.43291 10.4667 2.50477 10.3283 2.50131 10.1414C2.50044 10.0943 2.5 10.0472 2.5 10C2.5 9.95279 2.50044 9.90568 2.50131 9.85866C2.50477 9.67174 2.43291 9.53331 2.34401 9.46012L1.33966 8.63331C0.632025 8.05076 0.44927 7.042 0.907556 6.24823L2.20454 4.00179C2.66283 3.20801 3.62781 2.8619 4.48613 3.18346L5.70298 3.63934C5.81087 3.67975 5.96717 3.67273 6.12811 3.57555C6.2086 3.52695 6.29008 3.47981 6.37251 3.43418C6.53703 3.34312 6.62111 3.21129 6.64002 3.0978L6.85353 1.81675ZM9.99977 7.74992C8.75713 7.74992 7.74977 8.75728 7.74977 9.99992C7.74977 11.2426 8.75713 12.2499 9.99977 12.2499C11.2424 12.2499 12.2498 11.2426 12.2498 9.99992C12.2498 8.75728 11.2424 7.74992 9.99977 7.74992Z"
                                fill="#0A0A0C"></path>
                        </svg>
                    </div>

                    <!-- Dropdown Menu -->
                    <ul class="dropdown-menu" style="width:150px;font-size:14px;padding:5px">
                        <li class="mb-5">
                            <a class="dropdown-item" href="{{ route('shop-bo.account.dealer.show',['dealer_id' => Crypt::encrypt($user->id)]) }}">
                                <i class="icon-eye me-2"></i> View
                            </a>
                        </li>
                        <li>
                            <a class="dropdown-item confirm-link"
                            href="{{ route('shop-bo.account.destroy',['id'=>$user->id]) }}"
                            data-confirm-message="Are you sure you want to move this dealer to archived?"
                            data-confirm-text="Yes">
                            <i class="icon-trash-2 me-2"></i> Archive
                            </a>
                        </li>
                    </ul>
                </div> --}}

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

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

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

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