@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    @php
        $primaryField = $table_primary_h->first();
        $selectedStatus = (string) ($selected_record->status ?? '');
        $showApproveButton = ($authorize->approval ?? '0') == '1' && ($has_approval_config ?? false);
        $showUnapproveButton = ($authorize->approval ?? '0') == '1' && ($has_approval_config ?? false);
        $showRejectButton = ($authorize->approval ?? '0') == '1' && ($has_approval_config ?? false);
        $showResubmitButton = ($authorize->approval ?? '0') == '1' && ($has_approval_config ?? false);
        $postingEntryStatus = $has_approval_config ?? false ? 'A' : 'E';
        $showPostingButton = ($authorize->posting ?? '0') == '1' && ($has_posting_config ?? false);
        $showReverseButton = ($authorize->posting ?? '0') == '1' && ($has_posting_config ?? false);
    @endphp
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="row mx-1">
                    <div class="card">
                        <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>
                        <hr class="horizontal dark mt-0">
                        <div class="row px-4 py-2">
                            <div class="col-lg">
                                <div class="nav-wrapper">
                                    {{-- check authorize add --}}
                                    @if ($authorize->add == '1')
                                        <a href="{{ url($url_menu . '/add') }}" class="btn btn-primary mb-0">
                                            <i class="fas fa-plus me-1"></i>Tambah
                                        </a>
                                    @endif

                                    @if ($authorize->edit == '1')
                                        <a href="{{ $selected_encrypt ? url($url_menu . '/edit/' . $selected_encrypt) : '#' }}"
                                            class="btn btn-warning mb-0 transact-action-btn {{ $selected_encrypt && !in_array($selectedStatus, ['A', 'F', 'C']) ? '' : 'd-none' }}"
                                            id="transc-edit-btn">
                                            <i class="fas fa-edit me-1"></i>Edit
                                        </a>
                                    @endif

                                    @if ($authorize->delete == '1')
                                        <button type="button"
                                            class="btn btn-danger mb-0 transact-action-btn {{ $selected_encrypt && !in_array($selectedStatus, ['A', 'F', 'C']) ? '' : 'd-none' }}"
                                            id="transc-delete-btn">
                                            <i class="fas fa-trash me-1"></i>Hapus
                                        </button>
                                    @endif

                                    @if ($showApproveButton)
                                        <button type="button"
                                            class="btn btn-info mb-0 transact-action-btn {{ $selected_encrypt && $selectedStatus === 'E' ? '' : 'd-none' }}"
                                            id="transc-approve-btn">
                                            <i class="fas fa-check me-1"></i>Approve
                                        </button>
                                    @endif
                                    @if ($showUnapproveButton)
                                        <button type="button"
                                            class="btn btn-secondary mb-0 transact-action-btn {{ $selected_encrypt && $selectedStatus === 'A' ? '' : 'd-none' }}"
                                            id="transc-unapprove-btn">
                                            <i class="fas fa-rotate-left me-1"></i>UnApprove
                                        </button>
                                    @endif
                                    @if ($showRejectButton)
                                        <button type="button"
                                            class="btn btn-dark mb-0 transact-action-btn {{ $selected_encrypt && $selectedStatus === 'E' ? '' : 'd-none' }}"
                                            id="transc-reject-btn">
                                            <i class="fas fa-circle-xmark me-1"></i>Reject
                                        </button>
                                    @endif
                                    @if ($showResubmitButton)
                                        <button type="button"
                                            class="btn btn-primary mb-0 transact-action-btn {{ $selected_encrypt && $selectedStatus === 'R' ? '' : 'd-none' }}"
                                            id="transc-resubmit-btn">
                                            <i class="fas fa-paper-plane me-1"></i>Ajukan Kembali
                                        </button>
                                    @endif

                                    @if ($showPostingButton)
                                        <button type="button"
                                            class="btn btn-success mb-0 transact-action-btn {{ $selected_encrypt && $selectedStatus === $postingEntryStatus ? '' : 'd-none' }}"
                                            id="transc-posting-btn">
                                            <i class="fas fa-upload me-1"></i>Posting
                                        </button>
                                    @endif
                                    @if ($showReverseButton)
                                        <button type="button"
                                            class="btn btn-danger mb-0 transact-action-btn {{ $selected_encrypt && $selectedStatus === 'F' ? '' : 'd-none' }}"
                                            id="transc-reverse-btn">
                                            <i class="fas fa-rotate-left me-1"></i>Reverse
                                        </button>
                                    @endif
                                    @if ($authorize->print == '1')
                                        <a href="{{ $selected_encrypt ? url($url_menu . '/show/' . $selected_encrypt) . '?pdf=1' : '#' }}"
                                            class="btn btn-secondary mb-0 transact-action-btn {{ $selected_encrypt ? '' : 'd-none' }}"
                                            id="transc-print-btn" target="_blank">
                                            <i class="fas fa-print me-1"></i>Print
                                        </a>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="row col-lg-6 col-12 px-4 py-2">
                            <div class="card-body p-4">
                                <h4 class="mb-4">Input {{ $primaryField?->alias ?? 'Transaksi' }}</h4>

                                <div class="input-group">
                                    <input type="text" class="form-control" id="transc-selected-display"
                                        placeholder="{{ $primaryField?->alias ?? 'Pilih Transaksi' }}"
                                        value="{{ $selected_display }}" readonly>
                                    <span class="input-group-text bg-primary text-light transc-modal-trigger px-3"
                                        data-bs-toggle="modal" data-bs-target="#transcModalSearch"
                                        data-field="{{ $transaction_lookup_field }}"
                                        data-title="{{ $transaction_lookup_title }}" style="cursor: pointer; width: 50px;">
                                        <i class="fas fa-search"></i>
                                    </span>
                                    <a href="{{ $selected_encrypt ? url($url_menu . '/show/' . $selected_encrypt) : '#' }}"
                                        class="btn btn-primary mb-0 px-0" id="transc-show-btn"
                                        style="width: 50px; height: 40px; margin-left: 1px;">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="row px-4 py-2">
                            <div class="col-lg">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <form id="transc-delete-form" method="POST"
        action="{{ $selected_encrypt ? url($url_menu . '/' . $selected_encrypt) : '' }}" class="d-none">
        @csrf
        @method('DELETE')
    </form>

    <form id="transc-approve-form" method="POST"
        action="{{ $selected_encrypt ? url($url_menu . '/approve/' . $selected_encrypt) : '' }}" class="d-none">
        @csrf
    </form>

    <form id="transc-unapprove-form" method="POST"
        action="{{ $selected_encrypt ? url($url_menu . '/unapprove/' . $selected_encrypt) : '' }}" class="d-none">
        @csrf
    </form>

    <form id="transc-reject-form" method="POST"
        action="{{ $selected_encrypt ? url($url_menu . '/reject/' . $selected_encrypt) : '' }}" class="d-none">
        @csrf
        <input type="hidden" name="remark" id="transc-reject-remark">
    </form>

    <form id="transc-resubmit-form" method="POST"
        action="{{ $selected_encrypt ? url($url_menu . '/resubmit/' . $selected_encrypt) : '' }}" class="d-none">
        @csrf
    </form>

    <form id="transc-posting-form" method="POST"
        action="{{ $selected_encrypt ? url($url_menu . '/posting/' . $selected_encrypt) : '' }}" class="d-none">
        @csrf
    </form>

    <form id="transc-reverse-form" method="POST"
        action="{{ $selected_encrypt ? url($url_menu . '/reverse/' . $selected_encrypt) : '' }}" class="d-none">
        @csrf
    </form>

    <div class="modal fade" id="transcModalSearch" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">List {{ $title_menu }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table class="table align-items-center mb-0" id="list_{{ $dmenu }}_modal">
                            <thead class="thead-light" style="background-color: #00b7bd4f; display:none;">
                                <tr></tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                        <div class="text-center py-3 small text-secondary" id="transc-search-loading">
                            Klik tombol search untuk memuat data.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @push('addjs')
        <style>
            .transc-landing-card {
                min-height: calc(100vh - 190px);
            }
        </style>
        <script>
            $(function() {
                const tableSelector = '#list_{{ $dmenu }}_modal';
                const hasApprovalConfig = @json($has_approval_config ?? false);
                const hasPostingConfig = @json($has_posting_config ?? false);
                const userCanApprove = @json(($authorize->approval ?? '0') == '1');
                const userCanPosting = @json(($authorize->posting ?? '0') == '1');
                const postingVisibleStatus = hasApprovalConfig ? 'A' : 'E';
                let loadedTransactionModal = false;

                const updateButtons = (payload) => {
                    const status = String(payload.status || '');
                    $('#transc-selected-display').val(payload.display || '');
                    $('#transc-show-btn').attr('href', payload.showUrl || '#');
                    $('#transc-print-btn').attr('href', payload.printUrl || '#');
                    $('#transc-edit-btn').attr('href', payload.editUrl || '#');
                    $('#transc-delete-form').attr('action', payload.deleteUrl || '#');
                    $('#transc-approve-form').attr('action', payload.approveUrl || '#');
                    $('#transc-unapprove-form').attr('action', payload.unapproveUrl || '#');
                    $('#transc-reject-form').attr('action', payload.rejectUrl || '#');
                    $('#transc-resubmit-form').attr('action', payload.resubmitUrl || '#');
                    $('#transc-posting-form').attr('action', payload.postingUrl || '#');
                    $('#transc-reverse-form').attr('action', payload.reverseUrl || '#');
                    $('.transact-action-btn').removeClass('d-none');
                    $('#transc-edit-btn').toggleClass('d-none', status === 'A' || status === 'F' || status === 'C');
                    $('#transc-delete-btn').toggleClass('d-none', status === 'A' || status === 'F' || status ===
                        'C');
                    $('#transc-approve-btn').toggleClass('d-none', !(userCanApprove && hasApprovalConfig &&
                        status ===
                        'E'));
                    $('#transc-unapprove-btn').toggleClass('d-none', !(userCanApprove && hasApprovalConfig &&
                        status ===
                        'A'));
                    $('#transc-reject-btn').toggleClass('d-none', !(userCanApprove && hasApprovalConfig &&
                        status ===
                        'E'));
                    $('#transc-resubmit-btn').toggleClass('d-none', !(userCanApprove && hasApprovalConfig &&
                        status ===
                        'R'));
                    $('#transc-posting-btn').toggleClass('d-none', !(userCanPosting && hasPostingConfig &&
                        status ===
                        postingVisibleStatus));
                    $('#transc-reverse-btn').toggleClass('d-none', !(userCanPosting && hasPostingConfig &&
                        status ===
                        'F'));
                };

                const resetButtons = () => {
                    $('#transc-selected-display').val('');
                    $('#transc-show-btn').attr('href', '#');
                    $('#transc-print-btn').attr('href', '#');
                    $('#transc-edit-btn').attr('href', '#');
                    $('#transc-delete-form').attr('action', '');
                    $('#transc-approve-form').attr('action', '');
                    $('#transc-unapprove-form').attr('action', '');
                    $('#transc-reject-form').attr('action', '');
                    $('#transc-resubmit-form').attr('action', '');
                    $('#transc-reject-remark').val('');
                    $('#transc-posting-form').attr('action', '');
                    $('#transc-reverse-form').attr('action', '');
                    $('.transact-action-btn').addClass('d-none');
                };

                const escapeHtml = (value) => String(value ?? '')
                    .replace(/&/g, '&amp;')
                    .replace(/</g, '&lt;')
                    .replace(/>/g, '&gt;')
                    .replace(/"/g, '&quot;')
                    .replace(/'/g, '&#039;');

                const buildStatusBadge = (statusCode, statusLabel) => {
                    const normalized = String(statusCode || '').toUpperCase();
                    let badgeClass = 'bg-secondary';

                    if (normalized === 'A') {
                        badgeClass = 'bg-info';
                    } else if (normalized === 'R') {
                        badgeClass = 'bg-warning';
                    } else if (normalized === 'F') {
                        badgeClass = 'bg-success';
                    } else if (normalized === 'C') {
                        badgeClass = 'bg-danger';
                    }

                    return `<span class="badge ${badgeClass}">${escapeHtml(statusLabel || normalized)}</span>`;
                };

                const mountRefreshButton = () => {
                    const wrapper = $(tableSelector + '_wrapper');

                    if (!wrapper.length || wrapper.find('.transc-search-refresh').length) {
                        return;
                    }

                    wrapper.find('.dataTables_length').append(`
                        <button type="button" class="btn btn-info btn-sm mb-0 ms-2 px-2 py-1 transc-search-refresh">
                            <i class="fas fa-rotate-right"></i> Refresh
                        </button>
                    `);
                };

                const loadTransactionModal = (forceReload = false) => {
                    const field = $('.transc-modal-trigger').data('field');
                    const title = $('.transc-modal-trigger').data('title') || 'Transaksi';
                    const tableElement = $(tableSelector);
                    const thead = tableElement.find('thead');
                    const headerRow = thead.find('tr');
                    const tbody = tableElement.find('tbody');
                    const loading = $('#transc-search-loading');

                    $('#transcModalSearch .modal-title').text(`List ${title}`);

                    if (!field) {
                        loading.text('Field lookup transaksi belum diatur.');
                        return;
                    }

                    if (loadedTransactionModal && !forceReload) {
                        return;
                    }

                    $.ajax({
                        url: `{{ url('/form-transaction-options/' . $url_menu) }}`,
                        method: 'GET',
                        data: {
                            field: field
                        },
                        beforeSend: function() {
                            if ($.fn.DataTable.isDataTable(tableSelector)) {
                                tableElement.DataTable().clear().destroy();
                            }

                            tableElement.find('colgroup').remove();
                            thead.hide();
                            headerRow.empty();
                            tbody.empty();
                            loading.text('Memuat data...');
                        },
                        success: function(response) {
                            const columns = response.columns || [];
                            const items = response.items || [];

                            headerRow.empty().append('<th width="100">Action</th>');

                            if (!columns.length || !items.length) {
                                loading.text('Data tidak ditemukan.');
                                return;
                            }

                            columns.forEach(function(column) {
                                headerRow.append(`<th>${escapeHtml(column)}</th>`);
                            });

                            items.forEach(function(item) {
                                const cells = item.cells || {};
                                let tr = `
                                    <tr>
                                        <td>
                                            <button type="button" class="btn btn-success btn-sm mb-0 transact-select-btn"
                                                data-display="${escapeHtml(item.display || '')}"
                                                data-show-url="${escapeHtml(item.show_url || '#')}"
                                                data-edit-url="${escapeHtml(item.edit_url || '#')}"
                                                data-delete-url="${escapeHtml(item.delete_url || '#')}"
                                                data-print-url="${escapeHtml(item.print_url || '#')}"
                                                data-approve-url="${escapeHtml(item.approve_url || '#')}"
                                                data-unapprove-url="${escapeHtml(item.unapprove_url || '#')}"
                                                data-reject-url="${escapeHtml(item.reject_url || '#')}"
                                                data-resubmit-url="${escapeHtml(item.resubmit_url || '#')}"
                                                data-posting-url="${escapeHtml(item.posting_url || '#')}"
                                                data-reverse-url="${escapeHtml(item.reverse_url || '#')}"
                                                data-status="${escapeHtml(item.raw_status || '')}">
                                                Select
                                            </button>
                                        </td>
                                `;

                                columns.forEach(function(column) {
                                    const value = cells[column] ?? '';

                                    if (String(column).toLowerCase() === 'status') {
                                        tr +=
                                            `<td>${buildStatusBadge(item.raw_status, value)}</td>`;
                                    } else {
                                        tr += `<td>${escapeHtml(value)}</td>`;
                                    }
                                });

                                tr += '</tr>';
                                tbody.append(tr);
                            });

                            thead.show();
                            loading.text('');
                            loadedTransactionModal = true;
                            tableElement.DataTable({
                                destroy: true,
                                pageLength: 10,
                                order: []
                            });
                            mountRefreshButton();
                        },
                        error: function(xhr) {
                            if ($.fn.DataTable.isDataTable(tableSelector)) {
                                tableElement.DataTable().clear().destroy();
                            }

                            tableElement.find('colgroup').remove();
                            thead.hide();
                            headerRow.empty();
                            tbody.empty();
                            loading.text(xhr.status === 404 ? 'Field search tidak ditemukan.' :
                                'Gagal memuat data.');
                        }
                    });
                };

                $(document).on('click', '.transact-select-btn', function() {
                    updateButtons({
                        display: $(this).data('display'),
                        showUrl: $(this).data('show-url'),
                        editUrl: $(this).data('edit-url'),
                        deleteUrl: $(this).data('delete-url'),
                        printUrl: $(this).data('print-url'),
                        approveUrl: $(this).data('approve-url'),
                        unapproveUrl: $(this).data('unapprove-url'),
                        rejectUrl: $(this).data('reject-url'),
                        resubmitUrl: $(this).data('resubmit-url'),
                        postingUrl: $(this).data('posting-url'),
                        reverseUrl: $(this).data('reverse-url'),
                        status: $(this).data('status')
                    });

                    $('#transcModalSearch').modal('hide');
                });

                $('.transc-modal-trigger').on('click', function() {
                    loadTransactionModal(false);
                });

                $(document).on('click', '.transc-search-refresh', function() {
                    loadTransactionModal(true);
                });

                $('#transc-delete-btn').on('click', function() {
                    const form = $('#transc-delete-form');
                    const action = form.attr('action');

                    if (!action) {
                        return;
                    }

                    Swal.fire({
                        title: 'Yakin?',
                        text: 'Data akan dihapus!.',
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#d33',
                        cancelButtonColor: '#6c757d',
                        confirmButtonText: 'Ya, lanjutkan',
                        cancelButtonText: 'Batal'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            form[0].submit();
                        }
                    });
                });

                $('#transc-approve-btn').on('click', function() {
                    const form = $('#transc-approve-form');
                    if (!form.attr('action')) {
                        return;
                    }

                    Swal.fire({
                        title: 'Approve transaksi?',
                        text: 'Status transaksi akan diubah menjadi Approve.',
                        icon: 'question',
                        showCancelButton: true,
                        confirmButtonColor: '#11cdef',
                        cancelButtonColor: '#6c757d',
                        confirmButtonText: 'Ya, approve',
                        cancelButtonText: 'Batal'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            form[0].submit();
                        }
                    });
                });

                $('#transc-posting-btn').on('click', function() {
                    const form = $('#transc-posting-form');
                    if (!form.attr('action')) {
                        return;
                    }

                    Swal.fire({
                        title: 'Posting transaksi?',
                        text: 'Status transaksi akan diubah menjadi Finish.',
                        icon: 'question',
                        showCancelButton: true,
                        confirmButtonColor: '#2dce89',
                        cancelButtonColor: '#6c757d',
                        confirmButtonText: 'Ya, posting',
                        cancelButtonText: 'Batal'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            form[0].submit();
                        }
                    });
                });

                $('#transc-unapprove-btn').on('click', function() {
                    const form = $('#transc-unapprove-form');
                    if (!form.attr('action')) {
                        return;
                    }

                    Swal.fire({
                        title: 'UnApprove transaksi?',
                        text: 'Status transaksi akan dikembalikan menjadi Entry.',
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#6c757d',
                        cancelButtonColor: '#adb5bd',
                        confirmButtonText: 'Ya, unapprove',
                        cancelButtonText: 'Batal'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            form[0].submit();
                        }
                    });
                });

                $('#transc-reject-btn').on('click', function() {
                    const form = $('#transc-reject-form');
                    if (!form.attr('action')) {
                        return;
                    }

                    Swal.fire({
                        title: 'Reject transaksi?',
                        input: 'textarea',
                        inputLabel: 'Alasan Reject',
                        inputPlaceholder: 'Tuliskan alasan reject...',
                        inputAttributes: {
                            'aria-label': 'Alasan Reject'
                        },
                        inputValidator: (value) => {
                            if (!value || !value.trim()) {
                                return 'Alasan reject wajib diisi.';
                            }
                        },
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#212529',
                        cancelButtonColor: '#6c757d',
                        confirmButtonText: 'Ya, reject',
                        cancelButtonText: 'Batal'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            $('#transc-reject-remark').val(result.value || '');
                            form[0].submit();
                        }
                    });
                });

                $('#transc-resubmit-btn').on('click', function() {
                    const form = $('#transc-resubmit-form');
                    if (!form.attr('action')) {
                        return;
                    }

                    Swal.fire({
                        title: 'Ajukan kembali transaksi?',
                        text: 'Status transaksi Reject akan dikembalikan menjadi Entry.',
                        icon: 'question',
                        showCancelButton: true,
                        confirmButtonColor: '#028284',
                        cancelButtonColor: '#6c757d',
                        confirmButtonText: 'Ya, ajukan kembali',
                        cancelButtonText: 'Batal'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            form[0].submit();
                        }
                    });
                });

                $('#transc-reverse-btn').on('click', function() {
                    const form = $('#transc-reverse-form');
                    if (!form.attr('action')) {
                        return;
                    }

                    Swal.fire({
                        title: 'Reverse transaksi?',
                        text: 'Status transaksi Finish akan diubah menjadi Cancel.',
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#D6002B',
                        cancelButtonColor: '#6c757d',
                        confirmButtonText: 'Ya, reverse',
                        cancelButtonText: 'Batal'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            form[0].submit();
                        }
                    });
                });
            });
        </script>
    @endpush
@endsection