@extends('layouts.cabinet')

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

@section('cabinet')
    <div>
        <div class="mb-6 flex items-center justify-between">
            <h1 class="text-2xl font-bold">Профиль</h1>
            <form method="POST" action="{{ route('logout') }}">
                @csrf
                <button type="submit" class="text-sm font-medium text-red-600 hover:underline">Выйти</button>
            </form>
        </div>

        @if (session('status'))
            <div class="mb-4 rounded-lg bg-brand-50 px-4 py-3 text-sm text-brand-800">{{ session('status') }}</div>
        @endif

        @if ($errors->any())
            <div class="mb-4 rounded-lg bg-red-50 px-4 py-3 text-sm text-red-700">
                <ul class="list-inside list-disc space-y-1">
                    @foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach
                </ul>
            </div>
        @endif

        {{-- Подтверждение смены почты кодом со старого адреса --}}
        @if ($pendingEmail)
            <div class="card mb-4 border-brand-300 bg-brand-50 p-5">
                <h2 class="text-sm font-bold text-ink">Подтвердите смену почты</h2>
                <p class="mt-1 text-sm text-gray-700">
                    Мы отправили код на вашу текущую почту <span class="font-medium">{{ $user->email }}</span>.
                    Введите его, чтобы сменить адрес на <span class="font-medium">{{ $pendingEmail }}</span>.
                </p>

                @if ($errors->emailChange->any())
                    <p class="mt-2 text-sm text-red-600">{{ $errors->emailChange->first() }}</p>
                @endif

                <form method="POST" action="{{ route('cabinet.profile.email.confirm') }}" class="mt-3 flex flex-wrap items-center gap-2">
                    @csrf
                    <input type="text" name="code" inputmode="numeric" autocomplete="one-time-code" maxlength="6"
                           placeholder="6-значный код" class="input w-44 tracking-[0.3em]" required>
                    <button type="submit" class="btn-brand">Подтвердить</button>
                </form>

                <div class="mt-3 flex items-center gap-4 text-sm">
                    <form method="POST" action="{{ route('cabinet.profile.email.resend') }}">
                        @csrf
                        <button type="submit" class="font-semibold text-brand-700 hover:underline">Отправить код повторно</button>
                    </form>
                    <form method="POST" action="{{ route('cabinet.profile.email.cancel') }}">
                        @csrf
                        <button type="submit" class="font-medium text-gray-500 hover:underline">Отмена</button>
                    </form>
                </div>
            </div>
        @endif

        <form method="POST" action="{{ route('cabinet.profile.update') }}" enctype="multipart/form-data" class="card space-y-5 p-6">
            @csrf
            @method('PUT')

            <div class="flex items-center gap-4">
                <div class="grid h-16 w-16 place-items-center overflow-hidden rounded-full bg-brand-100 text-2xl font-bold text-brand-700">
                    @if ($user->avatarUrl())
                        <img src="{{ $user->avatarUrl() }}" alt="" class="h-full w-full object-cover">
                    @else
                        {{ $user->initial() }}
                    @endif
                </div>
                <div>
                    <label class="mb-1 block text-sm font-medium text-gray-700">Фото / логотип</label>
                    <input type="file" name="avatar" accept="image/*" class="text-sm">
                </div>
            </div>

            <div>
                <label class="mb-1 block text-sm font-medium text-gray-700">Имя</label>
                <input type="text" name="name" value="{{ old('name', $user->name) }}" required class="input">
            </div>
            <div>
                <label class="mb-1 block text-sm font-medium text-gray-700">Название компании <span class="text-muted">(необязательно)</span></label>
                <input type="text" name="company_name" value="{{ old('company_name', $user->company_name) }}" class="input">
            </div>
            <div x-data="{ n: {{ (int) mb_strlen(old('description', $user->description) ?? '') }} }">
                <label class="mb-1 block text-sm font-medium text-gray-700">Описание <span class="text-muted">(необязательно)</span></label>
                <textarea name="description" rows="4" maxlength="2000" class="input"
                          @input="n = $event.target.value.length"
                          placeholder="Расскажите о себе или компании: чем занимаетесь, условия, гарантии…">{{ old('description', $user->description) }}</textarea>
                <p class="mt-1 text-right text-xs text-muted"><span x-text="n"></span> / 2000</p>
            </div>
            <div>
                <label class="mb-1 block text-sm font-medium text-gray-700">Почта <span class="text-muted">(необязательно)</span></label>
                <input type="email" name="email" value="{{ old('email', $user->hasRealEmail() ? $user->email : '') }}"
                       placeholder="Не указана" class="input">
                @if ($user->hasRealEmail())
                    <p class="mt-1 text-xs text-muted">При смене адреса мы отправим код на текущую почту для подтверждения.</p>
                @else
                    <p class="mt-1 text-xs text-muted">Аккаунт без почты. Укажите адрес, чтобы получать уведомления — мы отправим на него код для подтверждения.</p>
                @endif
            </div>

            <div class="flex items-center justify-end border-t border-gray-100 pt-5">
                <button type="submit" class="btn-brand">Сохранить</button>
            </div>
        </form>
    </div>

    {{-- Мои номера телефонов (подтверждение через обратный flash call) --}}
    <div class="card mt-6 p-6" x-data="phoneManager(@js($phones->map(fn ($p) => ['id' => $p->id, 'phone' => $p->phone, 'is_primary' => $p->is_primary, 'verified' => $p->verified_at !== null])->all()), @js((string) ($user->public_phone_id ?? '')))">
        <div class="mb-1 flex items-center justify-between gap-3">
            <h2 class="text-lg font-bold text-gray-900">Мои номера</h2>
        </div>
        <p class="mb-4 text-sm text-muted">В объявлении можно показать любой из подтверждённых номеров. Основной используется по умолчанию.</p>

        {{-- Список номеров --}}
        <ul class="divide-y divide-gray-100">
            <template x-for="p in phones" :key="p.id">
                <li class="flex items-center gap-3 py-3">
                    <span class="font-medium text-gray-900" x-text="p.phone"></span>
                    <span x-show="p.is_primary" class="rounded-full bg-brand-100 px-2 py-0.5 text-xs font-medium text-brand-800">Основной</span>
                    <span x-show="p.verified && !p.is_primary" class="rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700">Подтверждён</span>
                    <span x-show="!p.verified" class="rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-800">Не подтверждён</span>
                    <span class="ml-auto flex items-center gap-3 text-sm">
                        <button type="button" x-show="p.verified && !p.is_primary" @click="setPrimary(p)" class="text-brand-600 hover:underline">Сделать основным</button>
                        <button type="button" x-show="!p.is_primary" @click="remove(p)" class="text-red-600 hover:underline">Удалить</button>
                    </span>
                </li>
            </template>
            <li x-show="!phones.length" class="py-3 text-sm text-muted">Номеров пока нет.</li>
        </ul>

        {{-- Какой подтверждённый номер показывать на странице профиля --}}
        <div x-show="phones.some(p => p.verified)" x-cloak class="mt-4 border-t border-gray-100 pt-4">
            <div class="mb-1 flex items-center gap-2">
                <label class="block text-sm font-medium text-gray-700">Телефон на странице профиля</label>
                <span x-show="publicSaved" x-cloak x-transition class="text-xs font-medium text-green-600">✓ Сохранено</span>
            </div>
            {{-- x-init+$nextTick: проставляем сохранённый номер после того, как x-for отрисует <option>
                 (иначе x-model биндится раньше опций и select сбрасывается на «Не показывать»). --}}
            <select x-model="publicPhoneId" @change="savePublicPhone()"
                    x-init="$nextTick(() => { $el.value = publicPhoneId })" class="input">
                <option value="">Не показывать телефон</option>
                <template x-for="p in phones.filter(p => p.verified)" :key="p.id">
                    <option :value="String(p.id)" x-text="p.phone"></option>
                </template>
            </select>
            <p class="mt-1 text-xs text-muted">Сохраняется автоматически при выборе — отдельная кнопка не нужна. Показывается посетителям вашего профиля; в объявлениях номер выбирается отдельно.</p>
        </div>

        {{-- Добавление номера --}}
        <div class="mt-4 border-t border-gray-100 pt-4">
            @include('cabinet.partials.phone-verify-fields')
        </div>
    </div>
@endsection