@extends('layouts.account')

@section('title', 'Профиль')

@php($input = 'w-full rounded-[var(--radius-md)] border border-[var(--color-line)] bg-white h-10 px-3.5 text-[13.5px] outline-none focus:border-[var(--color-primary)]')
@php($lbl = 'mb-1.5 block text-sm font-semibold text-[var(--color-ink)]')

@section('content')
<h1 class="text-[22px] font-extrabold tracking-[-0.5px] text-[var(--color-ink)] sm:text-[24px]">Профиль</h1>

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

{{-- Edit profile (#2) --}}
<div class="mt-6 max-w-xl rounded-[var(--radius-lg)] border border-[var(--color-line)] bg-white p-5">
    <form method="POST" action="{{ route('account.profile.update') }}" class="space-y-4">
        @csrf @method('PUT')
        <label class="block"><span class="{{ $lbl }}">Имя</span>
            <input name="name" value="{{ old('name', $user->name) }}" class="{{ $input }}">
        </label>
        <label class="block"><span class="{{ $lbl }}">Email</span>
            <input name="email" type="email" value="{{ old('email', $user->email) }}" class="{{ $input }}">
        </label>
        @foreach ($user->verifiedPhones as $phone)
            <div class="text-sm text-[var(--color-muted)]">Телефон: <span class="font-semibold text-[var(--color-ink)]">{{ \App\Support\PhoneNumber::format($phone->phone) }}</span> (подтверждён)</div>
        @endforeach
        <button type="submit" class="h-10 rounded-[var(--radius-md)] bg-[var(--color-primary)] px-5 text-[13.5px] font-bold text-white hover:bg-[var(--color-primary-dark)]">Сохранить</button>
    </form>
</div>

{{-- Danger zone: delete account (#3) --}}
<div class="mt-8 max-w-xl rounded-[var(--radius-lg)] border border-[#F5C2C7] bg-[#FDF6F6] p-6">
    <h2 class="text-lg font-extrabold text-[var(--color-sale)]">Удаление аккаунта</h2>
    <p class="mt-1 text-sm text-[var(--color-slate)]">
        Будут удалены ваш профиль, профиль продавца, его YML-фиды и товары. История заказов сохраняется.
        Действие необратимо. Для подтверждения введите:
        <span class="font-mono font-bold text-[var(--color-ink)]">Удалить {{ $user->displayName() }}</span>
    </p>
    {{-- Последнее подтверждение — модалкой в виде <x-confirm-form>, а не confirm().
         Сам компонент здесь не подходит: у него своя форма со статичными полями,
         а на сервер должна уйти фраза, которую человек ввёл. Поэтому модалка
         отправляет эту форму (requestSubmit), а Enter в поле без модалки её не
         отправит. --}}
    @php($phrase = 'Удалить '.$user->displayName())
    <form id="delete-account-form" method="POST" action="{{ route('account.profile.destroy') }}" class="mt-4 space-y-3"
          x-data="{ phrase: '', ask: false, confirmed: false, get ready() { return this.phrase.trim() === @js($phrase) } }"
          @submit="if (! confirmed) { $event.preventDefault(); if (ready) ask = true }">
        @csrf @method('DELETE')
        <input name="confirmation" x-model="phrase" placeholder="{{ $phrase }}" autocomplete="off"
               class="h-10 w-full rounded-[var(--radius-md)] border border-[var(--color-line)] bg-white px-3.5 text-[13.5px] outline-none focus:border-[var(--color-sale)]">
        <button type="button" @click="ask = true" :disabled="! ready"
                class="h-10 rounded-[var(--radius-md)] bg-[var(--color-sale)] px-5 text-[13.5px] font-bold text-white disabled:opacity-45">
            Удалить аккаунт навсегда
        </button>

        <template x-teleport="body">
            <div x-show="ask" x-cloak x-transition.opacity.duration.150ms
                 class="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 p-4"
                 @keydown.escape.window="ask = false" @click.self="ask = false">
                <div class="w-full max-w-sm rounded-[var(--radius-xl)] bg-white p-6 shadow-[var(--shadow-frame)]" x-show="ask" x-transition>
                    <h2 class="text-lg font-extrabold text-[var(--color-ink)]">Удалить аккаунт навсегда?</h2>
                    <p class="mt-2 text-sm leading-relaxed text-[var(--color-slate)]">Профиль, магазин, его фиды и товары удалятся без возможности восстановления. История заказов сохранится.</p>
                    <div class="mt-6 flex justify-end gap-2">
                        <button type="button" @click="ask = false"
                                class="rounded-[var(--radius-md)] border-[1.5px] border-[#E1E4EA] bg-white px-4 py-2 text-sm font-bold text-[var(--color-ink)] hover:bg-[#F7F8FA]">Отмена</button>
                        <button type="button" @click="confirmed = true; $nextTick(() => document.getElementById('delete-account-form').requestSubmit())"
                                class="rounded-[var(--radius-md)] bg-[var(--color-sale)] px-4 py-2 text-sm font-bold text-white hover:opacity-90">Удалить</button>
                    </div>
                </div>
            </div>
        </template>
    </form>
</div>
@endsection