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

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

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

    $codeRows = $outstandingPrCodeRows ?? [];
    $nonRows = $outstandingPrNonRows ?? [];

    $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';
    };

    $currentBsart = $bsart ?? '';
    $bsartList = ['ZR15', 'ZR16', 'ZR17'];

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

        foreach ($rows as $row) {
            $badat = $row['BADAT'] ?? null;
            $agingDays = (!empty($badat) && $badat !== '0000-00-00')
                ? abs(\Carbon\Carbon::parse($badat)->startOfDay()->diffInDays(now('Asia/Jakarta')->startOfDay()))
                : 0;

            $rowStyle = $agingDays > $limit ? ' style="background-color:#FFE1E1;"' : '';
            $matnr = trim((string) ($row['MATNR'] ?? ''));
            $matnrClass = $matnr !== '' ? 'matnr-cell item-code-link' : '';

            $html .= '<tr' . $rowStyle . '>';
            $html .= '<td class="text-center fw-bold">' . $label . '</td>';
            $html .= '<td class="text-end"></td>';
            $html .= '<td class="text-center" data-order="' . e($dateOrder($row['BADAT'] ?? null)) . '">' . e($formatDate($row['BADAT'] ?? null)) . '</td>';
            $html .= '<td class="text-center fw-bold">' . e($row['BANFN'] ?? '-') . '</td>';
            $html .= '<td class="text-end">' . (isset($row['BNFPO']) ? number_format((float) $row['BNFPO'], 0, '', '') : '-') . '</td>';
            $html .= '<td>' . e($row['AFNAM'] ?? '-') . '</td>';
            $html .= '<td>' . e($row['TXZ01'] ?? '-') . '</td>';
            $html .= '<td class="' . $matnrClass . '" data-matnr="' . e($matnr) . '">' . e($matnr !== '' ? $matnr : '-') . '</td>';
            $html .= '<td>' . e($row['MATKL'] ?? '-') . '</td>';
            $html .= '<td class="text-end">' . number_format((float) ($row['MENGE'] ?? 0), 2, ',', '.') . '</td>';
            $html .= '<td>' . e($row['MEINS'] ?? '-') . '</td>';
            $html .= '<td class="text-center" data-order="' . e($dateOrder($row['LFDAT'] ?? null)) . '">' . e($formatDate($row['LFDAT'] ?? null)) . '</td>';
            $html .= '<td class="text-center" data-order="' . e($dateOrder($row['FRGDT'] ?? null)) . '">' . e($formatDate($row['FRGDT'] ?? null)) . '</td>';
            $html .= '<td class="text-center">' . e(!empty($row['EBELN']) ? $row['EBELN'] : '-') . '</td>';
            $html .= '<td class="text-end">' . (!empty($row['EBELP']) ? number_format((float) $row['EBELP'], 0, '', '') : '-') . '</td>';
            $html .= '<td class="text-end">' . (!empty($row['BSMNG']) ? number_format((float) $row['BSMNG'], 2, ',', '.') : '-') . '</td>';
            $html .= '<td class="text-end">' . number_format((float) ($row['SISA'] ?? 0), 2, ',', '.') . '</td>';
            $html .= '<td class="text-end">' . number_format($agingDays, 0) . '</td>';
            $html .= '</tr>';
        }

        if (empty($rows)) {
            $html .= '<tr>';
            $html .= '<td class="text-center fw-bold">' . $label . '</td>';
            $html .= '<td class="text-end">-</td>';
            $html .= '<td class="text-center">-</td>';
            $html .= '<td class="text-center">-</td>';
            $html .= '<td class="text-end">-</td>';
            $html .= '<td>-</td>';
            $html .= '<td>No data</td>';
            $html .= '<td>-</td>';
            $html .= '<td>-</td>';
            $html .= '<td class="text-end">-</td>';
            $html .= '<td>-</td>';
            $html .= '<td class="text-center">-</td>';
            $html .= '<td class="text-center">-</td>';
            $html .= '<td class="text-center">-</td>';
            $html .= '<td class="text-end">-</td>';
            $html .= '<td class="text-end">-</td>';
            $html .= '<td class="text-end">-</td>';
            $html .= '<td class="text-end">-</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 PR
                            @if($currentBsart)
                                - {{ $currentBsart }} ({{ getBsartLabel($currentBsart) }})
                            @endif
                        </h6>
                        <small class="text-muted">
                            {{ $currentBsart ?: 'Pilih Document Type terlebih dahulu' }}
                        </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('aps004?bsart=' . $docType) }}"
                                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">Section</th>
                                        <th class="text-center">No</th>
                                        <th class="text-center">Date</th>
                                        <th class="text-center">PR No</th>
                                        <th class="text-center">Item</th>
                                        <th class="text-center">Requestor</th>
                                        <th class="text-center">Remark</th>
                                        <th class="text-center">Code</th>
                                        <th class="text-center">Group</th>
                                        <th class="text-center">Qty</th>
                                        <th class="text-center">Unit</th>
                                        <th class="text-center">Delivery</th>
                                        <th class="text-center">Release</th>
                                        <th class="text-center">PO No</th>
                                        <th class="text-center">PO Item</th>
                                        <th class="text-center">PO Qty</th>
                                        <th class="text-center">Sisa</th>
                                        <th class="text-center">Aging</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, 'CODE', 3) !!}</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, 'NON CODE', 14) !!}</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 initOutstandingPrTable(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: [[2, 'desc'], [3, 'desc']],
            columnDefs: [
                { targets: 1, orderable: false, searchable: false },
                { targets: [1, 4, 9, 14, 15, 16, 17], className: 'text-end' },
                { targets: [0, 2, 3, 11, 12, 13], className: 'text-center' }
            ],
            drawCallback: function () {
                const api = this.api();
                const pageInfo = api.page.info();
                const startIndex = pageInfo.start;

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

        return table;
    }

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

        $('button[data-bs-toggle="tab"]').on('shown.bs.tab', function () {
            initOutstandingPrTable('#table-code');
            initOutstandingPrTable('#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