<section>
    <header>
        <h2 class="card-title">Editable Client Information</h2>
        <p class="card-subtitle">These fields match the billing/contact fields used during checkout.</p>
    </header>

    <form method="post" action="{{ route('profile.update') }}" class="mt-6 space-y-6">
        @csrf
        @method('patch')

        <div class="form-grid">
            <div class="form-group">
                <label>First Name</label>
                <input class="input" name="first_name" value="{{ old('first_name', $user->first_name ?: $user->name) }}" required>
                <x-input-error class="mt-2" :messages="$errors->get('first_name')" />
            </div>
            <div class="form-group">
                <label>Last Name</label>
                <input class="input" name="last_name" value="{{ old('last_name', $user->last_name) }}">
                <x-input-error class="mt-2" :messages="$errors->get('last_name')" />
            </div>
            <div class="form-group">
                <label>Phone Number</label>
                <div class="phone-row">
                    <input class="input code" name="phone_country_code" value="{{ old('phone_country_code', $user->phone_country_code ?: '+92') }}">
                    <input class="input" name="phone" value="{{ old('phone', $user->phone) }}" placeholder="3012345678">
                </div>
                <x-input-error class="mt-2" :messages="$errors->get('phone')" />
            </div>
            <div class="form-group">
                <label>Company Name</label>
                <input class="input" name="company_name" value="{{ old('company_name', $profile?->company_name) }}">
                <x-input-error class="mt-2" :messages="$errors->get('company_name')" />
            </div>
            <div class="form-group">
                <label>Country</label>
                <select class="select" name="country" required>
                    @foreach (['PK' => 'Pakistan', 'US' => 'United States', 'GB' => 'United Kingdom', 'AE' => 'United Arab Emirates'] as $code => $label)
                        <option value="{{ $code }}" {{ old('country', $user->country ?: $profile?->country ?: 'PK') === $code ? 'selected' : '' }}>{{ $label }}</option>
                    @endforeach
                </select>
                <x-input-error class="mt-2" :messages="$errors->get('country')" />
            </div>
            <div class="form-group">
                <label>Street Address</label>
                <input class="input" name="street_address" value="{{ old('street_address', $profile?->street_address) }}">
                <x-input-error class="mt-2" :messages="$errors->get('street_address')" />
            </div>
            <div class="form-group">
                <label>Street Address 2</label>
                <input class="input" name="street_address_2" value="{{ old('street_address_2', $profile?->street_address_2) }}">
                <x-input-error class="mt-2" :messages="$errors->get('street_address_2')" />
            </div>
            <div class="form-group">
                <label>City</label>
                <input class="input" name="city" value="{{ old('city', $profile?->city) }}">
                <x-input-error class="mt-2" :messages="$errors->get('city')" />
            </div>
            <div class="form-group">
                <label>State</label>
                <input class="input" name="state" value="{{ old('state', $profile?->state) }}">
                <x-input-error class="mt-2" :messages="$errors->get('state')" />
            </div>
            <div class="form-group">
                <label>Postcode</label>
                <input class="input" name="postcode" value="{{ old('postcode', $profile?->postcode) }}">
                <x-input-error class="mt-2" :messages="$errors->get('postcode')" />
            </div>
        </div>

        <button class="primary-btn" type="submit">Save Profile</button>
    </form>
</section>
