@if(count($jackpots) > 0)
<link rel="stylesheet" href="{{ URL::asset('css/dashboard/jackpot.css') }}">
<div class="heading position-relative mt-5 mb-4">
    <h2>Jackpots</h2>
    <hr>
</div>
<div class="jackpots-container mt-4">
    <div class="row jackpots-row">
        @foreach($jackpots as $item)
        <div class="col-lg-4 col-12">
            <div class="card animated-card p-3">
                <div class="card-header">
                    <h4 class="card-title mb-0">{{$item->title}}</h4>
                    @php
                        // $endTimeEst = \Carbon\Carbon::createFromFormat('Y-m-d H:i:s', $item->end_time, 'UTC')->setTimezone('America/New_York')->format('Y-m-d\TH:i:s\Z');
                        // $startTime = \Carbon\Carbon::createFromFormat('Y-m-d H:i:s', $item->start_time, 'UTC')->setTimezone('America/New_York');
                        // $endTime = \Carbon\Carbon::createFromFormat('Y-m-d H:i:s', $item->end_time, 'UTC')->setTimezone('America/New_York');

                        // $currentTime = \Carbon\Carbon::now('America/New_York');
                        // $endTimeEst = \Carbon\Carbon::createFromFormat('Y-m-d H:i:s', $item->end_time, 'UTC')->format('Y-m-d\TH:i:s\Z');

                        $startTime = \Carbon\Carbon::createFromFormat('Y-m-d H:i:s', $item->start_time);
                        $endTime = \Carbon\Carbon::createFromFormat('Y-m-d H:i:s', $item->end_time);

                        $currentTime = \Carbon\Carbon::now('America/New_York');
                        $endTimeEst = \Carbon\Carbon::createFromFormat('Y-m-d H:i:s', $item->end_time)->format('Y-m-d\TH:i:s\Z');

                        $total_collected = getJackpotAmount($item->item_to_be_purchased, $item->start_time, $item->end_time)->sum('amount');
                        $platform_amount = ($total_collected * $item->platform_percentage) / 100;
                        // $total_amount_after_platform_deduction = $total_collected - $platform_amount;
                        $users = null;
                        $countdown_html = '<div class="time"> <span class="text-warning">Not Started Yet</span></div>';
                        if(!$startTime->greaterThan($currentTime)){
                            $users = getJackpotUsers($item->item_to_be_purchased, count($item->standings));
                            $countdown_html = '<div class="time"> <span class="text-primary">Time Left (EST):</span> <span class="countdown" data-end-time="'.$endTimeEst.'">00d 00hr 00m 00s</span> </div>';
                        }
                        if($currentTime->greaterThan($endTime)){
                            $countdown_html = '<div class="time"> <span class="text-danger">It has been ended</span></div>';
                        }
                    @endphp
                    {!!$countdown_html!!}

                </div>
                <div class="card-body min-height-body">
                    <div class="table-responsive table-card">
                        <table class="table table-nowrap table-striped-columns mb-0">
                            <thead>
                                <tr>
                                    <th scope="col">Rank</th>
                                    <th scope="col">Username</th>
                                    <th scope="col">Rewards</th>
                                    <th scope="col">Game Scores</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($item->standings as $standing)
                                @php
                                    // $total_reward = (($total_amount_after_platform_deduction * $standing->percentage) / 100) + $standing->starting_balance;
                                    $total_reward = (($total_collected * $standing->percentage) / 100) + $standing->starting_balance;
                                @endphp
                                <tr>
                                    <td>{{ordinal($standing->standing)}}</td>
                                    <td>{{$users != null ? (isset($users[$loop->index]) ? ($users[$loop->index]->user->username) : '-') : '-'}}</td>
                                    <td>{{$total_reward ? (int)$total_reward : '-'}}</td>
                                    <td>{{$users != null ? ((isset($users[$loop->index]) ?$users[$loop->index]->quantity: '-')) : "-"}} <img src="{{asset($item->digital_item->image)}}" alt="{{$item->digital_item->name}}" class="img-fluid reward-img"></td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div class="rewards mt-4">
                        <h5>Rewards & Percentages:</h5>
                        <div class="d-flex align-items-start justify-content-between flex-wrap gap-2">
                            @foreach($item->standings as $standing)
                            <div class="item">
                                <h6>Rank {{ordinal($standing->standing)}} <strong class="text-primary">({{$standing->percentage}}%)</strong>:</h6>
                                <ul class="list-reward">
                                    @if(count($standing->standing_rewards)>0)
                                        @foreach($standing->standing_rewards as $reward)
                                            <li> <div class="d-flex align-items-center justify-content-start gap-1"><img src="{{asset($reward->digital_item->image)}}" alt="{{$reward->digital_item->name}}" class="img-fluid reward-img"></div></li>
                                        @endforeach
                                    @else
                                        <li><em>No Rewards</em></li>
                                    @endif
                                </ul>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
                <div class="card-footer relative">
                    @if(Auth::user()->hasRole('Super Admin') || Auth::user()->hasRole('Administrator'))
                    <p class="text-muted mb-0">Platform Fee: <strong class="text-dark">{{$item->platform_percentage ?? 0}}%</strong></p>
                    <h5 class=""><span class="text-success">Platform Total:</span> ${{$platform_amount}}</h5>
                    <hr>
                    <h5 class=""><span class="text-primary">Total Collected:</span> ${{$total_collected}}</h5>
                    @endif
                    <a href="{{ url('/market-place/asset/'.encrypt($item->digital_item->id).'/checkout') }}" class="badge badge-pill bg-secondary absolute item-buy">Item to buy: <img src="{{asset($item->digital_item->image)}}" alt="{{$item->digital_item->name}}" class="img-fluid reward-img">{{$item->digital_item->name}}</a>
                </div>
                <div class="card-fire"></div>
            </div>
        </div>
        @endforeach

    </div>
</div>
<script>
    $(document).ready(function () {
    // Function to convert UTC to EST
    function convertToEst(date) {
        const estOptions = { timeZone: 'America/New_York', hour12: false };
        const formatter = new Intl.DateTimeFormat('en-US', {
            ...estOptions,
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit',
        });

        const parts = formatter.formatToParts(date);
        const year = parts.find(p => p.type === 'year')?.value;
        const month = parts.find(p => p.type === 'month')?.value;
        const day = parts.find(p => p.type === 'day')?.value;
        const hour = parts.find(p => p.type === 'hour')?.value;
        const minute = parts.find(p => p.type === 'minute')?.value;
        const second = parts.find(p => p.type === 'second')?.value;

        return new Date(`${year}-${month}-${day}T${hour}:${minute}:${second}`);
    }

    // Function to update a single countdown
    function updateCountdown(countdownElement) {
        // const endTimeUtc = new Date($(countdownElement).data('end-time')); // Get the end time for this element
        // const countdownElement = document.querySelector("#countdown"); // Replace with your actual element
        const endTimeString = $(countdownElement).data('end-time'); // e.g., "2025-01-20T12:00:00"

        // Parse the date and time without timezone conversion
        const [datePart, timePart] = endTimeString.split("T");
        const [ye, mo, da] = datePart.split("-").map(Number); // Split date
        const [h, m] = timePart.split(":").map(Number); // Split time

        // Create a UTC Date object
        const endTimeUtc = new Date(ye, mo - 1, da, h, m, 0);


        const now = new Date();
        const nowEst = convertToEst(now); // Current time in EST


        // const endTimeEst = convertToEst(endTimeUtc); // End time in EST
        const endTimeEst = endTimeUtc; // End time in EST
        console.log(nowEst, endTimeEst); //
        const difference = endTimeEst - nowEst;

        if (difference <= 0) {
            $(countdownElement).text("Time's up!");
            return;
        }

        const days = Math.floor(difference / (1000 * 60 * 60 * 24));
        const hours = Math.floor((difference / (1000 * 60 * 60)) % 24);
        const minutes = Math.floor((difference / (1000 * 60)) % 60);
        const seconds = Math.floor((difference / 1000) % 60);

        $(countdownElement).text(`${days}d ${hours}h ${minutes}m ${seconds}s`);
    }

    // Function to update all countdowns
    function updateAllCountdowns() {
        $('.countdown').each(function () {
            updateCountdown(this); // Update each countdown
        });
    }

    updateAllCountdowns(); // Initial call
    setInterval(updateAllCountdowns, 1000); // Update every second
});
</script>
@endif