@extends('layouts.app')
@section('title', 'Team')

@section('content')
    <x-page-header title="Team"
                   :lede="$usage['unlimited'] ? $members->count().' members' : $usage['used'].' of '.$usage['limit'].' seats used'" />

    <div class="grid two">
        <x-card title="Members" :flush="true">
            <div class="table-wrap">
                <table class="data">
                    <thead><tr><th>Member</th><th>Roles</th><th>Status</th><th></th></tr></thead>
                    <tbody>
                        @foreach ($members as $member)
                            <tr>
                                <td>
                                    <span class="row"><x-avatar :name="$member->name" />
                                        <span>
                                            <strong>{{ $member->name }}</strong>
                                            @if ($member->is_owner)<x-badge tone="info">Owner</x-badge>@endif
                                            <span class="sub">{{ $member->email }}</span>
                                        </span>
                                    </span>
                                </td>
                                <td>{{ $member->roles->pluck('name')->join(', ') ?: '—' }}</td>
                                <td>
                                    @if (! $member->is_active)
                                        <x-badge tone="negative">Deactivated</x-badge>
                                    @elseif ($member->two_factor_confirmed_at)
                                        <x-badge tone="positive">2FA on</x-badge>
                                    @else
                                        <x-badge tone="muted">Active</x-badge>
                                    @endif
                                </td>
                                <td class="right">
                                    <div class="menu">
                                        <button class="btn small secondary" data-menu type="button">Manage</button>
                                        <div class="panel">
                                            @can('update', $member)
                                                <a href="#edit-{{ $member->id }}">Edit details</a>
                                            @endcan
                                            @can('deactivate', $member)
                                                @if ($member->is_active)
                                                    <form method="POST" action="{{ route('app.team.deactivate', $member) }}"
                                                          data-confirm="Deactivate {{ $member->name }}? They will be signed out immediately.">
                                                        @csrf<button type="submit">Deactivate</button>
                                                    </form>
                                                @else
                                                    <form method="POST" action="{{ route('app.team.reactivate', $member) }}">
                                                        @csrf<button type="submit">Reactivate</button>
                                                    </form>
                                                @endif
                                            @endcan
                                            @can('delete', $member)
                                                <a class="small" href="#remove-{{ $member->id }}" style="color:var(--negative)">Remove from team</a>
                                            @endcan
                                        </div>
                                    </div>
                                </td>
                            </tr>

                            @can('update', $member)
                                <tr id="edit-{{ $member->id }}" style="display:none" class="editor">
                                    <td colspan="4" style="background:var(--sunken)">
                                        <form method="POST" action="{{ route('app.team.update', $member) }}">
                                            @csrf @method('PUT')
                                            <div class="grid form">
                                                <x-field name="name" label="Name" :value="$member->name" required />
                                                <x-field name="job_title" label="Job title" :value="$member->job_title" />
                                                <x-field name="phone" label="Phone" :value="$member->phone" />
                                            </div>
                                            @can('roles.manage')
                                                <div class="field">
                                                    <span class="label">Roles</span>
                                                    <div class="row wrap">
                                                        @foreach ($roles as $role)
                                                            <label class="check">
                                                                <input type="checkbox" name="roles[]" value="{{ $role->id }}"
                                                                       @checked($member->roles->contains($role->id))>
                                                                <span>{{ $role->name }}</span>
                                                            </label>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            @endcan
                                            <button class="btn primary small" type="submit">Save</button>
                                        </form>
                                    </td>
                                </tr>
                            @endcan

                            @can('delete', $member)
                                <tr id="remove-{{ $member->id }}" style="display:none" class="editor">
                                    <td colspan="4" style="background:#FEF2F2">
                                        {{-- Records must go somewhere. Deleting an owner of contacts and
                                             deals without reassigning them would orphan the data. --}}
                                        <form method="POST" action="{{ route('app.team.destroy', $member) }}"
                                              data-confirm="Remove {{ $member->name }} and reassign everything they own?">
                                            @csrf @method('DELETE')
                                            <x-field name="reassign_to" label="Reassign their records to" type="select" required
                                                     :options="$members->where('id', '!=', $member->id)->pluck('name', 'id')" />
                                            <button class="btn danger small" type="submit">Remove {{ $member->name }}</button>
                                        </form>
                                    </td>
                                </tr>
                            @endcan
                        @endforeach
                    </tbody>
                </table>
            </div>
        </x-card>

        <div class="stack">
            @can('create', \App\Models\User::class)
                <x-card title="Invite someone">
                    @if (! $usage['unlimited'] && $usage['used'] >= $usage['limit'])
                        <div class="alert warn" style="margin:0">
                            All {{ $usage['limit'] }} seats on your plan are in use.
                            <a href="{{ route('app.billing.plans') }}">Add more</a>.
                        </div>
                    @else
                        <form method="POST" action="{{ route('app.team.invite') }}">
                            @csrf
                            <x-field name="email" label="Work email" type="email" required />
                            <x-field name="role_id" label="Role" type="select" required
                                     :options="$roles->pluck('name', 'id')"
                                     hint="You cannot invite someone into a role at or above your own." />
                            <button class="btn primary" type="submit">Send invitation</button>
                        </form>
                    @endif
                </x-card>
            @endcan

            @if ($invitations->isNotEmpty())
                <x-card title="Pending invitations">
                    @foreach ($invitations as $invitation)
                        <div class="row between" style="padding:8px 0;border-bottom:1px solid var(--line)">
                            <span>
                                {{ $invitation->email }}
                                <span class="sub">{{ $invitation->role?->name }} · expires {{ $invitation->expires_at->diffForHumans() }}</span>
                            </span>
                            <form method="POST" action="{{ route('app.team.invitations.revoke', $invitation) }}">
                                @csrf @method('DELETE')
                                <button class="btn small danger" type="submit">Revoke</button>
                            </form>
                        </div>
                    @endforeach
                </x-card>
            @endif
        </div>
    </div>

    <script>
        // Inline editors open from the row menu, so the page stays a table
        // rather than becoming a modal stack.
        document.addEventListener('click', (event) => {
            const link = event.target.closest('a[href^="#edit-"], a[href^="#remove-"]');
            if (!link) return;
            event.preventDefault();
            const row = document.querySelector(link.getAttribute('href'));
            if (row) row.style.display = row.style.display === 'none' ? 'table-row' : 'none';
        });
    </script>
@endsection