<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.purchase.index') }}" wire:navigate.hover class="text-sm">
                Kembali
            </flux:button>
        </div>
    </div>

    <div class="mt-6">
        <flux:callout icon="megaphone" color="blue" class="mb-6">
            <flux:callout.heading>Informasi</flux:callout.heading>
            <flux:callout.text>
                Tolong perhatikan data yang Anda masukkan, karena tidak dapat diubah setelah disimpan.
            </flux:callout.text>
        </flux:callout>

        <div class="flex flex-col lg:flex-row gap-4">
            <div class="w-full lg:w-3/4 space-y-4">
                <flux:card class="space-y-6 p-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <flux:input label="Nomor Invoice" placeholder="INV-2025-0001"
                            wire:model.live.debounce.500ms="form.invoice_number" autofocus autocomplete="off" />

                        <flux:input label="Catatan" placeholder="Belanja pas hujan"
                            wire:model.live.debounce.500ms="form.note" autocomplete="off" />
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                        <flux:field>
                            <flux:label>Tanggal Belanja <span class="text-red-500 ms-1">*</span></flux:label>
                            <flux:date-picker with-today wire:model.live.debounce.500ms="form.purchase_date"
                                placeholder="Pilih Tanggal" autocomplete="off" locale="id-ID" selectable-header />
                            <flux:error name="form.purchase_date" />
                        </flux:field>

                        <flux:field>
                            <flux:label>Total <span class="text-red-500 ms-1">*</span></flux:label>
                            <flux:input.group>
                                <flux:input.group.prefix>Rp</flux:input.group.prefix>
                                <flux:input placeholder="1.000.000" x-mask:dynamic="$money($input, ',')"
                                    wire:model.live.debounce.500ms="form.total" autocomplete="off" />
                            </flux:input.group>
                            <flux:error name="form.total" />
                        </flux:field>

                        <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>
                    </div>
                </flux:card>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <flux:card class="space-y-6 p-6">
                        <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 }}">{{ $perfume }}</flux:select.option>
                            @endforeach
                        </flux:select>
                        <flux:input label="Kuantitas" placeholder="500" wire:model.live="form.quantity_perfume"
                            autocomplete="off" x-mask:dynamic="$money($input, ',')" />

                        <div class="flex justify-end">
                            <flux:button variant="primary" color="zinc" wire:click="addItem('parfum')">
                                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 }}">{{ $product }}</flux:select.option>
                            @endforeach
                        </flux:select>
                        <flux:input label="Kuantitas" placeholder="10" 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="addItem('produk')">
                                Tambah
                            </flux:button>
                        </div>
                    </flux:card>

                    <flux:card class="space-y-6 p-6">
                        <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 }}">{{ $bottle }}</flux:select.option>
                            @endforeach
                        </flux:select>
                        <flux:input label="Kuantitas" placeholder="50" wire:model.live="form.quantity_bottle"
                            autocomplete="off" x-mask:dynamic="$money($input, ',')" />

                        <div class="flex justify-end">
                            <flux:button variant="primary" color="zinc" wire:click="addItem('botol')">
                                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">
                    <div class="space-y-3">
                        <h3 class="text-sm font-medium">Gambar</h3>
                        <div class="dropzone-wrapper">
                            <livewire:dropzone wire:model="form.image" :rules="['image', 'mimes:png,jpeg', 'max:10420']" :max-files="1"
                                :key="'image'" :files="$form->image" />
                            @error('form.image')
                                <div class="mt-3 text-sm font-medium text-red-500 dark:text-red-400">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>
                    </div>
                </flux:card>
                <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($purchaseItems as $item)
                                    <flux:table.row>
                                        <flux:table.cell>
                                            <flux:heading>
                                                <div>
                                                    <div>{{ $item->purchasable->name }}</div>
                                                    <span
                                                        class="text-xs text-gray-400">{{ currency($item->quantity, '') }}
                                                        x
                                                        {{ currency($item->purchasable->cost_price, 'Rp') }}</span>
                                                </div>
                                            </flux:heading>
                                        </flux:table.cell>
                                        <flux:table.cell>
                                            {{ currency($item->total_price, '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="4" class="text-center">
                                            <span class="text-sm text-zinc-500 italic">Keranjang Kosong...</span>
                                        </flux:table.cell>
                                    </flux:table.row>
                                @endforelse
                            </flux:table.rows>
                        </flux:table>
                    </div>
                </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>
