@php($title = 'Приглашения агентов')
@extends('layouts.app')
@section('content')
    <div class="d-flex mb-3 sticky-top bg-light rounded-3">
        <div class="p-2 w-100"></div>
        <div class="p-2 flex-shrink-1">
            <form class="" method="post" action="{{ route('company.invites.create', ['company' => 1]) }}">
                @csrf
                <input class="btn btn-primary" type="submit" value="Создать приглашение" />
            </form>
        </div>
    </div>

    <h5>Действующие приглашения для<br><b>{{ $company->name }}</b></h5>
    <div class="row g-2 w-100">
        @foreach ($invites as $invite)
            <div class="d-flex flex-row w-100 gap-3 bg-light rounded-3 p-2 align-items-center">
                <div class="col flex-fill">
                    <div class="input-group">
                        <input disabled id="invite_{{ $invite->hash }}" value="{{ route('company.invite.open', ['hash' => $invite->hash]) }}" type="text"
                            class="form-control" placeholder="Recipient’s username" aria-label="Recipient’s username"
                            aria-describedby="basic-addon2">
                        <button data-target="invite_{{ $invite->hash }}" class="copy-invite-btn btn btn-secondary border-secondry" type="button" id="button-addon2"><i
                                class="bi bi-clipboard"></i></button>
                    </div>
                </div>
                <div class="col-3 d-flex">
                    Зарегистрировалось:&nbsp;
                    <div class="d-block rounded rounded-circle bg-secondary text-light text-center"
                        style="width:1.4rem;height:1.4rem;">
                        {{ $invite->registrations()->count() }}
                    </div>
                </div>
                <div class="col-2">
                    Создано:<br>{{ $invite->created_at->diffForHumans() }}
                </div>
                <div class="col-2">
                    Обновлено:<br>{{ $invite->updated_at->diffForHumans() }}
                </div>
                <div class="col text-end">
                    <div class="dropdown d-none d-md-block" style="">
                        <button class="btn btn-light" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="false">
                            <i class="bi bi-three-dots-vertical"></i>
                        </button>
                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton" data-popper-placement="bottom-start">
                            <a class="dropdown-item"
                                href="{{ route('company.invite.agents', ['invite' => $invite]) }}">Агенты</a>
                            <form method="post" action="{{ route('company.invite.delete', ['invite' => $invite]) }}">
                                @csrf
                                <button class="dropdown-item" type="submit">Удалить</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
    <script>
        const copyBtns = document.querySelectorAll('.copy-invite-btn');
        Array.from(copyBtns).forEach(btn => {
            btn.addEventListener('click', function (event) {
                targetId = '#' + event.target.dataset.target;
                navigator.clipboard.writeText(document.querySelector(targetId).value)
                    .then(() => {
                        alert('Ссылка скопирована в буфер обмена');
                    })
                    .catch(error => {
                        console.error(`Ошибка копирования: ${error}`)
                    });
            });
        });
    </script>
    </div>
@endsection