@using TIAMWebApp.Shared.Application.Models
@using TIAMWebApp.Shared.Application.Services
@inject TourService TourService
@inject IJSRuntime JSRuntime
@inject NavigationManager NavigationManager

<div class="container">
    <section class="game-section" style="max-width: 100%; overflow-x:hidden">
        <div class="text-center">
            <h1>Tours</h1>
            <h2>Please select!</h2>
        </div>
        <div class="owl-carousel custom-carousel owl-theme">
            @if (Tours != null && Tours.Any()) // Only render the loop if Tours has data
            {
                foreach (var item in Tours)
                {
                    <div class="item" style="background-image: url(@item.CoverImageUrl);">
                        <div class="item-desc" style="height: 100%; background-color: rgba(0,0,0,0.3);">
                            <p style="padding-top:70px">@item.Created</p>
                            <p>@item.FancyDescription</p>
                            @* <p>@item.TransferDestinationId</p> *@
                            <div>
                                <button class="btn btn-primary mt-auto" @onclick="@( ()=> Book(item.TransferDestinationId, 1))">1-3 passengers</button>
                                <button class="btn btn-primary mt-auto" @onclick="@( ()=> Book(item.TransferDestinationId, 2))">4-6 passengers</button>
                                <button class="btn btn-primary mt-auto" @onclick="@( ()=> Book(item.TransferDestinationId, 3))">7-8 passengers</button>
                            </div>
                            <div class="glass" style="position: absolute; top:0px; left:0px; padding:10px; width:100%">                                
                                <h4>@item.Title</h4>
                            </div>
                        </div>
                    </div>
                }
            }
            else
            {
                <p>Loading tours...</p>
            }
        </div>
    </section>
</div>

<script>
    function initializeOwlCarousel() {
    console.log("Initializing Owl Carousel..."); // For debugging
    $(".custom-carousel").owlCarousel({
    autoWidth: true,
    loop: true
    });
    // Ensure this runs only once per initialization
    $(document).ready(function () { // This ready might not be needed if called after DOM update
    $(".custom-carousel .item").off("click").on("click", function () { // Use .off().on() to prevent multiple handlers
    $(".custom-carousel .item").not($(this)).removeClass("active");
    $(this).toggleClass("active");
    });
    });
    }
</script>

@code {
    public List<TourInfo> Tours = new List<TourInfo>();
    private bool _owlCarouselInitialized = false;

    protected override async Task OnInitializedAsync()
    {
        Tours = (await TourService.GetAllAsync()).ToList();
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        // Only initialize Owl Carousel once, after data is loaded and rendered
        if (Tours != null && Tours.Any() && !_owlCarouselInitialized)
        {
            await JSRuntime.InvokeVoidAsync("initializeOwlCarousel");
            _owlCarouselInitialized = true; // Set flag to true after successful initialization
        }
    }

    private void Book(Guid id, int category)
    {
        NavigationManager.NavigateTo($"/book-a-tour/{id.ToString()}/{category}");
    }
}