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

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

    @php
        $fmtMutasi = function ($value) {
            if ($value === null || $value === '') {
                return '0';
            }

            $formatted = number_format((float) $value, 2, ',', '.');
            return rtrim(rtrim($formatted, '0'), ',');
        };

        $isGrayArea = function ($lokasi) {
            $lokasi = strtolower((string) $lokasi);

            return str_contains($lokasi, 'gray') || str_contains($lokasi, 'grey') || str_contains($lokasi, 'gry');
        };

        $tableResult = collect($table_result ?? []);

        $hasGrayArea = $tableResult->contains(function ($row) use ($isGrayArea) {
            return $isGrayArea($row->lokasi ?? '');
        });
    @endphp

    <div class="container-fluid py-4">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Result {{ $title_menu ?? 'Mutasi Stok' }}</h5>
            </div>

            <hr class="horizontal dark mt-0">

            <div class="row px-4 py-2">
                <div class="col">
                    <button class="btn btn-secondary mb-0" onclick="history.back()">
                        <i class="fas fa-circle-left me-1"></i>
                        <span class="font-weight-bold">Kembali</span>
                    </button>
                </div>
            </div>

            <div class="row px-4 py-2">
                <div class="table-responsive">
                    <table class="table display align-items-center mb-0" id="list_{{ $dmenu }}">
                        <thead class="thead-light" style="background-color: #00b7bd4f;">
                            <tr>
                                <th class="text-center">No</th>
                                <th>Bag ID</th>
                                <th>Barcode Value</th>
                                <th>Lokasi</th>
                                <th>SKU</th>
                                <th>Material</th>
                                <th>Grade</th>
                                <th>Tipe Material</th>

                                <th class="text-end">{{ $mutasi_headers['saldo_awal_prev'] ?? 'Saldo Awal Bulan Lalu' }}
                                </th>
                                <th class="text-end">{{ $mutasi_headers['in_prev'] ?? 'Mutasi In Bulan Lalu' }}</th>
                                <th class="text-end">{{ $mutasi_headers['out_prev'] ?? 'Mutasi Out Bulan Lalu' }}</th>
                                <th class="text-end">{{ $mutasi_headers['akhir_prev'] ?? 'Akhir Bulan Lalu' }}</th>

                                <th class="text-end">{{ $mutasi_headers['in_curr'] ?? 'Mutasi In Periode' }}</th>
                                <th class="text-end">{{ $mutasi_headers['out_curr'] ?? 'Mutasi Out Periode' }}</th>
                                <th class="text-end">{{ $mutasi_headers['akhir_curr'] ?? 'Akhir Periode' }}</th>

                                <th class="text-end">{{ $mutasi_headers['so'] ?? 'SO' }}</th>
                                <th class="text-end">{{ $mutasi_headers['selisih'] ?? 'Selisih' }}</th>
                            </tr>
                        </thead>

                        <tbody>
                            @forelse ($tableResult as $index => $row)
                                <tr class="{{ $isGrayArea($row->lokasi ?? '') ? 'row-gray-area' : '' }}">
                                    <td class="text-center">{{ $index + 1 }}</td>
                                    <td>{{ $row->bag_id ?? '-' }}</td>
                                    <td>{{ $row->barcode_value ?? '-' }}</td>
                                    <td>{{ $row->lokasi ?? '-' }}</td>
                                    <td>{{ $row->sku_code ?? '-' }}</td>
                                    <td>{{ $row->material ?? '-' }}</td>
                                    <td>{{ $row->grade ?? '-' }}</td>
                                    <td>{{ $row->tipe_material ?? '-' }}</td>

                                    <td class="text-end">{{ $fmtMutasi($row->saldo_awal_prev ?? 0) }}</td>
                                    <td class="text-end">{{ $fmtMutasi($row->in_prev ?? 0) }}</td>
                                    <td class="text-end">{{ $fmtMutasi($row->out_prev ?? 0) }}</td>
                                    <td class="text-end">{{ $fmtMutasi($row->akhir_prev ?? 0) }}</td>

                                    <td class="text-end">{{ $fmtMutasi($row->in_curr ?? 0) }}</td>
                                    <td class="text-end">{{ $fmtMutasi($row->out_curr ?? 0) }}</td>
                                    <td class="text-end">{{ $fmtMutasi($row->akhir_curr ?? 0) }}</td>

                                    <td class="text-end">{{ $fmtMutasi($row->so ?? 0) }}</td>
                                    <td class="text-end">{{ $fmtMutasi($row->selisih ?? 0) }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="17" class="text-center text-muted py-4">
                                        Data not found!
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                @if ($hasGrayArea)
                    <div class="nav-wrapper mt-2" id="noted">
                        <div class="nav-wrapper" id="noted"><code>Note : <i aria-hidden="true" style="color: #e9ecef;"
                                    class="fas fa-circle"></i> Gray Area = barang belum masuk stok / masih area
                                sementara</code>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
@endsection

@push('js')
    <style>
        .row-gray-area td {
            background-color: #e9ecef !important;
        }
    </style>
    <script>
        $(document).ready(function() {
            if ($.fn.DataTable.isDataTable('#list_{{ $dmenu }}')) {
                $('#list_{{ $dmenu }}').DataTable().destroy();
            }

            $('#list_{{ $dmenu }}').DataTable({
                language: {
                    search: "Cari :",
                    lengthMenu: "Tampilkan _MENU_ baris",
                    zeroRecords: "Maaf - Data tidak ada",
                    info: "Data _START_ - _END_ dari _TOTAL_",
                    infoEmpty: "Tidak ada data",
                    infoFiltered: "(pencarian dari _MAX_ data)"
                },
                responsive: false,
                scrollX: true,
                dom: 'Bfrtip',
                buttons: [
                    @if (($authorize->excel ?? '0') == '1')
                        {
                            extend: 'excelHtml5',
                            text: '<i class="fas fa-file-excel me-1 text-lg text-success"></i><span class="font-weight-bold"> Excel</span>',
                            title: 'Mutasi Stok',
                            autoFilter: true,
                            sheetName: 'Mutasi Stok',

                            exportOptions: {
                                format: {
                                    body: function(data, row, column, node) {

                                        // Kolom angka: Saldo Awal sampai Selisih
                                        if (column >= 8 && column <= 16) {

                                            let value = $(node).text().trim();

                                            // Hapus spasi
                                            value = value.replace(/\s/g, '');

                                            // Format Indonesia menjadi angka Excel
                                            // Contoh: 1.000,50 menjadi 1000.50
                                            if (/^-?[\d.,]+$/.test(value)) {
                                                value = value
                                                    .replace(/\./g, '')
                                                    .replace(',', '.');

                                                return value;
                                            }
                                        }

                                        return data;
                                    }
                                }
                            }
                        },
                    @endif
                    @if (($authorize->pdf ?? '0') == '1')
                        {
                            extend: 'pdfHtml5',
                            text: '<i class="fas fa-file-pdf me-1 text-lg text-danger"></i><span class="font-weight-bold"> PDF</span>',
                            title: 'Mutasi Stok',
                            orientation: 'landscape',
                            pageSize: 'A4',
                            customize: function(doc) {
                                doc.styles.tableHeader.fillColor = '#00b7bd';
                                doc.defaultStyle.fontSize = 7;
                                doc.styles.tableHeader.fontSize = 7;
                            }
                        },
                    @endif
                    @if (($authorize->print ?? '0') == '1')
                        {
                            extend: 'print',
                            text: '<i class="fas fa-print me-1 text-lg text-info"></i><span class="font-weight-bold"> Print</span>',
                            title: 'Mutasi Stok'
                        },
                    @endif
                ]
            });

            $('.dt-button').addClass('btn btn-secondary');
            $('.dt-button').removeClass('dt-button');
        });
    </script>
@endpush