@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 class="btn btn-secondary mb-0" onclick="window.location='{{ URL::to($url_menu) }}'"><i
                                class="fas fa-chevron-left me-1"></i>Kembali</button>
                        <button type="button" id="saveButton" class="btn btn-primary mb-0" onclick="saveData(event)"><i
                                class="fas fa-download me-1"></i>Simpan</button>
                        <!-- <button class="btn btn-primary" onclick="event.preventDefault(); document.getElementById('master-form').submit();">Simpan</button> -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-2 mt-3">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header py-2">
                        <h5 class="mb-0">Data Header {{ request('edit_mode') || request('edit_id') ? '(Edit Mode)' : '' }}</h5>
                    </div>
                    <div class="card-body py-3">
                        <form id="my-form" autocomplete="off">
                            @csrf
                            @if(request('edit_mode') || request('edit_id'))
                                <input type="hidden" name="edit_id" value="{{ request('edit_id') }}">
                                <input type="hidden" name="is_edit" value="1">
                            @endif
                            @php
                                $enumBulan = DB::table('sys_enum')->where('idenum', 'bulan')->where('isactive', '1')->orderBy('value')->get();
                                $enumTahun = DB::table('sys_enum')->where('idenum', 'tahun')->where('isactive', '1')->orderBy('value')->get();
                            @endphp
                            <!-- ROW 1 -->
                            <div class="row g-3 align-items-end">
                                <div class="col-md-4 col-lg-3">
                                    <label class="form-label fw-semibold mb-1">Bulan Dari</label>
                                    <input type="hidden" id="start_periode" name="start_periode" value="{{ request('start_periode') }}">
                                    <div class="input-group">
                                        <select id="start_periode_m" class="form-select" {{ request('edit_mode') || request('edit_id') ? 'disabled' : '' }}>
                                            <option value="">-- Bulan --</option>
                                            @foreach($enumBulan as $bln)
                                                <option value="{{ $bln->value }}">{{ $bln->name }}</option>
                                            @endforeach
                                        </select>
                                        <select id="start_periode_y" class="form-select" style="max-width:110px;" {{ request('edit_mode') || request('edit_id') ? 'disabled' : '' }}>
                                            <option value="">-- Tahun --</option>
                                            @foreach($enumTahun as $thn)
                                                <option value="{{ $thn->value }}">{{ $thn->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-auto d-flex align-items-end pb-1">
                                    <span class="text-muted fw-bold" style="font-size:1.2rem; line-height:38px;">&rarr;</span>
                                </div>
                                <div class="col-md-4 col-lg-3">
                                    <label class="form-label fw-semibold mb-1">Bulan Hingga</label>
                                    <input type="hidden" id="end_periode" name="end_periode" value="{{ request('end_periode') }}">
                                    <div class="input-group">
                                        <select id="end_periode_m" class="form-select" {{ request('edit_mode') || request('edit_id') ? 'disabled' : '' }}>
                                            <option value="">-- Bulan --</option>
                                            @foreach($enumBulan as $bln)
                                                <option value="{{ $bln->value }}">{{ $bln->name }}</option>
                                            @endforeach
                                        </select>
                                        <select id="end_periode_y" class="form-select" style="max-width:110px;" {{ request('edit_mode') || request('edit_id') ? 'disabled' : '' }}>
                                            <option value="">-- Tahun --</option>
                                            @foreach($enumTahun as $thn)
                                                <option value="{{ $thn->value }}">{{ $thn->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3 col-lg-2">
                                    <label for="tipe_barang" class="form-label fw-semibold mb-1">Tipe Barang</label>
                                    <select id="tipe_barang" name="tipe_barang" class="form-select" required {{ request('edit_mode') || request('edit_id') ? 'disabled' : '' }}>
                                        <option value="">-- Pilih Tipe --</option>
                                        <option value="Sparepart" {{ request('tipe_barang') == 'Sparepart' ? 'selected' : '' }}>Sparepart</option>
                                        <option value="Penunjang" {{ request('tipe_barang') == 'Penunjang' ? 'selected' : '' }}>Penunjang</option>
                                    </select>
                                </div>
                                <div class="col-md-auto">
                                    <button type="button" id="btnGenerate" class="btn btn-success mb-0" {{ request('edit_mode') || request('edit_id') ? 'style="display: none;"' : '' }}>
                                        <i class="fas fa-cog me-1"></i>Generate Data
                                    </button>
                                    @if(session('edit_mode'))
                                        <span class="text-info"><i class="fas fa-info-circle me-1"></i>Mode Edit - Data sudah ada</span>
                                    @endif
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-2">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header py-2"><!-- header lebih rapat -->
                        <h5 class="mb-0">Data Detail </h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="stock-opname-table" class="table table-bordered table-striped display">
                                <thead style="background-color: #daecff;">
                                    <tr>
                                        <th style="text-align:center; width: 50px; border-color: #daecff;">No</th>
                                        <th style="text-align:center; border-color: #daecff;">Kode Baru</th>
                                        <th style="text-align:center; border-color: #daecff;">Kode Lama</th>
                                        <th style="text-align:center; border-color: #daecff;">Nama Barang</th>
                                        <th style="text-align:center; border-color: #daecff;">Satuan</th>
                                        <th style="text-align:center; border-color: #daecff;">Kategori</th>
                                        <th style="text-align:center; border-color: #daecff;">Lokasi</th>
                                        <th style="text-align:center; width: 150px; border-color: #daecff;">Minimal Stok Lama</th>
                                        <th style="text-align:center; width: 150px; border-color: #daecff;">
                                            Minimal Stok Baru
                                            <br><small class="text-muted fw-normal" style="font-size:0.7rem;">(Total Pengeluaran &divide; Jumlah Bulan)</small>
                                        </th>
                                    </tr>
                                </thead>
                                <tbody id="tbody-stock-opname">
                                    <!-- Data akan diisi setelah generate -->
                                    <tr id="empty-row">
                                        <td colspan="9" class="text-center text-muted">
                                            @if(session('edit_mode'))
                                                <i class="fas fa-spinner fa-spin me-2"></i>Memuat data yang sudah ada...
                                            @else
                                                <i class="fas fa-info-circle me-2"></i>
                                                Silakan isi form header, kemudian klik Generate Data
                                            @endif
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @if ($jsmenu == '1')
        @if (view()->exists("js.{$dmenu}"))
            @push('addjs')
                @include('js.' . $dmenu);
            @endpush
        @else
            @push('addjs')
            @endif
        @endif
    @endsection
    @push('js')
        <script>
            // Global variable to store minimal stok baru values
            let minimalStokBaruValues = {};
            // Global variable to store complete data for saving
            let completeDetailData = [];

            function stripTrailingZeroes(value) {
                if (value === null || value === undefined) {
                    return value;
                }

                return String(value).replace(/\.00$/, '');
            }

            // Function to save all data
            function saveData(event) {
                event.preventDefault();

                const details = [];
                completeDetailData.forEach(item => {
                    const kode = item.kode_baru;
                    const minimalStokBaru = minimalStokBaruValues[kode];
                    if (!minimalStokBaru || isNaN(minimalStokBaru) || parseFloat(minimalStokBaru) < 0) {
                        return; // Skip invalid entries
                    }

                    details.push({
                        id: item.id || null, // Include the record ID for edit mode
                        kode_lama: item.kode_lama || '',
                        kode_baru: item.kode_baru,
                        nama_barang: item.nama_barang,                        kategori: item.kategori || '',
                        lokasi: item.lokasi || '',                        minimal_stok_lama: item.minimal_stok_lama || item.minimal_stok || 0,
                        minimal_stok_baru: minimalStokBaru
                    });
                });

                if (details.length === 0) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Perhatian',
                        text: 'Belum ada data detail. Silakan generate data terlebih dahulu.',
                        confirmButtonText: 'Mengerti'
                    });
                    return;
                }

                // Show loading on save button
                const saveButton = document.getElementById('saveButton');
                const originalText = saveButton.innerHTML;
                saveButton.disabled = true;
                saveButton.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Menyimpan...';

                const formData = new FormData(document.getElementById('my-form'));
                formData.append('details', JSON.stringify(details));

                fetch("{{ URL::to('/trsmst/save-data') }}", {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    body: formData
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil',
                            html: '<strong>' + data.message + '</strong><br><br>Kode Transaksi: <strong>' + (data.id_transaksi || '-') + '</strong>',
                            confirmButtonText: 'OK'
                        }).then(() => {
                            // Redirect to list view
                            window.location.href = '{{ URL::to("/trsmst") }}';
                        });
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Gagal',
                            text: data.message,
                            confirmButtonText: 'Tutup'
                        });
                    }
                })
                .catch(error => {
                    console.error('Error saving data:', error);
                    Swal.fire({
                        icon: 'error',
                        title: 'Terjadi Kesalahan',
                        text: 'Gagal menyimpan data. Silakan coba lagi.',
                        confirmButtonText: 'Tutup'
                    });
                })
                .finally(() => {
                    // Reset button
                    saveButton.disabled = false;
                    saveButton.innerHTML = originalText;
                });
            }

            document.addEventListener('DOMContentLoaded', function() {
                // Sync month+year selects to hidden input (format YYYY-MM)
                function syncMonthYear(prefix) {
                    const m = document.getElementById(prefix + '_m').value;
                    const y = document.getElementById(prefix + '_y').value;
                    document.getElementById(prefix).value = (m && y) ? y + '-' + m : '';
                }

                // Set initial values from hidden inputs (for edit mode)
                ['start_periode', 'end_periode'].forEach(function(prefix) {
                    const val = document.getElementById(prefix).value; // e.g. "2026-03"
                    if (val && val.includes('-')) {
                        const parts = val.split('-');
                        document.getElementById(prefix + '_y').value = parts[0];
                        document.getElementById(prefix + '_m').value = parts[1];
                    }
                    // Attach change listeners
                    document.getElementById(prefix + '_m').addEventListener('change', function() { syncMonthYear(prefix); });
                    document.getElementById(prefix + '_y').addEventListener('change', function() { syncMonthYear(prefix); });
                });

                // Default: Bulan Hingga = bulan ini, Bulan Dari = 3 bulan sebelumnya
                @if(!request('edit_mode') && !request('edit_id'))
                    (function() {
                        var now = new Date();
                        var endMonth = now.getMonth() + 1; // 1-12
                        var endYear  = now.getFullYear();

                        // 3 bulan sebelumnya (termasuk bulan ini = range 3 bulan)
                        var startMonth = endMonth - 2;
                        var startYear  = endYear;
                        if (startMonth <= 0) {
                            startMonth += 12;
                            startYear  -= 1;
                        }

                        var pad = function(n) { return n < 10 ? '0' + n : '' + n; };

                        document.getElementById('end_periode_m').value = pad(endMonth);
                        document.getElementById('end_periode_y').value = '' + endYear;
                        document.getElementById('start_periode_m').value = pad(startMonth);
                        document.getElementById('start_periode_y').value = '' + startYear;

                        syncMonthYear('start_periode');
                        syncMonthYear('end_periode');
                    })();
                @endif

                // Check if in edit mode and load existing data
                @if(request('edit_mode') || request('edit_id'))
                    const idTransaksi = '{{ request('edit_id') }}';

                    if (idTransaksi) {
                        // Load existing data
                        loadDetailData(idTransaksi);
                    }
                @endif

                // Function to generate data
                document.getElementById('btnGenerate').addEventListener('click', function() {
                    const startBulan = document.getElementById('start_periode').value;
                    const endBulan = document.getElementById('end_periode').value;
                    const tipeBarang = document.getElementById('tipe_barang').value;

                    if (!startBulan || !endBulan || !tipeBarang) {
                        Swal.fire({
                            icon: 'warning',
                            title: 'Perhatian',
                            text: 'Silakan pilih Start Bulan, End Bulan, dan Tipe Barang terlebih dahulu.',
                            confirmButtonText: 'Mengerti'
                        });
                        return;
                    }

                    // Validate endBulan >= startBulan (format YYYY-MM)
                    if (endBulan < startBulan) {
                        Swal.fire({
                            icon: 'warning',
                            title: 'Perhatian',
                            text: 'Bulan Hingga harus sama atau setelah Bulan Dari.',
                            confirmButtonText: 'Mengerti'
                        });
                        return;
                    }

                    // Show loading
                    this.disabled = true;
                    this.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Memproses...';

                    // Prepare form data
                    const formData = new FormData();
                    formData.append('_token', '{{ csrf_token() }}');
                    formData.append('start_periode', startBulan);
                    formData.append('end_periode', endBulan);
                    formData.append('tipe_barang', tipeBarang);

                    // Call getData endpoint
                    fetch("{{ URL::to('/trsmst/get-data') }}", {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest'
                        },
                        body: formData
                    })
                    .then(response => {
                        // Always try to parse JSON, even for error responses
                        return response.json().then(data => {
                            // Attach the status to the data object
                            data.httpStatus = response.status;
                            data.httpOk = response.ok;
                            return data;
                        });
                    })
                    .then(data => {
                        if (data.success) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Berhasil!',
                                text: data.message,
                                confirmButtonText: 'OK'
                            }).then(() => {
                                // Display detail data from response
                                displayDetailData(data.data, false); // false = not edit mode

                                // Disable header inputs after generate
                                document.getElementById('start_periode_m').disabled = true;
                                document.getElementById('start_periode_y').disabled = true;
                                document.getElementById('end_periode_m').disabled = true;
                                document.getElementById('end_periode_y').disabled = true;
                                document.getElementById('tipe_barang').disabled = true;
                                document.getElementById('btnGenerate').style.display = 'none';
                            });
                        } else {
                            // Handle validation or business logic errors
                            Swal.fire({
                                icon: 'warning',
                                title: 'Perhatian!',
                                text: data.message,
                                confirmButtonText: 'Mengerti'
                            });
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        Swal.fire({
                            icon: 'error',
                            title: 'Terjadi Kesalahan',
                            text: 'Gagal memproses data. Silakan coba lagi.',
                            confirmButtonText: 'Tutup'
                        });
                    })
                    .finally(() => {
                        // Reset button
                        this.disabled = false;
                        this.innerHTML = '<i class="fas fa-cog me-1"></i>Generate Data';
                    });
                });

                // Function to load detail data
                function loadDetailData(idTransaksiHeader) {
                    const tbody = document.getElementById('tbody-stock-opname');

                    // Clear existing data
                    tbody.innerHTML = '<tr><td colspan="9" class="text-center"><i class="fas fa-spinner fa-spin me-2"></i>Memuat data...</td></tr>';

                    // Load data from trs_ms_d
                    const detailUrl = "{{ URL::to('/trsmst/detail') }}/" + idTransaksiHeader;
                    console.log('Loading details from:', detailUrl);

                    fetch(detailUrl, {
                        method: 'GET',
                        headers: {
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    })
                    .then(response => {
                        console.log('Response status:', response.status);
                        if (!response.ok) {
                            throw new Error(`HTTP error! status: ${response.status}`);
                        }
                        return response.json();
                    })
                    .then(data => {
                        console.log('Received data:', data);
                        if (data.success && data.details && data.details.length > 0) {
                            completeDetailData = data.details; // Store complete data for saving
                            displayDetailData(data.details, true); // true = edit mode
                        } else {
                            console.log('No data found or success=false');
                            const tbody = document.getElementById('tbody-stock-opname');
                            tbody.innerHTML = '<tr><td colspan="9" class="text-center text-muted">Tidak ada data ditemukan</td></tr>';
                        }
                    })
                    .catch(error => {
                        console.error('Error loading details:', error);
                        tbody.innerHTML = `<tr><td colspan="9" class="text-center text-danger">Gagal memuat data: ${error.message}</td></tr>`;
                    });
                }

                // Function to attach event listeners for minimal stok baru inputs
                function attachMinimalStokListeners() {
                    document.querySelectorAll('.minimal-stok-input').forEach(input => {
                        const kode = input.dataset.kode;

                        // Restore saved value if exists
                        if (minimalStokBaruValues[kode] !== undefined) {
                            input.value = minimalStokBaruValues[kode];
                        }

                        // Remove existing listeners to avoid duplicates
                        input.removeEventListener('input', handleMinimalStokInput);
                        // Add new listener
                        input.addEventListener('input', handleMinimalStokInput);
                    });
                }

                // Function to handle minimal stok baru input changes
                function handleMinimalStokInput() {
                    const kode = this.dataset.kode;
                    // Store the value
                    minimalStokBaruValues[kode] = this.value;
                }

                // Function to display detail data from response
                function displayDetailData(data, isEditMode = false) {
                    // Only reset stored values when generating new data, not when loading existing data
                    if (!isEditMode) {
                        minimalStokBaruValues = {};
                        completeDetailData = data; // Store complete data for saving
                    }

                    const tbody = document.getElementById('tbody-stock-opname');

                    if (!data || data.length === 0) {
                        tbody.innerHTML = '<tr><td colspan="9" class="text-center text-muted">Tidak ada data untuk ditampilkan</td></tr>';
                        return;
                    }

                    let html = '';
                    data.forEach((item, index) => {
                        let defaultMinimalStokBaru = item.minimal_stok_baru !== undefined ? item.minimal_stok_baru : 0;
                        defaultMinimalStokBaru = stripTrailingZeroes(defaultMinimalStokBaru);

                        // Store default value in minimalStokBaruValues if not already stored
                        if (minimalStokBaruValues[item.kode_baru] === undefined) {
                            minimalStokBaruValues[item.kode_baru] = defaultMinimalStokBaru;
                        }

                        // Use stored value if exists
                        const currentMinimalStokBaru = stripTrailingZeroes(minimalStokBaruValues[item.kode_baru]);
                        const minimalStokLama = stripTrailingZeroes(item.minimal_stok_lama || item.minimal_stok || '0');

                        html += `
                            <tr>
                                <td class="text-center">${index + 1}</td>
                                <td class="text-center">${item.kode_baru}</td>
                                <td class="text-center">${item.kode_lama || ''}</td>
                                <td>${item.nama_barang}</td>
                                <td>${item.satuan_nama || ''}</td>
                                <td>${item.kategori || ''}</td>
                                <td>${item.lokasi || ''}</td>
                                <td class="text-center">${minimalStokLama}</td>
                                <td class="text-center">
                                    <input type="number"
                                           class="form-control text-center minimal-stok-input"
                                           data-kode="${item.kode_baru}"
                                           data-id="${item.id || ''}"
                                           value="${currentMinimalStokBaru}"
                                           min="0"
                                           step="0.01"
                                           required>
                                </td>
                            </tr>
                        `;
                    });

                    tbody.innerHTML = html;

                    // Initialize DataTable
                    if ($.fn.DataTable.isDataTable('#stock-opname-table')) {
                        $('#stock-opname-table').DataTable().destroy();
                    }
                    $('#stock-opname-table').DataTable({
                        "pageLength": 10,
                        "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
                        "order": [[0, 'asc']],
                        "columnDefs": [
                            { "orderable": false, "targets": [6, 7] }
                        ],
                        "drawCallback": function() {
                            // Re-attach event listeners after each draw (including pagination)
                            attachMinimalStokListeners();
                        }
                    });

                    // Add event listeners 
                    attachMinimalStokListeners();
                }
            });
        </script>
    @endpush