@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="row mx-1">
                    <div class="card">

                        {{-- JUDUL --}}
                        <div class="row">
                            <div class="card-header col-md-auto">
                                <h5 class="mb-0">List {{ $title_menu }}</h5>
                            </div>
                            <div class="col">
                                {{-- alert --}}
                                @include('components.alert')
                            </div>
                        </div>

                        {{-- TOMBOL TAMBAH --}}
                        <hr class="horizontal dark mt-0">

                        @php
                            $activeRole = $user_rules[0] ?? '';

                            $collectionTagihan = collect($data_tagihan);

                            $tagihanUser = $collectionTagihan
                                ->filter(function ($item) {
                                    return strtolower(trim($item->kategori_kartu ?? '')) === 'user';
                                })
                                ->values();

                            $tagihanOperasional = $collectionTagihan
                                ->filter(function ($item) {
                                    return strtolower(trim($item->kategori_kartu ?? '')) === 'operasional';
                                })
                                ->values();

                            $totalKeseluruhan = $collectionTagihan->sum('total_bill');

                            $totalUser = $tagihanUser->sum('total_bill');
                            $jumlahUser = $tagihanUser->count();

                            $totalOperasional = $tagihanOperasional->sum('total_bill');
                            $jumlahOperasional = $tagihanOperasional->count();

                            $kategoriGroups = [
                                'user' => [
                                    'label' => 'User',
                                    'value' => '1',
                                    'icon' => 'fas fa-user',
                                    'items' => $tagihanUser,
                                ],
                                'operasional' => [
                                    'label' => 'Operasional',
                                    'value' => '2',
                                    'icon' => 'fas fa-briefcase',
                                    'items' => $tagihanOperasional,
                                ],
                            ];
                        @endphp
                        {{-- CARD RINGKASAN TAGIHAN --}}
                        <div class="row px-4 py-3 g-3">

                            {{-- Total keseluruhan --}}
                            <div class="col-xl-3 col-md-6">
                                <div class="card bg-gradient-primary shadow-sm border-0 h-100">
                                    <div class="card-body p-3">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div>
                                                <p class="text-sm text-white mb-1 fw-bold">
                                                    TOTAL KESELURUHAN
                                                </p>

                                                <h5 class="text-white fw-bold mb-1">
                                                    Rp. {{ number_format($totalKeseluruhan, 0, ',', '.') }}
                                                </h5>

                                                <small class="text-white opacity-8">
                                                    {{ $collectionTagihan->count() }} data tagihan
                                                </small>
                                            </div>

                                            <i class="fas fa-calculator text-white opacity-75" style="font-size: 36px;"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- Total kategori User --}}
                            <div class="col-xl-3 col-md-6">
                                <div class="card bg-gradient-info shadow-sm border-0 h-100">
                                    <div class="card-body p-3">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div>
                                                <p class="text-sm text-white mb-1 fw-bold">
                                                    TOTAL KATEGORI USER
                                                </p>

                                                <h5 class="text-white fw-bold mb-1">
                                                    Rp. {{ number_format($totalUser, 0, ',', '.') }}
                                                </h5>

                                                <small class="text-white opacity-8">
                                                    {{ $jumlahUser }} nomor Kartu Halo
                                                </small>
                                            </div>

                                            <i class="fas fa-user text-white opacity-75" style="font-size: 36px;"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- Total kategori Operasional --}}
                            <div class="col-xl-3 col-md-6">
                                <div class="card bg-gradient-success shadow-sm border-0 h-100">
                                    <div class="card-body p-3">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div>
                                                <p class="text-sm text-white mb-1 fw-bold">
                                                    TOTAL KATEGORI OPERASIONAL
                                                </p>

                                                <h5 class="text-white fw-bold mb-1">
                                                    Rp. {{ number_format($totalOperasional, 0, ',', '.') }}
                                                </h5>

                                                <small class="text-white opacity-8">
                                                    {{ $jumlahOperasional }} nomor Kartu Halo
                                                </small>
                                            </div>

                                            <i class="fas fa-briefcase text-white opacity-75" style="font-size: 36px;"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- Total terpilih --}}
                            <div class="col-xl-3 col-md-6">
                                <div class="card bg-gradient-dark shadow-sm border-0 h-100">
                                    <div class="card-body p-3">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div>
                                                <p class="text-sm text-white mb-1 fw-bold">
                                                    TOTAL TAGIHAN TERPILIH
                                                </p>

                                                <h5 id="totalTagihanTerpilih" class="text-white fw-bold mb-1">
                                                    Rp. 0
                                                </h5>

                                                <small id="jumlahTagihanTerpilih" class="text-white opacity-8">
                                                    0 data dipilih
                                                </small>
                                            </div>

                                            <i class="fas fa-check-circle text-white opacity-75"
                                                style="font-size: 36px;"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>

                        <div class="row px-4 py-2">
                            <div class="col-12">

                                {{-- TAB KATEGORI --}}
                                <ul class="nav nav-tabs mb-3" id="approvalCategoryTabs" role="tablist">
                                    @foreach ($kategoriGroups as $key => $group)
                                        <li class="nav-item" role="presentation">
                                            <button class="nav-link {{ $loop->first ? 'active' : '' }}"
                                                id="{{ $key }}-tab" data-bs-toggle="tab"
                                                data-bs-target="#{{ $key }}-content" type="button" role="tab"
                                                data-category="{{ $key }}">
                                                <i class="{{ $group['icon'] }} me-1"></i>

                                                {{ $group['label'] }}

                                                <span
                                                    class="badge {{ $key === 'user' ? 'bg-primary' : 'bg-success' }} ms-1">
                                                    {{ $group['items']->count() }}
                                                </span>
                                            </button>
                                        </li>
                                    @endforeach
                                </ul>

                                {{-- ISI TAB --}}
                                <div class="tab-content" id="approvalCategoryTabsContent">

                                    @foreach ($kategoriGroups as $key => $group)
                                        <div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}"
                                            id="{{ $key }}-content" role="tabpanel">
                                            {{-- TOMBOL BULK PER KATEGORI --}}
                                            <div
                                                class="d-flex flex-wrap align-items-center
                                                    justify-content-between gap-2 mb-3">
                                                <div class="d-flex flex-wrap gap-2">
                                                    <button type="button" id="btnApproveAll-{{ $key }}"
                                                        class="btn btn-success mb-0" disabled style="opacity:0.5"
                                                        onclick="bulkAction(
                                                            'approve',
                                                            @js($activeRole),
                                                            '{{ $key }}',
                                                            '{{ $group['label'] }}'
                                                        )">
                                                        <i class="fas fa-check-circle me-1"></i>

                                                        Approve All {{ $group['label'] }}
                                                    </button>

                                                    <button type="button" id="btnRejectAll-{{ $key }}"
                                                        class="btn btn-danger mb-0" disabled style="opacity:0.5"
                                                        onclick="bulkAction(
                                                            'reject',
                                                            @js($activeRole),
                                                            '{{ $key }}',
                                                            '{{ $group['label'] }}'
                                                        )">
                                                        <i class="fas fa-times-circle me-1"></i>

                                                        Reject All {{ $group['label'] }}
                                                    </button>
                                                </div>

                                                <div class="text-muted">
                                                    <strong>
                                                        {{ $group['items']->count() }}
                                                    </strong>
                                                    data menunggu approval
                                                </div>
                                            </div>

                                            {{-- TABEL PER KATEGORI --}}
                                            <div class="table-responsive">
                                                <table class="table display nowrap w-100"
                                                    id="approval-table-{{ $key }}">
                                                    <thead class="thead-light" style="background-color:#00b7bd4f;">
                                                        <tr>
                                                            <th width="30">
                                                                <input type="checkbox" id="select-all-{{ $key }}">
                                                            </th>

                                                            <th width="110">Action</th>
                                                            <th>No</th>
                                                            <th>Pengguna</th>
                                                            <th>Departemen</th>
                                                            <th>No. Kartu Halo</th>
                                                            <th>Kategori</th>
                                                            <th>Abodemen</th>
                                                            <th>Lain-lain</th>
                                                            <th>PPN 11%</th>
                                                            <th>Total Tagihan</th>
                                                            <th>Created At</th>
                                                        </tr>
                                                    </thead>

                                                    <tbody>
                                                        @foreach ($group['items'] as $item)
                                                            <tr>
                                                                {{-- CHECKBOX --}}
                                                                <td>
                                                                    <input type="checkbox"
                                                                        class="
                                                                            row-checkbox
                                                                            row-checkbox-{{ $key }}
                                                                        "
                                                                        value="{{ $item->transaction_id }}"
                                                                        data-total="{{ $item->total_bill }}"
                                                                        data-category="{{ $key }}">
                                                                </td>

                                                                {{-- ACTION --}}
                                                                <td class="text-nowrap">
                                                                    <div class="btn-group">
                                                                        {{-- APPROVE --}}
                                                                        <button type="button"
                                                                            class="btn btn-primary btn-sm mb-0 px-3"
                                                                            title="Approve Data"
                                                                            onclick="confirmAction(
                                                                                @js($item->transaction_id),
                                                                                @js($item->nama_karyawan),
                                                                                @js(number_format($item->total_bill, 0, ',', '.')),
                                                                                @js($activeRole),
                                                                                'approve'
                                                                            )">
                                                                            <i class="fas fa-check-circle me-1"></i>
                                                                            <span class="font-weight-bold">
                                                                                Approve
                                                                            </span>
                                                                        </button>

                                                                        {{-- DROPDOWN --}}
                                                                        <button type="button"
                                                                            class="btn btn-primary btn-sm mb-0 px-3 dropdown-toggle dropdown-toggle-split"
                                                                            data-bs-toggle="dropdown"
                                                                            data-bs-auto-close="true"
                                                                            aria-expanded="false" title="Aksi lainnya">
                                                                            <span class="visually-hidden">
                                                                                Toggle Dropdown
                                                                            </span>
                                                                        </button>

                                                                        <ul class="dropdown-menu dropdown-menu-end shadow">
                                                                            {{-- REJECT --}}
                                                                            <li class="px-2">
                                                                                <button type="button"
                                                                                    class="btn btn-danger btn-sm mb-1 w-100"
                                                                                    onclick="confirmAction(
                                                                                        @js($item->transaction_id),
                                                                                        @js($item->nama_karyawan),
                                                                                        @js(number_format($item->total_bill, 0, ',', '.')),
                                                                                        @js($activeRole),
                                                                                        'reject'
                                                                                    )">
                                                                                    <i
                                                                                        class="fas fa-times-circle me-1"></i>
                                                                                    Reject
                                                                                </button>
                                                                            </li>

                                                                            {{-- VIEW --}}
                                                                            <li class="px-2">
                                                                                <button type="button"
                                                                                    class="btn btn-info btn-sm mb-0 w-100"
                                                                                    onclick="window.location.href = @js(url($url_menu . '/show/' . encrypt($item->phone_bill_id)))">
                                                                                    <i class="fas fa-eye me-1"></i>
                                                                                    View
                                                                                </button>
                                                                            </li>
                                                                        </ul>
                                                                    </div>
                                                                </td>

                                                                <td>{{ $loop->iteration }}</td>

                                                                <td>
                                                                    {{ $item->nama_karyawan }}
                                                                </td>

                                                                <td>
                                                                    {{ $item->nama_departemen }}
                                                                </td>

                                                                <td>
                                                                    {{ $item->phone_number }}
                                                                </td>

                                                                <td class="text-center">
                                                                    @if ($key === 'user')
                                                                        <span
                                                                            class="
                                                                                kategori-chip
                                                                                kategori-user
                                                                            ">
                                                                            <i
                                                                                class="
                                                                                    fas fa-user me-1
                                                                                "></i>

                                                                            User
                                                                        </span>
                                                                    @else
                                                                        <span
                                                                            class="
                                                                                kategori-chip
                                                                                kategori-operasional
                                                                            ">
                                                                            <i
                                                                                class="
                                                                                    fas
                                                                                    fa-briefcase
                                                                                    me-1
                                                                                "></i>

                                                                            Operasional
                                                                        </span>
                                                                    @endif
                                                                </td>

                                                                <td class="text-end">
                                                                    {{ number_format($item->abodemen, 0, ',', '.') }}
                                                                </td>

                                                                <td class="text-end">
                                                                    {{ number_format($item->other_bill, 0, ',', '.') }}
                                                                </td>

                                                                <td class="text-end">
                                                                    {{ number_format($item->tax, 0, ',', '.') }}
                                                                </td>

                                                                <td
                                                                    class="
                                                                        text-end
                                                                        font-weight-bold
                                                                    ">
                                                                    {{ number_format($item->total_bill, 0, ',', '.') }}
                                                                </td>

                                                                <td>
                                                                    {{ $item->created_at }}
                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>

                        <div class="row px-4 py-2">
                            <div class="col-lg">
                                <div class="nav-wrapper" id="noted"><code>Note : <i aria-hidden="true"
                                            style="color: #ffc2cd;" class="fas fa-circle"></i> Data not active</code>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- check flag js on dmenu --}}
    @if ($jsmenu == '1')
        @if (view()->exists("js.{$dmenu}"))
            @push('addjs')
                {{-- file js in folder (resources/views/js) --}}
                @include('js.' . $dmenu);
            @endpush
        @else
            @push('addjs')
                <script>
                    Swal.fire({
                        title: 'JS Not Found!!',
                        text: 'Please Create File JS',
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                </script>
            @endpush
        @endif
    @endif

@endsection
@push('js')
    <style>

        .kategori-chip {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 5px 10px;
            font-size: 11px;
            font-weight: 700;
            border-radius: 999px;
            white-space: nowrap;
            border: 1px solid transparent;
        }

        .kategori-operasional {
            color: #146c43;
            background-color: #d1e7dd;
            border-color: #a3cfbb;
        }

        .kategori-user {
            color: #084298;
            background-color: #cfe2ff;
            border-color: #9ec5fe;
        }

        .kategori-kosong {
            color: #495057;
            background-color: #e9ecef;
            border-color: #ced4da;
        }
    </style>
    <script>
        // FUNGSI CONFIRM APPROVE (SATU APPROVAL -> SUPERVISOR & HEAD HRD)
        function confirmAction(
            transactionId,
            name,
            total,
            userRole,
            action
        ) {
            const isApprove = action === 'approve';

            const swalConfig = {
                title: isApprove ?
                    'Konfirmasi Approve' :
                    'Konfirmasi Reject',

                html: `
            <div class="text-start">
                <p class="mb-2">
                    <b>Pengguna:</b> ${escapeHtmlApproval(name)}
                </p>

                <p class="mb-0">
                    <b>Total Tagihan:</b> Rp. ${escapeHtmlApproval(total)}
                </p>
            </div>
        `,

                icon: isApprove ?
                    'question' :
                    'warning',

                showCancelButton: true,

                confirmButtonText: isApprove ?
                    'Ya, Approve' :
                    'Ya, Reject',

                cancelButtonText: 'Batal',

                confirmButtonColor: isApprove ?
                    '#198754' :
                    '#dc3545',

                cancelButtonColor: '#6c757d'
            };

            /*
            |--------------------------------------------------------------------------
            | Input alasan reject
            |--------------------------------------------------------------------------
            */
            if (!isApprove) {
                swalConfig.input = 'textarea';

                swalConfig.inputPlaceholder =
                    'Masukkan alasan reject...';

                swalConfig.inputAttributes = {
                    maxlength: 500,
                    'aria-label': 'Masukkan alasan reject'
                };

                swalConfig.preConfirm = function(description) {
                    const cleanDescription = String(
                        description || ''
                    ).trim();

                    if (!cleanDescription) {
                        Swal.showValidationMessage(
                            'Alasan reject wajib diisi.'
                        );

                        return false;
                    }

                    return cleanDescription;
                };
            }

            Swal.fire(swalConfig).then(async function(result) {
                if (!result.isConfirmed) {
                    return;
                }

                const loadingText = isApprove ?
                    (
                        userRole === 'heahrd' ?
                        'Sedang memproses data dan mengirimkan email ke Finance...' :
                        'Sedang memproses data dan mengirimkan email ke Head HRD...'
                    ) :
                    'Sedang memproses data dan mengirimkan email ke Admin HRD...';

                Swal.fire({
                    title: 'Memproses Data',
                    text: loadingText,
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    showConfirmButton: false,

                    didOpen: function() {
                        Swal.showLoading();
                    }
                });

                try {
                    const response = await fetch(
                        @json(url('trsapp/approveRejectOneBill')), {
                            method: 'POST',

                            /*
                             * Kirim cookie/session Laravel.
                             */
                            credentials: 'same-origin',

                            headers: {
                                'Content-Type': 'application/json',

                                /*
                                 * Ini penting agar validasi dan exception Laravel
                                 * mengembalikan JSON, bukan halaman HTML.
                                 */
                                'Accept': 'application/json',

                                'X-Requested-With': 'XMLHttpRequest',

                                'X-CSRF-TOKEN': @json(csrf_token())
                            },

                            body: JSON.stringify({
                                transaction_id: transactionId,
                                user_roles: userRole,
                                user_rules: userRole,
                                action: action,

                                desc_input: isApprove ?
                                    null :
                                    result.value
                            })
                        }
                    );

                    /*
                    |--------------------------------------------------------------------------
                    | Baca response sebagai text terlebih dahulu
                    |--------------------------------------------------------------------------
                    |
                    | Jangan langsung response.json(), karena jika server mengirim HTML
                    | akan terjadi error Unexpected token '<'.
                    |
                    */
                    const responseText = await response.text();

                    let data;

                    try {
                        data = responseText ?
                            JSON.parse(responseText) :
                            {};
                    } catch (parseError) {
                        console.error(
                            'Response server bukan JSON:',
                            responseText
                        );

                        throw new Error(
                            'Server mengembalikan halaman HTML. ' +
                            'Periksa route, autentikasi, atau log Laravel.'
                        );
                    }

                    if (!response.ok) {
                        throw new Error(
                            data.message ||
                            'Data tagihan gagal diproses.'
                        );
                    }

                    if (data.success !== true) {
                        throw new Error(
                            data.message ||
                            'Data tagihan gagal diproses.'
                        );
                    }

                    Swal.close();

                    Swal.fire({
                        icon: 'success',
                        title: 'Berhasil',
                        text: data.message ||
                            'Data berhasil diproses.',
                        confirmButtonColor: '#198754'
                    }).then(function() {
                        window.location.reload();
                    });
                } catch (error) {
                    Swal.close();

                    console.error(
                        'Approve/reject satu data gagal:',
                        error
                    );

                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal',
                        text: error.message ||
                            'Terjadi kesalahan saat memproses data.',
                        confirmButtonColor: '#dc3545'
                    });
                }
            });
        }


        function escapeHtmlApproval(value) {
            return $('<div>')
                .text(value ?? '')
                .html();
        }

        const approvalTables = {};
        let activeApprovalCategory = 'user';

        $(document).ready(function() {
            const urlParams = new URLSearchParams(window.location.search);
            const tabParam = urlParams.get('tab');

            if (tabParam === 'operasional') {
                let triggerEl = document.querySelector('#operasional-tab');

                if (triggerEl) {
                    let tab = new bootstrap.Tab(triggerEl);
                    tab.show();
                }
            }
            initializeApprovalTable('user');
            initializeApprovalTable('operasional');

            bindApprovalCheckboxes('user');
            bindApprovalCheckboxes('operasional');

            /*
             * Saat tab diganti, sesuaikan ukuran DataTables
             * dan total pilihan pada kategori tersebut.
             */
            $('button[data-bs-toggle="tab"]').on(
                'shown.bs.tab',
                function(event) {
                    const category = String(
                        $(event.target).data('category') || 'user'
                    );

                    activeApprovalCategory = category;

                    if (approvalTables[category]) {
                        approvalTables[category]
                            .columns
                            .adjust();

                        if (
                            approvalTables[category]
                            .responsive
                        ) {
                            approvalTables[category]
                                .responsive
                                .recalc();
                        }
                    }

                    updateCategorySelection(category);
                }
            );

            updateCategorySelection('user');
        });


        function initializeApprovalTable(category) {
            const selector =
                '#approval-table-' + category;

            approvalTables[category] = $(selector).DataTable({
                searching: true,
                paging: false,
                info: false,
                responsive: true,
                scrollX: true,

                language: {
                    search: 'Cari:',
                    zeroRecords: 'Data tidak ada',
                    infoEmpty: 'Tidak ada data',
                    infoFiltered: '(pencarian dari _MAX_ data)'
                },

                order: [
                    [2, 'asc']
                ],

                columnDefs: [{
                    targets: [0, 1],
                    orderable: false,
                    searchable: false
                }]
            });
        }


        function bindApprovalCheckboxes(category) {
            const table =
                approvalTables[category];

            const selectAllSelector =
                '#select-all-' + category;

            const checkboxSelector =
                '.row-checkbox-' + category;

            /*
            |--------------------------------------------------------------------------
            | Select all hanya untuk baris yang terlihat
            |--------------------------------------------------------------------------
            */
            $(selectAllSelector)
                .off('change.approval')
                .on(
                    'change.approval',
                    function() {
                        const checked = this.checked;

                        $(table.rows({
                                search: 'applied'
                            }).nodes())
                            .find(checkboxSelector)
                            .prop('checked', checked);

                        updateCategorySelection(
                            category
                        );
                    }
                );

            /*
            |--------------------------------------------------------------------------
            | Checkbox per baris
            |--------------------------------------------------------------------------
            */
            $(document)
                .off(
                    'change.approval-' + category,
                    checkboxSelector
                )
                .on(
                    'change.approval-' + category,
                    checkboxSelector,
                    function() {
                        updateCategorySelection(
                            category
                        );
                    }
                );

            /*
             * Setelah search DataTables berubah,
             * periksa ulang select all.
             */
            table.on(
                'draw.dt',
                function() {
                    updateCategorySelection(
                        category
                    );
                }
            );
        }


        function updateCategorySelection(category) {
            const table =
                approvalTables[category];

            if (!table) {
                return;
            }

            const checkboxSelector =
                '.row-checkbox-' + category;

            const visibleCheckboxes =
                $(table.rows({
                    search: 'applied'
                }).nodes()).find(
                    checkboxSelector
                );

            const visibleChecked =
                visibleCheckboxes.filter(':checked');

            const allChecked =
                visibleCheckboxes.length > 0 &&
                visibleCheckboxes.length ===
                visibleChecked.length;

            $('#select-all-' + category)
                .prop('checked', allChecked)
                .prop(
                    'indeterminate',
                    visibleChecked.length > 0 &&
                    !allChecked
                );

            const allCategoryChecked = $(
                checkboxSelector + ':checked'
            );

            const hasSelection =
                allCategoryChecked.length > 0;

            $('#btnApproveAll-' + category)
                .prop(
                    'disabled',
                    !hasSelection
                )
                .css(
                    'opacity',
                    hasSelection ? '1' : '0.5'
                );

            $('#btnRejectAll-' + category)
                .prop(
                    'disabled',
                    !hasSelection
                )
                .css(
                    'opacity',
                    hasSelection ? '1' : '0.5'
                );

            /*
             * Card total terpilih mengikuti tab aktif.
             */
            if (category === activeApprovalCategory) {
                let total = 0;

                allCategoryChecked.each(function() {
                    total += Number(
                        $(this).data('total') || 0
                    );
                });

                $('#totalTagihanTerpilih').text(
                    'Rp. ' +
                    new Intl.NumberFormat(
                        'id-ID'
                    ).format(total)
                );

                $('#jumlahTagihanTerpilih').text(
                    allCategoryChecked.length +
                    ' data ' +
                    (
                        category === 'user' ?
                        'User' :
                        'Operasional'
                    ) +
                    ' dipilih'
                );
            }
        }

        // bulk action approve/reject
        function bulkAction(
            type,
            user,
            category,
            categoryLabel
        ) {
            /*
             * Hanya mengambil checkbox dari kategori
             * yang tombolnya sedang ditekan.
             */
            const selected = $(
                    '.row-checkbox-' +
                    category +
                    ':checked'
                )
                .map(function() {
                    return $(this).val();
                })
                .get();

            if (selected.length === 0) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Belum ada data dipilih',
                    text: 'Pilih minimal satu data kategori ' +
                        categoryLabel +
                        '.'
                });

                return;
            }

            const isApprove =
                type === 'approve';

            const swalConfig = {
                title: isApprove ?
                    'Konfirmasi Approve ' +
                    categoryLabel : 'Konfirmasi Reject ' +
                    categoryLabel,

                html: 'Anda akan melakukan <b>' +
                    type.toUpperCase() +
                    '</b> terhadap <b>' +
                    selected.length +
                    '</b> data kategori ' +
                    '<b>' +
                    categoryLabel +
                    '</b>.',

                icon: isApprove ?
                    'question' : 'warning',

                showCancelButton: true,

                confirmButtonText: isApprove ?
                    'Ya, Approve' : 'Ya, Reject',

                cancelButtonText: 'Batal',

                confirmButtonColor: isApprove ?
                    '#198754' : '#dc3545',

                cancelButtonColor: '#6c757d'
            };

            if (!isApprove) {
                swalConfig.input = 'textarea';

                swalConfig.inputPlaceholder =
                    'Masukkan alasan reject...';

                swalConfig.preConfirm = function(
                    description
                ) {
                    if (
                        !description ||
                        !description.trim()
                    ) {
                        Swal.showValidationMessage(
                            'Alasan reject wajib diisi.'
                        );

                        return false;
                    }

                    return description.trim();
                };
            }

            Swal.fire(swalConfig).then(
                function(result) {
                    if (!result.isConfirmed) {
                        return;
                    }

                    Swal.fire({
                        title: 'Memproses Data',
                        html: 'Memproses ' +
                            selected.length +
                            ' data kategori ' +
                            '<b>' +
                            categoryLabel +
                            '</b>...',

                        allowOutsideClick: false,
                        allowEscapeKey: false,
                        showConfirmButton: false,

                        didOpen: function() {
                            Swal.showLoading();
                        }
                    });

                    $.ajax({
                        url: "{{ url('trsapp/approveRejectAllBill') }}",

                        method: 'POST',

                        data: {
                            _token: '{{ csrf_token() }}',

                            transaction_ids: selected,

                            user_rules: user,

                            action: type,

                            /*
                             * 1 = User
                             * 2 = Operasional
                             */
                            kategori: category === 'user' ?
                                '1' : '2',

                            desc:
                                !isApprove ?
                                result.value : null
                        },

                        success: function(response) {
                            Swal.close();

                            if (!response.success) {
                                Swal.fire(
                                    'Gagal',
                                    response.message,
                                    'error'
                                );

                                return;
                            }

                            Swal.fire({
                                icon: 'success',
                                title: 'Berhasil',
                                text: response.message
                            }).then(function() {
                                location.reload();
                            });
                        },

                        error: function(xhr) {
                            Swal.close();

                            Swal.fire({
                                icon: 'error',
                                title: 'Gagal',
                                text: xhr.responseJSON
                                    ?.message ||
                                    'Terjadi kesalahan ' +
                                    'saat memproses.'
                            });
                        }
                    });
                }
            );
        }
    </script>
@endpush