@extends('layouts.adminmaster')
@section('styles')
    <!-- INTERNAL Data table css -->
    <link href="{{ asset('build/assets/plugins/datatable/css/dataTables.bootstrap5.min.css') }}?v=1746435465"
        rel="stylesheet" />
    <link href="{{ asset('build/assets/plugins/datatable/responsive.bootstrap5.css') }}?v=1746435465"
        rel="stylesheet" />
@endsection

@section('content')
    <!-- Page Header -->
    <div class="d-md-flex d-block align-items-center justify-content-between my-4 page-header-breadcrumb">
        <span class="fs-semibold fs-18">{{ lang('All Transactions') }}</span>
        <div class="ms-md-1 ms-0">
            <nav>
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="{{ url('/admin') }}">{{ lang('HelpDesk') }}</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{{ lang('All Transactions') }}</li>
                </ol>
            </nav>
        </div>
    </div>
    <!-- Page Header Close -->

    <!-- Start:: row-1 -->
    <div class="row">
        <div class="col-xl-12">
            <div class="card custom-card" style="min-height: 230px;">
                <div class="card-header justify-content-between">
                    <div class="card-title">
                        {{ lang('All Transactions Lists') }}

                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table text-nowrap table-bordered" id="admin_transactions_table">
                            <thead>
                                <tr>
                                    <th data-sortable="false" scope="col">{{ lang('S.No') }}</th>
                                    <th scope="col">{{ lang('Invoice Id') }}</th>
                                    <th scope="col">{{ lang('User') }}</th>
                                    <th scope="col">{{ lang('Date') }}</th>
                                    <th scope="col">{{ lang('Amount') }}</th>
                                    <th scope="col">{{ lang('Payment For') }}</th>
                                    <th scope="col">{{ lang('Payment Mode') }}</th>
                                    <th scope="col">{{ lang('Status') }}</th>
                                    <th scope="col">{{ lang('Actions') }}</th>
                                </tr>
                            </thead>
                            <div id="hideAfterloading"><img src="{{ asset('build/assets/images/loader.svg') }}"
                                    alt="">
                                <p>loading.. Please Wait</p>
                            </div>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End:: row-1 -->

    {{-- @include('admin.includes.search-modal') --}}
@endsection

@section('scripts')
    <!-- INTERNAL Vertical-scroll js-->
    <script src="{{ asset('build/assets/plugins/vertical-scroll/jquery.bootstrap.newsbox.js') }}?v=1746435465">
    </script>
    <!-- INTERNAL Data tables -->
    <script src="{{ asset('build/assets/plugins/datatable/js/jquery.dataTables.min.js') }}?v=1746435465"></script>
    <script src="{{ asset('build/assets/plugins/datatable/js/dataTables.bootstrap5.js') }}?v=1746435465"></script>
    <script src="{{ asset('build/assets/plugins/datatable/dataTables.responsive.min.js') }}?v=1746435465">
    </script>
    <script src="{{ asset('build/assets/plugins/datatable/responsive.bootstrap5.min.js') }}?v=1746435465">
    </script>
    @include('includes.admin.datatable')
    <script>
        document.addEventListener("DOMContentLoaded", function(event) {
            let tableData = @json($alltransactions);
            let currencies = @json(config('currencies'));
            let defaultCurrencyCode = @json($defaultCurrencyCode);
            var SITEURL = '{{ url('') }}';
            let dateFormat = @json(setting('date_format'));
            var dataTable;
            var tableDropDown;

            function truncateTitle(title) {
                const maxLength = 40;
                return title.length > maxLength ? title.substring(0, maxLength) + '...' : title;
            }

            function getStatusBadge(status) {
                switch (status) {
                    case 'completed':
                    case 'paid':
                        return '<span class="badge bg-success-transparent">Success</span>';
                    case 'pending':
                        return '<span class="badge bg-warning-transparent">Pending</span>';
                    case 'refundpending':
                        return '<span class="badge bg-info-transparent">Refund Pending</span>';
                    case 'refunded':
                        return '<span class="badge bg-secondary-transparent">Refunded</span>';
                    case 'refundRejected':
                        return '<span class="badge bg-danger-transparent">Refund Rejected</span>';
                    default:
                        return '<span class="badge bg-danger-transparent">Failed</span>';
                }
            }

            loadTable(tableData);
            
            function loadTable(tableData) {
                document.getElementById('hideAfterloading')?.classList.remove('d-none');
                document.getElementById('theadShow')?.classList.add('d-none');
                if (tableDropDown)
                    tableDropDown.destroy();

                if ($.fn.DataTable.isDataTable('#admin_transactions_table')) {
                    $('#admin_transactions_table').DataTable().clear().destroy(); 
                }

                // if (dataTable)
                //     dataTable.destroy();

                if (document.getElementById('tableBody'))
                    document.getElementById('tableBody').remove();

                let createTbody = document.createElement('tbody');
                createTbody.setAttribute('id', "tableBody");
                let rows = tableData.map((data, index) => {

                    return `
                        <tr>
                            <td> ${index + 1} </td>                           

                            <td> ${data.invoiceId} </td>

                            <td> ${data.customer.username} </td>                           

                            <td> ${dateTime(data.created_at)} </td>

                            <td>
                                ${(data.payment_method == null || data.payment_method == "") && data.status == 'pending' ? `${currencies[defaultCurrencyCode] || ''} ${data.amount}` 
                                : `${currencies[data.currency] || ''} ${data.amount}`}
                            </td>

                            <td>
                                ${data.ticket_type == 'customInvoice' ? `{{ lang('Custom Invoice') }}` : '~'}
                            </td>

                            <td>
                                ${ (data.payment_method === null || data.payment_method === "") && data.status == 'pending' ? `<span class="text-danger">{{ lang('Payment Required*') }}</span>`
                                 : ( (data.payment_method != null && data.payment_method !== "") ? data.payment_method : '~' ) }
                            </td>

                            <td>                               
                                 ${getStatusBadge(data.status)}
                            </td>

                            <td>
                                 <a href="${SITEURL}/admin/invoice/${data.encrypted_id}" class="btn btn-icon btn-info-light btn-sm" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="View"><i class="ri-eye-line"></i>
                                            </a>
                            </td>
                        </tr>
                    `;
                });

                createTbody.innerHTML = rows.length ? rows.join('') : '';
                document.getElementById('admin_transactions_table').appendChild(createTbody);
                let prev = {!! json_encode(lang('Previous')) !!};
                let next = {!! json_encode(lang('Next')) !!};
                let nodata = {!! json_encode(lang('No data available in table')) !!};
                let noentries = {!! json_encode(lang('No entries to show')) !!};
                let showing = {!! json_encode(lang('showing page')) !!};
                let ofval = {!! json_encode(lang('of')) !!};
                let maxRecordfilter = {!! json_encode(lang('- filtered from ')) !!};
                let maxRecords = {!! json_encode(lang('records')) !!};
                let entries = {!! json_encode(lang('entries')) !!};
                let show = {!! json_encode(lang('Show')) !!};
                let search = {!! json_encode(lang('Search...')) !!};
                // Reinitialize DataTable
                dataTable = $('#admin_transactions_table').DataTable({
                    language: {
                        searchPlaceholder: search,
                        scrollX: "100%",
                        sSearch: '',
                        paginate: {
                            previous: prev,
                            next: next
                        },
                        emptyTable: nodata,
                        infoFiltered: `${maxRecordfilter} _MAX_ ${maxRecords}`,
                        info: `${showing} _PAGE_ ${ofval} _PAGES_`,
                        infoEmpty: noentries,
                        lengthMenu: `${show} _MENU_ ${entries}`,
                    },
                    order: [],
                    columnDefs: [{
                        "orderable": false,
                        "targets": [0, 1, 3]
                    }],
                });
                document.querySelector('.card-body').style.setProperty('filter','')

                $('.form-select').select2({
                    minimumResultsForSearch: Infinity,
                    width: '100%'
                });
                $('.form-select').on('focus', function() {
                    $(this).attr('aria-hidden', 'false');
                });
                document.getElementById('hideAfterloading')?.classList.add('d-none');
                document.getElementById('theadShow')?.classList.remove('d-none');

                initializeTooltips();
                // checkboxNoLabel()
                // buttonAlertFunctions();
                // Pagenate();

                function initializeTooltips() {
                    var tooltipElements = document.querySelectorAll('[data-bs-toggle="tooltip"]');
                    tooltipElements.forEach(function(element) {
                        new bootstrap.Tooltip(element);
                    });
                }


            }

            function initializeTooltips() {
                var tooltipElements = document.querySelectorAll('[data-bs-toggle="tooltip"]');
                tooltipElements.forEach(function(element) {
                    new bootstrap.Tooltip(element);
                });
            }
            initializeTooltips();

            function updateCheckallCheckboxes() {
                let allChecked = Array.from(document.querySelectorAll('.checkall')).every(checkbox => checkbox
                    .checked);
                document.getElementById('checkboxNoLabel').checked = allChecked;
            }

            function checkboxNoLabel() {
                document.querySelectorAll('.checkall').forEach((checkbox) => {
                    checkbox.checked = true;
                    if (!document.querySelector("#checkboxNoLabel").checked) {
                        checkbox.checked = false
                    }
                    checkbox.addEventListener('click', updateCheckallCheckboxes)
                });
            }

            document.getElementById('checkboxNoLabel')?.addEventListener('click', function() {
                checkboxNoLabel()
            });
            checkboxNoLabel()

            // const tableDropDown = new Choices('.dataTable-selector', {
            //     searchEnabled: false,
            //     itemSelectText: '',
            // });

            //     document.querySelector('.dataTable-selector').addEventListener(
            //         'addItem',
            //         function(event) {
            //             document.querySelector("#checkboxNoLabel").checked = false;
            //             document.querySelectorAll('.checkall').forEach((ele)=>{
            //                 ele.checked = false;
            //             })

            //             setTimeout(() => {
            //                 buttonAlertFunctions();
            //                 Pagenate();
            //             }, 100);
            //         },
            //         false,
            //     );
        });
    </script>
@endsection