@extends('layout.app')
@section('title', 'CheckBill UnSuccess')
@section('style')

@endsection
@section('main')

    <svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
        <path color="#fff" d="M12 7.205c4.418 0 8-1.165 8-2.602C20 3.165 16.418 2 12 2S4 3.165 4 4.603c0 1.437 3.582 2.602 8 2.602ZM12 22c4.963 0 8-1.686 8-2.603v-4.404c-.052.032-.112.06-.165.09a7.75 7.75 0 0 1-.745.387c-.193.088-.394.173-.6.253-.063.024-.124.05-.189.073a18.934 18.934 0 0 1-6.3.998c-2.135.027-4.26-.31-6.3-.998-.065-.024-.126-.05-.189-.073a10.143 10.143 0 0 1-.852-.373 7.75 7.75 0 0 1-.493-.267c-.053-.03-.113-.058-.165-.09v4.404C4 20.315 7.037 22 12 22Zm7.09-13.928a9.91 9.91 0 0 1-.6.253c-.063.025-.124.05-.189.074a18.935 18.935 0 0 1-6.3.998c-2.135.027-4.26-.31-6.3-.998-.065-.024-.126-.05-.189-.074a10.163 10.163 0 0 1-.852-.372 7.816 7.816 0 0 1-.493-.268c-.055-.03-.115-.058-.167-.09V12c0 .917 3.037 2.603 8 2.603s8-1.686 8-2.603V7.596c-.052.031-.112.059-.165.09a7.816 7.816 0 0 1-.745.386Z"/>
    </svg>

    <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="#">CheckBill   UnSuccess</a></li>
                <li class="breadcrumb-item active" aria-current="page">CheckBill   UnSuccess</li>
            </ol>
        </nav>
        <div class="d-flex justify-content-between w-100 flex-wrap">
            <div class="mb-3 mb-lg-0"><h1 class="h4">CheckBill   UnSuccess Information's</h1>
                <p class="mb-0">Find All types of CheckBill   UnSuccess and CheckBill   UnSuccess details information</p>
            </div>
            <div>
            </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>Org Code</th>
                    <th>TIMESTAMP</th>
                    <th>CONVERSATIONID</th>
                    <th>INITIATORID</th>
                    <th>INITIATORMSISDN</th>
                    <th>REQUESTERMSISDN</th>
                    <th>CHANNELCODE</th>
                    <th>PARENTID</th>
                    <th>BILLREFNUMBER</th>
                    <th>SUBID</th>
                    <th>BILLMONTH</th>
                    <th>STARTMONTH</th>
                    <th>ENDMONTH</th>
                    <th>INQUIRYMODE</th>
                    <th>INQUIRYTYPE</th>
                    <th>CONTACTNO</th>
                    <th>CHECKAMOUNT</th>
                    <th>EXTENDEDPARAMETER1</th>
                    <th>EXTENDEDPARAMETER2</th>
                    <th>EXTENDEDPARAMETER3</th>
                    <th>EXTENDEDPARAMETER4</th>
                    <th>EXTENDEDPARAMETER5</th>
                    <th>Status</th>
                    <th>Created Date</th>
                    <th>Create By</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>
        let dataTable = null;

        function initializeDataTable() {
            var dataTableEl = document.getElementById('user-datatable');
            if (dataTableEl && !dataTable) {
                // Initialize the DataTable only once
                dataTable = new simpleDatatables.DataTable(dataTableEl);
            }
        }

        function loadTableData() {
            $.ajax({
                url: '{{ route('checkBillUnsc.data') }}',
                type: 'GET',
                dataType: 'json',
                success: function (data) {
                    console.log(data.length);
                    $('#table-body').empty();
                    $.each(data, function (index, user) {
                        console.log(index);
                        var row = $('<tr>');
                        row.append('<td>' + (index + 1) + '</td>');
                        row.append('<td>' + (user.ORG_CODE || '') + '</td>');
                        row.append('<td>' + (user.TIMESTAMP || '') + '</td>');
                        row.append('<td>' + (user.CONVERSATIONID || '') + '</td>');
                        row.append('<td>' + (user.INITIATORID || '') + '</td>');
                        row.append('<td>' + (user.INITIATORMSISDN || '') + '</td>');
                        row.append('<td>' + (user.REQUESTERMSISDN || '') + '</td>');
                        row.append('<td>' + (user.CHANNELCODE || '') + '</td>');
                        row.append('<td>' + (user.PARENTID || '') + '</td>');
                        row.append('<td>' + (user.BILLREFNUMBER || '') + '</td>');
                        row.append('<td>' + (user.SUBID || '') + '</td>');
                        row.append('<td>' + (user.BILLMONTH || '') + '</td>');
                        row.append('<td>' + (user.STARTMONTH || '') + '</td>');
                        row.append('<td>' + (user.ENDMONTH || '') + '</td>');
                        row.append('<td>' + (user.INQUIRYMODE || '') + '</td>');
                        row.append('<td>' + (user.INQUIRYTYPE || '') + '</td>');
                        row.append('<td>' + (user.CONTACTNO || '') + '</td>');
                        row.append('<td>' + (user.CHECKAMOUNT || '') + '</td>');
                        row.append('<td>' + (user.EXTENDEDPARAMETER1 || '') + '</td>');
                        row.append('<td>' + (user.EXTENDEDPARAMETER2 || '') + '</td>');
                        row.append('<td>' + (user.EXTENDEDPARAMETER3 || '') + '</td>');
                        row.append('<td>' + (user.EXTENDEDPARAMETER4 || '') + '</td>');
                        row.append('<td>' + (user.EXTENDEDPARAMETER5 || '') + '</td>');
                        row.append('<td>' + (user.STATUS || '') + '</td>');
                        row.append('<td>' + (user.CREATE_DATE || '') + '</td>');
                        row.append('<td>' + (user.CREATE_BY || '') + '</td>');
                        $('#table-body').append(row); // Append the new row to the table body
                    });

                    initializeDataTable();
                },
                error: function (xhr, status, error) {
                    console.error('Error fetching data:', error);
                }
            });
        }

        loadTableData();
        // setInterval(loadTableData, 3000);
        function viewUser(userId) {
            console.log("View user with ID:", userId);
        }


    </script>
@endsection