@extends('member.dashboard')

@section('member-content')
<div id="adresses" class="">
    <div class="card">
        <div class="card-header d-flex align-items-center justify-content-between flex-wrap gap-2">
            <h4 class="mb-0">Mes adresses</h4>
            <button class="btn btn-primary btn-sm"
                data-bs-toggle="modal"
                data-bs-target="#addressModal"
                data-action="{{ route('member.addresses.submit') }}"
                data-method="POST"
                data-title="{{ __('member.address.add_new_address') }}">
                <i class="bi bi-plus-lg"></i> {{ __('member.address.add_new_address') }}
            </button>
        </div>
        <div class="card-body">
            <div class="row g-3">
                @foreach ($addresses as $address)


                <div class="col-12 col-md-6">
                    <div class="p-3 border rounded-2 h-100 bg-light" style="border-color:var(--border);">
                        <div class="d-flex align-items-start justify-content-between gap-3">
                            <div>
                                <div class="fw-semibold">
                                    {{ $address->address_line1 }}<br>
                                    {!! $address->address_line2 ?? '&nbsp;' !!}
                                </div>
                                <div class="text-muted">{{ $address->postal_code }} {{ $address->city }} — {{ $address->country }}</div>
                                @if ($address->is_default)
                                <span class="badge bg-success-subtle mt-2"><i class="ri-star-line me-1"></i>{{ __('member.address.default') }}</span>
                                @endif
                            </div>
                            <div class="dropdown">
                                <button class="btn btn-sm btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">Actions</button>
                                <ul class="dropdown-menu dropdown-menu-end">
                                    <li>
                                        <a role="button" class="dropdown-item text-primary"
                                            data-bs-toggle="modal"
                                            data-bs-target="#addressModal"
                                            data-action="{{ route('member.addresses.update', $address->id) }}"
                                            data-method="POST"
                                            data-id="{{ $address->id }}"
                                            data-title="Éditer l'adresse"
                                            data-line1="{{ $address->address_line1 }}"
                                            data-line2="{{ $address->address_line2 }}"
                                            data-city="{{ $address->city }}"
                                            data-postal="{{ $address->postal_code }}"
                                            data-country="{{ $address->country }}"
                                            data-default="{{ $address->is_default }}"
                                            title="Éditer">
                                            <i class="ri-pencil-line"></i> Modifier
                                        </a>
                                    </li>
                                    <li>
                                        <form action="{{ route('member.addresses.delete', $address->id) }}" method="POST">
                                            @csrf
                                            @method('DELETE')
                                            <input type="hidden" name="id" value="{{ $address->id }}">
                                            <button type="submit" class="dropdown-item text-danger" title="Supprimer">
                                                <i class="ri-delete-bin-line"></i> Supprimer
                                            </button>
                                        </form>
                                    </li>

                                    <!-- Bouton définir comme par défaut (si ce n'est pas déjà le cas) -->
                                    @if (!$address->is_default)
                                    <li>
                                        <form action="{{ route('member.addresses.set-default', $address->id) }}" method="POST">
                                            @csrf
                                            @method('PUT')
                                            <input type="hidden" name="id" value="{{ $address->id }}">
                                            <button type="submit" class="dropdown-item text-secondary" title="Définir comme adresse principale">
                                                <i class="ri-star-line"></i> {{ __('member.address.set_as_default') }}
                                            </button>
                                        </form>
                                    </li>
                                    @endif
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>


                @endforeach
            </div>
        </div>
    </div>
</div>



<!-- Modal add/edit -->
<x-member.form-add-address />

@if ($errors->any())
<script>
    $(document).ready(function() {
        const modal = new bootstrap.Modal(document.getElementById('addressModal'));
        modal.show();
    });
</script>
@endif


@endsection

@section('scripts')
<script>

    document.addEventListener('DOMContentLoaded', function() {

        initSubmitSpinner('addressForm', "{{ __('member.loading') }}...");

        const addressModal = document.getElementById('addressModal')
        const addressForm = document.getElementById('addressForm')

        addressModal.addEventListener('show.bs.modal', function(event) {
            const button = event.relatedTarget
            const action = button.getAttribute('data-action')
            const method = button.getAttribute('data-method') || 'POST'
            const title = button.getAttribute('data-title') || 'Adresse'

            // console.log(button);

            // champs
            document.getElementById('addressModalLabel').textContent = title
            addressForm.setAttribute('action', action)
            document.getElementById('formMethod').value = method

            // champs dynamiques (si présent = édition, sinon = vide)
            document.getElementById('address_line1').value = button.getAttribute('data-line1') || ''
            document.getElementById('address_line2').value = button.getAttribute('data-line2') || ''
            document.getElementById('postal_code').value = button.getAttribute('data-postal') || ''
            document.getElementById('city').value = button.getAttribute('data-city') || ''
            document.getElementById('country').value = button.getAttribute('data-country') || ''
            document.getElementById('is_default').checked = button.getAttribute('data-default') === '1'
            document.getElementById('address_id').value = button.getAttribute('data-id') || ''
        });
    });
</script>
@endsection