@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="window.location='{{ URL::to($url_menu) }}'"><i
                                class="fas fa-circle-left me-1"></i><span class="font-weight-bold">Kembali</button>
                        {{-- check authorize add --}}
                        @if ($authorize->add == '1')
                            {{-- button save --}}
                            <button id="btn-store-asset" class="btn btn-primary mb-0" onclick="storeAsset();">
                                <i class="fas fa-floppy-disk me-1"></i>
                                <span class="font-weight-bold">Simpan</span>
                            </button>
                        @endif
                    </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">
                        <form role="form" method="POST" action="{{ URL::to($url_menu) }}" id="{{ $dmenu }}-form"
                            enctype="multipart/form-data">
                            @csrf
                            <p class="text-uppercase text-sm">Insert {{ $title_menu }}</p>
                            <hr class="horizontal dark mt-0">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="example-text-input" class="form-control-label">No. GR</label>
                                        <input class="form-control" key=true type=text name="no_gr">
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="example-text-input" class="form-control-label">Tahun</label>
                                        <input class="form-control" key=true type=number name="year">
                                    </div>
                                </div>
                            </div>
                        </form>
                        {{-- button fetch --}}
                        <button class="btn btn-primary mb-0" id="fetch-btn" onclick="fetchData();"><i
                                class="fas fa-plus me-1"> </i><span class="font-weight-bold">Tarik Data</button>
                        <hr class="horizontal dark">
                        <div class="row" id="containerInput">
                            <!-- <div class="row px-4 py-2"> -->
                            <div class="table-responsive">
                                <table class="table display" id="list_{{ $dmenu }}">
                                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th>No</th>
                                            @foreach ($columns as $column)
                                                @if ($column == 'no_asset')
                                                    @php $column = 'No. Aset'; @endphp
                                                @endif
                                                @if ($column == 'no_gr')
                                                    @php $column = 'No. GR'; @endphp
                                                @endif
                                                @if ($column == 'no_sap_asset')
                                                    @php $column = 'No. Aset SAP'; @endphp
                                                @endif
                                                @if ($column == 'purchasing_order')
                                                    @php $column = 'No. PO'; @endphp
                                                @endif
                                                @if ($column == 'delivery_date')
                                                    @php $column = 'Delivery Date'; @endphp
                                                @endif
                                                @if ($column == 'expired_date')
                                                    @php $column = 'Exp Date'; @endphp
                                                @endif
                                                @if ($column == 'dur_warranty')
                                                    @php $column = 'Durasi Warranty'; @endphp
                                                @endif
                                                @if ($column == 'warranty_date')
                                                    @php $column = 'Warranty Date'; @endphp
                                                @endif
                                                <th>{{ ucfirst($column) }}</th>
                                            @endforeach
                                        </tr>
                                    </thead>
                                    <tbody id="tableBody">
                                    </tbody>
                                </table>
                            </div>
                            <!-- </div> -->
                        </div>
                    </div>
                    <div class="card-footer align-items-center pt-0 pb-2">
                    </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>
        var reg_num = '';
        var tableBody;
        tableBody = $('#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)"
            },
            "pageLength": 100,
            scrollX: true,
            responsive: true,
            dom: 'Bfrtip',
            buttons: []
        });

        function fetchData() {
            var no_gr = $('input[name="no_gr"]').val();
            var year = $('input[name="year"]').val();
            if (no_gr && year) {
                $('#fetch-btn').attr('disabled', true);
                $.ajax({
                    url: '{{ URL::to('/') }}/fetchdata',
                    method: 'GET',
                    data: {
                        no_gr: no_gr,
                        year: year
                    },
                    success: function(response) {
                        console.log(response);
                        tableBody.clear().draw();
                        if (!response.error) {
                            if (response.empty) {
                                Swal.fire({
                                    title: 'Fetch Gagal!',
                                    text: response.empty,
                                    icon: 'warning',
                                    confirmButtonText: 'OK'
                                })
                            } else {
                                Swal.fire({
                                    title: 'Fetch Berhasil!',
                                    icon: 'success',
                                    confirmButtonText: 'OK'
                                }).then((result) => {
                                    tableBody.clear().draw();
                                    $.ajax({
                                        url: '{{ URL::to('/') }}/get-categories',
                                        method: 'GET',
                                        success: function(categoryResponse) {
                                            let categoryOptions =
                                                `<option value=""></option>`;
                                            categoryResponse.forEach(category => {
                                                if (category.isactive == 1) {
                                                    categoryOptions +=
                                                        `<option value="${category.category_id}">${category.category_name}</option>`;
                                                }
                                            });
                                            reg_num = response.gr;
                                            // Populate table with fetched data
                                            response.item.forEach((item, index) => {
                                                // generate no asset
                                                let registno = item.ANLN1 + item
                                                    .ZEILE
                                                let deliveryDate = new Date(item
                                                    .BUDAT);
                                                let firstDigit = parseInt(item.ANLN1
                                                    .match(/[1-9]/)
                                                ); // Find first non-zero digit in ANLN1

                                                // Calculate expired date
                                                let expiredDate = new Date(
                                                    deliveryDate);
                                                expiredDate.setFullYear(deliveryDate
                                                    .getFullYear() + firstDigit);

                                                // Add row to the table
                                                tableBody.row.add([
                                                    `<td><span>${index + 1}.</span></td>`,
                                                    `<td><span><input class="form-control" style="width: 170px;" key=true type=text name="no_asset-${index + 1}" value="" readonly></span></td>`,
                                                    `<td><span><input class="form-control" style="width: 150px;" key=true type=text name="no_sap_asset-${index + 1}" value="${item.ANLN1}" onkeyup="noSapUpdate(${index + 1}, '${item.ZEILE}')" required></span></td>`,
                                                    `<td><span><input class="form-control" style="width: 170px;" key=true type=text name="no_gr-${index + 1}" value="${item.no_gr}" readonly></span></td>`,
                                                    `<td>
                                                        <span>
                                                            <input class="form-control" style="width:250px;" key=true type="text" 
                                                                name="name_spesification-${index + 1}" value="${item.TXZ01}" required>
                                                            <input type="hidden" name="spesification-${index + 1}" value="${item.TXT50}">
                                                        </span>
                                                    </td>`,
                                                    `<td><span><select class="form-control select" style="width: 150px" name="category-${index + 1}" required>${categoryOptions}</select></span></td>`,
                                                    `<td><span><input class="form-control" style="width: 50px;" key=true type=text name="qty-${index + 1}" value="${item.ERFMG}" required></span></td>`,
                                                    `<td><span><input class="form-control" style="width: 70px;" key=true type=text name="unit-${index + 1}" value="${item.ERFME}" required></span></td>`,
                                                    `<td><span><input class="form-control" style="width: 150px;" key=true type=text name="no_po-${index + 1}" value="${item.EBELN}" required></span></td>`,
                                                    `<td><span><input class="form-control" style="width: 210px;" key=true type=text name="supplier-${index + 1}" value="${item.NAME1}" required></span></td>`,
                                                    `<td><span><input class="form-control" style="width: 190px;" key=true type=date name="delivery_date-${index + 1}" value="${item.BUDAT}" onchange="dateUpdate(${index + 1})"></span></td>`,
                                                    `<td><span><input class="form-control" style="width: 130px;" key=true type=date name="exp_date-${index + 1}" value="${expiredDate.toISOString().split('T')[0]}" readonly></span></td>`,
                                                    `<td><span><input class="form-control" key=true type=text name="dur_warranty-${index + 1}" value="" onkeyup="durUpdate(${index + 1})"></span></td>`,
                                                    `<td><span><input class="form-control" style="width: 130px;" key=true type=date name="warrant_date-${index + 1}" value="" readonly></span></td>`
                                                ]).draw();
                                                $('.select').select2({});
                                            });
                                        }
                                    });
                                });
                            }
                        } else {
                            Swal.fire({
                                title: 'Fetch Gagal!',
                                icon: 'error',
                                confirmButtonText: 'OK'
                            });
                        }
                        $('#fetch-btn').attr('disabled', false);
                    },
                    error: function(xhr, status, error) {
                        Swal.fire({
                            title: 'Terjadi Kesalahan dalam Fetching Data',
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                        $('#fetch-btn').attr('disabled', false);
                    }
                });
            } else {
                Swal.fire({
                    title: 'Data Belum Lengkap!',
                    text: 'Harap Lengkapi Data Terlebih Dahulu.',
                    icon: 'warning',
                    confirmButtonText: 'OK'
                });
            }
        }

        function noSapUpdate(index, item) {
            var noSapAsset = $(`input[name="no_sap_asset-${index}"]`).val();
            var deliveryDateStr = $(`input[name="delivery_date-${index}"]`).val();

            // if (noSapAsset) $(`input[name="no_asset-${index}"]`).val(noSapAsset+item);
            // else $(`input[name="no_asset-${index}"]`).val('');

            if (noSapAsset && deliveryDateStr) {
                let deliveryDate = new Date(deliveryDateStr);
                let firstDigit = parseInt(noSapAsset.match(/[1-9]/));

                // Calculate the new expired date
                let expiredDate = new Date(deliveryDate);
                expiredDate.setFullYear(deliveryDate.getFullYear() + firstDigit);

                // Update the expired date input field
                $(`input[name="exp_date-${index}"]`).val(expiredDate.toISOString().split('T')[0]);
            } else {
                $(`input[name="exp_date-${index}"]`).val('');
            }
        }

        function dateUpdate(index) {
            var noSapAsset = $(`input[name="no_sap_asset-${index}"]`).val();
            var deliveryDateStr = $(`input[name="delivery_date-${index}"]`).val();
            var warrantyDuration = $(`input[name="dur_warranty-${index}"]`).val();

            // exp date update
            if (noSapAsset && deliveryDateStr) {
                let deliveryDate = new Date(deliveryDateStr);
                let firstDigit = parseInt(noSapAsset.match(/[1-9]/));

                // Calculate the new expired date
                let expiredDate = new Date(deliveryDate);
                expiredDate.setFullYear(deliveryDate.getFullYear() + firstDigit);

                // Update the expired date input field
                $(`input[name="exp_date-${index}"]`).val(expiredDate.toISOString().split('T')[0]);
            } else {
                $(`input[name="exp_date-${index}"]`).val('');
            }

            if (deliveryDateStr && warrantyDuration) {
                let deliveryDate = new Date(deliveryDateStr);
                let firstDigit = parseInt(noSapAsset.match(/[1-9]/));

                let warrantyDate = new Date(deliveryDate);
                warrantyDate.setFullYear(deliveryDate.getFullYear() + parseInt(warrantyDuration));

                $(`input[name="warrant_date-${index}"]`).val(warrantyDate.toISOString().split('T')[0]);
            } else {
                $(`input[name="warrant_date-${index}"]`).val('');
            }
        }

        function durUpdate(index) {
            var deliveryDateStr = $(`input[name="delivery_date-${index}"]`).val();
            var deliveryDate = new Date(deliveryDateStr);
            var warrantyDuration = $(`input[name="dur_warranty-${index}"]`).val();

            if (warrantyDuration) {
                let warrantyDate = new Date(deliveryDate);
                warrantyDate.setFullYear(deliveryDate.getFullYear() + parseInt(warrantyDuration));

                $(`input[name="warrant_date-${index}"]`).val(warrantyDate.toISOString().split('T')[0]);
            } else {
                $(`input[name="warrant_date-${index}"]`).val('');
            }

        }

        {{-- function storeAsset() {
            let assets = [];
            let validRows = false;
            let validArr = 0;
            let check = 0;

            $('#tableBody tr').each(function(index, row) {
                check++;
                let no_asset = $(row).find('input[name^="no_asset"]').val();
                let no_sap_asset = $(row).find('input[name^="no_sap_asset"]').val();
                let no_gr = $(row).find('input[name^="no_gr"]').val();
                let spesification = $(row).find('input[name^="spesification"]').val();
                let category = $(row).find('select[name^="category"]').val();
                let qty = $(row).find('input[name^="qty"]').val();
                let unit = $(row).find('input[name^="unit"]').val();
                let no_po = $(row).find('input[name^="no_po"]').val();
                let supplier = $(row).find('input[name^="supplier"]').val();
                let delivery_date = $(row).find('input[name^="delivery_date"]').val();
                let exp_date = $(row).find('input[name^="exp_date"]').val();
                let dur_warranty = $(row).find('input[name^="dur_warranty"]').val();
                let warrant_date = $(row).find('input[name^="warrant_date"]').val();

                if (no_gr && no_sap_asset && spesification && category && qty && unit && no_po && supplier &&
                    delivery_date && exp_date && dur_warranty && warrant_date) {
                    validRows = true;
                    let asset = {
                        no_asset: no_asset,
                        no_sap_asset: no_sap_asset,
                        no_gr: no_gr,
                        spesification: spesification,
                        category: category,
                        qty: qty,
                        unit: unit,
                        no_po: no_po,
                        supplier: supplier,
                        delivery_date: delivery_date,
                        exp_date: exp_date,
                        dur_warranty: dur_warranty,
                        warrant_date: warrant_date
                    };
                    assets.push(asset);
                    validArr++;
                }
            });

            if (validArr !== check) {
                Swal.fire({
                    title: 'Data Belum Lengkap!',
                    text: 'Harap Lengkapi Data Terlebih Dahulu.',
                    icon: 'warning',
                    confirmButtonText: 'OK'
                });
            }

            if (validArr === check) {
                $.ajax({
                    url: '{{ URL::to('/') }}/store-asset',
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: JSON.stringify({
                        assets: assets
                    }),
                    contentType: 'application/json',
                    success: function(response) {
                        console.log(response);
                        if (!response.error) {
                            Swal.fire({
                                title: 'Asset Berhasil Dimasukkan ke Database!',
                                icon: 'success',
                                confirmButtonText: 'OK'
                            }).then(() => {
                                window.location.href = '{{ URL::to('/') }}/msasst/fetch';
                            });
                        } else {
                            Swal.fire({
                                title: 'Asset Gagal Dimasukkan ke Database!',
                                icon: 'error',
                                confirmButtonText: 'OK'
                            }).then(() => {
                                window.location.href = '{{ URL::to('/') }}/msasst/fetch';
                            });
                        }
                    },
                    error: function(xhr, status, error) {
                        Swal.fire({
                            title: 'Terjadi Kesalahan dalam Store Data',
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                });
            }
        } --}}

        function storeAsset() {
            const btn = document.getElementById("btn-store-asset");
            const originalHtml = btn.innerHTML;

            // Kasih spinner + disable tombol
            btn.disabled = true;
            btn.innerHTML = `
        <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
        Processing...
    `;

            let assets = [];
            let validRows = false;
            let validArr = 0;
            let check = 0;

            $('#tableBody tr').each(function(index, row) {
                check++;
                let no_asset = $(row).find('input[name^="no_asset"]').val();
                let no_sap_asset = $(row).find('input[name^="no_sap_asset"]').val();
                let no_gr = $(row).find('input[name^="no_gr"]').val();
                let name_spesification = $(row).find('input[name^="name_spesification"]').val();
                let spesification = $(row).find('input[name^="spesification"]').val();
                let category = $(row).find('select[name^="category"]').val();
                let qty = $(row).find('input[name^="qty"]').val();
                let unit = $(row).find('input[name^="unit"]').val();
                let no_po = $(row).find('input[name^="no_po"]').val();
                let supplier = $(row).find('input[name^="supplier"]').val();
                let delivery_date = $(row).find('input[name^="delivery_date"]').val();
                let exp_date = $(row).find('input[name^="exp_date"]').val();
                let dur_warranty = $(row).find('input[name^="dur_warranty"]').val();
                let warrant_date = $(row).find('input[name^="warrant_date"]').val();

                if (no_gr && no_sap_asset && spesification && category && qty && unit && no_po && supplier &&
                    delivery_date && exp_date && dur_warranty && warrant_date) {
                    validRows = true;
                    let asset = {
                        no_asset: no_asset,
                        no_sap_asset: no_sap_asset,
                        no_gr: no_gr,
                        name_spesification: name_spesification,
                        spesification: spesification,
                        category: category,
                        qty: qty,
                        unit: unit,
                        no_po: no_po,
                        supplier: supplier,
                        delivery_date: delivery_date,
                        exp_date: exp_date,
                        dur_warranty: dur_warranty,
                        warrant_date: warrant_date
                    };
                    assets.push(asset);
                    validArr++;
                }
            });

            if (validArr !== check) {
                Swal.fire({
                    title: 'Data Belum Lengkap!',
                    text: 'Harap Lengkapi Data Terlebih Dahulu.',
                    icon: 'warning',
                    confirmButtonText: 'OK'
                });
                // Balikin tombol ke kondisi awal
                btn.disabled = false;
                btn.innerHTML = originalHtml;
                return;
            }

            if (validArr === check) {
                $.ajax({
                    url: '{{ URL::to('/') }}/store-asset',
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: JSON.stringify({
                        assets: assets
                    }),
                    contentType: 'application/json',
                    success: function(response) {
                        if (!response.error) {
                            Swal.fire({
                                title: 'Asset Berhasil Dimasukkan ke Database!',
                                icon: 'success',
                                confirmButtonText: 'OK'
                            }).then(() => {
                                window.location.href = '{{ URL::to('/') }}/msasst/fetch';
                            });
                        } else {
                            Swal.fire({
                                title: 'Asset Gagal Dimasukkan ke Database!',
                                icon: 'error',
                                confirmButtonText: 'OK'
                            }).then(() => {
                                window.location.href = '{{ URL::to('/') }}/msasst/fetch';
                            });
                        }
                    },
                    error: function(xhr, status, error) {
                        Swal.fire({
                            title: 'Terjadi Kesalahan dalam Store Data',
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                        // Balikin tombol ke kondisi awal
                        btn.disabled = false;
                        btn.innerHTML = originalHtml;
                    }
                });
            }
        }

        $(document).ready(function() {
            $(':focus').blur();
        });
    </script>
@endpush