<main class="flex-1 py-4 px-4 bg-purple-50">
    <!-- Left side: Title and Order Details -->
    <div class="flex justify-between items-start mb-6 border-b border-gray-200 pb-4">
        <div>
            <div class="flex items-center gap-3 mb-2">
                <h1 class="text-2xl font-bold text-[#333]">Detail Pesanan</h1>

                <!-- Status Badge - using existing data from $order -->
                <?php if ($order->is_referral): ?>
                    <span class="inline-flex items-center px-3 py-1 text-sm font-medium rounded-md border bg-green-100 text-green-700">
                        Affiliate
                    </span>
                <?php endif; ?>
                <span class="inline-flex items-center px-3 py-1 text-sm font-medium rounded-md border <?php echo $order->payment_status_class; ?>">
                    <?php echo htmlspecialchars($order->payment_status_text, ENT_QUOTES, 'UTF-8'); ?>
                </span>
            </div>

            <div class="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-4 text-gray-700">
                <!-- Order/Invoice Number -->
                <div class="flex items-center">
                    <i data-feather="file-text" class="w-4 h-4 mr-2 text-gray-500"></i>
                    <span class="font-medium">
                        <?php echo empty($order->tokopedia_invoice) ? "Order No. {$order->id_orders}" : "Invoice No. {$order->tokopedia_invoice}"; ?>
                    </span>
                </div>

                <!-- Order Date -->
                <div class="flex items-center">
                    <i data-feather="calendar" class="w-4 h-4 mr-2 text-gray-500"></i>
                    <span><?php echo date('d F Y, H:i', strtotime($order->order_date)); ?></span>
                </div>
            </div>
        </div>
        <div class="flex items-center gap-2">
            <!-- Print button -->

            <button id="printInvoice" data-id="<?= htmlspecialchars($order->id_orders, ENT_QUOTES, 'UTF-8') ?>" class="flex items-center gap-1.5 px-3 py-2 text-sm bg-white border border-gray-300 rounded-md hover:bg-gray-50 transition">
                <i data-feather="printer" class="w-4 h-4 mr-2"></i>
                Cetak Invoice
            </button>
            <!-- Back button -->
            <a href="<?php echo base_url('admin/orders/manage-order'); ?>"
                class="flex items-center gap-1.5 px-3 py-2 text-sm bg-white border border-gray-300 rounded-md hover:bg-gray-50 transition">
                <i data-feather="arrow-left" class="w-4 h-4"></i>
                <span>Kembali</span>
            </a>
        </div>
    </div>
    <?php if ($this->session->flashdata('message')): ?>
        <div class="alert flex items-center justify-between bg-<?php echo $this->session->flashdata('message_type') === 'success' ? 'green' : 'red'; ?>-100 border-l-4 border-<?php echo $this->session->flashdata('message_type') === 'success' ? 'green' : 'red'; ?>-500 text-<?php echo $this->session->flashdata('message_type') === 'success' ? 'green' : 'red'; ?>-800 px-6 py-4 rounded-lg shadow-lg transition transform duration-300">
            <div class="flex items-center">
                <!-- Ikon Feather sesuai jenis pesan -->
                <i data-feather="<?php echo $this->session->flashdata('message_type') === 'success' ? 'check-circle' : 'x-circle'; ?>" class="h-6 w-6 mr-3"></i>
                <span class="font-semibold"><?php echo $this->session->flashdata('message'); ?></span>
            </div>
            <button class="ml-4 text-<?php echo $this->session->flashdata('message_type') === 'success' ? 'green' : 'red'; ?>-500 hover:text-<?php echo $this->session->flashdata('message_type') === 'success' ? 'green' : 'red'; ?>-700 focus:outline-none" onclick="this.parentElement.style.display='none'">
                <i data-feather="x" class="h-5 w-5"></i>
            </button>
        </div>
        <script>
            feather.replace(); // Memuat ikon Feather
        </script>
    <?php endif; ?>

    <!-- Form -->
    <form action="<?= base_url('admin/orders/update/' . $order->id_orders) ?>" method="POST" class="space-y-4">
        <input type="hidden" name="<?= $this->security->get_csrf_token_name() ?>" value="<?= $this->security->get_csrf_hash() ?>">

        <!-- Pelanggan -->
        <div class="bg-white rounded-lg shadow-sm p-6">
            <div class="flex justify-between items-center mb-6">
                <h2 class="text-lg font-semibold">Informasi Pelanggan</h2>
                <!-- Badge Hadiah - Repositioned to be more prominent -->
                <?php if (!empty($order->gift_receiver_name)): ?>
                    <span class="inline-flex items-center px-4 py-2 rounded-lg text-md font-medium bg-purple-100 text-[#7A4397] border border-purple-200 shadow-sm">
                        <i data-feather="gift" class="w-4 h-4 mr-1.5"></i>
                        Pesanan Hadiah
                    </span>
                <?php endif; ?>
            </div>
            <!-- Descriptive text about gift orders -->
            <?php if (!empty($order->gift_receiver_name)): ?>
                <div class="mb-6 bg-purple-50 border border-purple-100 rounded-md text-sm text-[#333]">
                    <p><span class="font-medium">Info Pesanan Hadiah:</span> Pesanan spesial! Hadiah ini dikirim dari si pembeli buat si penerima. Jadi, nama dan nomor yang tertera dibawah punya penerima, tapi email tetap punya sang pemberi kejutan. Gak usah bingung, yang penting hadiahnya nyampe! 😉</p>
                </div>
            <?php else: ?>
                <div class="mt-1 mb-6 text-sm text-gray-500">
                    <p>Detail informasi pelanggan untuk pesanan ini.</p>
                </div>
            <?php endif; ?>
            <!-- Nama Pelanggan -->
            <div class="mb-4">
                <div class="flex items-start gap-4">
                    <!-- Label & Info -->
                    <div class="w-1/3">
                        <div class="flex items-center gap-2 mb-2 w-full mt-1">
                            <label class="text-[#333] font-medium">Dikirim Buat</label>
                        </div>
                    </div>

                    <div class="w-2/3">
                        <input id="customerName" type="text" name="customerName"
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-1 focus:ring-[#7A4397] focus:outline-none text-[#333] placeholder-gray-500"
                            placeholder="Nama Customer" disabled readonly autocomplete="off"
                            value="<?= htmlspecialchars($order->gift_receiver_name ?: $order->recipient_name, ENT_QUOTES, 'UTF-8') ?>">
                    </div>
                </div>
            </div>
            <!-- Email Pelanggan -->
            <div class="mb-4">
                <div class="flex items-start gap-4">
                    <!-- Label & Info -->
                    <div class="w-1/3">
                        <label class="text-[#333] font-medium mt-1 block">Email Pelanggan</label>
                    </div>

                    <div class="w-2/3 flex items-center gap-3">
                        <input id="customerEmail" type="text" name="customerEmail"
                            class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-1 focus:ring-[#7A4397] focus:outline-none text-[#333] placeholder-gray-500"
                            placeholder="Alamat Email" disabled readonly autocomplete="off"
                            value="<?= htmlspecialchars($order->email, ENT_QUOTES, 'UTF-8') ?>">

                        <!-- Tombol Email -->
                        <a href="mailto:<?= htmlspecialchars($order->email, ENT_QUOTES, 'UTF-8') ?>"
                            class="w-max text-left px-3 py-2 text-sm text-white bg-blue-500 hover:bg-blue-600 rounded-md flex items-center gap-2 transition">
                            <i data-feather="mail" class="w-5 h-5"></i>
                            <span>Email</span>
                        </a>
                    </div>
                </div>
            </div>

            <!-- Telepon Pelanggan -->
            <div class="mb-4">
                <div class="flex items-start gap-4">
                    <!-- Label & Info -->
                    <div class="w-1/3">
                        <label class="text-[#333] font-medium mt-1 block">Telepon Penerima</label>
                    </div>

                    <div class="w-2/3 flex items-center gap-3">
                        <input id="customerPhone" type="text" name="customerPhone"
                            class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-1 focus:ring-[#7A4397] focus:outline-none text-[#333] placeholder-gray-500"
                            placeholder="Nomor Telepon" disabled readonly autocomplete="off"
                            value="<?= htmlspecialchars($order->gift_receiver_phone ?: $order->phone, ENT_QUOTES, 'UTF-8') ?>">

                        <!-- Tombol Chat -->
                        <button type="button" class="whatsapp-chat-btn w-max p-2 text-sm text-white bg-green-500 hover:bg-green-600 rounded-md flex items-center gap-2 transition"
                            data-phone="<?= htmlspecialchars($order->gift_receiver_phone ?: $order->phone, ENT_QUOTES, 'UTF-8') ?>"
                            data-name="<?= htmlspecialchars($order->gift_receiver_name ?: $order->recipient_name, ENT_QUOTES, 'UTF-8') ?>">
                            <i data-feather="message-circle" class="w-5 h-5"></i>
                            <span>Chat Pelanggan</span>
                        </button>
                    </div>
                </div>
            </div>

            <!-- Alamat Pelanggan  -->
            <div class="mb-4">
                <div class="flex items-start gap-4">
                    <!-- Label & Info -->
                    <div class="w-1/3">
                        <div class="flex items-center gap-2 mb-2 w-full mt-1">
                            <label class="text-[#333] font-medium">Alamat Penerima</label>
                        </div>
                    </div>

                    <div class="w-2/3">
                        <textarea id="customerAddress" name="customerAddress"
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-1 focus:ring-[#7A4397] focus:outline-none text-[#333] placeholder-gray-500"
                            placeholder="Alamat Customer" readonly disabled autocomplete="off"><?= htmlspecialchars($order->address, ENT_QUOTES, 'UTF-8') ?></textarea>
                        <?php if (empty($order->tokopedia_invoice)): ?>
                            <div class="mt-3 text-sm text-[#333]">
                                <p>Mau ngoprek data pelanggan ini? Santai, tinggal klik <a href="<?= base_url('admin/customers/detail/' . $order->customer_detail->id_customers) ?>" class="text-[#7A4397] hover:underline">sini</a>, edit-edit dikit, beres! Jangan sampai malah ngedit nasib, ya.</p>
                            </div>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        </div>

        <!-- Pesanan -->
        <div class="bg-white rounded-lg shadow-sm p-6">
            <h2 class="text-lg font-semibold mb-6">Informasi Pesanan</h2>
            <!-- Status Pesanan -->
            <div class="mb-4">
                <div class="flex items-start gap-4">
                    <!-- Label -->
                    <div class="w-1/3">
                        <div class="flex items-center gap-2 mb-2 w-full mt-1">
                            <label for="orderStatus" class="text-[#333] font-medium">Status Pesanan</label>
                        </div>

                    </div>

                    <!-- Select Dropdown -->
                    <div class="w-2/3">
                        <select id="orderStatus" name="orderStatus"
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-1 focus:ring-[#7A4397] focus:outline-none text-[#333] placeholder-gray-500">
                            <option value="0">Pending - Menunggu konfirmasi</option>
                            <option value="1">Belum Dibayar - Menunggu pembayaran</option>
                            <option value="2">Dibatalkan - Pesanan dibatalkan</option>
                            <option value="3">Sudah Dibayar - Pembayaran diterima</option>
                            <option value="4">Diproses - Sedang disiapkan</option>
                            <option value="5">Selesai - Pesanan telah selesai</option>
                        </select>
                        <div class="mt-3 text-sm text-gray-500">
                            <p>Pilih status terbaru untuk pesanan ini sesuai dengan proses pemesanan.</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Catatan Pelanggan -->
            <div class="mb-4">
                <div class="flex items-start gap-4">
                    <!-- Label & Info -->
                    <div class="w-1/3">
                        <div class="flex items-center gap-2 mb-2 w-full mt-1">
                            <label class="text-[#333] font-medium">Catatan Pelanggan</label>
                        </div>
                    </div>

                    <div class="w-2/3">
                        <textarea id="customerNote" name="customerNote" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-1 focus:ring-[#7A4397] focus:outline-none text-[#333] placeholder-gray-500" placeholder="Customer Note" readonly disabled autocomplete="off"><?= htmlspecialchars($order->customer_note ?: 'Pelanggan tidak memberi catatan', ENT_QUOTES, 'UTF-8') ?></textarea>
                    </div>
                </div>
            </div>
            <!-- Catatan Admin -->
            <div class="mb-4">
                <div class="flex items-start gap-4">
                    <!-- Label & Info -->
                    <div class="w-1/3">
                        <div class="flex items-center gap-2 mb-2 w-full mt-1">
                            <label class="text-[#333] font-medium">Catatan Admin</label>
                        </div>
                    </div>

                    <div class="w-2/3">
                        <textarea id="adminNote" name="adminNote" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-1 focus:ring-[#7A4397] focus:outline-none text-[#333] placeholder-gray-500" placeholder="Masukin catatan dari admin disini." autocomplete="off"><?= htmlspecialchars(trim($order->admin_note), ENT_QUOTES, 'UTF-8') ?></textarea>
                    </div>
                </div>
            </div>
            <!-- DOKUMEN -->
            <div class="mb-4">
                <div class="flex items-start gap-4">
                    <!-- Label & Info -->
                    <div class="w-1/3">
                        <label class="text-[#333] font-medium mt-1 block">Dokumen</label>
                    </div>

                    <div class="w-2/3 flex items-center gap-3">
                        <button type="button" id="printInvoiceDoc" data-id="<?= htmlspecialchars($order->id_orders, ENT_QUOTES, 'UTF-8') ?>" class="px-4 py-2 border border-gray-300 rounded-md text-sm text-[#333] flex items-center">
                            <i data-feather="printer" class="w-4 h-4 mr-2"></i>
                            Cetak Invoice
                        </button>
                        <button type="button" id="printDeliveryReceipt" data-id="<?= htmlspecialchars($order->id_orders, ENT_QUOTES, 'UTF-8') ?>" class="px-4 py-2 border border-gray-300 rounded-md text-sm text-[#333] flex items-center">
                            <i data-feather="printer" class="w-4 h-4 mr-2"></i>
                            Cetak Delivery Receipt
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Detail Pesanan -->
        <div class="bg-white rounded-lg shadow-sm p-6">
            <h2 class="text-lg font-semibold mb-6">Detail Pesanan</h2>
            <div class="mt-1 mb-6 text-sm text-gray-500">
                <p>Detail produk untuk pesanan ini.</p>
            </div>
            <div class="mb-6">
                <div class="overflow-x-auto">
                    <table class="min-w-full border-collapse">
                        <thead>
                            <tr class="bg-gray-100">
                                <th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Produk</th>
                                <th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Harga</th>
                                <th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Qty</th>
                                <th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Subtotal</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200">
                            <?php foreach ($order->items as $item): ?>
                                <tr class="hover:bg-gray-50">
                                    <td class="py-4 px-4">
                                        <div class="flex items-center">
                                            <div class="h-16 w-16 flex-shrink-0 mr-4 bg-gray-100 rounded overflow-hidden">
                                                <img src="<?php echo base_url('uploads/product/' . $item->product_image); ?>" alt="<?php echo $item->item_name; ?>" class="h-full w-full object-cover">
                                            </div>
                                            <div>
                                                <p class="text-md font-medium text-[#333]"><?php echo $item->item_name; ?></p>
                                                <?php if ($item->attributes): ?>
                                                    <?php foreach (explode(',', $item->attributes) as $attribute): ?>
                                                        <span class="inline-flex items-center rounded-full text-sm font-medium text-[#7A4397] mr-1 mb-1 mt-2">
                                                            <?php echo trim($attribute); ?>
                                                        </span>
                                                    <?php endforeach; ?>
                                                <?php else: ?>
                                                    <span class="text-gray-400">Varian: -</span>
                                                <?php endif; ?>
                                                <p class="text-sm text-[#333]">SKU: <?php echo $item->sku; ?></p>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="py-4 px-4 text-md text-[#333] text-left">Rp <?php echo number_format($item->item_price, 0, ',', '.'); ?></td>
                                    <td class="py-4 px-4 text-md text-[#333] text-left"><?php echo $item->quantity; ?></td>
                                    <td class="py-4 px-4 text-md font-medium text-[#333] text-left">Rp <?php echo number_format($item->subtotal, 0, ',', '.'); ?></td>
                                </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Pembayaran dan Pengiriman -->
        <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Bagian Pengiriman (Kiri) -->
                <div class="border rounded-lg p-4">
                    <div class="card-header">
                        <h3 class="font-medium text-lg text-[#333]">
                            <i class="fas fa-truck mr-2" style="color: #7A4397;"></i>
                            Informasi Pengiriman
                        </h3>
                        <div>
                            <?php if (isset($order->shipping_history) && count($order->shipping_history) > 0): ?>
                                <span class="badge badge-success">Sudah Dikirim</span>
                            <?php else: ?>
                                <span class="badge badge-warning">Belum Dikirim</span>
                            <?php endif; ?>
                        </div>
                    </div>

                    <!-- Detail Pengiriman -->
                    <div class="space-y-4">
                        <!-- Metode & Biaya Pengiriman -->
                        <div class="rounded-lg p-3">
                            <div class="flex justify-between mb-2">
                                <span class="text-[#333]">Metode Pengiriman</span>
                                <span class="font-medium"><?= isset($order->items[0]) ? ucfirst($order->items[0]->shipping_method_name) : 'N/A' ?></span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-[#333]">Biaya Pengiriman</span>
                                <span class="font-medium text-[#333]">Rp <?= number_format($order->shipping_fee, 0, ',', '.') ?></span>
                            </div>
                        </div>

                        <!-- Status Asuransi -->
                        <div class="rounded-lg p-3">
                            <div class="flex justify-between items-start">
                                <span class="text-[#333]">Asuransi Pengiriman</span>
                                <div>
                                    <?php if ($order->insurance_status == 'Yes'): ?>
                                        <span class="badge badge-success">Pakai Asuransi</span>
                                        <div class="mt-1 text-sm text-right">
                                            Biaya: Rp <?= number_format($order->insurance_cost, 0, ',', '.') ?>
                                        </div>
                                    <?php else: ?>
                                        <span class="badge badge-info">Ga Pakai Asuransi</span>
                                    <?php endif; ?>
                                </div>
                            </div>
                        </div>

                        <!-- Nomor Resi & Update Pengiriman -->
                        <div class="rounded-lg border border-gray-200 p-3">
                            <h4 class="font-medium mb-3 text-[#333]">Nomor Resi Pengiriman</h4>
                            <div class="flex items-center gap-2">
                                <input type="text" id="trackingNumber" class="border border-gray-300 rounded px-3 py-2 text-sm w-full focus:ring-1 focus:ring-[#7A4397] focus:outline-none text-[#333] placeholder-gray-500" value="<?= $order->no_resi ?>" data-order-id="<?= $order->id_orders ?>">

                                <button type="button" id="copyResi" class="tooltip bg-gray-100 hover:bg-gray-200 p-2 rounded" data-clipboard-target="#trackingNumber">
                                    <i data-feather="clipboard" class="w-5 h-5"></i>
                                    <span class="tooltip-text">Salin Resi</span>
                                </button>

                                <button type="button" id="updateResi" class="bg-[#7A4397] hover:bg-purple-800 text-white px-3 py-2 rounded text-sm">
                                    Update
                                </button>
                            </div>
                            <p class="text-sm text-gray-600 mt-2">
                                Dengan memasukkan nomor resi, pesanan akan otomatis dianggap selesai. Iya, sesimpel itu— gak perlu mantra atau kode rahasia.
                            </p>
                            <!-- <div class="mt-3">
                                <button id="cekResi" class="w-full bg-gray-200 hover:bg-gray-300 py-2 rounded text-sm font-medium">
                                    Lacak Pengiriman
                                </button>
                            </div> -->
                        </div>
                    </div>
                </div>

                <!-- Bagian Pembayaran (Kanan) -->
                <div class="border rounded-lg p-4">
                    <div class="card-header">
                        <h3 class="font-medium text-lg text-[#333]">
                            <i class="fas fa-credit-card mr-2" style="color: #7A4397;"></i>
                            Informasi Pembayaran
                        </h3>
                        <div>
                            <?php if ($order->payment_confirm == 1): ?>
                                <span class="badge badge-success">Pembayaran Dikonfirmasi</span>
                            <?php else: ?>
                                <span class="badge badge-warning">Menunggu Konfirmasi</span>
                            <?php endif; ?>
                        </div>
                    </div>

                    <!-- Detail Pembayaran -->
                    <div class="space-y-4">
                        <!-- Metode Pembayaran -->
                        <div class="rounded-lg p-3">
                            <div class="flex justify-between items-center">
                                <span class="text-[#333]">Metode Pembayaran</span>
                                <span class="font-medium">
                                    <?php
                                    $payment_icon = '';
                                    $payment_type = strtolower($order->payment_type);

                                    if (strpos($payment_type, 'transfer') !== false) {
                                        $payment_icon = '🏦';
                                    } elseif (strpos($payment_type, 'qris') !== false) {
                                        $payment_icon = '📱';
                                    } elseif (strpos($payment_type, 'va') !== false || strpos($payment_type, 'virtual') !== false) {
                                        $payment_icon = '🔢';
                                    } elseif (strpos($payment_type, 'cod') !== false) {
                                        $payment_icon = '💵';
                                    }
                                    ?>
                                    <?= $payment_icon ?> <?= ucwords($order->payment_type) ?>
                                </span>
                            </div>
                        </div>

                        <!-- Status Konfirmasi -->
                        <div class="rounded-lg p-3">
                            <div class="flex justify-between items-center">
                                <span class="text-[#333]">Konfirmasi Dari Pelanggan</span>
                                <?php if ($order->payment_confirm == 1): ?>
                                    <span class="flex items-center font-medium text-green-600">
                                        <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                                        </svg>
                                        Sudah Konfirmasi
                                    </span>
                                <?php else: ?>
                                    <span class="flex items-center font-medium text-yellow-600">
                                        <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 102 0V6zm-1 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
                                        </svg>
                                        Menunggu Konfirmasi
                                    </span>
                                <?php endif; ?>
                            </div>
                        </div>

                        <!-- Detail Konfirmasi jika ada -->
                        <?php if ($order->payment_confirm == 1 && $order->payment_confirm_details): ?>
                            <div class="border border-green-200 bg-green-50 rounded-lg p-3">
                                <h4 class="font-medium mb-2 text-[#333]">Detail Konfirmasi Pembayaran:</h4>
                                <div class="text-sm text-gray-700 p-3 bg-white rounded border border-green-100">
                                    <?= strip_tags($order->payment_confirm_details, '<p><a>') ?>
                                </div>
                            </div>
                        <?php else: ?>
                            <div class="border border-gray-200 rounded-lg p-3">
                                <div class="text-center py-4">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#9CA3AF" class="mx-auto mb-2" viewBox="0 0 16 16">
                                        <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
                                        <path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z" />
                                    </svg>
                                    <p class="text-gray-500">Belum ada detail konfirmasi pembayaran</p>
                                </div>
                            </div>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        </div>

        <!-- Rincian Pesanan -->
        <div class="bg-white rounded-lg shadow-sm p-6 flex flex-col gap-2">
            <h2 class="text-lg font-semibold border-b pb-6 text-[#333]">Ringkasan Pesanan</h2>
            <div class="flex justify-between">
                <span class="text-gray-700 text-sm font-medium">Sub Total</span>
                <span id="subtotalPrice" class="text-lg font-semibold text-[#7A4397]">Rp. <?= number_format($order->total_amount, 0, ',', '.') ?></span>
            </div>

            <div class="flex justify-between">
                <span class="text-gray-700 text-sm font-medium">Potongan Voucher</span>
                <span id="voucherDiscount" class="text-lg font-semibold text-red-600">(<?= $order->redeemed_voucher_code ?>) -Rp. <?= number_format($order->redeemed_voucher_amount, 0, ',', '.') ?></span>
            </div>
            <div class="flex justify-between">
                <span class="text-gray-700 text-sm font-medium">Poin Yang Ditukar</span>
                <span id="pointRedeemed" class="text-lg font-semibold text-red-600">(<?= $order->minus_reward ?> Poin) -Rp. <?= number_format($order->minus_reward_amount, 0, ',', '.') ?></span>
            </div>

            <div class="flex justify-between">
                <span class="text-gray-700 text-sm font-medium">Biaya Pengiriman</span>
                <span id="shippingFee" class="text-lg font-semibold text-[#7A4397]">Rp. <?= number_format($order->shipping_fee, 0, ',', '.') ?></span>
            </div>

            <div class="border-t pt-4 mt-4 flex justify-between">
                <span class="text-lg font-semibold">Total</span>
                <span id="grandTotal" class="text-lg font-semibold text-[#7A4397]">Rp. <?= number_format($order->grand_total_amount, 0, ',', '.') ?></span>
            </div>
        </div>
    </form>
    <!-- <div class="bg-gray-100 p-4 rounded-md">
        <pre class="whitespace-pre-wrap text-sm text-[#333]">
            <?= htmlspecialchars(json_encode($order, JSON_PRETTY_PRINT), ENT_QUOTES, 'UTF-8') ?>
        </pre>
    </div> -->
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
<style>
    /* Custom CSS untuk komponen */
    .badge {
        display: inline-block;
        padding: 0.25rem 0.5rem;
        border-radius: 0.25rem;
        font-size: 0.875rem;
        font-weight: 500;
    }

    .badge-success {
        background-color: #d1fae5;
        color: #065f46;
    }

    .badge-warning {
        background-color: #fef3c7;
        color: #92400e;
    }

    .badge-info {
        background-color: #e0f2fe;
        color: #0369a1;
    }

    .card-header {
        border-bottom: 1px solid #e5e7eb;
        padding-bottom: 0.75rem;
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .tooltip {
        position: relative;
        display: inline-block;
    }

    .tooltip-text {
        visibility: hidden;
        width: 120px;
        background-color: #333;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px;
        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 50%;
        margin-left: -60px;
        opacity: 0;
        transition: opacity 0.3s;
    }

    .tooltip:hover .tooltip-text {
        visibility: visible;
        opacity: 1;
    }
</style>
<script>
    const BASE_URL = "<?= base_url('admin/orders') ?>";
    const orderStatusSelect = document.getElementById("orderStatus");
    const currentStatus = <?= $order->payment_status ?>;

    let csrfToken = '<?= $this->security->get_csrf_hash(); ?>';
    const csrfName = '<?= $this->security->get_csrf_token_name(); ?>';
    document.addEventListener("DOMContentLoaded", function() {
        feather.replace(); // Inisialisasi Feather Icons

        const copyButton = document.querySelector("#copyResi");
        if (copyButton) {
            const clipboard = new ClipboardJS(copyButton);
            clipboard.on("success", function(e) {
                notyf.success("Nomor resi berhasil disalin!");
                e.clearSelection();
            });

            clipboard.on("error", function(e) {
                notyf.error("Gagal menyalin nomor resi.");
            });
        }

        const updateResiButton = document.getElementById("updateResi");
        const trackingNumberInput = document.getElementById("trackingNumber");
        updateResiButton.addEventListener('click', () => {
            const orderId = trackingNumberInput.dataset.orderId;
            const newResiValue = trackingNumberInput.value.trim();

            if (!orderId || !newResiValue) {
                notyf.error("Nomor resi tidak boleh kosong!");
                return;
            }

            // Simpan nilai sebelumnya untuk rollback jika gagal
            const previousResiValue = trackingNumberInput.getAttribute('data-prev') || trackingNumberInput.value;
            trackingNumberInput.setAttribute('data-prev', newResiValue);
            trackingNumberInput.disabled = true;
            trackingNumberInput.classList.add('opacity-50');

            const formData = new FormData();
            formData.append('order_id', orderId);
            formData.append('no_resi', newResiValue);
            formData.append(csrfName, csrfToken);

            fetch(`${BASE_URL}/updateResi`, {
                    method: 'POST',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    body: formData
                })
                .then(response => {
                    if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
                    return response.json();
                })
                .then(data => {
                    if (data.success) {
                        notyf.success(data.message);
                        setTimeout(() => {
                            location.reload();
                        }, 2000);

                        if (data.csrf_hash) csrfToken = data.csrf_hash;
                    } else {
                        throw new Error(data.message || 'Gagal menyimpan nomor resi');
                    }
                })
                .catch(error => {
                    notyf.error(error.message || "Terjadi kesalahan!");
                    trackingNumberInput.value = previousResiValue; // Rollback nilai sebelumnya
                })
                .finally(() => {
                    trackingNumberInput.disabled = false;
                    trackingNumberInput.classList.remove('opacity-50');
                });
        });
        // Chat Button
        const chatButton = document.querySelector('.whatsapp-chat-btn');
        chatButton.addEventListener('click', (e) => {
            let phoneNumber = chatButton.dataset.phone;
            const customerName = chatButton.dataset.name;
            if (phoneNumber.startsWith('08')) {
                phoneNumber = `62${phoneNumber.substring(1)}`;
            } else if (phoneNumber.startsWith('8')) {
                phoneNumber = `62${phoneNumber}`;
            }
            const whatsappURL = `https://api.whatsapp.com/send?phone=${phoneNumber}&text=Halo kak ${customerName}`;
            window.open(whatsappURL, '_blank');
        });

        // Invoice
        const printInvoiceButton = document.querySelector('button[id="printInvoice"]');
        printInvoiceButton.addEventListener('click', function(event) {
            event.preventDefault();
            const orderId = printInvoiceButton.dataset.id;
            if (!orderId) {
                console.error('Order ID tidak ditemukan');
                return;
            }
            window.open(`${BASE_URL}/generate_invoice/${orderId}`, '_blank');
        });

        const printInvoiceButtonDoc = document.querySelector('button[id="printInvoiceDoc"]');
        printInvoiceButtonDoc.addEventListener('click', function(event) {
            event.preventDefault();
            const orderId = printInvoiceButtonDoc.dataset.id;
            if (!orderId) {
                console.error('Order ID tidak ditemukan');
                return;
            }
            window.open(`${BASE_URL}/generate_invoice/${orderId}`, '_blank');
        });

        // Delivery Receipt
        const deliveryReceiptButton = document.querySelector('button[id="printDeliveryReceipt"]');
        deliveryReceiptButton.addEventListener('click', function(event) {
            event.preventDefault();
            const orderId = printInvoiceButton.dataset.id;
            if (!orderId) {
                console.error('Order ID tidak ditemukan');
                return;
            }
            window.open(`${BASE_URL}/generate_delivery_receipt/${orderId}`, '_blank');
        });

        // Order Status Visibility
        updateStatusOptions();
    });

    // Order Status Visibility
    function updateStatusOptions() {
        const options = orderStatusSelect.options;

        for (let i = 0; i < options.length; i++) {
            const optionValue = parseInt(options[i].value);

            // Reset opsi sebelum mengubah
            options[i].disabled = false;
            options[i].selected = false;
            options[i].classList.remove("opacity-50", "cursor-not-allowed");

            // Tandai opsi yang sesuai sebagai selected
            if (optionValue === currentStatus) {
                options[i].selected = true;
            }

            // Terapkan aturan visibility berdasarkan status saat ini
            if (currentStatus === 0) {
                // Jika status Pending (0), semua opsi tersedia
            } else if (currentStatus === 1) {
                // Jika status Belum Dibayar (1), Pending tidak bisa dipilih
                if (optionValue === 0) {
                    options[i].disabled = true;
                    options[i].classList.add("opacity-50", "cursor-not-allowed");
                }
            } else if (currentStatus === 2) {
                // Jika status Dibatalkan (2), Pending tidak bisa dipilih
                if (optionValue === 0) {
                    options[i].disabled = true;
                    options[i].classList.add("opacity-50", "cursor-not-allowed");
                }
            } else if (currentStatus === 3) {
                // Jika status Sudah Dibayar (3), Pending dan Belum Dibayar tidak bisa dipilih
                if (optionValue === 0 || optionValue === 1) {
                    options[i].disabled = true;
                    options[i].classList.add("opacity-50", "cursor-not-allowed");
                }
            } else if (currentStatus === 4) {
                // Jika status Diproses (4), hanya Selesai yang bisa dipilih
                if (optionValue !== 5) {
                    options[i].disabled = true;
                    options[i].classList.add("opacity-50", "cursor-not-allowed");
                }
            } else if (currentStatus === 5) {
                // Jika status Selesai (5), semua opsi tidak bisa dipilih
                if (optionValue !== 2) {
                    options[i].disabled = true;
                    options[i].classList.add("opacity-50", "cursor-not-allowed");
                }
            }
        }
    }
</script>