@extends('new_app.header')

@section('content')
<section class="container-fluid p-1 shadow bg-body radius-8 mt-3">
    <div class="title text-center">
        <h1 class="text-success">{{ $game->game_name }}</h1>
        <h6 class="text-primary">Games Result</h6>
    </div>
    <style>
        .home {
            padding: 0;
        }
        .table>:not(caption)>*>* {
            padding: 0rem 0rem;
        }
        .table tr th {
            background: #8b0707;
            color: white;
        }
    </style>
    
    @php
        // Set the current year dynamically
        $_current_year = now()->year;

        // Generate months from January to December
        $months = collect(range(1, 12))->map(fn($x) => now()->startOfYear()->addMonths($x - 1)->format('M'));
        $yearMonths = collect(range(1, 12))->map(fn($x) => now()->startOfYear()->addMonths($x - 1)->format('Ym'));
    @endphp
    
    <table class="table table-bordered text-center">
        <thead>
            <tr>
                <th>Date</th>
                @foreach ($months as $month)
                    <th>{{ $month }}</th>
                @endforeach
            </tr>
        </thead>
        <tbody>
            @for ($x = 1; $x <= 31; $x++)
                @php $d = str_pad($x, 2, '0', STR_PAD_LEFT); @endphp
                <tr>
                    <th class='datenum'>{{ $x }}</th>
                    @foreach ($yearMonths as $ym)
                        <td id='s{{ $ym . $d }}'></td>
                    @endforeach
                </tr>
            @endfor
        </tbody>
    </table>
    
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        var results = @json($results);
        results.forEach(i => {
            let date = new Date(i.open_date);
            let formattedDate = `${date.getFullYear()}${('0' + (date.getMonth() + 1)).slice(-2)}${('0' + date.getDate()).slice(-2)}`;
            $(`#s${formattedDate}`).text(i.first_number);
        });
    </script>
</section>
@endsection