@extends('layouts.app')

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

    /* League accordion */
    .league-accordion {
        background: linear-gradient(135deg, rgba(42, 44, 88, 0.7) 0%, rgba(30, 32, 60, 0.8) 100%);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        overflow: hidden;
        transition: all 0.3s ease;
    }

    .league-accordion:hover {
        border-color: rgba(255, 255, 255, 0.2);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    }

    .league-accordion-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

    .league-accordion-header:hover {
        background-color: rgba(255, 255, 255, 0.05);
    }

    .league-info {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .league-logo {
        width: 40px;
        height: 40px;
        object-fit: contain;
    }

    .league-name {
        font-size: 1.1rem;
        font-weight: 600;
        color: white !important;
    }

    .accordion-arrow {
        transition: transform 0.3s ease;
        color: rgba(255, 255, 255, 0.7);
    }

    .accordion-arrow.open {
        transform: rotate(180deg);
    }

    .league-accordion-content {
        padding: 0 16px 16px 16px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* Filter groups */
    .filter-group {
        margin-bottom: 12px;
    }

    .filter-group:last-child {
        margin-bottom: 0;
    }

    .filter-group-label {
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: rgba(255, 255, 255, 0.5) !important;
        margin-bottom: 6px;
        padding-top: 12px;
    }

    .filter-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    /* Filter buttons */
    .filter-btn {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 6px 12px;
        background-color: rgba(255, 255, 255, 0.1);
        color: white !important;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 6px;
        font-size: 0.8rem;
        font-weight: 500;
        text-decoration: none;
        transition: all 0.2s ease;
    }

    .filter-btn:hover {
        background-color: #25acee;
        border-color: #25acee;
        color: white !important;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(37, 172, 238, 0.3);
    }

    .filter-btn-icon {
        font-size: 0.9rem;
    }

    /* Filter type badges */
    .filter-btn.exact-score {
        background-color: rgba(59, 130, 246, 0.2);
        border-color: rgba(59, 130, 246, 0.4);
    }

    .filter-btn.draw {
        background-color: rgba(34, 197, 94, 0.2);
        border-color: rgba(34, 197, 94, 0.4);
    }

    .filter-btn.overall {
        background-color: rgba(168, 85, 247, 0.2);
        border-color: rgba(168, 85, 247, 0.4);
    }

    .filter-btn.stats {
        background-color: rgba(249, 115, 22, 0.2);
        border-color: rgba(249, 115, 22, 0.4);
    }

    .filter-btn.five-year {
        font-size: 0.7rem;
        padding: 4px 10px;
        opacity: 0.85;
    }

    /* No permission message */
    .no-permission {
        color: rgba(255, 100, 100, 0.8) !important;
        font-size: 0.875rem;
        padding: 16px 0;
    }

    /* Header styles */
    .header-card {
        background: linear-gradient(135deg, rgba(42, 44, 88, 0.7) 0%, rgba(30, 32, 60, 0.8) 100%);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* 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;
    }

    /* Section titles */
    .section-title {
        font-size: 1.5rem;
        font-weight: 600;
        text-align: center;
        color: rgba(255, 255, 255, 0.9) !important;
        margin-bottom: 20px;
    }

    /* Leagues list - single column, centered */
    .leagues-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
</style>

<!-- Header -->
<div class="mx-auto mb-6" style="max-width: 76.5rem;">
    <div class="p-6 header-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>

<!-- Leagues Section -->
<section class="mb-8">
    <div class="p-6 rounded-lg mx-auto" style="max-width: 76.5rem; background-color: rgba(255, 255, 255, 0.1);">
        <div class="section-title">Ligák és szűrők</div>
        <div class="leagues-list">
            @foreach ($leagues as $index => $league)
                @php
                    $leagueSlug = strtolower(str_replace(' ', '', $league->name));
                    $hasAnyPermission = false;

                    // Check all permissions
                    $canStats = auth()->user()?->can('megtekint '.$leagueSlug.' statisztika');
                    $canDraw = auth()->user()?->can('megtekint '.$leagueSlug.' dontetlen');
                    $canDraw5 = auth()->user()?->can('megtekint '.$leagueSlug.' dontetlen5eves');
                    $canTwoOne = auth()->user()?->can('megtekint '.$leagueSlug.' 2-1');
                    $canOneOne = auth()->user()?->can('megtekint '.$leagueSlug.' 1-1');
                    $canOneZero = auth()->user()?->can('megtekint '.$leagueSlug.' 1-0');
                    $canOverall = auth()->user()?->can('megtekint '.$leagueSlug.' osszesitett');
                    $canOverall5 = auth()->user()?->can('megtekint '.$leagueSlug.' osszesitett5eves');

                    $hasAnyPermission = $canStats || $canDraw || $canDraw5 || $canTwoOne || $canOneOne || $canOneZero || $canOverall || $canOverall5;
                    $hasExactScore = $canOneZero || $canOneOne || $canTwoOne;
                    $hasDrawFilters = $canDraw || $canDraw5;
                    $hasOverallFilters = $canOverall || $canOverall5;
                @endphp

                <div class="league-accordion" x-data="{ open: {{ $index === 0 ? 'true' : 'false' }} }">
                    <!-- Accordion Header -->
                    <div class="league-accordion-header" @click="open = !open">
                        <div class="league-info">
                            <img src="{{ asset('img/' . $league->image) }}" class="league-logo" alt="{{ $league->name }}">
                            <span class="league-name">{{ $league->name }}</span>
                        </div>
                        <svg class="accordion-arrow w-5 h-5" :class="{ 'open': open }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                        </svg>
                    </div>

                    <!-- Accordion Content -->
                    <div class="league-accordion-content" x-show="open" x-collapse>
                        @if($hasAnyPermission)
                            <!-- Pontos eredmények -->
                            @if($hasExactScore)
                                <div class="filter-group">
                                    <div class="filter-group-label">Pontos eredmények</div>
                                    <div class="filter-buttons">
                                        @if($canOneZero)
                                            <a href="{{ route('onezerofilter', $league->foreign_id) }}" class="filter-btn exact-score">
                                                <span class="filter-btn-icon">1-0</span>
                                            </a>
                                        @endif
                                        @if($canOneOne)
                                            <a href="{{ route('oneonefilter', $league->foreign_id) }}" class="filter-btn exact-score">
                                                <span class="filter-btn-icon">1-1</span>
                                            </a>
                                        @endif
                                        @if($canTwoOne)
                                            <a href="{{ route('twoonefilter', $league->foreign_id) }}" class="filter-btn exact-score">
                                                <span class="filter-btn-icon">2-1</span>
                                            </a>
                                        @endif
                                    </div>
                                </div>
                            @endif

                            <!-- Döntetlen szűrők -->
                            @if($hasDrawFilters)
                                <div class="filter-group">
                                    <div class="filter-group-label">Döntetlen szűrő</div>
                                    <div class="filter-buttons">
                                        @if($canDraw)
                                            <a href="{{ route('drawfilterscore', $league->foreign_id) }}" class="filter-btn draw draw-filter-btn">
                                                Éves
                                            </a>
                                        @endif
                                        @if($canDraw5)
                                            <a href="{{ route('drawfilter5year', $league->foreign_id) }}" class="filter-btn draw five-year draw-filter-btn">
                                                5 éves
                                            </a>
                                        @endif
                                    </div>
                                </div>
                            @endif

                            <!-- Összesített szűrők -->
                            @if($hasOverallFilters)
                                <div class="filter-group">
                                    <div class="filter-group-label">Összesített szűrő</div>
                                    <div class="filter-buttons">
                                        @if($canOverall)
                                            <a href="{{ route('overallfilter', $league->foreign_id) }}" class="filter-btn overall">
                                                Éves
                                            </a>
                                        @endif
                                        @if($canOverall5)
                                            <a href="{{ route('overallfilter5year', $league->foreign_id) }}" class="filter-btn overall five-year">
                                                5 éves
                                            </a>
                                        @endif
                                    </div>
                                </div>
                            @endif

                            <!-- Statisztika -->
                            @if($canStats)
                                <div class="filter-group">
                                    <div class="filter-group-label">Elemzés</div>
                                    <div class="filter-buttons">
                                        <a href="{{ route('league_statistics', $league->foreign_id) }}" class="filter-btn stats">
                                            <i class="fas fa-chart-bar"></i>
                                            Statisztika
                                        </a>
                                    </div>
                                </div>
                            @endif
                        @else
                            <p class="no-permission">Nincs jogosultságod a szűrésekhez.</p>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>

<!-- Calculator 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();
                $("#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);
                        $("#successMessage").fadeIn().delay(2000).fadeOut();
                    }
                },
                error: function(xhr, status, error) {
                    console.error("Error updating Magic Number:", error);
                    alert("Hiba történt a Magic Number frissítése során.");
                }
            });
        });
    });
</script>
@endsection