@extends('layout.app')
@section('title', 'Biller / Bkash Users Info')
@section('style')

@endsection
@section('main')
    <div class="py-4">
        <nav aria-label="breadcrumb" class="d-none d-md-inline-block">
            <ol class="breadcrumb breadcrumb-dark breadcrumb-transparent">
                <li class="breadcrumb-item"><a href="#">
                        <svg class="icon icon-xxs" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                             xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
                        </svg>
                    </a></li>
                <li class="breadcrumb-item"><a href="#">User Setup</a></li>
                <li class="breadcrumb-item active" aria-current="page">Biller / Bkash Users Info</li>
            </ol>
        </nav>
        <div class="d-flex justify-content-between w-100 flex-wrap">
            <div class="mb-3 mb-lg-0"><h1 class="h4">Biller / Bkash Users Information's</h1>
                <p class="mb-0">Find All types of Biller / Bkash user and Biller / Bkash user details information</p>
            </div>
            <div>
                <a href="{{url('biller-user/create')}}" class="btn btn-outline-gray-600 d-inline-flex align-items-center">
                    <svg class="icon icon-xs me-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                    </svg>
                    Add New Biller / Bkash User
                </a>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="table-responsive py-4">
            <table class="table table-flush" id="user-datatable">
                <thead class="thead-light">
                <tr>
                    <th>SL</th>
                    <th>UserName</th>
                    <th>Full Name</th>
                    <th>Phone</th>
                    <th>IP||Location</th>
                    <th>User Ext. Data</th>
                    <th>Roles</th>
                    <th>Status</th>
                    <th>Action</th>
                </tr>
                </thead>
                <tbody id="table-body">
                <!-- Data will be populated here -->
                </tbody>
            </table>
        </div>
    </div>
@endsection
@section('script')
    <script src="{{ asset('assets/js/simple-datatables.js') }}"></script>
    <script>
        function initializeDataTable() {
            var dataTableEl = document.getElementById('user-datatable');
            if (dataTableEl) {
                const dataTable = new simpleDatatables.DataTable(dataTableEl);
            }
        }
        const ROLE_COLORS = {
            'bkash': 'bg-danger',
            'biller': 'bg-success',
        };

        function parseRoles(input) {
            if (Array.isArray(input)) {
                return [...new Set(input.map(r => String(r).trim()).filter(Boolean))];
            }
            if (typeof input === 'string') {
                return [...new Set(
                    input
                        .split(/[,;|]/)
                        .map(r => r.trim())
                        .filter(Boolean)
                )];
            }
            return [];
        }

        function roleBadgesHtml(role_name) {
            const roles = parseRoles(role_name);
            if (!roles.length) return '<span style="font-size: 12px" class="badge bg-secondary">No Role</span>';

            return roles.map(r => {
                const cls = ROLE_COLORS[r.toLowerCase()] || 'bg-secondary';
                return `<span style="font-size: 12px" class="badge ${cls} me-1">${r}</span>`;
            }).join('');
        }

        function loadTableData() {
            $.ajax({
                url: '{{ route('billeruser.data') }}',
                type: 'GET',
                dataType: 'json',
                success: function (data) {
                    $('#table-body').empty();
                    $.each(data, function (index, user) {
                        var row = $('<tr>');
                        row.append('<td>' + (index + 1) + '</td>');
                        row.append('<td><strong style="font-weight: 900" class="text-danger">' + user.email.replace('@cdsl.com.bd', '') + '</strong></td>');
                        row.append('<td>' + user.name + '</td>');
                        row.append('<td>' + user.phone + '</td>');
                        row.append('<td>' + user.ip +'|'+ user.longitude + ',' + user.latitude + '</td>');
                        row.append('<td>' + user.user_extraram + '</td>');
                        row.append('<td>' + roleBadgesHtml(user.role_name) + '</td>');
                        var statusClass = user.status === 'active' ? 'btn-success' : 'btn-info';
                        row.append('<td><button type="button" class="btn ' + statusClass + ' btn-sm">' + user.status + '</button></td>');
                        row.append(`
                                <td>
                                    <div class="btn-group">
                                        <button class="btn btn-pill btn-outline-secondary btn-sm" type="button" onclick="editUser('${user.uid}')">
                                            <svg class="icon icon-xs me-2" fill="currentColor" viewBox="0 0 20 20">
                                                <path d="M17.414 2.586a2 2 0 010 2.828L7.828 15H5v-2.828l9.586-9.586a2 2 0 012.828 0z"/>
                                            </svg>
                                            Edit
                                        </button>
                                </td>
                            `);



                        $('#table-body').append(row);
                    });
                    initializeDataTable();
                },
                error: function (xhr, status, error) {
                    console.error('Error fetching data:', error);
                }
            });
        }

        loadTableData();

        function editUser(userId) {
            console.log("Edit user with ID:", userId);

            // Construct the URL dynamically
            var url = "{{ url('biller-user/edit') }}/" + userId;

            // Navigate to the edit page
            window.location.href = url;
        }

    </script>
@endsection