<flux:main>
    <div class="flex justify-between items-center">
        <div>
            <flux:heading size="xl">{{ $pageTitle }}</flux:heading>
        </div>
    </div>

    <div class="mt-6">
        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4 mb-4 text-sm items-start" wire:ignore>
            @foreach ($stockOpname as $item)
                <flux:card class="h-auto" wire:key="stock-opname-{{ $item->id }}">
                    <div class="flex justify-between items-center mb-3">
                        <div>
                            <flux:heading>{{ $item->outlet->name }}</flux:heading>
                            <flux:text>{{ $item->period_month }}</flux:text>
                        </div>
                        <div class="text-right">
                            <flux:badge color="{{ $item->status->color() }}">
                                {{ $item->status->label() }}
                            </flux:badge>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 gap-4 mb-3 text-sm">
                        <div>
                            <flux:text>Total Item</flux:text>
                            <div class="font-medium">{{ $item->total_item }}</div>
                        </div>
                        <div>
                            <flux:text>Progress</flux:text>
                            <div class="font-medium">
                                {{ $item->progress_filled }} / {{ $item->total_item }} |
                                ({{ $item->progress_percent }}%)
                            </div>
                        </div>
                        @if ($item['note'])
                            <div>
                                <flux:text>Catatan</flux:text>
                                <div class="font-medium">
                                    {{ $item['note'] }}
                                </div>
                            </div>
                        @endif
                    </div>

                    <flux:separator class="my-2" />

                    <div class="flex items-center mt-2 gap-2">
                        <flux:tooltip content="Lihat">
                            <flux:button variant="primary" color="blue" size="sm" icon="eye"
                                href="{{ route('studio.manage.stock_opname.show', ['stockOpname' => $item->hash]) }}"
                                wire:navigate>
                            </flux:button>
                        </flux:tooltip>

                        @if ($item->status === \App\Enums\StockOpnameStatus::PROCESS)
                            <flux:tooltip content="Kelola">
                                <flux:button variant="primary" color="yellow" size="sm" icon="document-text"
                                    href="{{ route('studio.manage.stock_opname.manage', ['stockOpname' => $item->hash]) }}"
                                    wire:navigate>
                                </flux:button>
                            </flux:tooltip>

                            @if ($item->progress_percent == 100)
                                <flux:modal.trigger name="delete-confirmation">
                                    <flux:tooltip content="Ajukan Persetujuan">
                                        <flux:button variant="primary" color="emerald" icon="document-check"
                                            size="sm"
                                            wire:click="$dispatch('fn:confirmAction', {
                                            id : '{{ $item->hash }}',
                                            message: 'Pastikan proses stock opname sudah tepat dan sesuai.',
                                            confirmButtonText: 'Ajukan',
                                            target: 'requestApproval',
                                            confirmButtonColor : 'emerald'
                                        })">
                                        </flux:button>
                                    </flux:tooltip>
                                </flux:modal.trigger>
                            @endif
                        @endif

                        @if ($item->status === \App\Enums\StockOpnameStatus::PENDING_APPROVAL && auth()->user()->can('approve stock opname'))
                            <flux:modal.trigger name="delete-confirmation">
                                <flux:tooltip content="Setujui">
                                    <flux:button variant="primary" color="emerald" icon="check-circle" size="sm"
                                        wire:click="$dispatch('fn:confirmAction', {
                                            id : '{{ $item->hash }}',
                                            message: 'Proses ini akan menyesuaikan kembali stok barang dengan hasil inputan dan proes tidak dapat dibatalkan, silakan periksa kembali dengan benar.',
                                            confirmButtonText: 'Ajukan',
                                            target: 'approveApproval',
                                            confirmButtonColor : 'emerald'
                                        })">
                                    </flux:button>
                                </flux:tooltip>
                            </flux:modal.trigger>
                        @endif
                    </div>
                </flux:card>
            @endforeach
        </div>

        <livewire:datatable.manage.stock-opname-table />
    </div>

    @include('components.modals.confirmation', [
        'modalName' => 'delete-confirmation',
        'modalTitle' => 'Apakah Anda yakin?',
        'modalMessage' => 'Data yang berelasi dengan data ini juga akan ikut terhapus.',
        'buttonVariant' => 'primary',
        'buttonColor' => 'danger',
        'buttonText' => 'Ya, Hapus',
    ])
</flux:main>
