@extends('layouts.app')

@section('title', 'Inventory & Stok')

@section('breadcrumb')
    <span>Gudang</span>
    <i class="bi bi-chevron-right"></i>
    <span>Inventory & Stok</span>
@endsection

@section('content')

<div class="pf-page-header">
    <div>
        <h1 class="pf-page-title"><i class="bi bi-boxes me-2 text-primary-pf"></i>Inventory & Stok</h1>
        <p class="pf-page-subtitle">Kelola stok kertas, tinta, dan bahan produksi</p>
    </div>
    <div class="d-flex gap-2 flex-wrap">
        <button class="btn btn-outline-warning btn-sm" onclick="exportStok()">
            <i class="bi bi-download"></i> Export Excel
        </button>
        <button class="btn btn-outline-secondary btn-sm" onclick="cetakKartuStok()">
            <i class="bi bi-printer"></i> Kartu Stok
        </button>
        <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#modalTambahItem">
            <i class="bi bi-plus-lg"></i> Tambah Item
        </button>
    </div>
</div>

{{-- Alert stok kritis --}}
@if($stokKritis->isNotEmpty())
<div class="alert alert-warning alert-dismissible fade show pf-alert d-flex align-items-center gap-3" role="alert">
    <i class="bi bi-exclamation-triangle-fill fs-5"></i>
    <div>
        <strong>{{ $stokKritis->count() }} item stok hampir habis!</strong>
        Item: {{ $stokKritis->pluck('nama_item')->take(4)->join(', ') }}{{ $stokKritis->count() > 4 ? ', dan lainnya' : '' }}.
        <a href="#" onclick="filterKritis()" class="alert-link">Lihat semua →</a>
    </div>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert"></button>
</div>
@endif

{{-- Mini Stats --}}
<div class="row g-3 mb-4">
    @php
    $invStats = [
        ['label'=>'Total Item',    'val'=> $totalItem ?? 0,    'icon'=>'bi-box-seam','color'=>'#1B4FD8','bg'=>'#EEF3FF'],
        ['label'=>'Stok Normal',   'val'=> $stokNormal ?? 0,   'icon'=>'bi-check-circle-fill','color'=>'#059669','bg'=>'#D1FAE5'],
        ['label'=>'Stok Kritis',   'val'=> $stokKritis->count() ?? 0, 'icon'=>'bi-exclamation-triangle-fill','color'=>'#DC2626','bg'=>'#FEE2E2'],
        ['label'=>'Nilai Stok',    'val'=> 'Rp '.number_format($nilaiStok ?? 0, 0, ',', '.'), 'icon'=>'bi-currency-dollar','color'=>'#D97706','bg'=>'#FEF3C7'],
    ];
    @endphp
    @foreach($invStats as $s)
    <div class="col-6 col-md-3">
        <div class="pf-stat-card" style="--pf-stat-color:{{ $s['color'] }};--pf-stat-bg:{{ $s['bg'] }}">
            <div class="pf-stat-icon"><i class="{{ $s['icon'] }}"></i></div>
            <div class="pf-stat-body">
                <div class="pf-stat-label">{{ $s['label'] }}</div>
                <div class="pf-stat-value" style="font-size:{{ strlen((string)$s['val']) > 10 ? '16px' : '22px' }}">{{ $s['val'] }}</div>
            </div>
        </div>
    </div>
    @endforeach
</div>

{{-- Filter & Search --}}
<div class="pf-card mb-3">
    <div class="pf-card-body py-3">
        <div class="row g-2 align-items-end">
            <div class="col-12 col-md-3">
                <label class="form-label mb-1" style="font-size:12px">Kategori</label>
                <select class="form-select form-select-sm" id="fKategori" onchange="applyFilter()">
                    <option value="">Semua Kategori</option>
                    <option value="kertas">Kertas</option>
                    <option value="tinta">Tinta</option>
                    <option value="finishing">Bahan Finishing</option>
                    <option value="consumable">Consumable</option>
                    <option value="lain">Lainnya</option>
                </select>
            </div>
            <div class="col-12 col-md-3">
                <label class="form-label mb-1" style="font-size:12px">Status Stok</label>
                <select class="form-select form-select-sm" id="fStatusStok" onchange="applyFilter()">
                    <option value="">Semua</option>
                    <option value="kritis">Stok Kritis</option>
                    <option value="normal">Stok Normal</option>
                    <option value="aman">Stok Aman</option>
                </select>
            </div>
            <div class="col-12 col-md-4">
                <label class="form-label mb-1" style="font-size:12px">Cari Item</label>
                <div class="input-group input-group-sm">
                    <span class="input-group-text"><i class="bi bi-search"></i></span>
                    <input type="text" class="form-control" id="fSearch" placeholder="Nama item, kode..." oninput="applyFilter()">
                </div>
            </div>
            <div class="col-12 col-md-2 d-flex gap-1">
                <button class="btn btn-sm btn-primary flex-fill" onclick="applyFilter()">Filter</button>
                <button class="btn btn-sm btn-outline-secondary" onclick="resetFilter()"><i class="bi bi-x"></i></button>
            </div>
        </div>
    </div>
</div>

{{-- Inventory Table --}}
<div class="pf-card">
    <div class="pf-card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0" id="tblInventory" style="width:100%">
                <thead>
                    <tr>
                        <th>Kode</th>
                        <th>Nama Item</th>
                        <th>Kategori</th>
                        <th>Stok Aktual</th>
                        <th>Stok Min</th>
                        <th>Status</th>
                        <th>Harga Beli</th>
                        <th>Nilai Stok</th>
                        <th>Lokasi</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($inventory as $item)
                    @php
                        $pct       = $item->qty_minimum > 0 ? ($item->qty_aktual / $item->qty_minimum) : 2;
                        $isKritis  = $pct <= 1;
                        $isWarning = $pct > 1 && $pct <= 1.5;
                        $statusLabel = $isKritis ? 'Kritis' : ($isWarning ? 'Rendah' : 'Aman');
                        $statusCls   = $isKritis ? 'pf-status-batal' : ($isWarning ? 'pf-status-pending' : 'pf-status-selesai');
                        $nilaiStok   = $item->qty_aktual * $item->harga_beli_terakhir;
                    @endphp
                    <tr id="row-{{ $item->id }}" data-kategori="{{ $item->kategori }}" data-status="{{ strtolower($statusLabel) }}">
                        <td><span class="font-mono" style="font-size:12px;color:var(--pf-text-muted)">{{ $item->kode_item }}</span></td>
                        <td>
                            <div style="font-weight:500;font-size:13.5px">{{ $item->nama_item }}</div>
                            @if($item->supplier)
                                <div style="font-size:11px;color:var(--pf-text-muted)">
                                    <i class="bi bi-building me-1"></i>{{ $item->supplier->nama }}
                                </div>
                            @endif
                        </td>
                        <td>
                            <span style="font-size:12px;background:var(--pf-bg);padding:2px 8px;border-radius:4px;font-weight:500">
                                {{ ucfirst($item->kategori) }}
                            </span>
                        </td>
                        <td>
                            <div class="font-mono fw-600" style="{{ $isKritis ? 'color:#DC2626' : ($isWarning ? 'color:#D97706' : '') }}">
                                {{ number_format($item->qty_aktual, 2) }}
                            </div>
                            <div style="font-size:11px;color:var(--pf-text-muted)">{{ $item->satuan }}</div>
                        </td>
                        <td>
                            <span class="font-mono" style="font-size:13px;color:var(--pf-text-muted)">
                                {{ number_format($item->qty_minimum, 2) }} {{ $item->satuan }}
                            </span>
                        </td>
                        <td>
                            <span class="pf-status {{ $statusCls }}">{{ $statusLabel }}</span>
                            @if($isKritis)
                                <div style="font-size:10px;color:#DC2626;margin-top:3px;font-weight:600">
                                    <i class="bi bi-arrow-repeat me-1"></i>Reorder!
                                </div>
                            @endif
                        </td>
                        <td>
                            <span class="font-mono" style="font-size:12.5px">
                                Rp {{ number_format($item->harga_beli_terakhir, 0, ',', '.') }}/{{ $item->satuan }}
                            </span>
                        </td>
                        <td>
                            <span class="font-mono" style="font-size:12.5px;font-weight:500">
                                Rp {{ number_format($nilaiStok, 0, ',', '.') }}
                            </span>
                        </td>
                        <td>
                            <span style="font-size:12.5px">{{ $item->lokasi_gudang ?? '-' }}</span>
                        </td>
                        <td>
                            <div class="d-flex gap-1">
                                <button class="btn btn-xs btn-outline-success" title="Stok Masuk"
                                        onclick="transaksiStok({{ $item->id }}, 'masuk', '{{ $item->nama_item }}', '{{ $item->satuan }}')">
                                    <i class="bi bi-box-arrow-in-down"></i>
                                </button>
                                <button class="btn btn-xs btn-outline-warning" title="Stok Keluar"
                                        onclick="transaksiStok({{ $item->id }}, 'keluar', '{{ $item->nama_item }}', '{{ $item->satuan }}')">
                                    <i class="bi bi-box-arrow-up"></i>
                                </button>
                                <div class="dropdown">
                                    <button class="btn btn-xs btn-outline-secondary" data-bs-toggle="dropdown">
                                        <i class="bi bi-three-dots"></i>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end">
                                        <li><a class="dropdown-item" href="{{ route('inventory.kartu-stok', $item->id) }}">
                                            <i class="bi bi-card-list me-2"></i>Kartu Stok</a></li>
                                        <li><a class="dropdown-item" onclick="editItem({{ $item->id }})">
                                            <i class="bi bi-pencil me-2"></i>Edit Item</a></li>
                                        @if($isKritis)
                                        <li><hr class="dropdown-divider"></li>
                                        <li><a class="dropdown-item text-warning" onclick="buatPO({{ $item->id }})">
                                            <i class="bi bi-bag-plus me-2"></i>Buat PO Reorder</a></li>
                                        @endif
                                        <li><hr class="dropdown-divider"></li>
                                        <li><a class="dropdown-item text-danger"
                                               onclick="PF.confirmDelete('/inventory/{{ $item->id }}', '{{ $item->nama_item }}')">
                                            <i class="bi bi-trash me-2"></i>Hapus</a></li>
                                    </ul>
                                </div>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

{{-- ===== MODAL TRANSAKSI STOK ===== --}}
<div class="modal fade" id="modalTransaksi" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" style="border-radius:var(--pf-radius-lg);border:1px solid var(--pf-border)">
            <div class="modal-header" style="border-bottom:1px solid var(--pf-border)">
                <h5 class="modal-title" id="modalTransaksiTitle">Transaksi Stok</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="formTransaksi">
                    @csrf
                    <input type="hidden" id="txItemId">
                    <input type="hidden" id="txType">
                    <div class="row g-3">
                        <div class="col-12">
                            <label class="form-label">Item</label>
                            <input type="text" class="form-control" id="txItemName" readonly style="background:var(--pf-bg)">
                        </div>
                        <div class="col-6">
                            <label class="form-label">Jumlah <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <input type="number" class="form-control font-mono" id="txQty" min="0.01" step="0.01" placeholder="0">
                                <span class="input-group-text" id="txSatuan">unit</span>
                            </div>
                        </div>
                        <div class="col-6">
                            <label class="form-label">Harga Beli (Rp)</label>
                            <div class="input-group">
                                <span class="input-group-text">Rp</span>
                                <input type="number" class="form-control font-mono" id="txHarga" min="0" placeholder="0">
                            </div>
                        </div>
                        <div class="col-12">
                            <label class="form-label">No. Referensi</label>
                            <input type="text" class="form-control" id="txRef" placeholder="No. PO, No. SO, dll.">
                        </div>
                        <div class="col-12">
                            <label class="form-label">Keterangan</label>
                            <textarea class="form-control" id="txKeterangan" rows="2" placeholder="Keterangan transaksi..."></textarea>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer" style="border-top:1px solid var(--pf-border)">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-primary" id="btnSimpanTx" onclick="submitTransaksi()">
                    <i class="bi bi-save2-fill"></i> Simpan
                </button>
            </div>
        </div>
    </div>
</div>

{{-- Modal Tambah Item --}}
<div class="modal fade" id="modalTambahItem" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content" style="border-radius:var(--pf-radius-lg);border:1px solid var(--pf-border)">
            <div class="modal-header" style="border-bottom:1px solid var(--pf-border)">
                <h5 class="modal-title"><i class="bi bi-plus-circle me-2 text-primary"></i>Tambah Item Inventory</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('inventory.store') }}" method="POST" id="formTambahItem">
                @csrf
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-6">
                            <label class="form-label">Kode Item</label>
                            <input type="text" class="form-control" name="kode_item" required placeholder="cth: KRT-AP100">
                        </div>
                        <div class="col-6">
                            <label class="form-label">Kategori</label>
                            <select class="form-select" name="kategori" required>
                                <option value="kertas">Kertas</option>
                                <option value="tinta">Tinta</option>
                                <option value="finishing">Bahan Finishing</option>
                                <option value="consumable">Consumable</option>
                                <option value="lain">Lainnya</option>
                            </select>
                        </div>
                        <div class="col-12">
                            <label class="form-label">Nama Item <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="nama_item" required placeholder="cth: Art Paper 100 gsm Plano 65x100">
                        </div>
                        <div class="col-4">
                            <label class="form-label">Satuan</label>
                            <select class="form-select" name="satuan">
                                <option value="kg">kg</option>
                                <option value="rim">rim</option>
                                <option value="lembar">lembar</option>
                                <option value="liter">liter</option>
                                <option value="kaleng">kaleng</option>
                                <option value="roll">roll</option>
                                <option value="pcs">pcs</option>
                            </select>
                        </div>
                        <div class="col-4">
                            <label class="form-label">Stok Awal</label>
                            <input type="number" class="form-control font-mono" name="qty_aktual" value="0" min="0" step="0.01">
                        </div>
                        <div class="col-4">
                            <label class="form-label">Stok Minimum</label>
                            <input type="number" class="form-control font-mono" name="qty_minimum" value="0" min="0" step="0.01">
                        </div>
                        <div class="col-6">
                            <label class="form-label">Harga Beli Terakhir</label>
                            <div class="input-group">
                                <span class="input-group-text">Rp</span>
                                <input type="number" class="form-control font-mono" name="harga_beli_terakhir" value="0" min="0">
                            </div>
                        </div>
                        <div class="col-6">
                            <label class="form-label">Lokasi Gudang</label>
                            <input type="text" class="form-control" name="lokasi_gudang" placeholder="cth: Rak A-12">
                        </div>
                        <div class="col-12">
                            <label class="form-label">Supplier</label>
                            <select class="form-select" name="supplier_id">
                                <option value="">— Pilih Supplier —</option>
                                @foreach($suppliers ?? [] as $s)
                                    <option value="{{ $s->id }}">{{ $s->nama }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer" style="border-top:1px solid var(--pf-border)">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-save2-fill"></i> Simpan Item
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
let invTable;

$(document).ready(function() {
    invTable = $('#tblInventory').DataTable({
        pageLength: 25,
        order: [[5, 'asc']], // Sort by status (kritis dulu)
        columnDefs: [{ orderable: false, targets: [9] }],
        dom: "<'row mb-2'<'col-md-6'l><'col-md-6 d-flex justify-content-end'Bf>>" +
             "<'row'<'col-12'tr>>" +
             "<'row mt-2'<'col-md-5'i><'col-md-7 d-flex justify-content-end'p>>",
        buttons: [
            { extend: 'excelHtml5', text: '<i class="bi bi-file-earmark-excel me-1"></i>Excel', exportOptions: { columns: ':not(:last-child)' } },
            { extend: 'print', text: '<i class="bi bi-printer me-1"></i>Print', exportOptions: { columns: ':not(:last-child)' } }
        ]
    });
});

function applyFilter() {
    const kat    = document.getElementById('fKategori').value.toLowerCase();
    const status = document.getElementById('fStatusStok').value.toLowerCase();
    const search = document.getElementById('fSearch').value.toLowerCase();

    document.querySelectorAll('#tblInventory tbody tr').forEach(row => {
        const rowKat    = row.dataset.kategori?.toLowerCase() || '';
        const rowStatus = row.dataset.status?.toLowerCase() || '';
        const rowText   = row.textContent.toLowerCase();

        const matchKat    = !kat    || rowKat === kat;
        const matchStatus = !status || rowStatus.includes(status);
        const matchSearch = !search || rowText.includes(search);

        row.style.display = matchKat && matchStatus && matchSearch ? '' : 'none';
    });
}

function resetFilter() {
    document.getElementById('fKategori').value   = '';
    document.getElementById('fStatusStok').value = '';
    document.getElementById('fSearch').value     = '';
    applyFilter();
}

function filterKritis() {
    document.getElementById('fStatusStok').value = 'kritis';
    applyFilter();
}

// ─── Transaksi Stok ───
function transaksiStok(itemId, type, itemName, satuan) {
    document.getElementById('txItemId').value  = itemId;
    document.getElementById('txType').value    = type;
    document.getElementById('txItemName').value = itemName;
    document.getElementById('txSatuan').textContent = satuan;

    const title = type === 'masuk'
        ? `<i class="bi bi-box-arrow-in-down me-2 text-success"></i>Stok Masuk — ${itemName}`
        : `<i class="bi bi-box-arrow-up me-2 text-warning"></i>Stok Keluar — ${itemName}`;
    document.getElementById('modalTransaksiTitle').innerHTML = title;

    document.getElementById('btnSimpanTx').className = type === 'masuk'
        ? 'btn btn-success' : 'btn btn-warning';

    // Reset form
    ['txQty','txHarga','txRef','txKeterangan'].forEach(id => {
        document.getElementById(id).value = '';
    });

    new bootstrap.Modal(document.getElementById('modalTransaksi')).show();
}

function submitTransaksi() {
    const itemId = document.getElementById('txItemId').value;
    const type   = document.getElementById('txType').value;
    const qty    = parseFloat(document.getElementById('txQty').value);

    if (!qty || qty <= 0) {
        PF.error('Jumlah harus lebih dari 0');
        return;
    }

    PF.loading('Menyimpan transaksi...');

    fetch(`/inventory/${itemId}/transaksi`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
        },
        body: JSON.stringify({
            type,
            qty,
            harga: document.getElementById('txHarga').value,
            referensi: document.getElementById('txRef').value,
            keterangan: document.getElementById('txKeterangan').value,
        })
    })
    .then(r => r.json())
    .then(d => {
        PF.closeLoading();
        if (d.success) {
            bootstrap.Modal.getInstance(document.getElementById('modalTransaksi')).hide();
            PF.success(`Stok ${type === 'masuk' ? 'masuk' : 'keluar'} berhasil dicatat`);
            setTimeout(() => location.reload(), 1200);
        } else {
            PF.error(d.message || 'Gagal menyimpan');
        }
    })
    .catch(() => { PF.closeLoading(); PF.error('Koneksi gagal'); });
}

function buatPO(itemId) {
    window.location.href = `/purchases/create?item_id=${itemId}&type=reorder`;
}

function exportStok() {
    window.location.href = '/inventory/export';
}

function cetakKartuStok() {
    window.open('/inventory/print-kartu-stok', '_blank');
}
</script>
@endpush