@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>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <p class="text-uppercase text-sm">View {{ $title_menu ?? 'Schedule' }}</p>
                        <hr class="horizontal dark mt-0">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="id" class="col-form-label">ID</label>
                                <input class="form-control" type="text" id="id" name="id"
                                    value="{{ $list->request_id ?? '' }}" readonly>
                            </div>
                            <div class="col-md-6 mb-3">
                                <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 ?? '' }}" readonly>
                            </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 ?? '' }}" readonly>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="total_qty" class="col-form-label">Total Qty</label>
                                <input class="form-control" type="number" id="total_qty" name="total_qty"
                                    value="{{ $list->total_qty ?? '' }}" readonly>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Detail Table --}}
                @if (isset($details) && count($details) > 0)
                    <div class="card mt-4">
                        <div class="card-body">
                            <p class="text-uppercase text-sm">Detail Schedule</p>
                            <hr class="horizontal dark mt-0">
                            <div class="table-responsive">
                                <table class="table display" id="table-so-detail">
                                    <thead class="thead-light text-center" style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th>No</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 ($details as $index => $item)
                                            <tr>
                                                <td class="text-center">{{ $index + 1 }}</td>
                                                <td>{{ $item->nomor_so }}</td>
                                                <td>{{ $item->nomor_po }}</td>
                                                <td class="text-center"><a href="#" onclick="openModalItem(this)"
                                                        style="text-decoration: underline;">{{ $item->item }}</a>
                                                </td>
                                                <td>{{ $item->customer }}</td>
                                                <td>{{ $item->material }}</td>
                                                <td class="text-end">{{ $item->qty_order }}</td>
                                                <td class="text-end">{{ $item->current_stock }}</td>
                                                <td></td>
                                                <td class="text-center">{{ $item->gsm }}</td>
                                                <td class="text-end">{{ $item->width }}</td>
                                                <td class="text-end">{{ $item->length }}</td>
                                                <td class="text-end">{{ $item->weight }}</td>
                                                <td class="text-center">{{ $item->uom }}</td>
                                                <td>{{ $item->shipment_by }}</td>
                                                <td>{{ $item->note_marketing }}</td>
                                                <td>{{ $item->note_ppic }}</td>
                                                <td>{{ $item->note_shipping }}</td>
                                                <td>{{ $item->other_note }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                @endif
            </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() {
            //set disable all input form
            $('#{{ $dmenu }}-form').find('label').addClass('disabled');
            $('#{{ $dmenu }}-form').find('input').attr('disabled', 'disabled');
            $('#{{ $dmenu }}-form').find('select').attr('disabled', 'disabled');
            $('#{{ $dmenu }}-form').find('textarea').attr('disabled', 'disabled');
            $('#{{ $dmenu }}-form').find('input[key="true"]').parent('.form-group').css('display',
                '');
            $('#{{ $dmenu }}-form').find('select[key="true"]').parent('.form-group').css('display',
                '');
            $('.icon-modal-search').css('display', 'none');
            // function enable input form
            function enable_text() {
                $('#{{ $dmenu }}-form').find('label').removeClass('disabled');
                $('#{{ $dmenu }}-form').find('input').removeAttr('disabled');
                $('#{{ $dmenu }}-form').find('select').removeAttr('disabled');
                $('#{{ $dmenu }}-form').find('textarea').removeAttr('disabled');
                $('#{{ $dmenu }}-form').find('input[key="true"]').parent('.form-group').css('display',
                    'none');
                $('#{{ $dmenu }}-form').find('select[key="true"]').parent('.form-group').css('display',
                    'none');
                $('.icon-modal-search').css('display', '');
            }
            //event button edit
            $('#{{ $dmenu }}-edit').click(function() {
                enable_text();
                $(this).css('display', 'none');
                $('#{{ $dmenu }}-save').css('display', '');
            });
        });

        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