@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    <style>
        input[type="number"]::-webkit-inner-spin-button,
        input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
        input[type="number"] { -moz-appearance: textfield; }
    </style>
    @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">
                                <input type="hidden" name="content_hash" id="content_hash" value="">
                                <input type="hidden" id="lock_dmenu" value="{{ session('lock_dmenu', '') }}">
                                <input type="hidden" id="lock_record_id" value="{{ session('lock_record_id', '') }}">
                            @endif
                            <!-- ROW 1 -->
                            @php
                                $tglPostSetting = DB::table('sys_enum')
                                    ->where('idenum', 'tglpost')
                                    ->where('isactive', '1')
                                    ->value('name');

                                $tglPostLimit = (int) ($tglPostSetting ?: 6);

                                // Minimal tanggal = bulan sebelumnya tanggal sesuai setting
                                // Contoh sekarang Mei 2026 dan setting 06 => 2026-04-06
                                $minTanggalStockOpname = now()
                                    ->copy()
                                    ->subMonthNoOverflow()
                                    ->startOfMonth()
                                    ->addDays($tglPostLimit - 1)
                                    ->format('Y-m-d');
                            @endphp
                            <div class="row mb-2">
                                <div class="col-md-3">
                                    <div class="d-flex align-items-center">
                                        <label for="tanggal_stock_opname" class="form-label me-2" style="min-width:120px;">
                                            Tanggal Stock Opname
                                        </label>

                                        <input type="date" id="tanggal_stock_opname" name="tanggal_stock_opname"
                                            class="form-control" required min="{{ $minTanggalStockOpname }}"
                                            {{ request('edit_mode') || request('edit_id') ? 'disabled' : '' }}
                                            value="{{ request('tanggal_stock_opname') }}">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="d-flex align-items-center">
                                        <label for="tanggal_pelaksanaan" class="form-label me-2"
                                            style="min-width:120px;">Tanggal Pelaksanaan</label>
                                        <input type="date" id="tanggal_pelaksanaan" name="tanggal_pelaksanaan"
                                            class="form-control" required readonly value="{{ date('Y-m-d') }}">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="d-flex align-items-center">
                                        <label for="tipe_barang" class="form-label me-2" style="min-width:80px;">Tipe
                                            Barang</label>
                                        <select id="tipe_barang" name="tipe_barang" class="form-control" 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>
                                <div class="col-md-3">
                                    <button type="button" id="btnGenerate" class="btn btn-success mb-0 mt-2"
                                        {{ 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;">Kategori</th>
                                        <th style="text-align:center; border-color: #daecff;">Lokasi</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; width: 120px; border-color: #daecff;">Stok Sistem</th>
                                        <th style="text-align:center; width: 120px; border-color: #daecff;">Aktual Stok</th>
                                        <th style="text-align:center; width: 120px; border-color: #daecff;">Selisih</th>
                                    </tr>
                                </thead>
                                <tbody id="tbody-stock-opname">
                                    <!-- Data akan diisi setelah generate -->
                                    <tr id="empty-row">
                                        <td colspan="10" class="text-center text-muted">
                                            @if (session('edit_mode'))
                                                <i class="fas fa-spinner fa-spin me-2"></i>Memuat data stock opname yang
                                                sudah ada...
                                            @else
                                                <i class="fas fa-info-circle me-2"></i>
                                                Silakan pilih tanggal, 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);
    <script>
        document.addEventListener('wheel', function(event) {
            if (event.target.matches('input[type="number"]')) event.preventDefault();
        }, { passive: false });
    </script>
@endpush
        @else
            @push('addjs')
            @endif
        @endif
    @endsection
    @push('js')
        <script>
            // ============ EDIT LOCK WARNING ============
            @if (session('lock_info'))
                document.addEventListener('DOMContentLoaded', function() {
                    var lockOpenedAt = new Date('{{ session('lock_info')->opened_at }}');
                    var jamBuka = lockOpenedAt.toLocaleString('id-ID', {
                        day: '2-digit',
                        month: '2-digit',
                        year: 'numeric',
                        hour: '2-digit',
                        minute: '2-digit'
                    });
                    Swal.fire({
                        icon: 'warning',
                        title: 'Perhatian!',
                        html: '<b>{{ session('lock_info')->username }}</b> sedang membuka halaman edit ini sejak ' +
                            jamBuka +
                            '.<br><br>Anda tetap bisa melanjutkan, namun perubahan bisa saling tertimpa.',
                        confirmButtonText: 'Lanjutkan',
                        confirmButtonColor: '#3085d6',
                    });
                });
            @endif

            // ============ RELEASE LOCK ON LEAVE ============
            (function() {
                var lockDmenu = document.getElementById('lock_dmenu') ? document.getElementById('lock_dmenu').value : '';
                var lockRecordId = document.getElementById('lock_record_id') ? document.getElementById('lock_record_id')
                    .value : '';
                if (lockDmenu && lockRecordId) {
                    window.addEventListener('beforeunload', function() {
                        var payload = new URLSearchParams({
                            _token: '{{ csrf_token() }}',
                            dmenu: lockDmenu,
                            record_id: lockRecordId
                        });
                        navigator.sendBeacon('{{ url('/riwayat/edit') }}', payload);
                    });
                }
            })();
        </script>

        {{-- Idle Detection: auto-release lock setelah 5 menit tidak aktif --}}
        @include('partials.idle-lock-detection')

        <script>
            // Global variable to store aktual stok values
            let aktualStokValues = {};
            // Global variable to store complete data for saving
            let completeStockData = [];

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

                // Collect all aktual stok values from aktualStokValues (includes all pages)
                const details = [];
                completeStockData.forEach(item => {
                    const kode = item.kode_baru;
                    const rawAktualStok = aktualStokValues[kode];

                    if (rawAktualStok === undefined || rawAktualStok === null || rawAktualStok === '') {
                        Swal.fire({
                            icon: 'warning',
                            title: 'Perhatian',
                            text: 'Aktual stok untuk barang "' + (item.nama_barang || kode) + '" belum diisi.',
                            confirmButtonText: 'Mengerti'
                        });
                        throw new Error('VALIDATION_ERROR');
                    }

                    const normalizedAktualStok = String(rawAktualStok).replace(',', '.').trim();
                    if (normalizedAktualStok === '' || isNaN(normalizedAktualStok) || parseFloat(normalizedAktualStok) <
                        0) {
                        Swal.fire({
                            icon: 'warning',
                            title: 'Perhatian',
                            text: 'Aktual stok untuk barang "' + (item.nama_barang || kode) +
                                '" harus berupa angka >= 0.',
                            confirmButtonText: 'Mengerti'
                        });
                        throw new Error('VALIDATION_ERROR');
                    }

                    details.push({
                        id: item.id || null, // Include the record ID for edit mode
                        kode_baru: kode,
                        aktual_stok: normalizedAktualStok,
                        keterangan: '' // Kosong karena kolom keterangan dihapus
                    });
                });

                if (details.length === 0) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Perhatian',
                        text: 'Belum ada data stock opname. 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));

                // Sertakan content hash untuk optimistic locking (edit mode)
                const contentHashEl = document.getElementById('content_hash');
                if (contentHashEl) {
                    formData.append('content_hash', contentHashEl.value);
                }

                fetch("{{ URL::to('/trstop/save-data') }}", {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest'
                        },
                        body: formData
                    })
                    .then(response => {
                        if (response.status === 409) {
                            return response.json().then(data => {
                                Swal.fire({
                                    icon: 'warning',
                                    title: 'Konflik Data!',
                                    text: data.message ||
                                        'Data telah diubah oleh pengguna lain. Halaman akan dimuat ulang.',
                                    confirmButtonText: 'Muat Ulang'
                                }).then(() => {
                                    window.location.href = window.location.pathname + (window.location
                                            .search ? window.location.search + '&' : '?') + '_t=' + Date
                                        .now();
                                });
                                throw new Error('CONFLICT');
                            });
                        }
                        return 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('/trstop') }}';
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Gagal',
                                text: data.message,
                                confirmButtonText: 'Tutup'
                            });
                        }
                    })
                    .catch(error => {
                        console.error('Error saving data:', error);
                        if (error.message === 'VALIDATION_ERROR') return;
                        if (error.message === 'CONFLICT') return; // Sudah ditangani di handler 409
                        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() {
                const tanggalInput = document.getElementById('tanggal_stock_opname');
                const minTanggal = "{{ $minTanggalStockOpname }}";
                const minTanggalText = "{{ \Carbon\Carbon::parse($minTanggalStockOpname)->format('d-m-Y') }}";

                if (tanggalInput) {
                    tanggalInput.addEventListener('change', function() {
                        if (this.value && this.value < minTanggal) {
                            Swal.fire({
                                icon: 'warning',
                                title: 'Tanggal tidak valid',
                                html: 'Tanggal stock opname tidak boleh sebelum <b>' + minTanggalText +
                                    '</b>.',
                                confirmButtonText: 'OK'
                            });

                            this.value = '';
                        }
                    });
                }
            });

            document.addEventListener('DOMContentLoaded', function() {
                // 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 stock opname data
                        loadStockOpnameDetail(idTransaksi);
                    }
                @endif

                // Function to generate stock opname data
                document.getElementById('btnGenerate').addEventListener('click', function() {
                    const tanggalStockOpname = document.getElementById('tanggal_stock_opname').value;
                    const tanggalPelaksanaan = document.getElementById('tanggal_pelaksanaan').value;
                    const tipeBarang = document.getElementById('tipe_barang').value;

                    if (!tanggalStockOpname || !tanggalPelaksanaan || !tipeBarang) {
                        Swal.fire({
                            icon: 'warning',
                            title: 'Perhatian',
                            text: 'Silakan pilih Tanggal Stock Opname, Tanggal Pelaksanaan, dan Tipe Barang terlebih dahulu.',
                            confirmButtonText: 'Mengerti'
                        });
                        return;
                    }

                    // Validate tanggal pelaksanaan >= tanggal stock opname
                    if (new Date(tanggalPelaksanaan) < new Date(tanggalStockOpname)) {
                        Swal.fire({
                            icon: 'warning',
                            title: 'Perhatian',
                            text: 'Tanggal Pelaksanaan harus sama atau setelah Tanggal Stock Opname.',
                            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('tanggal_stock_opname', tanggalStockOpname);
                    formData.append('tanggal_pelaksanaan', tanggalPelaksanaan);
                    formData.append('tipe_barang', tipeBarang);

                    // Call getData endpoint
                    fetch("{{ URL::to('/trstop/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
                                    displayStockOpnameDetail(data.data,
                                        false); // false = not edit mode

                                    // Disable header inputs after generate
                                    document.getElementById('tanggal_stock_opname').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 stock opname detail data
                function loadStockOpnameDetail(idTransaksiHeader) {
                    const tbody = document.getElementById('tbody-stock-opname');

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

                    // Load data from trs_so_d
                    const detailUrl = "{{ URL::to('/trstop/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) {
                                completeStockData = data.details; // Store complete data for saving
                                displayStockOpnameDetail(data.details, true); // true = edit mode

                                // Simpan content hash dari server untuk optimistic locking
                                const contentHashEl = document.getElementById('content_hash');
                                if (contentHashEl && data.content_hash) {
                                    contentHashEl.value = data.content_hash;
                                }
                            } else {
                                console.log('No data found or success=false');
                                const tbody = document.getElementById('tbody-stock-opname');
                                tbody.innerHTML =
                                    '<tr><td colspan="10" class="text-center text-muted">Tidak ada data ditemukan</td></tr>';
                            }
                        })
                        .catch(error => {
                            console.error('Error loading details:', error);
                            tbody.innerHTML =
                                `<tr><td colspan="10" class="text-center text-danger">Gagal memuat data: ${error.message}</td></tr>`;
                        });
                }

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

                        // Restore saved value if exists
                        if (aktualStokValues[kode] !== undefined) {
                            input.value = parseFloat(aktualStokValues[kode]);
                            // Trigger change event to update selisih
                            input.dispatchEvent(new Event('input'));
                        }

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

                // Function to handle aktual stok input changes
                function handleAktualStokInput() {
                    const kode = this.dataset.kode;
                    const stok = parseFloat(this.dataset.stok);
                    const aktual = parseFloat(this.value) || 0;

                    // Store the value
                    aktualStokValues[kode] = parseFloat(this.value) || 0;

                    // Calculate selisih with decimal support (2 decimal places)
                    const selisih = parseFloat((aktual - stok).toFixed(2));
                    const selisihDisplay = selisih > 0 ? `+${selisih}` : selisih.toString();
                    const selisihClass = selisih > 0 ? 'text-success' : (selisih < 0 ? 'text-danger' : '');

                    const selisihCell = document.getElementById(`selisih-${kode}`);
                    if (selisihCell) {
                        selisihCell.textContent = selisihDisplay;
                        selisihCell.className = `text-center ${selisihClass}`;
                    }
                }

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

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

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

                    let html = '';
                    data.forEach((item, index) => {
                        // Store default value in aktualStokValues if not already stored
                        if (aktualStokValues[item.kode_baru] === undefined) {
                            aktualStokValues[item.kode_baru] = parseFloat(item.aktual_stok) || 0;
                        }

                        // Use stored value if exists, otherwise use item.aktual_stok
                        const currentAktualStok = aktualStokValues[item.kode_baru];
                        // Calculate selisih with decimal support (2 decimal places)
                        const selisih = parseFloat((parseFloat(currentAktualStok) - parseFloat(item.stok))
                            .toFixed(2));
                        const selisihDisplay = selisih > 0 ? `+${selisih}` : selisih.toString();
                        const selisihClass = selisih > 0 ? 'text-success' : (selisih < 0 ? 'text-danger' : '');
                        html += `
                            <tr>
                                <td class="text-center">${index + 1}</td>
                                <td>${item.kategori_nama || ''}</td>
                                <td>${item.lokasi || ''}</td>
                                <td>${item.kode_baru}</td>
                                <td>${item.kode_lama || ''}</td>
                                <td>${item.nama_barang}</td>
                                <td>${item.satuan_nama || ''}</td>
                                <td class="text-center">${parseFloat(item.stok)}</td>
                                <td class="text-center">
                                    <input type="number"
                                           class="form-control text-center aktual-stok-input"
                                           data-nama="${item.nama_barang}"
                                           data-stok="${item.stok}"
                                           data-kode="${item.kode_baru}"
                                           data-id="${item.id || ''}"
                                           value="${parseFloat(currentAktualStok)}"
                                           min="0"
                                           step="0.01"
                                           required>
                                </td>
                                <td class="text-center ${selisihClass}" id="selisih-${item.kode_baru}">${selisihDisplay}</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": [4, 5]
                        }],
                        "drawCallback": function() {
                            // Re-attach event listeners after each draw (including pagination)
                            attachAktualStokListeners();
                        }
                    });

                    // Add event listeners for auto-update selisih
                    attachAktualStokListeners();
                }
            });
        </script>
    @endpush