<div class="reservation-dashboard-wrapper">
    <!-- Filter Section -->
    <div class="modern-filter-panel mb-20">
        <div class="filter-header" onclick="$('.filter-body-collapse').slideToggle()">
            <div class="left">
                <i class="icofont-filter"></i>
                <span><?= lang('filter_reservations'); ?></span>
            </div>
            <div class="right">
                <i class="fa fa-angle-down"></i>
            </div>
        </div>
        <div class="filter-body-collapse" style="<?= (isset($_GET['uid']) || isset($_GET['name']) || isset($_GET['status']) || isset($_GET['daterange'])) ? '' : 'display:none;'; ?>">
            <form action="" method="get" class="modern-filter-form">
                <div class="filter-grid">
                    <div class="form-group">
                        <label><?= lang('order_id'); ?></label>
                        <input type="text" name="uid" class="form-control" value="<?= isset($_GET['uid']) ? $_GET['uid'] : ''; ?>" placeholder="Ex: #12345">
                    </div>
                    <div class="form-group">
                        <label><?= lang('customer_name'); ?></label>
                        <input type="text" name="name" class="form-control" value="<?= isset($_GET['name']) ? $_GET['name'] : ''; ?>" placeholder="<?= lang('name'); ?> / <?= lang('phone'); ?>">
                    </div>
                    <div class="form-group">
                        <label><?= lang('status'); ?></label>
                        <select name="status" class="form-control select2">
                            <option value='all' <?= isset($_GET['status']) && $_GET['status'] == "all" ? "selected" : ''; ?>><?= lang('all_status'); ?></option>
                            <option value="pending" <?= isset($_GET['status']) && $_GET['status'] == "pending" ? "selected" : ''; ?>><?= lang('pending'); ?></option>
                            <option value="accepted" <?= isset($_GET['status']) && $_GET['status'] == "accepted" ? "selected" : ''; ?>><?= lang('accepted'); ?></option>
                            <option value="completed" <?= isset($_GET['status']) && $_GET['status'] == "completed" ? "selected" : ''; ?>><?= lang('completed'); ?></option>
                            <option value="rejected" <?= isset($_GET['status']) && $_GET['status'] == 'rejected' ? "selected" : ''; ?>><?= lang('rejected'); ?></option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label><?= lang('date_range'); ?></label>
                        <div class="input-group">
                            <input type="text" name="daterange" class="form-control dateranges" value="<?= isset($_GET['daterange']) ? $_GET['daterange'] : ''; ?>">
                            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        </div>
                    </div>
                </div>
                <div class="filter-actions mt-15">
                    <button type="submit" class="btn btn-primary"><i class="icofont-filter"></i> <?= lang('apply_filter'); ?></button>
                    <a href="<?= base_url('admin/restaurant/reservation_list'); ?>" class="btn btn-secondary"><?= lang('reset'); ?></a>
                </div>
            </form>
        </div>
    </div>

    <!-- Main Content Area -->
    <div id="list_load" class="reservation-grid-container">
        <div class="card modern-card">
            <div class="card-header border-none flex_between">
                <div class="left flex_between">
                    <h3 class="m-0 mr-20">
                        <i class="icofont-delivery-time text-primary"></i>
                        <?php if (isset($page_type) && $page_type == "All"): ?>
                            <?= __('all') ?>
                        <?php else: ?>
                            <?= __('todays_reservations') ?>
                        <?php endif; ?>
                    </h3>

                    <!-- View Switcher -->
                    <div class="view-switcher ml-20">
                        <button type="button" class="view-btn" data-view="grid" title="Grid View">
                            <i class="icofont-ui-v-card"></i>
                        </button>
                        <button type="button" class="view-btn" data-view="list" title="List View">
                            <i class="icofont-listine-dots"></i>
                        </button>
                    </div>
                </div>
                <div class="right-actions flex_between">
                    <?php if (isset($page_type) && $page_type == "All"): ?>
                        <a href="<?= base_url('admin/restaurant/todays_reservation'); ?>" class="btn btn-success-soft mr-10">
                            <i class="fa fa-calendar-check-o"></i> <?= lang('todays_reservations'); ?>
                        </a>
                    <?php else: ?>
                        <a href="<?= base_url('admin/restaurant/reservation_list'); ?>" class="btn btn-primary-soft mr-10">
                            <i class="fa fa-list"></i> <?= lang('all'); ?>
                        </a>
                    <?php endif; ?>
                    <a href="<?= base_url("admin/restaurant/new_reservation"); ?>" class="btn btn-primary">
                        <i class="fa fa-plus"></i> <?= lang('add_new') ?>
                    </a>
                </div>
            </div>

            <div class="card-body p-20">
                <?php if (empty($order_list)): ?>
                    <div class="empty-state text-center p-50">
                        <img src="<?= base_url('assets/frontend/images/empty_cart.png'); ?>" alt="No reservations" style="max-width: 150px; opacity: 0.5;">
                        <h4 class="mt-20 text-muted"><?= lang('no_reservations_found'); ?></h4>
                    </div>
                <?php else: ?>
                    <!-- Grid View -->
                    <div class="reservation-view-container grid-view">
                        <div class="reservation-card-grid">
                            <?php foreach ($order_list as $key => $row): ?>
                                <?php
                                $status_class = '';
                                $status_text = '';
                                if ($row['status'] == 0) {
                                    $status_class = $row['is_confirm'] == 1 ? 'status-confirmed' : 'status-pending';
                                    $status_text = $row['is_confirm'] == 1 ? lang('confirmed') : 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');
                                }

                                $name_parts = explode(' ', $row['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($row['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>
                                        </div>
                                    </div>

                                    <div class="reservation-meta">
                                        <!-- Reservation Timing -->
                                        <div class="meta-row payment-info">
                                            <i class="icofont-calendar"></i>
                                            <span><?= full_time($row['reservation_date'], restaurant()->id); ?></span>
                                        </div>

                                        <!-- Guest Info (Horizontal) -->
                                        <div class="price-summary-row">
                                            <div class="price-item">
                                                <span class="label"><?= lang('guests'); ?></span>
                                                <span class="value"><?= $row['total_person']; ?></span>
                                            </div>
                                            <div class="price-item">
                                                <span class="label"><?= lang('type'); ?></span>
                                                <span class="value"><?= single($row['reservation_type'], 'reservation_types')->name ?? 'General'; ?></span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="card-footer-actions">
                                        <div class="time-info">
                                            <i class="icofont-clock-time"></i> <?= get_time_ago($row['created_at']); ?>
                                        </div>
                                        
                                        <div class="actions">
                                             <a href="<?= base_url('admin/restaurant/edit_reservation/' . $row['uid'] . '/1'); ?>" title="<?= lang('edit'); ?>"><i class="fa fa-edit"></i></a>
                                            <div class="dropdown dropdown-modern" style="display:inline-block;">
                                                <span class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-cog"></i></span>
                                                <ul class="dropdown-menu dropdown-menu-right">
                                                    <?php if ($row['status'] == 0): ?>
                                                        <?php if ($row['is_confirm'] == 0): ?>
                                                            <li><a href="<?= base_url('admin/restaurant/reservation_order_status/' . $row['uid'] . '/1?is_confirm=1'); ?>"><i class="fa fa-check-circle"></i> <?= lang('confirm'); ?></a></li>
                                                        <?php endif; ?>
                                                        <li><a href="<?= base_url('admin/restaurant/reservation_order_status/' . $row['uid'] . '/1'); ?>"><i class="fa fa-check"></i> <?= lang('accept'); ?></a></li>
                                                    <?php endif; ?>

                                                    <?php if ($row['status'] == 0 || $row['status'] == 1): ?>
                                                        <li><a href="<?= base_url('admin/restaurant/reservation_order_status/' . $row['uid'] . '/2'); ?>"><i class="fa fa-check-square-o"></i> <?= lang('completed'); ?></a></li>
                                                    <?php endif; ?>

                                                    <?php if ($row['status'] == 0): ?>
                                                        <?php if (is_access('order-cancel') == 1): ?>
                                                            <li><a href="<?= base_url('admin/restaurant/reservation_order_status/' . $row['uid'] . '/3'); ?>" class="text-danger"><i class="fa fa-times-circle"></i> <?= lang('cancel'); ?></a></li>
                                                        <?php endif; ?>
                                                    <?php endif; ?>

                                                    <?php if ($row['status'] == 3 || $row['status'] == 2): ?>
                                                        <?php if (is_access('delete') == 1): ?>
                                                            <li class="divider"></li>
                                                            <li><a href="<?= base_url('admin/menu/delete/' . $row['id']); ?>" class="text-danger action_btn" data-msg="<?= lang('want_to_delete'); ?>"><i class="fa fa-trash"></i> <?= lang('delete'); ?></a></li>
                                                        <?php endif; ?>
                                                    <?php endif; ?>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    </div>

                    <!-- List View -->
                    <div class="reservation-view-container list-view">
                        <div class="table-responsive">
                            <table class="table modern-table modern-table-list">
                                <thead>
                                    <tr>
                                        <th><?= lang('id'); ?></th>
                                        <th><?= lang('customer'); ?></th>
                                        <th><?= lang('reservation_info'); ?></th>
                                        <th><?= lang('status'); ?></th>
                                        <th class="text-right"><?= lang('action'); ?></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php foreach ($order_list as $row): ?>
                                        <?php
                                        $status_class = '';
                                        $status_text = '';
                                        if ($row['status'] == 0) {
                                            $status_class = $row['is_confirm'] == 1 ? 'status-confirmed' : 'status-pending';
                                            $status_text = $row['is_confirm'] == 1 ? lang('confirmed') : 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');
                                        }
                                        ?>
                                        <tr class="<?= $status_class; ?>">
                                            <td class="font-bold" data-label="<?= lang('id'); ?>">#<?= html_escape($row['uid']); ?></td>
                                            <td data-label="<?= lang('customer'); ?>">
                                                <div class="table-customer">
                                                    <div class="customer-name"><?= html_escape($row['name']); ?></div>
                                                    <div class="customer-phone text-muted small"><?= $row['phone']; ?></div>
                                                </div>
                                            </td>
                                            <td data-label="<?= lang('reservation_info'); ?>">
                                                <div class="table-meta">
                                                    <div class="meta-date"><i class="fa fa-calendar-o mr-5"></i><?= full_time($row['reservation_date'], restaurant()->id); ?></div>
                                                    <div class="meta-persons text-muted small"><i class="fa fa-users mr-5"></i><?= $row['total_person']; ?> <?= lang('persons'); ?></div>
                                                </div>
                                            </td>
                                            <td data-label="<?= lang('status'); ?>">
                                                <span class="status-badge-modern <?= $status_class; ?>"><?= $status_text; ?></span>
                                            </td>
                                            <td class="text-right" data-label="<?= lang('action'); ?>">
                                                <div class="btn-group">
                                                    <a href="<?= base_url('admin/restaurant/edit_reservation/' . $row['uid'] . '/1'); ?>" class="btn btn-sm btn-light-soft" title="<?= lang('edit'); ?>">
                                                        <i class="fa fa-edit"></i>
                                                    </a>
                                                    <button type="button" class="btn btn-sm btn-light-soft dropdown-toggle" data-toggle="dropdown">
                                                        <i class="fa fa-cog"></i>
                                                    </button>
                                                    <ul class="dropdown-menu dropdown-menu-right">
                                                        <?php if ($row['status'] == 0): ?>
                                                            <?php if ($row['is_confirm'] == 0): ?>
                                                                <li><a href="<?= base_url('admin/restaurant/reservation_order_status/' . $row['uid'] . '/1?is_confirm=1'); ?>"><i class="fa fa-check-circle"></i> <?= lang('confirm'); ?></a></li>
                                                            <?php endif; ?>
                                                            <li><a href="<?= base_url('admin/restaurant/reservation_order_status/' . $row['uid'] . '/1'); ?>"><i class="fa fa-check"></i> <?= lang('accept'); ?></a></li>
                                                        <?php endif; ?>
                                                        <?php if ($row['status'] == 0 || $row['status'] == 1): ?>
                                                            <li><a href="<?= base_url('admin/restaurant/reservation_order_status/' . $row['uid'] . '/2'); ?>"><i class="fa fa-check-square-o"></i> <?= lang('completed'); ?></a></li>
                                                        <?php endif; ?>
                                                        <?php if ($row['status'] == 0): ?>
                                                            <?php if (is_access('order-cancel') == 1): ?>
                                                                <li><a href="<?= base_url('admin/restaurant/reservation_order_status/' . $row['uid'] . '/3'); ?>" class="text-danger"><i class="fa fa-times-circle"></i> <?= lang('cancel'); ?></a></li>
                                                            <?php endif; ?>
                                                        <?php endif; ?>
                                                    </ul>
                                                </div>
                                            </td>
                                        </tr>
                                    <?php endforeach; ?>
                                </tbody>
                            </table>
                        </div>
                    </div>
                <?php endif; ?>

                <div class="pagination-wrapper mt-30 text-center">
                    <?= $this->pagination->create_links(); ?>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
/* Fix dropdown overlapping issue in table responsive */
@media (min-width: 992px) {
    .reservation-view-container.list-view .table-responsive {
        overflow: visible !important;
    }
}
.reservation-view-container.list-view .table-responsive {
    min-height: 250px;
}

/* Enhanced List View Styling */
.modern-table {
    border-collapse: separate;
    border-spacing: 0 10px;
    margin-top: -10px;
}

.modern-table thead th {
    border-bottom: none !important;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
    color: var(--color, #6c757d);
    padding: 10px 20px;
    font-weight: 600;
}

.modern-table tbody tr {
    background: var(--card-color, #fff);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: all 0.3s ease;
    border-radius: 8px;
}

.theme-dark .modern-table tbody tr {
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.modern-table tbody tr:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.theme-dark .modern-table tbody tr:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
    background: rgba(255, 255, 255, 0.08);
}

.modern-table tbody td {
    padding: 15px 20px !important;
    vertical-align: middle;
    border-top: none !important;
}

.modern-table tbody td:first-child {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.modern-table tbody td:last-child {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.table-customer .customer-name {
    font-weight: 600;
    color: var(--color, #4b566b);
    font-size: 14px;
}

.table-meta .meta-date {
    font-weight: 500;
    color: var(--color, #4b566b);
    margin-bottom: 2px;
}

.table-meta i {
    color: var(--primary-color, #007bff);
}

/* Light theme card soft backgrounds per status */
.theme-light .modern-table tbody tr.status-pending {
    background: var(--primary-color-soft, rgba(0, 123, 255, 0.02));
    border-left: 3px solid var(--primary-color, #007bff);
}
.theme-light .modern-table tbody tr.status-accepted {
    background: rgba(0, 123, 255, 0.02);
    border-left: 3px solid rgba(0, 123, 255, 0.8);
}
.theme-light .modern-table tbody tr.status-completed {
    background: rgba(40, 167, 69, 0.02);
    border-left: 3px solid rgba(40, 167, 69, 0.8);
}
.theme-light .modern-table tbody tr.status-canceled {
    background: rgba(220, 53, 69, 0.02);
    border-left: 3px solid rgba(220, 53, 69, 0.8);
}

/* Premium Mobile Styling for List View */
@media (max-width: 768px) {
    .modern-table.modern-table-list tbody tr {
        margin-bottom: 15px;
        display: block;
        padding: 10px 0;
    }
    .modern-table.modern-table-list td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 12px 20px !important;
        text-align: right !important;
        border-bottom: 1px dashed var(--border-color, rgba(0,0,0,0.05)) !important;
    }
    .modern-table.modern-table-list td:last-child {
        border-bottom: none !important;
    }
    .modern-table.modern-table-list td::before {
        position: static !important;
        transform: none !important;
        width: auto !important;
        padding-right: 15px !important;
        font-weight: 700 !important;
        color: var(--color, #6c757d) !important;
        font-size: 13px !important;
        text-transform: capitalize;
    }
    .modern-table.modern-table-list td > div,
    .modern-table.modern-table-list td > span {
        text-align: right;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }
    .modern-table.modern-table-list td .btn-group {
        flex-direction: row;
        align-items: center;
        gap: 5px;
    }
    .table-customer .customer-name {
        font-size: 15px;
    }
    .table-meta .meta-date, .table-meta .meta-persons {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-direction: row-reverse;
    }
    .table-meta .meta-date i, .table-meta .meta-persons i {
        margin: 0 !important;
    }
}
</style>

<script>
    $(document).ready(function() {
        $('[data-toggle="tooltip"]').tooltip();

        // View Switching Logic using Global Cookie Utility
        const cookieName = 'reservation_view';
        const defaultView = 'grid';

        // Initialize View from Cookie
        const savedView = getCookie(cookieName) || defaultView;
        switchGlobalView(cookieName, savedView);

        // Handle Switcher Click
        $(document).on('click', '.view-btn', function() {
            const view = $(this).data('view');
            switchGlobalView(cookieName, view);
        });

        // Handle filter slide toggle
        $(document).on("click", ".filter-header", function() {
            $(this).find('.fa-angle-down').toggleClass('rotate-180');
        });
    });
</script>