<?php
use App\Models\PaymentGateway;
use Illuminate\Support\Facades\Crypt;
use Livewire\Component;
?>

<section class="p-8 max-w-5xl mx-auto">
    <flux:heading size="xl" level="1">Payment Methods</flux:heading>

    <div class="mt-8 space-y-4">
        @foreach($gateways as $gateway)
            <div class="flex items-center justify-between p-6 transition-all">
                <div class="flex items-center gap-4">
                    <div class="p-3 rounded-xl border">
                        <flux:icon.credit-card class="size-6" />
                    </div>
                    <div>
                        <flux:heading size="lg">{{ $gateway->name }}</flux:heading>
                        <div class="flex gap-2 mt-1">
                            <flux:badge :color="$gateway->is_active ? 'green' : 'zinc'" size="sm">
                                {{ $gateway->is_active ? 'Active' : 'Disabled' }}
                            </flux:badge>
                            @if($gateway->slug !== 'cod')
                                <flux:badge :color="$gateway->is_test_mode ? 'orange' : 'blue'" size="sm">
                                    {{ $gateway->is_test_mode ? 'Sandbox' : 'Live' }}
                                </flux:badge>
                            @endif
                        </div>
                    </div>
                </div>

                <flux:button wire:click="edit({{ $gateway->id }})" icon="pencil-square">
                    Configure
                </flux:button>
            </div>
        @endforeach
    </div>

    {{-- Configuration Modal --}}
    <flux:modal wire:model="showModal" class="md:w-200">
        <div class="space-y-6">
            <flux:heading size="lg">Configure {{ $editingGateway?->name }}</flux:heading>

            <div class="space-y-4">
                <flux:field>
                    <flux:label>Status</flux:label>
                    <flux:switch wire:model="form.is_active" label="Enable this payment method" />
                </flux:field>

                @if($editingGateway?->slug !== 'cod')
                    <flux:field>
                        <flux:label>Mode</flux:label>
                        <flux:switch wire:model="form.is_test_mode" label="Sandbox / Test Mode" />
                    </flux:field>

                    {{-- Dynamic Credential Inputs --}}
                    @foreach($form['credentials'] as $key => $value)
                        <flux:input 
                            wire:model="form.credentials.{{ $key }}" 
                            label="{{ str_replace('_', ' ', strtoupper($key)) }}" 
                            type="password"
                            viewable 
                        />
                    @endforeach
                @else
                    <flux:text size="sm">Cash on delivery does not require API credentials.</flux:text>
                @endif
            </div>

            <div class="flex gap-3 mt-8">
                <flux:spacer />
                <flux:button wire:click="$set('editingGateway', null)" variant="ghost">Cancel</flux:button>
                <flux:button wire:click="save" variant="primary">Save Changes</flux:button>
            </div>
        </div>
    </flux:modal>
</section>