@extends('layouts.apex')

@section('title', 'Stok Barang')

@section('content')
<div class="page-header">
    <div class="page-header-content">
        <div>
            <h1 class="page-header-title">Stok Barang</h1>
            <p class="page-header-subtitle">Monitoring stok barang tersedia</p>
        </div>
    </div>
</div>

<div class="page-body">
    <!-- Summary Cards -->
    <div class="grid grid-cols-3" style="margin-bottom: 2rem;">
        <div class="card">
            <div class="card-body">
                <div class="summary-card">
                    <div class="summary-icon summary-icon-primary">
                        <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/>
                        </svg>
                    </div>
                    <div>
                        <div class="summary-label">Total Jenis Barang</div>
                        <div class="summary-value">{{ $barangs->count() }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <div class="summary-card">
                    <div class="summary-icon summary-icon-success">
                        <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                    </div>
                    <div>
                        <div class="summary-label">Barang Terdaftar</div>
                        <div class="summary-value">{{ $barangs->count() }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <div class="summary-card">
                    <div class="summary-icon summary-icon-info">
                        <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
                        </svg>
                    </div>
                    <div>
                        <div class="summary-label">Lihat Kartu Stok</div>
                        <div class="summary-value text-small">Klik tombol info</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Table -->
    <div class="card">
        <div class="card-header">
            <h5 class="card-title">Daftar Stok Barang</h5>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="stokTable" class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th>Kode Barang</th>
                            <th>Nama Barang</th>
                            <th>Kategori</th>
                            <th>Saldo Stok</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Kartu Stok Modal -->
<div id="kartuStokModal" class="modal fade" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Kartu Stok - <span id="kartuStokBarang"></span></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="table-responsive">
                    <table id="kartuStokTable" class="table table-striped table-sm">
                        <thead>
                            <tr>
                                <th>Tanggal</th>
                                <th>No. Bukti</th>
                                <th>Tipe</th>
                                <th>Masuk</th>
                                <th>Keluar</th>
                                <th>Saldo</th>
                            </tr>
                        </thead>
                        <tbody id="kartuStokBody">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
$(document).ready(function() {
    const stokTable = $('#stokTable').DataTable({
        processing: true,
        serverSide: true,
        pageLength: 10,
        lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
        ajax: {
            url: '{{ route("stok.data") }}',
            error: function(xhr, error, thrown) {
                console.log('DataTables error:', error, thrown, xhr);
                alert('Error loading data: ' + (xhr.responseJSON?.message || 'Unknown error'));
            }
        },
        columns: [
            { data: 'kode' },
            { data: 'nama' },
            { data: 'kategori_nama' },
            { data: 'saldo_format' },
            { data: 'actions', orderable: false, searchable: false }
        ],
        order: [[0, 'asc']],
        language: {
            url: 'https://cdn.datatables.net/plug-ins/1.13.7/i18n/id.json'
        }
    });

    window.viewKartuStok = function(kodeBarang) {
        // Get kartu stok data via AJAX
        $.get('/stok/kartu-stok/' + kodeBarang, function(data) {
            let html = '';
            let saldo = 0;

            $('#kartuStokBarang').text(data.nama);

            data.mutasi.forEach(function(mutasi) {
                const qty = parseFloat(mutasi.qty);
                if (mutasi.tipe === 'MASUK') {
                    saldo += qty;
                    html += `
                        <tr>
                            <td>${mutasi.tanggal_format}</td>
                            <td>${mutasi.no_bukti}</td>
                            <td><span class="badge badge-success">MASUK</span></td>
                            <td class="text-success">${mutasi.qty}</td>
                            <td>-</td>
                            <td><strong>${saldo.toFixed(2)}</strong></td>
                        </tr>
                    `;
                } else {
                    saldo -= qty;
                    html += `
                        <tr>
                            <td>${mutasi.tanggal_format}</td>
                            <td>${mutasi.no_bukti}</td>
                            <td><span class="badge badge-danger">KELUAR</span></td>
                            <td>-</td>
                            <td class="text-danger">${mutasi.qty}</td>
                            <td><strong>${saldo.toFixed(2)}</strong></td>
                        </tr>
                    `;
                }
            });

            $('#kartuStokBody').html(html);
            $('#kartuStokModal').modal('show');
        });
    };
});
</script>
@endsection