@extends('layouts.master')

@section('styles')
@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">Daftar Pengguna</h1>
                <p class="text-muted mb-0 fs-13">Kelola seluruh data akun pengguna dan status verifikasi KYC investor 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">Pengguna</li>
            </ol>
        </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: 360px;">
                            <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="search-input" placeholder="Cari nama, email, 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="user-status-filter" style="min-width: 175px;">
                                    <option value="all">Semua Status Akun</option>
                                    <option value="1">Aktif</option>
                                    <option value="0">Banned</option>
                                </select>
                            </div>

                            <div>
                                <select class="form-select form-select-sm" id="kyc-status-filter" style="min-width: 175px;">
                                    <option value="all">Semua Status KYC</option>
                                    <option value="1">Menunggu</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 class="dropdown">
                                <button class="btn btn-sm btn-primary-light dropdown-toggle" type="button"
                                        id="dropdownExport" data-bs-toggle="dropdown" aria-expanded="false">
                                    <i class="ri-upload-2-line me-1"></i>Export
                                </button>
                                <ul class="dropdown-menu dropdown-menu-end shadow-sm" aria-labelledby="dropdownExport">
                                    <li><a class="dropdown-item" href="javascript:void(0);" id="btn-export-excel"><i class="bi bi-file-earmark-excel me-2 text-success"></i>Excel</a></li>
                                    <li><a class="dropdown-item" href="javascript:void(0);" id="btn-export-csv"><i class="bi bi-file-earmark-text me-2 text-info"></i>CSV</a></li>
                                    <li><a class="dropdown-item" href="javascript:void(0);" id="btn-export-pdf"><i class="bi bi-filetype-pdf me-2 text-danger"></i>PDF</a></li>
                                    <li><a class="dropdown-item" href="javascript:void(0);" id="btn-export-print"><i class="bi bi-printer me-2 text-secondary"></i>Print</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="table-users" class="table table-hover text-nowrap w-100 align-middle">
                                <thead class="table-success">
                                    <tr>
                                        <th style="width: 60px;">User ID</th>
                                        <th>Pengguna</th>
                                        <th>Kontak / No HP</th>
                                        <th>Total Saldo</th>
                                        <th>Status Akun</th>
                                        <th>Status KYC</th>
                                        <th>Tanggal Daftar</th>
                                        <th style="width: 80px;" class="text-center">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')

    <script src="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.print.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.6/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.html5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>

    <script>
        let userDataTable;

        function escapeHtml(text) {
            if (!text) return '';
            const map = {
                '&': '&amp;',
                '<': '&lt;',
                '>': '&gt;',
                '"': '&quot;',
                "'": '&#039;'
            };
            return text.toString().replace(/[&<>"']/g, function(m) { return map[m]; });
        }

        $(document).ready(function () {
            userDataTable = $('#table-users').DataTable({
                processing: true,
                serverSide: true,
                searching: false,
                paging: true,
                lengthChange: true,
                pageLength: 10,
                stateSave: true,
                stateDuration: 7200,
                stateSaveParams: function (settings, data) {
                    data.search_input = $('#search-input').val();
                    data.status_kyc = $('#kyc-status-filter').val();
                    data.status = $('#user-status-filter').val();
                },
                stateLoadParams: function (settings, data) {
                    if (data.search_input !== undefined) $('#search-input').val(data.search_input);
                    if (data.status_kyc !== undefined) $('#kyc-status-filter').val(data.status_kyc);
                    if (data.status !== undefined) $('#user-status-filter').val(data.status);
                },
                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.users") }}',
                    type: 'GET',
                    data: function (d) {
                        return {
                            page: (d.start / d.length) + 1,
                            page_size: d.length,
                            search: $('#search-input').val(),
                            status_kyc: $('#kyc-status-filter').val(),
                            status: $('#user-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',
                        render: function(data) {
                            return `<a href="/user-management/list-user/${data}" class="badge bg-light text-primary border font-monospace text-decoration-none" title="Lihat Detail"><i class="ri-search-line me-1"></i>#${data}</a>`;
                        }
                    },
                    {
                        data: null,
                        name: 'name',
                        searchable: false,
                        render: function (data, type, row) {
                            const initial = row.name ? escapeHtml(row.name.charAt(0).toUpperCase()) : 'U';
                            const userName = escapeHtml(row.name || 'Pengguna');
                            const userEmail = escapeHtml(row.email || '-');
                            return `
                                <div class="d-flex align-items-center">
                                    <a href="/user-management/list-user/${row.id}" class="avatar avatar-md me-2 avatar-rounded bg-primary-transparent text-primary fw-bold fs-14 text-decoration-none">
                                        ${initial}
                                    </a>
                                    <div>
                                        <a href="/user-management/list-user/${row.id}" class="fw-semibold text-dark fs-13 text-decoration-none d-block lh-sm mb-1 text-primary-hover">${userName}</a>
                                        <div class="text-muted fs-11">${userEmail}</div>
                                    </div>
                                </div>
                            `;
                        }
                    },
                    {
                        data: null,
                        name: 'phone',
                        searchable: false,
                        render: function (data, type, row) {
                            if (!row.phone) return '<span class="text-muted fs-12">-</span>';
                            const phoneCode = escapeHtml(row.country_code || '+62');
                            const phoneNumber = escapeHtml(row.phone);
                            return `
                                <span class="fs-12 text-muted font-monospace">
                                    <i class="ri-phone-line me-1 text-primary"></i>${phoneCode} ${phoneNumber}
                                </span>
                            `;
                        }
                    },
                    {
                        data: null,
                        name: 'balance',
                        render: function (data, type, row) {
                            const formatted = row.formatted_total_balance || '0';
                            return `<span class="fw-bold text-success fs-13 font-monospace">Rp ${formatted}</span>`;
                        }
                    },
                    {
                        data: null,
                        name: 'status',
                        searchable: false,
                        render: function (data, type, row) {
                            return row.status === 1
                                ? `<span class="badge bg-success-transparent text-success px-2 py-1 fs-11"><i class="ri-checkbox-circle-line me-1"></i>Aktif</span>`
                                : `<span class="badge bg-danger-transparent text-danger px-2 py-1 fs-11"><i class="ri-close-circle-line me-1"></i>Banned</span>`;
                        }
                    },
                    {
                        data: null,
                        name: 'status_kyc',
                        searchable: false,
                        render: function (data, type, row) {
                            if (row.status_kyc === 1) {
                                return `<span class="badge bg-warning-transparent text-warning px-2 py-1 fs-11"><i class="ri-time-line me-1"></i>Menunggu</span>`;
                            } else if (row.status_kyc === 2) {
                                return `<span class="badge bg-success-transparent text-success px-2 py-1 fs-11"><i class="ri-shield-check-line me-1"></i>Terverifikasi</span>`;
                            } else if (row.status_kyc === 3) {
                                return `<span class="badge bg-danger-transparent text-danger px-2 py-1 fs-11"><i class="ri-close-circle-line me-1"></i>Ditolak</span>`;
                            } else {
                                return `<span class="badge bg-light text-muted px-2 py-1 fs-11"><i class="ri-user-unfollow-line me-1"></i>Belum</span>`;
                            }
                        }
                    },
                    {
                        data: 'created_at_formatted',
                        name: 'created_at',
                        render: function(data, type, row) {
                            return `<span class="fs-12 text-muted">${data || row.created_at || '-'}</span>`;
                        }
                    },
                    {
                        data: null,
                        name: 'Actions',
                        orderable: false,
                        searchable: false,
                        className: 'text-center',
                        render: function (data, type, row) {
                            return `
                                <div class="dropdown">
                                    <button class="btn btn-icon btn-sm btn-light border" type="button" data-bs-toggle="dropdown" aria-expanded="false" title="Menu Aksi">
                                        <i class="ri-more-2-fill"></i>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end shadow-sm">
                                        <li>
                                            <a class="dropdown-item fw-semibold" href="/user-management/list-user/${row.id}">
                                                <i class="ri-user-search-line me-2 text-primary"></i>Detail Pengguna & Investasi
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="/user-management/kyc/${row.id}">
                                                <i class="ri-shield-user-line me-2 text-info"></i>Review KYC
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            `;
                        }
                    }
                ],
                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>>",
                buttons: [
                    { extend: 'excel', className: 'd-none', exportOptions: { columns: [0, 1, 2, 3, 4, 5] } },
                    { extend: 'csv', className: 'd-none', exportOptions: { columns: [0, 1, 2, 3, 4, 5] } },
                    { extend: 'pdf', className: 'd-none', exportOptions: { columns: [0, 1, 2, 3, 4, 5] } },
                    { extend: 'print', className: 'd-none', exportOptions: { columns: [0, 1, 2, 3, 4, 5] } }
                ],
                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 pengguna 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>'
                    }
                }
            });

            // Live Search with debounce
            let searchTimeout;
            $('#search-input').on('keyup', function () {
                clearTimeout(searchTimeout);
                searchTimeout = setTimeout(function () {
                    userDataTable.page(0).ajax.reload();
                }, 400);
            });

            // Filters
            $('#user-status-filter, #kyc-status-filter').on('change', function () {
                userDataTable.page(0).ajax.reload();
            });

            // Reset Filter
            $('#btn-reset-filter').on('click', function () {
                $('#search-input').val('');
                $('#user-status-filter').val('all');
                $('#kyc-status-filter').val('all');
                userDataTable.state.clear();
                userDataTable.page(0).ajax.reload();
            });

            // Export Actions Trigger
            $('#btn-export-excel').on('click', function () { userDataTable.button('.buttons-excel').trigger(); });
            $('#btn-export-csv').on('click', function () { userDataTable.button('.buttons-csv').trigger(); });
            $('#btn-export-pdf').on('click', function () { userDataTable.button('.buttons-pdf').trigger(); });
            $('#btn-export-print').on('click', function () { userDataTable.button('.buttons-print').trigger(); });

        });
    </script>
@endsection