@extends('layouts.app')

@section('content')
    <style>
        [x-cloak] {
            display: none !important;
        }
    </style>
    <div class="max-w-5xl px-4 py-8 mx-auto sm:px-6 lg:px-8">
        <div class="bg-white rounded-lg shadow">
            <div class="px-4 py-5 sm:p-6">
                <h2 class="text-xl font-bold text-stone-900">AYARLAR</h2>

                <!-- Integration Settings Section -->
                <div class="grid mt-8 gap-y-8">
                    {{-- FİRMA FATURA BİLGİLERİ --}}
                    @if (session('success'))
                        <div class="p-3 mt-4 text-green-700 bg-green-100 rounded-md">
                            {{ session('success') }}
                        </div>
                    @endif

                    @if (session('error'))
                        <div class="p-3 mt-4 text-red-700 bg-red-100 rounded-md">
                            {{ session('error') }}
                        </div>
                    @endif
                    
                    <div class="ml-3">
                        <h3 class="font-medium text-md text-stone-900">HESAP AYARLARI</h3>
                        <p class="mt-1 text-sm text-stone-500">Hesabınıza ait genel ayarlarınızı buradan yapılandırın</p>
                    </div>

                    <div class="grid p-4 rounded-md gap-y-6 bg-stone-50">
                        <h4 class="text-sm font-medium text-stone-900">FATURA BİLGİLERİ</h4>
                        <p class="-mt-6 text-sm text-stone-500">Firmanıza ait resmi fatura bilgilerinizi düzenleyin</p>
                        @livewire('team-address-form')
                    </div>

                    <div class="ml-3">
                        <h3 class="font-medium text-md text-stone-900">ENTEGRASYON AYARLARI</h3>
                        <p class="mt-1 text-sm text-stone-500">Diğer uygulamalara ait ayarlarınızı buradan yapılandırın</p>
                    </div>

                    {{-- POSMANAGER ENTEGRASYON AYARLARI --}}
                    <div class="grid p-4 rounded-md gap-y-6 bg-stone-50">
                        <div>
                            <h4 class="text-sm font-medium text-stone-900">POSMANAGER ENTEGRASYONU</h4>
                            <!-- List active bulutadisyon integrations -->
                            @if ($integrations->where('slug', 'bulutadisyon')->count() > 0)
                                <p class="text-sm text-stone-500">Eşitleme yapılacak Bulut Adisyon hesaplarınız</p>
                                <div class="mt-3 space-y-2">
                                    @foreach ($integrations->where('slug', 'bulutadisyon') as $integration)
                                        <div class="flex items-center text-xs text-stone-600">
                                            <span class="inline-block w-2 h-2 mr-2 rounded-full bg-emerald-500"></span>
                                            {{ $integration->title }} - ({{ $integration->relation_id }})
                                        </div>
                                    @endforeach
                                </div>
                            @endif
                        </div>

                        {{-- STOK KARTLARINI EŞİTLE --}}
                        <div class="grid gap-y-4">
                            <div>
                                <h4 class="text-sm font-medium text-stone-900">Stok Kartlarını Eşitle</h4>
                                <p class="text-sm text-stone-500">Bulut Adisyon'daki stok kartlarını Apper Finance sistemi
                                    ile eşitleyin.</p>
                            </div>

                            <div class="flex space-x-3">
                                @if ($integrations->where('slug', 'bulutadisyon')->first())
                                    <div x-data="{ syncing: false }">
                                        <form method="POST" action="{{ route('settings.sync-products') }}"
                                            @submit="syncing = true" x-show="!syncing" x-cloak>
                                            @csrf
                                            <button type="submit"
                                                class="inline-flex items-center px-4 py-2 text-sm font-medium text-white border border-transparent rounded-md shadow-sm bg-emerald-600 hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">
                                                {{ $stockItemCount > 0 ? 'Ürünleri Eşitle (' . $stockItemCount . ' adet)' : 'Ürünleri Eşitle' }}
                                            </button>
                                        </form>
                                        <div x-show="syncing" class="flex items-center">
                                            <svg class="w-4 h-4 mr-2 -ml-1 text-emerald-600 animate-spin"
                                                xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                                <circle class="opacity-25" cx="12" cy="12" r="10"
                                                    stroke="currentColor" stroke-width="4"></circle>
                                                <path class="opacity-75" fill="currentColor"
                                                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
                                                </path>
                                            </svg>
                                            <span class="text-sm text-stone-600">Posmanager'dan {{ $stockItemCount }} adet
                                                ürün alınıyor...</span>
                                        </div>
                                    </div>
                                @else
                                    <span
                                        class="inline-flex items-center px-4 py-2 text-sm font-medium text-white border border-transparent rounded-md shadow-sm bg-stone-400">
                                        Entegrasyon yapılandırılmamış
                                    </span>
                                @endif
                            </div>
                        </div>

                        {{-- CARİLERİ EŞİTLE --}}
                        <div class="grid gap-y-4">
                            <div>
                                <h4 class="text-sm font-medium text-stone-900">İşletmeleri Eşitle</h4>
                                <p class="text-sm text-stone-500">Bulut Adisyon'daki cari kartlarını Apper Finance sistemi
                                    ile eşitleyin.</p>
                            </div>

                            <div class="flex space-x-3">
                                @if ($integrations->where('slug', 'bulutadisyon')->first())
                                    <div x-data="{ syncingCompanies: false }">
                                        <form method="POST" action="{{ route('settings.sync-companies') }}"
                                            @submit="syncingCompanies = true" x-show="!syncingCompanies" x-cloak>
                                            @csrf
                                            <button type="submit"
                                                class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                                                {{ $stockSupplierCount > 0 ? 'İşletmeleri Eşitle (' . $stockSupplierCount . ' adet)' : 'İşletmeleri Eşitle' }}
                                            </button>
                                        </form>
                                        <div x-show="syncingCompanies" class="flex items-center">
                                            <svg class="w-4 h-4 mr-2 -ml-1 text-indigo-600 animate-spin"
                                                xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                                <circle class="opacity-25" cx="12" cy="12" r="10"
                                                    stroke="currentColor" stroke-width="4"></circle>
                                                <path class="opacity-75" fill="currentColor"
                                                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
                                                </path>
                                            </svg>
                                            <span class="text-sm text-stone-600">Bulut Adisyon'dan {{ $stockSupplierCount }}
                                                adet işletme alınıyor...</span>
                                        </div>
                                    </div>
                                @else
                                    <span
                                        class="inline-flex items-center px-4 py-2 text-sm font-medium text-white border border-transparent rounded-md shadow-sm bg-stone-400">
                                        Entegrasyon yapılandırılmamış
                                    </span>
                                @endif
                            </div>
                        </div>

                    </div>
                </div>

            </div>
        </div>
    </div>
@endsection