@extends('layouts.app')

@section('content')

<!-- MODAL INTEGRATION DETAILS -->
@foreach ($availableIntegrations as $integration)
<x-integration-modal :integration="$integration" :officialAddress="$officialAddress" />
@endforeach

<!-- ENTEGRASYON SEÇİMİ -->
<div class="px-4 sm:px-12 my-6 sm:py-12 w-full sm:max-w-6xl">
    <div class="bg-white shadow sm:rounded-lg mt-4">
        <div class="px-4 py-5 sm:p-6">
            <h3 class="text-lg font-semibold text-gray-900">ENTEGRASYON SEÇİMİ</h3>
            <div class="mt-2 max-w-lg text-sm text-gray-500">
                <p>Son 365 günlük tüketiminize özel hesaplanmış yıllık seçeneklerden birini tercih edebilirsiniz
                </p>
            </div>

            <fieldset aria-label="Integrations" class="relative -space-y-px rounded-md bg-white mt-4">
                @foreach ($availableIntegrations as $integration)
                <label aria-label="Daha Az"
                    class="flex items-center border border-stone-200 p-4 first:rounded-tl-md first:rounded-tr-md last:rounded-bl-md last:rounded-br-md focus:outline-none md:grid md:grid-cols-6 md:pl-4 md:pr-6">
                    <span class="flex items-center md:col-span-3 gap-3 text-sm">
                        <div class="flex items-center gap-x-2">
                            <img class="inline-block size-9"
                                src="https://cdn.apper.com.tr/img/apper/icon-color-{{ $integration['slug'] }}.svg"
                                alt="{{ $integration['name'] }}" />
                            <div class="grid">
                                <span class="font-medium text-stone-900 group-has-[:checked]:text-teal-900">{{
                                    $integration['name'] }}</span>
                                <span
                                    class="text-xs tracking-tight text-stone-900/50 group-has-[:checked]:text-teal-900/50">{{
                                    $integration['title'] }}</span>
                            </div>
                        </div>
                    </span>
                    <span class="ml-6 pl-1 md:col-span-1 text-sm md:ml-0 md:pl-0 md:text-right">
                        <span class="font-medium text-stone-900 group-has-[:checked]:text-teal-900">{{
                            $integration['entry_price'] }}</span>
                        <span class="text-sm text-stone-800 group-has-[:checked]:text-teal-900">{{
                            $integration['currency'] }}</span>
                        <div class="mt-1 text-stone-400 text-xs group-has-[:checked]:text-teal-700/70">Kurulum
                        </div>
                    </span>
                    <span class="ml-6 pl-1 md:col-span-1 text-sm md:ml-0 md:pl-0 md:text-right">
                        <span class="font-medium text-stone-900 group-has-[:checked]:text-teal-900">{{
                            $integration['periodic_price'] }}</span>
                        <span class="text-sm text-stone-800 group-has-[:checked]:text-teal-900">{{
                            $integration['currency'] }}</span>
                        <div class="mt-1 text-stone-400 text-xs group-has-[:checked]:text-teal-700/70">{{
                            $integration['period'] }}</div>
                    </span>
                    <span class="ml-6 pl-3 md:col-span-auto text-sm md:ml-0 md:text-right">
                        @if ($integration['is_connected'] || ($integration['slug'] == 'pos' && $has_pos_access))
                        <span
                            class="inline-flex items-center rounded-md bg-teal-50 px-2 py-1 text-xs font-medium text-teal-600 ring-1 ring-inset ring-teal-500/10">Bağlı</span>
                        @elseif (($integration['slug'] == 'inpos' ||
                        $integration['slug'] == 'sabee' || $integration['slug'] == 'getir' || $integration['slug'] ==
                        'yemeksepeti') && !$has_pos_access)
                        <span
                            class="inline-flex items-center rounded-md truncate bg-stone-50 px-2 py-1 text-xs font-medium text-stone-600 ring-1 ring-inset ring-stone-500/10">Poscloud
                            gereklidir</span>
                        @else
                        <button type="button" onclick="openIntegrationModal('{{ $integration['slug'] }}')"
                            class="inline-flex items-center rounded-md bg-stone-600 px-3 py-1.5 text-xs text-white shadow-sm hover:bg-stone-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-stone-500">BAŞLAT</button>
                        @endif
                    </span>

                </label>
                @endforeach
            </fieldset>
        </div>
    </div>
</div>

<script>
    // Open integration modal by slug
function openIntegrationModal(slug) {
    const dialog = document.getElementById(`dialog-${slug}`);
    if (dialog) {
        dialog.showModal();
    }
}

// Form submission handler for payment
const paymentForms = document.querySelectorAll('form[id^="paymentForm-"]');
paymentForms.forEach(function(paymentForm) {
    paymentForm.addEventListener('submit', async function(e) {
        e.preventDefault();

        // Validate form
        if (!this.checkValidity()) {
            this.reportValidity();
            return;
        }

        const formData = new FormData(this);

        try {
            const response = await fetch(this.action, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            });

            const result = await response.json();

            if (result.success) {
                // Redirect to payment iframe URL
                window.location.href = result.data.iframe_url;
            } else {
                alert(result.message || 'Ödeme başlatılamadı');
            }
        } catch (error) {
            console.error('Payment error:', error);
            alert('Bir hata oluştu. Lütfen tekrar deneyin.');
        }
    });
});
</script>

@endsection