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

@push('styles')
<style>
    .form-check-input.custom-checkbox {
        border: 2px solid #8898aa; /* Visible border when unchecked */
        width: 1.4em;
        height: 1.4em;
        margin-top: 0;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    .form-check-input.custom-checkbox:checked {
        background-color: #5e72e4;
        border-color: #5e72e4;
    }
    .form-check-input.custom-checkbox:hover {
        border-color: #5e72e4;
    }
    .card-actions {
        position: sticky;
        bottom: 20px;
        z-index: 99;
    }
    .bg-success-light {
        background-color: rgba(45, 206, 137, 0.1) !important;
    }
</style>
@endpush

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => $title ?? 'Input 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 border-0">
                    <div class="card-body p-4">
                        <div class="row align-items-center">
                            <div class="col-md-6 mb-3 mb-md-0">
                                <h5 class="mb-1">Stock Opname: {{ $session->so_session_id }}</h5>
                                <div class="d-flex align-items-center flex-wrap gap-2 text-sm text-muted">
                                    <span class="badge bg-info">{{ $session->status }}</span>
                                    <span>
                                        <i class="far fa-calendar-alt me-1"></i>
                                        {{ \Carbon\Carbon::parse($session->periode_start)->format('d M Y') }} -
                                        {{ \Carbon\Carbon::parse($session->periode_end)->format('d M Y') }}
                                    </span>
                                    <span class="border-start ps-2 ms-1">
                                        <i class="far fa-user me-1"></i>
                                        {{ trim($session->pic_name) ?: $session->pic_username }}
                                    </span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <form method="GET" action="{{ route('trsso.input-manual', $session->so_session_id) }}">
                                    <div class="d-flex align-items-center justify-content-md-end">
                                        <div class="input-group w-md-75">
                                            <span class="input-group-text bg-gray-200"><i class="fas fa-map-marker-alt"></i></span>
                                            <select name="layout_id" class="form-select ps-2" required onchange="this.form.submit()" style="border-left: 0;">
                                                <option value="">Pilih Lokasi / Layout</option>
                                                @foreach($layouts as $layout)
                                                    <option value="{{ $layout->id_layout }}"
                                                        {{ $selected_layout == $layout->id_layout ? 'selected' : '' }}>
                                                        {{ $layout->nama_layout }}{{ $layout->baris ? ' - BARIS ' . $layout->baris : '' }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>

                        @if($selected_layout)
                            <hr class="horizontal dark my-3">
                            <div class="d-flex align-items-start">
                                <p class="text-sm mb-0">
                                    Terdapat <strong>{{ $snapshots->count() }}</strong> barang terdaftar pada lokasi ini.
                                    Silakan centang pada checkbox untuk barang yang <strong>ditemukan secara fisik</strong>.
                                </p>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        @if($selected_layout && $snapshots->count() > 0)
            <form action="{{ route('trsso.input-manual.store', $session->so_session_id) }}" method="POST">
                @csrf
                <input type="hidden" name="layout_id" value="{{ $selected_layout }}">
                <div class="card shadow-sm border-0 mb-4">
                    <div class="card-header bg-white p-4 pb-0">
                        <div class="d-flex justify-content-between align-items-center flex-wrap">
                            <div>
                                <h6 class="font-weight-bolder mb-0">Daftar Barang (Sistem)</h6>
                                <p class="text-sm text-muted mb-0">Barang yang seharusnya ada di lokasi ini</p>
                            </div>
                            <div class="my-2">
                                <button type="button" class="btn btn-sm btn-outline-primary mb-0 me-2" id="selectAll">
                                    <i class="fas fa-check-double me-1"></i> Pilih Semua
                                </button>
                                <button type="button" class="btn btn-sm btn-outline-secondary mb-0" id="deselectAll">
                                    <i class="fas fa-undo me-1"></i> Reset
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive p-0">
                            <table class="table align-items-center table-hover mb-0">
                                <thead class="thead-light" style="background-color: #00b7bd4f;">
                                    <tr>
                                        <th class="text-center" width="5%">
                                            <div class="form-check d-flex justify-content-center">
                                                <input type="checkbox" id="checkAll" class="form-check-input custom-checkbox">
                                            </div>
                                        </th>
                                        <th>Identitas Barang</th>
                                        <th>Keterangan</th>
                                        <th class="text-center">Berat</th>
                                        <th class="text-center">Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($snapshots as $snap)
                                        <tr class="{{ $snap->is_scanned ? 'bg-success-light' : '' }}">
                                            <td class="text-center">
                                                <div class="form-check d-flex justify-content-center">
                                                    <input type="checkbox" name="checked_bags[]"
                                                        value="{{ $snap->bag_id }}"
                                                        class="form-check-input custom-checkbox bag-checkbox"
                                                        {{ $snap->is_scanned ? 'checked disabled' : '' }}>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="d-flex flex-column px-3">
                                                    <h6 class="mb-0 text-sm font-weight-bold text-dark">{{ $snap->bag_id }}</h6>
                                                    <span class="text-xs text-secondary font-monospace">{{ $snap->barcode_value }}</span>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="d-flex flex-column">
                                                    <span class="text-sm font-weight-bold text-dark">{{ $snap->sku_code }}</span>
                                                    <span class="text-xs text-muted">
                                                        {{ $snap->nama_material }}
                                                        @if($snap->color_name) • {{ $snap->color_name }} @endif
                                                    </span>
                                                </div>
                                            </td>
                                            <td class="text-center">
                                                <span class="text-sm font-weight-bold text-dark">{{ number_format($snap->berat_system ?? 0, 2) }}</span>
                                                <span class="text-xs text-secondary">kg</span>
                                            </td>
                                            <td class="text-center">
                                                @if($snap->is_scanned)
                                                    <span class="badge bg-success badge-sm">Terverifikasi</span>
                                                @else
                                                    <span class="badge bg-secondary badge-sm">Belum Cek</span>
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="card shadow-sm border-0 mb-5">
                    <div class="card-header p-4 pb-2">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="font-weight-bolder mb-0 text-warning">Barang Temuan</h6>
                                <p class="text-sm text-muted mb-0">Tambahkan jika menemukan barang yang tidak ada di daftar atas</p>
                            </div>
                            <button type="button" class="btn btn-sm bg-warning mb-0 text-white shadow-warning" id="addFoundBag">
                                <i class="fas fa-plus me-1"></i> Tambah Item
                            </button>
                        </div>
                    </div>
                    <div class="card-body p-4">
                        <div id="foundBagsContainer">
                        </div>
                        <div id="noFoundBags" class="text-center py-4 border rounded-3 border-dashed bg-gray-50">
                            <i class="fas fa-search-plus fa-2x text-secondary mb-3 opacity-5"></i>
                            <h6 class="text-secondary mb-0">Belum ada barang temuan</h6>
                            <p class="text-xs text-muted">Klik tombol "Tambah Item" disebelah kanan atas untuk input manual</p>
                        </div>
                    </div>
                </div>

                <div class="card-actions">
                    <div class="card shadow-lg bg-white border-0">
                        <div class="card-body p-3">
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="d-flex align-items-center ps-2">
                                    <div class="icon icon-shape icon-sm shadow border-radius-md bg-primary text-center me-2 text-white d-flex align-items-center justify-content-center">
                                        <i class="fas fa-check"></i>
                                    </div>
                                    <div>
                                        <p class="text-xs mb-0 text-muted font-weight-bold">TOTAL DIPILIH</p>
                                        <h5 class="font-weight-bolder mb-0 text-primary" id="selectedCount">0 <span class="text-sm text-dark font-weight-normal">Barang</span></h5>
                                    </div>
                                </div>
                                <div class="d-flex gap-2">
                                    <a href="{{ route('trsso.show', $session->so_session_id) }}" class="btn btn-outline-secondary mb-0">
                                        Batal
                                    </a>
                                    <button type="submit" class="btn bg-primary mb-0 shadow-primary ps-4 pe-4 text-white">
                                        <i class="fas fa-save me-2"></i> Simpan
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        @elseif($selected_layout && $snapshots->count() == 0)
            <div class="card border-0 shadow-sm mt-4">
                <div class="card-body text-center py-6">
                    <div class="bg-gray-100 rounded-circle d-inline-flex p-4 mb-3">
                        <i class="fas fa-box-open fa-3x text-secondary"></i>
                    </div>
                    <h4>Tidak ada data barang</h4>
                    <p class="text-muted mb-4">Tidak ada data bag yang terdaftar untuk lokasi/layout ini.</p>
                    <a href="{{ route('trsso.show', $session->so_session_id) }}" class="btn btn-secondary">Kembali</a>
                </div>
            </div>
        @endif
    </div>
@endsection

@push('js')
<script>
document.addEventListener('DOMContentLoaded', function() {
    @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 checkAll = document.getElementById('checkAll');
    const selectAll = document.getElementById('selectAll');
    const deselectAll = document.getElementById('deselectAll');
    const bagCheckboxes = document.querySelectorAll('.bag-checkbox:not(:disabled)');
    const selectedCount = document.getElementById('selectedCount');
    const foundBagsContainer = document.getElementById('foundBagsContainer');
    const noFoundBags = document.getElementById('noFoundBags');
    const addFoundBag = document.getElementById('addFoundBag');

    let foundBagIndex = 0;

    function updateSelectedCount() {
        const checked = document.querySelectorAll('.bag-checkbox:checked').length;
        if (selectedCount) {
            selectedCount.innerHTML = `${checked} <span class="text-sm text-dark font-weight-normal">Barang</span>`;
        }
    }

    if (checkAll) {
        checkAll.addEventListener('change', function() {
            bagCheckboxes.forEach(cb => {
                cb.checked = this.checked;
            });
            updateSelectedCount();
        });
    }

    if (selectAll) {
        selectAll.addEventListener('click', function() {
            bagCheckboxes.forEach(cb => {
                cb.checked = true;
            });
            if (checkAll) checkAll.checked = true;
            updateSelectedCount();
        });
    }

    if (deselectAll) {
        deselectAll.addEventListener('click', function() {
            bagCheckboxes.forEach(cb => {
                cb.checked = false;
            });
            if (checkAll) checkAll.checked = false;
            updateSelectedCount();
        });
    }

    bagCheckboxes.forEach(cb => {
        cb.addEventListener('change', updateSelectedCount);
    });

    if (addFoundBag) {
        addFoundBag.addEventListener('click', function() {
            if (noFoundBags) noFoundBags.style.display = 'none';

            const row = document.createElement('div');
            row.className = 'row g-3 mb-3 found-bag-row fade-in-up';
            row.innerHTML = `
                <div class="col-md-4">
                    <label class="form-label text-xs font-weight-bold">Barcode / ID Bag</label>
                    <input type="text" name="found_bags[${foundBagIndex}][barcode]" class="form-control"
                        placeholder="Scan atau ketik barcode">
                </div>
                <div class="col-md-3">
                    <label class="form-label text-xs font-weight-bold">SKU (opsional)</label>
                    <input type="text" name="found_bags[${foundBagIndex}][sku_code]" class="form-control"
                        placeholder="Kode SKU">
                </div>
                <div class="col-md-4">
                    <label class="form-label text-xs font-weight-bold">Catatan</label>
                    <input type="text" name="found_bags[${foundBagIndex}][notes]" class="form-control"
                        placeholder="Catatan temuan">
                </div>
                <div class="col-md-1 d-flex align-items-end">
                    <button type="button" class="btn btn-danger btn-icon-only remove-found-bag mb-0">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            `;

            foundBagsContainer.appendChild(row);
            foundBagIndex++;
            row.querySelector('.remove-found-bag').addEventListener('click', function() {
                row.remove();
                if (foundBagsContainer.children.length === 0) {
                    if (noFoundBags) noFoundBags.style.display = 'block';
                }
            });
        });
    }

    updateSelectedCount();
});
</script>
@endpush