<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">
        <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-neutral-700">
                    <div>
                        <h2 class="text-2xl font-semibold text-gray-800 dark:text-neutral-200">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-neutral-500">
                                Untuk pelanggan kami yang terhormat,
                            </p>
                            <p class="font-medium text-gray-800 dark:text-neutral-200">
                                {{ $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-neutral-500">
                                    Nomor Invoice:
                                </dt>
                                <dd class="font-medium text-gray-800 dark:text-neutral-200">
                                    {{ $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-neutral-500">
                                    Status:
                                </dt>
                                <dd class="font-medium text-gray-800 dark:text-neutral-200">
                                    {{ $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-neutral-500">
                                    Tanggal:
                                </dt>
                                <dd class="font-medium text-gray-800 dark:text-neutral-200">
                                    {{ $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-neutral-500">
                                    Order di:
                                </dt>
                                <dd class="font-medium text-gray-800 dark:text-neutral-200">
                                    {{ $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-neutral-700">
                    <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-neutral-500">
                            Item
                        </div>
                        <div class="text-start text-xs font-medium text-gray-500 uppercase dark:text-neutral-500">
                            Kuantitas
                        </div>
                        <div class="text-start text-xs font-medium text-gray-500 uppercase dark:text-neutral-500">Harga
                        </div>
                        <div class="text-end text-xs font-medium text-gray-500 uppercase dark:text-neutral-500">Total
                        </div>
                    </div>

                    <div class="hidden sm:block border-b border-gray-200 dark:border-neutral-700"></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-neutral-500">
                                    Item
                                </h5>
                                <p class="font-medium text-gray-800 dark:text-neutral-200">{{ $item['name'] }}</p>
                            </div>
                            <div>
                                <h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase dark:text-neutral-500">
                                    Kuantitas
                                </h5>
                                <p class="text-gray-800 dark:text-neutral-200">{{ $item['quantity'] }}</p>
                            </div>
                            <div>
                                <h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase dark:text-neutral-500">
                                    Harga
                                </h5>
                                <p class="text-gray-800 dark:text-neutral-200">{{ $item['unit_price'] }}</p>
                            </div>
                            <div>
                                <h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase dark:text-neutral-500">
                                    Total
                                </h5>
                                <p class="sm:text-end text-gray-800 dark:text-neutral-200">{{ $item['total'] }}</p>
                            </div>
                        </div>

                        <div class="sm:hidden border-b border-gray-200 dark:border-neutral-700"></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-neutral-500">Subotal:</dt>
                                <dd class="col-span-2 font-medium text-gray-800 dark:text-neutral-200">
                                    {{ $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-neutral-500">Diskon:</dt>
                                <dd class="col-span-2 font-medium text-gray-800 dark:text-neutral-200">
                                    {{ $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-neutral-500">Total:</dt>
                                <dd class="col-span-2 font-medium text-gray-800 dark:text-neutral-200">
                                    {{ $orderData['total'] }}</dd>
                            </dl>

                        </div>
                        <!-- End Grid -->
                    </div>
                </div>
                <!-- End Flex -->
            </div>
        </flux:card>
    </div>
</flux:main>
