@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;
        }

        .dtr-control
        {
            padding:0px !important;
        }
    }
</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-white">
                        <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 mb-8">
        <div class="card-header">Szűrési beállítások</div>
        <div class="card-body">
            <form class="px-8 pt-6 pb-8 mb-4" method="POST" action="{{route('league_stat_filtered', $league->id)}}">
                @csrf
                <div class="flex flex-wrap -mx-3 mb-4">
                    <div class="w-full md:w-1/4 px-3 mb-6 md:mb-0">
                        <label class="block uppercase tracking-wide text-white text-xs font-bold mb-2" for="start-date">
                            Min Dátum:
                        </label>
                        <input class="appearance-none block w-full bg-gray-200 text-white border rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white" type="date" min="2018-01-01" required id="start-date" name="start_time">
                    </div>
                    <div class="w-full md:w-1/4 px-3 mb-6 md:mb-0">
                        <label class="block uppercase tracking-wide text-white text-xs font-bold mb-2" for="end-date">
                            Max Dátum:
                        </label>
                        <input class="appearance-none block w-full bg-gray-200 text-white border rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white" type="date" required id="end-date" name="end_time">
                    </div>
                    <div class="w-full md:w-1/4 px-3 mb-6 md:mb-0">
                        <label class="block uppercase tracking-wide text-white text-xs font-bold mb-2" for="filterSelect">
                            Szürési mód:
                        </label>
                        <select id="filterSelect" class="block appearance-none w-full bg-gray-200 border border-gray-200 text-white py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500">
                            <option selected disabled>Válassz szürési módot!</option>
                            <option value="odds_interval_option">Szürés Odds különbségre</option>
                            <option value="odds_specified_option">Szürés Pontos Eredmény Odds különbségre</option>
                        </select>
                    </div>
                </div>
                <div id="oddsIntervalInputs" class="hidden flex flex-wrap -mx-3 mb-4">
                    <div class="w-full md:w-1/4 px-3 mb-6 md:mb-0">
                        <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="start-number">
                            Min odds
                        </label>
                        <input type="number" pattern="^\d+(?:\.\d{1,2})?$" class="appearance-none block w-full bg-gray-200 text-gray-700 border rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white" step=".01" id="start-number" name="odds_interval_start">
                    </div>
                    <div class="w-full md:w-1/4 px-3 mb-6 md:mb-0">
                        <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="end-number">
                            Max Odds
                        </label>
                        <input type="number" pattern="^\d+(?:\.\d{1,2})?$" class="appearance-none block w-full bg-gray-200 text-gray-700 border rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white" step=".01" id="end-number" name="odds_interval_end">
                    </div>
                </div>
                <div id="oddsSpecifiedInputs" class="hidden flex flex-wrap -mx-3 mb-4">
                    <div class="w-full md:w-1/4 px-3 mb-6 md:mb-0">
                        <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="start-number-specified">
                            Min Odds Pontos Eredményre
                        </label>
                        <input type="number" pattern="^\d+(?:\.\d{1,2})?$" class="appearance-none block w-full bg-gray-200 text-gray-700 border rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white" step=".01" id="start-number-specified" name="odds_specified_start">
                    </div>
                    <div class="w-full md:w-1/4 px-3 mb-6 md:mb-0">
                        <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="end-number-specified">
                            Max Odds Pontos Eredményre
                        </label>
                        <input type="number" pattern="^\d+(?:\.\d{1,2})?$" class="appearance-none block w-full bg-gray-200 text-gray-700 border rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white" step=".01" id="end-number-specified" name="odds_specified_end">
                    </div>
                    <div class="w-full md:w-1/4 px-3 mb-6 md:mb-0">
                        <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="specified">
                            Pontos Eredmény
                        </label>
                        <select id="specified" name="specified_end" class="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500">
                            <option selected disabled>Válassz szürési módot!</option>
                            <option value="0:2">0:2</option>
                            <option value="1:2">1:2</option>
                            <option value="2:1">2:1</option>
                            <option value="0:1">0:1</option>
                            <option value="1:0">1:0</option>
                            <option value="1:1">1:1</option>
                        </select>
                    </div>
                </div>
                <div class="flex items-center justify-between">
                    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">
                        Keresés
                    </button>
                </div>
            </form>
        </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">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($leagueSeasons as $leagueseason)
                        @foreach($leagueseason->results->data as $season)
                        <tr class="border-t hover:bg-gray-50">
                            <td class="p-3">
                                {{$season->localTeam->data->name}}
                                <img class="team-logo" 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>
                                <div class="mobile-icons d-md-none">
                                    <span>Végeredmény: {{$season->scores->localteam_score}}-{{$season->scores->visitorteam_score}}</span>
                                </div>
                            </td>
                            <td class="p-3">
                                {{$season->visitorTeam->data->name}}
                                <img class="team-logo" 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->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
                        @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: [[3, '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: 3 },
                { responsivePriority: 4, targets: 2 },
                { responsivePriority: 5, targets: 4 },
                { responsivePriority: 6, targets: 5 },
                { responsivePriority: 7, targets: 6 }
            ]
        });

        // 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] === 3 && currentOrder[1] === 'asc' ? [3, 'desc'] : [3, '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');
        });

        $('#filterSelect').change(function() {
            if ($(this).val() === 'odds_interval_option') {
                $('#oddsIntervalInputs').removeClass('hidden');
                $('#oddsSpecifiedInputs').addClass('hidden');
            } else if ($(this).val() === 'odds_specified_option') {
                $('#oddsIntervalInputs').addClass('hidden');
                $('#oddsSpecifiedInputs').removeClass('hidden');
            } else {
                $('#oddsIntervalInputs').addClass('hidden');
                $('#oddsSpecifiedInputs').addClass('hidden');
            }
        });
    });
</script>

@endsection