@extends('layouts.app')

<style>
    body {
        background-color: #f8f9fa;
    }
    .card {
        border: none;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        border-radius: 1rem;
        margin-bottom: 2rem;
    }
    .card-header {
        background-color: #007bff;
        color: white;
        font-weight: bold;
        border-top-left-radius: 1rem !important;
        border-top-right-radius: 1rem !important;
    }
    .table {
        color: #333;
    }
    .table thead th {
        border-bottom: 2px solid #007bff;
    }
    .table-responsive {
        max-height: 600px;
        overflow-y: auto;
    }
    .btn-back {
        background-color: #007bff;
        color: white;
        border-radius: 20px;
        padding: 10px 20px;
        text-decoration: none;
        transition: background-color 0.3s;
    }
    .btn-back:hover {
        background-color: #0056b3;
        color: white;
    }
    .team-logo {
        width: 20px;
        height: auto;
        margin-left: 5px;
    }
    .winning-odds {
        color: #41a825;
        font-size: 18px;
    }
    @media (max-width: 767px) {
        .mobile-date-streak {
            display: block;
            font-size: 0.8rem;
            color: #6c757d;
        }
        .mobile-sort-buttons {
            display: flex;
            justify-content: space-between;
            margin-bottom: 1rem;
        }
        .mobile-sort-button {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 0.5rem 1rem;
            border-radius: 0.25rem;
            font-size: 0.9rem;
        }
        .mobile-sort-button.active {
            background-color: #0056b3;
        }
        .mobile-icons {
            display: flex;
            flex-direction: column;
            font-size: 0.8rem;
        }
        .team-logo {
            width: 15px;
            height: auto;
        }
        .mobil-none {
            display: none;
        }
    }
</style>

@section('content')
<div class="container mx-auto py-8 px-4">    
    <div class="flex justify-center mb-8">
        <div class="w-full lg:w-1/2 xl:w-1/3">
            <div class="card">
                <div class="card-header p-6 text-center">
                    <div class="bg-blue-500 text-white rounded-full w-16 h-16 flex items-center justify-center mx-auto -mt-8 mb-4">
                        <img src="{{$league->logo_path}}" class="w-12 h-12" alt="league logo">
                    </div>
                    <h2 class="text-2xl font-bold mb-2">{{$league->name}}</h2>
                    <div class="text-gray-600">
                        <p class="font-semibold mb-2">Leggyakrabban előforduló eredmények:</p>
                        @foreach($most_frequent as $key => $most)
                            <p>{{$key}} ({{$most}}x fordult elő)</p>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">Meccsek</div>
        <div class="card-body">
            <div class="mobile-sort-buttons d-md-none">
                <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="table-responsive">
                <table id="dtBasicExample" class="table table-hover w-full">
                    <thead>
                        <tr>
                            <th class="p-3">Hazai csapat</th>
                            <th class="p-3">Vendég csapat</th>
                            <th class="p-3">Végeredmény</th>
                            <th class="p-3">Forduló</th>
                            <th class="p-3">Meccs kezdete</th>
                            <th class="p-3">Odds 1x2</th>
                            <th class="p-3">Odds különbség</th>
                            <th class="p-3">Odds pontos eredményre</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($filtered as $season)
                        <tr class="border-t hover:bg-gray-50">
                            <td class="p-3">
                                <img class="team-logo mobil-none" src="{{$season->localTeam->data->logo_path}}">
                                <span class="mobile-date-streak d-md-none">
                                    <span class="mobile-date">{{ \Carbon\Carbon::parse($season->time->starting_at->date_time)->format('Y.m.d') }}</span>
                                </span>

                                {{$season->localTeam->data->name}}


                                <div class="mobile-icons d-md-none">
                                    <span>Végeredmény: {{$season->scores->localteam_score}}-{{$season->scores->visitorteam_score}}</span>
                                    <span>Forduló: {{$season->round->data->name}}</span>
                                </div>
                            </td>
                            <td class="p-3">
                                {{$season->visitorTeam->data->name}}
                                <img class="team-logo mobil-none" src="{{$season->visitorTeam->data->logo_path}}">
                            </td>
                            <td class="p-3">{{$season->scores->localteam_score}}-{{$season->scores->visitorteam_score}}</td>
                            <td class="p-3">{{$season->round->data->name}}</td>
                            <td class="p-3">{{$season->time->starting_at->date_time}}</td>
                            <td class="p-3">
                                @if($season->flatOdds->data != null)
                                    @foreach($season->flatOdds->data as $threeway_odds)
                                        @if($threeway_odds->market_id == 1)
                                            <div class="@if($threeway_odds->odds[0]->winning) winning-odds @endif">Hazai: {{$threeway_odds->odds[0]->value}}</div>
                                            <div class="@if($threeway_odds->odds[1]->winning) winning-odds @endif">Döntetlen: {{$threeway_odds->odds[1]->value}}</div>
                                            <div class="@if($threeway_odds->odds[2]->winning) winning-odds @endif">Vendég: {{$threeway_odds->odds[2]->value}}</div>
                                        @endif
                                    @endforeach
                                @else
                                    Hiányzó adat
                                @endif
                            </td>
                            <td class="p-3">
                                @if(isset($difference_between_odds))
                                    {{$difference_between_odds}}
                                @else
                                    Hiányzó adat
                                @endif
                            </td>
                            <td class="p-3">
                                @if($season->flatOdds->data != null)
                                    @foreach($season->flatOdds->data as $pontoseredmeny)
                                        @if($pontoseredmeny->market_id == 975909)
                                            @foreach($pontos_eredmeny_array as $key => $asd)
                                                @if($season->id == $key)
                                                    @foreach($asd as $k => $v)
                                                    <span class="text-green-600 font-bold">{{$k}} -</span> <span class="text-red-600">{{$v}}</span> <span class="text-green-600 font-bold">|</span>
                                                    @endforeach
                                                @endif
                                            @endforeach
                                        @endif
                                    @endforeach
                                @endif
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    
    <div class="mt-8 text-center">
        <a href="/" class="btn-back">Vissza a főoldalra</a>
    </div>
</div>

<script>
    $(document).ready(function () {
        var table = $('#dtBasicExample').DataTable({
            order: [[4, 'asc']],
            language: {
                url: "//cdn.datatables.net/plug-ins/1.10.24/i18n/Hungarian.json"
            },
            pageLength: 25,
            responsive: true,
            columnDefs: [
                { responsivePriority: 1, targets: 0 },
                { responsivePriority: 2, targets: 1 },
                { responsivePriority: 3, targets: 4 },
                { responsivePriority: 4, targets: 2 },
                { responsivePriority: 5, targets: 3 },
                { responsivePriority: 6, targets: 5 },
                { responsivePriority: 7, targets: 6 },
                { responsivePriority: 8, targets: 7 }
            ]
        });

        // Mobilos rendezési gombok kezelése
        $('.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();

            // Aktív gomb stílusának frissítése
            $('.mobile-sort-button').removeClass('active');
            $(this).addClass('active');
        });

        $("#loading").show();
    });

    $(window).on('load', function(){
        $("#loading").hide();
    });
</script>

@endsection