@extends('layouts.app')

@section('title', 'My Profile - ' . \App\Models\Setting::get('site_name', 'KiyoKart'))

@section('content')
<div class="container profile-container">
    <!-- Profile Header -->
    {{-- <div class="profile-page-header">
        <div class="d-flex align-items-center">
            <div class="profile-avatar">
                @if($user->avatar_url)
                    <img src="{{ $user->avatar_url }}" alt="{{ $user->name }}" class="profile-avatar-img">
                @else
                    {{ strtoupper(substr($user->name, 0, 1)) }}
                @endif
            </div>
            <div class="profile-header-info">
                <h1>
                    My Profile
                </h1>
                <div class="profile-header-email">
                    <i class="bi bi-envelope"></i>
                    @if($user->email)
                        {{ $user->email }}
                    @else
                        No email address set
                    @endif
                </div>
            </div>
        </div>
    </div> --}}

    <div class="row d-flex justify-content-center">
        <!-- Main Content -->
        <div class="col-lg-6">
            <!-- Profile Information -->
            <div class="profile-card-modern">
                <div class="profile-card-header">
                    <h5>
                        <i class="bi bi-person-gear"></i> Profile Information
                    </h5>
                </div>
                <div class="profile-card-body">
                    <form action="{{ route('customer.profile.update') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')

                        <div class="profile-form-group">
                            <label class="profile-form-label">
                                <i class="bi bi-person"></i> Full Name
                            </label>
                            <input type="text" 
                                   name="name" 
                                   class="profile-form-control form-control" 
                                   value="{{ old('name', $user->name) }}" 
                                   required
                                   placeholder="Enter your full name">
                        </div>

                        <div class="profile-form-group">
                            <label class="profile-form-label">
                                <i class="bi bi-phone"></i> Mobile Number
                            </label>
                            <div class="input-group">
                                <span class="input-group-text">+91</span>
                                <input type="text" 
                                       class="profile-form-control form-control profile-form-control-search" 
                                       value="{{ preg_replace('/^\+91/', '', $user->mobile) }}" 
                                       readonly 
                                       disabled>
                            </div>
                            <div class="profile-form-help">
                                <i class="bi bi-info-circle"></i>
                                Mobile number cannot be changed for security reasons
                            </div>
                        </div>

                        <div class="profile-form-group">
                            <label class="profile-form-label">
                                <i class="bi bi-envelope"></i> Email Address <span class="text-muted">(Optional)</span>
                            </label>
                            <input type="email" 
                                   name="email" 
                                   class="profile-form-control form-control" 
                                   value="{{ old('email', $user->email) }}"
                                   placeholder="Enter your email address">
                            <div class="profile-form-help">
                                <i class="bi bi-info-circle"></i>
                                Email address is optional but recommended for order updates
                            </div>
                        </div>

                        <div class="profile-form-group">
                            <label class="profile-form-label">
                                <i class="bi bi-image"></i> Profile Picture <span class="text-muted">(Optional)</span>
                            </label>
                            <div class="avatar-upload-container">
                                <div class="avatar-preview-wrapper">
                                    @if($user->avatar_url)
                                        <img src="{{ $user->avatar_url }}" alt="Current avatar" id="avatarPreview" class="avatar-preview-img">
                                    @else
                                        <div class="avatar-preview-placeholder" id="avatarPreview">
                                            <i class="bi bi-person-circle"></i>
                                            <span>No image</span>
                                        </div>
                                    @endif
                                </div>
                                <div class="avatar-upload-controls">
                                    <input type="file" 
                                           name="avatar" 
                                           id="avatarInput" 
                                           class="form-control" 
                                           accept="image/jpeg,image/jpg,image/png,image/gif"
                                           style="display: none;">
                                    <div class="d-flex gap-2 flex-wrap">
                                        <button type="button" class="btn btn-outline-primary btn-sm" onclick="document.getElementById('avatarInput').click();">
                                            <i class="bi bi-upload"></i> Choose Image
                                        </button>
                                        @if($user->avatar_url)
                                            <button type="button" class="btn btn-outline-danger btn-sm" id="removeAvatarBtn">
                                                <i class="bi bi-trash"></i> Remove
                                            </button>
                                        @endif
                                    </div>
                                    <input type="hidden" name="remove_avatar" id="removeAvatarFlag" value="0">
                                    <div class="profile-form-help mt-2">
                                        <i class="bi bi-info-circle"></i>
                                        Maximum file size: 2MB. Allowed formats: JPEG, PNG, GIF
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="profile-form-group">
                            <label class="profile-form-label">
                                <i class="bi bi-receipt"></i> GST Number <span class="text-muted">(Optional)</span>
                            </label>
                            <input type="text"
                                   name="gst_number"
                                   class="profile-form-control form-control"
                                   value="{{ old('gst_number', $user->gst_number) }}"
                                   maxlength="15"
                                   pattern="[0-9A-Z]{15}"
                                   placeholder="15-digit GSTIN (e.g., 29ABCDE1234F2Z5)">
                            <div class="profile-form-help">
                                <i class="bi bi-info-circle"></i>
                                Enter a 15-character GSTIN if you need invoices with GST details.
                            </div>
                        </div>

                        <div class="mt-4 d-flex gap-3 flex-wrap">
                            <button type="submit" class="btn-profile-primary">
                                <i class="bi bi-check-circle"></i> Update Profile
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Change Password -->
            <div class="change-password-card">
                <div class="profile-card-header">
                    <h5>
                        <i class="bi bi-shield-lock"></i> Change Password
                    </h5>
                </div>
                <div class="profile-card-body">
                    <form action="{{ route('customer.profile.change-password') }}" method="POST">
                        @csrf
                        @method('PUT')

                        <div class="profile-form-group">
                            <label class="profile-form-label">
                                <i class="bi bi-shield-lock"></i> New Password
                            </label>
                            <input type="password"
                                   name="password"
                                   class="profile-form-control form-control @error('password') is-invalid @enderror"
                                   placeholder="Enter a new password"
                                   required>
                            @error('password')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <div class="profile-form-help">
                                <i class="bi bi-info-circle"></i>
                                Use at least 8 characters with a mix of letters and numbers.
                            </div>
                        </div>

                        <div class="profile-form-group">
                            <label class="profile-form-label">
                                <i class="bi bi-lock-fill"></i> Confirm New Password
                            </label>
                            <input type="password"
                                   name="password_confirmation"
                                   class="profile-form-control form-control"
                                   placeholder="Re-enter your new password"
                                   required>
                        </div>

                        <div class="mt-3">
                            <button type="submit" class="btn-profile-primary">
                                <i class="bi bi-arrow-repeat"></i> Update Password
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Saved Addresses -->
            <div class="profile-card-modern">
                <div class="profile-card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
                    <h5 class="mb-0">
                        <i class="bi bi-geo-alt"></i> Saved Addresses
                    </h5>
                    <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#addAddressModal">
                        <i class="bi bi-plus-circle"></i>
                        <span class="d-none d-md-inline">Add New Address</span>
                        <span class="d-inline d-md-none">New Address</span>
                    </button>
                </div>
                <div class="profile-card-body">
                    @forelse($user->addresses as $address)
                        <div class="address-card">
                            <div class="address-card-header">
                                <div class="address-name">
                                    <i class="bi bi-person"></i>
                                    {{ $address->name }}
                                </div>
                                <div class="d-flex align-items-center gap-2">
                                    @if($address->is_default)
                                        <span class="address-default-badge">
                                            <i class="bi bi-check-circle"></i> Default
                                        </span>
                                    @endif
                    <button type="button"
                            class="btn btn-primary"
                                            data-bs-toggle="modal"
                                            data-bs-target="#editAddressModal"
                                            data-update-action="{{ route('customer.addresses.update', $address) }}"
                                            data-name="{{ $address->name }}"
                                            data-mobile="{{ preg_replace('/^\+91/', '', $address->mobile) }}"
                                            data-line1="{{ $address->line1 }}"
                                            data-line2="{{ $address->line2 }}"
                                            data-country="{{ $address->country_id }}"
                                            data-country-name="{{ $address->country?->name }}"
                                            data-state="{{ $address->state_id }}"
                                            data-city="{{ $address->city_id }}"
                                            data-state-name="{{ $address->stateRelation?->name ?? $address->state }}"
                                            data-city-name="{{ $address->cityRelation?->name ?? $address->city }}"
                                            data-pin="{{ $address->pin }}"
                                            data-default="{{ $address->is_default ? '1' : '0' }}">
                                        <i class="bi bi-pencil-square"></i>
                                        Edit
                                    </button>
                                </div>
                            </div>
                            <div class="address-details">
                                <div class="address-detail-item">
                                    <i class="bi bi-telephone"></i>
                                    <span>{{ $address->mobile }}</span>
                                </div>
                                <div class="address-detail-item">
                                    <i class="bi bi-geo-alt-fill"></i>
                                    <span>{{ $address->full_address }}</span>
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="empty-address">
                            <i class="bi bi-inbox"></i>
                            <h6 class="mt-3 mb-2">No Saved Addresses</h6>
                            <p class="text-muted mb-0">You haven't saved any addresses yet. Add one to speed up checkout.</p>
                        </div>
                    @endforelse
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="col-lg-3">
            <!-- Profile Stats -->
            @php
                $orderCount = \App\Models\Order::where('user_id', $user->id)->count();
                $addressCount = $user->addresses->count();
            @endphp
            <div class="profile-stats-card">
                <div class="profile-stats-grid">
                    <div>
                        <div class="profile-stats-title">Total Orders</div>
                        <div class="profile-stats-value">{{ $orderCount }}</div>
                    </div>
                    <div>
                        <div class="profile-stats-title">Saved Addresses</div>
                        <div class="profile-stats-value">{{ $addressCount }}</div>
                    </div>
                </div>
            </div>

            <!-- Quick Links -->
            <div class="quick-links-card">
                <div class="quick-links-header">
                    <h5>
                        <i class="bi bi-link-45deg"></i> Quick Links
                    </h5>
                </div>
                <ul class="quick-links-list">
                    <li class="quick-links-item">
                        <a href="{{ route('customer.orders.index') }}">
                            <i class="bi bi-box-seam"></i>
                            <span>My Orders</span>
                        </a>
                    </li>
                    <li class="quick-links-item">
                        <a href="{{ route('cart.index') }}">
                            <i class="bi bi-cart3"></i>
                            <span>Shopping Cart</span>
                        </a>
                    </li>
                    <li class="quick-links-item">
                        <a href="{{ route('checkout.index') }}">
                            <i class="bi bi-bag-check"></i>
                            <span>Checkout</span>
                        </a>
                    </li>
                    <li class="quick-links-item">
                        <a href="{{ route('home') }}">
                            <i class="bi bi-house"></i>
                            <span>Continue Shopping</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!-- Add Address Modal -->
<div class="modal fade address-drawer-modal" id="addAddressModal" tabindex="-1" aria-labelledby="addAddressModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content brand-modal">
            <div class="modal-header">
                <h5 class="modal-title" id="addAddressModalLabel">Add New Address</h5>
                <button type="button" class="btn p-0 text-white" data-bs-dismiss="modal" aria-label="Close"><i class="bi-x-lg"></i></button>
            </div>
            <form action="{{ route('customer.addresses.store') }}" method="POST" class="address-form" data-address-form>
                @csrf
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Name *</label>
                            <input type="text" name="name" class="form-control" value="{{ old('name', $user->name) }}" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Mobile *</label>
                            <div class="input-group">
                                <span class="input-group-text">+91</span>
                                <input type="text" name="mobile" class="form-control" placeholder="9876543210" maxlength="10" pattern="[6-9]\d{9}" value="{{ old('mobile', preg_replace('/^\+91/', '', $user->mobile)) }}" required>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <label class="form-label">Address Line 1 *</label>
                            <input type="text" name="line1" class="form-control" value="{{ old('line1') }}" required>
                        </div>
                        <div class="col-md-12">
                            <label class="form-label">Address Line 2</label>
                            <input type="text" name="line2" class="form-control" value="{{ old('line2') }}">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Country *</label>
                            <select name="country_id" class="form-select" required data-country-select data-selected-country="{{ old('country_id') }}">
                                <option value="">Select country</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">State *</label>
                            <select name="state_id" class="form-select" required data-state-select data-selected-state="{{ old('state_id') }}" disabled>
                                <option value="">Select state</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">City *</label>
                            <select name="city_id" class="form-select" required data-city-select data-selected-city="{{ old('city_id') }}" disabled>
                                <option value="">Select city</option>
                            </select>
                            <div class="d-none mt-2" data-city-custom-wrap>
                                <label class="form-label small mb-1">Enter your city *</label>
                                <input type="text" name="city_custom" class="form-control" maxlength="100" autocomplete="address-level2" data-city-custom value="{{ old('city_custom') }}">
                            </div>
                        </div>
                        <div class="col-12">
                            @include('partials.address-city-help')
                        </div>
                        <input type="hidden" name="state" data-state-name value="{{ old('state') }}">
                        <input type="hidden" name="city" data-city-name value="{{ old('city') }}">
                        <div class="col-md-4">
                            <label class="form-label">PIN Code *</label>
                            <input type="text" name="pin" class="form-control" maxlength="6" value="{{ old('pin') }}" required>
                        </div>
                        <div class="col-md-8 d-flex align-items-center mt-4">
                            <div class="form-check">
                                <input type="checkbox" name="is_default" value="1" class="form-check-input" id="addIsDefault">
                                <label class="form-check-label" for="addIsDefault">Set as default address</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save Address</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Address Modal -->
<div class="modal fade address-drawer-modal" id="editAddressModal" tabindex="-1" aria-labelledby="editAddressModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content brand-modal">
            <div class="modal-header">
                <h5 class="modal-title" id="editAddressModalLabel">Edit Address</h5>
                <button type="button" class="btn p-0 text-white" data-bs-dismiss="modal" aria-label="Close"><i class="bi-x-lg"></i></button>
            </div>
            <form id="editAddressForm" method="POST" class="address-form" data-address-form>
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Name *</label>
                            <input type="text" name="name" class="form-control" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Mobile *</label>
                            <div class="input-group">
                                <span class="input-group-text">+91</span>
                                <input type="text" name="mobile" class="form-control" placeholder="9876543210" maxlength="10" pattern="[6-9]\d{9}" required>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <label class="form-label">Address Line 1 *</label>
                            <input type="text" name="line1" class="form-control" required>
                        </div>
                        <div class="col-md-12">
                            <label class="form-label">Address Line 2</label>
                            <input type="text" name="line2" class="form-control">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Country *</label>
                            <select name="country_id" class="form-select" required data-country-select>
                                <option value="">Select country</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">State *</label>
                            <select name="state_id" class="form-select" required data-state-select disabled>
                                <option value="">Select state</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">City *</label>
                            <select name="city_id" class="form-select" required data-city-select disabled>
                                <option value="">Select city</option>
                            </select>
                            <div class="d-none mt-2" data-city-custom-wrap>
                                <label class="form-label small mb-1">Enter your city *</label>
                                <input type="text" name="city_custom" class="form-control" maxlength="100" autocomplete="address-level2" data-city-custom>
                            </div>
                        </div>
                        <div class="col-12">
                            @include('partials.address-city-help')
                        </div>
                        <input type="hidden" name="state" data-state-name>
                        <input type="hidden" name="city" data-city-name>
                        <div class="col-md-4">
                            <label class="form-label">PIN Code *</label>
                            <input type="text" name="pin" class="form-control" maxlength="6" required>
                        </div>
                        <div class="col-md-8 d-flex align-items-center mt-4">
                            <div class="form-check">
                                <input type="checkbox" name="is_default" value="1" class="form-check-input" id="editIsDefault">
                                <label class="form-check-label" for="editIsDefault">Set as default address</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Update Address</button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script src="{{ asset('js/address-location.js') }}"></script>
<script>
const shippingApiBase = '/api/shipping';

function resetSelect(selectEl, placeholder) {
    AddressLocation.resetSelect(selectEl, placeholder);
}

function populateSelect(selectEl, items, placeholder, selectedId = null) {
    AddressLocation.populateSelect(selectEl, items, placeholder, selectedId);
}

async function fetchJson(url) {
    const response = await fetch(url, { headers: { Accept: 'application/json' } });
    if (!response.ok) throw new Error('Failed to load data');
    return response.json();
}

async function loadCountries(form) {
    const countrySelect = form.querySelector('[data-country-select]');
    const stateSelect = form.querySelector('[data-state-select]');
    const citySelect = form.querySelector('[data-city-select]');
    if (!countrySelect) return;

    const data = await fetchJson(`${shippingApiBase}/countries`);
    const countries = data.data || [];
    let selectedCountry = countrySelect.dataset.selectedCountry || '';
    const selectedCountryName = countrySelect.dataset.selectedCountryName || '';
    if (!selectedCountry) {
        const matchingCountry = countries.find((country) =>
            selectedCountryName && country.name.toLowerCase() === selectedCountryName.toLowerCase()
        );
        selectedCountry = matchingCountry?.id || '';
    }
    if (!selectedCountry) {
        const india = countries.find(c => c.code === 'IN');
        selectedCountry = india ? india.id : '';
    }

    populateSelect(countrySelect, countries, 'Select country', selectedCountry);

    if (selectedCountry) {
        await loadStates(
            form,
            selectedCountry,
            stateSelect?.dataset.selectedState || '',
            citySelect?.dataset.selectedCityName || '',
            stateSelect?.dataset.selectedStateName || ''
        );
    } else {
        resetSelect(stateSelect, 'Select state');
        resetSelect(citySelect, 'Select city');
    }
}

function onCountryChange(form, countryId) {
    const stateSelect = form.querySelector('[data-state-select]');
    const citySelect = form.querySelector('[data-city-select]');

    resetSelect(stateSelect, 'Loading states...');
    resetSelect(citySelect, 'Select city');
    if (countryId) {
        loadStates(form, countryId);
    }
    syncHiddenLocationNames(form);
}

function onStateChange(form, stateId) {
    const citySelect = form.querySelector('[data-city-select]');
    resetSelect(citySelect, 'Loading cities...');
    // const stateId = stateId;
    if (stateId) {
        loadCities(form, stateId);
    }
    syncHiddenLocationNames(form);
}

function onCityChange(form) {
    AddressLocation.handleCityChange(form);
}

async function loadStates(form, countryId, selectedStateId = '', selectedCityName = '', selectedStateName = '') {
    const stateSelect = form.querySelector('[data-state-select]');
    const citySelect = form.querySelector('[data-city-select]');
    if (!stateSelect || !countryId) return;
    resetSelect(stateSelect, 'Loading states...');
    resetSelect(citySelect, 'Select city');
    const data = await fetchJson(`${shippingApiBase}/states?country_id=${countryId}`);
    const states = data.data || [];
    if (!selectedStateId && selectedStateName) {
        const matchingState = states.find((state) =>
            state.name.toLowerCase() === selectedStateName.toLowerCase()
        );
        selectedStateId = matchingState?.id || '';
    }
    populateSelect(stateSelect, states, 'Select state', selectedStateId);
    stateSelect.disabled = false;

    if (selectedStateId) {
        await loadCities(
            form,
            selectedStateId,
            citySelect?.dataset.selectedCity || '',
            selectedCityName
        );
    }
}

async function loadCities(form, stateId, selectedCityId = '', selectedCityName = '') {
    const citySelect = form.querySelector('[data-city-select]');
    if (!citySelect || !stateId) return;
    resetSelect(citySelect, 'Loading cities...');
    const data = await fetchJson(`${shippingApiBase}/cities?state_id=${stateId}`);
    const cities = data.data || [];
    populateSelect(citySelect, cities, 'Select city', selectedCityId);
    citySelect.disabled = false;
    await AddressLocation.selectCityAfterLoad(citySelect, cities, selectedCityId, selectedCityName);
}

function syncHiddenLocationNames(form) {
    AddressLocation.syncHiddenLocationNames(form);
}

function attachAddressFormHandlers(form) {
    const countrySelect = form.querySelector('[data-country-select]');
    const stateSelect = form.querySelector('[data-state-select]');
    const citySelect = form.querySelector('[data-city-select]');

    if (countrySelect) {
        countrySelect.addEventListener('change', async (e) => {
            if (form.dataset.hydrating === '1') return;
            const countryId = e.target.value;
            if (String(countrySelect.dataset.selectedCountry || '') === String(countryId) && stateSelect?.value) {
                return;
            }
            resetSelect(stateSelect, 'Loading states...');
            resetSelect(citySelect, 'Select city');
            countrySelect.dataset.selectedCountry = countryId;
            if (countryId) {
                await loadStates(form, countryId);
            }
        });
    }

    if (stateSelect) {
        stateSelect.addEventListener('change', async (e) => {
            if (form.dataset.hydrating === '1') return;
            const stateId = e.target.value;
            if (String(stateSelect.dataset.selectedState || '') === String(stateId) && citySelect?.value) {
                return;
            }
            resetSelect(citySelect, 'Loading cities...');
            stateSelect.dataset.selectedState = stateId;
            if (stateId) {
                await loadCities(form, stateId);
            }
            syncHiddenLocationNames(form);
        });
    }

    if (citySelect) {
        citySelect.addEventListener('change', () => {
            if (form.dataset.hydrating === '1') return;
            onCityChange(form);
        });
    }

    const cityCustom = form.querySelector('[data-city-custom]');
    if (cityCustom) {
        cityCustom.addEventListener('input', () => syncHiddenLocationNames(form));
    }

    form.addEventListener('submit', (event) => {
        AddressLocation.prepareCityForSubmit(form);
        syncHiddenLocationNames(form);
        if (!AddressLocation.validateCityField(form)) {
            event.preventDefault();
            AddressLocation.restoreCityFieldsAfterSubmit(form);
        }
    });
}

async function initAddressForm(form) {
    attachAddressFormHandlers(form);
    try {
        await loadCountries(form);
    } catch (error) {
        console.error('Failed to load address dropdowns', error);
    }
}

// Avatar upload and preview functionality
document.addEventListener('DOMContentLoaded', () => {
    const avatarInput = document.getElementById('avatarInput');
    const avatarPreview = document.getElementById('avatarPreview');
    const removeAvatarBtn = document.getElementById('removeAvatarBtn');
    const removeAvatarFlag = document.getElementById('removeAvatarFlag');

    // Handle file selection
    if (avatarInput) {
        avatarInput.addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                // Validate file size (2MB)
                if (file.size > 2048 * 1024) {
                    alert('File size must be less than 2MB');
                    this.value = '';
                    return;
                }

                // Validate file type
                const validTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif'];
                if (!validTypes.includes(file.type)) {
                    alert('Please select a valid image file (JPEG, PNG, or GIF)');
                    this.value = '';
                    return;
                }

                // Show preview
                const reader = new FileReader();
                reader.onload = function(e) {
                    if (avatarPreview) {
                        // Check if it's the placeholder div or an img
                        if (avatarPreview.classList.contains('avatar-preview-placeholder')) {
                            // Replace placeholder with img
                            const img = document.createElement('img');
                            img.src = e.target.result;
                            img.className = 'avatar-preview-img';
                            img.alt = 'Avatar preview';
                            img.id = 'avatarPreview';
                            avatarPreview.parentNode.replaceChild(img, avatarPreview);
                        } else {
                            // Update existing img
                            avatarPreview.src = e.target.result;
                        }
                    }
                };
                reader.readAsDataURL(file);
            }
        });
    }

    // Handle remove avatar button
    if (removeAvatarBtn) {
        removeAvatarBtn.addEventListener('click', function() {
            if (confirm('Are you sure you want to remove your profile picture?')) {
                // Set remove flag
                if (removeAvatarFlag) {
                    removeAvatarFlag.value = '1';
                }
                
                // Clear file input
                if (avatarInput) {
                    avatarInput.value = '';
                }
                
                // Show placeholder
                if (avatarPreview && avatarPreview.tagName === 'IMG') {
                    const placeholder = document.createElement('div');
                    placeholder.className = 'avatar-preview-placeholder';
                    placeholder.id = 'avatarPreview';
                    placeholder.innerHTML = '<i class="bi bi-person-circle"></i><span>No image</span>';
                    avatarPreview.parentNode.replaceChild(placeholder, avatarPreview);
                }
                
                // Hide remove button
                this.style.display = 'none';
            }
        });
    }

    // Initialize handlers for both forms, but load edit data only when opened.
    document.querySelectorAll('[data-address-form]').forEach((form) => {
        attachAddressFormHandlers(form);
        if (form.id !== 'editAddressForm') {
            loadCountries(form).catch((error) => {
                console.error('Failed to load address dropdowns', error);
            });
        }
    });

    const editModal = document.getElementById('editAddressModal');
    const editForm = document.getElementById('editAddressForm');
    let lastEditFillKey = '';
    let lastEditFillAt = 0;

    async function fillEditAddressForm(trigger) {
        if (!editForm || !trigger) return;

        const button = trigger.closest ? (trigger.closest('[data-update-action]') || trigger) : trigger;
        if (!button || !button.dataset) return;

        const fillKey = button.dataset.updateAction || button.dataset.name || '';
        const now = Date.now();
        if (fillKey && fillKey === lastEditFillKey && (now - lastEditFillAt) < 400) {
            return;
        }
        lastEditFillKey = fillKey;
        lastEditFillAt = now;

        editForm.dataset.hydrating = '1';
        editForm.action = button.dataset.updateAction || '#';
        editForm.querySelector('input[name="name"]').value = button.dataset.name || '';
        editForm.querySelector('input[name="mobile"]').value = button.dataset.mobile || '';
        editForm.querySelector('input[name="line1"]').value = button.dataset.line1 || '';
        editForm.querySelector('input[name="line2"]').value = button.dataset.line2 || '';
        editForm.querySelector('input[name="pin"]').value = button.dataset.pin || '';

        const defaultCheckbox = editForm.querySelector('input[name="is_default"]');
        if (defaultCheckbox) {
            defaultCheckbox.checked = button.dataset.default === '1';
        }

        const countrySelect = editForm.querySelector('[data-country-select]');
        const stateSelect = editForm.querySelector('[data-state-select]');
        const citySelect = editForm.querySelector('[data-city-select]');

        if (countrySelect) {
            countrySelect.dataset.selectedCountry = button.dataset.country || '';
            countrySelect.dataset.selectedCountryName = button.dataset.countryName || '';
        }
        if (stateSelect) {
            stateSelect.dataset.selectedState = button.dataset.state || '';
            stateSelect.dataset.selectedStateName = button.dataset.stateName || '';
        }
        const selectedCityName = button.dataset.cityName || '';
        if (citySelect) {
            citySelect.dataset.selectedCity = button.dataset.city || '';
            citySelect.dataset.selectedCityName = selectedCityName;
        }

        const stateName = editForm.querySelector('[data-state-name]');
        const cityName = editForm.querySelector('[data-city-name]');
        if (stateName) stateName.value = button.dataset.stateName || '';
        if (cityName) cityName.value = selectedCityName;

        try {
            await loadCountries(editForm);
            syncHiddenLocationNames(editForm);
        } catch (error) {
            console.error('Failed to load address data', error);
        } finally {
            window.setTimeout(() => {
                delete editForm.dataset.hydrating;
            }, 100);
        }
    }

    if (editModal && editForm) {
        document.querySelectorAll('[data-bs-target="#editAddressModal"]').forEach((btn) => {
            btn.addEventListener('click', () => fillEditAddressForm(btn));
        });

        editModal.addEventListener('show.bs.modal', (event) => {
            const button = event.relatedTarget;
            if (!button) return;
            fillEditAddressForm(button);
        });

        editModal.addEventListener('hidden.bs.modal', () => {
            lastEditFillKey = '';
            lastEditFillAt = 0;
            delete editForm.dataset.hydrating;
        });
    }
});
</script>
@endpush
@push('styles')
<style>
/* Avatar Upload Styles */
.avatar-upload-container {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    flex-wrap: wrap;
    align-items: center;
}

.avatar-preview-wrapper {
    flex-shrink: 0;
}

.avatar-preview-img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid var(--color-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.avatar-preview-placeholder {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px dashed #dee2e6;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center; */
    background-color: #f8f9fa;
    color: #6c757d;
}

.avatar-preview-placeholder i {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

.avatar-preview-placeholder span {
    font-size: 0.875rem;
}

.avatar-upload-controls {
    flex: 1;
    min-width: 200px;
}

.profile-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.brand-modal .modal-header {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: #ffffff;
    border-bottom: none;
}
.brand-modal .modal-title {
    font-weight: 700;
}
.brand-modal .btn-close {
    filter: invert(1);
}
.brand-modal .modal-content {
    border: none;
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
    border-radius: 14px;
}
.address-drawer-modal.modal,
#addAddressModal.modal,
#editAddressModal.modal {
    background: transparent !important;
    background-color: transparent !important;
}
.address-drawer-modal.modal.fade,
#addAddressModal.modal.fade,
#editAddressModal.modal.fade {
    opacity: 1 !important;
    transition: none !important;
}
body:has(.address-drawer-modal.show) .modal-backdrop,
body:has(#addAddressModal.show) .modal-backdrop,
body:has(#editAddressModal.show) .modal-backdrop {
    display: none !important;
    background: transparent !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
@media (min-width: 768px) {
    .address-drawer-modal.modal {
        --bs-modal-margin: 0;
        justify-content: flex-end !important;
        align-items: stretch !important;
        margin: 0 !important;
        padding: 0 !important;
        inset: 0 !important;
    }
    .address-drawer-modal .modal-dialog,
    .address-drawer-modal.modal.fade .modal-dialog {
        margin: 0 !important;
        padding: 0 !important;
        max-width: 560px !important;
        height: 100% !important;
        max-height: 100% !important;
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: auto !important;
        transform: translate3d(100%, 0, 0) !important;
        transition: transform 0.32s ease !important;
    }
    .address-drawer-modal.modal.show .modal-dialog,
    .address-drawer-modal.modal.fade.show .modal-dialog {
        transform: translate3d(0, 0, 0) !important;
    }
    .address-drawer-modal .modal-content {
        height: 100% !important;
        min-height: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        box-shadow: -8px 0 32px rgba(19, 35, 60, 0.18);
    }
}
.brand-modal .form-control,
.brand-modal .form-select {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    height: 2rem !important;
    min-height: 2rem !important;
    padding: 0.25rem 0.75rem;
    box-shadow: none;
    transition: var(--transition);
}
.brand-modal .input-group {
    height: 2rem;
    align-items: stretch;
}
.brand-modal .input-group-text {
    height: 2rem !important;
    min-height: 2rem !important;
    max-height: 2rem !important;
    padding: 0 0.75rem !important;
    line-height: 2rem !important;
    font-size: 0.95rem;
    box-sizing: border-box;
}
.brand-modal .form-control:focus,
.brand-modal .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(19,35,60,0.1);
}
.brand-modal .form-label {
    color: var(--text-dark);
    font-weight: 600;
}
.brand-modal .modal-footer {
    border-top: 1px solid var(--border-color);
}
.brand-modal .modal-body {
    overflow: visible;
}
.brand-link {
    color: var(--color-primary) !important;
    font-weight: 600;
}
.brand-link:hover {
    color: var(--color-secondary) !important;
    text-decoration: none;
}
.brand-modal select,
.brand-modal .form-select {
    position: relative;
    z-index: 1065;
}
.brand-modal .select2-container {
    z-index: 2000 !important;
}
.select2-dropdown.select2-dropdown--below {
    z-index: 9999;
}
</style>
@endpush
@endsection