<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.hover 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.debounce.500ms="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.live.debounce.500ms="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>

                <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.live.debounce.500ms="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>Metode Pembayaran <span class="text-red-500 ms-1">*</span></flux:label>
                    <flux:select variant="listbox" searchable placeholder="Pilih Metode Pembayaran"
                        wire:model.live.debounce.500ms="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">
                <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
                                    </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.debounce.500ms="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>
            </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">{{ currency($item->quantity, '') }}
                                                        x
                                                        {{ currency($item->unit_price, 'Rp') }}</span>
                                                </div>
                                            </flux:heading>
                                        </flux:table.cell>
                                        <flux:table.cell>
                                            {{ currency($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>{{ currency($subtotal, '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.live.debounce.500ms="form.discount" autocomplete="off" />
                                    </flux:input.group>
                                </flux:field>
                            </div>
                            <div class="text-lg font-bold">
                                <flux:heading>
                                    {{ currency($total, 'Rp') }}
                                </flux:heading>
                            </div>
                        </div>
                    </div>
                </flux:card>

                <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.live.debounce.500ms="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.live.debounce.500ms="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>
            </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.live="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>
