@extends('clientarea.profile.layout')

@section('profile-content')
<div class="card">
    <div class="card-header">
        <h5 class="mb-0">{{ __('store.clientarea_profile_navigation_billing_addresses') }}</h5>
    </div>
    <div class="card-body">
        <!-- Address Selector -->
        <div class="mb-4">
            <label for="addressSelector" class="form-label">{{ __('store.clientarea_profile_billing_addresses_select_address') }}</label>
            <select class="form-select" id="addressSelector">
                <option value="">{{ __('store.clientarea_profile_billing_addresses_select_address_to_edit') }}</option>
                <option value="new">{{ __('store.clientarea_profile_billing_addresses_create_new_address') }}</option>
                @foreach($addresses as $address)
                    <option value="{{ $address->id }}">
                        {{ $address->first_name }} {{ $address->last_name }}
                        @if($address->is_default) - {{ __('store.clientarea_profile_billing_addresses_default') }} @endif
                    </option>
                @endforeach
            </select>
        </div>

        <!-- Address Form -->
        <div id="addressFormContainer" style="display: none;">
            <form method="POST" action="{{ route('store.auth.profile.billing-addresses.store') }}" id="billingAddressForm">
                @csrf
                <input type="hidden" name="_method" value="PUT" id="methodField">
                <input type="hidden" name="address_id" id="addressId">

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="first_name" class="form-label">{{ __('store.auth_first_name') }} <span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('first_name') is-invalid @enderror" id="first_name" name="first_name" value="{{ old('first_name') }}" required>
                        @error('first_name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-6 mb-3">
                        <label for="last_name" class="form-label">{{ __('store.auth_last_name') }} <span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('last_name') is-invalid @enderror" id="last_name" name="last_name" value="{{ old('last_name') }}" required>
                        @error('last_name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-6 mb-3">
                        <label for="title" class="form-label">{{ __('store.clientarea_profile_billing_addresses_title') }} <span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('title') is-invalid @enderror" id="title" name="title" value="{{ old('title') }}" required>
                        @error('title')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-6 mb-3">
                        <label for="company_name" class="form-label">{{ __('store.clientarea_profile_billing_addresses_company_name') }}</label>
                        <input type="text" class="form-control @error('company_name') is-invalid @enderror" id="company_name" name="company_name" value="{{ old('company_name') }}">
                        @error('company_name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-6 mb-3">
                        <label for="email" class="form-label">{{ __('store.auth_email') }} <span class="text-danger">*</span></label>
                        <input type="email" class="form-control @error('email') is-invalid @enderror" id="email" name="email" value="{{ old('email') }}" required>
                        @error('email')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-6 mb-3">
                        <label for="phone" class="form-label">{{ __('store.auth_phone') }} <span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('phone') is-invalid @enderror" id="phone" name="phone" value="{{ old('phone') }}" required>
                        @error('phone')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-6 mb-3">
                        <label for="country_id" class="form-label">{{ __('store.auth_country') }} <span class="text-danger">*</span></label>
                        <select class="form-select @error('country_id') is-invalid @enderror" id="country_id" name="country_id" required>
                            <option value="">{{ __('store.auth_select_country') }}</option>
                            @foreach($countries as $country)
                                <option value="{{ $country->id }}" {{ old('country_id') == $country->id ? 'selected' : '' }}>
                                    {{ $country->common_name }}
                                </option>
                            @endforeach
                        </select>
                        @error('country_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-6 mb-3">
                        <label for="city_id" class="form-label">{{ __('store.auth_city') }} <span class="text-danger">*</span></label>
                        <select class="form-select @error('city_id') is-invalid @enderror" id="city_id" name="city_id" required>
                            <option value="">{{ __('store.auth_select_city') }}</option>
                        </select>
                        @error('city_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-6 mb-3">
                        <label for="address1" class="form-label">{{ __('store.auth_address1') }} <span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('address1') is-invalid @enderror" id="address1" name="address1" value="{{ old('address1') }}" required>
                        @error('address1')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-6 mb-3">
                        <label for="address2" class="form-label">{{ __('store.auth_address2') }}</label>
                        <input type="text" class="form-control @error('address2') is-invalid @enderror" id="address2" name="address2" value="{{ old('address2') }}">
                        @error('address2')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-6 mb-3">
                        <label for="state" class="form-label">{{ __('store.auth_state') }}</label>
                        <input type="text" class="form-control @error('state') is-invalid @enderror" id="state" name="state" value="{{ old('state') }}">
                        @error('state')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-6 mb-3">
                        <label for="postcode" class="form-label">{{ __('store.auth_postcode') }} <span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('postcode') is-invalid @enderror" id="postcode" name="postcode" value="{{ old('postcode') }}" required>
                        @error('postcode')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-6 mb-3">
                        <label for="tax_id" class="form-label">{{ __('store.auth_tax_id') }}</label>
                        <input type="text" class="form-control @error('tax_id') is-invalid @enderror" id="tax_id" name="tax_id" value="{{ old('tax_id') }}">
                        @error('tax_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Custom Fields -->
                    @if($customFields && $customFields->count() > 0)
                        @foreach($customFields as $field)
                            <div class="col-md-6 mb-3">
                                <label for="custom_field_{{ $field->id }}" class="form-label">
                                    {{ $field->name }}
                                    @if($field->is_required) <span class="text-danger">*</span> @endif
                                </label>

                                @if($field->type == 'text' || $field->type == 'input')
                                    <input type="text"
                                           class="form-control @error('custom_fields.'.$field->id) is-invalid @enderror"
                                           id="custom_field_{{ $field->id }}"
                                           name="custom_fields[{{ $field->id }}]"
                                           value="{{ old('custom_fields.'.$field->id) }}"
                                           @if($field->is_required) required @endif>
                                @elseif($field->type == 'textarea')
                                    <textarea class="form-control @error('custom_fields.'.$field->id) is-invalid @enderror"
                                              id="custom_field_{{ $field->id }}"
                                              name="custom_fields[{{ $field->id }}]"
                                              rows="3"
                                              @if($field->is_required) required @endif>{{ old('custom_fields.'.$field->id) }}</textarea>
                                @elseif($field->type == 'select')
                                    <select class="form-select @error('custom_fields.'.$field->id) is-invalid @enderror"
                                            id="custom_field_{{ $field->id }}"
                                            name="custom_fields[{{ $field->id }}]"
                                            @if($field->is_required) required @endif>
                                        <option value="">{{ __('store.common_please_select') }}</option>
                                        @if(is_array($field->values))
                                            @foreach($field->values as $key => $value)
                                                <option value="{{ $key }}"
                                                        {{ old('custom_fields.'.$field->id) == $key ? 'selected' : '' }}>
                                                    {{ $value }}
                                                </option>
                                            @endforeach
                                        @endif
                                    </select>
                                @elseif($field->type == 'checkbox')
                                    <div class="form-check mt-2">
                                        <input class="form-check-input" type="checkbox"
                                               id="custom_field_{{ $field->id }}"
                                               name="custom_fields[{{ $field->id }}]"
                                               value="1"
                                               {{ old('custom_fields.'.$field->id) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="custom_field_{{ $field->id }}">
                                            {{ $field->description }}
                                        </label>
                                    </div>
                                @endif

                                @if($field->description && $field->type != 'checkbox')
                                    <div class="form-text">{{ $field->description }}</div>
                                @endif

                                @error('custom_fields.'.$field->id)
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        @endforeach
                    @endif

                    <div class="col-md-12 mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="is_default" name="is_default" value="1" {{ old('is_default') ? 'checked' : '' }}>
                            <label class="form-check-label" for="is_default">
                                {{ __('store.clientarea_profile_billing_addresses_set_as_default') }}
                            </label>
                        </div>
                    </div>
                </div>

                <div class="d-flex justify-content-between pt-3 border-top">
                    <button type="button" class="btn btn-outline-secondary" id="cancelFormBtn">
                        {{ __('store.buttons_cancel') }}
                    </button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save me-2"></i>{{ __('store.clientarea_profile_billing_addresses_save_address') }}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

<!-- Window Variables for JS -->
<script>
window.billingAddressStoreUrl = '{{ route("store.auth.profile.billing-addresses.store") }}';
window.billingAddressApiUrl = '{{ route("store.auth.profile.billing-addresses.index") }}';
window.citiesEndpoint = '{{ url("storeapi/store/cities") }}';
window.csrfToken = '{{ csrf_token() }}';
window.translations = window.translations || {};
window.translations.addNew = '{{ __("store.clientarea_profile_billing_addresses_add_new") }}';
window.translations.editAddress = '{{ __("store.clientarea_profile_billing_addresses_edit_address") }}';
window.translations.loadingError = '{{ __("store.clientarea_profile_billing_addresses_loading_error") }}';
</script>

@push('profile-scripts')
@vite(['resources/js/store/billing-addresses.js'])
@endpush
