@extends('layouts.app')

@push('styles')
<style>
.trk-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:18px;max-width:480px}
.trk-title{font-size:16px;font-weight:700;color:var(--text);margin-bottom:4px}
.trk-sub{font-size:12px;color:var(--muted);margin-bottom:16px;line-height:1.55}
.trk-group{margin-bottom:12px}
.trk-label{display:block;font-size:12px;font-weight:500;color:var(--text2);margin-bottom:4px}
.trk-input{width:100%;padding:10px 12px;border:1px solid var(--border2);border-radius:var(--r);font-size:16px;font-family:inherit;color:var(--text);background:var(--elevated);outline:none}
.trk-input:focus{border-color:var(--accent)}
.trk-btn{width:100%;padding:12px;background:var(--accent);color:#fff;border:none;border-radius:var(--r);font-size:14px;font-weight:700;font-family:inherit;cursor:pointer;margin-top:4px}
.trk-btn:hover{background:var(--accent-d)}
.trk-err{background:var(--danger-l);color:var(--danger);border:1px solid rgba(239,68,68,.25);border-radius:var(--r);padding:10px 12px;font-size:12.5px;margin-bottom:12px}
.trk-recent{max-width:480px;margin-top:16px}
.trk-recent-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:8px}
.trk-item{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:11px 13px;margin-bottom:7px}
.trk-item b{display:block;font-size:13px;color:var(--text)}
.trk-item span{font-size:11px;color:var(--muted)}
</style>
@endpush

@section('content')
<div class="trk-card anim-up">
    <div class="trk-title">Cek Pesanan</div>
    <div class="trk-sub">Masukkan nomor invoice dan ID akun game yang kamu pakai saat memesan untuk melihat status top up.</div>

    @if(session('error'))<div class="trk-err">{{ session('error') }}</div>@endif
    @if($errors->any())<div class="trk-err">{{ $errors->first() }}</div>@endif

    <form method="POST" action="{{ route('topup.track.search') }}">
        @csrf
        <div class="trk-group">
            <label class="trk-label" for="invoice_number">Nomor Invoice</label>
            <input class="trk-input" type="text" id="invoice_number" name="invoice_number" value="{{ old('invoice_number') }}" placeholder="Contoh: TM26101100001" required autocomplete="off" autocapitalize="characters">
        </div>
        <div class="trk-group">
            <label class="trk-label" for="target">ID Akun Game</label>
            <input class="trk-input" type="text" id="target" name="target" value="{{ old('target') }}" placeholder="User ID yang kamu isi saat order" required autocomplete="off">
        </div>
        <button type="submit" class="trk-btn"><i class="fas fa-magnifying-glass"></i> Cek Pesanan</button>
    </form>
</div>

<div class="trk-recent" id="recentBox" style="display:none">
    <div class="trk-recent-title">Pesanan terakhir di perangkat ini</div>
    <div id="recentList"></div>
</div>
@endsection

@push('scripts')
<script>
(function () {
    try {
        var list = JSON.parse(localStorage.getItem('nk-guest-orders') || '[]');
        if (!list.length) return;
        var box = document.getElementById('recentBox'), wrap = document.getElementById('recentList');
        function esc(s){ return String(s == null ? '' : s).replace(/[&<>"']/g, function(c){ return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]; }); }
        list.forEach(function (o) {
            if (!o.url || o.url.indexOf(location.origin) !== 0) return;
            var a = document.createElement('a');
            a.href = o.url; a.className = 'trk-item';
            a.innerHTML = '<div><b>' + esc(o.game) + ' · ' + esc(o.product) + '</b><span>' + esc(o.inv) + '</span></div><i class="fas fa-chevron-right" style="font-size:11px;color:var(--muted)"></i>';
            wrap.appendChild(a);
        });
        if (wrap.children.length) box.style.display = 'block';
    } catch (e) {}
})();
</script>
@endpush