@extends('layouts.adminlte')
@section('title','Search PO')

@section('content')
<style>
    .po-search-card {
        border: 1px solid #e6e6e6;
        border-radius: 10px;
        box-shadow: 0 1px 6px rgba(0,0,0,.06);
    }
    .po-chip {
        display: inline-block;
        padding: 4px 10px;
        border-radius: 999px;
        background: #f1f5f9;
        font-weight: 600;
    }
    .po-meta {
        color: #6c757d;
        font-size: .9rem;
    }
    .item-badge {
        font-size: .75rem;
        padding: 2px 6px;
        border-radius: 4px;
    }
    .badge-hw { background: #e7f3ff; color: #0b5ed7; }
    .badge-eng { background: #e8f5e9; color: #1b5e20; }
    .badge-ms { background: #fff3e0; color: #e65100; }
    .item-table td, .item-table th { vertical-align: top; }
</style>

<div class="card po-search-card">
    <div class="card-body">
        <div class="d-flex flex-wrap align-items-center justify-content-between mb-3">
            <div>
                <h5 class="mb-1">Search Grouping No PO</h5>
                <div class="po-meta">Hardware, Lisensi Engineering, Lisensi Microsoft</div>
            </div>
            <div class="text-right">
                <div class="po-meta">Waktu Pencarian: <span id="searchAt">-</span></div>
                <div class="po-meta">Durasi: <span id="searchMs">-</span> ms</div>
            </div>
        </div>

        <div class="input-group mb-3">
            <input type="text" id="poQuery" class="form-control" placeholder="Masukkan prefix No PO (contoh: NPJ/)">
            <div class="input-group-append">
                <button class="btn btn-primary" id="btnSearch">Cari</button>
            </div>
        </div>

        <div id="poResult"></div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function renderGroup(group) {
    let rows = (group.items || []).map(function (it, idx) {
        let badge = it.tipe === 'hardware' ? 'badge-hw' : (it.tipe === 'lisensi_engineering' ? 'badge-eng' : 'badge-ms');
        let label = it.tipe === 'hardware' ? 'Hardware' : (it.tipe === 'lisensi_engineering' ? 'Lisensi Engineering' : 'Lisensi Microsoft');
        return `
            <tr>
                <td>${idx + 1}</td>
                <td><span class="item-badge ${badge}">${label}</span></td>
                <td>${it.kode || '-'}</td>
                <td>${it.nama || '-'}</td>
                <td>${it.deskripsi || '-'}</td>
                <td>${it.jenis || '-'}</td>
                <td>${it.tahun || '-'}</td>
                <td>${it.qty || 0}</td>
            </tr>
        `;
    }).join('');

    return `
        <div class="card mb-3">
            <div class="card-header d-flex justify-content-between align-items-center">
                <div>
                    <span class="po-chip">${group.po}</span>
                    <span class="ml-2 text-muted">(${group.total_items} item)</span>
                </div>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-bordered table-sm mb-0 item-table">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Tipe</th>
                                <th>Kode</th>
                                <th>Nama</th>
                                <th>Deskripsi</th>
                                <th>Jenis</th>
                                <th>Tahun</th>
                                <th>Qty</th>
                            </tr>
                        </thead>
                        <tbody>
                            ${rows || '<tr><td colspan="8" class="text-center text-muted">Tidak ada data</td></tr>'}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    `;
}

function doSearch() {
    let q = ($('#poQuery').val() || '').trim();
    if (!q || q.length < 2) {
        $('#poResult').html('<div class="text-muted">Ketik minimal 2 karakter.</div>');
        return;
    }
    $('#poResult').html('<div class="text-muted">Mencari...</div>');
    $.get("{{ route('po-search.data') }}", { q: q }, function (res) {
        $('#searchAt').text(res.search_at || '-');
        $('#searchMs').text(res.search_time_ms || '-');
        if (!res.groups || !res.groups.length) {
            $('#poResult').html('<div class="text-muted">Tidak ditemukan.</div>');
            return;
        }
        let list = res.groups.map(function (g) {
            return `<span class="po-chip mr-2 mb-2 d-inline-block">${g.po}</span>`;
        }).join('');
        let html = `
            <div class="mb-2">
                <div class="po-meta">Ditemukan ${res.groups.length} No PO:</div>
                <div class="mt-1">${list}</div>
            </div>
        `;
        html += res.groups.map(renderGroup).join('');
        $('#poResult').html(html);
    });
}

let searchTimer = null;
function scheduleSearch() {
    clearTimeout(searchTimer);
    searchTimer = setTimeout(doSearch, 300);
}

$('#btnSearch').on('click', doSearch);
$('#poQuery').on('input', scheduleSearch);
$('#poQuery').on('keydown', function (e) {
    if (e.key === 'Enter') {
        e.preventDefault();
        doSearch();
    }
});
</script>
@endpush