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

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

    <div class="container-fluid">
        <div class="card shadow-sm border-0">
            <div class="card-body">
                <div class="text-uppercase text-muted small mb-3" style="letter-spacing:.06em;">
                    TRANSACTION LIST
                </div>

                <div class="col">
                    @include('components.alert')
                </div>

                <div class="table-responsive">
                    <table class="table align-middle table-hover display" id="list_transaction">
                        <thead style="background:#00b7bd4f;">
                            <tr>
                                <th style="width:60px;">No</th>
                                <th style="width:160px;">ID Trans</th>
                                <th style="width:130px;">Tanggal</th>
                                <th style="width:120px;">Jenis</th>
                                <th style="width:120px;">Tipe</th>
                                <th style="min-width:200px;">Nama</th>
                                <th style="min-width:200px;">Barang</th>
                                <th style="width:100px;">Qty</th>
                                <th style="width:100px;">UOM</th>
                            </tr>
                        </thead>

                        <tbody id="tbody-main">
                            @php
                                $grouped = collect($items ?? [])
                                    ->groupBy(fn($item) => $item->idtrans . '||' . $item->jenis);
                                $no = 1;
                            @endphp
                            @foreach ($grouped as $groupKey => $rows)
                                @php $first = $rows->first(); $safeKey = Str::slug($groupKey); @endphp
                                <tr class="tr-group-header" data-group="{{ $safeKey }}"
                                    style="cursor:pointer; background:#f0fafa;">
                                    <td>{{ $no++ }}</td>
                                    <td>
                                        <span class="me-2 toggle-icon">▶</span>
                                        <strong>{{ $first->idtrans }}</strong>
                                        <span class="badge ms-2" style="background:#028284; font-size:.72rem;">
                                            {{ $rows->count() }} item
                                        </span>
                                    </td>
                                    <td>{{ $first->date }}</td>
                                    <td>{{ $first->jenis }}</td>
                                    <td>{{ $first->tipe }}</td>
                                    <td>{{ trim($first->nama) ?: '-' }}</td>
                                    <td class="text-muted fst-italic small">Klik untuk detail</td>
                                    <td>{{ $rows->sum('qty') }}</td>
                                    <td>–</td>
                                </tr>
                            @endforeach
                        </tbody>

                        <tbody id="tbody-details">
                            @foreach ($grouped as $groupKey => $rows)
                                @php $safeKey = Str::slug($groupKey); @endphp
                                @foreach ($rows as $item)
                                    <tr class="tr-group-detail d-none" data-group="{{ $safeKey }}"
                                        style="background:#f9fefe;">
                                        <td>
                                            @if ($loop->first)
                                                <button class="btn-close-group"
                                                    data-group="{{ $safeKey }}"
                                                    title="Tutup detail"
                                                    style="
                                                        background:none; border:none; padding:0;
                                                        cursor:pointer; font-size:.85rem;
                                                        color:#028284; line-height:1;
                                                    ">▶</button>
                                            @endif
                                        </td>
                                        <td class="text-muted small ps-4">└ {{ $item->idtrans }}</td>
                                        <td>{{ $item->date }}</td>
                                        <td>{{ $item->jenis }}</td>
                                        <td>{{ $item->tipe }}</td>
                                        <td>{{ trim($item->nama) ?: '-' }}</td>
                                        <td>{{ $item->barang }}</td>
                                        <td>{{ $item->qty }}</td>
                                        <td>{{ $item->uom_name ?? $item->uom ?? '-' }}</td>
                                    </tr>
                                @endforeach
                            @endforeach
                        </tbody>

                    </table>
                </div>

            </div>
        </div>
    </div>
@endsection

@push('js')
<script>
    $(document).ready(function () {
        const tableId = '#list_transaction';
        if ($.fn.DataTable.isDataTable(tableId)) $(tableId).DataTable().destroy();

        $(tableId).DataTable({
            order: [[2, 'desc']],
            columnDefs: [{ orderable: false, targets: [0] }],
            pageLength: 25,
            autoWidth: false,
            drawCallback: function () {
                $('#tbody-main tr.tr-group-header').each(function () {
                    const group = $(this).data('group');
                    const $details = $(`#tbody-details tr.tr-group-detail[data-group="${group}"]`);
                    $(this).after($details);
                });
            },
            language: {
                emptyTable:     "Tidak ada data yang tersedia pada tabel ini",
                info:           "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
                infoEmpty:      "Menampilkan 0 sampai 0 dari 0 data",
                infoFiltered:   "(difilter dari _MAX_ total data)",
                lengthMenu:     "Tampilkan _MENU_ baris",
                loadingRecords: "Memuat...",
                processing:     "Memproses...",
                search:         "Cari :",
                zeroRecords:    "Data tidak ditemukan",
                paginate: {
                    first: "Pertama", last: "Terakhir",
                    next: "Selanjutnya", previous: "Sebelumnya"
                }
            }
        });

        $(document).on('click', '.tr-group-header', function () {
            const group = $(this).data('group');
            const $details = $(`.tr-group-detail[data-group="${group}"]`);

            $details.removeClass('d-none');
            $(this).addClass('d-none'); 
        });

        $(document).on('click', '.btn-close-group', function (e) {
            e.stopPropagation(); 
            const group = $(this).data('group');
            const $details = $(`.tr-group-detail[data-group="${group}"]`);
            const $header = $(`.tr-group-header[data-group="${group}"]`);

            $details.addClass('d-none');
            $header.removeClass('d-none'); 
        });
    });
</script>
@endpush