<?php defined('BASEPATH') or exit('No direct script access allowed'); ?>

<div class="account-order-container">
    <h1><?= ucfirst(lang('order_title')) ?></h1>
    <p><?= ucfirst(lang('order_sub_title')) ?></p>
    <!-- Search Box -->
    <div class="order-search-bar">
        <input type="text" id="order-search" placeholder="<?= ucfirst(lang('account_search_placeholder')) ?>" />
    </div>

    <!-- Filter Buttons -->
    <div class="order-filter-buttons">
        <p class="order-filter-title">Status</p>
        <button class="order-filter-btn active" data-status="all"><?= ucfirst(lang('order_status_all')) ?></button>
        <button class="order-filter-btn" data-status="pending"><?= ucfirst(lang('order_status_pending')) ?></button>
        <button class="order-filter-btn" data-status="in-progress"><?= ucfirst(lang('order_status_progress')) ?></button>
        <button class="order-filter-btn" data-status="sent"><?= ucfirst(lang('order_status_sent')) ?></button>
        <button class="order-filter-btn" data-status="selesai"><?= ucfirst(lang('order_status_done')) ?></button>
        <button class="order-filter-btn" data-status="batal"><?= ucfirst(lang('order_status_cancel')) ?></button>
    </div>

    <ul class="order-history__list" id="orderHistoryList">
        <?php foreach ($orders as $order): ?>
            <li class="order-card" data-status="<?= $order['status_class'] ?>">
                <!-- Order Header -->
                <div class="order-card__header">
                    <div class="order-card__meta">
                        <span class="order-card__date"><?= $order['date'] ?></span>
                        <span class="order-card__id">Order ID: <?= $order['id'] ?></span>
                    </div>
                    <span class="order-card__status order-card__status--<?= $order['status_class'] ?>">
                        <?= ($order['payment_confirm'] == 1 && $order['status'] == 'Belum Dibayar') ? "Pembayaran Sedang Diverifikasi" : $order['status'] ?>
                    </span>
                </div>

                <!-- Order Items -->
                <div class="order-card__items">
                    <?php foreach ($order['items'] as $item): ?>
                        <div class="order-item">
                            <div class="order-item__image">
                                <a href="<?= base_url('product/' . $item->alias) ?>" class="order-item__link">
                                    <img src="<?= base_url('uploads/product/' . $item->image) ?>"
                                        alt="<?= $item->item_name ?>"
                                        class="order-item__thumbnail" />
                                </a>
                            </div>

                            <div class="order-item__details">
                                <h3 class="order-item__name">
                                    <a href="<?= base_url('product/' . $item->alias) ?>" class="order-item__link">
                                        <?= $item->item_name ?>
                                    </a>
                                </h3>
                                <p class="order-item__quantity">
                                    <?= $item->quantity ?> pcs × IDR <?= number_format($item->item_price) ?>
                                </p>

                                <!-- Review Button for Individual Products -->
                                <?php if ($order['status'] == "Selesai" && $item->can_review): ?>
                                    <div class="order-item__actions">
                                        <a href="<?= base_url('product/' . $item->alias) ?>"
                                            class="btn btn--secondary btn--small">
                                            <i class="fa fa-star"></i> Buat Ulasan (Dapetin 500 Poin)
                                        </a>
                                    </div>
                                <?php elseif ($order['status'] == "Selesai" && !$item->can_review): ?>
                                    <div class="order-item__actions">
                                        <span class="review-completed">
                                            <i class="fa fa-check-circle"></i> Sudah Diulas
                                        </span>
                                    </div>
                                <?php endif; ?>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>

                <!-- Order Footer -->
                <div class="order-card__footer">
                    <div class="order-card__total">
                        <div class="order-card__total-info">
                            <span class="order-card__total-label">Total:</span>
                            <span class="order-card__total-amount">IDR <?= number_format($order['total'], 0, ',', '.') ?></span>
                        </div>
                        <button class="order-card__toggle-detail" onclick="toggleOrderDetail(<?= $order['id'] ?>)">
                            <span>Klik untuk melihat detail pesanan</span>
                            <i class="fa fa-chevron-down order-card__toggle-icon" id="toggle-icon-<?= $order['id'] ?>"></i>
                        </button>
                    </div>

                    <div class="order-card__actions">
                        <?php if ($order['status'] == "Dikirim"): ?>
                            <button class="btn btn--outline btn--small"
                                onclick="copyResiNumber('<?= $order['no_resi'] ?>')"
                                title="Salin nomor resi JNE">
                                <i data-feather="copy" class="btn-icon"></i>
                                Copy No. Resi JNE
                            </button>
                            <button class="btn btn--outline btn--small"
                                onclick="openComplainModal(<?= $order['id'] ?>)">
                                <i data-feather="message-square" class="btn-icon"></i>
                                Klaim Garansi
                            </button>
                            <button class="btn btn--primary btn--small"
                                onclick="openFinishOrderModal(<?= $order['id'] ?>)">
                                <i data-feather="check-circle" class="btn-icon"></i>
                                Selesai
                            </button>
                        <?php elseif ($order['status'] == "Belum Dibayar"): ?>
                            <button class="btn btn--primary"
                                onclick="openConfirmPaymentModal(<?= $order['id'] ?>)">
                                <i data-feather="upload" class="btn-icon"></i>
                                Upload Bukti Pembayaran
                            </button>
                        <?php elseif ($order['status'] == "Selesai"): ?>
                            <button class="btn btn--outline btn--small"
                                onclick="openComplainModal(<?= $order['id'] ?>)">
                                <i data-feather="message-square" class="btn-icon"></i>
                                Klaim Garansi
                            </button>
                            <button class="btn btn--primary"
                                onclick="generateInvoice(<?= $order['id'] ?>)">
                                <i data-feather="printer" class="btn-icon"></i>
                                Cetak Invoice
                            </button>
                        <?php elseif ($order['status'] == "Sudah Dibayar" || $order['status'] == "Diproses"): ?>
                            <span class="order-card__processing-text"><i data-feather="clock" class="btn-icon"></i>Pesanan Lagi Diproses</span>
                        <?php elseif ($order['status'] == "Komplain"): ?>
                            <span class="order-card__claim-text">
                                <i data-feather="clock" class="btn-icon"></i><?= ucwords(lang('complaintdescstatus')); ?> <?= number_format($order['claim_credit']); ?>
                            </span>
                        <?php endif; ?>
                    </div>
                </div>

                <!-- Order Details (Hidden by default) -->
                <div class="order-card__details" id="order-details-<?= $order['id'] ?>" style="display: none;">
                    <div class="order-details">
                        <h4 class="order-details__title">Detail Pesanan</h4>
                        <div class="order-details__grid">
                            <div class="order-details__item">
                                <span class="order-details__label">Subtotal:</span>
                                <span class="order-details__value">IDR <?= number_format($order['subtotal'], 0, ',', '.') ?></span>
                            </div>
                            <div class="order-details__item">
                                <span class="order-details__label">Biaya Ongkir:</span>
                                <span class="order-details__value <?= $order['shipping_fee'] <= 0 ? 'order-details__value--reward' : '' ?>">
                                    <?php if ($order['shipping_fee'] > 0): ?>
                                        IDR <?= number_format($order['shipping_fee'], 0, ',', '.'); ?>
                                    <?php else: ?>
                                        <i data-feather="truck" class="order-details__icon"></i> GRATIS ONGKIR
                                    <?php endif; ?>
                                </span>
                            </div>

                            <?php if ($order['redeemed_voucher_amount'] > 0): ?>
                                <div class="order-details__item">
                                    <span class="order-details__label">Diskon Voucher (<?= $order['redeemed_voucher_code'] ?>):</span>
                                    <span class="order-details__value order-details__value--discount">
                                        <i data-feather="tag" class="order-details__icon"></i>
                                        -IDR <?= number_format($order['redeemed_voucher_amount'], 0, ',', '.') ?></span>
                                </div>
                            <?php endif; ?>

                            <?php if ($order['minus_reward_amount'] > 0): ?>
                                <div class="order-details__item">
                                    <span class="order-details__label">Diskon Poin (<?= number_format($order['minus_reward']) ?> poin):</span>
                                    <span class="order-details__value order-details__value--discount">-IDR <?= number_format($order['minus_reward_amount'], 0, ',', '.') ?></span>
                                </div>
                            <?php endif; ?>

                            <?php if ($order['insurance_status'] == 'Yes'): ?>
                                <div class="order-details__item">
                                    <span class="order-details__label">Biaya Asuransi:</span>
                                    <span class="order-details__value">IDR <?= number_format($order['insurance_cost'], 0, ',', '.') ?></span>
                                </div>
                            <?php endif; ?>
                            <div class="order-details__item">
                                <span class="order-details__label">Total Belanja:</span>
                                <span class="order-details__value">IDR <?= number_format($order['total'], 0, ',', '.') ?></span>
                            </div>

                            <?php if ($order['plus_reward'] > 0): ?>
                                <div class="order-details__item">
                                    <span class="order-details__label">Poin yang Didapat:</span>
                                    <span class="order-details__value order-details__value--reward">
                                        <i data-feather="gift" class="order-details__icon"></i>
                                        +<?= number_format($order['plus_reward']) ?> poin</span>
                                </div>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
            </li>
        <?php endforeach; ?>
    </ul>

    <!-- Transaction List -->
    <!-- <ul class="transaction-list">
        <?php foreach ($orders as $order): ?>
            <li class="transaction-item" data-status="<?= $order['status_class'] ?>">
                <div class="transaction-header">
                    <span class="transaction-date"><?= $order['date'] ?></span>
                    <span class="transaction-status <?= $order['status_class'] ?>">
                        <?= ($order['payment_confirm'] == 1 && $order['status'] == 'Belum Dibayar') ? "Pembayaran Sedang Diverifikasi" : $order['status'] ?>
                    </span>
                    <span class="transaction-id">Order ID: <?= $order['id'] ?></span>
                </div>
                <?php foreach ($order['items'] as $item): ?>
                    <div class="transaction-detail">
                        <a href="<?= base_url('product/' . $item->alias) ?>">
                            <img src="<?= base_url('uploads/product/' . $item->image) ?>"
                                alt="<?= $item->item_name ?>"
                                class="transaction-product-thumbnail" />
                        </a>
                        <div class="transaction-product-details">
                            <span class="transaction-item-name"><a href="<?= base_url('product/' . $item->alias) ?>"><?= $item->item_name ?></a></span>
                            <span class="transaction-item-quantity"><?= $item->quantity ?> pcs x IDR <?= number_format($item->item_price) ?></span>
                        </div>
                    </div>
                <?php endforeach; ?>

                <p class="transaction-total">Total:<b> IDR <?= number_format($order['total']) ?></b></p>
                <div class="transaction-actions">
                    <?php if ($order['status'] == "Dikirim"): ?>
                        <button class="order-btn-copy-resi" onclick="copyResiNumber('<?= $order['no_resi'] ?>')" title="Salin nomor resi JNE">
                            <i class="fa fa-copy"></i> Copy No. Resi JNE
                        </button>
                        <button class="order-btn-complain" onclick="openComplainModal(<?= $order['id'] ?>)">
                            Complain
                        </button>
                        <button class="order-btn-finish" onclick="openFinishOrderModal(<?= $order['id'] ?>)">
                            Selesai
                        </button>
                    <?php elseif ($order['status'] == "Belum Dibayar"): ?>
                        <button class="order-btn-confirm" onclick="openConfirmPaymentModal(<?= $order['id'] ?>)">
                            Konfirmasi Pembayaran
                        </button>
                    <?php elseif ($order['status'] == "Selesai"): ?>
                        <button class="order-btn-confirm" onclick="generateInvoice(<?= $order['id'] ?>)">
                            Generate Invoice
                        </button>
                    <?php elseif ($order['status'] == "Sudah Dibayar" || $order['status'] == "Diproses"): ?>
                        <span>Pesanan Sedang Diproses</span>
                    <?php elseif ($order['status'] == "Komplain"): ?>
                        <?= ucwords(lang('complaintdescstatus')); ?> <?= number_format($order['claim_credit']); ?>
                    <?php endif; ?>
                </div>
            </li>
        <?php endforeach; ?>
    </ul> -->


    <!-- Finish Order Modal -->
    <div id="finishOrderModal" class="finish-order-modal hidden" inert>
        <div class="finish-order-modal-content" role="dialog" aria-labelledby="modalTitle" aria-describedby="modalDescription">
            <button class="finish-order-close-btn" aria-label="Close" onclick="closeFinishOrderModal()">&times;</button>
            <h2 id="modalTitle"><?= ucwords(lang('finishyourorder')); ?> #<span id="orderIdDisplay"></span></h2>
            <p id="modalDescription"><?= ucwords(lang('finishyourorderdesc')); ?></p>
            <div class="finish-order-modal-actions">
                <button class="finish-order-cancel-btn" onclick="closeFinishOrderModal()">Batal</button>
                <form id="finish-order-form" onsubmit="confirmFinishOrder(event)">
                    <input type="hidden" name="<?= $this->security->get_csrf_token_name(); ?>" value="<?= $this->security->get_csrf_hash(); ?>">
                    <input type="hidden" name="orderID" id="orderIDForm" value="">
                    <input type="hidden" name="new_status" value="8">
                    <button class="finish-order-confirm-btn" type="submit"><?= ucwords(lang('finishyourorder')); ?></button>
                </form>
            </div>
        </div>
    </div>

    <!-- Modal Complain -->
    <div id="order_history_complain_modal" class="order_history_modal hidden">
        <div class="order_history_modal_box">
            <div class="order_history_modal_header">
                <h3 id="order_history_modal_title">Complain Order</h3>
                <button class="order_history_modal_close" onclick="closeComplainModal()">×</button>
            </div>
            <div class="order_history_modal_body">
                <form id="order_history_complain_form" enctype="multipart/form-data">
                    <div class="order_history_form_group">
                        <label for="order_history_order_id">Order ID:</label>
                        <input type="text" id="order_history_order_id" name="orderID" readonly />
                    </div>
                    <div class="order_history_form_group">
                        <label>Order Details:</label>
                        <table class="order_history_table">
                            <thead>
                                <tr>
                                    <th>Item Name</th>
                                    <th>Quantity</th>
                                </tr>
                            </thead>
                            <tbody id="order_history_order_items">
                                <!-- Dynamic Content -->
                            </tbody>
                        </table>
                    </div>
                    <div class="order_history_form_group">
                        <label for="order_history_linkclaim">Link Video Unboxing:</label>
                        <input
                            type="text"
                            id="order_history_linkclaim"
                            name="linkclaim"
                            placeholder="Paste the video link here"
                            required />
                    </div>
                    <!-- <div class="order_history_form_group">
                    <label for="order_history_upload_proof">Upload Additional Proof:</label>
                    <input type="file" id="order_history_upload_proof" name="file_claim[]" multiple />
                    <p class="order_history_hint">
                        You can upload images or documents related to your complaint.
                    </p>
                </div> -->
                    <input type="hidden" name="new_status" value="9">
                    <button type="submit" class="order_history_btn_submit">Submit Complaint</button>
                </form>
            </div>
        </div>
    </div>

    <!-- Confirm Payment Modal -->
    <div id="confirmPaymentModal" class="confirm-payment-modal hidden" inert>
        <div class="confirm-payment-modal-content" role="dialog" aria-labelledby="confirmPaymentModalTitle" aria-describedby="confirmPaymentModalDescription">
            <button class="confirm-payment-close-btn" aria-label="Close" onclick="closeConfirmPaymentModal()">&times;</button>
            <h2 id="confirmPaymentModalTitle"><?= strtoupper(lang('payment_confirmation')) ?> #<span id="confirmPaymentModalOrderID"></span></h2>
            <p id="confirmPaymentModalDescription"><?= ucwords(lang('please_fill')); ?></p>
            <form id="confirm-payment-form">
                <input type="hidden" name="<?= $this->security->get_csrf_token_name(); ?>" value="<?= $this->security->get_csrf_hash(); ?>">

                <input type="hidden" name="order_id" value="">
                <div class="confirm-payment-form-group">
                    <label for="payment_date"><?= ucwords(lang('payment_date')); ?></label>
                    <input type="date" name="payment_date" id="payment_date" class="datepicker" value="<?= set_value('payment_date') ?>" required>
                </div>

                <div class="confirm-payment-form-group">
                    <label for="total_amount"><?= ucwords(lang('payment_amount')); ?> (IDR)</label>
                    <input type="number" name="total_amount" id="total_amount" value="<?= set_value('total_amount') ?>" required>
                </div>

                <div class="confirm-payment-form-group">
                    <label for="to_bank"><?= ucwords(lang('transfer_to')); ?></label>
                    <select id="to_bank" name="to_bank" required>
                        <option value="bca" selected>BCA</option>
                        <option value="mandiri">MANDIRI</option>
                    </select>
                </div>

                <div class="confirm-payment-form-group">
                    <label for="from_bank"><?= ucwords(lang('transfer_from')); ?></label>
                    <input type="text" name="from_bank" id="from_bank" value="<?= set_value('from_bank') ?>" required>
                </div>

                <div class="confirm-payment-form-group">
                    <label for="account_name"><?= ucwords(lang('from_account_name')); ?></label>
                    <input type="text" name="account_name" id="account_name" value="<?= set_value('account_name') ?>" required>
                </div>

                <div class="confirm-payment-form-group">
                    <label for="account_number"><?= ucwords(lang('from_account_number')); ?></label>
                    <input type="text" name="account_number" id="account_number" value="<?= set_value('account_number') ?>" required>
                </div>

                <div class="confirm-payment-form-group">
                    <label for="receipt_file">Bukti Pembayaran</label>
                    <input type="file" name="receipt_file" id="receipt_file" required>
                    <span class="file-tip"><?= lang('file_type_notice'); ?></span>
                </div>

                <div class="confirm-payment-form-actions">
                    <button type="submit" class="confirm-payment-submit-btn">
                        <span class="button-text"><?= ucwords(lang('confirm_payment')); ?></span>
                        <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
                    </button>
                </div>
            </form>
        </div>
    </div>

    <div class="modal-tracking-overlay" id="trackingModal">
        <div class="tracking-modal">
            <div class="modal-tracking-header">
                <h3>Detail Tracking Paket JNE</h3>
                <button class="close-tracking-modal" onclick="closeTrackingModal()">&times;</button>
            </div>
            <div class="modal-tracking-body" id="modalTrackingContent">
                <div class="loading-tracking-spinner">
                    <div class="spinner"></div>
                </div>
            </div>
        </div>
    </div>
    <style>
        /* Modal Styles */
        .modal-tracking-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s, visibility 0.3s;
        }

        .modal-tracking-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .tracking-modal {
            background-color: #fff;
            width: 90%;
            max-width: 600px;
            border-radius: 8px;
            overflow: hidden;
            transform: translateY(20px);
            transition: transform 0.3s;
        }

        .modal-tracking-overlay.active .tracking-modal {
            transform: translateY(0);
        }

        .modal-tracking-header {
            background-color: #7A4397;
            color: white;
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .modal-tracking-header h3 {
            margin: 0;
            font-size: 18px;
        }

        .close-tracking-modal {
            background: none;
            border: none;
            color: white;
            font-size: 24px;
            cursor: pointer;
        }

        .modal-tracking-body {
            padding: 20px;
            max-height: 70vh;
            overflow-y: auto;
        }

        /* Tracking Info Styles */
        .tracking-summary {
            background-color: #f9f9f9;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 20px;
        }

        .summary-row {
            display: flex;
            margin-bottom: 8px;
        }

        .summary-label {
            font-weight: bold;
            width: 120px;
            flex-shrink: 0;
        }

        .tracking-detail {
            display: flex;
            flex-wrap: wrap;
            background-color: #f9f9f9;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 20px;
        }

        .detail-item {
            width: 50%;
            margin-bottom: 8px;
        }

        .detail-label {
            font-weight: bold;
            display: block;
            font-size: 13px;
            color: #666;
        }

        .tracking-history {
            margin-top: 20px;
        }

        .history-title {
            font-weight: bold;
            margin-bottom: 15px;
            padding-bottom: 5px;
            border-bottom: 1px solid #ddd;
        }

        .history-item {
            padding: 15px;
            border-left: 2px solid #7A4397;
            position: relative;
            margin-left: 15px;
            margin-bottom: 15px;
        }

        .history-item:before {
            content: '';
            position: absolute;
            left: -8px;
            top: 0;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background-color: #7A4397;
        }

        .history-item:last-child {
            border-color: #999;
        }

        .history-item:last-child:before {
            background-color: #999;
        }

        .history-date {
            font-weight: bold;
            margin-bottom: 5px;
            color: #7A4397;
        }

        .history-item:last-child .history-date {
            color: #999;
        }

        .history-desc {
            font-size: 14px;
        }

        /* Loading Spinner */
        .loading-tracking-spinner {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 30px;
        }

        .spinner {
            width: 40px;
            height: 40px;
            border: 4px solid rgba(0, 0, 0, 0.1);
            border-radius: 50%;
            border-top-color: #7A4397;
            animation: spin 1s ease-in-out infinite;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        @keyframes slide-in {
            from {
                transform: translateX(100%);
                opacity: 0;
            }

            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        @keyframes fade-out {
            from {
                opacity: 1;
            }

            to {
                opacity: 0;
            }
        }

        /* Responsive Styles */
        @media (max-width: 768px) {
            .detail-item {
                width: 100%;
            }

            .copy-notification {
                right: 10px;
                bottom: 10px;
                max-width: calc(100% - 20px);
            }

            .tracking-modal {
                width: 95%;
                max-height: 90vh;
            }

            .modal-tracking-body {
                max-height: 65vh;
            }
        }
    </style>
</div>

<style>
    .confirm-payment-submit-btn {
        position: relative;
        min-width: 160px;
    }

    .confirm-payment-submit-btn:disabled {
        cursor: not-allowed;
        opacity: 0.7;
    }

    .spinner-border {
        margin-left: 8px;
    }

    /* Style untuk tombol Copy No. Resi */

    .order-btn-copy-resi {
        width: 175px;
        border: 1px solid #333;
        background-color: #ffffff;
        color: #333;
        font-size: 14px;
        padding: 10px;
        border-radius: 5px;
        cursor: pointer;
        font-weight: 500;
    }

    .order-btn-copy-resi i {
        margin-right: 6px;
    }

    /* Style untuk notifikasi copy */
    .copy-notification {
        position: fixed;
        bottom: 20px;
        left: 20px;
        right: 20px;
        background-color: #fff;
        border-left: 4px solid #4CAF50;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        padding: 16px;
        border-radius: 8px;
        display: flex;
        align-items: flex-start;
        box-sizing: border-box;
        z-index: 9999;
        animation: slide-in 0.3s ease-out;
        transition: all 0.3s ease;
        max-width: 100%;
    }

    .success-icon {
        background-color: #4CAF50;
        color: white;
        border-radius: 50%;
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 12px;
        font-size: 16px;
        flex-shrink: 0;
    }

    .notification-content {
        flex-grow: 1;
        overflow-wrap: break-word;
    }

    .notification-content p {
        margin: 0 0 6px 0;
        color: #333;
        font-size: 14px;
        line-height: 1.4;
    }

    .resi-info {
        font-size: 13px;
        color: #666;
    }

    .track-link {
        display: inline-block;
        text-decoration: none;
        color: #1976D2;
        margin-top: 6px;
        font-size: 13px;
        font-weight: 500;
        padding: 6px 10px;
        background-color: #E3F2FD;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.2s ease;
        border: none;
    }

    .track-link:hover {
        background-color: #BBDEFB;
    }

    .fade-out {
        animation: fade-out 0.5s ease-in forwards;
    }

    @keyframes slide-in {
        from {
            transform: translateY(100%);
            opacity: 0;
        }

        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    @keyframes fade-out {
        from {
            opacity: 1;
        }

        to {
            opacity: 0;
        }
    }

    @media (min-width: 480px) {
        .copy-notification {
            left: auto;
            right: 20px;
            max-width: 350px;
        }
    }
</style>

<script>
    document.addEventListener("DOMContentLoaded", () => {
        const searchInput = document.getElementById("order-search");
        const filterButtons = document.querySelectorAll(".order-filter-btn");
        const orderHistoryList = document.getElementById("orderHistoryList");

        // Debounce function for search
        const debounce = (fn, delay) => {
            let timeoutId;
            return (...args) => {
                clearTimeout(timeoutId);
                timeoutId = setTimeout(() => fn.apply(this, args), delay);
            };
        };

        // Filter function
        const filterTransactions = (status) => {
            const items = orderHistoryList.querySelectorAll(".order-card");

            items.forEach(item => {
                const itemStatus = item.dataset.status;

                // Show all
                if (status === "all") {
                    item.style.display = "block";
                    return;
                }

                // Group status for 'Berlangsung'
                if (status === "in-progress" && ["processed", "paid", "halfpaid"].includes(itemStatus)) {
                    item.style.display = "block";
                    return;
                }

                // Status 'pending' remains the same
                if (status === "pending" && ["pending"].includes(itemStatus)) {
                    item.style.display = "block";
                    return;
                }

                // Status 'sent' now includes items with status 'sent' (status 4 with resi)
                if (status === "sent" && ["sent"].includes(itemStatus)) {
                    item.style.display = "block";
                    return;
                }

                // Status 'selesai' now includes items with status 'selesai' (status 5 and 8)
                if (status === "selesai" && ["selesai"].includes(itemStatus)) {
                    item.style.display = "block";
                    return;
                }

                // Status 'batal' remains the same
                if (status === "batal" && ["batal"].includes(itemStatus)) {
                    item.style.display = "block";
                    return;
                }

                // Hide if no match
                item.style.display = "none";
            });
        };

        // Search function
        const searchTransactions = debounce((query) => {
            const items = orderHistoryList.querySelectorAll(".order-card");
            const searchQuery = query.toLowerCase();

            items.forEach(item => {
                const itemDetails = Array.from(item.querySelectorAll(".order-item__details .order-item__name"));
                const orderId = item.querySelector(".order-card__id")?.textContent.toLowerCase();

                const matchesItemName = itemDetails.some(detail =>
                    detail.textContent.toLowerCase().includes(searchQuery)
                );
                const shouldShow = matchesItemName || orderId?.includes(searchQuery);

                item.style.display = shouldShow ? "block" : "none";
            });
        }, 300);


        // Event Listeners
        filterButtons.forEach(btn => {
            btn.addEventListener("click", (e) => {
                // Remove 'active' class from all buttons and set it for the clicked button
                filterButtons.forEach(b => b.classList.remove("active"));
                btn.classList.add("active");

                // Call filter function based on data-status attribute
                const status = btn.dataset.status;
                filterTransactions(status);
            });
        });

        searchInput.addEventListener("input", (e) => {
            searchTransactions(e.target.value);
        });

        document.querySelectorAll('.order_history_quantity_input').forEach((input) => {
            input.addEventListener('input', function() {
                if (parseInt(this.value, 10) > parseInt(this.max, 10)) {
                    alert(`Max quantity is ${this.max}`);
                    this.value = this.max;
                }
            });
        });

        let CSRF_TOKEN = "<?= $this->security->get_csrf_hash(); ?>";
        const CSRF_NAME = "<?= $this->security->get_csrf_token_name(); ?>";
        document
            .getElementById("order_history_complain_form")
            .addEventListener("submit", function(e) {
                e.preventDefault();

                const formData = new FormData(this);
                formData.append(CSRF_NAME, CSRF_TOKEN);
                fetch(`${BASE_URL}account/komplain_pesanan`, {
                        method: "POST",
                        body: formData,
                    })
                    .then((response) => response.json())
                    .then((data) => {
                        if (data.status === "success") {
                            alert(data.message);
                            closeComplainModal();
                            CSRF_TOKEN = data.csrf_token;
                            location.reload();
                        } else {
                            alert(data.message);
                        }
                    })
                    .catch((error) => {
                        console.error("Error processing complaint:", error);
                        alert("Failed to submit complaint. Please try again.");
                    });
            });


    });

    // Fungsi untuk menyalin nomor resi
    function copyResiNumber(resiNumber) {
        // Buat elemen temporary untuk menyimpan text
        const tempInput = document.createElement("input");
        document.body.appendChild(tempInput);
        tempInput.value = resiNumber;
        tempInput.select();
        document.execCommand("copy");
        document.body.removeChild(tempInput);

        // Tampilkan notifikasi
        showCopyNotification(resiNumber);
    }

    // Fungsi untuk menampilkan notifikasi bahwa nomor resi telah disalin
    function showCopyNotification(resiNumber) {
        const notification = document.createElement("div");
        notification.className = "copy-notification";
        notification.innerHTML = `
            <div class="success-icon">✓</div>
            <div class="notification-content">
                <p>Nomor Resi JNE berhasil disalin!</p>
                <p class="resi-info">Nomor resi <strong>${resiNumber}</strong> dapat dilacak dengan mengklik tombol dibawah ini</p>
                <button class="track-link" onclick="trackPackage('${resiNumber}')">Lacak Paket</button>
            </div>
        `;

        document.body.appendChild(notification);

        setTimeout(() => {
            notification.classList.add("fade-out");
            setTimeout(() => {
                document.body.removeChild(notification);
            }, 500);
        }, 5000);
    }


    function openTrackingModal() {
        document.getElementById('trackingModal').classList.add('active');
    }

    // Fungsi untuk menutup modal
    function closeTrackingModal() {
        document.getElementById('trackingModal').classList.remove('active');
    }

    function trackPackage(resiNumber) {
        // Tampilkan modal dengan loading spinner
        openTrackingModal();

        const modalTrackingContent = document.getElementById('modalTrackingContent');
        modalTrackingContent.innerHTML = `
                <div class="loading-tracking-spinner">
                    <div class="spinner"></div>
                </div>
            `;

        // URL API lacak paket
        const API_KEY = '<?= $api_key ?>';
        const apiUrl = `https://api.binderbyte.com/v1/track?api_key=${API_KEY}&courier=jne&awb=${resiNumber}`;

        // Fetch data dari API
        fetch(apiUrl)
            .then(response => response.json())
            .then(data => {
                if (data.status === 200) {
                    displayTrackingResult(data);
                } else {
                    modalTrackingContent.innerHTML = `
                            <div class="error-message">
                                <p>Gagal mendapatkan informasi tracking.</p>
                                <p>${data.message || 'Silakan coba lagi nanti.'}</p>
                            </div>
                        `;
                }
            })
            .catch(error => {
                console.error('Error fetching tracking info:', error);
                modalTrackingContent.innerHTML = `
                        <div class="error-message">
                            <p>Terjadi kesalahan saat mengambil data tracking.</p>
                            <p>Silakan coba lagi nanti.</p>
                        </div>
                    `;
            });
    }

    function displayTrackingResult(data) {
        const trackingInfo = data.data;
        const modalTrackingContent = document.getElementById('modalTrackingContent');

        // Format tanggal ke format Indonesia
        function formatDate(dateString) {
            const options = {
                year: 'numeric',
                month: 'long',
                day: 'numeric',
                hour: '2-digit',
                minute: '2-digit'
            };
            return new Date(dateString).toLocaleDateString('id-ID', options);
        }

        // Tampilkan hasil tracking
        let html = `
                <div class="tracking-summary">
                    <div class="summary-row">
                        <span class="summary-label">No. Resi:</span>
                        <span>${trackingInfo.summary.awb}</span>
                    </div>
                    <div class="summary-row">
                        <span class="summary-label">Kurir:</span>
                        <span>${trackingInfo.summary.courier}</span>
                    </div>
                    <div class="summary-row">
                        <span class="summary-label">Layanan:</span>
                        <span>${trackingInfo.summary.service || '-'}</span>
                    </div>
                    <div class="summary-row">
                        <span class="summary-label">Status:</span>
                        <span><strong>${trackingInfo.summary.status}</strong></span>
                    </div>
                    <div class="summary-row">
                        <span class="summary-label">Tanggal Update:</span>
                        <span>${formatDate(trackingInfo.summary.date)}</span>
                    </div>
                    ${trackingInfo.summary.weight ? `
                    <div class="summary-row">
                        <span class="summary-label">Berat:</span>
                        <span>${trackingInfo.summary.weight}</span>
                    </div>` : ''}
                </div>
                
                <div class="tracking-detail">
                    <div class="detail-item">
                        <span class="detail-label">Pengirim</span>
                        <span>${trackingInfo.detail.shipper}</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">Penerima</span>
                        <span>${trackingInfo.detail.receiver}</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">Asal</span>
                        <span>${trackingInfo.detail.origin}</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">Tujuan</span>
                        <span>${trackingInfo.detail.destination}</span>
                    </div>
                </div>
                
                <div class="tracking-history">
                    <h4 class="history-title">Riwayat Pengiriman</h4>
            `;

        // Tampilkan riwayat pengiriman
        trackingInfo.history.forEach((item, index) => {
            html += `
                    <div class="history-item">
                        <div class="history-date">${formatDate(item.date)}</div>
                        <div class="history-desc">${item.desc}</div>
                        ${item.location ? `<div class="history-location">${item.location}</div>` : ''}
                    </div>
                `;
        });

        html += `</div>`;

        modalTrackingContent.innerHTML = html;
    }

    // Event listener untuk menutup modal ketika mengklik overlay
    document.getElementById('trackingModal').addEventListener('click', function(e) {
        if (e.target === this) {
            closeTrackingModal();
        }
    });

    function openConfirmPaymentModal(orderId) {
        const modal = document.getElementById('confirmPaymentModal');
        const form = document.getElementById('confirm-payment-form');
        const formOrderID = document.getElementById('confirmPaymentModalOrderID');

        formOrderID.textContent = orderId;
        modal.classList.remove('hidden');
        modal.setAttribute('aria-hidden', 'false');
        modal.removeAttribute('inert');
        form.querySelector('input[name="order_id"]').value = orderId;
    }

    function closeConfirmPaymentModal() {
        const modal = document.getElementById('confirmPaymentModal');
        modal.classList.add('hidden');
        modal.setAttribute('aria-hidden', 'true');
        modal.setAttribute('inert', '');
    }



    const closeComplainModal = () => {
        document.getElementById("order_history_complain_form").reset();
        document.getElementById("order_history_complain_modal").classList.add("hidden");
    };


    const openComplainModal = (orderId) => {
        const complainModal = document.getElementById("order_history_complain_modal");
        const orderIdField = document.getElementById("order_history_order_id");
        const orderItemsContainer = document.getElementById("order_history_order_items");

        // Tampilkan modal
        complainModal.classList.remove("hidden");

        // Isi Order ID di form
        orderIdField.value = orderId;

        // Hapus konten lama dari tabel items
        orderItemsContainer.innerHTML = "<tr><td colspan='2'>Loading...</td></tr>";

        const BASE_URL = "<?= base_url(); ?>";

        // Ambil data item dari server
        fetch(`${BASE_URL}account/getOrderItemsJSON/${orderId}`)
            .then((response) => response.json())
            .then((data) => {
                if (data.length > 0) {
                    const itemsHTML = data
                        .map(
                            (item) => `
                                <tr class="order_history_item_row">
                                    <td class="order_history_item_image">
                                        <figure class="order_history_figure">
                                            <img 
                                                src="${BASE_URL}/uploads/product/${item.image}" 
                                                alt="${item.item_name}" 
                                                class="order_history_item_thumbnail"
                                            />
                                            <figcaption class="order_history_item_name">
                                                ${item.item_name}
                                            </figcaption>
                                        </figure>
                                    </td>
                                    <td class="order_history_item_quantity">
                                        <label for="quantity_${item.id_orders_detail}" class="order_history_quantity_label">
                                        </label>
                                        <input 
                                            type="number" 
                                            id="quantity_${item.id_orders_detail}" 
                                            name="quantity[${item.id_orders_detail}]" 
                                            value="${item.quantity}" 
                                            min="1" 
                                            max="${item.quantity}"
                                            class="order_history_quantity_input"
                                        />
                                    </td>
                                </tr>
                            `
                        )
                        .join("");
                    orderItemsContainer.innerHTML = itemsHTML;
                } else {
                    orderItemsContainer.innerHTML = `
                        <tr>
                            <td colspan="2" class="order_history_empty_row">
                                <p class="order_history_empty_text">No items found</p>
                            </td>
                        </tr>
                    `;
                }
            })
            .catch((error) => {
                console.error("Error fetching order items:", error);
                orderItemsContainer.innerHTML = `
                    <tr>
                        <td colspan="2" class="order_history_error_row">
                            <p class="order_history_error_text">Failed to load items</p>
                        </td>
                    </tr>
                `;
            });

    };

    function openFinishOrderModal(orderId) {
        const modal = document.getElementById('finishOrderModal');
        const orderIdDisplay = document.getElementById('orderIdDisplay');
        const orderIdForm = document.getElementById('orderIDForm');

        // Set the order ID in the modal and form
        modal.dataset.orderId = orderId;
        orderIdDisplay.textContent = orderId;
        orderIdForm.value = orderId;

        // Show modal and manage accessibility
        modal.classList.remove('hidden');
        modal.setAttribute('aria-hidden', 'false');
        modal.removeAttribute('inert');
    }

    function closeFinishOrderModal() {
        const modal = document.getElementById('finishOrderModal');

        // Hide modal and re-enable inert for accessibility
        modal.classList.add('hidden');
        modal.setAttribute('aria-hidden', 'true');
        modal.setAttribute('inert', '');
    }

    function confirmFinishOrder(event) {
        event.preventDefault(); // Prevent default form submission

        const form = document.getElementById('finish-order-form');
        const formData = new FormData(form);

        // Get base URL from PHP
        const BASE_URL = "<?= base_url(); ?>";

        // Send request using fetch
        fetch(BASE_URL + 'account/ubah_status_pesanan', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    alert(data.message);
                    window.location.reload();
                } else {
                    alert(data.message);
                }

                // Update CSRF token if needed
                form.querySelector('input[name="<?= $this->security->get_csrf_token_name(); ?>"]').value = data.csrf_token;
            })
            .catch(error => {
                console.error('Error:', error);
            });

        // Close modal after submission
        closeFinishOrderModal();
    }

    function toggleOrderDetail(orderId) {
        const detailsElement = document.getElementById('order-details-' + orderId);
        const iconElement = document.getElementById('toggle-icon-' + orderId);

        if (detailsElement.style.display === 'none' || detailsElement.style.display === '') {
            detailsElement.style.display = 'block';
            iconElement.classList.add('rotated');
        } else {
            detailsElement.style.display = 'none';
            iconElement.classList.remove('rotated');
        }
    }

    function generateInvoice(orderId) {
        window.location.href = '<?= base_url() ?>Account/generate_invoice/' + orderId;
    }

    const notyf = new Notyf({
        duration: 2000,
        position: {
            x: 'right',
            y: 'top'
        },
        types: [{
                type: 'success',
                background: '#7A4397',
                icon: {
                    className: 'fas fa-check',
                    tagName: 'i',
                    color: 'white'
                }
            },
            {
                type: 'error',
                background: '#dc3545',
                icon: {
                    className: 'fas fa-times',
                    tagName: 'i',
                    color: 'white'
                }
            }
        ]
    });
    $(document).on('submit', '#confirm-payment-form', function(e) {
        e.preventDefault(); // Prevent the default form submission

        // Get form data
        var formData = new FormData(this);

        // Send AJAX request
        $.ajax({
            url: '<?= base_url('account/update_paymentconfirmation') ?>',
            type: 'POST',
            data: formData,
            dataType: 'json',
            processData: false,
            contentType: false,
            beforeSend: function() {
                const $btn = $('.confirm-payment-submit-btn');
                const $text = $btn.find('.button-text');
                const $spinner = $btn.find('.spinner-border');

                $btn.prop('disabled', true);
                $text.text('Processing...');
                $spinner.removeClass('d-none');
            },
            success: function(response) {
                const $btn = $('.confirm-payment-submit-btn');
                const $text = $btn.find('.button-text');
                const $spinner = $btn.find('.spinner-border');

                $btn.prop('disabled', false);
                $text.text('<?= ucwords(lang('confirm_payment')); ?>');
                $spinner.addClass('d-none');

                notyf.success('Payment confirmation successful!');
                setTimeout(() => {
                    window.location.reload();
                }, 2000);
            },
            error: function(xhr, status, error) {
                const $btn = $('.confirm-payment-submit-btn');
                const $text = $btn.find('.button-text');
                const $spinner = $btn.find('.spinner-border');

                $btn.prop('disabled', false);
                $text.text('<?= ucwords(lang('confirm_payment')); ?>');
                $spinner.addClass('d-none');

                notyf.error('An error occurred. Please try again.');
            }
        });
    });
</script>