@extends('layouts.admin')

@section('title', 'Manuel Odeme Yontemleri')

@section('content')
@php
    $totalMethods = $paymentMethods->count();
    $activeMethods = $paymentMethods->where('is_active', true)->count();
    $inactiveMethods = max(0, $totalMethods - $activeMethods);
    $firstActive = $paymentMethods->firstWhere('is_active', true);
@endphp

<div class="space-y-6" data-payment-admin>
    <div class="flex flex-col gap-4 border-b border-zinc-800 pb-5 xl:flex-row xl:items-end xl:justify-between">
        <div>
            <p class="text-xs font-semibold uppercase tracking-[0.2em] text-yellow-400">Finans</p>
            <h1 class="mt-2 text-2xl font-bold text-white">Manuel Odeme Bilgileri</h1>
            <p class="mt-1 max-w-2xl text-sm text-zinc-400">Havale, Papara ve kripto bilgilerini buradan yonetin. Aktif olan yontemler kullanicinin para yatirma ekraninda gorunur.</p>
        </div>
        <div class="flex flex-wrap gap-2">
            <a href="{{ route('admin.deposits') }}" class="inline-flex items-center gap-2 rounded-lg border border-yellow-500/30 bg-yellow-500/10 px-4 py-2 text-sm font-semibold text-yellow-300 hover:bg-yellow-500/20">
                <i data-lucide="clock-3" class="h-4 w-4"></i>
                Bekleyen Yatirimlar
            </a>
            <button type="button" data-toggle-create class="inline-flex items-center gap-2 rounded-lg bg-red-600 px-4 py-2 text-sm font-semibold text-white hover:bg-red-500">
                <i data-lucide="plus" class="h-4 w-4"></i>
                Yeni Yontem
            </button>
        </div>
    </div>

    @if(session('success'))
        <div class="rounded-xl border border-emerald-500/25 bg-emerald-500/10 p-4 text-sm text-emerald-300">{{ session('success') }}</div>
    @endif

    @if(isset($errors) && $errors->any())
        <div class="rounded-xl border border-red-500/25 bg-red-500/10 p-4 text-sm text-red-300">{{ $errors->first() }}</div>
    @endif

    <div class="grid grid-cols-1 gap-3 md:grid-cols-4">
        <div class="rounded-xl border border-zinc-800 bg-zinc-950 p-4">
            <div class="flex items-center justify-between text-zinc-400">
                <span class="text-xs uppercase">Toplam</span>
                <i data-lucide="wallet-cards" class="h-4 w-4"></i>
            </div>
            <div class="mt-3 text-2xl font-bold text-white">{{ $totalMethods }}</div>
            <p class="mt-1 text-xs text-zinc-500">Kayitli odeme yontemi</p>
        </div>
        <div class="rounded-xl border border-emerald-500/20 bg-emerald-500/10 p-4">
            <div class="flex items-center justify-between text-emerald-300">
                <span class="text-xs uppercase">Aktif</span>
                <i data-lucide="check-circle-2" class="h-4 w-4"></i>
            </div>
            <div class="mt-3 text-2xl font-bold text-emerald-200">{{ $activeMethods }}</div>
            <p class="mt-1 text-xs text-emerald-200/70">Kullanicilara gorunuyor</p>
        </div>
        <div class="rounded-xl border border-zinc-800 bg-zinc-950 p-4">
            <div class="flex items-center justify-between text-zinc-400">
                <span class="text-xs uppercase">Pasif</span>
                <i data-lucide="pause-circle" class="h-4 w-4"></i>
            </div>
            <div class="mt-3 text-2xl font-bold text-white">{{ $inactiveMethods }}</div>
            <p class="mt-1 text-xs text-zinc-500">Gizli tutulan yontem</p>
        </div>
        <div class="rounded-xl border border-yellow-500/20 bg-yellow-500/10 p-4">
            <div class="flex items-center justify-between text-yellow-300">
                <span class="text-xs uppercase">Ilk Aktif</span>
                <i data-lucide="star" class="h-4 w-4"></i>
            </div>
            <div class="mt-3 truncate text-lg font-bold text-yellow-100">{{ $firstActive?->method_name ?? 'Yok' }}</div>
            <p class="mt-1 text-xs text-yellow-100/70">Para yatirma ekraninda oncelikli</p>
        </div>
    </div>

    <div class="rounded-xl border border-zinc-800 bg-zinc-950/90 p-4">
        <div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
            <div class="relative max-w-xl flex-1">
                <i data-lucide="search" class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-zinc-500"></i>
                <input type="search" data-method-search class="h-11 w-full rounded-lg border border-zinc-700 bg-black pl-10 pr-3 text-sm text-white outline-none focus:border-yellow-500" placeholder="Yontem, banka, IBAN veya cuzdana gore ara...">
            </div>
            <div class="flex flex-wrap gap-2" data-filter-buttons>
                <button type="button" data-filter="all" class="rounded-lg border border-yellow-500 bg-yellow-500 px-3 py-2 text-xs font-semibold text-black">Tumu</button>
                <button type="button" data-filter="active" class="rounded-lg border border-zinc-700 px-3 py-2 text-xs font-semibold text-zinc-300 hover:border-emerald-500 hover:text-emerald-300">Aktif</button>
                <button type="button" data-filter="inactive" class="rounded-lg border border-zinc-700 px-3 py-2 text-xs font-semibold text-zinc-300 hover:border-red-500 hover:text-red-300">Pasif</button>
            </div>
        </div>
        <p class="mt-3 hidden text-sm text-zinc-500" data-empty-search>Aramaniza uygun odeme yontemi bulunamadi.</p>
    </div>

    <div data-create-panel class="hidden rounded-xl border border-yellow-500/25 bg-gradient-to-br from-zinc-950 to-black p-5 shadow-2xl shadow-yellow-950/20">
        <div class="mb-4 flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
            <div>
                <h2 class="text-lg font-semibold text-white">Yeni Yontem Ekle</h2>
                <p class="text-sm text-zinc-500">Hazir sablon secip bilgileri doldurabilirsiniz.</p>
            </div>
            <div class="flex flex-wrap gap-2">
                <button type="button" data-template="bank" class="rounded-lg border border-zinc-700 px-3 py-2 text-xs text-zinc-200 hover:border-yellow-500">Havale Sablonu</button>
                <button type="button" data-template="papara" class="rounded-lg border border-zinc-700 px-3 py-2 text-xs text-zinc-200 hover:border-yellow-500">Papara Sablonu</button>
                <button type="button" data-template="crypto" class="rounded-lg border border-zinc-700 px-3 py-2 text-xs text-zinc-200 hover:border-yellow-500">Kripto Sablonu</button>
            </div>
        </div>

        <form method="POST" action="{{ route('admin.payment-methods.store') }}" class="grid grid-cols-1 gap-4 lg:grid-cols-2" data-payment-form>
            @csrf
            <div>
                <label class="mb-2 block text-sm text-zinc-300">Yontem Adi</label>
                <input name="method_name" class="w-full rounded-lg border border-zinc-700 bg-black/70 px-3 py-3 text-white outline-none focus:border-yellow-500" placeholder="Havale / EFT" required>
            </div>
            <div>
                <label class="mb-2 block text-sm text-zinc-300">Banka / Ag</label>
                <input name="bank_name" class="w-full rounded-lg border border-zinc-700 bg-black/70 px-3 py-3 text-white outline-none focus:border-yellow-500" placeholder="Ziraat Bankasi veya TRC20">
            </div>
            <div>
                <label class="mb-2 block text-sm text-zinc-300">Alici Adi</label>
                <input name="account_holder" class="w-full rounded-lg border border-zinc-700 bg-black/70 px-3 py-3 text-white outline-none focus:border-yellow-500" placeholder="Ad Soyad / Firma">
            </div>
            <div>
                <label class="mb-2 block text-sm text-zinc-300">IBAN / Cuzdan Adresi</label>
                <input name="account_number" data-account-number class="w-full rounded-lg border border-zinc-700 bg-black/70 px-3 py-3 text-white outline-none focus:border-yellow-500" placeholder="TR... veya cuzdana ait adres">
            </div>
            <div>
                <label class="mb-2 block text-sm text-zinc-300">Minimum TL</label>
                <input name="min_amount" type="number" value="50" min="1" class="w-full rounded-lg border border-zinc-700 bg-black/70 px-3 py-3 text-white outline-none focus:border-yellow-500">
            </div>
            <div>
                <label class="mb-2 block text-sm text-zinc-300">Maksimum TL</label>
                <input name="max_amount" type="number" value="100000" min="1" class="w-full rounded-lg border border-zinc-700 bg-black/70 px-3 py-3 text-white outline-none focus:border-yellow-500">
            </div>
            <div>
                <label class="mb-2 block text-sm text-zinc-300">Sira</label>
                <input name="sort_order" type="number" value="0" class="w-full rounded-lg border border-zinc-700 bg-black/70 px-3 py-3 text-white outline-none focus:border-yellow-500">
            </div>
            <label class="flex items-center gap-3 self-end rounded-lg border border-zinc-700 bg-black/50 px-3 py-3 text-sm text-zinc-200">
                <input type="checkbox" name="is_active" value="1" checked class="h-4 w-4 accent-yellow-500">
                Aktif olarak yayinla
            </label>
            <div class="lg:col-span-2">
                <label class="mb-2 block text-sm text-zinc-300">Kullaniciya Gosterilecek Aciklama</label>
                <textarea name="instructions" rows="3" class="w-full rounded-lg border border-zinc-700 bg-black/70 px-3 py-3 text-white outline-none focus:border-yellow-500" placeholder="Odeme aciklamasina kullanici adinizi yaziniz."></textarea>
            </div>
            <div class="lg:col-span-2 flex items-center justify-between gap-3">
                <p class="text-xs text-zinc-500" data-form-hint>Bilgiler kaydedildikten sonra kullanici odeme sayfasinda gorunur.</p>
                <button class="inline-flex items-center gap-2 rounded-lg bg-yellow-500 px-5 py-3 font-semibold text-black hover:bg-yellow-400">
                    <i data-lucide="save" class="h-4 w-4"></i>
                    Yontem Ekle
                </button>
            </div>
        </form>
    </div>

    <div class="grid grid-cols-1 gap-4 xl:grid-cols-2" data-method-list>
        @foreach($paymentMethods as $method)
            <div class="rounded-xl border border-zinc-800 bg-zinc-950/90 p-5 shadow-xl shadow-black/20" data-method-card data-status="{{ $method->is_active ? 'active' : 'inactive' }}" data-search="{{ strtolower($method->method_name . ' ' . $method->bank_name . ' ' . $method->account_holder . ' ' . $method->account_number) }}">
                <div class="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
                    <div class="min-w-0">
                        <div class="flex flex-wrap items-center gap-2">
                            <h2 class="truncate text-lg font-semibold text-white">{{ $method->method_name }}</h2>
                            <span class="rounded-full px-2.5 py-1 text-xs font-semibold {{ $method->is_active ? 'bg-emerald-500/15 text-emerald-300' : 'bg-red-500/15 text-red-300' }}">{{ $method->is_active ? 'Aktif' : 'Pasif' }}</span>
                        </div>
                        <p class="mt-1 text-xs text-zinc-500">{{ $method->method_key }} · Sira {{ $method->sort_order }}</p>
                    </div>
                    <div class="flex shrink-0 gap-2">
                        <a href="{{ route('admin.payment-methods.toggle', $method) }}" class="inline-flex h-10 items-center gap-2 rounded-lg border border-zinc-700 px-3 text-xs font-semibold text-zinc-200 hover:border-yellow-500 hover:text-yellow-300">
                            <i data-lucide="{{ $method->is_active ? 'eye-off' : 'eye' }}" class="h-4 w-4"></i>
                            {{ $method->is_active ? 'Pasif Yap' : 'Aktif Yap' }}
                        </a>
                        <button type="button" data-edit-toggle class="inline-flex h-10 items-center gap-2 rounded-lg border border-zinc-700 px-3 text-xs font-semibold text-zinc-200 hover:border-yellow-500 hover:text-yellow-300">
                            <i data-lucide="settings-2" class="h-4 w-4"></i>
                            Duzenle
                        </button>
                    </div>
                </div>

                <div class="mt-5 grid grid-cols-1 gap-3 md:grid-cols-2">
                    <div class="rounded-lg border border-zinc-800 bg-black/60 p-3">
                        <p class="text-xs uppercase text-zinc-500">Banka / Ag</p>
                        <p class="mt-1 truncate text-sm font-medium text-zinc-100">{{ $method->bank_name ?: '-' }}</p>
                    </div>
                    <div class="rounded-lg border border-zinc-800 bg-black/60 p-3">
                        <p class="text-xs uppercase text-zinc-500">Alici</p>
                        <p class="mt-1 truncate text-sm font-medium text-zinc-100">{{ $method->account_holder ?: '-' }}</p>
                    </div>
                    <div class="rounded-lg border border-zinc-800 bg-black/60 p-3 md:col-span-2">
                        <div class="flex items-start justify-between gap-3">
                            <div class="min-w-0">
                                <p class="text-xs uppercase text-zinc-500">IBAN / Cuzdan</p>
                                <p class="mt-1 break-all text-sm font-medium text-zinc-100" data-copy-value>{{ $method->account_number ?: '-' }}</p>
                            </div>
                            @if($method->account_number)
                                <button type="button" data-copy-button class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-zinc-700 text-zinc-300 hover:border-yellow-500 hover:text-yellow-300" title="Kopyala">
                                    <i data-lucide="copy" class="h-4 w-4"></i>
                                </button>
                            @endif
                        </div>
                    </div>
                    <div class="rounded-lg border border-zinc-800 bg-black/60 p-3">
                        <p class="text-xs uppercase text-zinc-500">Limit</p>
                        <p class="mt-1 text-sm font-medium text-zinc-100">TRY {{ number_format((float) $method->min_amount, 0, ',', '.') }} - {{ number_format((float) $method->max_amount, 0, ',', '.') }}</p>
                    </div>
                    <div class="rounded-lg border border-zinc-800 bg-black/60 p-3">
                        <p class="text-xs uppercase text-zinc-500">Aciklama</p>
                        <p class="mt-1 line-clamp-2 text-sm text-zinc-300">{{ $method->instructions ?: 'Aciklama yok' }}</p>
                    </div>
                </div>

                <div class="mt-5 hidden border-t border-zinc-800 pt-5" data-edit-panel>
                    <form method="POST" action="{{ route('admin.payment-methods.update', $method) }}" class="grid grid-cols-1 gap-4 lg:grid-cols-2" data-payment-form>
                        @csrf
                        <div>
                            <label class="mb-2 block text-sm text-zinc-300">Yontem Adi</label>
                            <input name="method_name" value="{{ $method->method_name }}" class="w-full rounded-lg border border-zinc-700 bg-black/70 px-3 py-3 text-white outline-none focus:border-yellow-500" required>
                        </div>
                        <div>
                            <label class="mb-2 block text-sm text-zinc-300">Banka / Ag</label>
                            <input name="bank_name" value="{{ $method->bank_name }}" class="w-full rounded-lg border border-zinc-700 bg-black/70 px-3 py-3 text-white outline-none focus:border-yellow-500">
                        </div>
                        <div>
                            <label class="mb-2 block text-sm text-zinc-300">Alici Adi</label>
                            <input name="account_holder" value="{{ $method->account_holder }}" class="w-full rounded-lg border border-zinc-700 bg-black/70 px-3 py-3 text-white outline-none focus:border-yellow-500">
                        </div>
                        <div>
                            <label class="mb-2 block text-sm text-zinc-300">IBAN / Cuzdan Adresi</label>
                            <input name="account_number" data-account-number value="{{ $method->account_number }}" class="w-full rounded-lg border border-zinc-700 bg-black/70 px-3 py-3 text-white outline-none focus:border-yellow-500">
                        </div>
                        <div>
                            <label class="mb-2 block text-sm text-zinc-300">Minimum TL</label>
                            <input name="min_amount" type="number" min="1" value="{{ $method->min_amount }}" class="w-full rounded-lg border border-zinc-700 bg-black/70 px-3 py-3 text-white outline-none focus:border-yellow-500">
                        </div>
                        <div>
                            <label class="mb-2 block text-sm text-zinc-300">Maksimum TL</label>
                            <input name="max_amount" type="number" min="1" value="{{ $method->max_amount }}" class="w-full rounded-lg border border-zinc-700 bg-black/70 px-3 py-3 text-white outline-none focus:border-yellow-500">
                        </div>
                        <div>
                            <label class="mb-2 block text-sm text-zinc-300">Sira</label>
                            <input name="sort_order" type="number" value="{{ $method->sort_order }}" class="w-full rounded-lg border border-zinc-700 bg-black/70 px-3 py-3 text-white outline-none focus:border-yellow-500">
                        </div>
                        <label class="flex items-center gap-3 self-end rounded-lg border border-zinc-700 bg-black/50 px-3 py-3 text-sm text-zinc-200">
                            <input type="checkbox" name="is_active" value="1" @checked($method->is_active) class="h-4 w-4 accent-yellow-500">
                            Aktif
                        </label>
                        <div class="lg:col-span-2">
                            <label class="mb-2 block text-sm text-zinc-300">Kullaniciya Gosterilecek Aciklama</label>
                            <textarea name="instructions" rows="3" class="w-full rounded-lg border border-zinc-700 bg-black/70 px-3 py-3 text-white outline-none focus:border-yellow-500">{{ $method->instructions }}</textarea>
                        </div>
                        <div class="lg:col-span-2 flex flex-wrap items-center justify-end gap-3">
                            <button class="inline-flex items-center gap-2 rounded-lg bg-yellow-500 px-5 py-3 font-semibold text-black hover:bg-yellow-400">
                                <i data-lucide="save" class="h-4 w-4"></i>
                                Kaydet
                            </button>
                        </div>
                    </form>
                    <form method="POST" action="{{ route('admin.payment-methods.destroy', $method) }}" class="mt-3" onsubmit="return confirm('Bu odeme yontemini silmek istiyor musunuz?')">
                        @csrf
                        @method('DELETE')
                        <button class="inline-flex items-center gap-2 text-sm text-red-400 hover:text-red-300">
                            <i data-lucide="trash-2" class="h-4 w-4"></i>
                            Yontemi Sil
                        </button>
                    </form>
                </div>
            </div>
        @endforeach
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const root = document.querySelector('[data-payment-admin]');
    if (!root) return;

    const createPanel = root.querySelector('[data-create-panel]');
    const createToggle = root.querySelector('[data-toggle-create]');
    const searchInput = root.querySelector('[data-method-search]');
    const cards = Array.from(root.querySelectorAll('[data-method-card]'));
    const emptySearch = root.querySelector('[data-empty-search]');
    const filterButtons = Array.from(root.querySelectorAll('[data-filter]'));
    let activeFilter = 'all';

    const templates = {
        bank: {
            method_name: 'Havale / EFT',
            bank_name: 'Banka adi',
            account_holder: 'Alici adi',
            account_number: 'TR',
            instructions: 'Odeme aciklamasina kullanici adinizi yaziniz. Odeme yaptiktan sonra Odeme Yaptim butonuna basin.'
        },
        papara: {
            method_name: 'Papara',
            bank_name: 'Papara',
            account_holder: 'Papara hesap sahibi',
            account_number: 'Papara numarasi',
            instructions: 'Papara gonderiminde aciklama alanina kullanici adinizi yaziniz.'
        },
        crypto: {
            method_name: 'Kripto USDT',
            bank_name: 'TRC20',
            account_holder: 'USDT',
            account_number: 'Cuzdan adresi',
            instructions: 'Sadece secilen ag uzerinden gonderim yapiniz. Yanlis ag ile gonderilen odemeler islenmeyebilir.'
        }
    };

    function setFilter(button) {
        activeFilter = button.dataset.filter;
        filterButtons.forEach((item) => {
            item.classList.remove('border-yellow-500', 'bg-yellow-500', 'text-black');
            item.classList.add('border-zinc-700', 'text-zinc-300');
        });
        button.classList.add('border-yellow-500', 'bg-yellow-500', 'text-black');
        button.classList.remove('border-zinc-700', 'text-zinc-300');
        filterCards();
    }

    function filterCards() {
        const query = (searchInput?.value || '').trim().toLowerCase();
        let visible = 0;

        cards.forEach((card) => {
            const matchesText = !query || (card.dataset.search || '').includes(query);
            const matchesStatus = activeFilter === 'all' || card.dataset.status === activeFilter;
            const show = matchesText && matchesStatus;
            card.classList.toggle('hidden', !show);
            if (show) visible += 1;
        });

        if (emptySearch) {
            emptySearch.classList.toggle('hidden', visible !== 0);
        }
    }

    createToggle?.addEventListener('click', () => {
        createPanel?.classList.toggle('hidden');
        createPanel?.scrollIntoView({ behavior: 'smooth', block: 'start' });
    });

    filterButtons.forEach((button) => button.addEventListener('click', () => setFilter(button)));
    searchInput?.addEventListener('input', filterCards);

    root.querySelectorAll('[data-edit-toggle]').forEach((button) => {
        button.addEventListener('click', () => {
            const card = button.closest('[data-method-card]');
            card?.querySelector('[data-edit-panel]')?.classList.toggle('hidden');
        });
    });

    root.querySelectorAll('[data-copy-button]').forEach((button) => {
        button.addEventListener('click', async () => {
            const value = button.closest('[data-method-card]')?.querySelector('[data-copy-value]')?.textContent?.trim();
            if (!value || value === '-') return;
            try {
                await navigator.clipboard.writeText(value);
                const original = button.innerHTML;
                button.innerHTML = '<span class="text-xs font-semibold">OK</span>';
                setTimeout(() => button.innerHTML = original, 1200);
            } catch (error) {
                alert(value);
            }
        });
    });

    root.querySelectorAll('[data-template]').forEach((button) => {
        button.addEventListener('click', () => {
            const data = templates[button.dataset.template];
            const form = createPanel?.querySelector('form');
            if (!data || !form) return;
            createPanel.classList.remove('hidden');
            Object.keys(data).forEach((name) => {
                const field = form.querySelector(`[name="${name}"]`);
                if (field) field.value = data[name];
            });
        });
    });

    root.querySelectorAll('[data-account-number]').forEach((input) => {
        input.addEventListener('input', () => {
            if (input.value.toUpperCase().startsWith('TR')) {
                input.value = input.value.toUpperCase().replace(/\s+/g, '').replace(/(.{4})/g, '$1 ').trim();
            }
        });
    });

    root.querySelectorAll('[data-payment-form]').forEach((form) => {
        form.addEventListener('submit', (event) => {
            const min = Number(form.querySelector('[name="min_amount"]')?.value || 0);
            const max = Number(form.querySelector('[name="max_amount"]')?.value || 0);
            if (max > 0 && min > max) {
                event.preventDefault();
                alert('Maksimum tutar minimum tutardan kucuk olamaz.');
            }
        });
    });
});
</script>
@endsection