@extends('layouts.main')

@once
    @push('stylesheets')
        <link rel="stylesheet" href="{{asset('css/user-list.css')}}"/>
        <link href="{{ asset('css/pagination.css') }}" rel="stylesheet">
    @endpush
@endonce


@section('content')
    <div blade="{{ $viewName ?? 'unknown' }}" style="padding-top: 2.5rem">
        <x-page-header
        >
            VIEWING TOTAL LDAP ENTRIES ({{ $total_entries }})
        </x-page-header>
        <div class="d-flex justify-content-between mb-5 top-actions-container">
            <form id="ldap-records-form" method="GET"
                  action="{{ route('management-ldap.records', ['keyword' => request('keyword')]) }}"
                  style="display: contents">
                <x-ui.search-field id="ldap-record-search">

                </x-ui.search-field>
                <x-ui.blue-button form="ldap-records-form">SEARCH</x-ui.blue-button>
            </form>
        </div>
        <x-ui.list-wrapper :empty="count($accounts)">
            <x-slot name="tHead">
                <th class="text-center">UID</th>
                <th class="text-center">GROUPS</th>
                <th class="text-center">FULLNAME</th>
                <th class="text-center">EMAIL</th>
                <th class="text-center">PERSONOU</th>
                <th class="text-center">ACTIVE</th>
                @cannot('help-desk-access')
                    <th class="text-center">ACTION</th>
                @endcannot
            </x-slot>
            <x-slot name="tBody">
                @foreach($accounts as $account)
                    @php
                        $modal_id =str_replace('@', '-', $account['uid'])
                    @endphp
                    <tr>
                        <x-ui.modal.delete
                            model="ldap Entry"
                            action="{{route('management-ldap.delete',['uid' => $account['uid']])}}"
                            description="account: {{$account['uid']}} ({{$account['cn']}})"
                            :id="'delete-modal-'.$modal_id">
                        </x-ui.modal.delete>
                        <td class="text-center">
                            <b>{{$account['uid']}}</b>
                        </td>
                        <td class="text-center">
                            @if(!empty(count($account['ncsrdpapyrosgroup'])))
                                <b> hover to see list of groups</b>

                                <div class="hoverable">

                                    <b>Account Papyros Groups:</b>
                                    <ul>
                                        @foreach($account['ncsrdpapyrosgroup'] as $group)
                                            <li><b>{{$group}}</b></li>
                                        @endforeach
                                    </ul>
                                </div>
                            @else
                                <b> no groups found</b>
                            @endif
                        </td>

                        <td class="text-center">
                            <b>{{$account['cn']}}</b>
                        </td>

                        <td class="text-center">
                            <b>{{$account['email']}}</b>
                        </td>

                        <td class="text-center">
                            <b>{{$account['ncsrdpersonou']}}</b>
                        </td>
                        <td class="text-center status-column">
                            <div class="{{$account['ncsrdisactive'] ? "active" : 'inactive'}}"></div>
                        </td>
                        @cannot('help-desk-access')
                            <td class="text-center action-column">
                                <span for="action-{{$loop->index}}" class="actions-toggle">
                                    <img src="{{asset('images/actions-toggle.svg')}}" alt="open actions">
                                </span>
                                <div class="actions-popup">
                                    <span class="close-popup">
                                        X
                                    </span>
                                    <ul>
                                        <li>
                                            <a data-toggle='modal' data-target="delete-modal-{{$modal_id}}">
                                                DELETE
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </td>
                        @endcannot
                    </tr>

                @endforeach
            </x-slot>
        </x-ui.list-wrapper>
        <div class="pagination-container {{$page_size==10 ? 'ten' :''}}">
                            <div class="perpage">
                <x-ui.select name="page_size" label="ITEMS PER PAGE" id="perpage"
                             :options="$options"
                             :selected="$currentPerPage"
                             onchange="changePageSize(event)"
                             :selected="$currentPerPage"
                             :form="$form ?? null"
                >
                </x-ui.select>
                <script>
                    /**
                     * takes the search parameters and makes new request with the new page szie at page 1
                     */
                    function changePageSize(event) {

                        const newPageSize = event.target.value;
                        // Redirect to the same page with the updated page size query parameter
                        const currentUrl = new URL(window.location.href);
                        const keyword = currentUrl.searchParams.get('keyword') || '';
                        currentUrl.searchParams.set('page_size', newPageSize);
                        currentUrl.searchParams.set('page', '1');
                        currentUrl.searchParams.set('keyword', keyword);
                        window.location.href = currentUrl.toString();

                    }
                </script>
            </div>


            <!-- Pagination controls -->
            <div>
                <ul class="pagination">
                    <div class="paginator">
                        <li class="@if($page==1) inactive @endif prev">
                            <a href="{{ route('management-ldap.records', ['page_size' => $page_size, 'page' => $page - 1, 'keyword' => request('keyword')]) }}">
                                <img src="{{asset('images/down-arrow-blue.svg')}}" alt="previous"/>
                            </a>
                        </li>
                        @php
                            $outOfRange = false;
                            $last = $page_count;
                            $current = $page
                        @endphp

                        @for ($i = 1; $i <= $last; $i++)

                            @if(($i >= 1 && $i <= 3) || ($i > $current - 3 && $i < $current + 3) || ($i <= $last && $i > $last - 3))

                                @php
                                    $outOfRange = false
                                @endphp
                                <li class="@if($current == $i) current @endif"><a
                                        href="{{ route('management-ldap.records', ['page_size' => $page_size, 'page' => $i,'keyword' => request('keyword')]) }}">{{$i}}</a>
                                </li>
                            @else
                                @if($outOfRange == false)
                                    @php
                                        $outOfRange = true
                                    @endphp
                                    <li>...</li>
                                @endif
                            @endif

                        @endfor

                        <li class="@if(!(count($accounts) == $page_size)) inactive @endif next">
                            <a href="{{ route('management-ldap.records', ['page_size' => $page_size, 'page' => $page + 1,'keyword' => request('keyword')]) }}">
                                <img src="{{asset('images/down-arrow-blue.svg')}}" alt="next"/>
                            </a>
                        </li>
                    </div>
                </ul>
            </div>
        </div>
@endsection