@extends('layouts.app')
@section('title', 'Cài Đặt Thanh Toán')
@section('content')
<div class="w-full space-y-6">
    <div class="rounded-2xlx border border-neutral-200 bg-white shadow-soft">
        <div
            class="px-6 py-4 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between border-b border-neutral-100">
            <div class="flex items-center gap-3">
                <div
                    class="w-10 h-10 rounded-lg bg-gradient-to-br from-slate-700 to-slate-900 flex items-center justify-center">
                    <i class="ri-bank-line text-white text-lg"></i>
                </div>
                <div>
                    <div class="text-lg font-semibold text-neutral-800">Cài Đặt Thanh Toán</div>
                    <div class="text-xs text-neutral-500">Cấu hình thông tin tài khoản ngân hàng nhận thanh toán</div>
                </div>
            </div>
        </div>
        <div class="p-4 sm:p-6">
            <div class="heybank-card">
                <div class="mb-6 pb-6 border-b border-neutral-200">
                    <div class="flex items-center gap-3 mb-4">
                        <div class="rounded-xl border-2 border-dashed border-slate-200 bg-slate-50 w-full p-4">
                            <div class="flex items-center gap-2">
                                <i class="ri-information-line text-slate-600 text-lg"></i>
                                <p class="font-semibold text-slate-800">Cách Setup Cron AutoBank</p>
                            </div>
                            <ul class="list-disc space-y-2 text-sm text-slate-700">
                                <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 mt-4">
                                    <div class="flex items-start gap-2 text-xs">
                                        <span
                                            class="flex-shrink-0 w-5 h-5 rounded-full bg-heybank text-white flex items-center justify-center text-[10px] font-semibold">1</span>
                                        <span class="text-neutral-600"><span class="font-semibold">AAPanel</span> vào <span
                                                class="font-semibold text-heybank">Cron</span> (Sidebar Bên Trái) → <span class="font-semibold text-heybank">Add Task</span></span>
                                    </div>
                                    <div class="flex items-start gap-2 text-xs">
                                        <span
                                            class="flex-shrink-0 w-5 h-5 rounded-full bg-heybank text-white flex items-center justify-center text-[10px] font-semibold">2</span>
                                        <span class="text-neutral-600"><span class="font-semibold">Task type:</span>
                                            <span class="font-semibold text-heybank">Shell Script</span></span>
                                    </div>
                                    <div class="flex items-start gap-2 text-xs">
                                        <span
                                            class="flex-shrink-0 w-5 h-5 rounded-full bg-heybank text-white flex items-center justify-center text-[10px] font-semibold">3</span>
                                        <span class="text-neutral-600"><span class="font-semibold">Task name:</span>
                                            <span class="font-semibold text-heybank">HeyBank Cron AutoBank</span></span>
                                    </div>
                                    <div class="flex items-start gap-2 text-xs">
                                        <span
                                            class="flex-shrink-0 w-5 h-5 rounded-full bg-heybank text-white flex items-center justify-center text-[10px] font-semibold">4</span>
                                        <span class="text-neutral-600"><span class="font-semibold">Execute cycle:</span>
                                            <span class="font-semibold text-heybank">N Second</span> (<span
                                                class="text-heybank">20-30s</span>)</span>
                                    </div>
                                    <div class="flex items-start gap-2 text-xs">
                                        <span
                                            class="flex-shrink-0 w-5 h-5 rounded-full bg-heybank text-white flex items-center justify-center text-[10px] font-semibold">5</span>
                                        <span class="text-neutral-600"><span class="font-semibold">Execute user:</span>
                                            <span class="font-semibold text-heybank">root</span></span>
                                    </div>
                                    <div class="flex items-start gap-2 text-xs">
                                        <span
                                            class="flex-shrink-0 w-5 h-5 rounded-full bg-heybank text-white flex items-center justify-center text-[10px] font-semibold">6</span>
                                        <span class="text-neutral-600"><span class="font-semibold">Script
                                                content:</span> (xem bên
                                            dưới)</span>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <div class="text-xs font-semibold text-neutral-700 mb-2">Script Content:</div>
                                    <div class="relative rounded-md border border-heybank bg-heybank p-3 font-bold">
                                        <code class="block text-xs text-white whitespace-pre-wrap break-all">curl -s https://{{ request()->getHost() }}/api/v1/gateway/checkout/bank > /dev/null 2>&1</code>
                                        <button type="button" data-heybank-copy="curl -s https://{{ request()->getHost() }}/api/v1/gateway/checkout/bank > /dev/null 2>&1" class="absolute top-2 right-2 w-7 h-7 flex items-center justify-center rounded-md bg-white/80 hover:bg-white border border-neutral-200 hover:border-heybank text-neutral-500 hover:text-heybank transition-all shadow-sm">
                                            <i class="ri-file-copy-line text-sm"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="rounded-lg border border-amber-200 bg-amber-50 p-2.5">
                                    <div class="flex items-start gap-2">
                                        <i class="ri-alert-line text-amber-600 text-xs"></i>
                                        <div class="text-xs text-amber-700"><span class="font-semibold">Lưu ý:</span>
                                            Nếu dùng <span class="font-semibold">Cloudflare</span> nhớ <span
                                                class="font-semibold">Allow IP
                                                VPS</span> để cron không bị chặn</div>
                                    </div>
                                </div>
                            </ul>
                        </div>
                    </div>
                </div>
                <form id="admin-payment-form" class="space-y-4">
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <label class="block text-sm">
                            <span class="text-neutral-600 text-xs uppercase font-semibold mb-2 block">Số Tài
                                Khoản</span>
                            <input type="text" name="sotaikhoan" data-max-text="20"
                                class="w-full rounded-lg border border-neutral-200 px-4 py-2.5 text-sm focus:border-heybank focus:ring-0"
                                placeholder="Nhập số tài khoản" value="{{ $payment['sotaikhoan'] ?? '' }}" />
                        </label>
                        <label class="block text-sm">
                            <span class="text-neutral-600 text-xs uppercase font-semibold mb-2 block">Chủ Tài
                                Khoản</span>
                            <input type="text" name="chutaikhoan" data-max-text="50"
                                class="w-full rounded-lg border border-neutral-200 px-4 py-2.5 text-sm focus:border-heybank focus:ring-0"
                                placeholder="Nhập chủ tài khoản" value="{{ $payment['chutaikhoan'] ?? '' }}" />
                        </label>
                    </div>
                    <label class="block text-sm">
                        <span class="text-neutral-600 text-xs uppercase font-semibold mb-2 block">Ngân Hàng</span>
                        <div class="relative">
                            <div class="admin-payment-bank-select-wrapper hidden">
                                <input type="text" name="bank_search"
                                    class="w-full rounded-lg border border-neutral-200 px-4 py-2.5 text-sm focus:border-heybank focus:ring-0 pr-10"
                                    placeholder="Có không giữ mất thì tìm..." autocomplete="off" />
                                <i
                                    class="ri-search-line absolute right-4 top-1/2 -translate-y-1/2 text-neutral-400 pointer-events-none"></i>
                            </div>
                            <div
                                class="admin-payment-selected-bank p-1 rounded-lg border border-neutral-200 bg-neutral-50 cursor-pointer hover:bg-neutral-100 transition-colors">
                                <div class="flex items-center gap-3">
                                    <img class="admin-payment-selected-logo w-[65px] h-[65px] object-contain" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='65' height='65'%3E%3Crect width='65' height='65' fill='%23e5e7eb'/%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.3em' font-family='Arial' font-size='12' fill='%23999'%3EBank%3C/text%3E%3C/svg%3E"
                                        alt="" onerror="this.src='data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'65\' height=\'65\'%3E%3Crect width=\'65\' height=\'65\' fill=\'%23e5e7eb\'/%3E%3Ctext x=\'50%25\' y=\'50%25\' text-anchor=\'middle\' dy=\'.3em\' font-family=\'Arial\' font-size=\'12\' fill=\'%23999\'%3EBank%3C/text%3E%3C/svg%3E'" />
                                    <div class="flex-1">
                                        <div class="text-sm font-semibold text-neutral-800 admin-payment-selected-name">
                                            Chọn ngân hàng</div>
                                        <div class="text-xs text-neutral-500 admin-payment-selected-code"></div>
                                    </div>
                                    <button type="button" class="text-neutral-400 hover:text-neutral-600">
                                        <i class="ri-arrow-drop-down-line fs-24"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="admin-payment-bank-dropdown hidden fixed bg-white border border-neutral-200 rounded-lg shadow-lg max-h-96 overflow-y-auto"
                            style="z-index: 9999;"></div>
                        <input type="hidden" name="code" value="{{ $payment['code'] ?? '' }}" />
                        <input type="hidden" name="nganhang" value="{{ $payment['nganhang'] ?? '' }}" />
                        <input type="hidden" name="logo" value="{{ $payment['logo'] ?? '' }}" />
                    </label>
                    <label class="block text-sm">
                        <span class="text-neutral-600 text-xs uppercase font-semibold mb-2 block">API Get LSGD</span>
                        <div class="relative">
                            <input type="password" name="apibank_url"
                                class="w-full rounded-lg border border-neutral-200 px-4 py-2.5 text-sm focus:border-heybank focus:ring-0"
                                placeholder="Nhập API Get LSGD" value="{{ $payment['apibank_url'] ?? '' }}" />
                            <button type="button" class="absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400"
                                data-toggle-pass><i class="ri-eye-line"></i></button>
                        </div>
                    </label>
                    <div class="flex gap-3 pt-2">
                        <button type="button" data-submit-form="admin-payment-form"
                            class="h-10 inline-flex items-center justify-center gap-2 px-6 rounded-lg bg-gradient-to-r from-slate-700 to-slate-800 text-white shadow-lg shadow-slate-700/30 hover:shadow-slate-700/40 transition-all">
                            <span class="text-sm font-semibold"><i class="ri-check-line mr-1"></i>Lưu Cài Đặt</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection