@extends('layouts.admin')

@section('title', 'Edit Payment Method')

@section('content')
<div class="max-w-[1200px] mx-auto" x-data="{ 
    type: '{{ $paymentMethod->type }}',
    logoPreview: '{{ $paymentMethod->logo ? asset('storage/' . $paymentMethod->logo) : '' }}',
    handleLogoChange(e) {
        const file = e.target.files[0];
        if (file) {
            this.logoPreview = URL.createObjectURL(file);
        }
    }
}">
    <div class="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-10">
        <div>
            <p class="text-xs text-gray-500 mb-1">Payment methods</p>
            <h1 class="text-2xl font-semibold text-gray-900 tracking-tight">Edit payment method</h1>
            <p class="text-gray-500 text-sm mt-1 max-w-md">Update settings for {{ $paymentMethod->name }}.</p>
        </div>
        <div class="flex items-center gap-4">
            <a href="{{ route('admin.payment-methods.index') }}" class="inline-flex items-center gap-2 px-4 py-2 rounded-lg border border-gray-200 text-gray-700 hover:bg-gray-50 transition">
                <i class="fas fa-arrow-left text-xs"></i>
                Back
            </a>
            <form action="{{ route('admin.payment-methods.destroy', $paymentMethod) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this payment method?');" class="inline">
                @csrf
                @method('DELETE')
                <button type="submit" class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-red-600 text-white hover:bg-red-700 shadow-sm shadow-red-200 transition">
                    <i class="fas fa-trash text-xs"></i>
                    Delete
                </button>
            </form>
        </div>
    </div>

    <form action="{{ route('admin.payment-methods.update', $paymentMethod) }}" method="POST" enctype="multipart/form-data" class="space-y-8">
        @csrf
        @method('PUT')
        
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
            <div class="lg:col-span-4 space-y-8">
                <div class="bg-white rounded-2xl p-6 shadow-sm border border-gray-200">
                    <h3 class="text-lg font-semibold text-gray-900 mb-6">Method details</h3>
                    <div class="mb-10">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Logo</label>
                        <div class="relative group cursor-pointer" role="button" tabindex="0" @click="$refs.logoInput.click()" @keydown.enter.prevent="$refs.logoInput.click()" @keydown.space.prevent="$refs.logoInput.click()">
                            <div class="aspect-square rounded-xl border border-dashed border-gray-200 bg-gray-50 flex items-center justify-center overflow-hidden">
                                <template x-if="!logoPreview">
                                    <div class="text-center p-6 text-gray-500 text-sm flex flex-col items-center gap-2">
                                        <i class="fas fa-image"></i>
                                        <span>Click to upload logo</span>
                                    </div>
                                </template>
                                <template x-if="logoPreview">
                                    <img :src="logoPreview" class="w-full h-full object-contain p-6 transition-transform duration-200 group-hover:scale-[1.02]">
                                </template>
                                <div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center pointer-events-none">
                                    <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-md bg-white/90 text-gray-800 text-xs font-medium">
                                        <i class="fas fa-upload text-[10px]"></i>
                                        <span>Click to upload</span>
                                    </div>
                                </div>
                            </div>
                            <input type="file" name="logo" x-ref="logoInput" class="hidden" accept="image/*" @change="handleLogoChange">
                        </div>
                        <p class="mt-2 text-xs text-gray-500">PNG or SVG recommended. Max 2MB.</p>
                    </div>

                    <div class="mb-8">
                        <label for="name" class="block text-sm font-medium text-gray-700 mb-2">Display name</label>
                        <input type="text" name="name" id="name" required value="{{ old('name', $paymentMethod->name) }}"
                            class="w-full bg-white border border-gray-200 rounded-lg px-4 py-2.5 text-gray-900 placeholder:text-gray-400 focus:ring-2 focus:ring-brand/30 focus:border-brand">
                    </div>

                    <div class="mb-8">
                        <label for="type_display" class="block text-sm font-medium text-gray-700 mb-2">Gateway type</label>
                        <div class="w-full bg-gray-100 border border-gray-200 rounded-lg px-4 py-2.5 text-gray-600 cursor-not-allowed flex items-center justify-between">
                            <span class="capitalize">{{ $paymentMethod->type }}</span>
                            <i class="fas fa-lock text-xs"></i>
                        </div>
                        <input type="hidden" name="type" value="{{ $paymentMethod->type }}">
                    </div>

                    <div class="flex items-center justify-between p-4 bg-gray-50 rounded-xl border border-gray-200">
                        <div>
                            <p class="text-sm font-medium text-gray-900">Status</p>
                            <p class="text-xs text-gray-500">Enable at checkout</p>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" name="is_active" value="1" class="sr-only peer" {{ $paymentMethod->is_active ? 'checked' : '' }}>
                            <div class="w-12 h-7 bg-gray-200 rounded-full peer peer-checked:after:translate-x-5 after:content-[''] after:absolute after:top-[3px] after:left-[3px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-brand shadow-inner"></div>
                        </label>
                    </div>
                </div>
            </div>

            <div class="lg:col-span-8 space-y-8">
                <div class="bg-white rounded-2xl p-6 shadow-sm border border-gray-200">
                    <h3 class="text-lg font-semibold text-gray-900 mb-1">Configuration</h3>
                    <p class="text-sm text-gray-500 mb-6">Update API keys and settings</p>

                    <div x-show="type === 'cod' || type === 'other'" x-transition class="py-12 text-center">
                        <p class="text-base font-medium text-gray-900 mb-1">Simple setup</p>
                        <p class="text-sm text-gray-500">No API configuration required for this method.</p>
                    </div>

                    <div x-show="type === 'stripe'" x-transition class="space-y-6">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-2">Mode</label>
                                <select name="config[stripe_mode]" class="w-full bg-white border border-gray-200 rounded-lg px-4 py-2.5 text-gray-900 focus:ring-2 focus:ring-brand/30 focus:border-brand">
                                    <option value="sandbox" {{ ($paymentMethod->config['stripe_mode'] ?? '') == 'sandbox' ? 'selected' : '' }}>Sandbox</option>
                                    <option value="live" {{ ($paymentMethod->config['stripe_mode'] ?? '') == 'live' ? 'selected' : '' }}>Live</option>
                                </select>
                            </div>
                            
                            <div class="space-y-6">
                                <p class="text-xs font-medium text-gray-600">Sandbox keys</p>
                                <div class="space-y-4">
                                    <input type="text" name="config[stripe_sandbox_publishable_key]" value="{{ $paymentMethod->config['stripe_sandbox_publishable_key'] ?? '' }}" placeholder="Publishable key" class="w-full bg-white border border-gray-200 rounded-lg px-4 py-2.5 text-gray-900 font-mono text-xs focus:ring-2 focus:ring-brand/30 focus:border-brand">
                                    <input type="text" name="config[stripe_sandbox_secret_key]" value="{{ $paymentMethod->config['stripe_sandbox_secret_key'] ?? '' }}" placeholder="Secret key" class="w-full bg-white border border-gray-200 rounded-lg px-4 py-2.5 text-gray-900 font-mono text-xs focus:ring-2 focus:ring-brand/30 focus:border-brand">
                                </div>
                            </div>

                            <div class="space-y-6">
                                <p class="text-xs font-medium text-gray-600">Live keys</p>
                                <div class="space-y-4">
                                    <input type="text" name="config[stripe_live_publishable_key]" value="{{ $paymentMethod->config['stripe_live_publishable_key'] ?? '' }}" placeholder="Publishable key" class="w-full bg-white border border-gray-200 rounded-lg px-4 py-2.5 text-gray-900 font-mono text-xs focus:ring-2 focus:ring-brand/30 focus:border-brand">
                                    <input type="text" name="config[stripe_live_secret_key]" value="{{ $paymentMethod->config['stripe_live_secret_key'] ?? '' }}" placeholder="Secret key" class="w-full bg-white border border-gray-200 rounded-lg px-4 py-2.5 text-gray-900 font-mono text-xs focus:ring-2 focus:ring-brand/30 focus:border-brand">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div x-show="type === 'paypal'" x-transition class="space-y-6">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-2">Mode</label>
                                <select name="config[paypal_mode]" class="w-full bg-white border border-gray-200 rounded-lg px-4 py-2.5 text-gray-900 focus:ring-2 focus:ring-brand/30 focus:border-brand">
                                    <option value="sandbox" {{ ($paymentMethod->config['paypal_mode'] ?? '') == 'sandbox' ? 'selected' : '' }}>Sandbox</option>
                                    <option value="live" {{ ($paymentMethod->config['paypal_mode'] ?? '') == 'live' ? 'selected' : '' }}>Live</option>
                                </select>
                            </div>
                            
                            <div class="space-y-6">
                                <p class="text-xs font-medium text-gray-600">Sandbox keys</p>
                                <div class="space-y-4">
                                    <input type="text" name="config[paypal_sandbox_client_id]" value="{{ $paymentMethod->config['paypal_sandbox_client_id'] ?? '' }}" placeholder="Client ID" class="w-full bg-white border border-gray-200 rounded-lg px-4 py-2.5 text-gray-900 font-mono text-xs focus:ring-2 focus:ring-brand/30 focus:border-brand">
                                    <input type="text" name="config[paypal_sandbox_secret]" value="{{ $paymentMethod->config['paypal_sandbox_secret'] ?? '' }}" placeholder="Secret key" class="w-full bg-white border border-gray-200 rounded-lg px-4 py-2.5 text-gray-900 font-mono text-xs focus:ring-2 focus:ring-brand/30 focus:border-brand">
                                </div>
                            </div>

                            <div class="space-y-6">
                                <p class="text-xs font-medium text-gray-600">Live keys</p>
                                <div class="space-y-4">
                                    <input type="text" name="config[paypal_live_client_id]" value="{{ $paymentMethod->config['paypal_live_client_id'] ?? '' }}" placeholder="Client ID" class="w-full bg-white border border-gray-200 rounded-lg px-4 py-2.5 text-gray-900 font-mono text-xs focus:ring-2 focus:ring-brand/30 focus:border-brand">
                                    <input type="text" name="config[paypal_live_secret]" value="{{ $paymentMethod->config['paypal_live_secret'] ?? '' }}" placeholder="Secret key" class="w-full bg-white border border-gray-200 rounded-lg px-4 py-2.5 text-gray-900 font-mono text-xs focus:ring-2 focus:ring-brand/30 focus:border-brand">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div x-show="type === 'paytm'" x-transition class="space-y-6">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-2">Mode</label>
                                <select name="config[paytm_environment]" class="w-full bg-white border border-gray-200 rounded-lg px-4 py-2.5 text-gray-900 focus:ring-2 focus:ring-brand/30 focus:border-brand">
                                    <option value="TEST" {{ ($paymentMethod->config['paytm_environment'] ?? '') == 'TEST' ? 'selected' : '' }}>Sandbox</option>
                                    <option value="PROD" {{ ($paymentMethod->config['paytm_environment'] ?? '') == 'PROD' ? 'selected' : '' }}>Live</option>
                                </select>
                            </div>
                            <input type="text" name="config[paytm_merchant_id]" value="{{ $paymentMethod->config['paytm_merchant_id'] ?? '' }}" placeholder="Merchant ID" class="w-full bg-white border border-gray-200 rounded-lg px-4 py-2.5 text-gray-900 font-mono text-xs focus:ring-2 focus:ring-brand/30 focus:border-brand">
                            <input type="text" name="config[paytm_merchant_key]" value="{{ $paymentMethod->config['paytm_merchant_key'] ?? '' }}" placeholder="Merchant key" class="w-full bg-white border border-gray-200 rounded-lg px-4 py-2.5 text-gray-900 font-mono text-xs focus:ring-2 focus:ring-brand/30 focus:border-brand">
                            <input type="text" name="config[paytm_website]" value="{{ $paymentMethod->config['paytm_website'] ?? '' }}" placeholder="Website" class="w-full bg-white border border-gray-200 rounded-lg px-4 py-2.5 text-gray-900 font-mono text-xs focus:ring-2 focus:ring-brand/30 focus:border-brand">
                            <input type="text" name="config[paytm_industry_type]" value="{{ $paymentMethod->config['paytm_industry_type'] ?? '' }}" placeholder="Industry type" class="w-full bg-white border border-gray-200 rounded-lg px-4 py-2.5 text-gray-900 font-mono text-xs focus:ring-2 focus:ring-brand/30 focus:border-brand">
                        </div>
                    </div>

                    <div x-show="type === 'razorpay'" x-transition class="space-y-6">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                            <input type="text" name="config[razorpay_key]" value="{{ $paymentMethod->config['razorpay_key'] ?? '' }}" placeholder="Key ID" class="w-full bg-white border border-gray-200 rounded-lg px-4 py-2.5 text-gray-900 font-mono text-xs focus:ring-2 focus:ring-brand/30 focus:border-brand md:col-span-2">
                            <input type="text" name="config[razorpay_secret]" value="{{ $paymentMethod->config['razorpay_secret'] ?? '' }}" placeholder="Secret key" class="w-full bg-white border border-gray-200 rounded-lg px-4 py-2.5 text-gray-900 font-mono text-xs focus:ring-2 focus:ring-brand/30 focus:border-brand md:col-span-2">
                        </div>
                    </div>
                </div>

                <div class="flex items-center justify-end">
                    <button type="submit" class="inline-flex items-center gap-2 bg-brand text-white px-6 py-3 rounded-lg font-medium hover:bg-brand/90 transition">
                        Save changes
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection
