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

@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>

        <!-- Main Content -->
        <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_billing') }}" method="POST">
                @csrf
                @method('PUT')

                <div class="space-y-6">
                    <!-- Contact 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]">contact_mail</span>
                                {{ __('account.Contact 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', $billingAddress->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', $billingAddress->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="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>
                    </section>

                    <!-- Billing Address 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]">location_on</span>
                                {{ __('account.Billing Address') }}
                            </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="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 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>
                                            @if(isset($states) && $states->count() > 0)
                                                @foreach($states as $key => $state)
                                                    <option value="{{ $key }}" {{ ($billingAddress->state_id ?? old('state_id')) == $key ? 'selected' : '' }}>{{ $state }}</option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>
                                    @error('state_id')
                                        <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="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>
                                        @if(isset($countries) && $countries->count() > 0)
                                            @foreach($countries as $key => $country)
                                                <option value="{{ $key }}" {{ ($billingAddress->country_id ?? old('country_id')) == $key ? 'selected' : '' }}>{{ $country }}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                    @error('country_id')
                                        <p class="text-[11px] text-red-500">{{ $message }}</p>
                                    @enderror
                                </div>
                            </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