@push('stylesheets')
    <link rel="stylesheet" href="{{asset('css/custom-alert.css')}}"/>
@endpush

<div blade="{{ $viewName ?? 'unknown' }}">
    <x-ui.list-wrapper :empty="count($users) > 0">
        <x-slot name="tHead">
            <th class="text-center">ID ({{count($users)}})</th>
            <th>FIRST NAME</th>
            <th>LAST NAME</th>
            <th>EMAIL</th>
            <th>ACTIVATION STEP</th>
            <th class="text-center">ISSUES</th>
            <th class="text-center">TRIES</th>
            <th class="text-center">LINK ACTIVE</th>
            <th>EXPIRES AT</th>
            <th>URL</th>
            <th class="text-center">ACTION</th>
        </x-slot>
        <x-slot name="tBody">
            @foreach($users as  $user)
                <tr>
                    <td class="text-center">
                        <b>{{$user->link->id}}</b>
                    </td>

                    <td>
                        <span>{{$user->firstname}}</span>
                    </td>


                    <td>
                        <b>{{$user->lastname}}</b>
                    </td>

                    <td>
                        <span>{{$user->email}}</span>
                    </td>

                    <td>

                        @if($user->link->invitation_status)

                            <span>{{$user->link->invitation_status->current_step ?? ""}}</span>

                        @else
                            <span>
                            LINK HAS NO STATUS
                        </span>
                        @endif
                    </td>

                    <td class="text-center">
                        @if($user->userActivationRequest)

                            <div class="has-issue-container">
                                {{--has request and step is the expected--}}
                                @if(!$user->userActivationRequest->resolved &&  $user->link->invitation_status->current_step === 'dua_activation_pending' )
                                    <a href="{{route('management-requests.resolve-dua-request', ['dua_request' => $user->userActivationRequest->id])}}">
                                        <span class="has-issue">
                                        !
                                        </span>
                                    </a>
                                    {{--has request and step is the UNEXCPECTED--}}
                                @elseif(!$user->userActivationRequest->resolved)

                                    <a
                                        title="!!this request is probably older!!"
                                        href="{{route('management-requests.resolve-dua-request', ['dua_request' => $user->userActivationRequest->id])}}">
                                        <span class="has-issue">
                                        !!!
                                        </span>
                                    </a>
                                @else
                                    RESOLVED
                                @endif
                            </div>

                        @else

                            <span>No issues</span>

                        @endif

                    </td>


                    <td class="text-center">
                        @if($user->link->invitation_status)
                            <div class="tries-container">
                                <span
                                    class="tries {{$user->link->invitation_status->tries_remaining >= 1 ? "strike" : ''}}"></span>
                                <span
                                    class="tries {{$user->link->invitation_status->tries_remaining >= 2 ? "strike" : ''}}"></span>
                                <span
                                    class="tries {{$user->link->invitation_status->tries_remaining == 3 ? "strike" : ''}}"></span>
                                <div>
                        @endif
                    </td>

                    <td class="text-center status-column">
                        <div class="{{$user->invitationLinkIsValid() ? "active" : 'inactive'}}"></div>
                    </td>

                    <td>
                        <span>{{\Carbon\Carbon::parse($user->link->expired_at)->format('d/m/Y')}}</span>
                    </td>

                    <td class="copy-container">
                        <img class="copy-url" data-value={{$user->link->url}} src="{{asset('images/copy.svg')}}"/>
                        <div class="alert-container">
                            <div class="alert-message"></div><br>
                            <button class="alert-btn">OK</button>
                        </div>
                    </td>
                    <td class="text-center action-column">
                        <span class="actions-toggle">
                            <img src="{{asset('images/actions-toggle.svg')}}" alt="open acitons">
                        </span>
                        <div class="actions-popup">
                            <span class="close-popup">X</span>
                            <ul>
                                @if(!$user->invitationLinkIsValid() && !$user->isActiveDua)
                                    <li>
                                        <form action="{{route('management-users.invite.single',['user' => $user])}}"
                                              method="POST">
                                            @csrf
                                            <button type="SUBMIT">RE - INVITE</button>
                                        </form>
                                    </li>
                                @endif


                                <li>
                                    <a href="{{route('management-users.edit', ['user'=> $user])}}">
                                        VIEW USER
                                    </a>
                                </li>

                            </ul>
                        </div>
                    </td>


                </tr>
            @endforeach
        </x-slot>
    </x-ui.list-wrapper>

    {{$users->appends($_GET)->links('components.ui.paginator', ['form'=>'invitation-links-form'])}}

</div>

@section('javascripts')

    <script>
        $q = jQuery.noConflict();

        $q(document).ready(function () {

            const copyUrlImages = $q('.copy-url');

            copyUrlImages.each(function () {
                $q(this).on('click', function () {

                    const valueToCopy = $q(this).attr('data-value');
                    const tempInput = document.createElement('input');
                    const confirmBox = $q(this).next();
                    tempInput.value = valueToCopy;
                    document.body.appendChild(tempInput);

                    tempInput.select();
                    document.execCommand('copy');

                    document.body.removeChild(tempInput);

                    $q(confirmBox).find(".alert-message").text('Your link is copied');

                    $q(confirmBox).css('display', 'flex');

                    $q(confirmBox).find(".alert-btn").on('click', function() {
                        $q(confirmBox).css('display', 'none');
                    });

                });
            });
        });
    </script>
@endsection