@extends('layouts.app')

@section('title', __('payments.title'))

@section('content')
    <h1 class="text-2xl md:text-3xl font-semibold text-gray-800 dark:text-white mb-6">
        {{ __('payments.title') }}
    </h1>

    <div class="mb-6 p-4 rounded-md bg-yellow-50 dark:bg-yellow-900/50 border border-yellow-300 dark:border-yellow-700">
        <div class="flex">
            <div class="flex-shrink-0"><svg class="h-5 w-5 text-yellow-400 dark:text-yellow-300"
                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                    <path fill-rule="evenodd"
                        d="M8.485 3.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 3.495zM10 6a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 6zm0 9a1 1 0 100-2 1 1 0 000 2z"
                        clip-rule="evenodd" />
                </svg></div>
            <div class="ml-3">
                <h3 class="text-sm font-medium text-yellow-800 dark:text-yellow-200">
                    {{ __('payments.security_warning_title') }}</h3>
                <div class="mt-2 text-sm text-yellow-700 dark:text-yellow-100">
                    <p>{{ __('payments.security_warning_body') }}</p>
                </div>
            </div>
        </div>
    </div>

    <div
        class="max-w-2xl bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 md:p-8 border border-gray-200 dark:border-gray-700">

        <form method="POST" action="{{ route('admin.payments.update') }}" class="space-y-8">
            @csrf
            @method('PUT')

            <fieldset>
                <legend class="text-base font-medium text-gray-900 dark:text-white mb-2">
                    {{ __('payments.active_gateway_legend') }}</legend>
                <p class="text-sm text-gray-500 dark:text-gray-400 mb-3">{{ __('payments.active_gateway_help') }}</p>
                <div class="flex flex-col sm:flex-row sm:items-center sm:space-x-6 space-y-3 sm:space-y-0">
                    <div class="flex items-center">
                        <input id="active_stripe" name="active_payment_gateway" type="radio" value="stripe"
                            @checked(old('active_payment_gateway', $settings['active_payment_gateway'] ?? 'stripe') === 'stripe') @disabled(!$settings['stripe_configured'] && ($settings['active_payment_gateway'] ?? 'stripe') !== 'stripe')
                            class="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed">
                        <label for="active_stripe"
                            class="ml-2 block text-sm font-medium text-gray-700 dark:text-gray-300 {{ !$settings['stripe_configured'] ? 'opacity-50 cursor-not-allowed' : '' }}">
                            {{ __('payments.stripe') }}
                            @if (!$settings['stripe_configured'])
                                <span
                                    class="ml-1 text-xs text-yellow-600 dark:text-yellow-400">{{ __('payments.requires_setup') }}</span>
                            @else
                                <span
                                    class="ml-1 text-xs text-green-600 dark:text-green-400">{{ __('payments.configured') }}</span>
                            @endif
                        </label>
                    </div>
                    <div class="flex items-center">
                        <input id="active_till" name="active_payment_gateway" type="radio" value="till"
                            @checked(old('active_payment_gateway', $settings['active_payment_gateway'] ?? 'stripe') === 'till') @disabled(!$settings['till_configured'] && ($settings['active_payment_gateway'] ?? 'stripe') !== 'till')
                            class="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed">
                        <label for="active_till"
                            class="ml-2 block text-sm font-medium text-gray-700 dark:text-gray-300 {{ !$settings['till_configured'] ? 'opacity-50 cursor-not-allowed' : '' }}">
                            {{ __('payments.till') }}
                            @if (!$settings['till_configured'])
                                <span
                                    class="ml-1 text-xs text-yellow-600 dark:text-yellow-400">{{ __('payments.requires_setup') }}</span>
                            @else
                                <span
                                    class="ml-1 text-xs text-green-600 dark:text-green-400">{{ __('payments.configured') }}</span>
                            @endif
                        </label>
                    </div>
                </div>
                @error('active_payment_gateway')
                    <p class="mt-2 text-xs text-red-600">{{ $message }}</p>
                @enderror
            </fieldset>

            <fieldset class="space-y-6 pt-6 border-t border-gray-200 dark:border-gray-600">
                <legend class="text-lg font-semibold text-gray-900 dark:text-white flex items-center space-x-2">
                    <span>{{ __('payments.stripe_settings_legend') }}</span>
                    @if (!$settings['stripe_configured'])
                        <span
                            class="text-xs font-normal px-2 py-0.5 rounded-full bg-yellow-100 text-yellow-800">{{ __('payments.status_incomplete') }}</span>
                    @elseif($settings['active_payment_gateway'] === 'stripe')
                        <span
                            class="text-xs font-normal px-2 py-0.5 rounded-full bg-green-100 text-green-800">{{ __('payments.status_active') }}</span>
                    @else
                        <span
                            class="text-xs font-normal px-2 py-0.5 rounded-full bg-gray-100 text-gray-600">{{ __('payments.status_inactive') }}</span>
                    @endif
                </legend>
                <div>
                    <label for="stripe_key"
                        class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ __('payments.stripe_key_label') }}</label>
                    <input type="text" name="stripe_key" id="stripe_key"
                        value="{{ old('stripe_key', $settings['stripe_key'] ?? '') }}"
                        placeholder="{{ __('payments.stripe_key_placeholder') }}"
                        class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 @error('stripe_key') border-red-500 ring-1 ring-red-500 @enderror">
                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ __('payments.stripe_key_help') }}</p>
                    @error('stripe_key')
                        <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                    @enderror
                </div>
                <div>
                    <label for="stripe_secret"
                        class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ __('payments.stripe_secret_label') }}</label>
                    <input type="password" name="stripe_secret" id="stripe_secret" value=""
                        placeholder="{{ $settings['stripe_secret_set'] ? __('payments.stripe_secret_placeholder_set') : __('payments.stripe_secret_placeholder_empty') }}"
                        class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 @error('stripe_secret') border-red-500 ring-1 ring-red-500 @enderror">
                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ __('payments.stripe_secret_help') }}</p>
                    @error('stripe_secret')
                        <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                    @enderror
                </div>
                <div>
                    <label for="stripe_webhook_secret"
                        class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ __('payments.stripe_webhook_label') }}</label>
                    <input type="password" name="stripe_webhook_secret" id="stripe_webhook_secret" value=""
                        placeholder="{{ $settings['stripe_webhook_secret_set'] ? __('payments.stripe_secret_placeholder_set') : __('payments.stripe_webhook_placeholder_empty') }}"
                        class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 @error('stripe_webhook_secret') border-red-500 ring-1 ring-red-500 @enderror">
                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ __('payments.stripe_webhook_help') }}</p>
                    @error('stripe_webhook_secret')
                        <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                    @enderror
                </div>
            </fieldset>

            <fieldset class="space-y-6 pt-6 border-t border-gray-200 dark:border-gray-600">
                <legend class="text-lg font-semibold text-gray-900 dark:text-white flex items-center space-x-2">
                    <span>Till Payments Settings (Official API)</span>
                    @if (!$settings['till_configured'])
                        <span
                            class="text-xs font-normal px-2 py-0.5 rounded-full bg-yellow-100 text-yellow-800">{{ __('payments.status_incomplete') }}</span>
                    @elseif($settings['active_payment_gateway'] === 'till')
                        <span
                            class="text-xs font-normal px-2 py-0.5 rounded-full bg-green-100 text-green-800">{{ __('payments.status_active') }}</span>
                    @else
                        <span
                            class="text-xs font-normal px-2 py-0.5 rounded-full bg-gray-100 text-gray-600">{{ __('payments.status_inactive') }}</span>
                    @endif
                </legend>

                <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-700 rounded-md p-4">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <svg class="h-5 w-5 text-blue-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                                fill="currentColor">
                                <path fill-rule="evenodd"
                                    d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
                                    clip-rule="evenodd" />
                            </svg>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm text-blue-800 dark:text-blue-200">
                                <strong>Get these credentials from your Till Payments dashboard:</strong><br>
                                All fields are required for the official Till API integration.
                            </p>
                        </div>
                    </div>
                </div>

                <div>
                    <label for="till_public_integration_key"
                        class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Public Integration Key
                        *</label>
                    <input type="text" name="till_public_integration_key" id="till_public_integration_key"
                        value="{{ old('till_public_integration_key', $settings['till_public_integration_key'] ?? '') }}"
                        placeholder="pk_test_... or pk_live_..."
                        class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 @error('till_public_integration_key') border-red-500 ring-1 ring-red-500 @enderror">
                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Used for frontend payment.js integration</p>
                    @error('till_public_integration_key')
                        <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="till_api_key" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">API
                        Key *</label>
                    <input type="text" name="till_api_key" id="till_api_key"
                        value="{{ old('till_api_key', $settings['till_api_key'] ?? '') }}"
                        placeholder="Your Till API Key"
                        class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 @error('till_api_key') border-red-500 ring-1 ring-red-500 @enderror">
                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Used in API endpoint URL path</p>
                    @error('till_api_key')
                        <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="till_username" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">API
                        Username *</label>
                    <input type="text" name="till_username" id="till_username"
                        value="{{ old('till_username', $settings['till_username'] ?? '') }}"
                        placeholder="Your Till API Username"
                        class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 @error('till_username') border-red-500 ring-1 ring-red-500 @enderror">
                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Used for Basic Authentication</p>
                    @error('till_username')
                        <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="till_password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">API
                        Password *</label>
                    <input type="password" name="till_password" id="till_password" value=""
                        placeholder="{{ $settings['till_password_set'] ? 'Password is set (leave blank to keep current)' : 'Enter your Till API Password' }}"
                        class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 @error('till_password') border-red-500 ring-1 ring-red-500 @enderror">
                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                        Used for Basic Authentication.
                        @if ($settings['till_password_set'])
                            <span class="text-green-600 dark:text-green-400">✓ Currently set</span>
                        @else
                            <span class="text-red-600 dark:text-red-400">⚠ Not set</span>
                        @endif
                    </p>
                    @error('till_password')
                        <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="till_shared_secret"
                        class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Shared Secret</label>
                    <input type="password" name="till_shared_secret" id="till_shared_secret" value=""
                        placeholder="{{ $settings['till_shared_secret_set'] ? 'Shared secret is set (leave blank to keep current)' : 'Enter your Till Shared Secret (optional)' }}"
                        class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 @error('till_shared_secret') border-red-500 ring-1 ring-red-500 @enderror">
                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                        Used for webhook signature validation (optional).
                        @if ($settings['till_shared_secret_set'])
                            <span class="text-green-600 dark:text-green-400">✓ Currently set</span>
                        @else
                            <span class="text-yellow-600 dark:text-yellow-400">⚠ Not set</span>
                        @endif
                    </p>
                    @error('till_shared_secret')
                        <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="till_endpoint" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">API
                        Endpoint</label>
                    <input type="url" name="till_endpoint" id="till_endpoint"
                        value="{{ old('till_endpoint', $settings['till_endpoint'] ?? 'https://gateway.tillpayments.com') }}"
                        placeholder="https://gateway.tillpayments.com"
                        class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 @error('till_endpoint') border-red-500 ring-1 ring-red-500 @enderror">
                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Use sandbox URL for testing:
                        https://gateway-sandbox.tillpayments.com</p>
                    @error('till_endpoint')
                        <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                    @enderror
                </div>
            </fieldset>

            <div class="flex justify-between items-center pt-4">
                @if ($settings['till_configured'])
                    <a href="{{ route('admin.payments.test-till') }}"
                        class="inline-flex justify-center py-2 px-4 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-150 ease-in-out">
                        Test Till Connection
                    </a>
                @else
                    <span></span>
                @endif

                <button type="submit"
                    class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-150 ease-in-out">
                    {{ __('payments.save_button') }}
                </button>
            </div>
        </form>
    </div>
@endsection