<x-admin-app-layout>

    <form action="{{ route('admin.settings.withdraw-methods.update', $withdrawMethod) }}"
        class="space-y-4 form-submit-edit" method="POST">
        @csrf
        @method('PUT')
        <div class="white-box">
            <x-admin::page-header title="{{ __('Edit Withdraw 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="{{ $withdrawMethod->image }}" alt="logo light" width="300" height="300" />
                        </div>
                        <input type="text" class="sr-only" value="{{ $withdrawMethod->image }}" name="image"
                            id="image_input" value="{{ old('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" @checked($withdrawMethod->status == 'active') value="active"
                                type="checkbox" />
                            <span class="inner primary"></span>
                        </label>
                    </div>
                    <div class="py-6 flex flex-col gap-4">
                        <x-admin::text-input-group label="{{ __('Gateway Name') }}" name="name" :value="$withdrawMethod->name" />
                        <div class="input-group">
                            <x-admin::label for="currency">{{ __('Currency') }}</x-admin::label>
                            <x-admin::select-option id="withdraw_method_currency" name="currency">
                                @foreach (config('currencies.names') as $key => $currency)
                                    <option value="{{ $key }}" @selected($withdrawMethod->currency == $key)>
                                        {{ $key }}</option>
                                @endforeach
                            </x-admin::select-option>
                            <x-admin::input-error name="currency" />
                        </div>
                        <x-admin::textarea-group label="{{ __('Instructions') }}" name="instructions"
                            :value="$withdrawMethod->instructions"></x-admin::textarea-group>
                    </div>
                </div>
            </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="{{ __('Min') }}" :value="$withdrawMethod->min" />
                        <x-admin::text-input-group name="max" label="{{ __('Max') }}" :value="$withdrawMethod->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="$withdrawMethod->fixed_charge" />
                        <x-admin::text-input-group name="percent_charge" label="Percent Charge" :value="$withdrawMethod->percent_charge" />
                    </div>
                </div>
            </div>
        </div>
        <div class="white-box mb-4">
            <div class="grid grid-cols-2 gap-4 xl:gap-6">
                <div class="col-span-2">
                    <div class="flex justify-between items-center">
                        <label for="name" class="m-text font-medium">{{ __('Generate 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 Field') }}</span>
                        </button>
                    </div>

                    <div x-data="addDynamicField()" x-init="selectedItems = {{ json_encode($withdrawMethod->fields) }};" 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="`fields[${index}][label]`" :value="item.label">
                                    <input type="hidden" :name="`fields[${index}][field_type]`"
                                        :value="item.field_type">
                                    <input type="hidden" :name="`fields[${index}][required]`"
                                        :value="item.required ? 1 : 0">
                                    <input type="hidden" :name="`fields[${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>
            </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  gap-4">
                <x-admin::text-input-group name="Label" label="Label" />

                <div>
                    <x-admin::label for="field_type">{{ __('Field 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 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>
    <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>
                    </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/withdraw-method.js')
    @endpush
</x-admin-app-layout>
