{{--
=====================================================
Etebarit - by Gisoo Web Solutions
------------------------------------------------------
Gisoo.net
------------------------------------------------------
Copyright (c) 2026 Gisoo Web Solutions
=====================================================
This code is protected by copyright
=====================================================
File: index.blade.php
------------------------------------------------------
Use: The user's profile: identity summary + stats, the
     read-only verified identity with a save-once birth
     date, and the editable contact email.
=====================================================
--}}

@extends('layouts.user')

@section('title', __('front.profile.title'))

@php use App\Support\Format; @endphp

@section('breadcrumb')
    <x-ui.breadcrumb :items="[
        ['label' => __('front.dashboard.breadcrumb'), 'url' => route('account.dashboard')],
        ['label' => __('front.profile.breadcrumb')],
    ]" />
@endsection

@section('page')
    @php
        $status = $user->verification_status;
        $badge = match ($status) {
            \App\Models\User::VERIFICATION_APPROVED => 'bg-[#e7f7ee] text-green-600',
            \App\Models\User::VERIFICATION_PENDING => 'bg-[#fff5e6] text-amber-600',
            default => 'bg-secondary-50 text-secondary-500',
        };
        $currentJy = (int) \Morilog\Jalali\Jalalian::now()->getYear();
    @endphp

    <div class="mb-5">
        <h1 class="mb-1 text-2xl font-bold tracking-tight">{{ __('front.profile.title') }}</h1>
        <p class="text-sm text-ink-muted">{{ __('front.profile.subtitle') }}</p>
    </div>

    <div class="grid grid-cols-1 gap-5 lg:grid-cols-[320px_1fr]">
        {{-- ===== Profile card ===== --}}
        <div class="rounded-2xl border border-line bg-white p-6 text-center">
            <div class="mx-auto mb-4 flex size-24 items-center justify-center rounded-full bg-gradient-to-bl from-[#e9e5f9] to-[#d9d1f4] text-[32px] font-bold text-primary-600">
                {{ mb_substr($user->first_name, 0, 1) }}.{{ mb_substr($user->last_name, 0, 1) }}
            </div>
            <div class="text-lg font-bold">{{ $user->fullName() }}</div>
            <div class="mt-1 text-[13px] text-ink-faint" dir="ltr">{{ Format::persianDigits($user->mobile) }}</div>
            <div class="mt-3.5 inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-[12px] font-bold {{ $badge }}">
                @if ($status === \App\Models\User::VERIFICATION_APPROVED)
                    <svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                @endif
                {{ __('front.profile.status.'.$status) }}
            </div>

            <div class="mt-5 flex flex-col gap-3 border-t border-[#f0eff5] pt-4 text-right">
                <div class="flex items-center justify-between">
                    <span class="text-[12.5px] text-ink-faint">{{ __('front.profile.member_since') }}</span>
                    <span class="text-[13px] font-bold">{{ Format::persianDigits(Format::jalali($user->created_at, 'F Y')) }}</span>
                </div>
                <div class="flex items-center justify-between">
                    <span class="text-[12.5px] text-ink-faint">{{ __('front.profile.ceiling') }}</span>
                    <span class="text-[13px] font-bold text-primary-600" dir="ltr">@toman($ceiling)</span>
                </div>
                <div class="flex items-center justify-between">
                    <span class="text-[12.5px] text-ink-faint">{{ __('front.profile.available') }}</span>
                    <span class="text-[13px] font-bold text-green-600" dir="ltr">@toman($available)</span>
                </div>
            </div>
        </div>

        {{-- ===== Edit column ===== --}}
        <div class="flex flex-col gap-5" x-data="contactChange(@js([
            'endpoints' => [
                'request' => route('account.profile.contact.request'),
                'verify' => route('account.profile.contact.verify'),
            ],
            'labels' => [
                'mobileTitle' => __('front.profile.change.mobile_title'),
                'emailTitle' => __('front.profile.change.email_title'),
                'mobileLabel' => __('front.profile.change.mobile_label'),
                'emailLabel' => __('front.profile.change.email_label'),
                'mobileHint' => __('front.profile.change.mobile_hint'),
                'emailHint' => __('front.profile.change.email_hint'),
                'codeSentMobile' => __('front.profile.change.code_sent_mobile'),
                'codeSentEmail' => __('front.profile.change.code_sent_email'),
                'resendIn' => __('front.profile.change.resend_in'),
                'networkError' => __('front.profile.change.network_error'),
            ],
        ]))">

            {{-- Identity (read-only + save-once birth date) --}}
            <form method="POST" action="{{ route('account.profile.update') }}" x-data="{ busy: false }" x-ref="form">
            @csrf
            @method('PUT')
            <div class="rounded-2xl border border-line bg-white p-6">
                <div class="mb-4.5 text-base font-bold">{{ __('front.profile.identity_title') }}</div>
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div>
                        <label class="mb-1.5 block text-[13px] font-bold">{{ __('front.profile.first_name') }}</label>
                        <input value="{{ $user->first_name }}" disabled class="w-full cursor-not-allowed rounded-xl border-[1.5px] border-[#eee] bg-[#f4f3f7] px-3.5 py-3 text-sm text-ink-faint outline-none">
                    </div>
                    <div>
                        <label class="mb-1.5 block text-[13px] font-bold">{{ __('front.profile.last_name') }}</label>
                        <input value="{{ $user->last_name }}" disabled class="w-full cursor-not-allowed rounded-xl border-[1.5px] border-[#eee] bg-[#f4f3f7] px-3.5 py-3 text-sm text-ink-faint outline-none">
                    </div>
                    <div>
                        <label class="mb-1.5 block text-[13px] font-bold">{{ __('front.profile.national_id') }}</label>
                        <input value="{{ Format::persianDigits((string) $user->national_id) }}" disabled dir="ltr" class="w-full cursor-not-allowed rounded-xl border-[1.5px] border-[#eee] bg-[#f4f3f7] px-3.5 py-3 text-left text-sm text-ink-faint outline-none">
                    </div>
                    <div>
                        <label class="mb-1.5 block text-[13px] font-bold">{{ __('front.profile.birth_date') }}</label>
                        @if ($user->birth_date !== null)
                            <input value="{{ Format::persianDigits(Format::jalali($user->birth_date, 'Y/m/d')) }}" disabled dir="ltr" class="w-full cursor-not-allowed rounded-xl border-[1.5px] border-[#eee] bg-[#f4f3f7] px-3.5 py-3 text-left text-sm text-ink-faint outline-none">
                        @else
                            <div class="grid grid-cols-3 gap-2">
                                <div class="relative">
                                    <select name="birth_year" class="w-full appearance-none rounded-xl border-[1.5px] border-[#e3e1ec] bg-[#fbfbfd] px-3 py-3 text-sm outline-none transition focus:border-primary-600 focus:bg-white">
                                        <option value="">{{ __('front.profile.birth_year') }}</option>
                                        @for ($y = $currentJy - 10; $y >= 1300; $y--)
                                            <option value="{{ $y }}" @selected(old('birth_year') == $y)>{{ Format::persianDigits((string) $y) }}</option>
                                        @endfor
                                    </select>
                                    <svg class="pointer-events-none absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-ink-faint" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
                                </div>
                                <div class="relative">
                                    <select name="birth_month" class="w-full appearance-none rounded-xl border-[1.5px] border-[#e3e1ec] bg-[#fbfbfd] px-3 py-3 text-sm outline-none transition focus:border-primary-600 focus:bg-white">
                                        <option value="">{{ __('front.profile.birth_month') }}</option>
                                        @foreach (__('front.profile.months') as $i => $mName)
                                            <option value="{{ $i + 1 }}" @selected(old('birth_month') == $i + 1)>{{ $mName }}</option>
                                        @endforeach
                                    </select>
                                    <svg class="pointer-events-none absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-ink-faint" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
                                </div>
                                <div class="relative">
                                    <select name="birth_day" class="w-full appearance-none rounded-xl border-[1.5px] border-[#e3e1ec] bg-[#fbfbfd] px-3 py-3 text-sm outline-none transition focus:border-primary-600 focus:bg-white">
                                        <option value="">{{ __('front.profile.birth_day') }}</option>
                                        @for ($d = 1; $d <= 31; $d++)
                                            <option value="{{ $d }}" @selected(old('birth_day') == $d)>{{ Format::persianDigits((string) $d) }}</option>
                                        @endfor
                                    </select>
                                    <svg class="pointer-events-none absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-ink-faint" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
                <div class="mt-3 flex items-start gap-1.5 text-[12px] leading-6 text-ink-faint">
                    <svg class="mt-0.5 size-3.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="10" width="18" height="11" rx="2.5"/><path d="M7 10V7a5 5 0 0 1 10 0v3"/></svg>
                    {{ __('front.profile.identity_note') }}
                </div>
            </div>

            {{-- Save: the birth date is the only identity field that can be
                 set here, and only while it is still empty. --}}
            @if ($user->birth_date === null)
                <div class="mt-5 flex justify-end">
                    <button type="button" x-bind:disabled="busy"
                            x-on:click="$store.confirm.ask({ message: @js(__('front.profile.confirm_save')), onConfirm: () => { busy = true; $refs.form.submit(); } })"
                            class="inline-flex items-center justify-center gap-2 rounded-xl bg-primary-600 px-7 py-3 text-sm font-bold text-white shadow-lg shadow-primary-600/25 transition hover:bg-primary-700 disabled:cursor-not-allowed disabled:opacity-60">
                        <span x-show="busy" x-cloak class="size-4 animate-spin rounded-full border-2 border-white/30 border-t-white" aria-hidden="true"></span>
                        {{ __('front.profile.save') }}
                    </button>
                </div>
            @endif
            </form>

            {{-- Contact (read-only; each value changes through a verified modal) --}}
            <div class="rounded-2xl border border-line bg-white p-6">
                <div class="mb-4.5 text-base font-bold">{{ __('front.profile.contact_title') }}</div>
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div>
                        <label class="mb-1.5 block text-[13px] font-bold">{{ __('front.profile.mobile') }}</label>
                        <div class="flex items-stretch gap-2">
                            <input value="{{ Format::persianDigits($user->mobile) }}" disabled dir="ltr" class="min-w-0 flex-1 cursor-not-allowed rounded-xl border-[1.5px] border-[#eee] bg-[#f4f3f7] px-3.5 py-3 text-left text-sm text-ink-faint outline-none">
                            <button type="button" x-on:click="openFor('mobile')" class="shrink-0 rounded-xl border-[1.5px] border-primary-600/30 px-4 text-[13px] font-bold text-primary-600 transition hover:bg-primary-50">{{ __('front.profile.change_action') }}</button>
                        </div>
                        <p class="mt-1.5 text-[11.5px] text-ink-faint">{{ __('front.profile.mobile_note') }}</p>
                    </div>
                    <div>
                        <label class="mb-1.5 block text-[13px] font-bold">{{ __('front.profile.email') }}</label>
                        <div class="flex items-stretch gap-2">
                            <input value="{{ $user->email ? $user->email : __('front.profile.email_none') }}" disabled dir="{{ $user->email ? 'ltr' : 'rtl' }}" class="min-w-0 flex-1 cursor-not-allowed rounded-xl border-[1.5px] border-[#eee] bg-[#f4f3f7] px-3.5 py-3 text-{{ $user->email ? 'left' : 'right' }} text-sm text-ink-faint outline-none">
                            <button type="button" x-on:click="openFor('email')" class="shrink-0 rounded-xl border-[1.5px] border-primary-600/30 px-4 text-[13px] font-bold text-primary-600 transition hover:bg-primary-50">{{ __('front.profile.change_action') }}</button>
                        </div>
                        <p class="mt-1.5 text-[11.5px] text-ink-faint">{{ __('front.profile.email_note') }}</p>
                    </div>
                </div>
            </div>

            {{-- ===== Contact-change modal (mobile / email, two steps) ===== --}}
            <template x-teleport="body">
                <div x-show="open" x-cloak class="fixed inset-0 z-[60] flex items-center justify-center p-4" x-transition.opacity>
                    <div class="absolute inset-0 bg-ink/50 backdrop-blur-sm" x-on:click="close()"></div>
                    <div class="relative w-full max-w-md rounded-2xl bg-white p-6 shadow-2xl" x-transition x-on:keydown.escape.window="close()">
                        <div class="mb-5 flex items-center justify-between">
                            <h3 class="text-base font-bold" x-text="title"></h3>
                            <button type="button" x-on:click="close()" class="grid size-8 place-items-center rounded-lg text-ink-faint transition hover:bg-secondary-50 hover:text-secondary-500">
                                <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg>
                            </button>
                        </div>

                        {{-- Step 1: new value --}}
                        <div x-show="step === 'value'">
                            <label class="mb-1.5 block text-[13px] font-bold" x-text="valueLabel"></label>
                            <input x-bind:type="channel === 'email' ? 'email' : 'text'" inputmode="text" dir="ltr" x-on:input="onValue($event)"
                                   class="w-full rounded-xl border-[1.5px] border-[#e3e1ec] bg-[#fbfbfd] px-3.5 py-3 text-left text-sm outline-none transition focus:border-primary-600 focus:bg-white">
                            <p class="mt-1.5 text-[11.5px] text-ink-faint" x-text="valueHint"></p>
                            <p x-show="error" x-cloak x-text="error" class="mt-2 text-[12px] font-bold text-secondary-500"></p>
                            <button type="button" x-on:click="sendCode()" x-bind:disabled="busy || !valueValid"
                                    class="mt-5 inline-flex w-full items-center justify-center gap-2 rounded-xl bg-primary-600 px-6 py-3 text-sm font-bold text-white transition hover:bg-primary-700 disabled:cursor-not-allowed disabled:opacity-50">
                                <span x-show="busy" x-cloak class="size-4 animate-spin rounded-full border-2 border-white/30 border-t-white"></span>
                                {{ __('front.profile.change.send_code') }}
                            </button>
                        </div>

                        {{-- Step 2: verify code --}}
                        <div x-show="step === 'code'" x-cloak>
                            <p class="text-[13px] leading-6 text-ink-muted" x-text="sentNotice"></p>
                            <div class="mt-1 flex items-center gap-2">
                                <span class="text-[13px] font-bold" dir="ltr" x-text="value"></span>
                                <button type="button" x-on:click="backToValue()" class="text-[12px] font-bold text-primary-600 hover:underline">{{ __('front.profile.change.edit_target') }}</button>
                            </div>

                            <template x-if="debugCode">
                                <div class="mt-3 rounded-lg bg-amber-50 px-3 py-2 text-[12px] font-bold text-amber-700">
                                    {{ __('front.profile.change.debug_prefix') }} <span dir="ltr" x-text="debugCode"></span>
                                </div>
                            </template>

                            <label class="mb-1.5 mt-4 block text-[13px] font-bold">{{ __('front.profile.change.code_label') }}</label>
                            <input inputmode="numeric" dir="ltr" maxlength="5" x-on:input="onCode($event)" x-on:keydown.enter="verify()"
                                   class="w-full rounded-xl border-[1.5px] border-[#e3e1ec] bg-[#fbfbfd] px-3.5 py-3 text-center text-lg font-bold tracking-[0.4em] outline-none transition focus:border-primary-600 focus:bg-white">
                            <p x-show="error" x-cloak x-text="error" class="mt-2 text-[12px] font-bold text-secondary-500"></p>

                            <button type="button" x-on:click="verify()" x-bind:disabled="busy || code.length !== 5"
                                    class="mt-5 inline-flex w-full items-center justify-center gap-2 rounded-xl bg-primary-600 px-6 py-3 text-sm font-bold text-white transition hover:bg-primary-700 disabled:cursor-not-allowed disabled:opacity-50">
                                <span x-show="busy" x-cloak class="size-4 animate-spin rounded-full border-2 border-white/30 border-t-white"></span>
                                {{ __('front.profile.change.confirm') }}
                            </button>

                            <div class="mt-3 text-center text-[12.5px]">
                                <button type="button" x-show="resendIn === 0" x-on:click="resend()" class="font-bold text-primary-600 hover:underline">{{ __('front.profile.change.resend') }}</button>
                                <span x-show="resendIn > 0" x-cloak class="text-ink-faint" x-text="resendLabel()"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
        </div>
    </div>
@endsection