@extends('layouts.app')
@section('title', 'Cài Đặt Hệ Thống')
@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-settings-3-line text-white text-lg"></i>
                </div>
                <div>
                    <div class="text-lg font-semibold text-neutral-800">Cài Đặt Hệ Thống</div>
                    <div class="text-xs text-neutral-500">Tại đây bạn có thể thay đổi theo nhu cầu của mình</div>
                </div>
            </div>
        </div>
        <div class="p-4 sm:p-6">
            <div class="border-b border-neutral-200 mb-6">
                <nav class="flex space-x-1" role="tablist">
                    <button type="button" class="admin-settings-tab active px-4 py-2.5 text-sm font-semibold text-neutral-700 border-b-2 border-transparent hover:text-heybank hover:border-neutral-300 transition-colors" data-tab="info">
                        <i class="ri-information-line mr-2"></i>Cài Đặt Thông Tin
                    </button>
                    <button type="button" class="admin-settings-tab px-4 py-2.5 text-sm font-semibold text-neutral-700 border-b-2 border-transparent hover:text-heybank hover:border-pu-300 transition-colors" data-tab="connection">
                        <i class="ri-links-line mr-2"></i>Cài Đặt Kết Nối
                    </button>
                    <button type="button" class="admin-settings-tab px-4 py-2.5 text-sm font-semibold text-neutral-700 border-b-2 border-transparent hover:text-heybank hover:border-neutral-300 transition-colors" data-tab="prices">
                        <i class="ri-price-tag-3-line mr-2"></i>Cài Đặt Giá Bán
                    </button>
                    <button type="button" class="admin-settings-tab px-4 py-2.5 text-sm font-semibold text-neutral-700 border-b-2 border-transparent hover:text-heybank hover:border-neutral-300 transition-colors" data-tab="security">
                        <i class="ri-shield-check-line mr-2"></i>Cài Đặt Bảo Mật
                    </button>
                </nav>
            </div>
            <div id="admin-settings-tab-info" class="admin-settings-tab-content">
                <div class="rounded-xl border border-neutral-200 bg-gradient-to-br from-neutral-50 to-white p-6">
                    <div class="flex items-center gap-3 mb-5">
                        <div class="admin-settings-icon-3d admin-settings-icon-purple">
                            <i class="ri-information-line text-lg"></i>
                        </div>
                        <div>
                            <div class="text-base font-semibold text-neutral-800">Thông Tin Hệ Thống</div>
                            <div class="text-xs text-neutral-500">Những cài đặt này giúp bạn sửa đổi thông tin trang web</div>
                        </div>
                    </div>
                    <form id="admin-info-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">Tiêu Đề</span>
                                <input type="text" name="title" 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 tiêu đề" value="{{ $settings['title'] ?? '' }}" />
                            </label>
                            <label class="block text-sm">
                                <span class="text-neutral-600 text-xs uppercase font-semibold mb-2 block">Tên Thương Hiệu</span>
                                <input type="text" name="site_name" 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 tên thương hiệu" value="{{ $settings['site_name'] ?? '' }}" />
                            </label>
                        </div>
                        <label class="block text-sm">
                            <span class="text-neutral-600 text-xs uppercase font-semibold mb-2 block">Mô Tả</span>
                            <textarea name="desc" rows="3" 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 mô tả">{{ $settings['desc'] ?? '' }}</textarea>
                        </label>
                        <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">Logo</span>
                                <input type="text" name="favicon" 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 link logo" value="{{ $settings['favicon'] ?? '' }}" />
                            </label>
                            <label class="block text-sm">
                                <span class="text-neutral-600 text-xs uppercase font-semibold mb-2 block">Từ Khoá</span>
                                <input type="text" name="keywords" 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 từ khoá" value="{{ $settings['keywords'] ?? '' }}" />
                            </label>
                        </div>
                        <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">Thumbnail</span>
                                <input type="text" name="thumbnail" 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 link thumbnail" value="{{ $settings['thumbnail'] ?? '' }}" />
                            </label>
                            <label class="block text-sm">
                                <span class="text-neutral-600 text-xs uppercase font-semibold mb-2 block">Navbar Logo</span>
                                <input type="text" name="navbar_logo" 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 link navbar logo" value="{{ $settings['navbar_logo'] ?? '' }}" />
                            </label>
                        </div>
                        <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">Author</span>
                                <input type="text" name="author" 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 author" value="{{ $settings['author'] ?? '' }}" />
                            </label>
                            <label class="block text-sm">
                                <span class="text-neutral-600 text-xs uppercase font-semibold mb-2 block">Telegram</span>
                                <input type="text" name="telegram" 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 telegram" value="{{ $settings['telegram'] ?? '' }}" />
                            </label>
                        </div>
                        <label class="block text-sm">
                            <span class="text-neutral-600 text-xs uppercase font-semibold mb-2 block">Footer</span>
                            <textarea name="footer" rows="1" 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ân trang">{{ $settings['footer'] ?? '' }}</textarea>
                        </label>
                        <label class="block text-sm">
                            <span class="text-neutral-600 text-xs uppercase font-semibold mb-2 block">Download Url</span>
                                <input type="text" name="download_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 link nhóm/channel ở telegram" value="{{ $settings['download_url'] ?? '' }}" />
                        </label>
                        <label class="block text-sm">
                            <span class="text-neutral-600 text-xs uppercase font-semibold mb-2 block">Phí Chuyển Khoản (VND)</span>
                            <div class="relative">
                                <input type="text" name="fee" data-format-number="," data-max-text="7" 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="Nhập phí chuyển khoản" value="{{ isset($settings['fee']) ? FormatNumber($settings['fee'], ',') : '' }}" />
                                <span class="absolute right-4 top-1/2 -translate-y-1/2 text-neutral-400 text-sm">₫</span>
                            </div>
                        </label>
                        <div class="pt-2">
                            <label class="block text-sm">
                                <span class="text-neutral-600 text-xs uppercase font-semibold mb-2 block">Ảnh Slider Trang Chủ</span>
                                <div class="rounded-xl border border-dashed border-neutral-300 bg-neutral-50/70 p-4">
                                    <p class="text-xs text-neutral-500 leading-relaxed">
                                        Nhập tối đa 5 link ảnh, mỗi liên kết bắt đầu với ký tự <code>@</code> và phân tách bằng dấu <code>|</code><br/>
                                        Ví dụ: <code>@https://example.com/banner-1.jpg | @https://example.com/banner-2.jpg</code>
                                    </p>
                                    <textarea name="slider_images_links" rows="4" class="mt-3 w-full rounded-lg border border-neutral-300 px-3 py-2 text-sm focus:border-heybank focus:ring-1 focus:ring-heybank/40" placeholder="@https://example.com/banner-1.jpg | @https://example.com/banner-2.jpg">{{ implode(' | ', array_map(fn($url) => \Illuminate\Support\Str::startsWith($url, '@') ? $url : '@'.$url, (is_array($sliderImages = json_decode($settings['slider_images'] ?? '[]', true)) ? array_values($sliderImages) : []))) }}</textarea>
                                </div>
                            </label>
                        </div>
                        <div class="flex gap-3 pt-2">
                            <button type="button" data-submit-form="admin-info-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 id="admin-settings-tab-connection" class="admin-settings-tab-content hidden">
                <div class="rounded-xl border border-neutral-200 bg-gradient-to-br from-neutral-50 to-white p-6">
                    <div class="flex items-center gap-3 mb-5">
                        <div class="admin-settings-icon-3d admin-settings-icon-blue">
                            <i class="ri-links-line text-lg"></i>
                        </div>
                        <div>
                            <div class="text-base font-semibold text-neutral-800">Tinh Chỉnh Kết Nối</div>
                            <div class="text-xs text-neutral-500">Các cài đặt này giúp bạn kết nối với các dịch vụ bên thứ ba</div>
                        </div>
                    </div>
                    <form id="admin-connection-form" class="space-y-4">
                        <label class="block text-sm">
                            <span class="text-neutral-600 text-xs uppercase font-semibold mb-2 block">Telegram Bot Token</span>
                            <div class="relative">
                            <input type="password" name="bot_token" 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 bot token" value="{{ $settings['bot_token'] ?? '' }}" />
                            <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>
                        <label class="block text-sm">
                            <span class="text-neutral-600 text-xs uppercase font-semibold mb-2 block">Telegram Chat ID</span>
                            <div class="relative">
                            <input type="password" name="chat_id" 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 chat ID" value="{{ $settings['chat_id'] ?? '' }}" />
                            <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-connection-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 id="admin-settings-tab-security" class="admin-settings-tab-content hidden">
                <div class="rounded-xl border border-neutral-200 bg-gradient-to-br from-neutral-50 to-white p-6">
                    <div class="flex items-center gap-3 mb-5">
                        <div class="admin-settings-icon-3d admin-settings-icon-red">
                            <i class="ri-shield-check-line text-lg"></i>
                        </div>
                        <div>
                            <div class="text-base font-semibold text-neutral-800">Cài Đặt Bảo Mật</div>
                            <div class="text-xs text-neutral-500">Những cài đặt này giúp bạn giữ an toàn cho website của mình</div>
                        </div>
                    </div>
                    <form id="admin-security-form" class="space-y-4">
                        <label class="admin-settings-checkbox-wrapper flex items-center gap-3 p-4 rounded-lg border border-neutral-200 bg-neutral-50 cursor-pointer hover:bg-neutral-100 transition-colors">
                            <input type="checkbox" name="maintenance" class="admin-settings-checkbox" {{ (isset($settings['maintenance']) && $settings['maintenance'] == 1) ? 'checked' : '' }} />
                            <div class="flex-1">
                                <span class="text-sm font-semibold text-neutral-800 block">Bật Chế Độ Bảo Trì</span>
                                <span class="text-xs text-neutral-500">Kích hoạt chế độ bảo trì hệ thống</span>
                            </div>
                        </label>
                        <label class="block text-sm">
                            <span class="text-neutral-600 text-xs uppercase font-semibold mb-2 block">Geetest ID</span>
                            <div class="relative">
                                <input type="password" name="geetest-id" 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 Geetest ID" value="{{ $settings['geetest-id'] ?? '' }}" />
                                <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>
                        <label class="block text-sm">
                            <span class="text-neutral-600 text-xs uppercase font-semibold mb-2 block">Geetest Key</span>
                            <div class="relative">
                                <input type="password" name="geetest-key" 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 Geetest Key" value="{{ $settings['geetest-key'] ?? '' }}" />
                                <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-security-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 id="admin-settings-tab-prices" class="admin-settings-tab-content hidden">
                <div class="rounded-xl border border-neutral-200 bg-gradient-to-br from-neutral-50 to-white p-6">
                    <div class="flex items-center gap-3 mb-5">
                        <div class="admin-settings-icon-3d admin-settings-icon-emerald">
                            <i class="ri-price-tag-3-line text-lg"></i>
                        </div>
                        <div>
                            <div class="text-base font-semibold text-neutral-800">Tinh Chỉnh Giá Bán</div>
                            <div class="text-xs text-neutral-500">Vui lòng chỉnh giá hợp lý và cao hơn giá bên site mẹ</div>
                        </div>
                    </div>
                    <form id="admin-prices-form" class="space-y-4">
                        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                            <label class="block text-sm">
                                <span class="text-neutral-600 text-xs uppercase font-semibold mb-2 block">1 Ngày (VND)</span>
                                <div class="relative">
                                    <input type="text" name="1d" data-format-number="," data-max-text="11" 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="0" value="{{ isset($prices['1d']) ? FormatNumber($prices['1d'], ',') : '' }}" required />
                                    <span class="absolute right-4 top-1/2 -translate-y-1/2 text-neutral-400 text-sm">₫</span>
                                </div>
                            </label>
                            <label class="block text-sm">
                                <span class="text-neutral-600 text-xs uppercase font-semibold mb-2 block">3 Ngày (VND)</span>
                                <div class="relative">
                                    <input type="text" name="3d" data-format-number="," data-max-text="11" 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="0" value="{{ isset($prices['3d']) ? FormatNumber($prices['3d'], ',') : '' }}" required />
                                    <span class="absolute right-4 top-1/2 -translate-y-1/2 text-neutral-400 text-sm">₫</span>
                                </div>
                            </label>
                            <label class="block text-sm">
                                <span class="text-neutral-600 text-xs uppercase font-semibold mb-2 block">1 Tuần (VND)</span>
                                <div class="relative">
                                    <input type="text" name="1w" data-format-number="," data-max-text="11" 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="0" value="{{ isset($prices['1w']) ? FormatNumber($prices['1w'], ',') : '' }}" required />
                                    <span class="absolute right-4 top-1/2 -translate-y-1/2 text-neutral-400 text-sm">₫</span>
                                </div>
                            </label>
                            <label class="block text-sm">
                                <span class="text-neutral-600 text-xs uppercase font-semibold mb-2 block">1 Tháng (VND)</span>
                                <div class="relative">
                                    <input type="text" name="1m" data-format-number="," data-max-text="11" 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="0" value="{{ isset($prices['1m']) ? FormatNumber($prices['1m'], ',') : '' }}" required />
                                    <span class="absolute right-4 top-1/2 -translate-y-1/2 text-neutral-400 text-sm">₫</span>
                                </div>
                            </label>
                            <label class="block text-sm">
                                <span class="text-neutral-600 text-xs uppercase font-semibold mb-2 block">3 Tháng (VND)</span>
                                <div class="relative">
                                    <input type="text" name="3m" data-format-number="," data-max-text="11" 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="0" value="{{ isset($prices['3m']) ? FormatNumber($prices['3m'], ',') : '' }}" required />
                                    <span class="absolute right-4 top-1/2 -translate-y-1/2 text-neutral-400 text-sm">₫</span>
                                </div>
                            </label>
                        </div>
                        <div class="flex gap-3 pt-2">
                            <button type="button" data-submit-form="admin-prices-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>
</div>
@endsection