@extends('layouts.admin')

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

@section('content')
<div class="max-w-[1200px] mx-auto" x-data="{ 
    type: 'cod',
    logoPreview: null,
    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">Add payment method</h1>
            <p class="text-gray-500 text-sm mt-1 max-w-md">Create a new payment gateway for checkout.</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>
        </div>
    </div>

    <form action="{{ route('admin.payment-methods.store') }}" method="POST" enctype="multipart/form-data" class="space-y-8">
        @csrf
        
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
            <!-- Left Column: Core Identity -->
            <div class="lg:col-span-4 space-y-12">
                <!-- Identity Card -->
                <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>
                    
                    <!-- Logo Upload -->
                    <div class="mb-10">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Logo</label>
                        <div class="relative cursor-pointer" @click="$refs.logoInput.click()">
                            <div class="aspect-square rounded-xl border border-dashed border-gray-200 bg-gray-50 flex flex-col items-center justify-center overflow-hidden relative">
                                <template x-if="!logoPreview">
                                    <div class="text-center p-6">
                                        <div class="w-16 h-16 bg-white rounded-2xl shadow-xl flex items-center justify-center mb-4 mx-auto group-hover/upload:scale-110 transition-transform duration-500">
                                            <i class="fas fa-cloud-upload-alt text-brand text-xl"></i>
                                        </div>
                                        <p class="text-[10px] font-black text-gray-400 uppercase tracking-widest">Upload Logo</p>
                                    </div>
                                </template>
                                <template x-if="logoPreview">
                                    <img :src="logoPreview" class="w-full h-full object-contain p-8">
                                </template>
                                
                                
                            </div>
                            <input type="file" name="logo" x-ref="logoInput" class="hidden" accept="image/*" @change="handleLogoChange">
                        </div>
                    </div>

                    <!-- Method Name -->
                    <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 placeholder="e.g. Stripe" 
                            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>

                    <!-- Type Selection -->
                    <div class="mb-8">
                        <label for="type" class="block text-sm font-medium text-gray-700 mb-2">Gateway type</label>
                        <select name="type" id="type" x-model="type" required
                            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="cod">Cash on delivery (COD)</option>
                            <option value="stripe">Stripe</option>
                            <option value="paypal">PayPal</option>
                            <option value="paytm">Paytm</option>
                            <option value="razorpay">Razorpay</option>
                            <option value="other">Other</option>
                        </select>
                    </div>

                    <!-- Active Status -->
                    <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" 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>

            <!-- Right Column: Configuration -->
            <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">Setup API keys and settings</p>

                    <!-- No Config (COD / Other) -->
                    <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>

                    <!-- Stripe Config -->
                    <div x-show="type === 'stripe'" x-transition class="space-y-10">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                            <div class="md:col-span-2">
                                <label class="block text-[10px] font-black text-gray-400 uppercase tracking-[0.2em] mb-3">Mode</label>
                                <select name="config[stripe_mode]" class="w-full bg-gray-50 border-none rounded-2xl px-6 py-4 text-gray-900 font-bold focus:ring-2 focus:ring-brand/20 transition-all appearance-none cursor-pointer">
                                    <option value="sandbox" selected>Sandbox (Test)</option>
                                    <option value="live">Live (Production)</option>
                                </select>
                            </div>
                            
                            <div class="space-y-6">
                                <h4 class="text-[10px] font-black text-amber-500 uppercase tracking-[0.2em] flex items-center gap-2">
                                    <span class="w-1.5 h-1.5 rounded-full bg-amber-500"></span> Sandbox Keys
                                </h4>
                                <div class="space-y-4">
                                    <input type="text" name="config[stripe_sandbox_publishable_key]" placeholder="Publishable Key" class="w-full bg-gray-50 border-none rounded-2xl px-6 py-4 text-gray-900 font-mono text-xs focus:ring-2 focus:ring-brand/20 transition-all">
                                    <input type="text" name="config[stripe_sandbox_secret_key]" placeholder="Secret Key" class="w-full bg-gray-50 border-none rounded-2xl px-6 py-4 text-gray-900 font-mono text-xs focus:ring-2 focus:ring-brand/20 transition-all">
                                </div>
                            </div>

                            <div class="space-y-6">
                                <h4 class="text-[10px] font-black text-emerald-500 uppercase tracking-[0.2em] flex items-center gap-2">
                                    <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span> Live Keys
                                </h4>
                                <div class="space-y-4">
                                    <input type="text" name="config[stripe_live_publishable_key]" placeholder="Publishable Key" class="w-full bg-gray-50 border-none rounded-2xl px-6 py-4 text-gray-900 font-mono text-xs focus:ring-2 focus:ring-brand/20 transition-all">
                                    <input type="text" name="config[stripe_live_secret_key]" placeholder="Secret Key" class="w-full bg-gray-50 border-none rounded-2xl px-6 py-4 text-gray-900 font-mono text-xs focus:ring-2 focus:ring-brand/20 transition-all">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- PayPal Config -->
                    <div x-show="type === 'paypal'" x-transition class="space-y-10">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                            <div class="md:col-span-2">
                                <label class="block text-[10px] font-black text-gray-400 uppercase tracking-[0.2em] mb-3">Mode</label>
                                <select name="config[paypal_mode]" class="w-full bg-gray-50 border-none rounded-2xl px-6 py-4 text-gray-900 font-bold focus:ring-2 focus:ring-brand/20 transition-all appearance-none cursor-pointer">
                                    <option value="sandbox" selected>Sandbox (Test)</option>
                                    <option value="live">Live (Production)</option>
                                </select>
                            </div>
                            
                            <div class="space-y-6">
                                <h4 class="text-[10px] font-black text-amber-500 uppercase tracking-[0.2em] flex items-center gap-2">
                                    <span class="w-1.5 h-1.5 rounded-full bg-amber-500"></span> Sandbox Keys
                                </h4>
                                <div class="space-y-4">
                                    <input type="text" name="config[paypal_sandbox_client_id]" placeholder="Client ID" class="w-full bg-gray-50 border-none rounded-2xl px-6 py-4 text-gray-900 font-mono text-xs focus:ring-2 focus:ring-brand/20 transition-all">
                                    <input type="text" name="config[paypal_sandbox_secret]" placeholder="Secret Key" class="w-full bg-gray-50 border-none rounded-2xl px-6 py-4 text-gray-900 font-mono text-xs focus:ring-2 focus:ring-brand/20 transition-all">
                                </div>
                            </div>

                            <div class="space-y-6">
                                <h4 class="text-[10px] font-black text-emerald-500 uppercase tracking-[0.2em] flex items-center gap-2">
                                    <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span> Live Keys
                                </h4>
                                <div class="space-y-4">
                                    <input type="text" name="config[paypal_live_client_id]" placeholder="Client ID" class="w-full bg-gray-50 border-none rounded-2xl px-6 py-4 text-gray-900 font-mono text-xs focus:ring-2 focus:ring-brand/20 transition-all">
                                    <input type="text" name="config[paypal_live_secret]" placeholder="Secret Key" class="w-full bg-gray-50 border-none rounded-2xl px-6 py-4 text-gray-900 font-mono text-xs focus:ring-2 focus:ring-brand/20 transition-all">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Paytm Config -->
                    <div x-show="type === 'paytm'" x-transition class="space-y-8">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                            <div class="md:col-span-2">
                                <label class="block text-[10px] font-black text-gray-400 uppercase tracking-[0.2em] mb-3">Mode</label>
                                <select name="config[paytm_environment]" class="w-full bg-gray-50 border-none rounded-2xl px-6 py-4 text-gray-900 font-bold focus:ring-2 focus:ring-brand/20 transition-all appearance-none cursor-pointer">
                                    <option value="TEST" selected>Sandbox (Test)</option>
                                    <option value="PROD">Live (Production)</option>
                                </select>
                            </div>
                            <input type="text" name="config[paytm_merchant_id]" placeholder="Merchant ID" class="w-full bg-gray-50 border-none rounded-2xl px-6 py-4 text-gray-900 font-mono text-xs focus:ring-2 focus:ring-brand/20 transition-all">
                            <input type="text" name="config[paytm_merchant_key]" placeholder="Merchant Key" class="w-full bg-gray-50 border-none rounded-2xl px-6 py-4 text-gray-900 font-mono text-xs focus:ring-2 focus:ring-brand/20 transition-all">
                            <input type="text" name="config[paytm_website]" placeholder="Website" class="w-full bg-gray-50 border-none rounded-2xl px-6 py-4 text-gray-900 font-mono text-xs focus:ring-2 focus:ring-brand/20 transition-all">
                            <input type="text" name="config[paytm_industry_type]" placeholder="Industry Type" class="w-full bg-gray-50 border-none rounded-2xl px-6 py-4 text-gray-900 font-mono text-xs focus:ring-2 focus:ring-brand/20 transition-all">
                        </div>
                    </div>

                    <!-- Razorpay Config -->
                    <div x-show="type === 'razorpay'" x-transition class="space-y-8">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                            <input type="text" name="config[razorpay_key]" placeholder="Key ID" class="w-full bg-gray-50 border-none rounded-2xl px-6 py-4 text-gray-900 font-mono text-xs focus:ring-2 focus:ring-brand/20 transition-all md:col-span-2">
                            <input type="text" name="config[razorpay_secret]" placeholder="Secret Key" class="w-full bg-gray-50 border-none rounded-2xl px-6 py-4 text-gray-900 font-mono text-xs focus:ring-2 focus:ring-brand/20 transition-all 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 method
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection
