@extends('../main')
@section('content')
@include('../navbar')




@if(session('error'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<script>
toastr.error('{{ session('error') }}');
</script>
@elseif(session('success'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<script>
toastr.success('{{ session('success') }}');
</script>
@endif

                  
                    <div class="relative">
                        
                    	<div class="container relative text-left" style="padding-top: 80px; padding-bottom: 5rem;">
                    	     
                    			<div class="col-md-11 text-white ">
                    				<h2 class="text-[24px] sm:text-4xl">Lacak pesanan kamu dengan nomor invoice!</h2>
                    				 <p class="mt-3 max-w-full">Pesanan Kamu tidak terdaftar meskipun Kamu yakin telah memesan? Harap tunggu 1-5 menit. Tetapi jika pesanan masih belum muncul, Kamu bisa <a href="{{ !$config ? '' : $config->wa_admin }}" class="text-red-600 no-underline">Hubungi Kami</a>.</p>
                    				  <form action="{{ route('cari.post') }}" method="POST">
                    				    
                    				    @csrf
                    					  <div class="mb-3 mt-3">
                    						<label class="mb-2">No. Transaksi :</label>
                    						<input type="text" name="id" placeholder="INVxxxxxxx" class="bg-input block w-full rounded-md text-foreground placeholder-muted-foreground text-xs shadow-sm focus:border-primary-x focus:outline-none focus:ring-1 focus:ring-primary-x py-[0.5rem] px-[0.75rem]
" id="id" autocomplete="off" required>
                    					</div>
                    					<button type="submit" name="submit" value="submit" class="inline-flex items-center justify-center rounded-md px-4 py-2 bg-primary-x hover:bg-primary-x/75 text-sm font-medium text-white duration-300 disabled:cursor-not-allowed disabled:opacity-75"><i class="fa fa-search mr-2"></i>Cari Transaksi</button>
                    				</form>
                    			 </div>
                    			 </div>
                    <div class="absolute inset-0 -z-10" >
                       <div class="area ">
                            <ul class="circles">
                                  <li></li>
                                  <li></li>
                                  <li></li>
                                  <li></li>
                                  <li></li>
                                  <li></li>
                                  <li></li>
                                  <li></li>
                                  <li></li>
                                  <li></li>
                            </ul>
                        </div>
                    </div>
                    </div>
                      
            
          
            	
            	<div class="container">
            	    <div class="row">
                       <div class="col-md-8" style="padding-top: 80px;">
            			<h4 class="mb-3 text-[24px] ">10 Transaksi Terakhir</h4>
            			<p class="text-white/70 fs-16 mb-4 ">Ini adalah 10 transaksi terakhir dari semua pengguna. Informasi yang tersedia mencakup tanggal transaksi, no transaksi, nomor ponsel, harga, dan status.</p>
            		</div>
            		
          <div class="space-y-4">
              <div class="css-6qw8qz rounded-lg overflow-x-auto">
                 <table id="tblBuyer" class="min-w-full table text-white">
              <thead>
                <tr>
                  <th scope="col" class="whitespace-nowrap px-3 py-4 text-left text-xs text-white">Tanggal</th>
                  <th scope="col" class="whitespace-nowrap px-3 py-4 text-left text-xs text-white">Nomor Invoice</th>
                  <th scope="col" class="whitespace-nowrap px-3 py-4 text-left text-xs text-white">No. Handphone</th>
                  <th scope="col" class="whitespace-nowrap px-3 py-4 text-left text-xs text-white">Harga</th>
                  <th scope="col" class="whitespace-nowrap px-3 py-4 text-left text-xs text-white">Status</th>
                </tr>
              </thead>
    <tbody>
    @foreach ($pembelians as $pembelian)
        @php
            $status = $pembelian->status;
            if ($status == 'Success') {
                $label = 'bg-green-500';
            } elseif ($status == 'Pending') {
                $label = 'bg-yellow-500';
            } elseif ($status == 'Process') {
                $label = 'bg-blue-500';
            } else {
                $label = 'bg-red-500';
            }
        @endphp
        <tr>
            <td scope="row" class="whitespace-nowrap px-3 py-3.5 text-left text-xs">{{ $pembelian->created_at }}</td>
            <td scope="row" class="whitespace-nowrap px-3 py-3.5 text-left text-xs">{{ substr($pembelian->order_id, 0, (strlen($pembelian->order_id) / 2) - 2) . '****' . substr($pembelian->order_id, (strlen($pembelian->order_id) / 2) + 2) }}</td>
            <td scope="row" class="whitespace-nowrap px-3 py-3.5 text-left text-xs">{{ substr($pembelian->no_pembeli, 0, (strlen($pembelian->no_pembeli) / 2) - 3) . '******' . substr($pembelian->no_pembeli, (strlen($pembelian->no_pembeli) / 2) + 3) }}</td>
            <td scope="row" class="whitespace-nowrap px-3 py-3.5 text-left text-xs">Rp {{ number_format($pembelian->harga, 0, ',', '.') }}</td>
            <td scope="row" ><span class="text-white whitespace-nowrap rounded-md px-2 py-1 text-xs {{ $label }}">{{ $status }}</span></td>
        </tr>
    @endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>



@include('../footer')
@endsection