@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"
    />

    {{-- Filter Form Card --}}
    <div class="filter-card mb-8">
        <div class="filter-card-header">Szűrési beállítások</div>
        <div class="filter-card-body">
            <form method="POST" action="{{ route('league_stat_filtered', $league->id) }}">
                @csrf
                <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
                    <div>
                        <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="start-date">
                            Min Dátum:
                        </label>
                        <input class="bet-form-input" type="date" min="2018-01-01" required id="start-date" name="start_time">
                    </div>
                    <div>
                        <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="end-date">
                            Max Dátum:
                        </label>
                        <input class="bet-form-input" type="date" required id="end-date" name="end_time">
                    </div>
                    <div>
                        <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="filterSelect">
                            Szürési mód:
                        </label>
                        <select id="filterSelect" class="bet-form-input">
                            <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>

                {{-- Odds Interval Inputs --}}
                <div id="oddsIntervalInputs" class="hidden grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
                    <div>
                        <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="bet-form-input" step=".01" id="start-number" name="odds_interval_start">
                    </div>
                    <div>
                        <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="bet-form-input" step=".01" id="end-number" name="odds_interval_end">
                    </div>
                </div>

                {{-- Specified Odds Inputs --}}
                <div id="oddsSpecifiedInputs" class="hidden grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
                    <div>
                        <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="bet-form-input" step=".01" id="start-number-specified" name="odds_specified_start">
                    </div>
                    <div>
                        <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="bet-form-input" step=".01" id="end-number-specified" name="odds_specified_end">
                    </div>
                    <div>
                        <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="bet-form-input">
                            <option selected disabled>Válassz!</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>

                <button class="bet-form-submit w-auto px-8" type="submit">
                    Keresés
                </button>
            </form>
        </div>
    </div>

    {{-- 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">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($leagueSeasons as $leagueseason)
                            @foreach($leagueseason->results->data 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>
                                    </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->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
                        @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": [[3, "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: 3 },
            { 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] === 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();

        $(this).siblings('.mobile-sort-button').removeClass('active');
        $(this).addClass('active');
    });

    // Filter mode toggle
    $('#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>
@endpush