@extends('layouts.master')

@section('styles')
    <style>
        .stat-card-custom {
            border-radius: 12px;
            transition: all 0.25s ease;
            border: 1px solid rgba(0, 0, 0, 0.06);
        }
        .stat-card-custom:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        }
        .channel-avatar {
            width: 42px;
            height: 42px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 15px;
        }
        .form-switch .form-check-input {
            width: 2.8em;
            height: 1.4em;
            cursor: pointer;
        }
        .category-pill {
            font-size: 11px;
            padding: 4px 8px;
            font-weight: 600;
            border-radius: 6px;
        }
    </style>
@endsection

@section('content')

    <div class="page-header-breadcrumb mb-3">
        <div class="d-flex align-items-center justify-content-between flex-wrap mb-3">
            <div>
                <h1 class="page-title fw-bold fs-18 mb-1">Metode Pembayaran Xendit</h1>
                <p class="text-muted mb-0 fs-13">Kelola saluran pembayaran Xendit, limit transaksi minimum & maksimum, biaya admin, serta kebijakan pembebanan biaya ke nasabah.</p>
            </div>
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="javascript:void(0);">Xendit</a></li>
                <li class="breadcrumb-item active" aria-current="page">Metode Pembayaran</li>
            </ol>
        </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show d-flex align-items-center mb-3 shadow-sm" role="alert">
            <i class="ri-checkbox-circle-fill fs-20 me-2 text-success"></i>
            <div class="fs-13">{{ session('success') }}</div>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show d-flex align-items-center mb-3 shadow-sm" role="alert">
            <i class="ri-error-warning-fill fs-20 me-2 text-danger"></i>
            <div class="fs-13">{{ session('error') }}</div>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <div class="card custom-card border-0 mb-3" style="background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);">
        <div class="card-body p-3">
            <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                <div class="d-flex align-items-center">
                    <div class="avatar avatar-md bg-primary-transparent rounded-circle me-3">
                        <i class="ri-settings-4-line fs-20 text-primary"></i>
                    </div>
                    <div>
                        <h6 class="fw-bold mb-1 text-dark fs-14">Pengaturan Global Biaya Admin Nasabah</h6>
                        <p class="text-muted mb-0 fs-12">
                            Pilih apakah biaya admin transaksi dibebankan kepada customer (nasabah) atau ditanggung oleh DBIC (bebas biaya admin untuk nasabah).
                        </p>
                    </div>
                </div>
                <div class="d-flex align-items-center gap-2 flex-wrap">
                    <button type="button" class="btn btn-sm btn-outline-success d-flex align-items-center gap-1 shadow-sm" data-bs-toggle="modal" data-bs-target="#modalBulkCharge">
                        <i class="ri-user-shared-line"></i> Bebankan Semua Biaya ke Customer
                    </button>
                    <button type="button" class="btn btn-sm btn-outline-primary d-flex align-items-center gap-1 shadow-sm" data-bs-toggle="modal" data-bs-target="#modalBulkTurnoff">
                        <i class="ri-gift-line"></i> Turn Off Semua Biaya ke Customer (Gratiskan)
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="row mb-3">
        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-3 mb-xl-0">
            <div class="card custom-card stat-card-custom mb-0 h-100">
                <div class="card-body p-3">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <span class="d-block text-muted fs-11 fw-semibold text-uppercase mb-1">TOTAL METODE PEMBAYARAN</span>
                            <h3 class="mb-0 fw-bold text-dark">{{ number_format($totalMethods) }}</h3>
                            <span class="text-muted fs-11 mt-1 d-block"><i class="ri-bank-card-line me-1"></i>Kanal Xendit terdaftar</span>
                        </div>
                        <div class="avatar avatar-md bg-primary-transparent rounded-circle">
                            <i class="ri-bank-card-2-line fs-20 text-primary"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-3 mb-xl-0">
            <div class="card custom-card stat-card-custom mb-0 h-100">
                <div class="card-body p-3">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <span class="d-block text-muted fs-11 fw-semibold text-uppercase mb-1">METODE AKTIF</span>
                            <h3 class="mb-0 fw-bold text-success">{{ number_format($activeMethods) }}</h3>
                            <span class="text-muted fs-11 mt-1 d-block"><i class="ri-checkbox-circle-line me-1 text-success"></i>Tersedia untuk transaksi</span>
                        </div>
                        <div class="avatar avatar-md bg-success-transparent rounded-circle">
                            <i class="ri-checkbox-circle-line fs-20 text-success"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-3 mb-xl-0">
            <div class="card custom-card stat-card-custom mb-0 h-100">
                <div class="card-body p-3">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <span class="d-block text-muted fs-11 fw-semibold text-uppercase mb-1">DIBEBANKAN KE CUSTOMER</span>
                            <h3 class="mb-0 fw-bold text-warning">{{ number_format($customerBorneMethods) }}</h3>
                            <span class="text-muted fs-11 mt-1 d-block"><i class="ri-user-shared-line me-1 text-warning"></i>Customer membayar fee</span>
                        </div>
                        <div class="avatar avatar-md bg-warning-transparent rounded-circle">
                            <i class="ri-user-received-2-line fs-20 text-warning"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-3 mb-xl-0">
            <div class="card custom-card stat-card-custom mb-0 h-100">
                <div class="card-body p-3">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <span class="d-block text-muted fs-11 fw-semibold text-uppercase mb-1">TURN OFF (DITANGGUNG DBIC)</span>
                            <h3 class="mb-0 fw-bold text-info">{{ number_format($companyBorneMethods) }}</h3>
                            <span class="text-muted fs-11 mt-1 d-block"><i class="ri-gift-line me-1 text-info"></i>Gratis biaya admin customer</span>
                        </div>
                        <div class="avatar avatar-md bg-info-transparent rounded-circle">
                            <i class="ri-shield-check-line fs-20 text-info"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xl-12">
            <div class="card custom-card">
                <div class="card-header justify-content-between border-bottom-0 flex-wrap gap-2">

                    <div class="d-flex align-items-center gap-2 flex-grow-1 flex-wrap">
                        <div class="input-group" style="max-width: 280px;">
                            <span class="input-group-text bg-light border-end-0 text-muted"><i class="ri-search-line"></i></span>
                            <input class="form-control border-start-0" type="search" id="search-input" placeholder="Cari nama atau kode..." aria-label="Search">
                        </div>

                        <select class="form-select" id="filter-category" style="width: auto; min-width: 170px;">
                            <option value="all">Semua Kategori</option>
                            @foreach($categories as $cat)
                                <option value="{{ $cat }}">{{ $cat }}</option>
                            @endforeach
                        </select>

                        <select class="form-select" id="filter-status" style="width: auto; min-width: 140px;">
                            <option value="all">Semua Status</option>
                            <option value="active">Aktif Saja</option>
                            <option value="inactive">Nonaktif Saja</option>
                        </select>

                        <select class="form-select" id="filter-fee-borne" style="width: auto; min-width: 180px;">
                            <option value="all">Semua Kebijakan Biaya</option>
                            <option value="customer">Dibebankan ke Customer</option>
                            <option value="company">Gratis (Ditanggung DBIC)</option>
                        </select>

                        <button type="button" class="btn btn-light btn-icon" id="btn-reset-filters" title="Reset Filter">
                            <i class="ri-refresh-line"></i>
                        </button>
                    </div>

                    <div class="d-flex gap-2 flex-wrap align-items-center">
                        <button type="button" class="btn btn-sm btn-primary d-flex align-items-center gap-1 shadow-sm" data-bs-toggle="modal" data-bs-target="#createMethodModal">
                            <i class="ri-add-line fs-16"></i> Tambah Metode
                        </button>
                    </div>
                </div>

                <div class="card-body">
                    <div class="table-responsive">
                        <table id="table-payment-methods" class="table table-hover text-nowrap w-100 align-middle">
                            <thead class="table-primary">
                                <tr>
                                    <th style="width: 50px;" class="text-center">#</th>
                                    <th>Metode Pembayaran</th>
                                    <th>Kategori</th>
                                    <th>Limit Min - Max Transaksi</th>
                                    <th>Biaya Admin</th>
                                    <th class="text-center">Beban Biaya Customer</th>
                                    <th style="width: 110px;" class="text-center">Status</th>
                                    <th style="width: 90px;" class="text-center">Aksi</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <form id="globalDeleteForm" method="POST" style="display: none;">
        @csrf
        @method('DELETE')
    </form>

    <div class="modal fade" id="createMethodModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <form action="{{ route('xendit.payment-methods.store') }}" method="POST">
                    @csrf
                    <div class="modal-header">
                        <h6 class="modal-title fw-bold d-flex align-items-center gap-2">
                            <i class="ri-add-circle-line text-primary fs-18"></i> Tambah Metode Pembayaran Xendit
                        </h6>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Nama Metode Pembayaran <span class="text-danger">*</span></label>
                                <input type="text" name="name" class="form-control" placeholder="Contoh: BCA Virtual Account" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Kode Saluran (Xendit Code) <span class="text-danger">*</span></label>
                                <input type="text" name="code" class="form-control text-uppercase" placeholder="Contoh: BCA_VA" required>
                                <span class="text-muted fs-11">Kode unik saluran pembayaran di Xendit.</span>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Kategori <span class="text-danger">*</span></label>
                                <select name="category" class="form-select" required>
                                    <option value="Virtual Account">Virtual Account</option>
                                    <option value="E-Wallet">E-Wallet</option>
                                    <option value="QRIS">QRIS</option>
                                    <option value="Cards">Kartu Kredit / Debit</option>
                                    <option value="Retail Outlet">Retail Outlet (Alfamart / Indomaret)</option>
                                    <option value="Direct Debit">Direct Debit</option>
                                </select>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Urutan Tampilan (Sort Order)</label>
                                <input type="number" name="sort_order" class="form-control" value="0" min="0">
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Limit Minimum Transaksi (Rp) <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text bg-light">Rp</span>
                                    <input type="text" inputmode="numeric" name="min_amount" id="create_min_amount" class="form-control rupiah-mask" value="10.000" placeholder="10.000" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Limit Maksimum Transaksi (Rp) <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text bg-light">Rp</span>
                                    <input type="text" inputmode="numeric" name="max_amount" id="create_max_amount" class="form-control rupiah-mask" value="50.000.000" placeholder="50.000.000" required>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <label class="form-label fw-semibold">Tipe Biaya Admin <span class="text-danger">*</span></label>
                                <select name="fee_type" id="create_fee_type" class="form-select" required>
                                    <option value="fixed">Nominal Flat (Rp)</option>
                                    <option value="percentage">Persentase (%)</option>
                                    <option value="fixed_plus_percentage">Flat (Rp) + Persentase (%)</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold">Biaya Flat (Rp)</label>
                                <div class="input-group">
                                    <span class="input-group-text bg-light">Rp</span>
                                    <input type="text" inputmode="numeric" name="fee_flat" id="create_fee_flat" class="form-control rupiah-mask" value="4.000" placeholder="4.000">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold">Biaya Persentase (%)</label>
                                <div class="input-group">
                                    <input type="number" name="fee_percentage" id="create_fee_percentage" class="form-control" value="0.00" min="0" max="100" step="0.01">
                                    <span class="input-group-text bg-light">%</span>
                                </div>
                            </div>

                            <div class="col-12">
                                <label class="form-label fw-semibold">Deskripsi Singkat / Keterangan</label>
                                <textarea name="description" class="form-control" rows="2" placeholder="Petunjuk atau deskripsi untuk aplikasi investor"></textarea>
                            </div>

                            <div class="col-md-6">
                                <div class="card bg-light border p-3">
                                    <div class="form-check form-switch mb-0">
                                        <input class="form-check-input" type="checkbox" role="switch" name="fee_borne_by_customer" id="create_fee_borne" value="1" checked>
                                        <label class="form-check-label fw-semibold text-dark ms-2" for="create_fee_borne">
                                            Bebankan Biaya ke Customer
                                        </label>
                                    </div>
                                    <span class="text-muted fs-11 mt-1 d-block">
                                        Jika dinonaktifkan (turn off), biaya admin akan <strong>ditanggung oleh perusahaan (bebas biaya admin untuk nasabah)</strong>.
                                    </span>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="card bg-light border p-3">
                                    <div class="form-check form-switch mb-0">
                                        <input class="form-check-input" type="checkbox" role="switch" name="is_active" id="create_is_active" value="1" checked>
                                        <label class="form-check-label fw-semibold text-dark ms-2" for="create_is_active">
                                            Aktifkan Metode Ini
                                        </label>
                                    </div>
                                    <span class="text-muted fs-11 mt-1 d-block">
                                        Menentukan apakah saluran pembayaran ini dapat dipilih nasabah saat checkout transaksi.
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-primary d-flex align-items-center gap-1">
                            <i class="ri-save-line"></i> Simpan Metode
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="editMethodModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <form id="editMethodForm" method="POST">
                    @csrf
                    @method('PUT')
                    <div class="modal-header">
                        <h6 class="modal-title fw-bold d-flex align-items-center gap-2">
                            <i class="ri-edit-circle-line text-primary fs-18"></i> Edit Metode Pembayaran Xendit
                        </h6>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Nama Metode Pembayaran <span class="text-danger">*</span></label>
                                <input type="text" name="name" id="edit_name" class="form-control" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Kode Saluran (Xendit Code) <span class="text-danger">*</span></label>
                                <input type="text" name="code" id="edit_code" class="form-control text-uppercase" required>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Kategori <span class="text-danger">*</span></label>
                                <select name="category" id="edit_category" class="form-select" required>
                                    <option value="Virtual Account">Virtual Account</option>
                                    <option value="E-Wallet">E-Wallet</option>
                                    <option value="QRIS">QRIS</option>
                                    <option value="Cards">Kartu Kredit / Debit</option>
                                    <option value="Retail Outlet">Retail Outlet (Alfamart / Indomaret)</option>
                                    <option value="Direct Debit">Direct Debit</option>
                                </select>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Urutan Tampilan (Sort Order)</label>
                                <input type="number" name="sort_order" id="edit_sort_order" class="form-control" min="0">
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Limit Minimum Transaksi (Rp) <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text bg-light">Rp</span>
                                    <input type="text" inputmode="numeric" name="min_amount" id="edit_min_amount" class="form-control rupiah-mask" placeholder="10.000" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Limit Maksimum Transaksi (Rp) <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text bg-light">Rp</span>
                                    <input type="text" inputmode="numeric" name="max_amount" id="edit_max_amount" class="form-control rupiah-mask" placeholder="50.000.000" required>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <label class="form-label fw-semibold">Tipe Biaya Admin <span class="text-danger">*</span></label>
                                <select name="fee_type" id="edit_fee_type" class="form-select" required>
                                    <option value="fixed">Nominal Flat (Rp)</option>
                                    <option value="percentage">Persentase (%)</option>
                                    <option value="fixed_plus_percentage">Flat (Rp) + Persentase (%)</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold">Biaya Flat (Rp)</label>
                                <div class="input-group">
                                    <span class="input-group-text bg-light">Rp</span>
                                    <input type="text" inputmode="numeric" name="fee_flat" id="edit_fee_flat" class="form-control rupiah-mask" placeholder="4.000">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold">Biaya Persentase (%)</label>
                                <div class="input-group">
                                    <input type="number" name="fee_percentage" id="edit_fee_percentage" class="form-control" min="0" max="100" step="0.01">
                                    <span class="input-group-text bg-light">%</span>
                                </div>
                            </div>

                            <div class="col-12">
                                <label class="form-label fw-semibold">Deskripsi Singkat / Keterangan</label>
                                <textarea name="description" id="edit_description" class="form-control" rows="2"></textarea>
                            </div>

                            <div class="col-md-6">
                                <div class="card bg-light border p-3">
                                    <div class="form-check form-switch mb-0">
                                        <input class="form-check-input" type="checkbox" role="switch" name="fee_borne_by_customer" id="edit_fee_borne" value="1">
                                        <label class="form-check-label fw-semibold text-dark ms-2" for="edit_fee_borne">
                                            Bebankan Biaya ke Customer
                                        </label>
                                    </div>
                                    <span class="text-muted fs-11 mt-1 d-block">
                                        Jika tidak dicentang (turn off), biaya ditanggung DBIC (bebas admin bagi nasabah).
                                    </span>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="card bg-light border p-3">
                                    <div class="form-check form-switch mb-0">
                                        <input class="form-check-input" type="checkbox" role="switch" name="is_active" id="edit_is_active" value="1">
                                        <label class="form-check-label fw-semibold text-dark ms-2" for="edit_is_active">
                                            Aktifkan Metode Ini
                                        </label>
                                    </div>
                                    <span class="text-muted fs-11 mt-1 d-block">
                                        Menentukan apakah saluran pembayaran ini aktif di mobile app.
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-primary d-flex align-items-center gap-1">
                            <i class="ri-save-line"></i> Simpan Perubahan
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalBulkCharge" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form action="{{ route('xendit.payment-methods.bulk-customer-fee') }}" method="POST">
                    @csrf
                    <input type="hidden" name="action" value="charge_all">
                    <div class="modal-header">
                        <h6 class="modal-title fw-bold text-success d-flex align-items-center gap-2">
                            <i class="ri-user-shared-line fs-20"></i> Bebankan Semua Biaya ke Customer
                        </h6>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <p class="fs-13 text-dark mb-2">
                            Apakah Anda yakin ingin <strong>mengaktifkan dan membebankan seluruh biaya admin ke customer</strong> pada semua metode pembayaran?
                        </p>
                        <div class="alert alert-warning mb-0 fs-12">
                            <i class="ri-information-line me-1"></i> Setelah tindakan ini, seluruh transaksi di mobile app akan menambahkan biaya admin kanal ke invoice nasabah.
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-success d-flex align-items-center gap-1">
                            <i class="ri-check-line"></i> Ya, Bebankan ke Customer
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalBulkTurnoff" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form action="{{ route('xendit.payment-methods.bulk-customer-fee') }}" method="POST">
                    @csrf
                    <input type="hidden" name="action" value="turnoff_all">
                    <div class="modal-header">
                        <h6 class="modal-title fw-bold text-primary d-flex align-items-center gap-2">
                            <i class="ri-gift-line fs-20"></i> Turn Off Semua Biaya Admin ke Customer
                        </h6>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <p class="fs-13 text-dark mb-2">
                            Apakah Anda yakin ingin <strong>mematikan (turn off) biaya admin ke customer</strong> pada semua metode pembayaran?
                        </p>
                        <div class="alert alert-info mb-0 fs-12">
                            <i class="ri-shield-check-line me-1"></i> Seluruh biaya transaksi Xendit akan <strong>sepenuhnya ditanggung oleh DBIC</strong> sehingga nasabah menikmati layanan transfer & pembayaran tanpa biaya tambahan (Gratis Admin).
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-primary d-flex align-items-center gap-1">
                            <i class="ri-check-line"></i> Ya, Turn Off (Gratiskan Nasabah)
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    @include('layouts.components.datatable-assets')

    <script>
        $(document).ready(function () {

            function getCategoryBadge(cat) {
                switch(cat) {
                    case 'Virtual Account':
                        return `<span class="badge bg-primary-transparent text-primary category-pill"><i class="ri-bank-line me-1"></i>${AppDatatable.escapeHtml(cat)}</span>`;
                    case 'E-Wallet':
                        return `<span class="badge bg-success-transparent text-success category-pill"><i class="ri-wallet-3-line me-1"></i>${AppDatatable.escapeHtml(cat)}</span>`;
                    case 'QRIS':
                        return `<span class="badge bg-warning-transparent text-warning category-pill"><i class="ri-qr-code-line me-1"></i>${AppDatatable.escapeHtml(cat)}</span>`;
                    case 'Cards':
                        return `<span class="badge bg-info-transparent text-info category-pill"><i class="ri-bank-card-line me-1"></i>${AppDatatable.escapeHtml(cat)}</span>`;
                    case 'Retail Outlet':
                        return `<span class="badge bg-purple-transparent text-purple category-pill"><i class="ri-store-2-line me-1"></i>${AppDatatable.escapeHtml(cat)}</span>`;
                    default:
                        return `<span class="badge bg-light text-dark category-pill">${AppDatatable.escapeHtml(cat)}</span>`;
                }
            }

            const table = AppDatatable.init('#table-payment-methods', {
                ajax: {
                    url: '{{ route("xendit.payment-methods.api.list") }}',
                    type: 'GET',
                    data: function (d) {
                        d.search = $('#search-input').val();
                        d.category = $('#filter-category').val();
                        d.status = $('#filter-status').val();
                        d.fee_borne = $('#filter-fee-borne').val();
                    }
                },
                columns: [
                    { data: 'row_num', name: 'row_num', orderable: false, className: 'text-center text-muted fs-12' },
                    {
                        data: 'name',
                        name: 'name',
                        render: function (data, type, row) {
                            return `
                                <div class="d-flex align-items-center">
                                    <div class="avatar avatar-sm bg-light text-primary rounded-circle me-2 fw-bold border">
                                        <i class="ri-bank-card-line fs-14"></i>
                                    </div>
                                    <div>
                                        <span class="fw-semibold text-dark d-block fs-13">${AppDatatable.escapeHtml(data)}</span>
                                        <span class="badge bg-light text-muted border font-monospace fs-10">${AppDatatable.escapeHtml(row.code)}</span>
                                    </div>
                                </div>
                            `;
                        }
                    },
                    {
                        data: 'category',
                        name: 'category',
                        render: function (data) {
                            return getCategoryBadge(data);
                        }
                    },
                    {
                        data: null,
                        name: 'min_amount',
                        render: function (data, type, row) {
                            return `
                                <div>
                                    <div class="fs-12 text-dark"><span class="text-muted fs-11">Min:</span> ${row.min_amount_formatted}</div>
                                    <div class="fs-12 text-muted"><span class="text-muted fs-11">Max:</span> ${row.max_amount_formatted}</div>
                                </div>
                            `;
                        }
                    },
                    {
                        data: 'fee_display',
                        name: 'fee_flat',
                        render: function (data, type, row) {
                            return `<span class="fw-bold text-dark fs-13">${AppDatatable.escapeHtml(data)}</span>`;
                        }
                    },
                    {
                        data: 'fee_borne_by_customer',
                        name: 'fee_borne_by_customer',
                        className: 'text-center',
                        render: function (data, type, row) {
                            const isChecked = data ? 'checked' : '';
                            const labelBadge = data
                                ? `<span class="badge bg-warning-transparent text-warning fs-11"><i class="ri-user-shared-line me-1"></i>Dibebankan ke Customer</span>`
                                : `<span class="badge bg-success-transparent text-success fs-11"><i class="ri-gift-line me-1"></i>Gratis (Ditanggung DBIC)</span>`;

                            return `
                                <div class="d-flex flex-column align-items-center gap-1">
                                    <div class="form-check form-switch mb-0">
                                        <input class="form-check-input toggle-customer-fee-switch" type="checkbox" role="switch"
                                               data-id="${row.id}" data-url="${row.toggle_customer_fee_url}" ${isChecked}
                                               title="Klik untuk turn on/off beban biaya ke customer">
                                    </div>
                                    ${labelBadge}
                                </div>
                            `;
                        }
                    },
                    {
                        data: 'is_active',
                        name: 'is_active',
                        className: 'text-center',
                        render: function (data, type, row) {
                            const isChecked = data ? 'checked' : '';
                            const badge = data
                                ? `<span class="badge bg-success fs-11">Aktif</span>`
                                : `<span class="badge bg-secondary fs-11">Tidak Aktif</span>`;

                            return `
                                <div class="d-flex flex-column align-items-center gap-1">
                                    <div class="form-check form-switch mb-0">
                                        <input class="form-check-input toggle-status-switch" type="checkbox" role="switch"
                                               data-id="${row.id}" data-url="${row.toggle_status_url}" ${isChecked}
                                               title="Klik untuk mengaktifkan / menonaktifkan metode">
                                    </div>
                                    ${badge}
                                </div>
                            `;
                        }
                    },
                    {
                        data: null,
                        name: 'Actions',
                        orderable: false,
                        searchable: false,
                        className: 'text-center',
                        render: function (data, type, row) {
                            const rowJson = encodeURIComponent(JSON.stringify(row));
                            return `
                                <div class="dropdown">
                                    <button class="btn btn-icon btn-sm btn-light border" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                        <i class="ri-more-2-fill"></i>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end shadow-sm">
                                        <li>
                                            <a class="dropdown-item edit-btn" href="javascript:void(0);"
                                               data-row="${rowJson}"
                                               data-bs-toggle="modal" data-bs-target="#editMethodModal">
                                                <i class="ri-edit-line me-2 text-primary"></i>Edit Data
                                            </a>
                                        </li>
                                        <li><hr class="dropdown-divider"></li>
                                        <li>
                                            <a class="dropdown-item text-danger delete-btn" href="javascript:void(0);"
                                               data-url="${row.destroy_url}" data-name="${AppDatatable.escapeHtml(row.name)}">
                                                <i class="ri-delete-bin-line me-2 text-danger"></i>Hapus
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            `;
                        }
                    }
                ]
            });

            AppDatatable.bindSearch(table, '#search-input');

            $('#filter-category, #filter-status, #filter-fee-borne').on('change', function () {
                table.ajax.reload();
            });

            $('#btn-reset-filters').on('click', function () {
                $('#search-input').val('');
                $('#filter-category').val('all');
                $('#filter-status').val('all');
                $('#filter-fee-borne').val('all');
                table.ajax.reload();
            });

            $(document).on('change', '.toggle-status-switch', function () {
                const switchEl = $(this);
                const url = switchEl.data('url');
                const wasChecked = switchEl.is(':checked');

                switchEl.prop('disabled', true);
                $.ajax({
                    url: url,
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}'
                    },
                    success: function (res) {
                        switchEl.prop('disabled', false);
                        table.ajax.reload(null, false);
                    },
                    error: function () {
                        switchEl.prop('disabled', false);
                        switchEl.prop('checked', !wasChecked);
                        alert('Gagal mengubah status metode pembayaran. Silakan coba lagi.');
                    }
                });
            });

            $(document).on('change', '.toggle-customer-fee-switch', function () {
                const switchEl = $(this);
                const url = switchEl.data('url');
                const wasChecked = switchEl.is(':checked');

                switchEl.prop('disabled', true);
                $.ajax({
                    url: url,
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}'
                    },
                    success: function (res) {
                        switchEl.prop('disabled', false);
                        table.ajax.reload(null, false);
                    },
                    error: function () {
                        switchEl.prop('disabled', false);
                        switchEl.prop('checked', !wasChecked);
                        alert('Gagal mengubah pengaturan biaya customer. Silakan coba lagi.');
                    }
                });
            });

            function formatRupiah(val) {
                if (val === null || val === undefined || val === '') return '';
                const num = Math.round(Number(val));
                if (isNaN(num)) {
                    const clean = val.toString().replace(/\D/g, '');
                    return clean ? clean.replace(/\B(?=(\d{3})+(?!\d))/g, '.') : '';
                }
                return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');
            }

            $(document).on('input', '.rupiah-mask', function () {
                const input = this;
                const oldVal = input.value;
                const cursorPos = input.selectionEnd || oldVal.length;

                const digitsBefore = oldVal.substring(0, cursorPos).replace(/\D/g, '').length;

                const clean = oldVal.replace(/\D/g, '');
                const formatted = clean ? clean.replace(/\B(?=(\d{3})+(?!\d))/g, '.') : '';
                input.value = formatted;

                let newPos = 0;
                let countedDigits = 0;
                for (let i = 0; i < formatted.length; i++) {
                    if (/\d/.test(formatted[i])) {
                        countedDigits++;
                    }
                    if (countedDigits === digitsBefore) {
                        newPos = i + 1;
                        break;
                    }
                }
                if (digitsBefore === 0) newPos = 0;
                input.setSelectionRange(newPos, newPos);
            });

            $(document).on('submit', 'form', function () {
                $(this).find('.rupiah-mask').each(function () {
                    const clean = $(this).val().replace(/\D/g, '');
                    $(this).val(clean);
                });
            });

            $(document).on('click', '.edit-btn', function () {
                const rowData = JSON.parse(decodeURIComponent($(this).data('row')));

                $('#editMethodForm').attr('action', rowData.update_url);
                $('#edit_name').val(rowData.name);
                $('#edit_code').val(rowData.code);
                $('#edit_category').val(rowData.category);
                $('#edit_sort_order').val(rowData.sort_order);
                $('#edit_min_amount').val(formatRupiah(rowData.min_amount));
                $('#edit_max_amount').val(formatRupiah(rowData.max_amount));
                $('#edit_fee_type').val(rowData.fee_type);
                $('#edit_fee_flat').val(formatRupiah(rowData.fee_flat));
                $('#edit_fee_percentage').val(rowData.fee_percentage);
                $('#edit_description').val(rowData.description);
                $('#edit_fee_borne').prop('checked', Boolean(rowData.fee_borne_by_customer));
                $('#edit_is_active').prop('checked', Boolean(rowData.is_active));
            });

            $(document).on('click', '.delete-btn', function (e) {
                e.preventDefault();
                const url = $(this).data('url');
                const name = $(this).data('name');
                if (confirm(`Yakin ingin menghapus metode pembayaran "${name}"? Tindakan ini tidak dapat dibatalkan.`)) {
                    const form = $('#globalDeleteForm');
                    form.attr('action', url);
                    form.submit();
                }
            });
        });
    </script>
@endsection