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

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

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

    $codeRows = $outstandingPoCodeRows ?? [];
    $nonRows = $outstandingPoNonRows ?? [];

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

    $formatDate = function ($date) {
        return !empty($date) && $date !== '0000-00-00'
            ? \Carbon\Carbon::parse($date)->format('d-m-Y')
            : '-';
    };

    $dateOrder = function ($date) {
        return !empty($date) && $date !== '0000-00-00'
            ? $date
            : '1900-01-01';
    };

    $renderRows = function ($rows) use ($formatDate, $dateOrder) {
        $html = '';

        foreach ($rows as $i => $row) {
            $menge = (float) ($row['MENGE'] ?? 0);
            $qtyGr = (float) ($row['QTY_GR'] ?? 0);
            $sisa  = $menge - $qtyGr;

            $matnr = !empty($row['MATNR']) ? $row['MATNR'] : '-';
            $matnrCell = $matnr !== '-'
                ? '<span class="item-code-link" title="Double click untuk lihat Last PO" data-matnr="' . e($matnr) . '">' . e($matnr) . '</span>'
                : '-';

            $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" data-order="' . e($dateOrder($row['BEDAT'] ?? null)) . '">' . e($formatDate($row['BEDAT'] ?? null)) . '</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>' . $matnrCell . '</td>';
            $html .= '<td class="text-end">' . number_format($menge, 2, ',', '.') . '</td>';
            $html .= '<td class="text-end">' . number_format($qtyGr, 2, ',', '.') . '</td>';
            $html .= '<td class="text-end fw-bold">' . number_format($sisa, 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 .= '</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
                            @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('aps007?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">Vendor Code</th>
                                        <th class="text-center">Vendor Name</th>
                                        <th class="text-center">PO Date</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 PO</th>
                                        <th class="text-center">Qty GR</th>
                                        <th class="text-center">Sisa</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 po-table" 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 po-table" 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 initOutstandingPoTable(selector) {
        if (!$(selector).length) return;

        if ($.fn.DataTable.isDataTable(selector)) {
            const table = $(selector).DataTable();
            table.columns.adjust().draw(false);
            return table;
        }

        const table = $(selector).DataTable({
            pageLength: 10,
            scrollX: true,
            autoWidth: false,
            order: [[4, 'desc'], [5, 'desc'], [6, 'asc']],
            columnDefs: [
                { targets: 0, orderable: false, searchable: false },
                { targets: [0, 6, 9, 10, 11], className: 'text-end' },
                { targets: [1, 2, 4, 5], className: 'text-center' }
            ],
            drawCallback: function () {
                const api = this.api();
                const pageInfo = api.page.info();
                const startIndex = pageInfo.start;

                api.column(0, { page: 'current' }).nodes().each(function (cell, i) {
                    cell.innerHTML = startIndex + i + 1;
                });
            }
        });

        return table;
    }

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

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

        $(document).on('dblclick', '.item-code-link', function () {
            const matnr = $(this).data('matnr');

            if (!matnr || matnr === '-') {
                return;
            }

            window.open(`{{ url('aps003') }}?matnr=${encodeURIComponent(matnr)}`, '_blank');
        });
    });
</script>
@endpush