@extends('layouts.app')

@section('content')
<div class="container mx-auto py-8 px-4">
    {{-- League Header --}}
    <x-filters.league-header
        :league="$league"
        :mostFrequent="$most_frequent"
    />

    {{-- Matches Table --}}
    <div class="filter-card">
        <div class="filter-card-header">Meccsek</div>
        <div class="filter-card-body">
            <div class="mobile-sort-buttons">
                <button class="mobile-sort-button" data-sort="date">Rendezés dátum szerint</button>
                <button class="mobile-sort-button" data-sort="team">Rendezés csapat szerint</button>
            </div>
            <div class="filter-table-wrapper">
                <table id="dtBasicExample" class="filter-table display">
                    <thead>
                        <tr>
                            <th>Hazai csapat</th>
                            <th>Vendég csapat</th>
                            <th>Végeredmény</th>
                            <th class="desktop-only">Forduló</th>
                            <th class="desktop-only">Meccs kezdete</th>
                            <th class="desktop-only">Odds 1x2</th>
                            <th class="desktop-only">Odds különbség</th>
                            <th class="desktop-only">Odds pontos eredményre</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($filtered as $match)
                        <tr>
                            <td>
                                <span class="mobile-date-streak">
                                    <span class="mobile-date">{{ \Carbon\Carbon::parse($match->time->starting_at->date_time)->format('Y.m.d') }}</span>
                                </span>
                                <span class="team-name">
                                    {{ $match->localTeam->data->name }}
                                    @if(isset($match->localTeam->data->logo_path))
                                        <img class="team-logo desktop-only" src="{{ $match->localTeam->data->logo_path }}" alt="">
                                    @endif
                                </span>
                                <div class="mobile-icons">
                                    <span>Eredmény: {{ $match->scores->localteam_score ?? 0 }}-{{ $match->scores->visitorteam_score ?? 0 }}</span>
                                    @if(isset($match->round->data->name))
                                        <span>Forduló: {{ $match->round->data->name }}</span>
                                    @endif
                                </div>
                            </td>
                            <td>
                                <span class="team-name">
                                    {{ $match->visitorTeam->data->name }}
                                    @if(isset($match->visitorTeam->data->logo_path))
                                        <img class="team-logo desktop-only" src="{{ $match->visitorTeam->data->logo_path }}" alt="">
                                    @endif
                                </span>
                            </td>
                            <td>{{ $match->scores->localteam_score ?? 0 }}-{{ $match->scores->visitorteam_score ?? 0 }}</td>
                            <td class="desktop-only">{{ $match->round->data->name ?? '-' }}</td>
                            <td class="desktop-only">{{ $match->time->starting_at->date_time }}</td>
                            <td class="desktop-only">
                                <x-filters.odds-display :flatOdds="$match->flatOdds" />
                            </td>
                            <td class="desktop-only">
                                @if(isset($difference_between_odds))
                                    {{ $difference_between_odds }}
                                @else
                                    -
                                @endif
                            </td>
                            <td class="desktop-only">
                                @if(isset($pontos_eredmeny_array[$match->id]))
                                    @foreach($pontos_eredmeny_array[$match->id] as $score => $odds)
                                        <span class="text-green-600 font-bold">{{ $score }}</span>
                                        <span class="text-red-600">{{ $odds }}</span>
                                        <span class="text-green-600">|</span>
                                    @endforeach
                                @endif
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    {{-- Back Button --}}
    <div class="mt-8 text-center">
        <a href="/" class="btn-back">Vissza a főoldalra</a>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    var isMobile = window.innerWidth < 768;

    var table = $('#dtBasicExample').DataTable({
        "order": [[4, "asc"]],
        "language": {
            "url": "//cdn.datatables.net/plug-ins/1.10.24/i18n/Hungarian.json"
        },
        "pageLength": 25,
        "responsive": isMobile,
        "autoWidth": false,
        "scrollX": !isMobile,
        "columnDefs": [
            { responsivePriority: 1, targets: 0 },
            { responsivePriority: 2, targets: 1 },
            { responsivePriority: 3, targets: 4 },
            { responsivePriority: 4, targets: 2 }
        ]
    });

    // Mobile sort buttons
    $('.mobile-sort-button').on('click', function() {
        var sortType = $(this).data('sort');
        var currentOrder = table.order()[0];
        var newOrder;

        if (sortType === 'date') {
            newOrder = currentOrder[0] === 4 && currentOrder[1] === 'asc' ? [4, 'desc'] : [4, 'asc'];
        } else if (sortType === 'team') {
            newOrder = currentOrder[0] === 0 && currentOrder[1] === 'asc' ? [0, 'desc'] : [0, 'asc'];
        }

        table.order(newOrder).draw();

        $(this).siblings('.mobile-sort-button').removeClass('active');
        $(this).addClass('active');
    });
});
</script>
@endpush