<div class="reservation-card-grid">
    <?php $total_item = $total_amount = 0; ?>
    <?php foreach ($order_list as $key => $row): ?>
        <?php
        // Status Class mapping
        $status_class = '';
        $status_text = '';
        if ($row['status'] == 0) {
            $status_class = 'status-pending';
            $status_text = lang('pending');
        } elseif ($row['status'] == 1) {
            $status_class = 'status-accepted';
            $status_text = lang('accepted');
        } elseif ($row['status'] == 2) {
            $status_class = 'status-completed';
            $status_text = lang('completed');
        } elseif ($row['status'] == 3) {
            $status_class = 'status-canceled';
            $status_text = lang('canceled');
        }

        // Initials Avatar
        $name = !empty($row['name']) ? $row['name'] : 'Guest';
        $name_parts = explode(' ', $name);
        $initials = strtoupper(substr($name_parts[0], 0, 1) . (isset($name_parts[1]) ? substr($name_parts[1], 0, 1) : ''));
        ?>

        <div class="reservation-item-card <?= $status_class; ?>">
            <div class="card-header-top">
                <div class="order-id">#<?= html_escape($row['uid']); ?></div>
                <div class="status-badge-modern"><?= $status_text; ?></div>
            </div>

            <div class="customer-profile">
                <div class="avatar-initials"><?= $initials; ?></div>
                <div class="profile-details">
                    <div class="name"><?= html_escape($name); ?></div>
                    <div class="contact-links">
                        <a href="tel:<?= $row['phone']; ?>"><i class="fa fa-phone"></i> <?= $row['phone']; ?></a>
                        <?php if (!empty($row['email'])): ?>
                            <a href="mailto:<?= $row['email']; ?>"><i class="fa fa-envelope-o"></i></a>
                        <?php endif; ?>
                    </div>
                    <?php if ($row['is_pos'] == 1): ?>
                        <div class="badge-mini bg-purple-soft mt-5"><?= lang('pos'); ?></div>
                    <?php endif ?>
                </div>
            </div>

            <div class="reservation-meta mt-15">
                <!-- Order Type, Table & Pickup Time -->
                <div class="meta-row order-type-row">
                    <i class="icofont-food-cart"></i>
                    <span class="type-badge"><?= order_type($row['order_type']); ?></span>
                    <?php if (!empty($row['table_no'])): ?>
                        <span class="table-info text-success fz-12"><i class="icofont-restaurant"></i>
                            <?= __table($row['table_no'])->name; ?></span>
                    <?php endif; ?>
                    <?php if ($row['order_type'] == 4 && !empty($row['pickup_time'])): ?>
                        <span class="text-warning fz-12"><i class="fa fa-clock-o"></i>
                            <?= slot_time_format($row['pickup_time'], restaurant()->id); ?></span>
                    <?php endif; ?>
                </div>

                <!-- Payment Status & Type -->
                <div class="meta-row payment-info">
                    <i class="icofont-credit-card"></i>
                    <span>
                        <?php if ($row['is_payment'] == 1): ?>
                            <span class="activeColor fw-bold"><i class="fa fa-check"></i> <?= lang('paid'); ?>
                                (<?= $row['payment_by']; ?>)</span>
                        <?php else: ?>
                            <?= lang('pay_cash'); ?>
                        <?php endif; ?>
                    </span>
                </div>

                <!-- Price Summary Item (Qty & Total Horizontal) -->
                <div class="price-summary-row">
                    <div class="price-item">
                        <span class="label"><?= lang('qty'); ?></span>
                        <span class="value"><?= $row['total_item']; ?></span>
                    </div>
                    <div class="price-item">
                        <span class="label"><?= lang('total'); ?></span>
                        <span class="value"><?= currency_position($row['total'], restaurant()->id); ?></span>
                    </div>
                </div>

                <!-- Preparation Status (when accepted) -->
                <?php if ($row['status'] == 1): ?>
                    <?php if ($row['estimate_time'] > d_time()): ?>
                        <div class="meta-row preparation-info">
                            <i class="fa fa-hourglass-half"></i>
                            <label class="label default-light">
                                <?= lang('prepared_time'); ?> : <?= $row['es_time'] . ' ' . lang($row['time_slot']); ?>
                            </label>
                            <?php if ($row['is_preparing'] == 2): ?>
                                <label class="label default-light-active"><?= lang('prepared_finish'); ?></label>
                            <?php else: ?>
                                <div id="show_time_<?= $row['id']; ?>" class="get_time text-warning fz-11"
                                    data-time="<?= $row['estimate_time']; ?>" data-id="<?= $row['id']; ?>"></div>
                            <?php endif; ?>
                        </div>
                    <?php endif; ?>
                <?php endif; ?>
            </div>

            <div class="card-footer-actions">
                <div class="time-info">
                    <i class="icofont-clock-time"></i> <?= get_time_ago($row['created_at'], restaurant()->id); ?>
                </div>

                <div class="actions">
                    <?php include 'actionBtn.php'; ?>
                </div>
            </div>

            <?php if ($row['is_order_merge'] == 1): ?>
                <div class="merge-indicator">
                    <i class="fa fa-exchange"></i> <?= lang('order_merged'); ?>
                </div>
            <?php endif ?>

            <?php if (!empty($row['customer_rating'])): ?>
                <div class="rating-stars-modern">
                    <?php for ($i = 1; $i <= 5; $i++): ?>
                        <i class="fa <?= $i <= $row['customer_rating'] ? "fa-star" : "fa-star-o"; ?>"></i>
                    <?php endfor; ?>
                </div>
            <?php endif; ?>
        </div>

        <?php $total_amount += (float) $row['total']; ?>
    <?php endforeach; ?>
</div>

<?php // End of Grid View ?>

<style>
    .order-id {
        font-weight: 700;
        color: var(--primary-color);
        font-size: 16px;
    }

    .badge-mini {
        font-size: 10px;
        padding: 2px 8px;
        border-radius: 4px;
        display: inline-block;
    }

    .meta-pill {
        background: var(--background-soft);
        padding: 5px 12px;
        border-radius: 20px;
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
    }

    /* Enhanced Grid Card Styling */
    .reservation-meta .meta-row {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
        margin-bottom: 8px;
    }

    .order-type-row {
        padding: 6px 0;
        border-bottom: 1px dashed var(--border-color, rgba(0, 0, 0, 0.05));
        margin-bottom: 12px !important;
    }

    .order-type-row .type-badge {
        font-weight: 800;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        background: var(--primaryColor-soft, rgba(0, 123, 255, 0.1));
        color: var(--primaryColor, #007bff);
        padding: 4px 10px;
        border-radius: 6px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

    .theme-dark .order-type-row .type-badge {
        background: var(--primaryColor, #007bff);
        color: #fff;
    }

    /* Light theme card soft backgrounds per status */
    .theme-light .reservation-item-card.status-pending {
        background: var(--primary-color-soft, rgba(0, 123, 255, 0.03));
        border: 1px solid rgba(0, 123, 255, 0.1);
    }

    .theme-light .reservation-item-card.status-accepted {
        background: rgba(0, 123, 255, 0.03);
        border: 1px solid rgba(0, 123, 255, 0.1);
    }

    .theme-light .reservation-item-card.status-completed {
        background: rgba(40, 167, 69, 0.04);
        border: 1px solid rgba(40, 167, 69, 0.15);
    }

    .theme-light .reservation-item-card.status-canceled {
        background: rgba(220, 53, 69, 0.04);
        border: 1px solid rgba(220, 53, 69, 0.15);
    }

    .price-summary-row {
        background: var(--background-soft, rgba(0, 0, 0, 0.02));
        padding: 10px;
        border-radius: 8px;
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
    }

    .price-summary-row .price-item .label {
        font-weight: 500;
        opacity: 0.8;
        margin-right: 4px;
    }

    .price-summary-row .price-item .value {
        font-weight: 700;
        color: var(--primaryColor, #007bff);
    }

    .meta-pill.primary {
        background: var(--primary-color-soft);
        color: var(--primary-color);
    }

    .meta-pill .label {
        opacity: 0.7;
        font-weight: 500;
    }

    .meta-pill .value {
        font-weight: 700;
    }

    .meta-row-group {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    .merge-indicator {
        position: absolute;
        top: 40px;
        right: 20px;
        font-size: 10px;
        color: var(--primary-color);
        background: var(--primary-color-soft);
        padding: 2px 8px;
        border-radius: 4px;
    }

    .rating-stars-modern {
        position: absolute;
        bottom: 85px;
        right: 20px;
        color: #ffc107;
        font-size: 12px;
    }

    .reservation-item-card {
        position: relative;
        overflow: visible;
    }

    /* Customizing Dropdown for modern card */
    .card-footer-actions .dropdown-menu {
        border: none !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
        border-radius: 12px;
        padding: 8px;
        min-width: 180px;
        z-index: 9999 !important;
    }
</style>