<div id="addresses_list_{{ $prefix }}" class="addresses-list">
    @foreach ($addresses ?? [] as $address)
        @include('Shop.Customers.partials.address_item', [
            'address' => $address,
            'prefix' => $prefix ?? null,
            'inputName' => $inputName ?? null,
            'with_name' => $with_name ?? false,
            'selected' => $selected ?? null,
        ])
    @endforeach
</div>

<div id="add_address_container_{{ $prefix }}" class="green-dark d-none mb-3 mt-3">
    <x-card classBody="bg-green-dark yellow" title="Nouvelle adresse" classTitle="h4">
        @include('Shop.Customers.partials.address', [
            'prefix' => $prefix,
            'with_country' => false,
            'with_tab' => true,
            'label' => 'Adresse',
            'customer' => [],
        ])
        <div class="row mt-3">
            <div class="col-md-6 mb-2">
                <x-form.button id="save_address_{{ $prefix }}" class="btn-success btn-sm btn-block"
                    icon="fa-save" txt="Enregistrer cette adresse"
                    :metadata="'data-prefix='.$prefix" />
            </div>
            <div class="col-md-6 mb-2">
                <x-form.button id="cancel_address_{{ $prefix }}" class="btn-outline-light btn-sm btn-block"
                    icon="fa-times" txt="Annuler"
                    :metadata="'data-prefix='.$prefix" />
            </div>
        </div>
    </x-card>
</div>

<div class="row">
    <div class="col-12 text-right">
        <x-form.button id="add_address_{{ $prefix }}" icon="fa-plus" txt="Ajouter une adresse"
            class="btn-warning btn-sm mt-2" />
    </div>
</div>

@push('js')
    <script>
        (function() {
            var prefix = '{{ $prefix }}';
            var inputName = '{{ $inputName ?? '' }}';
            var $formContainer = $('#add_address_container_{{ $prefix }}');
            var $list = $('#addresses_list_{{ $prefix }}');
            var storeUrl = '{{ route('Shop.Customers.address.store') }}';

        var $toggleBtn = $('#add_address_{{ $prefix }}');

        $toggleBtn.on('click', function() {
            var isHidden = $formContainer.hasClass('d-none');
            if (isHidden) {
                $formContainer.removeClass('d-none');
                $toggleBtn.prop('disabled', true);
            }
        });

        $('#cancel_address_{{ $prefix }}').on('click', function() {
            $formContainer.addClass('d-none');
            $formContainer.find('input[type="text"]').val('');
            $toggleBtn.prop('disabled', false);
        });

        $('#save_address_{{ $prefix }}').on('click', function() {
            const data = $formContainer.find(':input').serialize();
            $.ajax({
                url: storeUrl,
                method: 'POST',
                data: data + '&prefix=' + prefix + (inputName ? '&input_name=' + inputName : ''),
                success: function(response) {
                    if (response.html) {
                        $list.append(response.html);
                    }
                    $formContainer.addClass('d-none');
                    $formContainer.find('input[type="text"]').val('');
                    $toggleBtn.prop('disabled', false);
                    if (response.id) {
                        const $newRadio = $list.find('#address_' + response.id);
                        $list.find('input[type="radio"]').not($newRadio).prop('checked', false);
                        $newRadio.prop('checked', true);
                    }
                    if (typeof $.fn.iCheck === 'function') {
                        $list.find('input[type="radio"]').iCheck('destroy');
                        if (typeof initIcheck === 'function') {
                            initIcheck('#addresses_list_{{ $prefix }} input[type="radio"]');
                            if (response.id) {
                                $list.find('#address_' + response.id).iCheck('check');
                            }
                        }
                    }
                    const message = response.message || '{{ __('Adresse enregistrée.') }}';
                    if (typeof growl === 'function') {
                        growl(message, 'success');
                    }
                },
                error: function(xhr) {
                    let message = '{{ __('Une erreur est survenue lors de l\'enregistrement de l\'adresse.') }}';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        message = xhr.responseJSON.message;
                    }
                    if (typeof growl === 'function') {
                        growl(message, 'error');
                    }
                }
            });
        });
        })();
    </script>
@endpush
