@extends('theme::layouts.app', ['title' => $title ?? __('account.title|Edit Account')])

@section('content')
<main class="flex-grow w-full max-w-[1440px] mx-auto px-6 lg:px-10 py-10">
    <div class="flex flex-col lg:flex-row gap-10">
        <!-- Sidebar -->
        <aside class="w-full lg:w-64 flex-shrink-0">
            @include('theme::partials.account.nav')
        </aside>

        <div class="flex-grow max-w-2xl">
            @if(isset($pageHeader))
            <div class="mb-8">
                <h1 class="text-2xl font-bold text-text-main dark:text-white">{{ $pageHeader['title'] }}</h1>
                <p class="text-text-muted dark:text-gray-400 mt-1">{{ $pageHeader['subtitle'] }}</p>
            </div>
            @endif

            <form action="{{ route('ch_update_details') }}" method="POST">
                @csrf
                @method('PUT')

                <div class="space-y-6">
                    <!-- Profile Information Card -->
                    <section
                        class="bg-white dark:bg-surface-dark border border-border-light dark:border-border-dark rounded-2xl shadow-sm overflow-hidden animate-in fade-in slide-in-from-bottom-4 duration-500">
                        <div class="p-6 border-b border-border-light dark:border-border-dark">
                            <h2 class="text-lg font-bold text-text-main dark:text-white flex items-center gap-2">
                                <span class="material-symbols-outlined text-primary text-[20px]">person</span>
                                {{ __('account.Profile Information') }}
                            </h2>
                        </div>
                        <div class="p-6 space-y-5">
                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                                <div class="space-y-1.5">
                                    <label class="text-xs font-bold text-text-muted uppercase tracking-wider"
                                           for="first_name">{{ __('account.First Name') }}</label>
                                    <input type="text" id="first_name" name="first_name" placeholder="John"
                                           value="{{ old('first_name', $user->first_name) }}"
                                           class="w-full px-4 py-2.5 bg-gray-50 dark:bg-background-dark border border-gray-200 dark:border-gray-700 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-primary/10 focus:border-primary transition-all" />
                                    @error('first_name')
                                        <p class="text-[11px] text-red-500">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div class="space-y-1.5">
                                    <label class="text-xs font-bold text-text-muted uppercase tracking-wider"
                                           for="last_name">{{ __('account.Last Name') }}</label>
                                    <input type="text" id="last_name" name="last_name" placeholder="Doe"
                                           value="{{ old('last_name', $user->last_name) }}"
                                           class="w-full px-4 py-2.5 bg-gray-50 dark:bg-background-dark border border-gray-200 dark:border-gray-700 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-primary/10 focus:border-primary transition-all" />
                                    @error('last_name')
                                        <p class="text-[11px] text-red-500">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                            <div class="space-y-1.5">
                                <label class="text-xs font-bold text-text-muted uppercase tracking-wider"
                                       for="email">{{ __('account.Email Address') }}</label>
                                <input type="email" id="email" name="email" placeholder="john.doe@example.com"
                                       value="{{ old('email', $user->email) }}"
                                       class="w-full px-4 py-2.5 bg-gray-50 dark:bg-background-dark border border-gray-200 dark:border-gray-700 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-primary/10 focus:border-primary transition-all" />
                                @error('email')
                                    <p class="text-[11px] text-red-500">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </section>

                    <!-- Billing & Contact Card -->
                    <section
                        class="bg-white dark:bg-surface-dark border border-border-light dark:border-border-dark rounded-2xl shadow-sm overflow-hidden animate-in fade-in slide-in-from-bottom-4 duration-500 delay-75">
                        <div class="p-6 border-b border-border-light dark:border-border-dark">
                            <h2 class="text-lg font-bold text-text-main dark:text-white flex items-center gap-2">
                                <span class="material-symbols-outlined text-primary text-[20px]">location_on</span>
                                {{ __('account.Billing & Contact') }}
                            </h2>
                        </div>
                        <div class="p-6 space-y-5">
                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                                <div class="space-y-1.5">
                                    <label class="text-xs font-bold text-text-muted uppercase tracking-wider"
                                           for="phone_number">{{ __('account.Phone Number') }}</label>
                                    <input type="tel" id="phone_number" name="phone_number" placeholder="+1 (555) 000-0000"
                                           value="{{ old('phone_number', $billingAddress->phone_number ?? '') }}"
                                           class="w-full px-4 py-2.5 bg-gray-50 dark:bg-background-dark border border-gray-200 dark:border-gray-700 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-primary/10 focus:border-primary transition-all" />
                                    @error('phone_number')
                                        <p class="text-[11px] text-red-500">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div class="space-y-1.5">
                                    <label class="text-xs font-bold text-text-muted uppercase tracking-wider"
                                           for="company_name">{{ __('account.Company Name') }}</label>
                                    <input type="text" id="company_name" name="company_name" placeholder="Acme Inc."
                                           value="{{ old('company_name', $billingAddress->company_name ?? '') }}"
                                           class="w-full px-4 py-2.5 bg-gray-50 dark:bg-background-dark border border-gray-200 dark:border-gray-700 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-primary/10 focus:border-primary transition-all" />
                                    @error('company_name')
                                        <p class="text-[11px] text-red-500">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                            <div class="space-y-1.5">
                                <label class="text-xs font-bold text-text-muted uppercase tracking-wider"
                                       for="address">{{ __('account.Address') }}</label>
                                <input type="text" id="address" name="address" placeholder="123 Digital Ave"
                                       value="{{ old('address', $billingAddress->address ?? '') }}"
                                       class="w-full px-4 py-2.5 bg-gray-50 dark:bg-background-dark border border-gray-200 dark:border-gray-700 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-primary/10 focus:border-primary transition-all" />
                                @error('address')
                                    <p class="text-[11px] text-red-500">{{ $message }}</p>
                                @enderror
                            </div>
                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                                <div class="space-y-1.5">
                                    <label class="text-xs font-bold text-text-muted uppercase tracking-wider"
                                           for="city">{{ __('account.City') }}</label>
                                    <input type="text" id="city" name="city" placeholder="San Francisco"
                                           value="{{ old('city', $billingAddress->city ?? '') }}"
                                           class="w-full px-4 py-2.5 bg-gray-50 dark:bg-background-dark border border-gray-200 dark:border-gray-700 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-primary/10 focus:border-primary transition-all" />
                                    @error('city')
                                        <p class="text-[11px] text-red-500">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div class="space-y-1.5">
                                    <label class="text-xs font-bold text-text-muted uppercase tracking-wider"
                                           for="zip">{{ __('account.Zip / Postal Code') }}</label>
                                    <input type="text" id="zip" name="zip" placeholder="94103"
                                           value="{{ old('zip', $billingAddress->zip ?? '') }}"
                                           class="w-full px-4 py-2.5 bg-gray-50 dark:bg-background-dark border border-gray-200 dark:border-gray-700 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-primary/10 focus:border-primary transition-all" />
                                    @error('zip')
                                        <p class="text-[11px] text-red-500">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                                <div class="space-y-1.5">
                                    <label class="text-xs font-bold text-text-muted uppercase tracking-wider"
                                           for="country_id">{{ __('account.Country') }}</label>
                                    <select id="country_id" name="country_id"
                                            class="w-full px-4 py-2.5 bg-gray-50 dark:bg-background-dark border border-gray-200 dark:border-gray-700 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-primary/10 focus:border-primary transition-all appearance-none user-country">
                                        <option value="">{{ __('account.Select Country') }}</option>
                                        @foreach($countries as $key => $country)
                                            <option value="{{ $key }}" {{ old('country_id', $billingAddress->country_id ?? '') == $key ? 'selected' : '' }}>{{ $country }}</option>
                                        @endforeach
                                    </select>
                                    @error('country_id')
                                        <p class="text-[11px] text-red-500">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div class="space-y-1.5 user-state">
                                    <label class="text-xs font-bold text-text-muted uppercase tracking-wider"
                                           for="state_id">{{ __('account.State / Province') }}</label>
                                    <div class="state-container">
                                        <select id="state_id" name="state_id"
                                                class="w-full px-4 py-2.5 bg-gray-50 dark:bg-background-dark border border-gray-200 dark:border-gray-700 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-primary/10 focus:border-primary transition-all appearance-none">
                                            <option value="">{{ __('account.Select State') }}</option>
                                            @foreach($states as $key => $state)
                                                <option value="{{ $key }}" {{ old('state_id', $billingAddress->state_id ?? '') == $key ? 'selected' : '' }}>{{ $state }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    @error('state_id')
                                        <p class="text-[11px] text-red-500">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </section>

                    @if($registrationFields->isNotEmpty())
                    <!-- Custom Fields Card -->
                    <section
                        class="bg-white dark:bg-surface-dark border border-border-light dark:border-border-dark rounded-2xl shadow-sm overflow-hidden animate-in fade-in slide-in-from-bottom-4 duration-500 delay-100">
                        <div class="p-6 border-b border-border-light dark:border-border-dark">
                            <h2 class="text-lg font-bold text-text-main dark:text-white flex items-center gap-2">
                                <span class="material-symbols-outlined text-primary text-[20px]">tune</span>
                                {{ __('account.Additional Information') }}
                            </h2>
                        </div>
                        <div class="p-6 space-y-5">
                            @foreach($registrationFields as $regField)
                                @php($metaValue = $user->meta->firstWhere('key', $regField->name)?->value ?? '')
                                <div class="space-y-1.5">
                                    <label class="text-xs font-bold text-text-muted uppercase tracking-wider">
                                        {{ $regField->label }}
                                        @if($regField->is_required) <span class="text-red-500">*</span> @endif
                                    </label>

                                    @if($regField->type === 'textarea')
                                        <textarea name="reg_fields[{{ $regField->name }}]"
                                            class="w-full px-4 py-2.5 bg-gray-50 dark:bg-background-dark border border-gray-200 dark:border-gray-700 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-primary/10 focus:border-primary transition-all"
                                            placeholder="{{ $regField->placeholder }}"
                                            {{ $regField->is_required ? 'required' : '' }}>{{ old("reg_fields.{$regField->name}", $metaValue) }}</textarea>

                                    @elseif($regField->type === 'select')
                                        <select name="reg_fields[{{ $regField->name }}]"
                                            class="w-full px-4 py-2.5 bg-gray-50 dark:bg-background-dark border border-gray-200 dark:border-gray-700 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-primary/10 focus:border-primary transition-all appearance-none"
                                            {{ $regField->is_required ? 'required' : '' }}>
                                            <option value="">{{ $regField->placeholder ?: 'Please select' }}</option>
                                            @foreach($regField->options_array as $opt)
                                                <option value="{{ $opt }}" {{ old("reg_fields.{$regField->name}", $metaValue) == $opt ? 'selected' : '' }}>{{ $opt }}</option>
                                            @endforeach
                                        </select>

                                    @elseif($regField->type === 'checkbox')
                                        <div class="flex items-center gap-2">
                                            <input type="hidden" name="reg_fields[{{ $regField->name }}]" value="0">
                                            <input type="checkbox" name="reg_fields[{{ $regField->name }}]"
                                                id="cf_{{ $regField->name }}" value="1"
                                                class="rounded border-gray-300 text-primary focus:ring-primary"
                                                {{ old("reg_fields.{$regField->name}", $metaValue) == '1' ? 'checked' : '' }}
                                                {{ $regField->is_required ? 'required' : '' }}>
                                            <label for="cf_{{ $regField->name }}" class="text-sm text-text-muted dark:text-gray-400">
                                                {{ $regField->placeholder ?: $regField->label }}
                                            </label>
                                        </div>

                                    @else
                                        <input type="{{ $regField->type }}" name="reg_fields[{{ $regField->name }}]"
                                            class="w-full px-4 py-2.5 bg-gray-50 dark:bg-background-dark border border-gray-200 dark:border-gray-700 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-primary/10 focus:border-primary transition-all"
                                            placeholder="{{ $regField->placeholder }}"
                                            value="{{ old("reg_fields.{$regField->name}", $metaValue) }}"
                                            {{ $regField->is_required ? 'required' : '' }}>
                                    @endif

                                    @error("reg_fields.{$regField->name}")
                                        <p class="text-[11px] text-red-500">{{ $message }}</p>
                                    @enderror
                                </div>
                            @endforeach
                        </div>
                    </section>
                    @endif

                    <!-- Password Security Card -->
                    <section
                        class="bg-white dark:bg-surface-dark border border-border-light dark:border-border-dark rounded-2xl shadow-sm overflow-hidden animate-in fade-in slide-in-from-bottom-4 duration-500 delay-150">
                        <div class="p-6 border-b border-border-light dark:border-border-dark">
                            <h2 class="text-lg font-bold text-text-main dark:text-white flex items-center gap-2">
                                <span class="material-symbols-outlined text-primary text-[20px]">lock_person</span>
                                {{ __('account.Security') }}
                            </h2>
                        </div>
                        <div class="p-6 space-y-5">
                            <div class="space-y-1.5">
                                <label class="text-xs font-bold text-text-muted uppercase tracking-wider"
                                       for="current_password">{{ __('account.Current Password') }}</label>
                                <input type="password" id="current_password" name="current_password" placeholder="••••••••"
                                       class="w-full px-4 py-2.5 bg-gray-50 dark:bg-background-dark border border-gray-200 dark:border-gray-700 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-primary/10 focus:border-primary transition-all" />
                                <p class="text-[11px] text-text-muted">{{ __('account.Enter your current password if you want to change your password.') }}</p>
                                @error('current_password')
                                    <p class="text-[11px] text-red-500">{{ $message }}</p>
                                @enderror
                            </div>
                            <div class="space-y-1.5">
                                <label class="text-xs font-bold text-text-muted uppercase tracking-wider"
                                       for="new_password">{{ __('account.New Password') }}</label>
                                <input type="password" id="new_password" name="new_password" placeholder="••••••••"
                                       class="w-full px-4 py-2.5 bg-gray-50 dark:bg-background-dark border border-gray-200 dark:border-gray-700 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-primary/10 focus:border-primary transition-all" />
                                <p class="text-[11px] text-text-muted">{{ __('account.Leave this blank if you do not want to change your password.') }}</p>
                                @error('new_password')
                                    <p class="text-[11px] text-red-500">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </section>

                    <!-- Form Actions -->
                    <div class="flex items-center justify-end gap-3 pt-4">
                        <a href="{{ url()->previous() }}"
                            class="px-6 py-2.5 border border-gray-200 dark:border-gray-700 text-text-main dark:text-white rounded-xl font-medium hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors text-sm">
                            {{ __('account.Cancel') }}
                        </a>
                        <button type="submit"
                            class="px-8 py-2.5 bg-primary hover:bg-primary-dark text-white rounded-xl font-bold shadow-lg shadow-primary/20 transition-all hover:-translate-y-0.5 active:translate-y-0 text-sm">
                            {{ __('account.Save Changes') }}
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</main>

{{-- State dropdown template for dynamic loading --}}
<script id="states-template" type="text/x-handlebars-template">
    <select class="w-full px-4 py-2.5 bg-gray-50 dark:bg-background-dark border border-gray-200 dark:border-gray-700 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-primary/10 focus:border-primary transition-all appearance-none" name="state_id">
        <option value="">{{ __('account.Select State') }}</option>
        @{{#each this}}
        <option value="@{{ @key }}">@{{this}}</option>
        @{{/each}}
    </select>
</script>
@endsection