@extends('layouts.app')
@section('title', 'Create Payment Gateway')
@section('description', 'Configure a new payment gateway')
@section('content')


    <!-- Page Content -->
    <main class="p-8">
        <div class="max-w-5xl mx-auto">
            <!-- Back Button -->
            <div class="mb-6">
                <a href="{{ route('admin.payment_gateway.index') }}" class="inline-flex items-center text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors duration-200">
                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                    </svg>
                    Back to Payment Gateways
                </a>
            </div>

            <!-- Form Card -->
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden">
                <form action="{{ route('admin.payment_gateway.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf

                    <!-- Validation Errors -->
                    @if ($errors->any())
                    <div class="m-8 mb-0 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
                        <div class="flex items-start">
                            <svg class="w-5 h-5 text-red-600 dark:text-red-400 mt-0.5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                            <div class="flex-1">
                                <h3 class="text-sm font-medium text-red-800 dark:text-red-400">There were {{ $errors->count() }} error(s) with your submission:</h3>
                                <ul class="mt-2 text-sm text-red-700 dark:text-red-300 list-disc list-inside space-y-1">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    </div>
                    @endif

                    <!-- Form Body -->
                    <div class="p-8 space-y-8">
                        <!-- Basic Information -->
                        <div>
                            <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
                                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                                Basic Information
                            </h2>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div>
                                    <label for="name" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                                        Gateway Name <span class="text-red-500">*</span>
                                    </label>
                                    <input type="text" name="name" id="name" value="{{ old('name') }}" 
                                        class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900 dark:text-white transition-colors duration-200" 
                                        placeholder="e.g., Stripe" required>
                                    @error('name')
                                    <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                                    @enderror
                                </div>

                                <div>
                                    <label for="display_name" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                                        Display Name <span class="text-red-500">*</span>
                                    </label>
                                    <input type="text" name="display_name" id="display_name" value="{{ old('display_name') }}" 
                                        class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900 dark:text-white transition-colors duration-200" 
                                        placeholder="e.g., Stripe Payment" required>
                                    @error('display_name')
                                    <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                                    @enderror
                                </div>

                                <div class="md:col-span-2">
                                    <label for="description" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                                        Description
                                    </label>
                                    <textarea name="description" id="description" rows="3"
                                        class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900 dark:text-white transition-colors duration-200" 
                                        placeholder="Brief description of this payment gateway">{{ old('description') }}</textarea>
                                    @error('description')
                                    <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                                    @enderror
                                </div>

                                <div class="md:col-span-2">
                                    <label for="logo" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                                        Logo
                                    </label>
                                    <input type="file" name="logo" id="logo" accept="image/*"
                                        class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900 dark:text-white transition-colors duration-200">
                                    @error('logo')
                                    <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- API Configuration -->
                        <div>
                            <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
                                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
                                </svg>
                                API Configuration
                            </h2>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div>
                                    <label for="api_key" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                                        API Key
                                    </label>
                                    <input type="text" name="api_key" id="api_key" value="{{ old('api_key') }}" 
                                        class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900 dark:text-white transition-colors duration-200" 
                                        placeholder="Enter API key">
                                </div>

                                <div>
                                    <label for="api_secret" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                                        API Secret
                                    </label>
                                    <input type="password" name="api_secret" id="api_secret" value="{{ old('api_secret') }}" 
                                        class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900 dark:text-white transition-colors duration-200" 
                                        placeholder="Enter API secret">
                                </div>

                                <div>
                                    <label for="merchant_id" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                                        Merchant ID
                                    </label>
                                    <input type="text" name="merchant_id" id="merchant_id" value="{{ old('merchant_id') }}" 
                                        class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900 dark:text-white transition-colors duration-200" 
                                        placeholder="Enter merchant ID">
                                </div>

                                <div>
                                    <label for="webhook_secret" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                                        Webhook Secret
                                    </label>
                                    <input type="password" name="webhook_secret" id="webhook_secret" value="{{ old('webhook_secret') }}" 
                                        class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900 dark:text-white transition-colors duration-200" 
                                        placeholder="Enter webhook secret">
                                </div>

                                <div>
                                    <label for="mode" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                                        Mode <span class="text-red-500">*</span>
                                    </label>
                                    <select name="mode" id="mode" required
                                        class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900 dark:text-white transition-colors duration-200">
                                        <option value="test" {{ old('mode') === 'test' ? 'selected' : '' }}>Test Mode</option>
                                        <option value="live" {{ old('mode') === 'live' ? 'selected' : '' }}>Live Mode</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <!-- Payment Settings -->
                        <div>
                            <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
                                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                                Payment Settings
                            </h2>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div>
                                    <label for="min_amount" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                                        Minimum Amount (cents) <span class="text-red-500">*</span>
                                    </label>
                                    <input type="number" name="min_amount" id="min_amount" value="{{ old('min_amount', 100) }}" 
                                        class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900 dark:text-white transition-colors duration-200" 
                                        placeholder="100" required min="1">
                                    <p class="mt-1 text-xs text-gray-500">Amount in smallest currency unit (e.g., cents for USD)</p>
                                </div>

                                <div>
                                    <label for="max_amount" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                                        Maximum Amount (cents)
                                    </label>
                                    <input type="number" name="max_amount" id="max_amount" value="{{ old('max_amount') }}" 
                                        class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900 dark:text-white transition-colors duration-200" 
                                        placeholder="Leave empty for unlimited" min="1">
                                </div>

                                <div>
                                    <label for="fee_percentage" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                                        Fee Percentage (%)
                                    </label>
                                    <input type="number" name="fee_percentage" id="fee_percentage" value="{{ old('fee_percentage', 0) }}" 
                                        class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900 dark:text-white transition-colors duration-200" 
                                        placeholder="0.00" step="0.01" min="0" max="100">
                                </div>

                                <div>
                                    <label for="fee_fixed" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                                        Fixed Fee (cents)
                                    </label>
                                    <input type="number" name="fee_fixed" id="fee_fixed" value="{{ old('fee_fixed', 0) }}" 
                                        class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900 dark:text-white transition-colors duration-200" 
                                        placeholder="0" min="0">
                                </div>

                                <div>
                                    <label for="sort_order" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                                        Display Order
                                    </label>
                                    <input type="number" name="sort_order" id="sort_order" value="{{ old('sort_order', 0) }}" 
                                        class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900 dark:text-white transition-colors duration-200" 
                                        placeholder="0" min="0">
                                </div>

                                <div class="md:col-span-2">
                                    <label for="supported_currencies" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                                        Supported Currencies
                                    </label>
                                    <select name="supported_currencies" id="supported_currencies" multiple>
                                        <option value="USD">USD</option>
                                    </select>
                                </div>

                                <div class="md:col-span-2 flex items-center">
                                    <input type="checkbox" name="is_active" id="is_active" value="1" {{ old('is_active') ? 'checked' : '' }}
                                        class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                                    <label for="is_active" class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">
                                        Activate this payment gateway
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Form Footer -->
                    <div class="bg-gray-50 dark:bg-gray-700/50 px-8 py-4 flex justify-end space-x-3">
                        <a href="{{ route('admin.payment_gateway.index') }}" class="px-6 py-3 bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-300 font-semibold rounded-lg hover:bg-gray-300 dark:hover:bg-gray-500 transition-colors duration-200">
                            Cancel
                        </a>
                        <button type="submit" class="px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white font-semibold rounded-lg shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-200">
                            <svg class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            Create Payment Gateway
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </main>

@endsection