@extends('doctor.layouts.app')

@section('content')
<style>
    .player-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .player-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 250px;
    overflow-y: scroll;
    }
    .alert.alert-info {
    color: #fff;
    background-color: var(--secondary);
    border-color: var(--secondary);
    border-radius: 20px;
}
    .player-list input[type="radio"] {
        display: none;
    }
    .player-list label {
    display: flex;
    align-items: center;
    padding: 10px;
    border: 2px solid #ccc;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.3s;
    background: #f8f9fa;
    font-weight: 500;
    text-align: left;
    line-height: 20px;
    }
    .player-list label img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        object-fit: cover;
        margin-right: 10px;
        border: 2px solid #ddd;
        transition: 0.3s;
    }
    .player-list input[type="radio"]:checked + label {
            background: #f2a32e;
    color: white;
    border-color: #ed940f;
    }
    .player-list input[type="radio"]:checked + label img {
        border-color: #ed940f;
    }
    .radio {
    display: block;
    text-align: left;
}
.alert-info {
    color: #fff;
    background-color: var(--thrid);
    border-color: var(--thrid);border-radius: 20px;
}
</style>
@include('doctor.logos')
<div class="title-area pt-3">
    <h3>Predict winners for match?</h3>
    <div class="balance">Earn points to use in the future.</div> 
</div>

@php

    $match_time = strtotime($match->date_time_gmt. ' +5 hours 30 minutes');
    $time_remaining = $match_time - time();
    
@endphp

<div class="modal fade filter-modal-popup" id="success-modal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="container">
                <div class="modal-card-wrap text-center">
                    <div class="icon">
                        <i class="ri-check-line"></i>
                    </div>
                    <h3 class="title">Thank you for your prediction!</h3>
                    <p>You can modify your prediction up to 30 minutes before the match starts.</p>
                    <button type="button" class="btn btn-base w-100" data-bs-dismiss="modal">Okay</button>
                </div>
            </div>              
        </div>            
    </div>
</div>
<div class="page">
    <!-- Tab Navigation -->
    <div class="single-product-wrap">
                    <h6 class="title">{{ $match->match_type }}</h6>
                    <div class="details">
                        <div class="thumb">
                            <img src="{{ $match->mt1teamimg }}" width="65" alt="img">
                            <h6 class="team-name">{{ $match->team_1 }}</h6>
                        </div>

                        <div class="betting-wrap">
                            <h2>{{ date('h:i A', $match_time) }}</h2>
                            <div class="time">
                            {{ date('d M Y', $match_time) }}
                            </div>
                            <div class="time">
                                {{ $match->venue }}
                            </div>
                        </div>

                        <div class="thumb">
                            <img src="{{$match->mt2teamimg}}" width="65" alt="img">
                            <h6 class="team-name">{{ $match->team_2 }}</h6>
                        </div>
                    </div>
    </div>
    <ul class="nav nav-tabs mt-3" id="predictionTabs">
        <li class="nav-item">
        <button class="nav-link active" id="prediction-tab" data-bs-toggle="tab" data-bs-target="#prediction" type="button" role="tab" aria-controls="prediction" aria-selected="true">Prediction</button>
        </li>
        <li class="nav-item">
        <button class="nav-link " id="scoreboard-tab" data-bs-toggle="tab" data-bs-target="#scoreboard" type="button" role="tab" aria-controls="scoreboard" aria-selected="true">Scoreboard</button>
        </li>
        <li class="nav-item">
        <button class="nav-link " id="winner-tab" data-bs-toggle="tab" data-bs-target="#winner" type="button" role="tab" aria-controls="winner" aria-selected="true">Winner</button>
        </li>
    </ul>

    <!-- Tab Content -->
    <div class="tab-content mt-3">
        <!-- Prediction Tab -->
        <div class="tab-pane fade show active" id="prediction">
            @if($time_remaining > 900) <!-- 15-minute cutoff -->
                @if($prediction)
                    <!-- Edit Prediction Form -->
                    <form action="{{ route('doctor.update.prediction', $prediction->id) }}" method="POST">
                        @csrf
                        @method('POST')
                        <input type="hidden" name="match_id" value="{{ $match->match_id }}">
                @else
                    <!-- New Prediction Form -->
                    <form action="{{ route('doctor.submit.prediction') }}" method="POST">
                        @csrf
                        <input type="hidden" name="match_id" value="{{ $match->match_id }}">
                @endif

                <div class="single-product-wrap">
                    <!-- Winner Prediction -->
                    <div class="betting-type">
                        <label class="tlabel">Predict the Winner Team *</label>
                        <div class="team-list">
                            <div class="radio">
                            <input type="radio" name="winner" id="team1" value="{{ $match->team_1 }}" required 
                                {{ $prediction && $prediction->winner == $match->team_1 ? 'checked' : '' }}>
                            <label for="team1">
                                
                                {{ $match->team_1 }}
                            </label>
                            </div>
                            <div class="radio">
                            <input type="radio" name="winner" id="team2" value="{{ $match->team_2 }}" required 
                                {{ $prediction && $prediction->winner == $match->team_2 ? 'checked' : '' }}>
                            <label for="team2">
                                
                                {{ $match->team_2 }}
                            </label>
                            </div>
                        </div>
                    </div>

                   

                    <div class="form-group">
                    <label class="tlabel">Predict the <img src="{{ asset('assets/images/logo/4.png') }}" alt="Logo 2" width="50"> Scorer (Top Batsman who scores <img src="{{ asset('assets/images/logo/4.png') }}" alt="Logo 2" width="50"> )*</label>
                    <div class="player-list">
                        @foreach($players as $player)
                            <input type="radio" name="top_batter" id="batter_{{ $loop->index }}" 
                                value="{{ $player->name }}" required 
                                {{ $prediction && $prediction->top_batter == $player->name ? 'checked' : '' }}>
                            <label for="batter_{{ $loop->index }}">
                                <img src="{{ $player->playerImg }}" alt="{{ $player->name }}">
                                {{ $player->name }}<br>{{ $player->teamname }}
                            </label>
                        @endforeach
                    </div>
                </div>
				<div class="form-group">
                        <label class="tlabel">Predict the Score (Runs) of your selected Batsman *</label>
                        <input type="number" name="top_batter_score" min="1" max="300" class="form-control" required 
                        value="{{ $prediction->top_batter_score ?? '' }}" placeholder="Enter score">
                    </div>
				
				                    

                <div class="form-group">
                    <label class="tlabel">Predict the <img src="{{ asset('assets/images/logo/4.png') }}" alt="Logo 2" width="50"> wicket taker (Top Bowler who takes <img src="{{ asset('assets/images/logo/4.png') }}" alt="Logo 2" width="50"> wickets) *</label>
                    <div class="player-list">
                        @foreach($players as $player)
                            <input type="radio" name="top_bowler" id="bowler_{{ $loop->index }}" 
                                value="{{ $player->name }}" required 
                                {{ $prediction && $prediction->top_bowler == $player->name ? 'checked' : '' }}>
                            <label for="bowler_{{ $loop->index }}">
                                <img src="{{ $player->playerImg }}" alt="{{ $player->name }}">
                                {{ $player->name }}<br>{{ $player->teamname }}
                            </label>
                        @endforeach
                    </div>
                </div>
				
				<div class="form-group">
                        <label class="tlabel">Predict the number of Wickets of your selected Bowler *</label>
                        <input type="number" name="top_bowler_wicket" class="form-control" min="1" max="10" required 
                        value="{{ $prediction->top_bowler_wicket ?? '' }}" placeholder="Enter Wicket">
                    </div>

                  


                    <button type="submit" class="btn btn-base w-100 mt-3">
                        {{ $prediction ? 'Update Prediction' : 'Submit Prediction' }}
                    </button>
                </div>
            </form>
            @else
                <div class="alert alert-info">
                    <h6>Prediction Closed</h6>
                    <p class="text-white">Your submitted prediction:</p>
                    <ul>
                        <li><strong>Predict the Winner Team:</strong> {{ $prediction->winner ?? 'N/A' }}</li>
                        <li><strong>Predict the <img src="{{ asset('assets/images/logo/4.png') }}" alt="Logo 2" width="50"> Scorer (Top Batsman who scores <img src="{{ asset('assets/images/logo/4.png') }}" alt="Logo 2" width="50"> ):</strong> {{ $prediction->top_batter ?? 'N/A' }}</li>
                        <li><strong>Predict the Score (Runs) of your selected Batsman:</strong> {{ $prediction->top_batter_score ?? 'N/A' }}</li>
                        <li><strong>Predict the <img src="{{ asset('assets/images/logo/4.png') }}" alt="Logo 2" width="50"> wicket taker (Top Bowler who takes <img src="{{ asset('assets/images/logo/4.png') }}" alt="Logo 2" width="50"> wickets):</strong> {{ $prediction->top_bowler ?? 'N/A' }}</li>
						<li><strong>Predict the number of Wickets of your selected Bowler:</strong> {{ $prediction->top_bowler_wicket ?? 'N/A' }}</li>
                    </ul>
                </div>
            @endif
        </div>

        <!-- Scoreboard Tab -->
        <div class="tab-pane fade " id="scoreboard">
        <!--<h4 class="text-center">Scoreboard</h4>

<div class="match-summary">
    <h6 class="text-center">{{ $match->team_1 }} vs {{ $match->team_2 }}</h6>
    <p class="text-center">{{ $match->venue }} - {{ date('d M Y, h:i A', strtotime($match->date_time_gmt. ' +5 hours 30 minutes')) }}</p>
</div>-->

@foreach([$match->mt1id, $match->mt2id] as $team)
    @php
        $teamId = $team ?? null;
        $opponentTeamId = $teamId == $match->mt1id ? $match->mt2id : $match->mt1id;
		
		$teamname = App\Models\MatchTeam::where('id',$teamId)->first()->teamname;
		$score = App\Models\Scorecard::where('match_id',$match->match_id)->where('team_name',$teamname." Inning 1")->first() ?? null;
    @endphp


	@if($score)
	<div class="score">{{ $teamname." Inning" }} <span>{{$score->runs}}-{{$score->wickets}}/{{$score->overs}} Ov</span></div>
	
	{{-- Batting Performance --}}
    <table class="table">
		
        <thead>
            <tr>
                <th>Batsman</th>
                <th>R</th>
                <th>B</th>
                <th>4s</th>
                <th>6s</th>
            </tr>
        </thead>
        <tbody>
            @foreach($batsmens->where('team_id', $teamId) as $batsman)
                <tr>
                    <td>{{ $batsman->name }}</td>
                    <td>{{ $batsman->runs }}</td>
                    <td>{{ $batsman->balls }}</td>
                    <td>{{ $batsman->fours }}</td>
                    <td>{{ $batsman->sixes }}</td>
                </tr>
            @endforeach
        </tbody>
    </table>
    <table class="table">
        <thead>
            <tr>
                <th>Bowler</th>
                <th>O</th>
                <th>M</th>
                <th>W</th>
                <th>R</th>
            </tr>
        </thead>
        <tbody>
            @foreach($bowlers->where('team_id', $opponentTeamId) as $bowler)
                <tr>
                    <td>{{ $bowler->name }}</td>
                    <td>{{ $bowler->overs }}</td>
                    <td>{{ $bowler->maidens }}</td>
                    <td>{{ $bowler->wickets }}</td>
                    <td>{{ $bowler->runs_conceded }}</td>
                </tr>
            @endforeach
        </tbody>
    </table>
    @endif
@endforeach    
		</div>

        <div class="tab-pane fade " id="winner">
        <table class="table">
        <thead>
            <tr>
                <th>Rank</th>
                <th>User</th>
                <th>Points</th>
            </tr>
        </thead>
        <tbody>
            @foreach($dailyWinners as $index => $user)
                <tr>
                    <td>#{{ $index + 1 }}</td>
                    <td>{{ $user->doctorname }}</td>
                    <td>{{ $user->total_points }}</td>
                </tr>
            @endforeach
        </tbody>
    </table>
        </div>
    </div>
</div>
@endsection
@section('footers')
<script>
    setTimeout(function(){
       location.reload();
    }, 120000); // 120000 milliseconds = 2 minutes
</script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        @if(session('success'))
            var successModal = new bootstrap.Modal(document.getElementById('success-modal'));
            successModal.show();
        @endif
    });
</script>
@endsection