@extends('user::layouts.backend-master')

@section('breadcrumb_title', $breadcrumbTitle)

@section('content')

    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-2xl font-semibold">{{ $pageTitle }}</h1>
            <p class="text-gray-600 mt-1">{{ trans('payment::translate.Configure payment gateway settings') }}</p>
        </div>
        <a href="{{ route('admin.payment-methods.index') }}" class="btn btn-primary">
            <i class="fas fa-arrow-left mr-2"></i>{{ trans('payment::translate.Back') }}
        </a>
    </div>

    <div class="card">
        <form id="payment-method-form"
            action="{{ $method->exists ? route('admin.payment-methods.update', $method->id) : route('admin.payment-methods.store') }}"
            method="POST">
            @csrf
            @if ($method->exists)
                @method('PUT')
            @endif

            <div
                class="w-full grid grid-cols-2 lg:grid-cols-3 gap-8 lg:divide-x divide-border border-b border-border pb-10">
                <div class="col-span-2">
                    <!-- Basic Information -->
                    <div class="mb-10">
                        <h5 class="text-lg font-medium mb-4">{{ trans('payment::translate.Basic Information') }}</h5>

                        <!-- Driver Selection -->
                        @if (!$method->exists)
                            <div class="mb-4 input-with-label">
                                <label>{{ trans('payment::translate.Payment Gateway') }} <span
                                        class="text-red-500">*</span></label>
                                <select name="driver" id="driver"
                                    class="form-select @error('driver') border-red-500 @enderror" required>
                                    <option value="">{{ trans('payment::translate.Select a payment gateway') }}
                                    </option>
                                    @foreach ($drivers as $driverKey => $driverName)
                                        <option value="{{ $driverKey }}"
                                            {{ old('driver', $method->driver) == $driverKey ? 'selected' : '' }}>
                                            {{ $driverName }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('driver')
                                    <p class="text-red-500 text-sm">{{ $message }}</p>
                                @enderror
                            </div>
                        @else
                            <div class="mb-4 input-with-label">
                                <label>{{ trans('payment::translate.Payment Gateway') }}</label>
                                <input type="text" class="bg-gray-100 cursor-not-allowed"
                                    value="{{ ucwords(str_replace('_', ' ', $method->driver)) }}" readonly>
                                <input type="hidden" name="driver" value="{{ $method->driver }}">
                            </div>
                        @endif

                        <!-- Name -->
                        <div class="mb-4 input-with-label">
                            <label>{{ trans('payment::translate.Name') }} <span class="text-red-500">*</span></label>
                            <input type="text" name="name" id="name" value="{{ old('name', $method->name) }}"
                                class="@error('name') border-red-500 @enderror" required
                                placeholder="{{ trans('payment::translate.Enter payment method name') }}">
                            @error('name')
                                <p class="text-red-500 text-sm">{{ $message }}</p>
                            @enderror
                            <p class="text-xs">{{ trans('payment::translate.This name will be displayed to users') }}</p>
                        </div>

                        <!-- Description -->
                        <div class="mb-4 input-with-label">
                            <label>{{ trans('payment::translate.Description') }}</label>
                            <textarea name="description" id="description" rows="3" class="@error('description') border-red-500 @enderror"
                                placeholder="{{ trans('payment::translate.Enter description for this payment method') }}">{{ old('description', $method->description) }}</textarea>
                            @error('description')
                                <p class="text-red-500 text-sm">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <!-- Display Information -->
                    <div class="mb-10 hidden">
                        <h5 class="text-lg font-medium mb-4">{{ trans('payment::translate.Display Information') }}</h5>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <!-- Display Title -->
                                <div class="mb-4 input-with-label">
                                    <label>{{ trans('payment::translate.Display Title') }}</label>
                                    <input type="text" name="display_title" id="display_title"
                                        value="{{ old('display_title', $method->display_title) }}"
                                        class="@error('display_title') border-red-500 @enderror"
                                        placeholder="{{ trans('payment::translate.Custom title for frontend display') }}">
                                    @error('display_title')
                                        <p class="text-red-500 text-sm">{{ $message }}</p>
                                    @enderror
                                    <p class="text-xs">{{ trans('payment::translate.Leave empty to use method name') }}</p>
                                </div>

                                <!-- Theme Color -->
                                <div class="mb-4 input-with-label">
                                    <label>{{ trans('payment::translate.Theme Color') }}</label>
                                    <input type="color" name="theme_color" id="theme_color"
                                        value="{{ old('theme_color', $method->theme_color ?? '#007bff') }}"
                                        class="h-10 w-20 border border-gray-300 rounded @error('theme_color') border-red-500 @enderror"
                                        title="{{ trans('payment::translate.Choose theme color') }}">
                                    <div class="h-10 w-20"
                                        style="background-color: {{ old('theme_color', $method->theme_color ?? '#007bff') }}">
                                    </div>
                                    @error('theme_color')
                                        <p class="text-red-500 text-sm">{{ $message }}</p>
                                    @enderror
                                </div>

                                <!-- Sort Order -->
                                <div class="mb-4 input-with-label">
                                    <label>{{ trans('payment::translate.Sort Order') }}</label>
                                    <input type="number" name="sort_order" id="sort_order"
                                        value="{{ old('sort_order', $method->sort_order ?? 0) }}"
                                        class="@error('sort_order') border-red-500 @enderror" min="0"
                                        placeholder="0">
                                    @error('sort_order')
                                        <p class="text-red-500 text-sm">{{ $message }}</p>
                                    @enderror
                                    <p class="text-xs">{{ trans('payment::translate.Lower numbers appear first') }}</p>
                                </div>
                            </div>

                            <div>
                                <!-- Display Description -->
                                <div class="mb-4 input-with-label">
                                    <label>{{ trans('payment::translate.Display Description') }}</label>
                                    <textarea name="display_description" id="display_description" rows="3"
                                        class="@error('display_description') border-red-500 @enderror"
                                        placeholder="{{ trans('payment::translate.Custom description for frontend display') }}">{{ old('display_description', $method->display_description) }}</textarea>
                                    @error('display_description')
                                        <p class="text-red-500 text-sm">{{ $message }}</p>
                                    @enderror
                                    <p class="text-xs">
                                        {{ trans('payment::translate.Leave empty to use method description') }}</p>
                                </div>
                            </div>
                        </div>

                        <!-- Supported Currencies -->
                        <div class="mb-4">
                            <h3 class="mb-3 font-medium">{{ trans('payment::translate.Supported Currencies') }}</h3>
                            <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-3">
                                @php
                                    $currencies = [
                                        'USD',
                                        'EUR',
                                        'GBP',
                                        'NGN',
                                        'INR',
                                        'CAD',
                                        'AUD',
                                        'JPY',
                                        'CNY',
                                        'BRL',
                                    ];
                                    $selectedCurrencies = old(
                                        'supported_currencies',
                                        $method->supported_currencies ?? [],
                                    );
                                @endphp
                                @foreach ($currencies as $currency)
                                    <label class="flex items-center space-x-2">
                                        <input type="checkbox" name="supported_currencies[]" value="{{ $currency }}"
                                            class="rounded border-gray-300 text-blue-600"
                                            @if (in_array($currency, $selectedCurrencies)) checked @endif>
                                        <span class="text-sm">{{ $currency }}</span>
                                    </label>
                                @endforeach
                            </div>
                            <p class="text-xs mt-2 text-gray-600">
                                {{ trans('payment::translate.Leave empty to support all currencies') }}</p>
                        </div>
                    </div>

                    <!-- Configuration -->
                    <div class="@if (!$method->exists) hidden @endif" id="config-form">
                        <h5 class="text-lg font-medium mb-4">{{ trans('payment::translate.Gateway Configuration') }}</h5>
                        <div id="config-fields" class="space-y-4">
                            @if ($method->exists)
                                {!! \Modules\Payment\Facades\PaymentManager::renderConfig($method->driver, $method->config ?? []) !!}
                            @endif
                        </div>
                    </div>
                </div>

                <div class="flex flex-col col-span-full lg:col-span-1 lg:pl-8">
                    <!-- Status and Actions -->
                    <div class="mb-10">
                        <h3 class="text-lg font-medium mb-4">{{ trans('payment::translate.Status & Actions') }}</h3>

                        <!-- Active Status -->
                        <div class="mb-4">
                            <label class="flex items-center space-x-2">
                                <input type="checkbox" name="active" value="1"
                                    class="rounded border-gray-300 text-blue-600"
                                    {{ old('active', $method->active ?? true) ? 'checked' : '' }}>
                                <span>{{ trans('payment::translate.Active') }}</span>
                            </label>
                            <p class="text-xs text-gray-600">
                                {{ trans('payment::translate.Enable this payment method for use') }}</p>
                        </div>

                        <!-- Visibility Status -->
                        <div class="mb-6">
                            <label class="flex items-center space-x-2">
                                <input type="checkbox" name="visibility" value="1"
                                    class="rounded border-gray-300 text-blue-600"
                                    {{ old('visibility', $method->visibility ?? true) ? 'checked' : '' }}>
                                <span>{{ trans('payment::translate.Visible on Frontend') }}</span>
                            </label>
                            <p class="text-xs text-gray-600">
                                {{ trans('payment::translate.Show this payment method to customers') }}</p>
                        </div>

                        @include('backend::components.featured-image', [
                            'name' => 'image',
                            'label' => trans('payment::translate.Getway image'),
                            'preview' => $method->image ? asset($method->image) : null,
                            'id' => 'gateway-image',
                        ])

                    </div>

                    <!-- Help Information -->
                    <div class="mb-10">
                        <h3 class="text-lg font-medium mb-4">{{ trans('payment::translate.Help & Information') }}</h3>
                        <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
                            <h6 class="font-medium text-blue-900 mb-2">
                                {{ trans('payment::translate.Configuration Tips') }}</h6>
                            <ul class="text-sm text-blue-800 space-y-1">
                                <li>• {{ trans('payment::translate.Test your payment gateway in sandbox mode first') }}
                                </li>
                                <li>• {{ trans('payment::translate.Keep your API credentials secure') }}</li>
                                <li>• {{ trans('payment::translate.Some gateways require webhook setup') }}</li>
                                <li>• {{ trans('payment::translate.Check currency support for your region') }}</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-span-full flex-col sm:flex-row flex justify-end gap-4 mt-5">
                <a class="btn-secondary" href="{{ route('admin.payment-methods.index') }}">
                    Cancel
                </a>
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-save mr-2"></i>
                    {{ $method->exists ? trans('payment::translate.Update Payment Method') : trans('payment::translate.Create Payment Method') }}
                </button>
            </div>
        </form>
    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            // Handle driver selection change
            $('#driver').on('change', function() {
                const driver = $(this).val();
                const $configForm = $('#config-form');
                const $configFields = $('#config-fields');
                const $nameField = $('#name');

                if (!driver) {
                    $nameField.val('');
                    $configForm.addClass('hidden');
                    $configFields.empty();
                    return;
                }

                // Auto-fill name if empty
                if (!$nameField.val()) {
                    $nameField.val($(this).find('option:selected').text().trim());
                }

                // Load driver configuration
                $.ajax({
                    url: `{{ route('admin.payment-methods.index') }}/${driver}/get-data`,
                    method: 'GET',
                    success: function(response) {
                        if (response.success && response.config) {
                            $configForm.removeClass('hidden');
                            $configFields.html(response.config);
                        } else {
                            $configForm.addClass('hidden');
                            $configFields.empty();
                        }
                    },
                    error: function(xhr) {
                        console.error('Error loading driver configuration:', xhr);
                        showNotification(
                            "{{ trans('payment::translate.Error loading configuration') }}",
                            'error');
                        $configForm.addClass('hidden');
                        $configFields.empty();
                    }
                });
            });

            // Handle form submission
            $('#payment-method-form').on('submit', function(e) {
                e.preventDefault();

                const $form = $(this);
                const $submitBtn = $form.find('button[type="submit"]');
                const originalText = $submitBtn.html();

                // Disable submit button and show loading
                $submitBtn.prop('disabled', true).html(
                    '<i class="fas fa-spinner fa-spin mr-2"></i>{{ trans('translate.Processing') }}...'
                );

                // Prepare form data
                const formData = new FormData(this);

                // Collect config fields
                const config = {};
                $('#config-fields input, #config-fields select, #config-fields textarea').each(function() {
                    const name = $(this).attr('name');
                    if (name && name.startsWith('config[')) {
                        const key = name.replace('config[', '').replace(']', '');
                        config[key] = $(this).val();
                    }
                });

                // Add config to form data
                formData.delete('config');
                formData.append('config', JSON.stringify(config));

                $.ajax({
                    url: $form.attr('action'),
                    method: $form.attr('method') || 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                        'X-HTTP-Method-Override': $form.find('input[name="_method"]').val() ||
                            'POST'
                    },
                    success: function(response) {
                        if (response.success) {
                            showNotification(response.message, 'success');
                            if (response.redirect) {
                                window.location.href = response.redirect;
                            }
                        } else {
                            showNotification(response.message ||
                                "{{ trans('payment::translate.Something went wrong') }}",
                                'error');
                        }
                    },
                    error: function(xhr) {
                        let message = "{{ trans('payment::translate.Something went wrong') }}";

                        if (xhr.responseJSON) {
                            if (xhr.responseJSON.message) {
                                message = xhr.responseJSON.message;
                            } else if (xhr.responseJSON.errors) {
                                // Handle validation errors
                                const errors = Object.values(xhr.responseJSON.errors).flat();
                                message = errors.join('\n');
                            }
                        }

                        showNotification(message, 'error');
                    },
                    complete: function() {
                        $submitBtn.prop('disabled', false).html(originalText);
                    }
                });
            });
        });

        function showNotification(message, type) {
            if (type === 'success') {
                toastr.success(message);
            } else {
                toastr.error(message);
            }
        }
    </script>
@endpush