<style>
    [x-cloak] {
        display: none !important;
    }
</style>

<div x-data="productAlertModal()" x-show="showProductAlertModal" x-cloak 
     class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 backdrop-blur-md">
    
    <div class="fixed inset-0 bg-slate-500/75" aria-hidden="true"></div>
  
    <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
      <div class="flex min-h-full items-center justify-center p-4 text-center sm:items-center sm:p-0">

        <div x-transition:enter="transition ease duration-100" 
             x-transition:enter-start="opacity-0 translate-y-2 sm:translate-y-0 sm:scale-98" 
             x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" 
             x-transition:leave="transition ease-in duration-100" 
             x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100" 
             x-transition:leave-end="opacity-0 translate-y-2 sm:translate-y-0 sm:scale-98"
             class="relative transform overflow-hidden rounded-md bg-white text-left shadow-xl sm:my-8 sm:w-full sm:max-w-lg">
          <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
            <div class="sm:flex sm:items-start">
              <div class="mx-auto flex size-12 shrink-0 items-center justify-center rounded-full bg-blue-100 sm:mx-0 sm:size-10">
                <svg class="size-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
                </svg>
              </div>
              <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                <div class="text-lg font-bold mt-1" id="modal-title">Avviso di prezzo</div>
                <div class="mt-2">
                  <p class="text-sm mb-3">Lasciaci la tua email e ti avviseremo quando <strong x-text="selectedProductName"></strong> sarà disponibile online.</p>
                  
                  <form id="productAlertForm" @submit.prevent="submitProductAlert()" class="space-y-4">
                    <div>
                      <label for="email" class="block text-sm font-medium text-slate-700 mb-1"></label>
                      <input type="email" id="email" x-model="alertEmail" required 
                             class="w-full px-3 py-2 border border-slate-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                             placeholder="Inserisci la tua email">
                    </div>
                    
                
                    <div class="flex items-center">
                      <input type="checkbox" id="newsletter" x-model="includeNewsletter" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 rounded">
                      <label for="newsletter" class="ml-2 block text-sm text-slate-700 text-left">
                        Ricevi anche la nostra newsletter con le migliori offerte giornaliere
                      </label>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
          <div class="bg-white px-4 pb-4 sm:flex sm:flex-row-reverse sm:px-6">
            <button type="submit" form="productAlertForm" class="inline-flex w-full justify-center rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 sm:ml-3 sm:w-auto">
              Attiva avviso
            </button>
            <button @click="closeProductAlertModal()" type="button" class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-slate-900 shadow-sm ring-1 ring-inset ring-slate-300 hover:bg-slate-50 sm:mt-0 sm:w-auto">
              Annulla
            </button>
          </div>
        </div>

      </div>
    </div>

</div>

<script>
// Price Alert Modal functionality
function productAlertModal() {
    return {
        showProductAlertModal: false,
        selectedProductId: null,
        selectedProductName: '',
        alertEmail: '',
        includeNewsletter: false,

        init() {
            // Espone i metodi globalmente per essere chiamati da altri componenti
            window.productAlertModal = {
                openProductAlertModal: (productId, productName) => this.openProductAlertModal(productId, productName),
                closeProductAlertModal: () => this.closeProductAlertModal()
            };
        },

        openProductAlertModal(productId, productName) {
            this.selectedProductId = productId;
            this.selectedProductName = productName;
            this.showProductAlertModal = true;
        },

        closeProductAlertModal() {
            this.showProductAlertModal = false;
            this.alertEmail = '';
            this.includeNewsletter = false;
        },

        submitProductAlert() {
            // Qui puoi implementare la logica per inviare i dati del price alert
            console.log('Product Alert submitted:', {
                productId: this.selectedProductId,
                productName: this.selectedProductName,
                email: this.alertEmail,
                includeNewsletter: this.includeNewsletter
            });
            
            // Esempio di chiamata API (da implementare)
            // fetch('/api/price-alerts', {
            //     method: 'POST',
            //     headers: { 'Content-Type': 'application/json' },
            //     body: JSON.stringify({
            //         productId: this.selectedProductId,
            //         productName: this.selectedProductName,
            //         email: this.alertEmail,
            //         includeNewsletter: this.includeNewsletter
            //     })
            // });
            
            // Chiudi il modale dopo l'invio
            this.closeProductAlertModal();
            
            // Mostra un messaggio di successo (opzionale)
            alert('Avviso di prezzo attivato con successo!');
        }
    };
}
</script> 