@extends('layouts.app')

@section('title', __('messages.live') . ' - ' . __('messages.app_name'))
@section('description', __('messages.live_meta'))

@section('content')
@php
    use App\Services\Translator;

    $lang = app()->getLocale();
    $selectedDate = request()->get('date', date('Y-m-d'));
    $isToday = $selectedDate === date('Y-m-d');
    $dateFormatted = '';
    try {
        $dateFormatted = \Carbon\Carbon::parse($selectedDate)->locale($lang)->translatedFormat('l d F Y');
    } catch (\Exception $e) {
        $dateFormatted = $selectedDate;
    }

    $showOnlyLive = request()->get('live') === '1';
    $liveLabel = $lang === 'ar' ? 'مباشر' : 'LIVE';
@endphp

<div class="max-w-[900px] mx-auto bg-white dark:bg-darkBg">

    {{-- ===== TOP BAR: Date chip + LIVE toggle ===== --}}
    <div class="flex items-center px-3 py-2 bg-white dark:bg-darkBg">
        {{-- Date chip --}}
        <form id="date-form" action="{{ route('live') }}" method="GET" class="inline-flex">
            @if($showOnlyLive)
                <input type="hidden" name="live" value="1">
            @endif
            <label class="relative inline-flex items-center gap-1.5 px-3 rounded-full text-white cursor-pointer" style="background: linear-gradient(to top left, #162422, #2e8b6b); height: 36px;">
                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V10h14v10zM5 8V6h14v2H5z"/>
                </svg>
                <span style="font-size: 11px;" class="font-medium">{{ $dateFormatted }}</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M7 10l5 5 5-5H7z"/>
                </svg>
                <input type="date" name="date" value="{{ $selectedDate }}" onchange="this.form.submit()" class="absolute inset-0 opacity-0 cursor-pointer">
            </label>
        </form>

        <div class="flex-1"></div>

        {{-- LIVE toggle (only shown if today) --}}
        @if($isToday)
            <a href="{{ route('live') }}{{ $showOnlyLive ? '' : '?live=1' }}" class="inline-flex items-center gap-1.5 px-2.5 rounded-full border transition-all" style="height: 30px; {{ $showOnlyLive ? 'background:#E53935;border-color:#E53935;box-shadow:0 2px 6px rgba(229,57,53,0.3);' : 'background:white;border-color:#E0E0E0;' }}">
                <span class="w-1.5 h-1.5 rounded-full {{ $showOnlyLive ? 'bg-white animate-pulse' : 'bg-[#E53935]' }}"></span>
                <span class="font-bold {{ $showOnlyLive ? 'text-white' : 'text-[#333]' }}" style="font-size: 10px;">{{ $liveLabel }}</span>
            </a>
        @endif
    </div>

    {{-- ===== MATCH LIST GROUPED BY LEAGUE ===== --}}
    @if(empty($groupedMatches))
        <div class="flex flex-col items-center justify-center py-20">
            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="#d1d5db">
                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
                <circle cx="12" cy="12" r="4"/>
            </svg>
            <p class="text-gray-500 mt-3" style="font-size: 14px;">
                {{ $showOnlyLive ? ($lang === 'ar' ? 'لا توجد مباريات مباشرة' : 'Aucun match en direct') : ($lang === 'ar' ? 'لا توجد مباريات اليوم' : 'Aucun match aujourd\'hui') }}
            </p>
        </div>
    @else
        <div class="pb-28">
            @foreach($groupedMatches as $group)
                {{-- ===== LEAGUE HEADER ===== --}}
                <div class="flex items-center px-2.5 py-1.5 mx-2.5 mt-2 rounded-xl text-white" style="background: linear-gradient(to top left, #162422, #2e8b6b);">
                    {{-- League logo --}}
                    <div class="w-6 h-6 bg-white rounded-md p-0.5 flex items-center justify-center flex-shrink-0">
                        @if(!empty($group['league_logo']))
                            <img src="{{ $group['league_logo'] }}" alt="" class="w-5 h-5 object-contain" loading="lazy">
                        @else
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="#162422">
                                <path d="M5 16L3 5l5.5 5L12 4l3.5 6L21 5l-2 11H5z"/>
                            </svg>
                        @endif
                    </div>

                    {{-- League name --}}
                    <span class="flex-1 ms-2.5 font-bold text-white truncate" style="font-size: 11px;">{{ Translator::league($group['league_name'], $group['country'] ?? null) }}</span>

                    {{-- Country --}}
                    @if(!empty($group['country']))
                        <span class="ms-2 text-white/70" style="font-size: 10px;">{{ Translator::country($group['country']) }}</span>
                    @endif
                </div>

                {{-- ===== MATCH ROWS ===== --}}
                @foreach($group['matches'] as $match)
                    <a href="{{ route('match.show', $match['fixture_id']) }}" class="flex items-center mx-2.5 my-[3px] px-2.5 py-2 bg-white rounded-[10px] border {{ $match['status'] === 'LIVE' ? 'border-[#E53935]' : 'border-black/10' }}" style="border-width: {{ $match['status'] === 'LIVE' ? '1.5px' : '0.5px' }};">
                        {{-- Home: logo + name --}}
                        <div class="flex-[3] flex items-center gap-1.5 min-w-0">
                            <div class="w-[22px] h-[22px] rounded-full bg-gray-200 flex items-center justify-center overflow-hidden flex-shrink-0">
                                @if(!empty($match['home_logo']))
                                    <img src="{{ $match['home_logo'] }}" alt="" class="w-full h-full object-contain" loading="lazy">
                                @else
                                    <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="currentColor" class="text-gray-400">
                                        <path d="M12 2L4 5v6c0 5.5 3.8 10.7 8 12 4.2-1.3 8-6.5 8-12V5l-8-3z"/>
                                    </svg>
                                @endif
                            </div>
                            <span class="font-semibold text-black/70 line-clamp-1" style="font-size: 10px;">{{ Translator::team($match['home_name']) }}</span>
                        </div>

                        {{-- Center: score/time/status --}}
                        <div class="flex items-center justify-center text-center flex-shrink-0 px-1" style="width: {{ $match['status'] === 'LIVE' ? '100px' : '70px' }};">
                            @if($match['status'] === 'LIVE')
                                <div class="flex items-center justify-center gap-1">
                                    <span class="font-bold text-[#E53935]" style="font-size: 15px;">{{ $match['home_score'] ?? 0 }}</span>
                                    {{-- Circular live timer --}}
                                    <div class="relative w-9 h-9 flex items-center justify-center">
                                        <svg class="absolute inset-0 -rotate-90" width="36" height="36" viewBox="0 0 36 36">
                                            {{-- Background circle --}}
                                            <circle cx="18" cy="18" r="15" fill="none" stroke="#E8E8E8" stroke-width="3" stroke-linecap="round"/>
                                            {{-- Progress arc --}}
                                            @php
                                                $elapsed = min(90, max(0, $match['elapsed'] ?? 0));
                                                $circumference = 2 * M_PI * 15;
                                                $progress = ($elapsed / 90) * $circumference;
                                                $remaining = $circumference - $progress;
                                            @endphp
                                            <circle cx="18" cy="18" r="15" fill="none" stroke="#38A169" stroke-width="3" stroke-linecap="round" stroke-dasharray="{{ $circumference }}" stroke-dashoffset="{{ $remaining }}"/>
                                        </svg>
                                        <span class="relative font-bold text-[#38A169]" style="font-size: 9px;">{{ $match['elapsed'] ?? 0 }}'</span>
                                    </div>
                                    <span class="font-bold text-[#E53935]" style="font-size: 15px;">{{ $match['away_score'] ?? 0 }}</span>
                                </div>
                            @elseif($match['status'] === 'FT')
                                <div class="flex flex-col items-center">
                                    <div class="bg-[#38A169] text-white font-bold rounded" style="padding: 1px 6px; font-size: 8px;">{{ __('messages.finished') }}</div>
                                    <div class="font-bold text-[#2e8b6b] mt-0.5" style="font-size: 13px;">{{ $match['home_score'] ?? 0 }} - {{ $match['away_score'] ?? 0 }}</div>
                                </div>
                            @elseif(in_array($match['status'], ['PST', 'CANC', 'ABD', 'SUSP']))
                                <div class="bg-orange-500 text-white font-bold rounded" style="padding: 2px 6px; font-size: 9px;">
                                    {{ $match['status'] === 'PST' ? ($lang === 'ar' ? 'مؤجلة' : 'Reportée') : strtoupper($match['status']) }}
                                </div>
                            @else
                                <span class="font-bold text-[#2e8b6b]" style="font-size: 12px;">{{ $match['time'] ?? '--:--' }}</span>
                            @endif
                        </div>

                        {{-- Away: name + logo --}}
                        <div class="flex-[3] flex items-center gap-1.5 justify-end min-w-0">
                            <span class="font-semibold text-black/70 line-clamp-1 text-end" style="font-size: 10px;">{{ Translator::team($match['away_name']) }}</span>
                            <div class="w-[22px] h-[22px] rounded-full bg-gray-200 flex items-center justify-center overflow-hidden flex-shrink-0">
                                @if(!empty($match['away_logo']))
                                    <img src="{{ $match['away_logo'] }}" alt="" class="w-full h-full object-contain" loading="lazy">
                                @else
                                    <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="currentColor" class="text-gray-400">
                                        <path d="M12 2L4 5v6c0 5.5 3.8 10.7 8 12 4.2-1.3 8-6.5 8-12V5l-8-3z"/>
                                    </svg>
                                @endif
                            </div>
                        </div>
                    </a>
                @endforeach
            @endforeach
        </div>
    @endif

</div>
@endsection