@extends('layouts.app')

@section('content')      
<style>
    .center {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .game_closing_date {
        font-size: 20px;
        width: 300px;
        position: relative;
        left: 316px;
        background-color: #20103a !important;
        color: white;
        text-align: center;
    }
    .category-label {
        position: absolute;
        color: white;
        left: 690px;
        top: 83px;
    }
    .game_closing_date {
        padding: 12px 15px;
        border-radius: 8px;
    }
    .game-list{
        background: transparent !important;
    }
    .game-list .col-md-4 {
    justify-content: end;
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    }
    .game-list .card {
        padding: 30px;
    }
    .game-gif{
        width: 95px;
    }
    .game-list .card {
        box-shadow: rgb(254 254 254 / 22%) 0px 5px 15px;
        border-radius: 10px;
        border: 1px solid #ffffff38;
    }

    div:where(.swal2-container) div:where(.swal2-popup) {
        width: 59em !important;
    }

    .number-range, .amount{
        width: 136px !important;
    }
</style>
<script>
    // Wait for 5 seconds and then hide the flash message
    setTimeout(function() {
        var flashMessage = document.getElementById('flash-message');
        if (flashMessage) {
            flashMessage.style.display = 'none';
        }
    }, 3000);
</script>


<div class="mt-4">
    <select class="category_filter" style="position: absolute;left: 16%;color: white;top: 143px;background: #20103A;border-radius: 13px;padding: 15px 25px;width: 11%;">
        <option value="">Select Category</option>
        @foreach ($categoryList as $category)
            <option value="{{ $category->id }}" @if(request('category') == $category->id) selected @endif>
                {{ $category->category_name }}
            </option>
        @endforeach
    </select>
    <div class="close-date">
        <input type="date" name="closing_date" id="" class="game_closing_date" value="{{ request('closing_date') ? request('closing_date') : date('Y-m-d') }}">
    </div>
    
    
    <div class="button-search" style="position: absolute;left: 16%;top: 11%;">
        <button onclick="searchGames()" style="
        background: #20103A;
        border-radius: 13px;
        padding: 10px 11px;
        margin-top: 47px;
        color: white;
    ">Search</button>
        <button onclick="resetFilters()" style="
        background: #20103A;
        border-radius: 13px;
        padding: 10px 11px;
        color: white;
    ">Reset</button>
    </div>
    <!-- Add Search and Reset buttons -->
    
    
    {{-- <form id="filterForm" action="{{ route('home') }}" method="GET">
        <div class="filter-row">
            <div class="filter-item">
                <select class="category_filter" name="category" style="position: absolute;left: 28%;color: white;top: 143px;background: #20103A;border-radius: 13px;padding: 15px 25px;">
                    <option value="">Category</option>
                    @foreach ($categoryList as $category)
                        <option value="{{ $category->id }}" {{ request('category') == $category->id ? 'selected' : '' }}>
                            {{ $category->category_name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="filter-item">
                <div class="close-date" style="position: absolute;left: 41%;color: white;top: 143px;background: #20103A;border-radius: 13px;padding: 15px 25px;">
                    <input type="date" name="closing_date" value="{{ request('closing_date', date('Y-m-d')) }}">
                </div>
            </div>
            <div class="filter-item-button" style="position: relative;left: 54%;margin-top: 43px;">
                <button type="submit">Search</button>
                <a href="{{ route('home') }}" class="reset-link">Reset</a>
            </div>

        </div>
    </form> --}}
    
    
    
    @if(session('error'))
    <div id="flash-message" class="alert alert-danger">
        {{ session('error') }}
    </div>
@endif
    <div class="bg-white game-list position-relative overflow-hidden" style="margin-top: 30px;">
        <div class="row mb-3" id="gameList">
            @forelse($gameList as $game)
            <div class="col-md-12 mrt">
                <div class="card">
                    <div class="row align-items-center">
                        <div class="col-md-8 p-2">
                            <div class="d-flex align-items-center mb-3">
                                <div class="game-gif d-flex justify-content-center align-items-center">
                                    {{-- <img src="{{ asset('game-animation.gif') }}" alt="" style="width:64px; height: auto;" /> --}}
                                </div>
                                
                                <h2 class="text-uppercase mb-0">{{ $game->game_title }}</h2>
                            </div>
                            <div class="d-flex pl-20 text-white">
                                <!-- Game description -->
                                <div>
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right-circle" viewBox="0 0 16 16">
                                        <path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z" />
                                    </svg>
                                </div>
                                <h4 class="pl-20 text-white">
                                    {{ substr($game->game_description, 0, 100) }}{{ strlen($game->game_description) > 100 ? '...' : '' }}
                                </h4>
                                
                            </div>
                            {{-- <div class="d-flex pl-20 text-white">
                                <div>
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar-check" viewBox="0 0 16 16">
                                        <path fill-rule="evenodd" d="M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0z" />
                                        <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z" />
                                    </svg>
                                </div>
                                <!-- Game start date -->
                                <h4 class="pl-20 text-white">{{ \Carbon\Carbon::parse($game->game_start_date)->format('jS F Y') }}</h4>
                            </div> --}}
                            <div class="d-flex pl-20 text-white">
                                <!-- Game status -->
                                <div>
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar-check" viewBox="0 0 16 16">
                                        <path fill-rule="evenodd" d="M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0z" />
                                        <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z" />
                                    </svg>
                                </div>
                                <h4 class="pl-20">{{ \Carbon\Carbon::parse($game->game_end_date)->format('jS F Y') }} {{ date('g:i A',
                                    strtotime($game->game_end_time)) }}</h4><span class="text-danger">(Close Date and Time)</span>
                            </div>
                            <div class="d-flex pl-20 text-white">
                                <!-- Game status -->
                                <div>
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar-check" viewBox="0 0 16 16">
                                        <path fill-rule="evenodd" d="M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0z" />
                                        <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z" />
                                    </svg>
                                </div>
                                <h4 class="pl-20 text-white">{{ \Carbon\Carbon::parse($game->game_draw_date)->format('jS F Y') }} {{ date('g:i A',
                                    strtotime($game->game_draw_time)) }}</h4><span class="text-danger">(Draw Date and Time)</span>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="quiz-img">
                                @if($game->featured_image)
                                    <img src="{{asset('game_images/'.$game->featured_image)}}" class="rounded d-block" alt="" style="height: 100px;width: 100px;">
                                @else
                                    <img src="{{asset('logo.png')}}" class="rounded d-block" alt="" style="height: auto;width: 100px;">
                                @endif
                            </div>
                            <div class="mt-2 mb-3">
                                @php
                                    $currentDateTime = \Carbon\Carbon::now('Asia/Kolkata');
                                
                                    // Convert $gameEndDate and $gameEndTime to Carbon objects in IST
                                    $gameEndDateTime = \Carbon\Carbon::parse($game->game_end_date . ' ' . $game->game_end_time, 'Asia/Kolkata');
                                
                                    // Check if the game end date and time have expired
                                    if ($gameEndDateTime->isFuture()) {
                                        // Game end date is in the future, not expired yet
                                
                                        if ($gameEndDateTime->isSameDay($currentDateTime)) {
                                            // Game end date is today, check the current time
                                
                                            if ($gameEndDateTime->isPast()) {
                                                // Game end time has passed
                                                $buttonLabel = 'Buy Ticket';
                                            } else {
                                                // Game end time has not passed
                                                $buttonLabel = 'Buy Ticket';
                                            }
                                        } else {
                                            // Game end date is not today
                                            $buttonLabel = 'Buy Ticket';
                                        }
                                    } else {
                                        // Game end date and time have passed
                                
                                        // Convert $gameDrawDate and $gameDrawTime to Carbon objects in IST
                                        $gameDrawDateTime = \Carbon\Carbon::parse($game->game_draw_date . ' ' . $game->game_draw_time, 'Asia/Kolkata');
                                
                                        // Check if the game draw date and time have expired
                                        if ($gameDrawDateTime->isPast()) {
                                            // Game draw date and time have passed
                                            $buttonLabel = 'View Result';
                                        } else {
                                            // Game draw date and time have not passed
                                            $buttonLabel = 'Waiting for Result';
                                        }
                                    }
                                @endphp
                            
                                @if(auth()->check())
                                 @if($game->result_publish != 1)
                                        @if($buttonLabel === 'Buy Ticket')
                                        <a href="{{ route('user.create.ticket', ['id'=>$game->id]) }}" style="cursor: pointer;display: inline-block;text-decoration: none;">
                                            <button class="button-72" role="button">Buy Ticket</button>
                                        </a>
                                        @elseif($buttonLabel === 'View Result')
                                            <a href="{{ route('user.view.ticket', ['id'=>$game->id])}}" style="cursor: pointer;display: inline-block;text-decoration: none;">
                                                <button class="button-72" role="button">View Result</button>
                                            </a>
                                        @elseif($buttonLabel === 'Waiting for Result')
                                            <button class="button-72" role="button">Waiting for Result</button>
                                        @endif
                                    @else 
                                        <a href="{{ route('user.view.ticket', ['id'=>$game->id])}}" style="cursor: pointer;display: inline-block;text-decoration: none;">
                                            <button class="button-72" role="button">View Result</button>
                                        </a>
                                    @endif
                                @endif
                                <button class="button-72 ml-2" onclick="showDescription({{@$game->id}})">Description</button>
                                <button class="button-72 ml-2" onclick="showResult({{@$game->id}})">Draw Prizes</button>
                            </div>
                                                   
                        </div>
                    </div>
                </div>
            </div>
            @empty
            <div class="col-md-12 mrt">
                <div class="card text-white text-center">
                No Active Games Found!
            </div>
            </div>
            @endforelse
        </div>
    </div>
</div>
{{-- <div class="game-gif d-flex justify-content-center align-items-center">
    <img src="{{ asset('game-animation.gif') }}" alt="" style="width:64px; height: auto;" />
</div> --}}

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    function searchGames() {
    const categoryId = document.querySelector('.category_filter').value;
    const closingDate = document.querySelector('.game_closing_date').value;
    
    if (categoryId !== '' && closingDate !== '') {
        // Both category and closing date are selected
        window.location.href = `{{ route('home') }}?category=${categoryId}&closing_date=${closingDate}`;
    } else if (categoryId !== '') {
        // Only category is selected
        window.location.href = `{{ route('home') }}?category=${categoryId}`;
    } else if (closingDate !== '') {
        // Only closing date is selected
        window.location.href = `{{ route('home') }}?closing_date=${closingDate}`;
    }
}


    function resetFilters() {
        // Reset the select and date inputs
        document.querySelector('.category_filter').value = '';
        document.querySelector('.game_closing_date').value = '{{ date('Y-m-d') }}';

        // Redirect to the index page with no filters
        window.location.href = `{{ route('home') }}`;
    }
</script>

<script>
//    $(document).ready(function() {
//     var gameDate = '';
//     var categoryId = '';
//     // Handle category change event
//     // Handle category change event
//     $('.game_closing_date').on('change', function() {
//         gameDate = $(this).val(); // Update the gameDate variable with the selected date
//         categoryId = ''; // Reset the categoryId
//         if (gameDate == '') {
//             location.reload();
//         } else {
//             filterGames(gameDate, categoryId); // Call the function to filter games
//         }
//     });

//     $('.category_filter').on('change', function() {
//         categoryId = $(this).val(); // Update the categoryId variable with the selected category ID
//         gameDate = ''; // Reset the gameDate
//         if (categoryId == '') {
//             location.reload();
//         } else {
//             filterGames(gameDate, categoryId); // Call the function to filter games
//         }
//     });


//        // Function to filter games by category
//     function filterGames(gameDate) {
//         // Send AJAX request to the server
//         $.ajax({
//             url: "{{route('filter-games')}}", // Replace with the actual route URL
//             method: 'POST',
//             headers: {
//                 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
//             },
//             data: {
//                 game_date: gameDate,
//                 category_id: categoryId
//             },
//             success: function(response) {
//                 // Update the game list based on the filtered games
//                 var gameListContainer = $('#gameList');
//                 gameListContainer.empty(); // Clear existing game list

//                 if (response.games.length > 0) {
//                 // Generate and append game HTML for each filtered game
//                 $.each(response.games, function(index, game) {
//                     var gameEndDate = moment(game.game_end_date).format('D MMMM YYYY');
//                     var gameEndTime = moment(game.game_end_time, 'HH:mm:ss').format('h:mm A');

//                     var gameDrawDate = moment(game.game_draw_date).format('D MMMM YYYY');
//                     var gameDrawTime = moment(game.game_draw_time, 'HH:mm:ss').format('h:mm A');
//                     var image = "{{ asset('game_images/') }}" + '/' + game.featured_image;

//                     var maxWords = 20; // Define the maximum number of words to display
//                     var limitedDescription = game.game_description.split(" ").slice(0, maxWords).join(" "); // Limit the description to the desired number of words

//                     console.log(image);


//                     var gameHtml = `
//                         <div class="col-md-12 mrt">
//                             <div class="card">
//                                 <div class="row">
//                                     <div class="col-md-8 p-2">
//                                         <div class="d-flex align-items-center mb-3">
                                            
//                                             <h2 class="text-uppercase mb-0">${game.game_title}</h2>
//                                         </div>
//                                         <div class="d-flex pl-20 text-white">
//                                             <!-- Game description -->
//                                             <div>
//                                                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right-circle" viewBox="0 0 16 16">
//                                                     <path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z" />
//                                                 </svg>
//                                             </div>
//                                             <h4 class="pl-20 text-white">${limitedDescription}</h4>
//                                         </div>
//                                         <div class="d-flex pl-20 text-white">
//                                             <!-- Game start date -->
//                                             <div>
//                                                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar-check" viewBox="0 0 16 16">
//                                                     <path fill-rule="evenodd" d="M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0z" />
//                                                     <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5z" />
//                                                 </svg>
//                                             </div>
//                                             <h4 class="pl-20">
//                                                 ${gameEndDate} ${gameEndTime}
//                                             </h4>
//                                             <span class="text-danger">(Close Date and Time)</span>
//                                         </div>
//                                         <div class="d-flex pl-20 text-white">
//                                             <!-- Game start date -->
//                                             <div>
//                                                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar-check" viewBox="0 0 16 16">
//                                                     <path fill-rule="evenodd" d="M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0z" />
//                                                     <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5z" />
//                                                 </svg>
//                                             </div>
//                                             <h4 class="pl-20 text-white">
//                                                 ${gameDrawDate} ${gameDrawTime}
//                                             </h4>
//                                             <span class="text-danger">(Draw Date and Time)</span>
//                                         </div>
//                                         </div>
//                                         <div class="col-md-4">
//                                         <div class="quiz-img">
//                                             <img src="${image}" class="rounded d-block" alt="" style="height: 100px;width: 100px;">
//                                         </div>
//                                         <div class="mt-2 mb-3">
//                                             <a href="/Lotto23/public/user/create-ticket/${game.id}" style="cursor: pointer; display: inline-block; text-decoration: none;">
//                                                 <button class="button-72" role="button">Play Now</button>
//                                             </a>
//                                             <button class="button-72 ml-2" onclick="showDescription({{@$game->id}})">Description</button>
//                                             <button class="button-72 ml-2" onclick="showResult({{@$game->id}})">Draw Prizes</button>
//                                         </div>
//                                     </div>
//                                 </div>
//                             </div>
//                         </div>
//                         `;

//                         gameListContainer.append(gameHtml); // Append the game HTML to the game list container
//                     });
//                 }
//             },
//                 error: function(xhr, status, error) {
//                     console.error(error); // Log any errors that occur during the AJAX request
//                 }
//             });
//         }
// });




function showDescription(gameId) {
    // Send AJAX request to fetch the game description for the given game ID
    $.ajax({
        url: "{{ route('game.description') }}",
        method: 'GET',
        data: {
            id: gameId
        },
        success: function(response) {
            // Display the game description in a popup
            Swal.fire({
                title: 'Game Description',
                html: response.description, // Use the actual response property containing the description
                showCancelButton: false,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Close'
            });
        },
        error: function(xhr, status, error) {
            console.error(error); // Log any errors that occur during the AJAX request
        }
    });
}
function showResult(gameId) {
    // Send AJAX request to fetch the game result for the given game ID
    $.ajax({
        url: "{{ route('game.result') }}", // Replace with the actual route URL for fetching game result
        method: 'GET',
        data: {
            id: gameId
        },
        success: function(response) {
            if (response.result.length > 0) {
                // Generate HTML table for the results
                var table = '<table class="table wide-table">';
                table += '<thead><tr><th>Winning Set</th><th>Amount</th><th>Description</th></tr></thead>';
                table += '<tbody>';
                $.each(response.result, function(index, result) {
                    table += '<tr>';
                    table += '<td class="number-range">' + result.number_range + '</td>';
                    table += '<td class="amount">' + result.amount + '</td>';
                    table += '<td class="description-cell">' + result.description + '</td>';
                    table += '</tr>';
                });
                table += '</tbody></table>';

                // Add CSS styles to handle long descriptions
                $('head').append('<style>.wide-table { width: 100%; }</style>');

                // Display the game result in a popup with the generated table
                Swal.fire({
                    title: 'Draw Prize',
                    html: table,
                    showCancelButton: false,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'OK'
                });
            } else {
                Swal.fire({
                    title: 'No Draw Prize Found',
                    text: 'No Draw Prize are available at the moment. Please wait for some time.',
                    icon: 'info',
                    confirmButtonColor: '#3085d6',
                    confirmButtonText: 'OK'
                });
            }
        },
        error: function(xhr, status, error) {
            console.error(error); // Log any errors that occur during the AJAX request
        }
    });
}



</script>
@endsection