@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:50px;">Nama</th>
                                <th style="min-width:120px;">Barang</th>
                                <th style="min-width:200px;">Kode Asset</th>
                                <th style="width:100px;">Qty</th>
                            </tr>
                        </thead>

                        <tbody id="tbody-main">
                            @php
                                $grouped = collect($items ?? [])
                                    ->sortBy(
                                        fn($item) => match ($item->jenis) {
                                            'Pengembalian' => 0,
                                            'Peminjaman' => 1,
                                            default => 2,
                                        },
                                    )
                                    ->groupBy(fn($item) => $item->idtrans . '||' . $item->jenis);
                                $no = 1;
                            @endphp
                            @foreach ($grouped as $groupKey => $rows)
                                @php
                                    $first = $rows->first();
                                    $idtrans = $first->idtrans;
                                    $jenis = $first->jenis;
                                    $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>{{ $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_lengkap) ?: '-' }}</td>
                                    <td class="text-muted fst-italic small">Klik untuk detail</td>
                                    <td class="text-muted fst-italic small">–</td>
                                    <td>{{ $rows->sum('qty') }}</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 btn-sm btn-close-group p-0 border-0 bg-transparent"
                                                    data-group="{{ $safeKey }}"
                                                    title="Tutup"
                                                    style="font-size:1rem; cursor:pointer;">▶</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_lengkap) ?: '-' }}</td>
                                        <td>{{ $item->barang }}</td>
                                        <td>{{ $item->kode_asset ?? '-' }}</td>
                                        <td>{{ $item->qty }}</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();

            const dt = $(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', '.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.show();
            });

            $(document).on('click', '.tr-group-header', function() {
                const group = $(this).data('group');
                const $details = $(`.tr-group-detail[data-group="${group}"]`);
                const $icon = $(this).find('.toggle-icon');
                const isOpen = !$details.first().hasClass('d-none');

                if (isOpen) {
                    $details.addClass('d-none');
                    $icon.text('▶');
                    $(this).show();
                } else {
                    $details.removeClass('d-none');
                    $(this).hide(); 
                }
            });
        });
    </script>
@endpush