@extends('doctor.layouts.app')

@section('content')

{{-- Logo Marquee --}}
@include('doctor.logos')

<div class="sports-wrap mt-4">

    {{-- Tabs --}}
    <ul class="nav nav-tabs">
        <li class="nav-item">
            <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#upcoming">Upcoming</button>
        </li>
        <li class="nav-item">
            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#live">Live</button>
        </li>
        <li class="nav-item">
            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#end">End</button>
        </li>
    </ul>

    <div class="tab-content mt-4">

        {{-- UPCOMING --}}
        <div class="tab-pane fade show active" id="upcoming">
            @foreach ($matches as $match)
<div class="match-card">
 
    {{-- Background layers --}}
    <div class="slash-bg"></div>
    <div class="glow-left"></div>
    <div class="glow-right"></div>
 
    <div class="card-inner">
 
        {{-- Top: match type + predicted badge --}}
        <div class="top-row">
            <span class="badge-pill badge-type">{{ $match->match_type }}</span>
 
            @if(App\Models\Prediction::where('match_id', $match->match_id)
                ->where('doctor_id', Auth::guard('enroll_doctor')->user()->doctorid)
                ->exists())
                <span class="badge-pill badge-predicted">✓ Predicted</span>
            @endif
        </div>
 
        {{-- Teams --}}
        <div class="teams-row">
 
            {{-- Home team --}}
            <div class="team-left">
                <div class="team-abbr">{{ str_ireplace('RCBW', 'RCB', $match->mt1shortname) }}</div>
                <div class="team-sub">{{ $match->team_1}}</div>
            </div>
 
            {{-- Center: VS + time --}}
            <div class="match-mid">
                <div class="vs-label">VS</div>
                <div class="time-display {{ $match->match_started ? 'live-text' : '' }}">
                    @if($match->match_started)
                        LIVE
                    @else
                        {{ date('h:i A', strtotime($match->date_time_gmt.' +5 hours 30 minutes')) }}
                    @endif
                </div>
                <div class="date-display">
                    {{ date('d M Y', strtotime($match->date_time_gmt.' +5 hours 30 minutes')) }}
                </div>
            </div>
 
            {{-- Away team --}}
            <div class="team-right">
                <div class="team-abbr dim">{{ str_ireplace('RCBW', 'RCB', $match->mt2shortname) }}</div>
                <div class="team-sub">{{ $match->mt2teamname ?? $match->team_2 }}</div>
            </div>
 
        </div>
 
        {{-- Footer --}}
        <div class="card-footer">
            <div class="footer-meta">
                @if($match->match_started)
                    <span class="live-dot"></span> Live Now · IST
                @else
                    {{ date('D, d M · H:i', strtotime($match->date_time_gmt.' +5 hours 30 minutes')) }} IST
                @endif
            </div>
            <a class="btn-details" href="{{ url('doctor/matchdetail/'.$match->match_id) }}">
                Details →
            </a>
        </div>
 
    </div>
</div>
@endforeach
        </div>

        {{-- LIVE --}}
        <div class="tab-pane fade" id="live">
            @if($livematches->count())
                @foreach ($livematches as $match)
			
			<div class="match-card">
 
    {{-- Background layers --}}
    <div class="slash-bg"></div>
    <div class="glow-left"></div>
    <div class="glow-right"></div>
 
    <div class="card-inner">
 
        {{-- Top: match type + predicted badge --}}
        <div class="top-row">
            <span class="badge-pill badge-type">{{ $match->match_type }}</span>
 
            @if(App\Models\Prediction::where('match_id', $match->match_id)
                ->where('doctor_id', Auth::guard('enroll_doctor')->user()->doctorid)
                ->exists())
                <span class="badge-pill badge-predicted">✓ Predicted</span>
            @endif
        </div>
 
        {{-- Teams --}}
        <div class="teams-row">
 
            {{-- Home team --}}
            <div class="team-left">
                <div class="team-abbr">{{ $match->mt1shortname }}</div>
                <div class="team-sub">{{ $match->team_1}}</div>
            </div>
 
            {{-- Center: VS + time --}}
            <div class="match-mid">
                <div class="vs-label">VS</div>
                <div class="time-display {{ $match->match_started ? 'live-text' : '' }}">
                    @if($match->match_started)
                        LIVE
                    @else
                        {{ date('h:i A', strtotime($match->date_time_gmt.' +5 hours 30 minutes')) }}
                    @endif
                </div>
                <div class="date-display">
                    {{ date('d M Y', strtotime($match->date_time_gmt.' +5 hours 30 minutes')) }}
                </div>
            </div>
 
            {{-- Away team --}}
            <div class="team-right">
                <div class="team-abbr dim">{{ $match->mt2shortname }}</div>
                <div class="team-sub">{{ $match->mt2teamname ?? $match->team_2 }}</div>
            </div>
 
        </div>
 
        {{-- Footer --}}
        <div class="card-footer">
            <div class="footer-meta">
                @if($match->match_started)
                    <span class="live-dot"></span> Live Now · IST
                @else
                    {{ date('D, d M · H:i', strtotime($match->date_time_gmt.' +5 hours 30 minutes')) }} IST
                @endif
            </div>
            <a class="btn-details" href="{{ url('doctor/matchdetail/'.$match->match_id) }}">
                Details →
            </a>
        </div>
 
    </div>
</div>
                    
                @endforeach
            @else
                <p class="text-center text-muted mt-4">No Live Match Right Now</p>
            @endif
        </div>

        {{-- END --}}
        <div class="tab-pane fade" id="end">
            @foreach ($endmatches as $match)
							<div class="match-card">
				 
					{{-- Background layers --}}
					<div class="slash-bg"></div>
					<div class="glow-left"></div>
					<div class="glow-right"></div>
				 
					<div class="card-inner">
				 
						{{-- Top: match type + predicted badge --}}
						<div class="top-row">
							<span class="badge-pill badge-type">{{ $match->match_type }}</span>
				 
							@if(App\Models\Prediction::where('match_id', $match->match_id)
								->where('doctor_id', Auth::guard('enroll_doctor')->user()->doctorid)
								->exists())
								<span class="badge-pill badge-predicted">✓ Predicted</span>
							@endif
						</div>
				 
						{{-- Teams --}}
						<div class="teams-row">
				 
							{{-- Home team --}}
							<div class="team-left">
								<div class="team-abbr">{{ $match->mt1shortname }}</div>
								<div class="team-sub">{{ $match->team_1}}</div>
							</div>
				 
							{{-- Center: VS + time --}}
							<div class="match-mid">
								<div class="vs-label">VS</div>
								<div class="time-display {{ $match->match_started ? 'live-text' : '' }}">
									ENDED
								</div>
								<div class="date-display">
									{{ date('d M Y h:i A', strtotime($match->date_time_gmt.' +5 hours 30 minutes')) }}
								</div>
							</div>
				 
							{{-- Away team --}}
							<div class="team-right">
								<div class="team-abbr dim">{{ $match->mt2shortname }}</div>
								<div class="team-sub">{{ $match->mt2teamname ?? $match->team_2 }}</div>
							</div>
				 
						</div>
				 
						{{-- Footer --}}
						<div class="card-footer">
							<div class="footer-meta">
								@if($match->match_started)
									<span class="live-dot"></span> Live Now · IST
								@else
									{{ date('D, d M · H:i', strtotime($match->date_time_gmt.' +5 hours 30 minutes')) }} IST
								@endif
							</div>
							<a class="btn-details" href="{{ url('doctor/matchdetail/'.$match->match_id) }}">
								Details →
							</a>
						</div>
				 
					</div>
				</div>
                
            @endforeach
        </div>

    </div>
</div>
<script>
// Tab switching
function switchTab(id, btn) {
  document.querySelectorAll('.tab-pane').forEach(p => p.classList.remove('active'));
  document.querySelectorAll('.nav-link').forEach(b => b.classList.remove('active'));
  document.getElementById(id).classList.add('active');
  btn.classList.add('active');
}
 
// Sparkles on cards
document.querySelectorAll('.match-card').forEach(card => {
  for (let i = 0; i < 10; i++) {
    const s = document.createElement('div');
    s.className = 'sparkle';
    const size = Math.random() > .5 ? 2 : 3;
    const colors = ['rgba(245,200,66,.65)','rgba(168,85,247,.65)','rgba(255,255,255,.5)','rgba(56,189,248,.55)'];
    Object.assign(s.style, {
      width: size+'px', height: size+'px',
      left: Math.random()*100+'%',
      top: (40 + Math.random()*60)+'%',
      background: colors[Math.floor(Math.random()*colors.length)],
      animationDuration: (4 + Math.random()*5)+'s',
      animationDelay: (Math.random()*6)+'s',
    });
    card.appendChild(s);
  }
});
</script>
@endsection