@extends('layouts.merchant')

@section('title', 'Сотрудники')

@section('content')
<div class="max-w-3xl">
    <h1 class="text-2xl font-extrabold tracking-tight text-[var(--color-ink)]">Сотрудники</h1>
    <p class="mt-2 text-sm leading-relaxed text-[var(--color-muted)]">
        Дайте доступ к магазину тем, кто работает с заказами и сообщениями. Приглашение уходит на номер
        телефона — сотрудник увидит его в своём кабинете и подтвердит вход сам.
    </p>

    @if ($errors->any())
        <div class="mt-4 rounded-[var(--radius-md)] bg-[#FDECEE] px-4 py-3 text-sm font-semibold text-[var(--color-sale)]">{{ $errors->first() }}</div>
    @endif

    <div class="mt-6 rounded-[var(--radius-lg)] border border-[var(--color-line)] bg-white p-5">
        <h2 class="font-extrabold text-[var(--color-ink)]">Кто имеет доступ</h2>

        <div class="mt-3 divide-y divide-[#F1F2F5]">
            @foreach ($staff as $person)
                <div class="flex flex-wrap items-center justify-between gap-3 py-3">
                    <div class="min-w-0">
                        <div class="font-semibold text-[var(--color-ink)]">
                            {{ $person['name'] ?: $person['phone'] }}
                            @if ($person['pending'])
                                <span class="ml-1 rounded-full bg-[#FFF4E5] px-2 py-0.5 text-xs font-bold text-[#B26A00]">ждёт подтверждения</span>
                            @endif
                        </div>
                        <div class="mt-0.5 text-xs text-[var(--color-muted)]">
                            {{ $person['phone'] }} · {{ $person['role']->label() }} — {{ $person['role']->hint() }}
                        </div>
                    </div>

                    @if ($person['pending'])
                        <x-confirm-form :action="route('merchant.staff.cancel', $person['invitation_id'])" method="DELETE"
                                        title="Отменить приглашение?"
                                        message="Человек не сможет войти по нему. Пригласить снова можно в любой момент."
                                        confirm="Отменить">
                            <button type="button" class="text-sm font-semibold text-[var(--color-sale)] hover:underline">Отменить</button>
                        </x-confirm-form>
                    @elseif ($person['user_id'] !== auth()->id())
                        <x-confirm-form :action="route('merchant.staff.remove', $person['user_id'])" method="DELETE"
                                        title="Убрать доступ?"
                                        message="Сотрудник перестанет видеть заказы, сообщения и товары магазина. Его собственный аккаунт останется."
                                        confirm="Убрать" :danger="true">
                            <button type="button" class="text-sm font-semibold text-[var(--color-sale)] hover:underline">Убрать доступ</button>
                        </x-confirm-form>
                    @else
                        <span class="text-xs text-[var(--color-muted)]">это вы</span>
                    @endif
                </div>
            @endforeach
        </div>
    </div>

    <div class="mt-6 rounded-[var(--radius-lg)] border border-dashed border-[var(--color-line)] bg-white p-5">
        <h2 class="font-extrabold text-[var(--color-ink)]">Пригласить сотрудника</h2>

        <form method="POST" action="{{ route('merchant.staff.invite') }}" class="mt-3 grid gap-3 sm:grid-cols-[1fr_auto_auto] sm:items-end">
            @csrf
            <label class="block">
                <span class="mb-1.5 block text-sm font-semibold text-[var(--color-ink)]">Телефон</span>
                <input type="tel" inputmode="tel" name="phone" value="{{ old('phone') }}" required
                       placeholder="+7 999 123-45-67"
                       class="w-full rounded-[var(--radius-md)] border-[1.5px] border-[#E1E4EA] bg-white px-4 py-2.5 text-sm outline-none focus:border-[var(--color-primary)]">
            </label>

            <label class="block">
                <span class="mb-1.5 block text-sm font-semibold text-[var(--color-ink)]">Роль</span>
                <select name="role" class="w-full rounded-[var(--radius-md)] border-[1.5px] border-[#E1E4EA] bg-white px-4 py-2.5 text-sm outline-none focus:border-[var(--color-primary)]">
                    @foreach ($roles as $role)
                        <option value="{{ $role->value }}" @selected($role === \App\Enums\MembershipRole::Manager)>{{ $role->label() }}</option>
                    @endforeach
                </select>
            </label>

            <button class="rounded-[var(--radius-md)] bg-[var(--color-primary)] px-5 py-2.5 text-sm font-bold text-white shadow-[var(--shadow-primary)] hover:bg-[var(--color-primary-dark)]">Пригласить</button>
        </form>

        <p class="mt-3 text-xs leading-relaxed text-[var(--color-muted)]">
            Если у человека ещё нет аккаунта на teeu, приглашение дождётся его регистрации по этому номеру.
            Владелец видит и меняет всё, включая реквизиты и сотрудников; менеджер — заказы, сообщения,
            отзывы, товары и выгрузки, но не банковские реквизиты, приём оплаты и удаление выгрузок.
        </p>
    </div>
</div>
@endsection