@extends('layouts.master')

@section('styles')
    <style>
        .kyc-stat-card {
            border-radius: 10px;
            transition: all 0.25s ease;
            cursor: pointer;
        }
        .kyc-stat-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        }
        .kyc-stat-card.active-filter {
            outline: 2px solid var(--primary-color, #2b5240);
        }
        .badge-kyc-pending {
            background-color: #fef3c7;
            color: #d97706;
            border: 1px solid #fde68a;
            font-weight: 600;
            padding: 5px 10px;
            border-radius: 6px;
        }
        .badge-kyc-approved {
            background-color: #dcfce7;
            color: #15803d;
            border: 1px solid #bbf7d0;
            font-weight: 600;
            padding: 5px 10px;
            border-radius: 6px;
        }
        .badge-kyc-rejected {
            background-color: #fee2e2;
            color: #b91c1c;
            border: 1px solid #fecaca;
            font-weight: 600;
            padding: 5px 10px;
            border-radius: 6px;
        }
        .badge-kyc-unsubmitted {
            background-color: #f1f5f9;
            color: #64748b;
            border: 1px solid #e2e8f0;
            font-weight: 600;
            padding: 5px 10px;
            border-radius: 6px;
        }
        .doc-check-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            font-size: 13px;
        }
        .doc-check-ok {
            background-color: #dcfce7;
            color: #16a34a;
        }
        .doc-check-empty {
            background-color: #f1f5f9;
            color: #94a3b8;
        }
    </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">Kelola Verifikasi KYC</h1>
                <p class="text-muted mb-0 fs-13">Tinjau, setujui, atau tolak permohonan verifikasi identitas (Know Your Customer) pengguna DBIC.</p>
            </div>
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="javascript:void(0);">User Management</a></li>
                <li class="breadcrumb-item active" aria-current="page">Kelola KYC</li>
            </ol>
        </div>

        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show d-flex align-items-center" role="alert">
                <i class="ri-checkbox-circle-line fs-18 me-2"></i>
                <div>{{ 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" role="alert">
                <i class="ri-error-warning-line fs-18 me-2"></i>
                <div>{{ session('error') }}</div>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <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 kyc-stat-card mb-0 h-100" onclick="filterByCardStatus('1')" id="card-filter-1">
                    <div class="card-body p-3">
                        <div class="d-flex align-items-center justify-content-between">
                            <div>
                                <span class="d-block text-muted fs-12 fw-medium mb-1">MENUNGGU VERIFIKASI</span>
                                <h3 class="mb-0 fw-bold text-warning">{{ number_format($pendingCount) }}</h3>
                                <span class="text-muted fs-11 mt-1 d-block"><i class="ri-time-line me-1"></i>Perlu ditinjau segera</span>
                            </div>
                            <div class="avatar avatar-md bg-warning-transparent rounded-circle">
                                <i class="ri-hourglass-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 kyc-stat-card mb-0 h-100" onclick="filterByCardStatus('2')" id="card-filter-2">
                    <div class="card-body p-3">
                        <div class="d-flex align-items-center justify-content-between">
                            <div>
                                <span class="d-block text-muted fs-12 fw-medium mb-1">TERVERIFIKASI</span>
                                <h3 class="mb-0 fw-bold text-success">{{ number_format($approvedCount) }}</h3>
                                <span class="text-muted fs-11 mt-1 d-block"><i class="ri-shield-check-line me-1"></i>Akun aktif & valid</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 kyc-stat-card mb-0 h-100" onclick="filterByCardStatus('3')" id="card-filter-3">
                    <div class="card-body p-3">
                        <div class="d-flex align-items-center justify-content-between">
                            <div>
                                <span class="d-block text-muted fs-12 fw-medium mb-1">DITOLAK</span>
                                <h3 class="mb-0 fw-bold text-danger">{{ number_format($rejectedCount) }}</h3>
                                <span class="text-muted fs-11 mt-1 d-block"><i class="ri-close-circle-line me-1"></i>Dokumen tidak sesuai</span>
                            </div>
                            <div class="avatar avatar-md bg-danger-transparent rounded-circle">
                                <i class="ri-error-warning-line fs-20 text-danger"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12">
                <div class="card custom-card kyc-stat-card mb-0 h-100" onclick="filterByCardStatus('0')" id="card-filter-0">
                    <div class="card-body p-3">
                        <div class="d-flex align-items-center justify-content-between">
                            <div>
                                <span class="d-block text-muted fs-12 fw-medium mb-1">BELUM MENGAJUKAN</span>
                                <h3 class="mb-0 fw-bold text-secondary">{{ number_format($unsubmittedCount) }}</h3>
                                <span class="text-muted fs-11 mt-1 d-block"><i class="ri-user-line me-1"></i>Dari total {{ number_format($totalUsers) }} akun</span>
                            </div>
                            <div class="avatar avatar-md bg-secondary-transparent rounded-circle">
                                <i class="ri-user-unfollow-line fs-20 text-secondary"></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" style="max-width: 380px;">
                            <div class="input-group">
                                <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="kyc-search-input" placeholder="Cari nama, email, NIK, no HP..." aria-label="Search">
                            </div>
                        </div>

                        <div class="d-flex gap-2 flex-wrap align-items-center">

                            <div>
                                <select class="form-select form-select-sm" id="kyc-status-filter" style="min-width: 170px;">
                                    <option value="all">Semua Status KYC</option>
                                    <option value="1">Menunggu Verifikasi</option>
                                    <option value="2">Terverifikasi</option>
                                    <option value="3">Ditolak</option>
                                    <option value="0">Belum Mengajukan</option>
                                </select>
                            </div>

                            <button type="button" class="btn btn-sm btn-outline-secondary" id="btn-reset-filter" title="Reset Filter">
                                <i class="ri-refresh-line me-1"></i>Reset
                            </button>
                        </div>
                    </div>

                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="table-kyc" class="table table-hover text-nowrap w-100 align-middle">
                                <thead class="table-success">
                                    <tr>
                                        <th style="width: 50px;">ID</th>
                                        <th>Pengguna</th>
                                        <th>Data KTP & NIK</th>
                                        <th>Kelengkapan Data</th>
                                        <th>Status KYC</th>
                                        <th>Tanggal Pengajuan</th>
                                        <th style="width: 100px;" class="text-center">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalQuickReject" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form id="formQuickReject" method="POST">
                    @csrf
                    <div class="modal-header">
                        <h6 class="modal-title fw-bold text-danger"><i class="ri-error-warning-line me-1"></i>Tolak Pengajuan KYC</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-muted mb-2">
                            Anda akan menolak pengajuan KYC untuk pengguna: <strong id="reject-user-name" class="text-dark"></strong>.
                        </p>
                        <div class="mb-2">
                            <label class="form-label fs-12 text-muted mb-1">Pilih Alasan Cepat:</label>
                            <div class="d-flex flex-wrap gap-1 mb-2">
                                <button type="button" class="btn btn-xs btn-outline-danger" onclick="setQuickRejectReason('Nama pemilik rekening bank tidak sesuai dengan nama pada identitas KTP.')">
                                    <i class="ri-bank-card-line me-1"></i>Nama Rekening Beda
                                </button>
                                <button type="button" class="btn btn-xs btn-outline-secondary" onclick="setQuickRejectReason('Foto KTP buram atau tidak terbaca dengan jelas. Mohon unggah ulang foto KTP yang lebih terang dan jelas.')">
                                    <i class="ri-id-card-line me-1"></i>KTP Buram
                                </button>
                                <button type="button" class="btn btn-xs btn-outline-secondary" onclick="setQuickRejectReason('Foto selfie tidak jelas atau wajah terpotong. Mohon ambil foto selfie ulang di ruangan yang cukup terang.')">
                                    <i class="ri-user-smile-line me-1"></i>Selfie Buram
                                </button>
                                <button type="button" class="btn btn-xs btn-outline-secondary" onclick="setQuickRejectReason('Nomor Induk Kependudukan (NIK) tidak sesuai dengan foto fisik KTP.')">
                                    <i class="ri-error-warning-line me-1"></i>NIK Tidak Cocok
                                </button>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label fs-13 fw-semibold">Alasan Penolakan <span class="text-danger">*</span></label>
                            <textarea name="reason" id="reject-reason" class="form-control" rows="3" placeholder="Contoh: Nama pemilik rekening bank tidak sesuai dengan identitas KTP..." required></textarea>
                            <div class="form-text fs-11">Alasan ini akan menjadi catatan internal dan feedback untuk pengguna memperbaiki datanya.</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-danger"><i class="ri-close-circle-line me-1"></i>Konfirmasi Tolak</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection

@section('scripts')

    <script>
        let kycDataTable;

        $(document).ready(function () {
            kycDataTable = $('#table-kyc').DataTable({
                processing: true,
                serverSide: true,
                searching: false,
                paging: true,
                lengthChange: true,
                pageLength: 10,
                stateSave: true,
                stateDuration: 7200,
                stateSaveParams: function (settings, data) {
                    data.search_input = $('#kyc-search-input').val();
                    data.status_kyc = $('#kyc-status-filter').val();
                },
                stateLoadParams: function (settings, data) {
                    if (data.search_input !== undefined) $('#kyc-search-input').val(data.search_input);
                    if (data.status_kyc !== undefined) {
                        $('#kyc-status-filter').val(data.status_kyc);
                        updateCardActiveState(data.status_kyc);
                    }
                },
                drawCallback: function (settings) {
                    const api = this.api();
                    const info = api.page.info();
                    if (info && info.pages > 0 && info.page >= info.pages) {
                        api.page('previous').draw('page');
                    }
                },
                ajax: {
                    url: '{{ route("user-management.api.kyc") }}',
                    type: 'GET',
                    data: function (d) {
                        return {
                            page: (d.start / d.length) + 1,
                            page_size: d.length,
                            search: $('#kyc-search-input').val(),
                            status_kyc: $('#kyc-status-filter').val()
                        };
                    },
                    dataSrc: function (json) {
                        json.recordsTotal = json.meta ? json.meta.total : 0;
                        json.recordsFiltered = json.meta ? json.meta.total : 0;
                        return json.data || [];
                    }
                },
                columns: [
                    { data: 'id', name: 'id' },
                    {
                        data: null,
                        name: 'user',
                        render: function (data, type, row) {
                            return `
                                <div class="d-flex align-items-center">
                                    <div class="avatar avatar-md me-2 avatar-rounded bg-primary-transparent text-primary fw-bold">
                                        ${(row.name ? row.name.charAt(0).toUpperCase() : 'U')}
                                    </div>
                                    <div>
                                        <div class="fw-bold text-dark fs-13">${row.name}</div>
                                        <div class="text-muted fs-11">${row.email}</div>
                                        <div class="text-muted fs-11"><i class="ri-phone-line me-1"></i>${row.phone}</div>
                                    </div>
                                </div>
                            `;
                        }
                    },
                    {
                        data: null,
                        name: 'ktp',
                        render: function (data, type, row) {
                            let matchBadge = '';
                            if (row.name_match) {
                                if (row.name_match.status === 'MATCH') {
                                    matchBadge = `<div class="mt-1"><span class="badge bg-success-transparent text-success fs-10 px-1 py-0"><i class="ri-check-line me-1"></i>Rekening Sesuai</span></div>`;
                                } else if (row.name_match.status === 'SIMILAR') {
                                    matchBadge = `<div class="mt-1"><span class="badge bg-warning-transparent text-warning fs-10 px-1 py-0" title="${row.name_match.ktp_name} vs ${row.name_match.bank_name} (${row.name_match.match_score}%)"><i class="ri-alert-line me-1"></i>Rekening Mirip (${row.name_match.match_score}%)</span></div>`;
                                } else if (row.name_match.status === 'MISMATCH') {
                                    matchBadge = `<div class="mt-1"><span class="badge bg-danger text-white fs-10 px-2 py-0 fw-bold shadow-xs" title="KTP: ${row.name_match.ktp_name} | Rekening: ${row.name_match.bank_name}"><i class="ri-error-warning-fill me-1"></i>Rekening Beda!</span></div>`;
                                }
                            }

                            if (row.nik && row.nik !== '-') {
                                return `
                                    <div>
                                        <span class="fw-semibold text-dark font-monospace fs-12">${row.nik}</span>
                                        <div class="text-muted fs-11">${row.full_name}</div>
                                        ${matchBadge}
                                    </div>
                                `;
                            }
                            return `
                                <div>
                                    <span class="text-muted fs-12 fst-italic">Belum mengisi KTP</span>
                                    ${matchBadge}
                                </div>
                            `;
                        }
                    },
                    {
                        data: null,
                        name: 'completeness',
                        render: function (data, type, row) {
                            const cardBadge = row.has_card
                                ? `<span class="badge bg-success-transparent text-success me-1"><i class="ri-check-line"></i> KTP</span>`
                                : `<span class="badge bg-light text-muted me-1">KTP -</span>`;
                            const faceBadge = row.has_face
                                ? `<span class="badge bg-success-transparent text-success me-1"><i class="ri-check-line"></i> Selfie</span>`
                                : `<span class="badge bg-light text-muted me-1">Selfie -</span>`;

                            let progressColor = 'bg-secondary';
                            if (row.completion_pct >= 100) progressColor = 'bg-success';
                            else if (row.completion_pct >= 60) progressColor = 'bg-warning';

                            return `
                                <div style="min-width: 140px;">
                                    <div class="d-flex align-items-center justify-content-between mb-1">
                                        <span class="fs-11 fw-medium text-muted">${row.steps_completed}/5 Bagian</span>
                                        <span class="fs-11 fw-bold text-dark">${row.completion_pct}%</span>
                                    </div>
                                    <div class="progress progress-xs mb-2">
                                        <div class="progress-bar ${progressColor}" role="progressbar" style="width: ${row.completion_pct}%"></div>
                                    </div>
                                    <div class="d-flex align-items-center">
                                        ${cardBadge}
                                        ${faceBadge}
                                    </div>
                                </div>
                            `;
                        }
                    },
                    {
                        data: null,
                        name: 'status_kyc',
                        render: function (data, type, row) {
                            if (row.status_kyc === 1) {
                                return `
                                    <div>
                                        <span class="badge-kyc-pending"><i class="ri-time-line me-1"></i>Menunggu</span>
                                    </div>
                                `;
                            } else if (row.status_kyc === 2) {
                                return `
                                    <div>
                                        <span class="badge-kyc-approved"><i class="ri-checkbox-circle-line me-1"></i>Terverifikasi</span>
                                    </div>
                                `;
                            } else if (row.status_kyc === 3) {
                                return `
                                    <div>
                                        <span class="badge-kyc-rejected"><i class="ri-close-circle-line me-1"></i>Ditolak</span>
                                        ${row.kyc_notes ? `<div class="text-danger fs-10 mt-1 text-truncate" style="max-width: 160px;" title="${row.kyc_notes}">${row.kyc_notes}</div>` : ''}
                                    </div>
                                `;
                            } else {
                                return `<span class="badge-kyc-unsubmitted">Belum Mengajukan</span>`;
                            }
                        }
                    },
                    {
                        data: 'updated_at_formatted',
                        name: 'updated_at',
                        render: function (data, type, row) {
                            return `<span class="fs-12 text-muted">${data}</span>`;
                        }
                    },
                    {
                        data: null,
                        name: 'actions',
                        orderable: false,
                        render: function (data, type, row) {
                            let actionBtns = `
                                <div class="d-flex align-items-center justify-content-center gap-1">
                                    <a href="${row.show_url}" class="btn btn-sm btn-primary-light" title="Tinjau Detail KYC">
                                        <i class="ri-eye-line me-1"></i>Review
                                    </a>
                                    <div class="dropdown">
                                        <button class="btn btn-sm btn-icon btn-light" 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" href="${row.show_url}">
                                                    <i class="ri-file-user-line me-2 text-primary"></i>Detail Lengkap
                                                </a>
                                            </li>
                            `;

                            if (row.status_kyc === 1) {
                                actionBtns += `
                                    <li>
                                        <form action="/user-management/kyc/${row.id}/approve" method="POST" onsubmit="return confirm('Apakah Anda yakin ingin menyetujui KYC pengguna ${row.name}?');">
                                            @csrf
                                            <button type="submit" class="dropdown-item text-success">
                                                <i class="ri-check-line me-2"></i>Setujui KYC
                                            </button>
                                        </form>
                                    </li>
                                    <li>
                                        <button type="button" class="dropdown-item text-danger" onclick="openQuickRejectModal(${row.id}, '${row.name}')">
                                            <i class="ri-close-line me-2"></i>Tolak KYC
                                        </button>
                                    </li>
                                `;
                            } else if (row.status_kyc === 3) {
                                actionBtns += `
                                    <li>
                                        <span class="dropdown-item text-muted disabled fs-11" title="Pengajuan telah ditolak. Menunggu pengguna memperbaiki dan mengajukan ulang">
                                            <i class="ri-time-line me-2"></i>Menunggu Aksi Pengguna
                                        </span>
                                    </li>
                                `;
                            } else if (row.status_kyc === 2) {
                                actionBtns += `
                                    <li>
                                        <form action="/user-management/kyc/${row.id}/reset" method="POST" onsubmit="return confirm('Kembalikan status KYC ${row.name} ke Menunggu?');">
                                            @csrf
                                            <input type="hidden" name="status" value="1">
                                            <button type="submit" class="dropdown-item text-muted">
                                                <i class="ri-restart-line me-2"></i>Reset ke Menunggu
                                            </button>
                                        </form>
                                    </li>
                                `;
                            }

                            actionBtns += `
                                        </ul>
                                    </div>
                                </div>
                            `;
                            return actionBtns;
                        }
                    }
                ],
                order: [[0, 'desc']],
                dom: "<'row'<'col-12'tr>>" +
                     "<'row align-items-center mt-3 pt-3 border-top g-2'<'col-sm-12 col-md-6 d-flex align-items-center gap-2 justify-content-sm-start justify-content-center'l i><'col-sm-12 col-md-6 d-flex justify-content-sm-end justify-content-center'p>>",
                language: {
                    processing: '<div class="spinner-border text-primary spinner-border-sm" role="status"><span class="visually-hidden">Memuat...</span></div> <span class="ms-1 text-muted fs-12">Memuat data...</span>',
                    lengthMenu: 'Tampilkan _MENU_ entri',
                    emptyTable: 'Tidak ada data KYC ditemukan',
                    zeroRecords: 'Tidak ada data pengguna yang cocok dengan pencarian',
                    info: 'Menampilkan _START_ sampai _END_ dari _TOTAL_ data',
                    infoEmpty: 'Menampilkan 0 sampai 0 dari 0 data',
                    infoFiltered: '(disaring dari _MAX_ total data)',
                    paginate: {
                        first: '<i class="ri-skip-back-line"></i>',
                        last: '<i class="ri-skip-forward-line"></i>',
                        next: '<i class="ri-arrow-right-s-line"></i>',
                        previous: '<i class="ri-arrow-left-s-line"></i>'
                    }
                }
            });

            let searchTimeout;
            $('#kyc-search-input').on('keyup', function () {
                clearTimeout(searchTimeout);
                searchTimeout = setTimeout(function () {
                    kycDataTable.page(0).ajax.reload();
                }, 400);
            });

            $('#kyc-status-filter').on('change', function () {
                updateCardActiveState($(this).val());
                kycDataTable.page(0).ajax.reload();
            });

            $('#btn-reset-filter').on('click', function () {
                $('#kyc-search-input').val('');
                $('#kyc-status-filter').val('all');
                $('.kyc-stat-card').removeClass('active-filter');
                kycDataTable.state.clear();
                kycDataTable.page(0).ajax.reload();
            });
        });

        function filterByCardStatus(status) {
            $('#kyc-status-filter').val(status);
            updateCardActiveState(status);
            kycDataTable.page(0).ajax.reload();
        }

        function updateCardActiveState(status) {
            $('.kyc-stat-card').removeClass('active-filter');
            if (status !== 'all') {
                $(`#card-filter-${status}`).addClass('active-filter');
            }
        }

        function openQuickRejectModal(userId, userName) {
            $('#reject-user-name').text(userName);
            $('#reject-reason').val('');
            $('#formQuickReject').attr('action', `/user-management/kyc/${userId}/reject`);
            const modal = new bootstrap.Modal(document.getElementById('modalQuickReject'));
            modal.show();
        }

        function setQuickRejectReason(reasonText) {
            $('#reject-reason').val(reasonText).focus();
        }
    </script>
@endsection