@extends('layouts.app')
@section('title')
@endsection
@section('css')
    @push('scripts')

    @endpush
@endsection
@section('content')

    <div class="container-fluid flex-grow-1 container-p-y">
        @include('layouts.bread-detail')
        @if(Auth::guard('portal')->user()->role_id == _ROLE_ADMINISTRATOR_)
            {{--<h5 class="mb-1">Roles List</h5>--}}
            {{--<p class="mb-6">
                A role provided access to predefined menus and features so that depending on <br />
                assigned role an administrator can have access to what user needs.
            </p>--}}
        @endif
        <!-- Role cards -->
        <div class="row g-6">
            @if(Auth::guard('portal')->user()->role_id == _ROLE_ADMINISTRATOR_)
                @foreach($roles_list as $subRoleData)
                    <div class="col-xl-6 col-lg-6 col-md-6">
                        <div class="card">
                            <div class="card-body">
                                @if(@$subRoleData->users)
                                    <div class="d-flex justify-content-between align-items-center mb-4" style="min-height: 40px;">
                                        <h6 class="fw-normal mb-0 text-body">Total {!! @count($subRoleData->users) !!} users</h6>
                                        <ul class="list-unstyled d-flex align-items-center avatar-group mb-0">

                                            @php
                                                $remainingUsers = 0;
                                                $showMaxUser = 3;
                                                $totalUsers = count($subRoleData->users);
                                                if($totalUsers > $showMaxUser){
                                                    $remainingUsers = $totalUsers - $showMaxUser;
                                                }
                                            @endphp
                                            @foreach($subRoleData->users as $user_id => $subUserData)
                                                @if($loop->iteration > $showMaxUser)
                                                    @continue
                                                @endif
                                                <li
                                                    data-bs-toggle="tooltip"
                                                    data-popup="tooltip-custom"
                                                    data-bs-placement="top"
                                                    title="{!! $subUserData['first_name']. " ".$subUserData['last_name'] !!}"
                                                    class="avatar pull-up">

                                                    @if($subUserData['profile_image'])
                                                        <img class="rounded-circle" src="{!! url(_USER_IMAGE_PATH_."/".$subUserData['profile_image']) !!}" alt="{!! $subUserData['first_name'] !!}" />
                                                    @else
                                                        {!! generateAvatar($subUserData['first_name'], $subUserData['last_name']) !!}
                                                    @endif
                                                </li>
                                            @endforeach

                                            @if($remainingUsers)
                                                <li class="avatar">
                                                    <span
                                                        class="avatar-initial rounded-circle pull-up"
                                                        data-bs-toggle="tooltip"
                                                        data-bs-placement="bottom"
                                                        title="4 more">+{!! $remainingUsers !!}
                                                    </span>
                                                </li>
                                            @endif
                                        </ul>
                                    </div>
                                @endif
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="role-heading">
                                        <h5 class="mb-1">{!! $subRoleData->name !!}</h5>
                                        {{--<a href="javascript:;" class="btn-edit-role" data-href="{!! tokenize_url(route('portal.roles.edit'), ['id' => $subRoleData->id]) !!}">
                                            <span>Edit Role</span>
                                        </a>--}}
                                    </div>
                                    <a href="javascript:void(0);" class="btn-sm btn btn-label-primary btn-edit-role" data-href="{!! tokenize_url(route('portal.roles.edit'), ['id' => $subRoleData->id]) !!}"><span>Edit Role</span></a>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            @endif

            <div class="col-12">
                <div class="card card-action mb-4">
                    <div class="card-header">
                        <h5 class="card-action-title mb-0">
                            <i class="icon-base ti tabler-filter me-2"></i>Filters
                        </h5>
                        <div class="card-action-element">
                            <ul class="list-inline mb-0">
                                <li class="list-inline-item">
                                    <a href="javascript:void(0);" class="card-collapsible"><i class="icon-base ti tabler-chevron-down"></i></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="collapse">
                        <div class="card-body">
                            <div class="row filter-row">
                                <div class="col-md-4 control-group">
                                    <label class="form-label" for="role_id">Role</label>
                                    <x-form.select
                                        name="role_id"
                                        :options="_ROLE_ARR_"
                                        :selected="request('role_id')"
                                        placeholder="Select"
                                        class="form-select"
                                    />
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label" for="status_id">Status</label>
                                    {{--{!! Form::select('status', _PRODUCT_STATUS_ARR_, request('status') ?? null, ['class' => 'form-select list-filter-dropdown', 'id' => 'status', 'placeholder' => 'Select']) !!}--}}
                                    <x-form.select
                                        name="status"
                                        :options="_PRODUCT_STATUS_ARR_"
                                        :selected="request('status')"
                                        placeholder="Select"
                                        class="form-select"
                                    />
                                </div>
                                <div class="col-md-4 control-group text-right mt-5">
                                    <a href="javascript:void(0);" class="btn btn-primary btn-apply-filters">Filter</a>
                                    <a href="javascript:void(0);" class="btn btn-label-secondary btn-reset-filters">Reset</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Role Table -->
                <div class="card">

                    <div class="card-body p-0">
                        <div class="card-datatable table-responsive">
                            <table class="datatables-users table"
                                   data-href="{!! route('portal.users') !!}"
                                   data-add-url="{!! route('portal.users.add') !!}"
                                   data-user-can-edit="{!! in_array('Edit Users', $rolePermissions) !!}"
                                   data-user-can-add="{!! in_array('Add Users', $rolePermissions) !!}"
                                   data-user-can-delete="{!! in_array('Delete Users', $rolePermissions) !!}">
                                <thead class="border-top">
                                <tr>
                                    <th></th>
                                    <th></th>
                                    <th>User</th>
                                    <th>Role</th>
                                    <th>Email</th>
                                    <th>Last Login</th>
                                    <th>Portal Access</th>
                                    <th>Actions</th>
                                </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
                <!--/ Role Table -->
            </div>
        </div>
        <!--/ Role cards -->
    </div>

@endsection

@push('scripts')

    <script src="{{ URL::asset('js/common/common.js') }}"></script>
    <script src="{{ URL::asset('assets/js/cards-actions.js') }}"></script>
    <script src="{{ URL::asset('assets/vendor/libs/cleavejs/cleave-phone.js') }}"></script>
    <script src="{{ URL::asset('build/libs/cleave.js/cleave.min.js') }}"></script>
    <script src="{{ URL::asset('js/users/list.js?ver=1.2') }}"></script>
    {{--<script src="{!! url('assets/js/app-ecommerce-product-list.js') !!}"></script>--}}
@endpush