@extends('admin.layout')

@section('content')
<div class="ad-container">
    <div class="ad-header" style="margin-bottom: 24px;">
        <h2 style="font-size: 20px; font-weight: 800; color: var(--text); margin-bottom: 4px;">Cấu hình hệ thống & Liên hệ</h2>
        <p style="font-size: 13px; color: var(--text-muted);">Thay đổi các thông tin liên hệ như Zalo, Facebook, Telegram và cấu hình hoa hồng.</p>
    </div>

    @if(session('success'))
        <div style="background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; padding: 12px 16px; border-radius: 12px; margin-bottom: 20px; font-size: 14px; display: flex; align-items: center; gap: 8px;">
            <i class="fas fa-check-circle"></i> {{ session('success') }}
        </div>
    @endif

    <form action="{{ route('admin.settings.update') }}" method="POST">
        @csrf
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px;">
            
            {{-- Contact Config --}}
            <div class="card" style="padding: 24px;">
                <div style="border-bottom: 1px solid var(--border); padding-bottom: 12px; margin-bottom: 20px;">
                    <h3 style="font-size: 15px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px;">
                        <i class="fas fa-id-card" style="color: var(--accent);"></i> Cấu hình kênh liên hệ
                    </h3>
                </div>
                
                <div style="display: grid; gap: 16px;">
                    <div>
                        <label style="display:block;font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;margin-bottom:6px;">Link Zalo Hỗ Trợ (Admin)</label>
                        <input type="text" name="contact_zalo" value="{{ $settings['contact_zalo'] ?? '' }}" class="ad-input" style="width: 100%;" placeholder="https://zalo.me/...">
                    </div>
                    
                    <div>
                        <label style="display:block;font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;margin-bottom:6px;">Link Nhóm Zalo (Group)</label>
                        <input type="text" name="contact_zalo_group" value="{{ $settings['contact_zalo_group'] ?? '' }}" class="ad-input" style="width: 100%;" placeholder="https://zalo.me/g/...">
                    </div>

                    <div>
                        <label style="display:block;font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;margin-bottom:6px;">Link Facebook Admin</label>
                        <input type="text" name="contact_facebook" value="{{ $settings['contact_facebook'] ?? '' }}" class="ad-input" style="width: 100%;" placeholder="https://facebook.com/...">
                    </div>

                    <div>
                        <label style="display:block;font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;margin-bottom:6px;">Link Telegram Hỗ Trợ / Nhóm</label>
                        <input type="text" name="contact_telegram" value="{{ $settings['contact_telegram'] ?? '' }}" class="ad-input" style="width: 100%;" placeholder="https://t.me/...">
                    </div>
                </div>
            </div>

            {{-- General System Config --}}
            <div class="card" style="padding: 24px; display: flex; flex-direction: column;">
                <div style="border-bottom: 1px solid var(--border); padding-bottom: 12px; margin-bottom: 20px;">
                    <h3 style="font-size: 15px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px;">
                        <i class="fas fa-sliders-h" style="color: var(--accent);"></i> Cấu hình hệ thống & Hoa hồng
                    </h3>
                </div>

                <div style="display: grid; gap: 16px; flex: 1;">
                    <div>
                        <label style="display:block;font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;margin-bottom:6px;">% Hoa hồng giới thiệu (Affiliate)</label>
                        <div style="display: flex; align-items: center; gap: 8px;">
                            <input type="number" name="referral_commission" value="{{ $settings['referral_commission'] ?? '20' }}" class="ad-input" style="width: 120px;" min="0" max="100">
                            <span style="font-size: 13px; font-weight: 700; color: var(--text-muted);">%</span>
                        </div>
                        <p style="font-size: 11px; color: var(--text-muted); margin-top: 4px;">Tỷ lệ phần trăm hoa hồng mặc định cộng cho người giới thiệu khi đơn hàng hoàn thành.</p>
                    </div>

                    <div style="background: var(--bg); padding: 16px; border-radius: 12px; border: 1px dashed var(--border); margin-top: auto;">
                        <h4 style="font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 6px;"><i class="fas fa-info-circle"></i> Hướng dẫn thay đổi</h4>
                        <p style="font-size: 11px; color: var(--text-muted); line-height: 1.5;">
                            Các thông tin liên hệ cấu hình tại trang này sẽ tự động được đồng bộ ra tất cả vị trí hiển thị trên trang chủ, trang liên hệ, nút chat nổi và menu phụ của Locket Gold. Bạn không cần phải chỉnh sửa mã nguồn của trang web.
                        </p>
                    </div>
                </div>
            </div>

        </div>

        {{-- Payment/QR Bank Config --}}
        <div class="card" style="padding: 24px; margin-bottom: 24px;">
            <div style="border-bottom: 1px solid var(--border); padding-bottom: 12px; margin-bottom: 20px;">
                <h3 style="font-size: 15px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px;">
                    <i class="fas fa-qrcode" style="color: var(--accent);"></i> Cấu hình tài khoản nhận tiền (VietQR)
                </h3>
            </div>
            
            <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px;">
                <div>
                    <label style="display:block;font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;margin-bottom:6px;">Ngân hàng nhận tiền</label>
                    <input type="text" name="pay_bank" value="{{ $settings['pay_bank'] ?? 'MBBank' }}" class="ad-input" style="width: 100%;" placeholder="VD: MBBank, VCB, TCB...">
                    <p style="font-size: 10px; color: var(--text-muted); margin-top: 6px; line-height: 1.4;">Tên viết tắt ngân hàng để tạo QR tự động (ví dụ: MBBank, VCB, TCB, ACB, VietinBank...).</p>
                </div>
                
                <div>
                    <label style="display:block;font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;margin-bottom:6px;">Số tài khoản nhận tiền</label>
                    <input type="text" name="pay_acc" value="{{ $settings['pay_acc'] ?? '038888126135888' }}" class="ad-input" style="width: 100%;" placeholder="Nhập số tài khoản...">
                    <p style="font-size: 10px; color: var(--text-muted); margin-top: 6px; line-height: 1.4;">Số tài khoản nhận tiền tương ứng với ngân hàng đã cấu hình.</p>
                </div>

                <div>
                    <label style="display:block;font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;margin-bottom:6px;">Tên chủ tài khoản (Không dấu)</label>
                    <input type="text" name="pay_name" value="{{ $settings['pay_name'] ?? 'PHẠM VŨ LINH' }}" class="ad-input" style="width: 100%;" placeholder="VD: PHAM VU LINH">
                    <p style="font-size: 10px; color: var(--text-muted); margin-top: 6px; line-height: 1.4;">Tên người thụ hưởng viết HOA không dấu (ví dụ: PHAM VU LINH).</p>
                </div>
            </div>
        </div>



        <div style="display: flex; justify-content: flex-end; gap: 12px;">
            <button type="submit" class="btn btn-primary" style="padding: 12px 32px; font-weight: 800; border-radius: 12px; font-size: 13px;">
                <i class="fas fa-save"></i> LƯU CẤU HÌNH HỆ THỐNG
            </button>
        </div>
    </form>

    {{-- MySQL Database Backup --}}
    <div class="card" style="padding: 24px; margin-top: 24px; margin-bottom: 24px;">
        <div style="border-bottom: 1px solid var(--border); padding-bottom: 12px; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;">
            <h3 style="font-size: 15px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px;">
                <i class="fas fa-server" style="color: #2ecc71; font-size: 18px;"></i> Sao lưu Cơ sở dữ liệu MySQL hệ thống
            </h3>
            <div>
                <a href="{{ route('admin.settings.backup_mysql') }}" class="btn btn-primary" style="background: #2ecc71; border-color: #2ecc71; color: white; font-weight: 700; font-size: 11px; padding: 8px 18px; border-radius: 8px; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; transition: all 0.2s; box-shadow: 0 4px 6px rgba(46, 204, 113, 0.1);">
                    <i class="fas fa-download"></i> TẢI BẢN SAO LƯU (.SQL)
                </a>
            </div>
        </div>
        <p style="font-size: 12px; color: var(--text-muted); line-height: 1.6; margin: 0;">
            Chức năng này sẽ tự động trích xuất toàn bộ cấu trúc bảng (schema) và tất cả dữ liệu hiện tại của hệ thống thành một tệp tin SQL. Bạn có thể sử dụng tệp tin này để khôi phục lại dữ liệu bất cứ lúc nào qua phpMyAdmin hoặc các công cụ quản trị MySQL khác.
        </p>
    </div>

</div>

@endsection