@extends('layouts.app')

@section('content')
<style>
    /* Felsők container (header) */
    header .card {
        background-color: rgba(42, 44, 88, 0.5) !important;
    }

    /* Alsó containerek */
    .league-card {
        backdrop-filter: blur(10px);
        border: none;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
    }

    .league-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    }

    /* Gombok override-ja */
    .btn, .btn-primary {
        color: #2a2c55 !important;
        background-color: white !important;
        border: none !important;
        transition: all 0.3s ease !important;
        font-family: "Open Sans", sans-serif !important;
    }

    .btn:hover, .btn-primary:hover {
        background-color: #25acee !important;
        color: white !important;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    /* Szöveg színek */
    h1, h2, h3, h4, h5, h6, p, span, div {
        color: white !important;
        font-family: "Open Sans", sans-serif !important;
    }

    /* Input mezők stílusa */
    #magicNumberInput {
        background-color: rgba(255, 255, 255, 0.1) !important;
        color: white !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        font-family: "Open Sans", sans-serif !important;
    }

    #magicNumberInput::placeholder {
        color: rgba(255, 255, 255, 0.7) !important;
    }

    /* Success és error üzenetek */
    #successMessage {
        background-color: rgba(40, 167, 69, 0.8) !important;
        color: white !important;
        font-family: "Open Sans", sans-serif !important;
    }

    .error-popup {
        background-color: rgba(220, 53, 69, 0.9) !important;
        color: white !important;
        font-family: "Open Sans", sans-serif !important;
    }

    /* League logo stílus */
    .league-logo {
        width: 60px;
        height: 60px;
        margin-bottom: 10px;
    }

    /* Content area */
    .content {
        position: relative;
        z-index: 1;
        padding: 20px;
        color: white;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        font-family: "Open Sans", sans-serif;
    }
</style>

<!-- Header -->
    <div class="container mx-auto px-4 lg:px-8">
        <div class="p-6 card rounded-lg text-center">
            <h1 class="text-4xl font-bold mb-4">BETstrategies</h1>
            <p class="text-xl mb-6">Döntetlen szűrő varázsszáma</p>
            <div class="mb-4 flex justify-center items-center">
                <input id="magicNumberInput" type="number" class="mr-4 p-2 border rounded" value="{{ $magicnumber ?? '' }}">
                <button id="saveMagicNumber" type="button" class="btn btn-primary px-4 py-2 rounded">Mentés</button>
            </div>
            
            <!-- Success Message -->
            <div id="successMessage" class="hidden mt-2 p-2 rounded">
                Magic Number sikeresen frissítve!
            </div>
        </div>
    </div>


<!-- Page Content -->
<section class="pt-4 mb-10">
    <div class="container mx-auto px-4 lg:px-8">
        <!-- Page Features -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            @foreach ($leagues as $league)
                @php
                    $leagueSlug = strtolower(str_replace(' ', '', $league->name));
                    $hasAnyPermission = false;
                @endphp
                <div class="league-card rounded-lg p-6 text-center card">
                    <div class="mb-4">
                        <img src="{{ asset('img/' . $league->image) }}" class="w-16 h-16 mx-auto" alt="leaguelogo">
                    </div>
                    <div class="space-y-2">
                        @can('megtekint '.$leagueSlug.' statisztika')
                            @php $hasAnyPermission = true; @endphp
                            <a href="{{ route('league_statistics', $league->foreign_id) }}" class="btn btn-primary block px-4 py-2 rounded">Éves statisztika</a>
                        @endcan
                        @can('megtekint '.$leagueSlug.' dontetlen')
                            @php $hasAnyPermission = true; @endphp
                            <a href="{{ route('drawfilterscore', $league->foreign_id) }}" class="btn btn-primary block px-4 py-2 rounded draw-filter-btn">Döntetlen szűrő</a>
                        @endcan
                        @can('megtekint '.$leagueSlug.' dontetlen5eves')
                            @php $hasAnyPermission = true; @endphp
                            <a href="{{ route('drawfilter5year', $league->foreign_id) }}" class="btn btn-primary block px-4 py-2 rounded draw-filter-btn">Ötéves Döntetlen szűrő</a>
                        @endcan
                        @can('megtekint '.$leagueSlug.' 2-1')
                            @php $hasAnyPermission = true; @endphp
                            <a href="{{ route('twoonefilter', $league->foreign_id) }}" class="btn btn-primary block px-4 py-2 rounded">2-1 szűrő</a>
                        @endcan
                        @can('megtekint '.$leagueSlug.' 1-1')
                            @php $hasAnyPermission = true; @endphp
                            <a href="{{ route('oneonefilter', $league->foreign_id) }}" class="btn btn-primary block px-4 py-2 rounded">1-1 szűrő</a>
                        @endcan
                        @can('megtekint '.$leagueSlug.' 1-0')
                            @php $hasAnyPermission = true; @endphp
                            <a href="{{ route('onezerofilter', $league->foreign_id) }}" class="btn btn-primary block px-4 py-2 rounded">1-0 szűrő</a>
                        @endcan
                        @can('megtekint '.$leagueSlug.' osszesitett')
                            @php $hasAnyPermission = true; @endphp
                            <a href="{{ route('overallfilter', $league->foreign_id) }}" class="btn btn-primary block px-4 py-2 rounded">Pontos eredmények szűrő táblázat</a>
                        @endcan
                        @can('megtekint '.$leagueSlug.' osszesitett5eves')
                            @php $hasAnyPermission = true; @endphp
                            <a href="{{ route('overallfilter5year', $league->foreign_id) }}" class="btn btn-primary block px-4 py-2 rounded">Ötéves Pontos eredmények szűrő táblázat</a>
                        @endcan

                        @if(!$hasAnyPermission)
                            <p class="text-red-300">Ennek a ligának a szűréseinek megtekintéséhez nincs jogosultságod.</p>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>

<x-bet-planning-calculator />

<script>
    $(document).ready(function(){
        $(".draw-filter-btn").on("click", function(e) {
            const magicNumberValue = $("#magicNumberInput").val();
            
            if (!magicNumberValue || magicNumberValue.trim() === '') {
                e.preventDefault(); // Prevent the default link behavior
                $("#errorPopup").fadeIn().delay(3000).fadeOut();
            }
        });

        $("#saveMagicNumber").on("click", function() {
            const magicNumberValue = $("#magicNumberInput").val();

            $.ajax({
                url: '/update-or-create-magic-number',
                method: 'POST',
                data: {
                    magicnumber: magicNumberValue,
                    _token: $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    if (response.status === 'success') {
                        console.log("Magic Number updated successfully!");
                        $("#magicNumberInput").val(response.magicnumber);
                        // Sikeres visszajelzés megjelenítése
                        $("#successMessage").fadeIn().delay(2000).fadeOut();
                    }
                },
                error: function(xhr, status, error) {
                    console.error("Error updating Magic Number:", error);
                    // Hiba üzenet megjelenítése (opcionális)
                    alert("Hiba történt a Magic Number frissítése során.");
                }
            });
        });
    });
</script>
@endsection