@extends('layouts.app')

@section('content')
<div class="pb-12">
    <div class="grid grid-cols-1 gap-4 px-4 sm:grid-cols-6">

        <!-- SOL KOLON -->
        <div class="col-span-1 overflow-hidden bg-white border shadow border-stone-300 sm:col-span-4 sm:rounded-lg">
            <div class="p-6 bg-white border-b border-gray-200 lg:p-8">
                <div class="flex items-center justify-between">
                    <div>
                        <h1 class="text-2xl font-medium text-gray-900">
                            E-Belge Entegrasyonu
                        </h1>
                        <p class="mt-2 leading-relaxed text-gray-500">
                            Kapanan adisyonlardan e-belge oluşturma ve gönderme
                        </p>
                    </div>
                    <div class="flex items-center gap-4">
                    </div>
                </div>
            </div>

            @if (!empty($okcSlipWarning))
            @php
            $slipStyles = [
            'low' => ['bg' => 'bg-blue-50 border-blue-200', 'icon' => 'text-blue-500', 'title' => 'text-blue-800',
            'text' => 'text-blue-700', 'bar' => 'bg-blue-500', 'symbol' => 'info'],
            'medium' => ['bg' => 'bg-amber-50 border-amber-200', 'icon' => 'text-amber-500', 'title' =>
            'text-amber-800', 'text' => 'text-amber-700', 'bar' => 'bg-amber-500', 'symbol' => 'warning'],
            'high' => ['bg' => 'bg-orange-50 border-orange-200', 'icon' => 'text-orange-500', 'title' =>
            'text-orange-800', 'text' => 'text-orange-700', 'bar' => 'bg-orange-500', 'symbol' => 'warning'],
            'critical' => ['bg' => 'bg-rose-50 border-rose-200', 'icon' => 'text-rose-500', 'title' => 'text-rose-800',
            'text' => 'text-rose-700', 'bar' => 'bg-rose-500', 'symbol' => 'error'],
            ];
            $slipStyle = $slipStyles[$okcSlipWarning['level']] ?? $slipStyles['medium'];
            @endphp
            <!-- YAZARKASA FİŞ YAZDIRMA UYARISI -->
            <div class="px-6 pt-4 lg:px-8">
                <div class="p-4 border rounded-md {{ $slipStyle['bg'] }}">
                    <div class="flex">
                        <div class="shrink-0">
                            <span class="text-2xl material-symbols-rounded {{ $slipStyle['icon'] }}">
                                {{ $slipStyle['symbol'] }}
                            </span>
                        </div>
                        <div class="flex-1 ml-3">
                            <h3 class="text-sm font-semibold {{ $slipStyle['title'] }}">
                                Yazarkasa fişi yazdırılmayan satışlar tespit edildi
                            </h3>
                            <p class="mt-1 text-sm {{ $slipStyle['text'] }}">
                                {{ $okcSlipWarning['message'] }}
                            </p>
                            <div class="flex items-center gap-3 mt-3">
                                <div class="flex-1 h-1.5 overflow-hidden rounded-full bg-white/70">
                                    <div class="h-full rounded-full {{ $slipStyle['bar'] }}"
                                        style="width: {{ $okcSlipWarning['percent'] }}%"></div>
                                </div>
                                <span
                                    class="text-xs font-medium tracking-tight whitespace-nowrap {{ $slipStyle['text'] }}">
                                    Son {{ $okcSlipWarning['total'] }} satışın
                                    {{ $okcSlipWarning['unprinted'] }} tanesi (%{{ $okcSlipWarning['percent'] }})
                                    yazdırılmadı
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endif

            <!-- POS Satışları Tablosu (Livewire) -->
            @livewire('eadisyon-sales-table')
        </div>

        <!-- SAĞ KOLON -->
        <div class="col-span-1 sm:col-span-2">
            <!-- SİSTEM DURUMU & KONTÖR -->
            <div class="bg-white rounded-lg shadow">
                <div class="rounded-lg ring-1 ring-stone-300 sm:mx-0">
                    <div class="grid grid-cols-2">
                        {{-- SİSTEM DURUMU --}}
                        <div class="bg-white rounded-l-lg">
                            <div
                                class="grid items-center h-full px-3 py-2 bg-gradient-to-b {{ isset($efiles_integration) && $efiles_integration ? ' from-emerald-300/40 to-emerald-100/30' : 'from-rose-300/40 to-rose-100/30' }} lg:rounded-l-lg">
                                <div class="flex items-center">
                                    <div class="flex-shrink-0">
                                        <span
                                            class="text-3xl material-symbols-rounded {{ isset($efiles_integration) && $efiles_integration ? 'text-emerald-600' : 'text-rose-600' }}">
                                            {{ isset($efiles_integration) && $efiles_integration ? 'check' : 'close' }}
                                        </span>
                                    </div>
                                    <div class="flex-1 w-0 ml-3 tracking-tight">
                                        <dl>
                                            <dd>
                                                <div
                                                    class="text-sm font-bold {{ isset($efiles_integration) && $efiles_integration ? 'text-emerald-600' : 'text-rose-600' }}">
                                                    {{ isset($efiles_integration) && $efiles_integration ? 'SERVİSLER
                                                    ÇALIŞIYOR' : 'BAĞLANTI KURULAMADI' }}
                                                </div>
                                            </dd>
                                            @if (isset($efiles_integration) && $efiles_integration)
                                            <dt class="text-xs font-light truncate text-emerald-600">
                                                {{ $efiles_integration->description }}</dt>
                                            {{-- <dt class="text-xs font-light truncate text-emerald-600">
                                                {{ $efiles_integration->username }}</dt>
                                            <dt class="text-xs font-light truncate text-emerald-600">
                                                {{ substr($efiles_integration->password, 0, 3) }}*****</dt> --}}
                                            @else
                                            <dt class="text-xs font-light text-rose-600">E-ADİSYON
                                                SERVİSLERİNE BAĞLI DEĞİLSİNİZ</dt>
                                            @endif
                                        </dl>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {{-- BAKİYE DURUMU --}}
                        @livewire('credit-balance')
                    </div>
                </div>
            </div>

            @if ($is_admin == 1)
            <!-- ADISYON GONDERIM MODU -->
            @livewire('auto-send-toggle')
            <!-- OKC NUMARASI -->
            @livewire('okc-serial-input')
            @endif

            <!-- HESAPLANAN E-ADİSYON TÜKETİMİ -->
            <div class="p-6 mt-4 bg-white rounded-lg shadow">
                <div class="flex items-center justify-between">
                    <div class="text-lg font-medium text-gray-900">HESAPLANAN E-ADİSYON TÜKETİMİ</div>
                </div>
                <div class="mt-4">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <span class="text-3xl material-symbols-rounded text-amber-600">
                                receipt_long
                            </span>
                        </div>
                        <div class="ml-3">
                            <div class="text-base font-bold tracking-tighter text-gray-900">
                                {{ number_format($salesLast365Days ?? 0, 0, ',', '.') }}
                                ADİSYON
                            </div>
                            <div class="text-xs font-light text-gray-500">SON 365 GÜN AÇILAN ADİSYON SAYISI</div>
                        </div>
                    </div>
                    <div class="p-4 mt-4 rounded-md bg-blue-50">
                        <div class="flex">
                            <div class="shrink-0">
                                <svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true"
                                    class="text-blue-400 size-5">
                                    <path
                                        d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9Z"
                                        clip-rule="evenodd" fill-rule="evenodd" />
                                </svg>
                            </div>
                            <div class="flex-1 ml-3 md:flex md:justify-between">
                                <p class="text-xs tracking-tight text-blue-700">Açılan 1 Adisyon = 1 Kontör olarak
                                    ücretlendirilir. Kontörlerin kullanım süresi 365 gün
                                    olduğu
                                    için satın alım yapmadan önce işletmenizin yıllık tüketim miktarını dikkate alınız.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            @if (isset($efiles_integration) && $efiles_integration && $showPackageSelection)
            <!-- PAKET SEÇİMİ -->
            <div class="mt-4 bg-white shadow sm:rounded-lg">
                <div class="px-4 py-5 sm:p-6">
                    <h3 class="text-lg font-semibold text-gray-900">PAKET SEÇİMİ</h3>
                    <div class="max-w-lg mt-2 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="Pricing plans" class="relative mt-4 -space-y-px bg-white rounded-md">
                        <label aria-label="Daha Az"
                            class="group flex flex-col 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 has-[:checked]:relative has-[:checked]:border-teal-200 has-[:checked]:bg-teal-50 md:grid md:grid-cols-3 md:pl-4 md:pr-6">
                            <span class="flex items-center gap-3 text-sm">
                                <input type="radio" name="pricing-plan" value="enterprise"
                                    class="relative size-4 appearance-none rounded-full border border-stone-300 bg-white before:absolute before:inset-1 before:rounded-full before:bg-white checked:border-teal-600 checked:bg-teal-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600 disabled:border-gray-300 disabled:bg-stone-100 disabled:before:bg-gray-400 forced-colors:appearance-auto forced-colors:before:hidden [&:not(:checked)]:before:hidden" />
                                <div>
                                    <span class="font-medium text-stone-900 group-has-[:checked]:text-teal-900">En
                                        az</span>
                                    <span
                                        class="text-xs tracking-tight text-stone-900/50 group-has-[:checked]:text-teal-900/50">Tahmini
                                        tüketebileceğiniz en alt değer</span>
                                </div>
                            </span>
                            <span class="pl-1 ml-6 text-sm md:ml-0 md:pl-0 md:text-right">
                                <span class="font-medium text-stone-900 group-has-[:checked]:text-teal-900">{{
                                    number_format($creditPrice * 1.05 * ($salesLast365Days * 0.9), 2, ',', '.')
                                    }}</span>
                                <span class="text-sm text-stone-800 group-has-[:checked]:text-teal-900">TRL</span>
                                <div class="mt-1 text-stone-400 text-xs group-has-[:checked]:text-teal-700/70">
                                    {{ number_format($creditPrice * 1.05, 2, ',', '.') }}
                                    TRL/adet</div>
                            </span>
                            <span
                                class="ml-6 pl-1 text-sm text-stone-500 group-has-[:checked]:text-teal-700/70 md:ml-0 md:pl-0 md:text-right">+{{
                                number_format($salesLast365Days * 0.9 ?? 0, 0, ',', '.') }}
                                KONTÖR</span>
                        </label>
                        <label aria-label="Size Özel"
                            class="group flex flex-col 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 has-[:checked]:relative has-[:checked]:border-teal-200 has-[:checked]:bg-teal-50 md:grid md:grid-cols-3 md:pl-4 md:pr-6">
                            <span class="flex items-center gap-3 text-sm">
                                <input type="radio" name="pricing-plan" value="enterprise" checked
                                    class="relative size-4 appearance-none rounded-full border border-stone-300 bg-white before:absolute before:inset-1 before:rounded-full before:bg-white checked:border-teal-600 checked:bg-teal-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600 disabled:border-gray-300 disabled:bg-stone-100 disabled:before:bg-gray-400 forced-colors:appearance-auto forced-colors:before:hidden [&:not(:checked)]:before:hidden" />
                                <div>
                                    <span class="font-medium text-stone-900 group-has-[:checked]:text-teal-900">En
                                        uygun</span>
                                    <span
                                        class="text-xs tracking-tight text-stone-900/50 group-has-[:checked]:text-teal-900/50">Tüketiminize
                                        göre hesaplanmış optimum değer</span>
                                </div>
                            </span>
                            <span class="pl-1 ml-6 text-sm md:ml-0 md:pl-0 md:text-right">
                                <span class="font-medium text-stone-900 group-has-[:checked]:text-teal-900">{{
                                    number_format($creditPrice * ($salesLast365Days * 1.1), 2, ',', '.') }}</span>
                                <span class="text-sm text-stone-800 group-has-[:checked]:text-teal-900">TRL</span>
                                <div class="mt-1 text-stone-400 text-xs group-has-[:checked]:text-teal-700/70">
                                    {{ number_format($creditPrice, 2, ',', '.') }}
                                    TRL/adet</div>
                            </span>
                            <span
                                class="ml-6 pl-1 text-sm text-stone-500 group-has-[:checked]:text-teal-700/70 md:ml-0 md:pl-0 md:text-right">+{{
                                number_format($salesLast365Days * 1.1 ?? 0, 0, ',', '.') }}
                                KONTÖR</span>
                        </label>
                        <label aria-label="Daha Fazla"
                            class="group flex flex-col 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 has-[:checked]:relative has-[:checked]:border-teal-200 has-[:checked]:bg-teal-50 md:grid md:grid-cols-3 md:pl-4 md:pr-6">
                            <span class="flex items-center gap-3 text-sm">
                                <input type="radio" name="pricing-plan" value="enterprise"
                                    class="relative size-4 appearance-none rounded-full border border-stone-300 bg-white before:absolute before:inset-1 before:rounded-full before:bg-white checked:border-teal-600 checked:bg-teal-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600 disabled:border-gray-300 disabled:bg-stone-100 disabled:before:bg-gray-400 forced-colors:appearance-auto forced-colors:before:hidden [&:not(:checked)]:before:hidden" />
                                <div>
                                    <span class="font-medium text-stone-900 group-has-[:checked]:text-teal-900">En
                                        çok</span>
                                    <span
                                        class="text-xs tracking-tight text-stone-900/50 group-has-[:checked]:text-teal-900/50">Tahmini
                                        tüketebileceğiniz en yüksek değer</span>
                                </div>
                            </span>
                            <span class="pl-1 ml-6 text-sm md:ml-0 md:pl-0 md:text-right">
                                <span class="font-medium text-stone-900 group-has-[:checked]:text-teal-900">{{
                                    number_format($creditPrice * 0.95 * ($salesLast365Days * 1.3), 2, ',', '.')
                                    }}</span>
                                <span class="text-sm text-stone-800 group-has-[:checked]:text-teal-900">TRL</span>
                                <div class="mt-1 text-stone-400 text-xs group-has-[:checked]:text-teal-700/70">
                                    {{ number_format($creditPrice * 0.95, 2, ',', '.') }}
                                    TRL/adet</div>
                            </span>
                            <span
                                class="ml-6 pl-1 text-sm text-stone-500 group-has-[:checked]:text-teal-700/70 md:ml-0 md:pl-0 md:text-right">+{{
                                number_format($salesLast365Days * 1.3 ?? 0, 0, ',', '.') }}
                                KONTÖR</span>
                        </label>
                    </fieldset>

                    @if ($is_have_address != 0)
                    <!-- CREDIT PURCHASE BUTTON -->
                    <div class="mt-5">
                        <button type="button" onclick="purchaseCredits()"
                            class="inline-flex items-center px-3 py-2 text-sm font-semibold text-white rounded-md shadow-sm bg-stone-600 hover:bg-stone-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-stone-500">SATIN
                            AL</button>
                    </div>
                    @else
                    <!-- ADDRESS NOTIF -->
                    <div class="p-4 rounded-md bg-blue-50">
                        <div class="flex">
                            <div class="shrink-0">
                                <svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true"
                                    class="text-blue-400 size-5">
                                    <path
                                        d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9Z"
                                        clip-rule="evenodd" fill-rule="evenodd" />
                                </svg>
                            </div>
                            <div class="flex-1 ml-3 md:flex md:justify-between">
                                <p class="text-sm text-blue-700">Paket satın alabilmek için öncelikle fatura
                                    bilgilerinizi güncelleyin.</p>
                                <p class="mt-3 text-sm md:mt-0 md:ml-6">
                                    <a href="#" class="font-medium text-blue-700 whitespace-nowrap hover:text-blue-600">
                                        Details
                                        <span aria-hidden="true"> &rarr;</span>
                                    </a>
                                </p>
                            </div>
                        </div>
                    </div>
                    @endif

                </div>
            </div>
            @endif

            @if (!isset($efiles_integration) || !$efiles_integration)
            <fieldset aria-label="Integrations" class="relative mt-4 -space-y-px bg-white rounded-md">
                <label aria-label="Daha Az"
                    class="flex items-center justify-between p-4 border border-stone-200 first:rounded-tl-md first:rounded-tr-md last:rounded-bl-md last:rounded-br-md focus:outline-none">
                    <span class="flex items-center w-2/3 gap-3 text-sm">
                        <div class="flex items-center gap-x-3">
                            <img class="inline-block size-9" src="https://cdn.apper.com.tr/img/apper/icon-color-gib.svg"
                                alt="gib" />
                            <div class="grid">
                                <span class="font-medium text-stone-900 group-has-[:checked]:text-teal-900">GİB
                                    E-Belge</span>
                                <span
                                    class="text-xs tracking-tight text-stone-900/50 group-has-[:checked]:text-teal-900/50">
                                    E-Adisyon belgesi düzenlemek ve kontör satın alabilmek için öncelikle GİB
                                    E-Belge
                                    entegrasyonunu başlatmanız gereklidir.</span>
                            </div>
                        </div>
                    </span>
                    <span class="pl-3 ml-6 text-sm">
                        <a href="https://workspace.apper.com.tr/integrations/index" type="button"
                            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">ENTEGRASYONU
                            BAŞLAT</a>
                    </span>
                </label>
            </fieldset>
            @endif
        </div>

    </div>
</div>

<!-- Success/Error Modal -->
<div id="resultModal" class="fixed inset-0 z-50 hidden w-full h-full overflow-y-auto bg-gray-600 bg-opacity-50">
    <div class="relative p-5 mx-auto bg-white border rounded-md shadow-lg top-20 w-96">
        <div class="mt-3 text-center">
            <div id="modalIcon" class="flex items-center justify-center w-12 h-12 mx-auto rounded-full">
                <!-- Icon will be inserted here -->
            </div>
            <h3 id="modalTitle" class="mt-2 text-lg font-medium leading-6 text-gray-900"></h3>
            <div id="modalMessage" class="py-3 mt-2 text-sm text-gray-500 px-7"></div>
            <div class="items-center px-4 py-3">
                <button id="modalClose"
                    class="w-full px-4 py-2 text-base font-medium text-white bg-blue-500 rounded-md shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-300">
                    Tamam
                </button>
            </div>
        </div>
    </div>
</div>

<script>
    // Listen for Livewire notifications (Livewire 3.x)
        document.addEventListener('livewire:init', function() {
            Livewire.on('notify', event => {
                const {
                    type,
                    message
                } = event;
                showModal(type === 'warning' ? 'info' : type,
                    type === 'success' ? 'Başarılı!' : (type === 'error' ? 'Hata!' : 'Bilgi'),
                    message);
            });
        });

        // Kontör satın alma işlemi
        async function purchaseCredits() {
            const selectedPlan = document.querySelector('input[name="pricing-plan"]:checked');

            if (!selectedPlan) {
                alert('Lütfen bir paket seçiniz.');
                return;
            }

            const selectedLabel = selectedPlan.closest('label');
            const planName = selectedLabel.querySelector('span.font-medium')?.textContent?.trim() || 'Standart Paket';
            const priceText = selectedLabel.querySelectorAll('span.font-medium')[1]?.textContent?.trim() || '0';
            const creditText = selectedLabel.querySelector('span.text-stone-500')?.textContent?.trim() || '0 KONTÖR';

            const paymentAmount = parseFloat(priceText.replace('.', '').replace(',', '.')) || 0;
            const creditAmount = parseInt(creditText.replace('+', '').replace(' KONTÖR', '').replace('.', '')) || 0;

            if (paymentAmount <= 0 || creditAmount <= 0) {
                alert('Paket bilgileri alınamadı. Lütfen sayfayı yenileyin.');
                return;
            }

            try {
                const response = await fetch('/pay/initiate', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({
                        payment_amount: paymentAmount,
                        credit_amount: creditAmount,
                        package_type: planName
                    })
                });

                const data = await response.json();

                if (data.success) {
                    window.open(data.data.iframe_url, '_blank');
                    showModal('success', 'Ödeme Sayfası Açıldı',
                        'Ödeme işleminizi tamamlayınız.<br><small class="text-gray-500">Sipariş No: ' + data.data
                        .merchant_oid + '</small>');
                } else {
                    showModal('error', 'Hata!', data.message || 'Ödeme başlatılamadı.');
                }
            } catch (error) {
                console.error('Error:', error);
                showModal('error', 'Bağlantı Hatası', 'Sunucuya bağlanırken bir hata oluştu: ' + error.message);
            }
        }

        // Show result modal
        function showModal(type, title, message) {
            const modal = document.getElementById('resultModal');
            const iconDiv = document.getElementById('modalIcon');
            const modalTitle = document.getElementById('modalTitle');
            const modalMessage = document.getElementById('modalMessage');

            let icon = '';
            if (type === 'success') {
                icon =
                    '<svg class="w-6 h-6 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>';
            } else if (type === 'error') {
                icon =
                    '<svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>';
            } else {
                icon =
                    '<svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>';
            }

            iconDiv.innerHTML = icon;
            modalTitle.textContent = title;
            modalMessage.innerHTML = message;
            modal.classList.remove('hidden');

            document.getElementById('modalClose').onclick = () => {
                modal.classList.add('hidden');
            };
        }
</script>
@endsection