@extends('layouts.main')

@section('content')
    <section class="container">
        <div class="row">
            @include('layouts.usersidebar')

            <div class="col-xl-9 col-md-9 col-12 rightbar mt-5 gametimeContainer">

                    <table class="table table-bordered" id="bidsTable">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Amount</th>
                                <th>Game Session</th>
                                <th>Bid Details</th>
                                <th>Date</th>
                            </tr>
                        </thead>
                    </table>



            </div>
        </div>
    </section>
@endsection
@push('scripts')
<script>
$(document).ready(function() {
    $('#bidsTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('activebiddinghistory') }}", // Make sure this route is defined and points to the correct controller method
        columns: [
            { data: 'id', name: 'id' },
            { data: 'total_amount', name: 'total_amount', orderable: true, searchable: true },
            { data: 'game', name: 'game_session_id' },
            { data: 'bid_details', name: 'bid_details', orderable: false, searchable: false, render: function(data, type, row) {
                return data;
            }},
            { data: 'created_at', name: 'created_at' },
        ],
        order: [[0, 'desc']]
    });
});
</script>
<style>
    .bid-details-container {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    .bid-detail {
        width: 60px;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 5px;
        text-align: center;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        overflow: hidden;
    }
    .bid-number {
        background: #f7f7f7;
        padding: 10px;
        font-weight: bold;
        border-bottom: 1px solid #ddd;
    }
    .bid-amount {
        padding: 10px;
        background: #ff4d4d;
        color: #fff;
        font-weight: bold;
    }
    </style>

@endpush