@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">Back</button>
                        {{-- check authorize add --}}
                        @if ($authorize->add == '1')
                            {{-- button save --}}
                            <button class="btn btn-primary mb-0" id="btnSave"
                                onclick="event.preventDefault(); document.getElementById('{{ $dmenu }}-form').submit();"><i
                                    class="fas fa-floppy-disk me-1"> </i><span class="font-weight-bold">Save</button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <form role="form" method="POST" action="{{ URL::to($url_menu) }}" id="{{ $dmenu }}-form"
        enctype="multipart/form-data">
        @csrf
        <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">Input Delivery Order</p>
                            <hr class="horizontal dark mt-0">
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label for="example-text-input" class="form-control-label">
                                        Loading
                                    </label>
                                    <input class="form-control " type="text" value="E" name="stuff_area"
                                        maxlength="1" readonly>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label for="example-text-input" class="form-control-label">
                                        Truck Type
                                    </label>
                                    <select class="form-select" name="truck_type">
                                        <option value=""></option>
                                        @foreach ($msttruck as $msttruck)
                                            <option value="{{ $msttruck->nama_truck }}">
                                                {{ $msttruck->nama_truck }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <hr class="horizontal dark mt-0">
                            <!-- Buttons -->
                            <div class="d-flex mb-3">
                                <button type="button" class="btn btn-primary me-2" id="btnAdd">
                                    <i class="fas fa-plus" aria-hidden="true"></i> Add Data
                                </button>
                            </div>

                            <!-- Table  ADD PR-->
                            <div class="table-responsive">
                                <table class="table table-hover" id="table-do">
                                    <thead style="background-color: #daecff; text-align: left;">
                                        <tr>
                                            <th>Action</th>
                                            <th>Nomor DO</th>
                                            <th>Customer Name</th>
                                            <th>License Plate</th>
                                            <th>Driver Name</th>
                                            <th>Total Weight (kg)</th>
                                            <th>Destination</th>
                                            <th>Stuffing Group</th>
                                            <th>Estimated Time (minute)</th>
                                        </tr>
                                    </thead>
                                    <tbody id="table-data">
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="container-fluid py-1">
            <div class="row">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-body">
                            <div class="col-12 d-flex justify-content-between align-items-center">
                                <p class="text-uppercase text-sm">Input Planning Time</p>
                                <p id="textLoad" class="mb-0" hidden>
                                    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                                    Calculating...
                                </p>
                            </div>
                            <hr class="horizontal dark mt-0">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="example-text-input" class="form-control-label">Total Estimated
                                        Time (minute)</label>
                                    <input class="form-control " type="text" name="total_estimated" id="total_estimated"
                                        readonly>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="example-text-input" class="form-control-label">Planned
                                        Arrival</label>
                                    <input class="form-control " type="datetime-local" name="plan_arrival"
                                        id="plan_arrival">
                                    <p class="text-secondary text-xs pt-1 px-1">
                                        *) Rencana waktu dan tanggal kedatangan
                                    </p>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="example-text-input" class="form-control-label">Planned
                                        Departure</label>
                                    <input class="form-control " type="datetime-local" name="plan_departure"
                                        id="plan_departure">
                                    <p class="text-secondary text-xs pt-1 px-1">
                                        *) Rencana waktu dan tanggal keberangkatan
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
    {{-- 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>
        var cust_id = '';
        let rowIndex = 0; // counter global
        let jumlahBaris = 0;
        let estimasiWaktu = 0;
        let extraTime = 15; // misalnya tambahan waktu manual
        let totalEstimate = 0;

        const inputDateTime = document.getElementById('plan_arrival');

        inputDateTime.addEventListener('change', function() {
            const inputValue = this.value; // format: "YYYY-MM-DDTHH:mm"
            if (!inputValue) return;

            // Buat object Date dari input
            let selectedDate = new Date(inputValue);

            if (isNaN(selectedDate.getTime())) {
                console.error("Format tanggal/waktu tidak valid");
                return;
            }

            // Tambahkan hasilBulat (menit)
            selectedDate.setMinutes(selectedDate.getMinutes() + totalEstimate);

            // Format kembali ke datetime-local string "YYYY-MM-DDTHH:mm"
            const year = selectedDate.getFullYear();
            const month = String(selectedDate.getMonth() + 1).padStart(2, '0');
            const day = String(selectedDate.getDate()).padStart(2, '0');
            const hours = String(selectedDate.getHours()).padStart(2, '0');
            const minutes = String(selectedDate.getMinutes()).padStart(2, '0');

            const newDateTimeLocal = `${year}-${month}-${day}T${hours}:${minutes}`;

            // Update input value dengan waktu baru

            document.getElementById('plan_departure').value = newDateTimeLocal;
        });
        $(document).ready(function() {

        });

        function loadData(list, index) {
            cust_id = list['KUNNR'];

            if (cust_id == '1400019' || cust_id == '1400022') {
                extraTime = 30; // misalnya tambahan waktu manual
            }
            let plat = list['VEHICLENO'] === '' ? '-' : list['VEHICLENO'];
            let driver_name = list['DRIVERNAME'] === '' ? '-' : list['DRIVERNAME'];

            $("#cust_id-" + index).val(list['KUNNR']);
            $("#cust_name-" + index).val(list['SHIPTONAME']);
            $("#license_plate-" + index).val(plat);
            $("#driver_name-" + index).val(driver_name);
            $("#total_weight-" + index).val(list['LGMNG']);
            $("#destination-" + index).val(list['SHIPTOADDR']);
            $("#stuff_group-" + index).val(list['TEAM_LOADING']);
        }

        async function cekMaterial(list, index) {
            const requests = list.map(item => {
                return new Promise((resolve, reject) => {
                    const materialCode = item.MATNR;
                    const jumlahRoll = item.LFIMG;

                    if (!materialCode) {
                        console.warn("Item tidak memiliki kode material:", item);
                        return resolve(0);
                    }

                    $.ajax({
                        url: 'https://fiori.spunindo.com/sap/bc/zsr_jsonhd/ZFMMSTOCKFG?sap-client=300&sap-user=JIS-1&sap-password=MSJI76&sap-language=EN&format=json&p_matnr=' +
                            materialCode,
                        type: 'POST',
                        header: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(response) {
                            const data = response['ET_ZVMB52_FG'];
                            let result;
                            let bendel = null;

                            // Pastikan data adalah array
                            if (Array.isArray(data) && data.length > 0) {
                                // Cek apakah semua ATWRT_BUNDLE kosong
                                const allEmpty = data.every(item => !item.ATWRT_BUNDLE);

                                if (allEmpty) {
                                    // Ambil satu object pertama kalau semuanya kosong
                                    result = data[0];
                                } else {
                                    // Ambil object dengan nilai ATWRT_BUNDLE terbesar
                                    result = data.reduce((max, item) => {
                                        const currentVal = parseFloat(item
                                            .ATWRT_BUNDLE) || 0;
                                        const maxVal = parseFloat(max
                                            .ATWRT_BUNDLE) || 0;
                                        return currentVal > maxVal ? item : max;
                                    });
                                }

                                const matnr = result['MATNR'];
                                const match = matnr ? matnr.match(/(\d+)[A-Z]$/i) :
                                    null;
                                if (!match) {
                                    console.warn("Format MATNR tidak sesuai:", matnr);
                                    return resolve(0);
                                }

                                // Hitung lebar roll (misal 1200 → 1.2)
                                const number = parseInt(match[1], 10);
                                const widthRoll = number / 1000;
                                // ---- Tahap pengecekan jika ATWRT_BUNDLE kosong ----
                                if (!result.ATWRT_BUNDLE) {
                                    const lebar = widthRoll;
                                    if (lebar >= 0.001 && lebar <= 0.0699) {
                                        bendel = 12;
                                    } else if (lebar >= 0.07 && lebar <= 0.0899) {
                                        bendel = 10;
                                    } else if (lebar >= 0.09 && lebar <= 0.199) {
                                        bendel = 5;
                                    } else if (lebar >= 0.2 && lebar <= 0.499) {
                                        bendel = 2;
                                    } else if (lebar > 0.5) {
                                        bendel = 1;
                                    }

                                    // Simpan hasil ke object
                                    result.ATWRT_BUNDLE = bendel ? bendel.toString() : '';
                                } else {
                                    bendel = result.ATWRT_BUNDLE;
                                }

                                const tinggiRoll = widthRoll * bendel;
                                const tinggiKontainer = 2.4;
                                const maksimalTumpukan = Math.floor(tinggiKontainer /
                                    tinggiRoll);

                                const totalKoli = jumlahRoll / bendel;
                                const jumlahTrip = totalKoli / maksimalTumpukan;

                                const durasiTrip = 50; // detik
                                const estimatedTime = Math.ceil(jumlahTrip) * (durasiTrip /
                                    60); // menit

                                resolve(estimatedTime);
                            } else {
                                const matnr = materialCode;
                                const match = matnr ? matnr.match(/(\d+)[A-Z]$/i) :
                                    null;
                                if (!match) {
                                    console.warn("Format MATNR tidak sesuai:", matnr);
                                    return resolve(0);
                                }

                                // Hitung lebar roll (misal 1200 → 1.2)
                                const number = parseInt(match[1], 10);
                                const widthRoll = number / 1000;
                                // ---- Tahap pengecekan jika ATWRT_BUNDLE kosong ----
                                const lebar = widthRoll;
                                if (lebar >= 0.001 && lebar <= 0.0699) {
                                    bendel = 12;
                                } else if (lebar >= 0.07 && lebar <= 0.0899) {
                                    bendel = 10;
                                } else if (lebar >= 0.09 && lebar <= 0.199) {
                                    bendel = 5;
                                } else if (lebar >= 0.2 && lebar <= 0.499) {
                                    bendel = 2;
                                } else if (lebar > 0.5) {
                                    bendel = 1;
                                }


                                const tinggiRoll = widthRoll * bendel;
                                const tinggiKontainer = 2.4;
                                const maksimalTumpukan = Math.floor(tinggiKontainer /
                                    tinggiRoll);

                                const totalKoli = jumlahRoll / bendel;
                                const jumlahTrip = totalKoli / maksimalTumpukan;

                                const durasiTrip = 50; // detik
                                const estimatedTime = Math.ceil(jumlahTrip) * (durasiTrip /
                                    60); // menit

                                resolve(estimatedTime);
                            }
                        },
                        error: function(xhr, status, error) {
                            console.error(error);
                            resolve(0); // biar proses lain tetap jalan
                        }
                    });
                });
            });

            // Tunggu semua request selesai
            const results = await Promise.all(requests);

            // Jumlahkan semua waktu estimasi
            const totalEstimasi = results.reduce((sum, val) => sum + val, 0);

            const rumus = totalEstimasi;
            const hasilBulat = Math.ceil(rumus / 5) * 5;

            $("#estimated_time-" + index).val(hasilBulat);

            hitungTotalEst();

        }

        document.getElementById("btnAdd").addEventListener("click", function() {
            const tbody = document.querySelector("#table-do tbody");
            const index = rowIndex++; // gunakan global counter, lalu increment

            const row = document.createElement("tr");
            row.classList.add("detail-row");

            row.innerHTML = `
                            <td scope="row">
                                <button class="btn btn-danger btn-sm hapus" type="button">X</button>
                                <input type="hidden" name="detail-no[]" id="detail-no-${index}" value="insert">
                            </td>
                            <td scope="row">
                                <input type="text" name="dlor_id[]" id="dlor_id-${index}" 
                                    class="form-control dlor-input" placeholder="Nomor DO">
                            </td>
                            <td scope="row">
                                <input type="hidden" name="cust_id[]" id="cust_id-${index}">
                                <input type="text" name="cust_name[]" id="cust_name-${index}" 
                                    class="form-control" placeholder="Customer Name" readonly>
                            </td>
                            <td scope="row">
                                <input type="text" name="license_plate[]" id="license_plate-${index}" 
                                    class="form-control" placeholder="License Plate" readonly>
                            </td>
                            <td scope="row">
                                <input type="text" name="driver_name[]" id="driver_name-${index}" 
                                    class="form-control" placeholder="Driver Name" readonly>
                            </td>
                            <td scope="row">
                                <input type="text" name="total_weight[]" id="total_weight-${index}" 
                                    class="form-control" placeholder="Total Weight" readonly>
                            </td>
                            <td scope="row">
                                <textarea name="destination[]" id="destination-${index}" 
                                        cols="20" rows="1" class="form-control" readonly></textarea>
                            </td>
                            <td scope="row">
                                <input type="text" name="stuff_group[]" id="stuff_group-${index}" 
                                    class="form-control" placeholder="Stuffing Group">
                            </td>
                            <td scope="row">
                                <input type="text" name="estimated_time[]" id="estimated_time-${index}" 
                                    class="form-control" placeholder="Estimated Time" readonly>
                            </td>
                        `;

            tbody.appendChild(row);
            jumlahBaris++;
        });

        // 🗑️ Hapus baris (event delegation)
        document.querySelector("#table-do").addEventListener("click", function(e) {
            if (e.target.classList.contains("hapus")) {

                const row = e.target.closest("tr"); // baris yang sama
                const estInput = row.querySelector('[name="estimated_time[]"]');
                const estValue = estInput ? estInput.value : null;

                row.remove();
                jumlahBaris--;

                hitungTotalEst();
            }
        });

        document.querySelector("#table-do").addEventListener("keypress", function(event) {
            if (event.target.name === "dlor_id[]" && event.key === "Enter") {

                event.preventDefault();

                const textLoad = document.getElementById('textLoad');
                textLoad.hidden = false;

                document.getElementById('btnSave').disabled = true;
                document.getElementById('plan_arrival').disabled = true;
                document.getElementById('plan_departure').disabled = true;

                let input = event.target;
                let dlor_id = input.value;
                let index = input.id.split("-")[1];

                $.ajax({
                    url: 'https://fiori.spunindo.com/sap/bc/zsr_jsonhd/Z_GET_SINGLE_DO?sap-client=300&sap-user=JIS-1&sap-password=MSJI76&sap-language=EN&format=json&sdono=' +
                        dlor_id,
                    type: 'POST',
                    header: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        loadData(response['EW_ZVGETDO'], index);

                        $.ajax({
                            url: 'https://fiori.spunindo.com/sap/bc/zsr_jsonhd/Z_GET_DO_DTL?sap-client=300&sap-user=JIS-1&sap-password=MSJI76&sap-language=EN&format=json&v_vbeln=' +
                                dlor_id,
                            type: 'POST',
                            header: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            success: function(response) {
                                cekMaterial(response['ET_ZVDODTL'], index);
                            }
                        });
                    }
                });
            }
        });

        function hitungTotalEst() {
            let estimasiWaktu = 0;
            let ada = 0; // jumlah input yang terisi

            const estList = document.getElementsByName('estimated_time[]');

            estList.forEach(el => {
                let nilai = parseInt(el.value);
                if (!Number.isNaN(nilai) && nilai > 0) { // hanya hitung yang terisi
                    ada++;
                    estimasiWaktu += nilai;
                }
            });

            if (estList.length > 1 && ada > 1) {
                extraTime = 5;
            } else if (estList.length == 1 && ada == 1) {
                if (cust_id == '1400019' || cust_id == '1400022') {
                    extraTime = 30; // misalnya tambahan waktu manual
                } else {
                    extraTime = 15;
                }
            } else {
                extraTime = 0;
            }

            let totalEst = estimasiWaktu + extraTime;
            totalEstimate = totalEst;

            $("#total_estimated").val(totalEst);
            const textLoad = document.getElementById('textLoad');
            textLoad.hidden = true;

            document.getElementById('btnSave').disabled = false;
            document.getElementById('plan_arrival').disabled = false;
            document.getElementById('plan_departure').disabled = false;
        }
    </script>
@endpush