@extends('layouts.app')
@section('title', 'Penyesuaian Stok')
@section('page-title', 'Penyesuaian Stok (Superadmin)')

@section('content')
@push('styles')
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/css/tom-select.bootstrap5.min.css" rel="stylesheet">
@endpush

<div class="row g-3">
    <div class="col-lg-5">
        <div class="card">
            <div class="card-header bg-secondary text-white"><i class="bi bi-sliders me-1"></i> Form Penyesuaian Stok</div>
            <div class="card-body">
                <div class="alert alert-info py-2 small">
                    <i class="bi bi-info-circle me-1"></i> Gunakan untuk koreksi hasil stock opname. Masukkan <strong>stok hasil hitung fisik</strong>; sistem mencatat selisihnya. Keterangan wajib diisi.
                </div>
                <form method="POST" action="{{ route('adjustments.store') }}">
                    @csrf
                    <div class="mb-3">
                        <label class="form-label">Barang <span class="text-danger">*</span></label>
                        <select name="item_id" class="form-select" id="item-select" required>
                            <option value="">-- Pilih Barang --</option>
                            @foreach($items as $it)
                                <option value="{{ $it->id }}" data-stock="{{ $it->current_stock }}" @selected(old('item_id')==$it->id)>
                                    {{ $it->description }} ({{ $it->code }}) — stok sistem: {{ $it->current_stock }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Stok Sistem Saat Ini</label>
                        <input type="text" id="current-stock" class="form-control" value="-" disabled>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Stok Hasil Fisik (target) <span class="text-danger">*</span></label>
                        <input type="number" name="target_quantity" class="form-control" min="0" value="{{ old('target_quantity') }}" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">No. Referensi</label>
                        <input type="text" name="reference" class="form-control" value="{{ old('reference') }}">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Keterangan <span class="text-danger">*</span></label>
                        <textarea name="notes" class="form-control" rows="2" required placeholder="contoh: koreksi stock opname Juni">{{ old('notes') }}</textarea>
                    </div>
                    <button class="btn btn-secondary"><i class="bi bi-check2-circle me-1"></i> Sesuaikan Stok</button>
                </form>
            </div>
        </div>
    </div>

    <div class="col-lg-7">
        <div class="card">
            <div class="card-header"><i class="bi bi-clock-history me-1"></i> Riwayat Penyesuaian</div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-striped mb-0 align-middle">
                        <thead><tr><th>Tgl & Jam</th><th>Barang</th><th class="text-center">Selisih</th><th class="text-center">Stok</th><th>Oleh</th><th>Keterangan</th></tr></thead>
                        <tbody>
                        @forelse($history as $h)
                            <tr>
                                <td><small>{{ $h->transaction_at->format('d/m/Y H:i') }}</small></td>
                                <td>{{ $h->item->description }}</td>
                                <td class="text-center">
                                    @if($h->quantity>0)<span class="text-success">+{{ $h->quantity }}</span>
                                    @else<span class="text-danger">{{ $h->quantity }}</span>@endif
                                </td>
                                <td class="text-center"><small>{{ $h->stock_before }} → <strong>{{ $h->stock_after }}</strong></small></td>
                                <td><small>{{ $h->user->name }}</small></td>
                                <td><small class="text-muted">{{ $h->notes }}</small></td>
                            </tr>
                        @empty
                            <tr><td colspan="6" class="text-center text-muted py-3">Belum ada penyesuaian.</td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="card-footer">{{ $history->links() }}</div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>
<script>
    const sel = document.getElementById('item-select');
    const cur = document.getElementById('current-stock');
    
    sel.addEventListener('change', e => {
        const opt = sel.options[sel.selectedIndex];
        cur.value = opt && opt.value ? (opt.dataset.stock ?? '-') : '-';
    });

    new TomSelect("#item-select", {
        create: false,
        sortField: {
            field: "text",
            direction: "asc"
        }
    });
</script>
@endpush