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

@section('content')
@include('layouts.navbars.auth.topnav', ['title' => 'Wait Approval PO Purchasing Detail'])

@php
    $bsart = $bsart ?? request('bsart');
    $type = $type ?? request('type');

    $codeRows = $waitApprovalPoCodeRows ?? [];
    $nonRows = $waitApprovalPoNonRows ?? [];

    $currentBsart = $bsart ?? '';
    $bsartList = ['ZR15', 'ZR16', 'ZR17'];
    $typeQuery = $type ? '&type=' . $type : '';

    $renderRows = function ($rows) {
        $html = '';

        foreach ($rows as $i => $row) {
            $matnr = trim((string) ($row['MATNR'] ?? ''));
            $matnrClass = $matnr !== '' ? 'item-code-link matnr-cell' : '';

            $html .= '<tr>';
            $html .= '<td class="text-end">' . ($i + 1) . '</td>';
            $html .= '<td class="text-center"><strong>' . e($row['BSART'] ?? '-') . '</strong></td>';
            $html .= '<td class="text-center">' . e(!empty($row['LIFNR']) ? substr($row['LIFNR'], 3, 7) : '-') . '</td>';
            $html .= '<td>' . e($row['NAME1'] ?? '-') . '</td>';
            $html .= '<td class="text-center fw-bold">' . e($row['EBELN'] ?? '-') . '</td>';
            $html .= '<td class="text-end">' . (isset($row['EBELP']) ? number_format((float) $row['EBELP'], 0, '', '') : '-') . '</td>';
            $html .= '<td>' . e($row['TXZ01'] ?? '-') . '</td>';
            $html .= '<td class="' . $matnrClass . '" data-matnr="' . e($matnr) . '">' . e($matnr !== '' ? $matnr : '-') . '</td>';
            $html .= '<td class="text-end">' . number_format((float) ($row['MENGE'] ?? 0), 2, ',', '.') . '</td>';
            $html .= '<td class="text-center">' . e($row['MEINS'] ?? '-') . '</td>';
            $html .= '<td class="text-center">' . e($row['BANFN'] ?? '-') . '</td>';
            $html .= '<td>' . e($row['AFNAM'] ?? '-') . '</td>';
            $html .= '<td class="text-center">' . e($row['WAERS'] ?? '-') . '</td>';
            $html .= '<td class="text-end">' . number_format((float) ($row['WKURS'] ?? 0), 5, ',', '.') . '</td>';
            $html .= '<td class="text-end">' . number_format((float) ($row['NETPR'] ?? 0), 2, ',', '.') . '</td>';
            $html .= '<td class="text-end">' . e($row['PEINH'] ?? '-') . '</td>';
            $html .= '<td class="text-end">' . number_format((float) ($row['NETWR'] ?? 0), 2, ',', '.') . '</td>';
            $html .= '</tr>';
        }

        if (empty($rows)) {
            $html .= '<tr>';
            $html .= '<td class="text-center">-</td>';
            $html .= '<td class="text-center">-</td>';
            $html .= '<td class="text-center">-</td>';
            $html .= '<td class="text-center">No data</td>';
            $html .= '<td class="text-center">-</td>';
            $html .= '<td class="text-center">-</td>';
            $html .= '<td class="text-center">-</td>';
            $html .= '<td class="text-center">-</td>';
            $html .= '<td class="text-center">-</td>';
            $html .= '<td class="text-center">-</td>';
            $html .= '<td class="text-center">-</td>';
            $html .= '<td class="text-center">-</td>';
            $html .= '<td class="text-center">-</td>';
            $html .= '<td class="text-center">-</td>';
            $html .= '<td class="text-center">-</td>';
            $html .= '<td class="text-center">-</td>';
            $html .= '<td class="text-center">-</td>';
            $html .= '</tr>';
        }

        return $html;
    };
@endphp

<div class="container-fluid py-4">
    <div class="row mt-4">
        <div class="col-12">
            <div class="card mb-4 shadow-sm">
                <div class="card-header p-3 d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="mb-0">
                            List Detail Outstanding PO Purchasing
                            @if($currentBsart)
                                - {{ $currentBsart }} ({{ getBsartLabel($currentBsart) }})
                            @endif
                        </h6>
                        <small class="text-muted">
                            @if($currentBsart)
                                {{ $currentBsart }}
                            @else
                                Pilih Document Type terlebih dahulu
                            @endif
                        </small>
                    </div>

                    <a href="{{ url()->previous() }}" class="btn btn-sm btn-secondary mb-0">Back</a>
                </div>

                <div class="card-body px-3 pt-0 pb-3">
                    <div class="mb-3 d-flex flex-wrap gap-2">
                        @foreach ($bsartList as $docType)
                            <a href="{{ url('aps005?bsart=' . $docType . $typeQuery) }}"
                                class="btn btn-sm {{ $currentBsart === $docType ? 'btn-primary' : 'btn-outline-primary' }}">
                                {{ $docType }}
                            </a>
                        @endforeach
                    </div>

                    @if (empty($currentBsart))
                        <div class="alert alert-info mb-0">
                            Silakan pilih <strong>Document Type</strong> terlebih dahulu untuk menampilkan data.
                        </div>
                    @else
                        <ul class="nav nav-tabs mb-3" role="tablist">
                            <li class="nav-item">
                                <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#code-pane" type="button">
                                    CODE <span class="badge bg-primary ms-1">{{ count($codeRows) }}</span>
                                </button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#non-pane" type="button">
                                    NON CODE <span class="badge bg-secondary ms-1">{{ count($nonRows) }}</span>
                                </button>
                            </li>
                        </ul>

                        @php
                            $tableHead = '
                                <thead>
                                    <tr>
                                        <th class="text-center">No</th>
                                        <th class="text-center">Type</th>
                                        <th class="text-center">Code</th>
                                        <th class="text-center">Name</th>
                                        <th class="text-center">PO No</th>
                                        <th class="text-center">Item</th>
                                        <th class="text-center">Remark</th>
                                        <th class="text-center">Item Code</th>
                                        <th class="text-center">Qty</th>
                                        <th class="text-center">Unit</th>
                                        <th class="text-center">PR No</th>
                                        <th class="text-center">User</th>
                                        <th class="text-center">Cur</th>
                                        <th class="text-center">Rate</th>
                                        <th class="text-center">Price</th>
                                        <th class="text-center">UP</th>
                                        <th class="text-center">Amount</th>
                                    </tr>
                                </thead>
                            ';
                        @endphp

                        <div class="tab-content">
                            <div class="tab-pane fade show active" id="code-pane">
                                <div class="table-responsive">
                                    <table class="table table-bordered table-sm align-items-center mb-0" id="table-code">
                                        {!! $tableHead !!}
                                        <tbody>{!! $renderRows($codeRows) !!}</tbody>
                                    </table>
                                </div>
                            </div>

                            <div class="tab-pane fade" id="non-pane">
                                <div class="table-responsive">
                                    <table class="table table-bordered table-sm align-items-center mb-0" id="table-non">
                                        {!! $tableHead !!}
                                        <tbody>{!! $renderRows($nonRows) !!}</tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    #table-code thead th,
    #table-non thead th {
        background-color: #b8ecec !important;
        text-align: center;
        white-space: nowrap;
    }

    #table-code td,
    #table-non td {
        vertical-align: middle;
    }

    .item-code-link {
        cursor: pointer;
        color: var(--bs-primary) !important;
        font-weight: 600;
    }

    .item-code-link:hover {
        text-decoration: underline;
    }
</style>
@endsection

@push('js')
<script>
    function initPoTable(selector) {
        if (!$(selector).length) return;

        if ($.fn.DataTable.isDataTable(selector)) {
            $(selector).DataTable().columns.adjust();
            return;
        }

        $(selector).DataTable({
            pageLength: 10,
            scrollX: true,
            autoWidth: false,
            order: [[4, 'asc'], [5, 'asc']],
            columnDefs: [
                { targets: [0, 5, 8, 13, 14, 15, 16], className: 'text-end' },
                { targets: [1, 2, 4, 9, 10, 12], className: 'text-center' }
            ]
        });
    }

    $(document).ready(function () {
        initPoTable('#table-code');

        $('button[data-bs-toggle="tab"]').on('shown.bs.tab', function () {
            initPoTable('#table-code');
            initPoTable('#table-non');
        });

        $(document).on('dblclick', '.matnr-cell', function () {
            let matnr = $(this).data('matnr');

            if (matnr && matnr !== '-') {
                window.location.href = "{{ url('aps003') }}?matnr=" + encodeURIComponent(matnr);
            }
        });
    });
</script>
@endpush