@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => $title ?? 'Stock Opname'])

    <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='{{ route('trsso.index') }}'"><i class="fas fa-circle-left me-1"></i><span class="font-weight-bold">Kembali</span></button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-4">

        <div class="row mb-4">
            <div class="col-12">
                <div class="card shadow-sm">
                    <div class="card-header pb-0 pt-3">
                        <div class="d-flex justify-content-between align-items-center">
                            <h6 class="mb-0">
                                Adjustment Stock Opname - {{ $session->so_session_id }}
                            </h6>
                        </div>
                    </div>
                    <div class="card-body py-3">
                        <div class="row align-items-center">
                            <div class="col-md-6">
                                <span class="badge
                                    @if($session->status == 'OPEN') bg-info
                                    @elseif($session->status == 'IN_PROGRESS') bg-warning
                                    @else bg-success
                                    @endif me-2">
                                    {{ $session->status }}
                                </span>
                                <span class="text-sm">
                                    Periode: {{ \Carbon\Carbon::parse($session->periode_start)->format('d/m/Y') }} -
                                    {{ \Carbon\Carbon::parse($session->periode_end)->format('d/m/Y') }}
                                </span>
                            </div>
                            <div class="col-md-6 text-end">
                                <span class="text-sm text-muted">
                                    PIC: {{ trim($session->pic_name) ?: $session->pic_username }}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <form action="{{ route('trsso.adjustment.store', $session->so_session_id) }}" method="POST" id="adjustmentForm">
            @csrf

            @if(count($adjustmentItems['missing']) > 0)
            <div class="row mb-4">
                <div class="col-12">
                    <div class="card shadow-sm border-danger">
                        <div class="card-header pb-0">
                            <h6 class="mb-0 text-danger">
                                Adjustment Bag Hilang
                            </h6>
                        </div>
                        <div class="card-body px-0 pt-0 pb-2">
                            <div class="table-responsive">
                                <table class="table align-items-center mb-0">
                                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th style="width: 15%">Bag ID</th>
                                            <th style="width: 20%">Material</th>
                                            <th style="width: 15%">Layout</th>
                                            <th style="width: 20%">Alasan</th>
                                            <th style="width: 30%">Keterangan</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($adjustmentItems['missing'] as $index => $bag)
                                            <tr>
                                                <td>
                                                    <div class="d-flex px-3 py-1">
                                                        <h6 class="mb-0 text-sm">{{ $bag->bag_id }}</h6>
                                                        <input type="hidden" name="missing[{{ $index }}][bag_id]" value="{{ $bag->bag_id }}">
                                                        <input type="hidden" name="missing[{{ $index }}][snapshot_id]" value="{{ $bag->adjustment_id ?? '' }}">
                                                        <input type="hidden" name="missing[{{ $index }}][sku_code]" value="{{ $bag->sku_code }}">
                                                        <input type="hidden" name="missing[{{ $index }}][layout_id]" value="{{ $bag->layout_id }}">
                                                    </div>
                                                </td>
                                                <td>
                                                    <p class="text-sm mb-0">{{ $bag->nama_material }}</p>
                                                    <p class="text-xs text-secondary mb-0">{{ $bag->sku_code }}</p>
                                                </td>
                                                <td>
                                                    <p class="text-sm mb-0">{{ $bag->nama_layout }}</p>
                                                </td>
                                                <td>
                                                    <select class="form-select form-select-sm" name="missing[{{ $index }}][reason]" required>
                                                        <option value="">Pilih Alasan</option>
                                                        <option value="LOST">Hilang</option>
                                                        <option value="DAMAGED">Rusak</option>
                                                        <option value="CONSUMED_UNRECORDED">Terpakai (tidak tercatat)</option>
                                                        <option value="TRANSFER_UNRECORDED">Transfer (tidak tercatat)</option>
                                                        <option value="OTHER">Lainnya</option>
                                                    </select>
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control form-control-sm"
                                                           name="missing[{{ $index }}][remarks]"
                                                           placeholder="Keterangan tambahan">
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endif

            @if(count($adjustmentItems['found']) > 0)
            <div class="row mb-4">
                <div class="col-12">
                    <div class="card shadow-sm border-warning">
                        <div class="card-header pb-0">
                            <h6 class="mb-0 text-warning">
                                Adjustment Bag Temuan
                                <!-- <span class="badge bg-warning ms-2">{{ count($adjustmentItems['found']) }}</span> -->
                            </h6>
                            <p class="text-sm text-muted mb-0">
                                Pilih tindakan untuk setiap bag yang ditemukan
                            </p>
                        </div>
                        <div class="card-body px-0 pt-0 pb-2">
                            <div class="table-responsive">
                                <table class="table align-items-center mb-0">
                                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th style="width: 15%">Bag ID</th>
                                            <th style="width: 20%">Material</th>
                                            <th style="width: 15%">Layout</th>
                                            <th style="width: 20%">Tindakan</th>
                                            <th style="width: 30%">Keterangan</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($adjustmentItems['found'] as $index => $bag)
                                            <tr class="found-bag-row" data-index="{{ $index }}" data-bag-id="{{ $bag->bag_id }}" data-has-sku="{{ !empty($bag->sku_code) ? '1' : '0' }}">
                                                <td>
                                                    <div class="d-flex px-3 py-1">
                                                        <h6 class="mb-0 text-sm">{{ $bag->bag_id }}</h6>
                                                        <input type="hidden" name="found[{{ $index }}][bag_id]" value="{{ $bag->bag_id }}">
                                                        <input type="hidden" name="found[{{ $index }}][scan_id]" value="{{ $bag->adjustment_id ?? '' }}">
                                                        <input type="hidden" name="found[{{ $index }}][sku_code]" value="{{ $bag->sku_code }}" class="found-sku-input">
                                                        <input type="hidden" name="found[{{ $index }}][layout_id]" value="{{ $bag->layout_id }}">
                                                    </div>
                                                </td>
                                                <td>
                                                    <p class="text-sm mb-0 found-material-name">{{ $bag->nama_material ?? '-' }}</p>
                                                    <p class="text-xs text-secondary mb-0 found-sku-display">{{ $bag->sku_code ?? '-' }}</p>
                                                </td>
                                                <td>
                                                    <p class="text-sm mb-0">{{ $bag->nama_layout }}</p>
                                                </td>
                                                <td>
                                                    <select class="form-select form-select-sm found-action-select" name="found[{{ $index }}][action]" required>
                                                        <option value="">Pilih Tindakan</option>
                                                        <option value="ADD_TO_STOCK">Tambahkan ke Stok</option>
                                                        <option value="RETURN">Dikembalikan ke Asal</option>
                                                        <option value="REJECT">Reject (Tidak Valid)</option>
                                                        <option value="OTHER">Lainnya</option>
                                                    </select>
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control form-control-sm"
                                                           name="found[{{ $index }}][remarks]"
                                                           placeholder="Keterangan tambahan">
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endif

            @if(count($adjustmentItems['missing']) == 0 && count($adjustmentItems['found']) == 0)
            <div class="row mb-4">
                <div class="col-12">
                    <div class="card shadow-sm">
                        <div class="card-body text-center py-5">
                            <i class="fas fa-check-circle fa-4x text-success mb-3"></i>
                            <h5 class="text-success">Tidak Ada Adjustment Diperlukan</h5>
                            <p class="text-muted mb-4">Semua bag sudah cocok antara sistem dan fisik</p>
                            <a href="{{ route('trsso.show', $session->so_session_id) }}" class="btn btn-primary">
                                <i class="fas fa-arrow-left me-1"></i> Kembali ke Detail Sesi
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            @endif

            @if(count($adjustmentItems['missing']) > 0 || count($adjustmentItems['found']) > 0)
            <div class="row mb-4">
                <div class="col-12">
                    <div class="card shadow-sm border-0 bg-white">
                        <div class="card-body p-3">
                            <div class="row align-items-center">
                                <div class="col-md-7 mb-3 mb-md-0">
                                    <div class="d-flex align-items-center">
                                        <div class="icon icon-shape bg-gray-100 shadow-none text-center rounded-circle me-3">
                                            <i class="fas fa-info text-info"></i>
                                        </div>
                                        <div>
                                            <h6 class="mb-0 text-sm">Konfirmasi Perubahan</h6>
                                            <p class="text-xs text-muted mb-0">
                                                Pastikan semua data adjustment sudah benar.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-5">
                                    <div class="d-grid d-md-flex justify-content-md-end gap-2">
                                        <button type="button" class="btn btn-outline-secondary mb-0" onclick="history.back()">
                                            Batal
                                        </button>
                                        <button type="submit" class="btn bg-success mb-0 text-white" id="btnSave">
                                            <i class="fas fa-save me-2"></i>Simpan
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row mb-4">
                <div class="col-12">
                    <div class="card shadow-sm bg-dark">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="text-white">
                                    <h6 class="mb-0 text-white">
                                        Tutup Sesi Stock Opname
                                    </h6>
                                    <p class="text-sm mb-0">
                                        Setelah adjustment disimpan, Anda dapat menutup sesi SO ini.
                                        <strong>Sesi yang ditutup tidak dapat diubah lagi.</strong>
                                    </p>
                                </div>
                                <button type="button" class="btn btn-danger my-0" id="btnCloseSession" data-bs-toggle="modal" data-bs-target="#closeModal">
                                    <i class="fas fa-lock me-1"></i> Tutup Sesi
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endif
        </form>

        <div class="modal fade" id="closeModal" tabindex="-1" aria-labelledby="closeModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header bg-danger text-white">
                        <h5 class="modal-title text-white" id="closeModalLabel">
                            <i class="fas fa-lock me-2"></i>
                            Konfirmasi Tutup Sesi
                        </h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="alert alert-warning">
                            <i class="fas fa-exclamation-triangle me-2"></i>
                            <strong>Perhatian!</strong>
                        </div>
                        <p>Apakah Anda yakin ingin menutup sesi Stock Opname ini?</p>
                        <ul class="text-muted">
                            <li>Semua adjustment akan disimpan dan diterapkan ke stok</li>
                            <li>Bag dengan status MISSING akan diubah statusnya sesuai adjustment</li>
                            <li>Bag FOUND yang ditambahkan ke stok akan dibuat record baru</li>
                            <li><strong>Sesi yang ditutup tidak dapat dibuka kembali</strong></li>
                        </ul>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                            <i class="fas fa-times me-1"></i> Batal
                        </button>
                        <form action="{{ route('trsso.close', $session->so_session_id) }}" method="POST" style="display: inline;">
                            @csrf
                            <button type="submit" class="btn btn-danger">
                                <i class="fas fa-lock me-1"></i> Ya, Tutup Sesi
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="missingSkuModal" tabindex="-1" aria-labelledby="missingSkuModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content">
                    <div class="modal-header bg-warning">
                        <h5 class="modal-title text-white" id="missingSkuModalLabel">
                            Lengkapi Data SKU
                        </h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="alert alert-info">
                            <i class="fas fa-info-circle me-2"></i>
                            Beberapa barang temuan belum memiliki data SKU. Silakan lengkapi data dibawah ini sebelum menyimpan.
                        </div>
                        <div id="missingSkuList">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                            <i class="fas fa-times me-1"></i> Batal
                        </button>
                        <button type="button" class="btn bg-success text-white" id="btnConfirmSku">
                            <i class="fas fa-check me-1"></i> Simpan
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @push('js')
    <script>
        @if(session('success'))
        Swal.fire({
            icon: 'success',
            title: 'Berhasil',
            text: '{{ session('success') }}',
            confirmButtonColor: '#028284'
        });
        @endif
        @if($errors->any())
        Swal.fire({
            icon: 'error',
            title: 'Error',
            text: '{{ $errors->first() }}',
            confirmButtonColor: '#028284'
        });
        @endif

        const materialsData = @json($materials ?? []);

        document.getElementById('adjustmentForm').addEventListener('submit', function(e) {
            const btnSave = document.getElementById('btnSave');

            const selects = document.querySelectorAll('select[required]');
            let allFilled = true;

            selects.forEach(function(select) {
                if (select.value === '') {
                    allFilled = false;
                    select.classList.add('is-invalid');
                } else {
                    select.classList.remove('is-invalid');
                }
            });

            if (!allFilled) {
                e.preventDefault();
                alert('Harap lengkapi semua alasan/tindakan untuk setiap item!');
                return false;
            }

            const foundRows = document.querySelectorAll('.found-bag-row');
            const missingSkuItems = [];

            foundRows.forEach(function(row) {
                const hasSku = row.dataset.hasSku === '1';
                const skuInput = row.querySelector('.found-sku-input');
                const actionSelect = row.querySelector('.found-action-select');
                const bagId = row.dataset.bagId;
                const index = row.dataset.index;

                if (actionSelect && actionSelect.value) {
                    if (!hasSku && (!skuInput || !skuInput.value)) {
                        missingSkuItems.push({
                            bagId: bagId,
                            index: index,
                            row: row
                        });
                    }
                }
            });

            if (missingSkuItems.length > 0) {
                e.preventDefault();
                showMissingSkuModal(missingSkuItems);
                return false;
            }

            btnSave.disabled = true;
            btnSave.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i> Menyimpan...';
        });

        function showMissingSkuModal(items) {
            const listContainer = document.getElementById('missingSkuList');
            listContainer.innerHTML = '';

            items.forEach(function(item, i) {
                const row = document.createElement('div');
                row.className = 'row mb-3 p-3 bg-light rounded';
                row.innerHTML = `
                    <div class="col-md-4">
                        <label class="form-label text-xs font-weight-bold">Bag ID</label>
                        <input type="text" class="form-control form-control-sm bg-white" value="${item.bagId}" readonly>
                    </div>
                    <div class="col-md-8">
                        <label class="form-label text-xs font-weight-bold">Pilih Material / SKU <span class="text-danger">*</span></label>
                        <select class="form-select form-select-sm modal-sku-select" data-index="${item.index}" data-bag-id="${item.bagId}" required>
                            <option value="">Pilih Material</option>
                            ${materialsData.map(m => `<option value="${m.sku_code}" data-name="${m.nama_material}">${m.sku_code} - ${m.nama_material}</option>`).join('')}
                        </select>
                    </div>
                `;
                listContainer.appendChild(row);
            });

            const modal = new bootstrap.Modal(document.getElementById('missingSkuModal'));
            modal.show();
        }

        document.getElementById('btnConfirmSku').addEventListener('click', function() {
            const modalSelects = document.querySelectorAll('.modal-sku-select');
            let allValid = true;

            modalSelects.forEach(function(select) {
                if (!select.value) {
                    allValid = false;
                    select.classList.add('is-invalid');
                } else {
                    select.classList.remove('is-invalid');

                    const index = select.dataset.index;
                    const bagId = select.dataset.bagId;
                    const selectedOption = select.options[select.selectedIndex];
                    const skuCode = select.value;
                    const materialName = selectedOption.dataset.name;

                    const row = document.querySelector(`.found-bag-row[data-index="${index}"]`);
                    if (row) {
                        row.querySelector('.found-sku-input').value = skuCode;
                        row.querySelector('.found-sku-display').textContent = skuCode;
                        row.querySelector('.found-material-name').textContent = materialName;
                        row.dataset.hasSku = '1';
                    }
                }
            });

            if (!allValid) {
                return;
            }

            const modal = bootstrap.Modal.getInstance(document.getElementById('missingSkuModal'));
            modal.hide();

            const btnSave = document.getElementById('btnSave');
            btnSave.disabled = true;
            btnSave.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i> Menyimpan...';
            document.getElementById('adjustmentForm').submit();
        });

        document.querySelectorAll('select').forEach(function(select) {
            select.addEventListener('change', function() {
                const row = this.closest('tr');
                if (row) {
                    if (this.value) {
                        row.classList.add('table-light');
                    } else {
                        row.classList.remove('table-light');
                    }
                }
            });
        });
    </script>
    @endpush
@endsection