@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="profitLossTable">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Game</th>
                        <th>Winning Number</th>
                        <th>Bid Details</th>
                        <th>Profit/Loss</th>
                        <th>Total Amount</th>
                        <th>Created At</th>
                    </tr>
                </thead>
            </table>



            </div>
        </div>
    </section>
@endsection
@push('scripts')

<script>
$(document).ready(function() {
    $('#profitLossTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{{ route("customer.profitloss") }}',
        columns: [
            { data: 'id', name: 'id' },
            { data: 'game', name: 'game' },
            { data: 'session', name: 'session' },
            { data: 'bid_details', name: 'bid_details', orderable: false, searchable: false },
            { data: 'profit_loss', name: 'profit_loss' },
            { data: 'total_amount', name: 'total_amount' },
            { data: 'created_at', name: 'created_at' }
        ],
        order: [[6, '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