@extends('layouts.app')

@section('content')
<div class="container mx-auto px-4 py-8">
    {{-- Page Header --}}
    <x-filters.page-header title="Összesített szűrő táblázat (5 év)" />

    <div class="max-w-6xl mx-auto">
        {{-- Bet Calculation Forms --}}
        <x-filters.bet-forms
            :filterType="$filter_type"
            :leagueId="$league_id"
            :use5YearRoutes="true"
        />

        {{-- Past Matches Table --}}
        <x-filters.match-table
            :matches="$matches"
            tableId="matches-table"
            title="Múltbeli meccsek összesített szűrési táblázat"
            type="past"
            filterType="overall"
            :showStreak="true"
            :showResult="true"
        >
            <x-filters.streak-info
                :allStreaks="$all_streaks"
            />
        </x-filters.match-table>

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

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

    var matchesTable = $('#matches-table').DataTable({
        "order": [[5, "desc"]],
        "language": {
            "url": "//cdn.datatables.net/plug-ins/1.10.24/i18n/Hungarian.json"
        },
        "pageLength": 25,
        "responsive": isMobile,
        "autoWidth": false,
        "scrollX": !isMobile,
        "columnDefs": [
            {
                "targets": 0,
                "render": function(data, type, row, meta) {
                    if (type === 'sort') {
                        var $cell = $('<div>').html(data);
                        return $cell.find('.mobile-date').text();
                    }
                    return data;
                }
            },
            {
                "targets": 5,
                "render": function(data, type, row, meta) {
                    if (type === 'sort') {
                        var $cell = $('<div>').html(row[0]);
                        return $cell.find('.mobile-streak').text();
                    }
                    return data;
                }
            }
        ]
    });

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

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

        table.order(newOrder).draw();

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