@model IEnumerable<WebVentaCoche.ViewModels.AddressViewModel>

@{
    Layout = "_AccountLayout";
    var addresses = Model.ToList();
}

<h2 class="mb-4">Mis Direcciones</h2>

@if (!addresses.Any())
{
    <p>No tienes direcciones registradas.</p>
}

<div class="mb-4">
    <button class="btn btn-success btn-sm"
            data-bs-toggle="modal"
            data-bs-target="#addressModal"
            data-id="">
        <i class="fa fa-plus me-1"></i>
        @(!addresses.Any() ? "Añadir dirección" : "Agregar dirección")
    </button>
</div>

@if (addresses.Any())
{
    <div class="row">
        @foreach (var addr in addresses)
        {
            <div class="col-md-6 mb-4">
                <div class="card p-3" style="background-color: rgba(255,255,255,0.8); border-radius:10px;">
                    <p class="mb-3">
                        <strong>@addr.Street</strong><br />
                        @addr.City, @addr.State @addr.ZipCode<br />
                        @addr.Country
                    </p>
                    <button class="btn btn-warning btn-sm"
                            data-bs-toggle="modal"
                            data-bs-target="#addressModal"
                            data-id="@addr.Id"
                            data-street="@addr.Street"
                            data-city="@addr.City"
                            data-state="@addr.State"
                            data-zipcode="@addr.ZipCode"
                            data-country="@addr.Country">
                        <i class="fa fa-pencil-alt me-1"></i> Editar
                    </button>
                </div>
            </div>
        }
    </div>
}

<div class="modal fade" id="addressModal" tabindex="-1" aria-labelledby="addressModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="addressForm" method="post">
                @Html.AntiForgeryToken()
                <div class="modal-header">
                    <h5 class="modal-title" id="addressModalLabel">Dirección</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="AddressId" name="Id" />

                    <div class="mb-3">
                        <label for="Street" class="form-label">Calle</label>
                        <input type="text" class="form-control" id="Street" name="Street" required />
                    </div>
                    <div class="mb-3">
                        <label for="City" class="form-label">Ciudad</label>
                        <input type="text" class="form-control" id="City" name="City" required />
                    </div>
                    <div class="mb-3">
                        <label for="State" class="form-label">Provincia / Estado</label>
                        <input type="text" class="form-control" id="State" name="State" />
                    </div>
                    <div class="mb-3">
                        <label for="ZipCode" class="form-label">Código Postal</label>
                        <input type="text" class="form-control" id="ZipCode" name="ZipCode" required />
                    </div>
                    <div class="mb-3">
                        <label for="Country" class="form-label">País</label>
                        <input type="text" class="form-control" id="Country" name="Country" required />
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary btn-sm">Guardar</button>
                </div>
            </form>
        </div>
    </div>
</div>

@section Scripts {
  <script>
    //Al cargar la página, mueve la <div id="addressModal"> al final de <body>
    document.addEventListener('DOMContentLoaded', () => {
      const modalEl = document.getElementById('addressModal');
      if (modalEl.parentNode !== document.body) {
        document.body.appendChild(modalEl);
      }
    });

    document.getElementById('addressModal')
      .addEventListener('show.bs.modal', event => {
        const button = event.relatedTarget;
        const form   = document.getElementById('addressForm');
        const title  = document.getElementById('addressModalLabel');
        const id     = button.getAttribute('data-id');

        if (id) {
          title.textContent = 'Modificar Dirección';
          form.action = '/Address/Edit/' + id;
          document.getElementById('AddressId').value = id;
          document.getElementById('Street').value   = button.dataset.street;
          document.getElementById('City').value     = button.dataset.city;
          document.getElementById('State').value    = button.dataset.state;
          document.getElementById('ZipCode').value  = button.dataset.zipcode;
          document.getElementById('Country').value  = button.dataset.country;
        } else {
          title.textContent = 'Añadir Dirección';
          form.action = '/Address/Create';
          document.getElementById('AddressId').value = '';
          form.reset();
        }
      });
  </script>
}
