@include('layout.header')
<div id="tab-3" class="tab-content  ">
    <section>
        <div class="row justify-content-center">
            @if (liveMatchData()->count() != 0)
                @php
                    $currentDateTime = now();

                    $activeMatches = \App\Models\MatchActivity::where('is_match_completed', 'N')
                        ->where('match_start_time', '<=', $currentDateTime)
                        ->where('match_approval_end_time', '>=', $currentDateTime)
                        ->orderBy('match_start_time', 'asc')
                        ->get();

                    $nextMatchExists = $activeMatches->contains(function ($match) {
                        return in_array($match->match_type, ['semi_final', 'final']);
                    });

                    if (!$nextMatchExists) {
                        $upcomingMatch = \App\Models\MatchActivity::where('is_match_completed', 'N')
                            ->where('match_start_time', '>', $currentDateTime)
                            ->orderBy('match_start_time', 'asc')
                            ->first();

                        $nextMatchExists =
                            $upcomingMatch && in_array($upcomingMatch->match_type, ['semi_final', 'final']);
                    }
                @endphp

                @foreach (liveMatchData()->toArray() as $index => $liveMatchData)
                    <div class="col-xxl-4 col-xl-6 col-lg-6 col-md-6 col-md-12 col-12">
                        @if ($nextMatchExists)
                            <div class="rs_shadow nextMatch">
                            @else
                                <div class="rs_shadow">
                        @endif


                        @if (Auth::user()->user_type == 'BE' || Auth::user()->user_type == 'ABM')
                            @if ($liveMatchData['match_end_time'] >= date('Y-m-d H:i:s'))
                                <button type="button" class="btn btn-primary"
                                    onclick="redirectToMyscore('{{ Crypt::encrypt($liveMatchData['match_id']) }}')">
                                    <i class="fa-solid fa-plus"></i> Add RX
                                </button>
                            @elseif (
                                \Carbon\Carbon::now()->between(
                                    \Carbon\Carbon::parse($liveMatchData['match_end_time']),
                                    \Carbon\Carbon::parse($liveMatchData['match_end_time'])->addHours(4)) && Auth::user()->user_access_grant == 'Y')
                                <button type="button" class="btn btn-primary"
                                    onclick="redirectToMyscore('{{ Crypt::encrypt($liveMatchData['match_id']) }}')">
                                    <i class="fa-solid fa-plus"></i> Add RX
                                </button>
                            @endif
                        @endif
                        <h3>{{ 'Match ' . $liveMatchData['match_id'] }}
                            <a href="{{ url('/action-pending/' . Crypt::encrypt($liveMatchData['match_id'])) }}"
                                class="btn btn-pramiry action_btn"><i class="fa-solid fa-arrow-left me-1"></i>
                                Action Pending</a>
                        </h3>
                        <a href="{{ url('/match-data/' . Crypt::encrypt($liveMatchData['match_id'])) }}">
                            <h4 class="bg_primary">
                                {{ date('d M Y', strtotime($liveMatchData['match_start_time'])) }}
                            </h4>
                            <div class="team_match">
                                <ul>
                                    <li>
                                        <span class="team_name">
                                            <img src="../front/assets/images/logo/{{ $liveMatchData['team_logo1'] }}">
                                            {{ $liveMatchData['team_name1'] }}
                                        </span>
                                        <span class="team_score">
                                            {{ number_format($liveMatchData['team1_total_score'] / $liveMatchData['team_1_members'], 1) . ' (' . $liveMatchData['team_1_members'] . ') (' . $liveMatchData['team1_total_score'] . ' RX)' }}
                                        </span>
                                    </li>
                                    <li>
                                        <span class="team_name">
                                            <img src="../front/assets/images/logo/{{ $liveMatchData['team_logo2'] }}">
                                            {{ $liveMatchData['team_name2'] }}
                                        </span>
                                        <span class="team_score">
                                            {{ number_format($liveMatchData['team2_total_score'] / $liveMatchData['team_2_members'], 1) . ' (' . $liveMatchData['team_2_members'] . ') (' . $liveMatchData['team2_total_score'] . ' RX)' }}

                                        </span>
                                    </li>
                                </ul>

                            </div>
                            <div id="countdown{{ $index }}" class="countdown">
                                <ul>
                                    <li><span id="days{{ $index }}">99</span> days</li>
                                    <li><span id="hours{{ $index }}">23</span> hours</li>
                                    <li><span id="minutes{{ $index }}">59</span> minutes</li>
                                    <li><span id="seconds{{ $index }}">59</span> seconds</li>
                                </ul>
                            </div>

                            <script>
                                const targetDateLocal{{ $index }} = new Date(
                                    '{{ \Carbon\Carbon::parse(@$liveMatchData['match_end_time'])->format('Y-m-d H:i:s') }}'
                                );

                                const targetDateUTC{{ $index }} = new Date(targetDateLocal{{ $index }}.toISOString());

                                function updateTimer{{ $index }}() {
                                    const nowUTC = new Date();
                                    const timeRemaining = targetDateUTC{{ $index }} - nowUTC;

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

                                    document.getElementById('days{{ $index }}').innerText = days;
                                    document.getElementById('hours{{ $index }}').innerText = hours;
                                    document.getElementById('minutes{{ $index }}').innerText = minutes;
                                    document.getElementById('seconds{{ $index }}').innerText = seconds;

                                    if (timeRemaining < 0) {
                                        document.getElementById('days{{ $index }}').innerText = '00';
                                        document.getElementById('hours{{ $index }}').innerText = '00';
                                        document.getElementById('minutes{{ $index }}').innerText = '00';
                                        document.getElementById('seconds{{ $index }}').innerText = '00';
                                        document.getElementById('countdown{{ $index }}').innerHTML = '';
                                    }
                                }

                                setInterval(updateTimer{{ $index }}, 1000);
                                updateTimer{{ $index }}();
                            </script>



                    </div>

                    </a>
        </div>
        @endforeach
    @else
        <div class="col-lg-2 col-md-12 col-md-12 col-12">

            <p>Currently no matches are live now.</p>

        </div>
        @endif
</div>
</section>
</div>

</div>
</section>
</div>

<div class="modal fade" id="successModal" tabindex="-1" aria-labelledby="successModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="successModalLabel">Welcome!</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                @if ($banner)
                    <img id="successImage" src="{{ asset('storage/' . $banner->banner_file) }}" alt="Welcome Image"
                        style="max-width: 100%; height: auto;">
                @else
                    <p>No banner available.</p>
                @endif
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>


@include('layout.footer')


<script>
    function redirectToMyscore(match_id) {
        if (match_id !== '') {
            window.location.replace("{{ url('/score-add') }}/" + match_id);
        }
    }


    $(document).ready(function() {

        @if ($banner)
            // $('#successModal').modal('show');
        @endif
    });
</script>