<?php $__env->startSection('content'); ?>
<style>
body{
    background:#F7F8FC;
    color:#1F2937;
    font-family:Inter,sans-serif;
}

/* ===========================
   ORDER CARD
=========================== */

.order-wrapper{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    border:1px solid #ECECEC;
    box-shadow:0 12px 35px rgba(107,83,236,.08);
}

/* ===========================
   HEADER
=========================== */

.order-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    padding:24px 30px;
    background:linear-gradient(135deg,#6B53EC,#5738E8);
}

.order-header h3{
    margin:0;
    color:#fff;
    font-size:28px;
    font-weight:700;
}

.order-header p{
    margin:6px 0 0;
    color:rgba(255,255,255,.8);
    font-size:14px;
}

/* ===========================
   SEARCH
=========================== */

.search-box{
    position:relative;
    width:320px;
}

.search-box i{
    position:absolute;
    top:50%;
    left:16px;
    transform:translateY(-50%);
    color:#777;
}

.search-box input{
    height:48px;
    border:none;
    border-radius:50px;
    padding-left:45px;
    box-shadow:none;
}

.search-box input:focus{
    box-shadow:0 0 0 4px rgba(107,83,236,.15);
    border:none;
}

/* ===========================
   TABLE
=========================== */

.order-table{
    margin:0;
}

.order-table thead{
    background:#F8F7FF;
}

.order-table thead th{
    padding:18px;
    border:none;
    font-size:14px;
    font-weight:600;
    color:#5F6172;
    white-space:nowrap;
}

.order-table tbody td{
    padding:18px;
    border-top:1px solid #F1F1F1;
    vertical-align:middle;
}

.main-row{
    transition:.3s;
}

.main-row:hover{
    background:#FAF9FF;
}

/* ===========================
   CUSTOMER
=========================== */

.customer-info{
    display:flex;
    align-items:center;
    gap:14px;
}

.avatar{
    width:48px;
    height:48px;
    border-radius:50%;
    background:linear-gradient(135deg,#6B53EC,#5738E8);
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:18px;
    font-weight:700;
}

.customer-info h6{
    margin:0;
    font-size:15px;
    font-weight:600;
}

.customer-info small{
    color:#777;
}

/* ===========================
   BADGES
=========================== */

.order-id{
    color:#6B53EC;
    font-weight:700;
}

.item-count{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:42px;
    padding:7px 14px;
    background:#F3F0FF;
    color:#6B53EC;
    border-radius:30px;
    font-weight:600;
}

.price{
    font-size:17px;
    color:#6B53EC;
    font-weight:700;
}

.status{
    display:inline-block;
    padding:7px 16px;
    border-radius:30px;
    font-size:13px;
    font-weight:600;
}

.status.success{
    background:#EAFBF2;
    color:#22C55E;
}

.status.pending{
    background:#FFF8E6;
    color:#F59E0B;
}

.status.cancelled{
    background:#FFECEC;
    color:#EF4444;
}

/* ===========================
   BUTTON
=========================== */

.view-btn{
    width:42px;
    height:42px;
    border:none;
    border-radius:12px;
    background:#F3F0FF;
    color:#6B53EC;
    transition:.3s;
}

.view-btn:hover{
    background:#6B53EC;
    color:#fff;
    transform:translateY(-2px);
    box-shadow:0 10px 20px rgba(107,83,236,.25);
}

/* ===========================
   DETAILS
=========================== */

.details-row{
    display:none;
    background:#FBFBFF;
}

.details-box{
    background:#fff;
    border:1px solid #ECE8FF;
    border-radius:14px;
    padding:12px;
}

.details-box table{
    margin:0;
}

.details-box thead{
    background:#F8F7FF;
}

.details-box th{
    border:none;
    padding:14px;
    font-size:13px;
    font-weight:600;
    color:#666;
}

.details-box td{
    padding:14px;
    border-top:1px solid #F3F3F3;
    font-size:14px;
}

/* ===========================
   EMPTY
=========================== */

.empty-box{
    padding:70px 20px;
    text-align:center;
    color:#777;
    font-size:16px;
}

/* ===========================
   SCROLLBAR
=========================== */

.table-responsive::-webkit-scrollbar{
    height:8px;
}

.table-responsive::-webkit-scrollbar-thumb{
    background:#D7D0FF;
    border-radius:10px;
}

/* ===========================
   RESPONSIVE
=========================== */

@media(max-width:991px){

    .order-header{
        flex-direction:column;
        align-items:flex-start;
    }

    .search-box{
        width:100%;
    }

}

@media(max-width:767px){

    .order-header{
        padding:20px;
    }

    .order-header h3{
        font-size:22px;
    }

    .order-table thead th,
    .order-table tbody td{
        padding:14px;
        font-size:13px;
    }

    .customer-info{
        min-width:220px;
    }

    .avatar{
        width:40px;
        height:40px;
        font-size:16px;
    }

}
.details-box table thead tr th {
    background: #6B53EC;
    color: #fff;
}
        /* Rounded header corners */
        .details-box table thead tr th:first-child {
            border-top-left-radius: 12px;
        }

        .details-box table thead tr th:last-child {
            border-top-right-radius: 12px;
        }
</style>
<div class="container-fluid py-4">

    <div class="order-wrapper">

        <!-- Header -->
        <div class="order-header">

            <div>
                <h3>Orders History</h3>
                <p>Total Orders : <?php echo e(count($orders)); ?></p>
            </div>

            <div class="search-box">
                <i class="fa fa-search"></i>
                <input type="text"
                       id="searchOrder"
                       class="form-control"
                       placeholder="Search customer...">
            </div>

        </div>

        <div class="table-responsive">

            <table class="table order-table align-middle">

                <thead>

                <tr>

                    <th>#</th>
                    <th>Customer</th>
                    <th>Items</th>
                    <th>Total</th>
                    <th>Status</th>
                    <th>Date</th>
                    <th></th>

                </tr>

                </thead>

                <tbody>

                <?php $__empty_1 = true; $__currentLoopData = $orders; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $key => $userOrders): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>

                <?php

                $firstOrder=$userOrders->first();

                $totalItems=$userOrders->sum('total_items');

                $totalAmount=$userOrders->sum('total_amount');

                ?>

                <tr class="main-row">

                    <td>

                        <div class="order-id">

                            #<?php echo e($key+1); ?>


                        </div>

                    </td>

                    <td>

                        <div class="customer-info">

                            <div class="avatar">

                                <?php echo e(strtoupper(substr($firstOrder->name,0,1))); ?>


                            </div>

                            <div>

                                <h6><?php echo e($firstOrder->name); ?></h6>

                                <small><?php echo e($firstOrder->email); ?></small>

                            </div>

                        </div>

                    </td>

                    <td>

                        <span class="item-count">

                            <?php echo e($totalItems); ?>


                        </span>

                    </td>

                    <td>

                        <span class="price">

                            $<?php echo e(number_format($totalAmount,2)); ?>


                        </span>

                    </td>

                    <td>

                        <span class="status success">

                            <?php echo e($firstOrder->status); ?>


                        </span>

                    </td>

                    <td>

                        <?php echo e($firstOrder->created_at->format('d M Y')); ?>


                        <br>

                        <small>

                            <?php echo e($firstOrder->created_at->format('h:i A')); ?>


                        </small>

                    </td>

                    <td>

                        <button
                                class="view-btn toggleOrder"
                                data-id="<?php echo e($key); ?>">

                            <i class="fa fa-chevron-down"></i>

                        </button>

                    </td>

                </tr>

                <tr class="details-row"

                    id="orderDetails<?php echo e($key); ?>">

                    <td colspan="7">

                        <div class="details-box">

                            <table class="table mb-0">

                                <thead>

                                <tr>

                                    <th>Product</th>

                                    <th>SKU</th>

                                    <th>Type</th>

                                    <th>Metal</th>

                                    <th>Color</th>

                                    <th>Qty</th>

                                    <th>Price</th>

                                </tr>

                                </thead>

                                <tbody>

                                <?php $__currentLoopData = $userOrders; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $order): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>

                                <?php $__currentLoopData = $order->items; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>

                                <tr>

                                    <td><?php echo e($item->product->collection ?? '-'); ?></td>

                                    <td><?php echo e($item->sku); ?></td>

                                    <td><?php echo e($item->product_type_name ?? '-'); ?></td>

                                    <td><?php echo e($item->metal_kt_name ?? '-'); ?></td>

                                    <td><?php echo e($item->metal_color_name ?? '-'); ?></td>

                                    <td><?php echo e($item->qty); ?></td>

                                    <td>$<?php echo e(number_format($item->price,2)); ?></td>

                                </tr>

                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

                                </tbody>

                            </table>

                        </div>

                    </td>

                </tr>

                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>

                <tr>

                    <td colspan="7">

                        <div class="empty-box">

                            No Orders Found

                        </div>

                    </td>

                </tr>

                <?php endif; ?>

                </tbody>

            </table>

        </div>

    </div>

</div>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
        $(document).ready(function(){
            $('.toggleOrder').click(function(){
                let id = $(this).data('id');
                $('#orderDetails' + id).slideToggle(250);
            });
              $('#searchOrder').on('keyup', function(){
                let value = $(this).val().toLowerCase();
                $('.main-row').each(function(){
                    let row = $(this);
                    let text = row.text().toLowerCase();
                    if(text.indexOf(value) > -1){
                        row.show();
                    } else {
                        row.hide();
                        row.next('.details-row').hide();
                    }
                });
            });
        });
</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('admin.layout.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/braintreeeasysof/public_html/popular/resources/views/admin/orders/order.blade.php ENDPATH**/ ?>