162 lines
8.0 KiB
PHP
162 lines
8.0 KiB
PHP
<flux:main>
|
|
<div class="flex justify-between items-center">
|
|
<div>
|
|
<flux:heading size="xl">{{ $pageTitle }}</flux:heading>
|
|
</div>
|
|
<div>
|
|
<flux:button href="{{ route('studio.manage.order.index') }}" wire:navigate class="text-sm">
|
|
Kembali
|
|
</flux:button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-6">
|
|
<flux:card>
|
|
<div class="px-4 sm:px-6 lg:px-8 mx-auto my-4 sm:my-10">
|
|
<div class="mb-5 pb-5 flex justify-between items-center border-b border-gray-200 dark:border-zinc-600">
|
|
<div>
|
|
<h2 class="text-2xl font-semibold text-gray-800 dark:text-zinc-100">Invoice</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Grid -->
|
|
<div class="grid md:grid-cols-2 gap-3">
|
|
<div>
|
|
<div class="space-y-1 text-sm">
|
|
<p class="text-gray-500 dark:text-zinc-400">
|
|
Untuk pelanggan kami yang terhormat,
|
|
</p>
|
|
<p class="font-medium text-gray-800 dark:text-zinc-100">
|
|
{{ $orderData['customer'] }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="grid space-y-3">
|
|
<dl class="flex flex-col sm:flex-row gap-x-3 text-sm">
|
|
<dt class="min-w-36 max-w-50 text-gray-500 dark:text-zinc-400">
|
|
Nomor Invoice:
|
|
</dt>
|
|
<dd class="font-medium text-gray-800 dark:text-zinc-100">
|
|
{{ $orderData['invoice_number'] }}
|
|
</dd>
|
|
</dl>
|
|
|
|
<dl class="flex flex-col sm:flex-row gap-x-3 text-sm">
|
|
<dt class="min-w-36 max-w-50 text-gray-500 dark:text-zinc-400">
|
|
Status:
|
|
</dt>
|
|
<dd class="font-medium text-gray-800 dark:text-zinc-100">
|
|
{{ $orderData['status'] }}
|
|
</dd>
|
|
</dl>
|
|
|
|
<dl class="flex flex-col sm:flex-row gap-x-3 text-sm">
|
|
<dt class="min-w-36 max-w-50 text-gray-500 dark:text-zinc-400">
|
|
Tanggal:
|
|
</dt>
|
|
<dd class="font-medium text-gray-800 dark:text-zinc-100">
|
|
{{ $orderData['date'] }}
|
|
</dd>
|
|
</dl>
|
|
|
|
<dl class="flex flex-col sm:flex-row gap-x-3 text-sm">
|
|
<dt class="min-w-36 max-w-50 text-gray-500 dark:text-zinc-400">
|
|
Order di:
|
|
</dt>
|
|
<dd class="font-medium text-gray-800 dark:text-zinc-100">
|
|
{{ $orderData['channel'] }}
|
|
</dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
<!-- Col -->
|
|
</div>
|
|
<!-- End Grid -->
|
|
|
|
<!-- Table -->
|
|
<div class="mt-6 border border-gray-200 p-4 rounded-lg space-y-4 dark:border-zinc-600">
|
|
<div class="hidden sm:grid sm:grid-cols-5">
|
|
<div class="sm:col-span-2 text-xs font-medium text-gray-500 uppercase dark:text-zinc-400">
|
|
Item
|
|
</div>
|
|
<div class="text-start text-xs font-medium text-gray-500 uppercase dark:text-zinc-400">
|
|
Kuantitas
|
|
</div>
|
|
<div class="text-start text-xs font-medium text-gray-500 uppercase dark:text-zinc-400">Harga
|
|
</div>
|
|
<div class="text-end text-xs font-medium text-gray-500 uppercase dark:text-zinc-400">Total
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hidden sm:block border-b border-gray-200 dark:border-zinc-600"></div>
|
|
|
|
@foreach ($items as $item)
|
|
<div class="grid grid-cols-3 sm:grid-cols-5 gap-2" wire:key="item-{{ $item['id'] }}">
|
|
<div class="col-span-full sm:col-span-2">
|
|
<h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase dark:text-zinc-400">
|
|
Item
|
|
</h5>
|
|
<p class="font-medium text-gray-800 dark:text-zinc-100">{{ $item['name'] }}</p>
|
|
</div>
|
|
<div>
|
|
<h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase dark:text-zinc-400">
|
|
Kuantitas
|
|
</h5>
|
|
<p class="text-gray-800 dark:text-zinc-100">{{ $item['quality'] ?: $item['quantity'] }}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase dark:text-zinc-400">
|
|
Harga
|
|
</h5>
|
|
<p class="text-gray-800 dark:text-zinc-100">
|
|
{{ $item['quality'] ? '-' : $item['unit_price'] }}</p>
|
|
</div>
|
|
<div>
|
|
<h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase dark:text-zinc-400">
|
|
Total
|
|
</h5>
|
|
<p class="sm:text-end text-gray-800 dark:text-zinc-100">{{ $item['total'] }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sm:hidden border-b border-gray-200 dark:border-zinc-600"></div>
|
|
@endforeach
|
|
</div>
|
|
<!-- End Table -->
|
|
|
|
<!-- Flex -->
|
|
<div class="mt-8 flex sm:justify-end">
|
|
<div class="w-full max-w-2xl sm:text-end space-y-2">
|
|
<!-- Grid -->
|
|
<div class="grid grid-cols-2 sm:grid-cols-1 gap-3 sm:gap-2">
|
|
<dl class="grid sm:grid-cols-5 gap-x-3 text-sm">
|
|
<dt class="col-span-3 text-gray-500 dark:text-zinc-400">Subotal:</dt>
|
|
<dd class="col-span-2 font-medium text-gray-800 dark:text-zinc-100">
|
|
{{ $orderData['subtotal'] }}</dd>
|
|
</dl>
|
|
|
|
<dl class="grid sm:grid-cols-5 gap-x-3 text-sm">
|
|
<dt class="col-span-3 text-gray-500 dark:text-zinc-400">Diskon:</dt>
|
|
<dd class="col-span-2 font-medium text-gray-800 dark:text-zinc-100">
|
|
{{ $orderData['discount'] }}</dd>
|
|
</dl>
|
|
|
|
<dl class="grid sm:grid-cols-5 gap-x-3 text-sm">
|
|
<dt class="col-span-3 text-gray-500 dark:text-zinc-400">Total:</dt>
|
|
<dd class="col-span-2 font-medium text-gray-800 dark:text-zinc-100">
|
|
{{ $orderData['total'] }}</dd>
|
|
</dl>
|
|
|
|
</div>
|
|
<!-- End Grid -->
|
|
</div>
|
|
</div>
|
|
<!-- End Flex -->
|
|
</div>
|
|
</flux:card>
|
|
</div>
|
|
</flux:main>
|