@extends('layouts.self-paced-dashboard')

@section('title', 'Paystack Configuration')
@section('page-title', 'Paystack Configuration')
@section('page-subtitle', 'Manage payment gateway settings')

@section('hero-actions')
    <a href="{{ route('self-paced.dashboard.index') }}"
       class="inline-flex items-center gap-2 px-4 py-2 bg-white/10 hover:bg-white/20 text-white text-sm font-medium rounded-lg transition border border-white/30">
        <i class="fas fa-arrow-left"></i> Back
    </a>
@endsection

@section('content')
<div class="max-w-4xl mx-auto">

    {{-- Validation Errors --}}
    @if($errors->any())
    <div class="bg-red-50 border border-red-200 rounded-xl p-4 mb-5">
        <div class="flex items-start gap-3">
            <i class="fas fa-exclamation-circle text-red-500 mt-0.5"></i>
            <div>
                <p class="text-sm font-semibold text-red-700 mb-1">Please fix the following errors:</p>
                <ul class="text-sm text-red-600 space-y-0.5 list-disc list-inside">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
    @endif

    {{-- Success Message --}}
    @if(session('success'))
    <div class="bg-green-50 border border-green-200 rounded-xl p-4 mb-5">
        <div class="flex items-start gap-3">
            <i class="fas fa-check-circle text-green-500 mt-0.5"></i>
            <div>
                <p class="text-sm font-semibold text-green-700">{{ session('success') }}</p>
            </div>
        </div>
    </div>
    @endif

    <form action="{{ route('self-paced.dashboard.paystack.update') }}"
          method="POST">
        @csrf
        @method('PUT')

        {{-- Paystack Keys Section --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 mb-5">
            <h2 class="text-base font-semibold text-gray-800 mb-1 flex items-center gap-2">
                <i class="fas fa-key text-indigo-600"></i> API Keys
            </h2>
            <p class="text-xs text-gray-400 mb-5">Get your keys from your <a href="https://dashboard.paystack.co/settings/developer" target="_blank" class="text-indigo-600 hover:text-indigo-800 font-medium">Paystack Developer Dashboard</a></p>

            <div class="space-y-5">

                {{-- Public Key --}}
                <div>
                    <label class="block text-xs font-semibold text-gray-600 mb-1.5">
                        <i class="fas fa-lock-open text-gray-400 mr-1"></i> Public Key <span class="text-red-500">*</span>
                    </label>
                    <div class="relative">
                        <input type="password"
                               name="paystack_public_key"
                               value="{{ old('paystack_public_key', $paystackPublicKey ? substr($paystackPublicKey, 0, 7) . '****' . substr($paystackPublicKey, -4) : '') }}"
                               placeholder="pk_live_... or pk_test_..."
                               class="w-full px-3 py-2 text-sm border @error('paystack_public_key') border-red-400 bg-red-50 @else border-gray-200 @enderror rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-300 focus:border-indigo-400 transition pr-10"
                               x-data
                               @click="$el.type = $el.type === 'password' ? 'text' : 'password'">
                        <span class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 text-xs cursor-pointer"
                              @click="$el.previousElementSibling.type = $el.previousElementSibling.type === 'password' ? 'text' : 'password'">
                            <i class="fas fa-eye"></i>
                        </span>
                    </div>
                    <p class="text-gray-400 text-xs mt-1">Starts with "pk_" (public). Used on the frontend.</p>
                    @error('paystack_public_key')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                    @if($paystackPublicKey)
                    <p class="text-green-600 text-xs mt-1 flex items-center gap-1">
                        <i class="fas fa-check-circle text-xs"></i> Configured
                    </p>
                    @endif
                </div>

                {{-- Secret Key --}}
                <div>
                    <label class="block text-xs font-semibold text-gray-600 mb-1.5">
                        <i class="fas fa-lock text-gray-400 mr-1"></i> Secret Key <span class="text-red-500">*</span>
                    </label>
                    <div class="relative">
                        <input type="password"
                               name="paystack_secret_key"
                               value="{{ old('paystack_secret_key', $paystackSecretKey ? substr($paystackSecretKey, 0, 7) . '****' . substr($paystackSecretKey, -4) : '') }}"
                               placeholder="sk_live_... or sk_test_..."
                               class="w-full px-3 py-2 text-sm border @error('paystack_secret_key') border-red-400 bg-red-50 @else border-gray-200 @enderror rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-300 focus:border-indigo-400 transition pr-10"
                               x-data
                               @click="$el.type = $el.type === 'password' ? 'text' : 'password'">
                        <span class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 text-xs cursor-pointer"
                              @click="$el.previousElementSibling.type = $el.previousElementSibling.type === 'password' ? 'text' : 'password'">
                            <i class="fas fa-eye"></i>
                        </span>
                    </div>
                    <p class="text-gray-400 text-xs mt-1">Starts with "sk_" (secret). Used on the backend.</p>
                    @error('paystack_secret_key')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                    @if($paystackSecretKey)
                    <p class="text-green-600 text-xs mt-1 flex items-center gap-1">
                        <i class="fas fa-check-circle text-xs"></i> Configured
                    </p>
                    @endif
                </div>

            </div>

            {{-- Information Box --}}
            <div class="mt-5 p-3 bg-blue-50 border border-blue-100 rounded-lg flex items-start gap-2">
                <i class="fas fa-info-circle text-blue-400 mt-0.5 flex-shrink-0"></i>
                <div class="text-xs text-blue-700">
                    <p><strong>Development vs Production:</strong></p>
                    <p class="mt-1">Use test keys (pk_test_... and sk_test_...) during development. Switch to live keys (pk_live_... and sk_live_...) when ready for production.</p>
                </div>
            </div>
        </div>

        {{-- Supported Currencies Section --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 mb-5">
            <h2 class="text-base font-semibold text-gray-800 mb-1 flex items-center gap-2">
                <i class="fas fa-globe text-green-600"></i> Supported Currencies
            </h2>
            <p class="text-xs text-gray-400 mb-5">Select which currencies you want to accept. Courses use these for pricing.</p>

            <div class="space-y-3">
                @foreach(['KES' => 'Kenyan Shilling', 'USD' => 'US Dollar', 'GBP' => 'British Pound', 'ZAR' => 'South African Rand'] as $code => $name)
                <label class="flex items-center gap-3 p-3 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50 transition">
                    <input type="checkbox"
                           name="paystack_currencies[]"
                           value="{{ $code }}"
                           {{ in_array($code, $supportedCurrencies) ? 'checked' : '' }}
                           class="w-4 h-4 accent-indigo-600">
                    <div class="flex-1">
                        <p class="text-sm font-medium text-gray-700">{{ $code }}</p>
                        <p class="text-xs text-gray-400">{{ $name }}</p>
                    </div>
                </label>
                @endforeach
            </div>

            @error('paystack_currencies')
                <p class="text-red-500 text-xs mt-2">{{ $message }}</p>
            @enderror

            <div class="mt-4 p-3 bg-amber-50 border border-amber-100 rounded-lg flex items-start gap-2">
                <i class="fas fa-exclamation-circle text-amber-500 mt-0.5 flex-shrink-0"></i>
                <p class="text-xs text-amber-700">
                    <strong>Note:</strong> At least one currency must be selected. Courses can only be priced in supported currencies.
                </p>
            </div>
        </div>

        {{-- Webhook Settings Section --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 mb-5">
            <h2 class="text-base font-semibold text-gray-800 mb-1 flex items-center gap-2">
                <i class="fas fa-webhook text-purple-600"></i> Webhook Secret
            </h2>
            <p class="text-xs text-gray-400 mb-5">For handling payment verification callbacks from Paystack</p>

            <div>
                <label class="block text-xs font-semibold text-gray-600 mb-1.5">
                    <i class="fas fa-shield-alt text-gray-400 mr-1"></i> Webhook Secret <span class="text-gray-400 font-normal">(optional for now)</span>
                </label>
                <div class="relative">
                    <input type="password"
                           name="paystack_webhook_secret"
                           value="{{ old('paystack_webhook_secret', $paystackWebhookSecret ? substr($paystackWebhookSecret, 0, 7) . '****' . substr($paystackWebhookSecret, -4) : '') }}"
                           placeholder="whsec_..."
                           class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-300 focus:border-indigo-400 transition pr-10"
                           x-data
                           @click="$el.type = $el.type === 'password' ? 'text' : 'password'">
                    <span class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 text-xs cursor-pointer"
                          @click="$el.previousElementSibling.type = $el.previousElementSibling.type === 'password' ? 'text' : 'password'">
                        <i class="fas fa-eye"></i>
                    </span>
                </div>
                <p class="text-gray-400 text-xs mt-1">Used to verify webhook signatures from Paystack.</p>
                @if($paystackWebhookSecret)
                <p class="text-green-600 text-xs mt-1 flex items-center gap-1">
                    <i class="fas fa-check-circle text-xs"></i> Configured
                </p>
                @endif
            </div>

            <div class="mt-4 p-3 bg-blue-50 border border-blue-100 rounded-lg flex items-start gap-2">
                <i class="fas fa-info-circle text-blue-400 mt-0.5 flex-shrink-0"></i>
                <p class="text-xs text-blue-700">
                    <strong>Webhook URL:</strong> <code class="bg-blue-100 px-2 py-1 rounded text-xs">{{ url(route('paystack.webhook')) }}</code>
                    Add this to your Paystack Developer Dashboard under Webhooks.
                </p>
            </div>
        </div>

        {{-- Action Buttons --}}
        <div class="flex justify-between gap-3">
            <a href="{{ route('self-paced.dashboard.index') }}"
               class="inline-flex items-center gap-2 px-5 py-2.5 bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-semibold rounded-lg transition">
                <i class="fas fa-times"></i> Cancel
            </a>
            <button type="submit"
                    class="inline-flex items-center gap-2 px-6 py-2.5 bg-green-600 hover:bg-green-700 text-white text-sm font-semibold rounded-lg transition shadow">
                <i class="fas fa-save"></i> Save Configuration
            </button>
        </div>

    </form>

</div>
@endsection
