<x-admin-app-layout>

    <form action="{{ route('admin.settings.payment-methods.update', $paymentMethod) }}" class="space-y-4 form-submit-edit"
        method="POST">
        @csrf
        @method('PUT')

        <div class="white-box">
            <x-admin::page-header title="{{ __('Edit Payment Method') }}" :buttons="$buttons" :isFilterable="false" />

            <div class="flex flex-col md:flex-row items-center gap-5 mb-6">
                <div class="xl:w-[500px]">
                    <div
                        class="relative bg-primary/5 border border-neutral-30 dark:border-neutral-500 rounded-lg p-8 xl:py-12 flex justify-center mb-7">
                        <div id="image_preview">
                            <img src="{{ $paymentMethod->image ?? '/assets/admin/images/logo-light.png' }}"
                                alt="logo light" width="300" height="300" />
                        </div>
                        <input type="text" class="sr-only" name="image" id="image_input"
                            value="{{ $paymentMethod->image }}" />
                        <label for="image" id="image" data-input="image_input" data-preview="image_preview"
                            class="absolute cursor-pointer size-12 right-5 bottom-0 translate-y-1/2 bg-primary rounded-full text-neutral-0 text-2xl f-center">
                            <i class="ph ph-cloud-arrow-up"></i>
                        </label>
                    </div>
                    <p class="text-neutral-400 text-xs">
                        {{ __('Supported Files: JPG, Png, json. Image will be resized into 300 x 300px') }}
                    </p>
                    @error('image')
                        <span class="input-text-error">{{ $message }}</span>
                    @enderror
                </div>
                <div class="flex-1">
                    <div
                        class="py-6 border-b border-neutral-30 dark:border-neutral-500 flex justify-between items-center">
                        <div>
                            <p class="s-text font-medium mb-1">{{ __('Status') }}</p>
                            <p class="text-xs">{{ __('Enable to your gateway status') }}</p>
                        </div>
                        <label for="status" class="switch flex justify-center">
                            <input id="status" name="status"
                                {{ $paymentMethod->status == 'active' ? 'checked' : '' }} value="active"
                                type="checkbox" />
                            <input type="hidden" name="status" value="inactive" >
                            <span class="inner primary"></span>
                        </label>
                    </div>
                    @if ($paymentMethod->type == 'auto')
                        <div class="py-6 flex justify-between items-center">
                            <div>
                                <p class="s-text font-medium mb-1">{{ __('Test Environment') }}</p>
                                <p class="text-xs">{{ __('Enable to test mode') }}</p>
                            </div>
                            <label for="is_test" class="switch flex justify-center">
                                <input id="is_test" name="is_test"
                                    {{ $paymentMethod->is_test == 'active' ? 'checked' : '' }} value="1"
                                    type="checkbox" />
                                <input type="hidden" name="is_test" value="0">
                                <span class="inner primary"></span>
                            </label>
                        </div>
                    @endif
                </div>
            </div>
        </div>
        <div class="white-box mb-4">
            <p class="m-text font-medium mb-4">{{ __('Global Setting for Checkout') }}</p>
            <div class="grid grid-cols-2 gap-4 xl:gap-6">

                <div class="col-span-2 md:col-span-1">
                    <x-admin::text-input-group name="name" label="Name" :value="$paymentMethod->name" />
                </div>
                <div>
                    <x-admin::label for="supported_currencies">{{ __('Supported Currencies') }}</x-admin::label>
                    <x-admin::select-option id="supported_currencies" name="supported_currencies[]" :multiple="true"
                        :value="$paymentMethod->supported_currencies">
                        @foreach (config('currencies.names') as $key => $currency)
                            <option value="{{ $key }}" @if (
                                $paymentMethod->supported_currencies &&
                                    is_array($paymentMethod->supported_currencies) &&
                                    in_array($key, $paymentMethod->supported_currencies)) selected @endif>
                                {{ $key }}</option>
                        @endforeach
                    </x-admin::select-option>
                    <x-admin::input-error name="supported_currencies" />
                </div>
                @if ($paymentMethod->type == 'manual')
                    <div class="col-span-2">
                        <x-admin::editor name="pay_instructions" label="Pay Instructions" :value="$paymentMethod->pay_instructions" />
                    </div>
                    <div class="col-span-2">
                        <div class="flex justify-between items-center">
                            <label for="name" class="m-text font-medium">{{ __('Extra Fields') }}</label>
                            <button type="button" class="btn-primary" data-modal-target="meta_extra_field_add_modal">
                                <i class="ph ph-plus"></i>
                                <span class="text-xs font-medium">{{ __('Add Extra Field') }}</span>
                            </button>
                        </div>
                        <div x-data="metaAdd()" x-init="selectedItems = {{ json_encode($paymentMethod->meta) }};" class="n10-box mt-4">
                            <ul class="flex flex-col gap-3 h-full p-1 border rounded-lg"
                                :class="isDragging ? 'bg-primary/10 border-primary border-dashed' : 'border-transparent'"
                                @dragover="allowDrop($event)" @drop="handleDrop($event)">
                                <template x-for="(item, index) in selectedItems" :key="index">
                                    <li class="white-box flex justify-between items-center cursor-move" draggable="true"
                                        @dragstart="startDrag($event, 'selected', index)" @dragend="endDrag"
                                        @dragover="allowDrop($event)" @drop="handleDrop($event, index)">
                                        <div class="flex items-center gap-2">
                                            <i class="ph ph-dots-six-vertical text-lg"></i>
                                            <span class="s-text font-medium" x-text="item.label"></span>
                                        </div>
                                        <input type="hidden" :name="`meta[${index}][label]`" :value="item.label">
                                        <input type="hidden" :name="`meta[${index}][field_type]`"
                                            :value="item.field_type">
                                        <input type="hidden" :name="`meta[${index}][required]`" :value="item.required">
                                        <input type="hidden" :name="`meta[${index}][order]`" :value="item.order">

                                        <div class="flex gap-2">
                                            <button type="button" class="text-xl" @click="editItem(index)"
                                                data-modal-target="meta_extra_field_edit_modal">
                                                <i class="ph ph-pencil"></i>
                                            </button>

                                            <button type="button" class="text-xl" @click="deleteItem(index)">
                                                <i class="ph ph-trash"></i>
                                            </button>
                                        </div>
                                    </li>
                                </template>
                            </ul>
                        </div>
                    </div>
                @else
                    @foreach ($paymentMethod->meta ?? [] as $key => $meta)
                        <div class="col-span-2 md:col-span-1">
                            <x-admin::text-input-group :label="ucwords(str_replace('_', ' ', $key))" name="meta[{{ $key }}]"
                                :value="$meta" />
                        </div>
                    @endforeach
                    @if (count($paymentMethod->meta) >= 0 && $paymentMethod->slug !== 'wallet')
                        {{-- Webhook URL Copyable Input --}}
                        <div class="col-span-2 md:col-span-1">
                            <label for="webhook_url"
                                class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                                {{ __('Webhook URL') }}
                            </label>
                            <div class="flex items-center gap-2 mt-1">
                                <input type="text" id="webhook_url"
                                    class="input-text bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg px-4 py-2 text-gray-900 dark:text-gray-200 w-full"
                                    readonly
                                    value="{{ config('app.url') . '/payment/webhooks/' . $paymentMethod->slug }}" />
                                <button type="button"
                                    class="btn-primary flex items-center justify-center p-2 rounded-lg bg-blue-600 hover:bg-blue-700 text-white"
                                    id="copy_button">
                                    <i class="ph ph-copy text-lg"></i>
                                </button>
                            </div>
                            <p id="copy_message" class="text-sm text-green-500 mt-1 hidden">Copied!</p>
                        </div>
                    @endif
                @endif
            </div>
        </div>

        <div class="white-box mb-6">
            <div class="space-y-4 xl:space-y-6">
                <div class="white-box">
                    <p class="s-text mb-5">{{ __('Range') }}</p>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 xl:gap-6">
                        <x-admin::text-input-group name="min" label="Minimum Amount" :value="$paymentMethod->min" />
                        <x-admin::text-input-group name="max" label="Maximum Amount" :value="$paymentMethod->max" />
                    </div>
                </div>
                <div class="white-box">
                    <p class="s-text mb-5">{{ __('Charges') }}</p>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 xl:gap-6">
                        <x-admin::text-input-group name="fixed_charge" label="Fixed Charge" :value="$paymentMethod->fixed_charge" />
                        <x-admin::text-input-group name="percent_charge" label="Percent Charge" :value="$paymentMethod->percent_charge" />
                    </div>
                </div>
            </div>
        </div>

        <x-admin::primary-button type="submit" class="btn btn-primary">
            {{ __('Submit') }}
        </x-admin::primary-button>
    </form>
    <x-admin::modal modalId="meta_extra_field_add_modal" title="Add new Extra Field">
        <form class="handle_add_new_extra_field" method="POST">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <x-admin::text-input-group name="label" label="Label" />
                <div class="input-group">
                    <x-admin::label for="field_type">Type</x-admin::label>
                    <x-admin::select-option id="field_type" type="text" name="field_type" label="Type">
                        <option value="text">Text</option>
                        <option value="textarea">Textarea</option>
                        <option value="number">Number</option>
                        <option value="file">File</option>
                        <option value="image">Image</option>
                    </x-admin::select-option>
                </div>
                <div>
                    <x-admin::label for="required">{{ __('Required') }}</x-admin::label>
                    <x-admin::switch name="required" value="1" :types="[['value' => 1, 'label' => __('Required')], ['value' => 0, 'label' => __('Optional')]]" />
                </div>
            </div>
            <div class="flex items-center justify-end mt-4">
                <x-admin::primary-button type="submit" class="btn btn-primary">
                    {{ __('Submit') }}
                </x-admin::primary-button>
            </div>
        </form>
    </x-admin::modal>
    <x-admin::modal modalId="meta_extra_field_edit_modal" title="Edit Extra Field">
        <form class="handle_edit_extra_field" method="POST">
            <div class="grid grid-cols-1  gap-4">
                <x-admin::text-input-group name="label" label="Label" />
                <input type="hidden" name="field_id">
                <div>
                    <x-admin::label for="field_type">{{ __('Field Type') }}</x-admin::label>
                    <x-admin::select-option class="select-2" type="text" name="field_type" label="Type">
                        <option value="text">Text</option>
                        <option value="textarea">Textarea</option>
                        <option value="number">Number</option>
                        <option value="file">File</option>
                        <option value="image">Image</option>
                    </x-admin::select-option>
                </div>
                <div>
                    <x-admin::label for="required">{{ __('Required') }}</x-admin::label>
                    <x-admin::switch label="Is This Required?" name="required" value="1" :types="[['value' => 1, 'label' => __('Required')], ['value' => 0, 'label' => __('Optional')]]" />
                </div>
            </div>
            <div class="flex items-center justify-end mt-4">
                <x-admin::primary-button type="submit">
                    {{ __('Save') }}
                </x-admin::primary-button>
            </div>
        </form>
    </x-admin::modal>
    @push('scripts')
        @vite('resources/admin/js/settings/payment-method.js')
    @endpush
</x-admin-app-layout>
