@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        {{-- button back --}}
                        <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</button>
                        {{-- check authorize edi --}}
                        @if ($authorize->edit == '1')
                            {{-- button save --}}
                            <button class="btn btn-primary mb-0" id="{{ $dmenu }}-save"
                                onclick="event.preventDefault(); document.getElementById('{{ $dmenu }}-form').submit();"><i
                                    class="fas fa-floppy-disk me-1"> </i><span class="font-weight-bold">Simpan</button>
                            @if ($list->status === 'open')
                                <button class="btn btn-success mb-0"
                                    onclick="postData('{{ encrypt($list->{$table_primary->field}) }}')">
                                    <i class="fas fa-share-square me-1"></i>
                                    <span class="font-weight-bold">Posting</span>
                                </button>
                            @endif
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <form role="form" method="POST" action="{{ URL::to($url_menu . '/' . $idencrypt) }}"
                        enctype="multipart/form-data" id="{{ $dmenu }}-form">
                        @csrf
                        @method('PUT')
                        <div class="card-body">
                            <p class="text-uppercase text-sm">Update {{ $title_menu }}</p>
                            <hr class="horizontal dark mt-0">
                            <div class="row">
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <div class="form-group">
                                            <label for="request_id" class="col-form-label">ID</label>
                                            <input class="form-control" type="text" id="request_id" name="request_id"
                                                value="{{ $list->request_id }}" readonly>
                                        </div>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="request_date" class="col-form-label">Request Date</label>
                                        <input class="form-control" type="date" id="request_date" name="request_date"
                                            value="{{ $list->request_date }}">
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <div class="form-group">
                                            <label for="request_by" class="col-form-label">Request by</label>
                                            <input class="form-control" type="text" id="request_by" name="request_by"
                                                value="{{ $list->request_by }}">
                                        </div>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <div class="form-group">
                                            <label for="total_qty" class="col-form-label">Total Order Qty</label>
                                            <input class="form-control" type="number" id="total_qty" name="total_qty"
                                                value="{{ $list->total_qty }}" min="0" readonly>
                                        </div>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <div class="form-group">
                                            <label for="nomor_so" class="col-form-label">Nomor SO</label>
                                            <div class="d-flex">
                                                <input class="form-control me-2" type="text" id="nomor_so"
                                                    name="nomor_so">
                                                <button type="button" class="btn btn-primary mb-0" id="button_simpan"
                                                    onclick="listSO()"><i class="fas fa-search"></i></button>
                                            </div>
                                        </div>
                                    </div>
                                    <h5 class="mt-4"><strong>Detail</strong></h5>
                                    <div class="table-responsive">
                                        <table class="table display" id="table-so-detail">
                                            <thead class="thead-light" style="background-color: #00b7bd4f;">
                                                <tr>
                                                    <th>Action</th>
                                                    <th>SO</th>
                                                    <th>PO</th>
                                                    <th>Item</th>
                                                    <th>Customer</th>
                                                    <th>Material</th>
                                                    <th>Qty PO</th>
                                                    <th>Current Stock</th>
                                                    <th>Actual Qty</th>
                                                    <th>GSM</th>
                                                    <th>Width</th>
                                                    <th>Length</th>
                                                    <th>Weight</th>
                                                    <th>Shipment By</th>
                                                    <th>Note Marketing</th>
                                                    <th>Note PPC</th>
                                                    <th>Note Shipping</th>
                                                    <th>Other Note</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($detail as $item)
                                                    <tr>
                                                        <input type="hidden" name="remark[]" value="update">
                                                        <input type="hidden" name="id[]" value="{{ $item->id }}">
                                                        <td><button type="button" class="btn btn-sm btn-danger"
                                                                onclick="deleteRow(this)">X</button></td>
                                                        <td style="text-align: center;"><input type="hidden"
                                                                name="nomor_so[]"
                                                                value="{{ $item->nomor_so }}">{{ $item->nomor_so }}</td>
                                                        <td style="text-align: center;"><input type="hidden"
                                                                name="nomor_po[]"
                                                                value="{{ $item->nomor_po }}">{{ $item->nomor_po }}</td>
                                                        <td style="text-align: center;"><input type="hidden"
                                                                name="item[]" value="{{ $item->item }}"><a
                                                                href="#" onclick="openModalItem(this)"
                                                                style="text-decoration: underline;">{{ $item->item }}</a>
                                                        </td>
                                                        <td><input type="hidden" name="customer[]"
                                                                value="{{ $item->customer }}">{{ $item->customer }}</td>
                                                        <td><input type="hidden" name="material[]"
                                                                value="{{ $item->material }}">{{ $item->material }}</td>
                                                        <td><input type="number" name="qty_po[]"
                                                                class="form-control qty-po" placeholder="Qty PO"
                                                                min="0" value="{{ $item->qty_order }}"></td>
                                                        <td></td>
                                                        <td style="text-align: center;">{{ $item->actual_qty }}</td>
                                                        <td style="text-align: center;"><input type="hidden"
                                                                name="gsm[]"
                                                                value="{{ $item->gsm }}">{{ $item->gsm }}</td>
                                                        <td><input type="hidden" name="width[]"
                                                                value="{{ $item->width }}">{{ $item->width }}</td>
                                                        <td><input type="hidden" name="length[]"
                                                                value="{{ $item->length }}">{{ $item->length }}</td>
                                                        <td><input type="hidden" name="weight[]"
                                                                value="{{ $item->weight }}">{{ $item->weight }}</td>
                                                        <td><input type="hidden" name="shipment_by[]"
                                                                value="{{ $item->shipment_by }}">{{ $item->shipment_by }}
                                                        </td>
                                                        <td>
                                                            <textarea name="note_marketing[]" class="form-control">{{ $item->note_marketing }}</textarea>
                                                        </td>
                                                        <td>
                                                            <textarea name="note_ppic[]" class="form-control" readonly></textarea>
                                                        </td>
                                                        <td>
                                                            <textarea name="note_shipping[]" class="form-control">{{ $item->note_shipping }}</textarea>
                                                        </td>
                                                        <td>
                                                            <textarea name="other_note[]" class="form-control">{{ $item->other_note }}</textarea>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <hr class="horizontal dark">
                        </div>
                        <div class="card-footer align-items-center pt-0 pb-2">
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="searchSOModal" tabindex="-1" role="dialog" aria-labelledby="searchSOModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="searchSOModalLabel">Daftar SO</h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped" id="table-so">
                            <thead class="thead-light">
                                <tr>
                                    <th>
                                        <input type="checkbox" id="checkAllSO">
                                    </th>
                                    <th>SO</th>
                                    <th>PO</th>
                                    <th>Customer</th>
                                    <th>Item</th>
                                    <th>Material</th>
                                    <th>Order Qty</th>
                                    <th>Remaining Qty</th>
                                    <th>Delivered Qty</th>
                                    <th>Current Stock (Roll)</th>
                                    <th>GSM</th>
                                    <th>Width</th>
                                    <th>Length</th>
                                    <th>Weight</th>
                                    <th>UOM</th>
                                    <th>Shipment By</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer d-flex justify-content-between">
                    <button type="button" class="btn btn-primary" onclick="saveSelectedSO()">Save</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="modalItem" tabindex="-1" role="dialog" aria-labelledby="modalItemLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalItemLabel">Detail Item</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">X</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped" id="table-item">
                            <thead class="thead-light">
                                <tr>
                                    <th>Delivery Date</th>
                                    <th>Order Quantity</th>
                                    <th>Confirm Quantity</th>
                                    <th>Delivered Quantity</th>
                                    <th>Sales Unit</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- check flag js on dmenu --}}
    @if ($jsmenu == '1')
        @if (view()->exists("js.{$dmenu}"))
            @push('addjs')
                {{-- file js in folder (resources/views/js) --}}
                @include('js.' . $dmenu);
            @endpush
        @else
            @push('addjs')
                <script>
                    Swal.fire({
                        title: 'JS Not Found!!',
                        text: 'Please Create File JS',
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                </script>
            @endpush
        @endif
    @endif
@endsection
@push('js')
    <script>
        $(document).ready(function() {
            // Event untuk checkbox "check all"
            $('#checkAllSO').on('change', function() {
                const isChecked = $(this).is(':checked');
                $('#table-so tbody input[type="checkbox"]:not(:disabled)').prop('checked', isChecked);
            });

            $('#table-so tbody').on('change', 'input[type="checkbox"]', function() {
                const all = $('#table-so tbody input[type="checkbox"]:not(:disabled)').length;
                const checked = $('#table-so tbody input[type="checkbox"]:not(:disabled):checked').length;
                $('#checkAllSO').prop('checked', all === checked);
            });

            // Hitung ulang saat input qty-po kehilangan fokus atau diubah
            $(document).on('blur change', '.qty-po', function() {
                calculateTotalQty();
            });

            // Hitung juga saat tekan Enter
            $(document).on('keydown', '.qty-po', function(e) {
                if (e.key === 'Enter') {
                    e.preventDefault(); // Hindari submit form
                    calculateTotalQty();
                }
            });
            calculateTotalQty();
        });

        function deleteRow(button) {
            // Ambil elemen <tr> dari tombol
            const row = button.closest("tr");

            // Cari input dengan name="remark[]"
            const remarkInput = row.querySelector('input[name="remark[]"]');
            if (remarkInput) {
                remarkInput.value = "delete";
            }

            // Sembunyikan baris
            row.style.display = "none";

            // Mengurangi total qty
            const qty_po = row.querySelector('input[name="qty_po[]"]').value; // ambil qty_po yg dihapus
            const total_qty = $('#total_qty').val();
            const hitung = total_qty - qty_po;

            $('#total_qty').val(hitung);
        }

        function listSO() {
            var nomor_so = document.getElementById('nomor_so').value;
            $.ajax({
                url: 'https://fioridev.spunindo.com/sap/bc/zsr_jsonhd/ZFSOSCHEDULE?sap-client=110&sap-user=INT-1&sap-password=msj123456&sap-language=EN&format=json&p_eyear=2021&p_emonth=11&p_vbeln=' +
                    nomor_so,
                type: 'POST',
                header: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    console.log(response);
                    // arahkan ke function load data

                    loadDataToTable(response);
                },
                error: function(xhr, status, error) {
                    console.error(error);
                }
            });

        }

        function loadDataToTable(data) {
            var tbody = $('#table-so tbody');
            tbody.empty();

            var listData = data['ET_ZVSOSCHEDULELINE'];

            // Tampilkan SweetAlert loading
            Swal.fire({
                title: 'Memuat data...',
                html: 'Silakan tunggu beberapa saat.',
                allowOutsideClick: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });

            var requests = listData.map((item, index) => {
                // Request pertama: detail FG
                var request1 = $.ajax({
                    url: 'https://fiori.spunindo.com/sap/bc/zsr_jsonhd/ZFMMSTOCKFG?sap-client=300&sap-user=JIS-2&sap-password=K35RCI&sap-language=EN&format=json&p_matnr=' +
                        item.MATNR,
                    type: 'POST',
                });

                // Request kedua: ambil detail jadwal untuk DLVQTY_SU
                var request2 = $.ajax({
                    url: 'https://fiori.spunindo.com/sap/bc/zsr_jsonhd/ZFSOSCHEDULEDTL?sap-client=300&sap-user=JIS-2&sap-password=K35RCI&sap-language=EN&format=json&p_vbeln=' +
                        item.VBELN + '&p_posnr=' + item.POSNR,
                    type: 'POST',
                });

                return Promise.all([request1, request2])
                    .then(function([response1, response2]) {
                        var listItem = response1['ET_ZVMB52_FG'];
                        const filtered = listItem.filter(list => list.POSNR === item.POSNR);

                        // Hitung total qty order dari DLVQTY_SU
                        const detailList = response2['ET_ZVSOSCHEDULEDTL'] || [];
                        const totalQtyDlv = detailList
                            .filter(d => d.VBELN === item.VBELN && d.POSNR === item.POSNR)
                            .reduce((sum, curr) => sum + parseFloat(curr.DLVQTY_SU || 0), 0);

                        const totalQtyOrder = detailList
                            .filter(d => d.VBELN === item.VBELN && d.POSNR === item.POSNR)
                            .reduce((sum, curr) => sum + parseFloat(curr.WMENG || 0), 0);
                        const remainQty = totalQtyOrder - totalQtyDlv;
                        var warna = "";
                        var atr = "";
                        if (remainQty > 0) {
                            warna = "yellow";
                        } else {
                            atr = "disabled";
                        }
                        return `
                            <tr style="background-color: ${warna};">
                                <td><input type="checkbox" name="select_so[]" value="${index}" ${atr}></td>
                                <td>${item.VBELN}</td>
                                <td>${item.BSTNK}</td>
                                <td>${item.NAMA_CUST}</td>
                                <td>${parseInt(item.POSNR, 10)}</td>
                                <td>${item.MATNR}</td>
                                <td>${totalQtyOrder}</td>
                                <td>${remainQty}</td>
                                <td>${totalQtyDlv}</td>
                                <td>${filtered.length}</td>
                                <td>${item.ZZGSM}</td>
                                <td>${item.ZZWIDTHROLL}</td>
                                <td>${item.ZZLENGTH}</td>
                                <td>${item.LMENG}</td>
                                <td>${item.MEINS}</td>
                                <td>${item.SHIPMENTBY}</td>
                            </tr>
                        `;
                    })
                    .catch(function(error) {
                        console.error("Error loading data for MATNR: " + item.MATNR, error);
                        return '';
                    });
            });

            // Tunggu semua AJAX selesai
            Promise.all(requests).then(function(rows) {
                Swal.close(); // Tutup SweetAlert loading
                tbody.append(rows.join('')); // Gabungkan semua baris
                $('#searchSOModal').modal('show'); // Tampilkan modal setelah semua data siap
            });
        }

        function saveSelectedSO() {
            $('#table-so tbody input[type="checkbox"]:checked').each(function() {
                var row = $(this).closest('tr');

                var nomorSO = row.find('td:eq(1)').text();
                var nomorPO = row.find('td:eq(2)').text();
                var namaCust = row.find('td:eq(3)').text();
                var item = row.find('td:eq(4)').text();
                var material = row.find('td:eq(5)').text();
                var orderQty = row.find('td:eq(6)').text();
                var remainingQty = row.find('td:eq(7)').text();
                var dlvQty = row.find('td:eq(8)').text();
                var stock = row.find('td:eq(9)').text();
                var gsm = row.find('td:eq(10)').text();
                var width = row.find('td:eq(11)').text();
                var length = row.find('td:eq(12)').text();
                var weight = row.find('td:eq(13)').text();
                var uom = row.find('td:eq(14)').text();
                var shipmentby = row.find('td:eq(15)').text();

                var newRow = `
                    <tr>
                        <input type="hidden" name="remark[]" value="insert">
                        <td><button type="button" class="btn btn-sm btn-danger" onclick="$(this).closest('tr').remove()">X</button></td>
                        <td style="text-align: center;"><input type="hidden" name="nomor_so[]" value="${nomorSO}">${nomorSO}</td>
                        <td style="text-align: center;"><input type="hidden" name="nomor_po[]" value="${nomorPO}">${nomorPO}</td>
                        <td style="text-align: center;"><input type="hidden" name="item[]" value="${item}">${item}</td>
                        <td><input type="hidden" name="customer[]" value="${namaCust}">${namaCust}</td>
                        <td><input type="hidden" name="material[]" value="${material}">${material}</td>
                        <td><input type="number" name="qty_po[]" class="form-control qty-po" placeholder="Qty PO" min="0"></td>
                        <td style="text-align: center;">${remainingQty}</td>
                        <td style="text-align: center;"><input type="hidden" name="deliv_qty[]" value="${dlvQty}">${dlvQty}</td>
                        <td style="text-align: center;"><input type="hidden" name="current_stock[]" value="${stock}">${stock}</td>
                        <td style="text-align: center;"><input type="hidden" name="gsm[]" value="${gsm}">${gsm}</td>
                        <td style="text-align: center;"><input type="hidden" name="width[]" value="${width}">${width}</td>
                        <td style="text-align: center;"><input type="hidden" name="length[]" value="${length}">${length}</td>
                        <td style="text-align: center;"><input type="hidden" name="weight[]" value="${weight}">${weight}</td>
                        <td><input type="hidden" name="shipment_by[]" value="${shipmentby}">${shipmentby}</td>
                        <td><textarea name="note_marketing[]" class="form-control"></textarea></td>
                        <td><textarea name="note_ppic[]" class="form-control" readonly></textarea></td>
                        <td><textarea name="note_shipping[]" class="form-control"></textarea></td>
                        <td><textarea name="other_note[]" class="form-control"></textarea></td>
                    </tr>
                `;

                $('#table-so-detail tbody').append(newRow);
            });

            $('#searchSOModal').modal('hide');
        }

        function calculateTotalQty() {
            let total = 0;
            $('.qty-po:visible').each(function() { // hanya elemen yang terlihat
                const value = parseFloat($(this).val());
                if (!isNaN(value)) {
                    total += value;
                }
            });
            $('#total_qty').val(total);
        }

        function postData(id) {
            if (!id) return;
            Swal.fire({
                title: 'Konfirmasi',
                text: 'Yakin ingin posting data ini?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Ya, Posting',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    Swal.fire({
                        title: 'Memproses...',
                        allowOutsideClick: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });
                    $.post(`{{ url($url_menu) }}/${id}/post`, {
                        _token: '{{ csrf_token() }}',
                        id: id
                    }, function(response) {
                        if (response.success) {
                            Swal.fire('Berhasil!', 'Data berhasil diposting.', 'success').then(() => {
                                window.location.href = '{{ url('/mrkmsj') }}'
                            });
                        } else {
                            Swal.fire('Gagal', response.message || 'Terjadi kesalahan.', 'error');
                        }
                    }).fail(() => Swal.fire('Gagal', 'Terjadi kesalahan jaringan atau server.', 'error'));
                }
            });
        }

        function openModalItem(el) {
            // el adalah elemen <a> yang diklik
            var row = el.closest('tr'); // ambil baris tempat <a> itu berada
            var cells = row.querySelectorAll('td'); // ambil semua <td> dalam baris itu

            // Ambil nilai dari kolom tertentu
            var noSo = cells[1].textContent;
            var noItem = cells[3].textContent;

            $.ajax({
                url: 'https://fiori.spunindo.com/sap/bc/zsr_jsonhd/ZFSOSCHEDULEDTL?sap-client=300&sap-user=JIS-2&sap-password=K35RCI&sap-language=EN&format=json&p_vbeln=' +
                    noSo + '&p_posnr=' +
                    noItem,
                type: 'POST',
                header: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    var tbody = $('#table-item tbody');
                    tbody.empty();

                    var listDataItem = response['ET_ZVSOSCHEDULEDTL'];
                    console.log(listDataItem);


                    listDataItem.forEach(function(item, index) {
                        var row = `
                            <tr>
                                <td>${item.EDATU}</td>
                                <td>${item.WMENG}</td>
                                <td>${item.BMENG}</td>
                                <td>${item.DLVQTY_SU}</td>
                                <td>${item.VRKME}</td>
                            </tr>
                        `;
                        tbody.append(row);
                    });

                    $('#modalItem').modal('show'); // Tampilkan modal setelah semua data siap

                },
                error: function(xhr, status, error) {
                    console.error(error);
                }
            });
        }
    </script>
@endpush