@extends('admin.layouts.masterlayout')
@section('styles')
<link href="{{asset('new_theme/assets/plugins/datatable/css/dataTables.bootstrap5.min.css')}}" rel="stylesheet" />

@endsection
@section('content')
<div class="main-content">
    <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
        <div class="breadcrumb-title pe-3">Cart</div>
    </div>

    <div class="card">


        <div class="card-body">
            <div class="product-table">
                <div class="table-responsive">
                    <table id="cartTable" class="table table-bordered align-middle">
                        <thead class="text-nowrap">
                            <tr>
                                <th>#</th>
                                <th>User Details</th>
                                <th>Product</th>
                                <th>Qty</th>
                                <th>Price</th>
                                <th>Total Price</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>

        </div>

    </div>
</div>

@endsection
@push('scripts')
<script src="{{asset('new_theme/assets/plugins/datatable/js/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('new_theme/assets/plugins/datatable/js/dataTables.bootstrap5.min.js')}}"></script>
<script>
    $(document).ready(function() {

        $('#cartTable').DataTable({
            processing:true,
            serverSide:true,
            dom: 'Bfrtip',
            buttons: [
                {
                    extend: 'csvHtml5',
                    text: '<div class="d-flex align-items-center gap-2"><i class="material-icons-outlined fs-6">download</i> Export CSV</div>',
                    title: 'Cart_List',
                    exportOptions: {
                        columns: ':visible'
                    }
                }
            ],
            // ✅ IMPORTANT: Show length + export buttons
            dom: '<"d-flex justify-content-between align-items-center mb-2"lBf>rtip',

            // ✅ LENGTH MENU (Show entries dropdown)
            lengthMenu: [
                [10, 25, 50, 100],
                [10, 25, 50, 100]
            ],

            pageLength: 10, // default
            ajax:"{{ route('cart.list') }}",
           
            columns: [
                {data:'DT_RowIndex',orderable:false,searchable:false},
                { data: 'user_details' },
                { data: 'product' },
                { data: 'quantity' },
                { data: 'price' },
                { data: 'total' }
            ]
        });
    });
</script>
@endpush