378 lines
22 KiB
PHP
378 lines
22 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 space-y-6">
|
|
<flux:card class="space-y-6 p-6">
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-6">
|
|
<flux:field>
|
|
<flux:label>Outlet <span class="text-red-500 ms-1">*</span></flux:label>
|
|
<flux:select variant="listbox" searchable placeholder="Pilih Outlet" wire:model.live="form.outlet_id">
|
|
@foreach ($outlets as $key => $value)
|
|
<flux:select.option value="{{ $key }}">
|
|
{{ $value }}
|
|
</flux:select.option>
|
|
@endforeach
|
|
</flux:select>
|
|
<flux:error name="form.outlet_id" />
|
|
</flux:field>
|
|
|
|
<flux:field>
|
|
<flux:label>Channel <span class="text-red-500 ms-1">*</span></flux:label>
|
|
<flux:select variant="listbox" searchable placeholder="Pilih Channel" wire:model="form.channel">
|
|
@foreach (\App\Enums\OrderChannel::cases() as $channel)
|
|
<flux:select.option value="{{ $channel->value }}">{{ $channel->label() }}
|
|
</flux:select.option>
|
|
@endforeach
|
|
</flux:select>
|
|
<flux:error name="form.channel" />
|
|
</flux:field>
|
|
|
|
{{-- Belum Dibutuhkan --}}
|
|
{{-- <flux:field>
|
|
<flux:label>Status <span class="text-red-500 ms-1">*</span></flux:label>
|
|
<flux:select variant="listbox" searchable placeholder="Pilih Status"
|
|
wire:model="form.status">
|
|
@foreach (\App\Enums\OrderStatus::cases() as $status)
|
|
<flux:select.option value="{{ $status->value }}">{{ $status->label() }}
|
|
</flux:select.option>
|
|
@endforeach
|
|
</flux:select>
|
|
<flux:error name="form.status" />
|
|
</flux:field> --}}
|
|
|
|
<flux:field>
|
|
<flux:label>Status <span class="text-red-500 ms-1">*</span></flux:label>
|
|
<flux:select variant="listbox" wire:model="form.status">
|
|
<flux:select.option value="{{ \App\Enums\OrderStatus::PAID }}">
|
|
{{ \App\Enums\OrderStatus::PAID->label() }}
|
|
</flux:select.option>
|
|
</flux:select>
|
|
<flux:error name="form.status" />
|
|
</flux:field>
|
|
|
|
<flux:field>
|
|
<flux:label>Metode Pembayaran <span class="text-red-500 ms-1">*</span></flux:label>
|
|
<flux:select variant="listbox" searchable placeholder="Pilih Metode Pembayaran"
|
|
wire:model="form.payment_method">
|
|
@foreach (\App\Enums\PaymentMethod::cases() as $paymentMethod)
|
|
<flux:select.option value="{{ $paymentMethod->value }}">
|
|
{{ $paymentMethod->label() }}
|
|
</flux:select.option>
|
|
@endforeach
|
|
</flux:select>
|
|
<flux:error name="form.payment_method" />
|
|
</flux:field>
|
|
</div>
|
|
</flux:card>
|
|
|
|
<div class="flex flex-col lg:flex-row gap-4">
|
|
<div class="w-full lg:w-3/4 space-y-4">
|
|
@if ($form->outlet_id)
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-start">
|
|
<flux:card class="space-y-6 p-6 md:col-span-2">
|
|
<flux:tab.group>
|
|
<flux:tabs wire:model="tab" variant="pills">
|
|
<flux:tab name="new">Baru</flux:tab>
|
|
<flux:tab name="refill">Isi Ulang</flux:tab>
|
|
</flux:tabs>
|
|
|
|
<flux:tab.panel name="new">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<flux:select label="Parfum" variant="listbox" searchable
|
|
placeholder="Cari parfum..." wire:model.live="form.perfume_id">
|
|
@foreach ($perfumes as $key => $perfume)
|
|
<flux:select.option value="{{ $key }}"
|
|
wire:key="new-{{ $key }}">
|
|
{{ $perfume }}
|
|
</flux:select.option>
|
|
@endforeach
|
|
</flux:select>
|
|
|
|
<flux:select label="Botol" variant="listbox" searchable
|
|
placeholder="Cari botol..." wire:model.live="form.bottle_id">
|
|
@foreach ($bottles as $key => $bottle)
|
|
<flux:select.option value="{{ $key }}"
|
|
wire:key="new-{{ $key }}">{{ $bottle }}
|
|
</flux:select.option>
|
|
@endforeach
|
|
</flux:select>
|
|
|
|
<div class="col-span-1 md:col-span-2">
|
|
@if (!empty($qualities))
|
|
<flux:radio.group label="Kualitas" wire:model.live="form.quality_id"
|
|
variant="buttons" class="w-full *:flex-1">
|
|
@foreach ($qualities as $key => $value)
|
|
<flux:radio value="{{ $key }}"
|
|
wire:key="new-{{ $key }}">
|
|
{{ $value }}
|
|
</flux:radio>
|
|
@endforeach
|
|
</flux:radio.group>
|
|
@else
|
|
<flux:field>
|
|
<flux:label>Kualitas</flux:label>
|
|
<br />
|
|
<span class="text-sm text-zinc-500 italic">Silakan pilih
|
|
botol...</span>
|
|
</flux:field>
|
|
@endif
|
|
|
|
@if ($form->quality_id === 'custom')
|
|
<flux:field class="mt-4">
|
|
<flux:label>Jumlah (ml)</flux:label>
|
|
<flux:input.group>
|
|
<flux:input placeholder="Masukkan jumlah (ml)"
|
|
x-mask:dynamic="$money($input, ',')"
|
|
wire:model="form.bottle_size" autocomplete="off" />
|
|
<flux:input.group.suffix>ml</flux:input.group.suffix>
|
|
</flux:input.group>
|
|
</flux:field>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</flux:tab.panel>
|
|
|
|
<flux:tab.panel name="refill">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<flux:select label="Parfum" variant="listbox" searchable
|
|
placeholder="Cari parfum..." wire:model.live="form.perfume_id">
|
|
@foreach ($perfumes as $key => $perfume)
|
|
<flux:select.option value="{{ $key }}"
|
|
wire:key="refill-{{ $key }}">
|
|
{{ $perfume }}
|
|
</flux:select.option>
|
|
@endforeach
|
|
</flux:select>
|
|
|
|
<flux:field>
|
|
<flux:label>Ukuran Botol</flux:label>
|
|
<flux:input.group>
|
|
<flux:input placeholder="Masukkan ukuran botol"
|
|
x-mask:dynamic="$money($input, ',')"
|
|
wire:model.live="form.bottle_size" autocomplete="off" />
|
|
<flux:input.group.suffix>ml</flux:input.group.suffix>
|
|
</flux:input.group>
|
|
</flux:field>
|
|
|
|
<div class="col-span-1 md:col-span-2">
|
|
@if (!empty($qualities))
|
|
<flux:radio.group label="Kualitas" wire:model.live="form.quality_id"
|
|
variant="buttons" class="w-full *:flex-1">
|
|
@foreach ($qualities as $key => $value)
|
|
<flux:radio value="{{ $key }}"
|
|
wire:key="refill-{{ $key }}">
|
|
{{ $value }}
|
|
</flux:radio>
|
|
@endforeach
|
|
</flux:radio.group>
|
|
@else
|
|
<flux:field>
|
|
<flux:label>Kualitas</flux:label>
|
|
<br />
|
|
<flux:text class="text-sm italic">Silakan masukan ukuran
|
|
botol...</flux:text>
|
|
</flux:field>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</flux:tab.panel>
|
|
</flux:tab.group>
|
|
|
|
<div class="flex justify-end">
|
|
<flux:button variant="primary" color="zinc" wire:click="addPerfume">
|
|
Tambah
|
|
</flux:button>
|
|
</div>
|
|
</flux:card>
|
|
|
|
<flux:card class="space-y-6 p-6">
|
|
<flux:select label="Produk" variant="listbox" searchable placeholder="Cari produk..."
|
|
wire:model.live="form.product_id">
|
|
@foreach ($products as $key => $product)
|
|
<flux:select.option value="{{ $key }}"
|
|
wire:key="product-{{ $key }}">{{ $product }}
|
|
</flux:select.option>
|
|
@endforeach
|
|
</flux:select>
|
|
|
|
<flux:input label="Kuantitas" placeholder="Masukkan kuantitas produk"
|
|
wire:model.live="form.quantity_product" autocomplete="off"
|
|
x-mask:dynamic="$money($input, ',')" />
|
|
|
|
<div class="flex justify-end">
|
|
<flux:button variant="primary" color="zinc" wire:click="addProduct">
|
|
Tambah
|
|
</flux:button>
|
|
</div>
|
|
</flux:card>
|
|
</div>
|
|
@else
|
|
<flux:card class="p-6 text-center text-zinc-500 italic">
|
|
Silakan pilih Outlet terlebih dahulu untuk menampilkan daftar item.
|
|
</flux:card>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="w-full lg:w-1/3 space-y-4">
|
|
<flux:card class="space-y-6 p-6">
|
|
<h3 class="text-sm font-medium">Keranjang</h3>
|
|
<div class="divide-y">
|
|
<flux:table>
|
|
<flux:table.columns>
|
|
<flux:table.column>Item</flux:table.column>
|
|
<flux:table.column>Harga</flux:table.column>
|
|
<flux:table.column>Aksi</flux:table.column>
|
|
</flux:table.columns>
|
|
|
|
<flux:table.rows>
|
|
@forelse($items as $item)
|
|
<flux:table.row>
|
|
<flux:table.cell>
|
|
<flux:heading>
|
|
<div>
|
|
<div>
|
|
{{ $item->orderable->name }}
|
|
</div>
|
|
<span class="text-xs text-gray-400">
|
|
@if ($item->quality && $item->quality !== 'Custom')
|
|
{{ $item->quality }}
|
|
@else
|
|
{{ $item->quality === 'Custom' ? $item->quantity : formatCurrencyNumber($item->quantity, '') }}
|
|
x
|
|
{{ formatCurrencyNumber($item->unit_price, 'Rp') }}
|
|
@endif
|
|
</span>
|
|
</div>
|
|
</flux:heading>
|
|
</flux:table.cell>
|
|
<flux:table.cell>
|
|
{{ formatCurrencyNumber($item->unit_price * $item->quantity, 'Rp') }}
|
|
</flux:table.cell>
|
|
<flux:table.cell class="space-x-2">
|
|
<flux:modal.trigger name="form-modal">
|
|
<flux:tooltip content="Ubah">
|
|
<flux:button variant="primary" color="yellow"
|
|
icon="pencil-square" size="sm"
|
|
wire:click="$dispatch('modal:open', {'item': '{{ $item->id }}'})">
|
|
</flux:button>
|
|
</flux:tooltip>
|
|
</flux:modal.trigger>
|
|
|
|
<flux:button variant="danger" icon="trash" size="sm"
|
|
wire:click="deleteItem('{{ $item->id }}')">
|
|
</flux:button>
|
|
</flux:table.cell>
|
|
</flux:table.row>
|
|
@empty
|
|
<flux:table.row>
|
|
<flux:table.cell colspan="3" class="text-center">
|
|
<flux:text class="text-sm italic">Keranjang Kosong...
|
|
</flux:text>
|
|
</flux:table.cell>
|
|
</flux:table.row>
|
|
@endforelse
|
|
</flux:table.rows>
|
|
</flux:table>
|
|
|
|
<div class="mt-2 text-end space-y-1">
|
|
<div>
|
|
<flux:text>{{ formatCurrencyNumber($subtotal, 'Rp') }}</flux:text>
|
|
</div>
|
|
<div>
|
|
<flux:text class="italic text-gray-500">Diskon Voucher</flux:text>
|
|
<flux:text>{{ formatCurrencyNumber($voucherDiscount, 'Rp') }}</flux:text>
|
|
</div>
|
|
<div class="my-2">
|
|
<flux:field>
|
|
<flux:label></flux:label>
|
|
<flux:description class="text-xs italic">Kosongkan jika tidak ada.
|
|
</flux:description>
|
|
<flux:input.group>
|
|
<flux:input.group.prefix>Rp</flux:input.group.prefix>
|
|
<flux:input placeholder="10.000" x-mask:dynamic="$money($input, ',')"
|
|
wire:model="form.discount" autocomplete="off" />
|
|
</flux:input.group>
|
|
</flux:field>
|
|
</div>
|
|
<div class="text-lg font-bold">
|
|
<flux:heading>
|
|
{{ formatCurrencyNumber($total, 'Rp') }}
|
|
</flux:heading>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</flux:card>
|
|
@if ($this->form->outlet_id !== '' && $items->isNotEmpty())
|
|
<flux:card class="space-y-6 p-6">
|
|
<flux:field>
|
|
<flux:label>Member</flux:label>
|
|
<flux:description>Silakan ketikkan nomor telepon.</flux:description>
|
|
<flux:select variant="combobox" placeholder="Pilih Member" wire:model="form.member_id"
|
|
clear>
|
|
<x-slot name="input">
|
|
<flux:select.input wire:model.live.debounce.250ms="searchMember" clearable />
|
|
</x-slot>
|
|
@foreach ($this->members as $member)
|
|
<flux:select.option value="{{ $member['id'] }}" key="{{ $member['id'] }}">
|
|
{{ $member['name'] }} - {{ $member['phone_number'] }}
|
|
</flux:select.option>
|
|
@endforeach
|
|
</flux:select>
|
|
<flux:error name="form.member_id" />
|
|
</flux:field>
|
|
|
|
@if (!empty($vouchers))
|
|
<flux:field>
|
|
<flux:label>Voucher</flux:label>
|
|
<flux:description>Voucher diurutkan berdasarkan dengan diskon yang paling besar.
|
|
</flux:description>
|
|
<flux:select variant="listbox" placeholder="Pilih Voucher"
|
|
wire:model="form.voucher_id" searchable clearable>
|
|
@foreach ($vouchers as $key => $name)
|
|
<flux:select.option value="{{ $key }}" key="{{ $key }}">
|
|
{{ $name }}
|
|
</flux:select.option>
|
|
@endforeach
|
|
</flux:select>
|
|
<flux:error name="form.voucher_id" />
|
|
</flux:field>
|
|
@endif
|
|
</flux:card>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-start mt-4">
|
|
<flux:button variant="primary" class="sm:w-auto cursor-pointer" wire:click="save">
|
|
Simpan
|
|
</flux:button>
|
|
</div>
|
|
</div>
|
|
|
|
<flux:modal name="form-modal" class="w-[95%] max-w-sm md:max-w-xl mx-auto" @close="closeModal('form-modal')">
|
|
<div class="p-4 space-y-6">
|
|
<flux:heading size="lg">Ubah {{ $modalTitle }}</flux:heading>
|
|
|
|
<flux:input label="Kuantitas" placeholder="Masukkan kuantitas" wire:model="form.quantity_edit"
|
|
autocomplete="off" x-mask:dynamic="$money($input, ',')" />
|
|
|
|
<div class="flex">
|
|
<flux:spacer />
|
|
<flux:button variant="primary" color="zinc" class="sm:w-auto cursor-pointer"
|
|
wire:click="updateItem">
|
|
Perbarui
|
|
</flux:button>
|
|
</div>
|
|
</div>
|
|
</flux:modal>
|
|
</flux:main>
|