@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">
                        <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 d-flex justify-content-between align-items-center flex-wrap gap-2">
                                <div class="d-flex align-items-center gap-2 flex-wrap">
                                    {{-- check authorize add --}}
                                    @if ($authorize->add == '1')
                                        <button class="btn btn-primary mb-0"
                                            onclick="window.location='{{ URL::to($url_menu . '/add') }}'">
                                            <i class="fas fa-plus me-1"></i><span class="font-weight-bold">Tambah</span>
                                        </button>
                                    @endif
                                    {{-- Export buttons --}}
                                    @if ($authorize->excel == '1')
                                        <button class="btn btn-secondary mb-0" id="btn-export-excel" title="Export Excel">
                                            <i class="fas fa-file-excel me-1 text-success"></i><span class="font-weight-bold">Excel</span>
                                        </button>
                                        <button class="btn btn-secondary mb-0" id="btn-export-csv" title="Export CSV">
                                            <i class="fas fa-file-csv me-1 text-success"></i><span class="font-weight-bold">CSV</span>
                                        </button>
                                    @endif
                                    @if ($authorize->pdf == '1')
                                        <button class="btn btn-secondary mb-0" id="btn-export-pdf" title="Export PDF">
                                            <i class="fas fa-file-pdf me-1 text-danger"></i><span class="font-weight-bold">PDF</span>
                                        </button>
                                    @endif
                                    @if ($authorize->print == '1')
                                        <button class="btn btn-secondary mb-0" id="btn-print" title="Print">
                                            <i class="fas fa-print me-1"></i><span class="font-weight-bold">Print</span>
                                        </button>
                                    @endif
                                </div>
                                <div class="d-flex align-items-center">
                                    <input type="text" id="coa-search" class="form-control me-2" placeholder="Search..." style="max-width:250px;" value="{{ request('search') }}">
                                </div>
                            </div>
                        </div>
                        <div class="row px-4 py-2">
                            <div class="table-responsive">
                                <table class="table table-bordered" id="list_{{ $dmenu }}">
                                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th width="130">Action</th>
                                            <th width="160">No. COA</th>
                                            <th>Nama COA</th>
                                            <th width="140">Jenis Laporan</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @include('master.mstcoa.partials.coa_rows', [
                                            'items' => $coa_tree,
                                            'depth' => 0,
                                            'table_primary' => $table_primary,
                                            'url_menu' => $url_menu,
                                            'authorize' => $authorize,
                                        ])
                                    </tbody>
                                </table>
                                <div class="d-flex justify-content-between align-items-center mt-2">
                                    <div>
                                        Total {{ $table_detail->count() }} data.
                                    </div>
                                </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>
@endsection
@push('js')
    {{-- SheetJS for Excel/CSV export --}}
    <script src="https://cdn.sheetjs.com/xlsx-0.20.3/package/dist/xlsx.full.min.js"></script>
    {{-- jsPDF + AutoTable for PDF export --}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.8.2/jspdf.plugin.autotable.min.js"></script>
    <script>
        $(document).ready(function () {
            if ($.fn.DataTable.isDataTable('#list_{{ $dmenu }}')) {
                $('#list_{{ $dmenu }}').DataTable().destroy();
            }

            $('#list_{{ $dmenu }}').DataTable({
                ordering: false,
                searching: false,
                paging: false,
                info: false,
                autoWidth: false
            });

            /* ── Tree toggle ─────────────────────────────────────── */
            $(document).on('click', 'td.coa-toggle', function (e) {
                e.stopPropagation();
                var rowId = $(this).data('coaId');
                var icon  = $(this).find('i');
                var parentRow = $(this).closest('tr');
                var childRows = $('tr[data-parent="' + rowId + '"]');

                if (childRows.first().is(':visible')) {
                    collapseChildren(rowId);
                    icon.removeClass('fa-chevron-down').addClass('fa-chevron-right');
                } else {
                    var last = parentRow;
                    childRows.each(function () {
                        var ch = $(this);
                        ch.insertAfter(last);
                        ch.show();
                        last = ch;
                    });
                    icon.removeClass('fa-chevron-right').addClass('fa-chevron-down');
                }
            });

            function collapseChildren(parentId) {
                $('tr[data-parent="' + parentId + '"]').each(function () {
                    var childId = $(this).data('id');
                    $(this).hide();
                    $('td.coa-toggle[data-coa-id="' + childId + '"]').find('i').removeClass('fa-chevron-down').addClass('fa-chevron-right');
                    collapseChildren(childId);
                });
            }

            /* ── Expand all children ─────────────────────────────── */
            function expandAll() {
                $('tr[data-id]').show();
                $('.coa-toggle i').removeClass('fa-chevron-right').addClass('fa-chevron-down');
            }

            /* ── Search ──────────────────────────────────────────── */
            $('#coa-search').on('input', function () {
                var search = $(this).val().toLowerCase();
                if (search === '') {
                    $('tr[data-id]').each(function () {
                        $(this).data('parent') ? $(this).hide() : $(this).show();
                    });
                    $('.coa-toggle i').removeClass('fa-chevron-down').addClass('fa-chevron-right');
                } else {
                    expandAll();

                    $('tr[data-id]').each(function () {
                        var nama  = $(this).find('.coa-nama').text().toLowerCase();
                        var id    = $(this).find('.coa-id').text().toLowerCase();
                        var jenis = $(this).find('.coa-jenis').text().toLowerCase();
                        if (nama.includes(search) || id.includes(search) || jenis.includes(search)) {
                            $(this).show();
                        } else {
                            $(this).hide();
                        }
                    });
                }
            });

            function showAncestors(parentId) {
                if (!parentId) return;
                var parentRow = $('tr[data-id="' + parentId + '"]');
                parentRow.show();
                showAncestors(parentRow.data('parent'));
            }

            /* ── Collect visible rows as array ───────────────────── */
            function getTableData(allRows) {
                var rows = [];
                var selector = allRows ? 'tr[data-id]' : 'tr[data-id]:visible';
                $(selector).each(function () {
                    rows.push([
                        $(this).find('.coa-id').text().trim(),
                        $(this).find('.coa-nama').text().trim(),
                        $(this).find('.coa-jenis').text().trim(),
                    ]);
                });
                return rows;
            }

            var headers = ['No. COA', 'Nama COA', 'Jenis Laporan'];
            var title   = '{{ $title_menu }}';

            /* ── Excel export ────────────────────────────────────── */
            $('#btn-export-excel').on('click', function () {
                var data = [headers].concat(getTableData(true));
                var ws   = XLSX.utils.aoa_to_sheet(data);
                var wb   = XLSX.utils.book_new();
                XLSX.utils.book_append_sheet(wb, ws, title);
                XLSX.writeFile(wb, title + '.xlsx');
            });

            /* ── CSV export ──────────────────────────────────────── */
            $('#btn-export-csv').on('click', function () {
                var data = [headers].concat(getTableData(true));
                var ws   = XLSX.utils.aoa_to_sheet(data);
                var wb   = XLSX.utils.book_new();
                XLSX.utils.book_append_sheet(wb, ws, title);
                XLSX.writeFile(wb, title + '.csv');
            });

            /* ── PDF export ──────────────────────────────────────── */
            $('#btn-export-pdf').on('click', function () {
                var { jsPDF } = window.jspdf;
                var doc = new jsPDF({ orientation: 'landscape' });
                doc.setFontSize(13);
                doc.text(title, 14, 15);
                doc.autoTable({
                    startY: 20,
                    head: [headers],
                    body: getTableData(true),
                    styles: { fontSize: 9 },
                    headStyles: { fillColor: [0, 183, 189] },
                });
                doc.save(title + '.pdf');
            });

            /* ── Print ───────────────────────────────────────────── */
            $('#btn-print').on('click', function () {
                var rows = getTableData(true).map(function (r) {
                    return '<tr><td>' + r.join('</td><td>') + '</td></tr>';
                }).join('');
                var html = `
                    <html><head><title>${title}</title>
                    <style>
                        body { font-family: sans-serif; font-size: 12px; }
                        table { border-collapse: collapse; width: 100%; }
                        th, td { border: 1px solid #ccc; padding: 6px 10px; text-align: left; }
                        th { background: #00b7bd4f; }
                        h3 { margin-bottom: 8px; }
                    </style></head>
                    <body>
                        <h3>${title}</h3>
                        <table>
                            <thead><tr><th>${headers.join('</th><th>')}</th></tr></thead>
                            <tbody>${rows}</tbody>
                        </table>
                    </body></html>`;
                var w = window.open('', '_blank');
                w.document.write(html);
                w.document.close();
                w.focus();
                w.print();
                w.close();
            });
        });

        /* ── Delete confirm ──────────────────────────────────────── */
        function deleteData(event, name, msg) {
            event.preventDefault();
            Swal.fire({
                title: 'Konfirmasi',
                text: `Apakah Anda Yakin ${msg} Data ${name} ini?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: `Ya, ${msg}`,
                cancelButtonText: 'Batal',
                confirmButtonColor: '#028284'
            }).then((result) => {
                if (result.isConfirmed) {
                    event.target.closest('form').submit();
                }
            });
        }
    </script>
@endpush