@php
$usd_gateways = [
    ['name' => 'Binance Personal', 'display_name' => 'Binance Personal', 'logo' => 'binance/binancepersonal.png'],
    ['name' => 'Bybit Personal', 'display_name' => 'Bybit Personal', 'logo' => 'bybit/bybitpersonal.png'],
    ['name' => 'Cryptomus Merchant', 'display_name' => 'Cryptomus Merchant', 'logo' => 'cryptomus/cryptomusmerchant.png'],
    ['name' => 'Paddle', 'display_name' => 'Paddle', 'logo' => 'paddle/paddle.png'],
    ['name' => 'Payeer', 'display_name' => 'Payeer', 'logo' => 'payeer/payeer.png'],
    ['name' => 'Paypal', 'display_name' => 'Paypal', 'logo' => 'paypal/paypal.png'],
    ['name' => 'Paypal Personal', 'display_name' => 'Paypal Personal', 'logo' => 'paypal/paypalpersonal.png'],
    ['name' => 'Stripe', 'display_name' => 'Stripe', 'logo' => 'stripe/stripe.png'],
];

$bdt_gateways = [
    ['name' => 'Bkash Agent', 'display_name' => 'Bkash Agent', 'logo' => 'bkash/bkashagent.png'],
    ['name' => 'bKash API (Checkout)', 'display_name' => 'bKash API (Checkout)', 'logo' => 'bkash/bkashcheckout.png'],
    ['name' => 'bKash API (Legacy)', 'display_name' => 'bKash API (Legacy)', 'logo' => 'bkash/bkashcheckout.png'],
    ['name' => 'bKash Merchant', 'display_name' => 'bKash Merchant', 'logo' => 'bkash/bkashmerchant.png'],
    ['name' => 'bKash Personal', 'display_name' => 'bKash Personal', 'logo' => 'bkash/bkashpersonal.png'],
    ['name' => 'Cellfin Personal', 'display_name' => 'Cellfin Personal', 'logo' => 'cellfin/cellfinpersonal.png'],
    ['name' => 'EBL (Visa/Mastercard)', 'display_name' => 'EBL (Visa/Mastercard)', 'logo' => 'paystation/paystation.png'],
    ['name' => 'Ipay Personal', 'display_name' => 'Ipay Personal', 'logo' => 'ipay/ipaypersonal.png'],
    ['name' => 'Nagad Agent', 'display_name' => 'Nagad Agent', 'logo' => 'nagad/nagadagent.png'],
    ['name' => 'Nagad Merchant', 'display_name' => 'Nagad Merchant', 'logo' => 'nagad/nagadmerchant.png'],
    ['name' => 'Nagad Personal', 'display_name' => 'Nagad Personal', 'logo' => 'nagad/nagadpersonal.png'],
    ['name' => 'Ok Wallet Agent', 'display_name' => 'Ok Wallet Agent', 'logo' => 'okwallet/okwalletagent.png'],
    ['name' => 'Ok Wallet Personal', 'display_name' => 'Ok Wallet Personal', 'logo' => 'okwallet/okwalletpersonal.png'],
    ['name' => 'Ok Wallet Merchant', 'display_name' => 'Ok Wallet Merchant', 'logo' => 'okwallet/okwalletmerchant.png'],
    ['name' => 'Pathao Pay Personal', 'display_name' => 'Pathao Pay Personal', 'logo' => 'pathaopay/pathaopaypersonal.png'],
    ['name' => 'Rocket Agent', 'display_name' => 'Rocket Agent', 'logo' => 'rocket/rocketagent.png'],
    ['name' => 'Rocket Merchant', 'display_name' => 'Rocket Merchant', 'logo' => 'rocket/rocketmerchant.png'],
    ['name' => 'Rocket Personal', 'display_name' => 'Rocket Personal', 'logo' => 'rocket/rocketpersonal.png'],
    ['name' => 'Tap Agent', 'display_name' => 'Tap Agent', 'logo' => 'tap/tapagent.png'],
    ['name' => 'Tap Merchant', 'display_name' => 'Tap Merchant', 'logo' => 'tap/tapmerchant.png'],
    ['name' => 'Tap Personal', 'display_name' => 'Tap Personal', 'logo' => 'tap/tappersonal.png'],
    ['name' => 'Upay Agent', 'display_name' => 'Upay Agent', 'logo' => 'upay/upayagent.png'],
    ['name' => 'Upay Merchant', 'display_name' => 'Upay Merchant', 'logo' => 'upay/upaymerchant.png'],
    ['name' => 'Upay Personal', 'display_name' => 'Upay Personal', 'logo' => 'upay/upaypersonal.png'],
    ['name' => 'bKash API (Tokenized)', 'display_name' => 'bKash API (Tokenized)', 'logo' => 'bkash/bkashtokenized.png'],
    ['name' => 'EPS', 'display_name' => 'EPS', 'logo' => 'eps/eps.png'],
    ['name' => 'bKash (EPS)', 'display_name' => 'bKash (EPS)', 'logo' => 'bkash/epsbkash.png'],
    ['name' => 'MCash (EPS)', 'display_name' => 'MCash (EPS)', 'logo' => 'mcash/epsmcash.png'],
    ['name' => 'Nagad (EPS)', 'display_name' => 'Nagad (EPS)', 'logo' => 'nagad/epsnagad.png'],
    ['name' => 'Ok Wallet (EPS)', 'display_name' => 'Ok Wallet (EPS)', 'logo' => 'okwallet/epsokwallet.png'],
    ['name' => 'Rocket (EPS)', 'display_name' => 'Rocket (EPS)', 'logo' => 'rocket/epsrocket.png'],
    ['name' => 'Upay (EPS)', 'display_name' => 'Upay (EPS)', 'logo' => 'upay/epsupay.png'],
    ['name' => 'Nagad API', 'display_name' => 'Nagad API', 'logo' => 'nagad/nagad.png'],
    ['name' => 'PayStation', 'display_name' => 'PayStation', 'logo' => 'paystation/paystation.png'],
    ['name' => 'bKash (PayStation)', 'display_name' => 'bKash (PayStation)', 'logo' => 'bkash/paystationbkash.png'],
    ['name' => 'Cellfin (PayStation)', 'display_name' => 'Cellfin (PayStation)', 'logo' => 'cellfin/paystationcellfin.png'],
    ['name' => 'MCash (PayStation)', 'display_name' => 'MCash (PayStation)', 'logo' => 'mcash/paystationmcash.png'],
    ['name' => 'Nagad (PayStation)', 'display_name' => 'Nagad (PayStation)', 'logo' => 'nagad/paystationnagad.png'],
    ['name' => 'Rocket (PayStation)', 'display_name' => 'Rocket (PayStation)', 'logo' => 'rocket/paystationrocket.png'],
    ['name' => 'ST Pay (PayStation)', 'display_name' => 'ST Pay (PayStation)', 'logo' => 'stpay/paystationstpay.png'],
    ['name' => 'Tap (PayStation)', 'display_name' => 'Tap (PayStation)', 'logo' => 'tap/paystationtap.png'],
    ['name' => 'Upay (PayStation)', 'display_name' => 'Upay (PayStation)', 'logo' => 'upay/paystationupay.png'],
    ['name' => 'SSLCommerz', 'display_name' => 'SSLCommerz', 'logo' => 'sslcommerz/sslcommerz.png'],
    ['name' => 'bKash (SSLCommerz)', 'display_name' => 'bKash (SSLCommerz)', 'logo' => 'bkash/sslcommerzbkash.png'],
    ['name' => 'Cellfin (SSLCommerz)', 'display_name' => 'Cellfin (SSLCommerz)', 'logo' => 'cellfin/sslcommerzcellfin.png'],
    ['name' => 'Ipay (SSLCommerz)', 'display_name' => 'Ipay (SSLCommerz)', 'logo' => 'ipay/sslcommerzipay.png'],
    ['name' => 'Nagad (SSLCommerz)', 'display_name' => 'Nagad (SSLCommerz)', 'logo' => 'nagad/sslcommerznagad.png'],
    ['name' => 'Ok Wallet (SSLCommerz)', 'display_name' => 'Ok Wallet (SSLCommerz)', 'logo' => 'okwallet/sslcommerzokwallet.png'],
    ['name' => 'Rocket (SSLCommerz)', 'display_name' => 'Rocket (SSLCommerz)', 'logo' => 'rocket/sslcommerzrocket.png'],
    ['name' => 'Tap (SSLCommerz)', 'display_name' => 'Tap (SSLCommerz)', 'logo' => 'tap/sslcommerztap.png'],
    ['name' => 'Upay (SSLCommerz)', 'display_name' => 'Upay (SSLCommerz)', 'logo' => 'upay/sslcommerzupay.png'],
    ['name' => 'Upay API', 'display_name' => 'Upay API', 'logo' => 'upay/upay.png'],
];

$egp_gateways = [
    ['name' => 'Vodafone Personal', 'display_name' => 'Vodafone Personal', 'logo' => 'vodafone/vodafonepersonal.png'],
];
@endphp

<x-filament-panels::page>
    <div style="background-color: #18181b; border: 1px solid #27272a; border-radius: 12px; padding: 24px; width: 100%; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06); color: #f4f4f5; font-family: sans-serif; box-sizing: border-box;">
        
        <!-- Header -->
        <div style="display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; border-bottom: 1px solid #27272a;">
            <h2 style="font-size: 18px; font-weight: 700; margin: 0; color: #f4f4f5;">Create Gateway</h2>
            <a href="{{ route('filament.admin.resources.gateways.index') }}" style="color: #71717a; text-decoration: none;" onmouseover="this.style.color='#f4f4f5'" onmouseout="this.style.color='#71717a'">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 20px; height: 20px; display: block;">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                </svg>
            </a>
        </div>

        <!-- Search input -->
        <div style="margin-top: 16px;">
            <input type="text" id="gatewaySearch" oninput="filterGateways()" placeholder="Search gateways..." style="width: 100%; padding: 10px 14px; background-color: #27272a; border: 1px solid #3f3f46; border-radius: 6px; font-size: 13px; color: #f4f4f5; outline: none; box-sizing: border-box;">
        </div>

        @php
            $sections = [
                ['id' => 'section-usd', 'title' => 'Available for USD', 'items' => $usd_gateways],
                ['id' => 'section-bdt', 'title' => 'Conversion from BDT', 'items' => $bdt_gateways],
                ['id' => 'section-egp', 'title' => 'Conversion from EGP', 'items' => $egp_gateways],
            ];
        @endphp

        @foreach($sections as $section)
            <div class="gateway-section" id="{{ $section['id'] }}" style="margin-top: 24px;">
                <h3 style="font-size: 11px; font-weight: 600; color: #71717a; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px; margin-top: 0;">{{ $section['title'] }}</h3>
                <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 16px 12px;">
                    @foreach($section['items'] as $gateway)
                        <a href="?template={{ urlencode($gateway['name']) }}" class="gateway-card" data-name="{{ strtolower($gateway['name']) }}" 
                           style="display: flex; flex-direction: column; align-items: center; text-decoration: none; width: 110px; transition: transform 0.2s;"
                           onmouseover="this.style.transform='translateY(-2px)';"
                           onmouseout="this.style.transform='translateY(0)';"
                        >
                            <div style="background-color: #ffffff; border-radius: 6px; width: 110px; height: 60px; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 6px; box-sizing: border-box; border: 1px solid #27272a;">
                                <img src="{{ asset('assets/gateways/' . $gateway['logo']) }}" alt="{{ $gateway['display_name'] }}" style="max-height: 44px; max-width: 98px; object-fit: contain; display: block;">
                            </div>
                            <span style="font-size: 11px; font-weight: 500; color: #a1a1aa; text-align: center; margin-top: 6px; display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ $gateway['display_name'] }}</span>
                        </a>
                    @endforeach
                </div>
            </div>
        @endforeach

        <div style="margin-top: 32px; pt: 16px; border-top: 1px solid #27272a; display: flex; gap: 12px;">
            <a href="{{ route('filament.admin.resources.gateways.index') }}" style="padding: 8px 16px; background-color: #27272a; border-radius: 8px; text-decoration: none; font-size: 13px; font-weight: 600; color: #e4e4e7; transition: 0.2s;" onmouseover="this.style.backgroundColor='#3f3f46'" onmouseout="this.style.backgroundColor='#27272a'">
                Cancel
            </a>
        </div>
    </div>

    <script>
        function filterGateways() {
            const query = document.getElementById('gatewaySearch').value.toLowerCase().trim();
            const cards = document.querySelectorAll('.gateway-card');
            
            cards.forEach(card => {
                const name = card.getAttribute('data-name');
                if (name.includes(query)) {
                    card.style.display = 'flex';
                } else {
                    card.style.display = 'none';
                }
            });

            // Hide sections with no matching cards
            const sections = document.querySelectorAll('.gateway-section');
            sections.forEach(section => {
                if (query === '') {
                    section.style.display = 'block';
                    section.querySelectorAll('.gateway-card').forEach(c => {
                        c.style.display = 'flex';
                    });
                    return;
                }

                let hasVisible = false;
                section.querySelectorAll('.gateway-card').forEach(c => {
                    if (c.style.display !== 'none') {
                        hasVisible = true;
                    }
                });

                if (!hasVisible) {
                    section.style.display = 'none';
                } else {
                    section.style.display = 'block';
                }
            });
        }
    </script>
</x-filament-panels::page>
