@extends('layouts.master')

@section('title')
    @lang('translation.dashboard')
@endsection


@section('content')
    <link rel="stylesheet" href="{{ URL::asset('css/dashboard-index.css') }}">
    @include('partials.session')

    <canvas id="coinCanvas"></canvas>

    <!-- Opening Note & Filter -->
    <div class="row mb-3 pb-1">
        <div class="col-12">
            <div class="d-flex align-items-lg-center flex-lg-row flex-column">
                <div class="flex-grow-1">
                    <h2 class="mb-1">Good Morning, {{ Auth::user()->first_name }}!</h2>
                    <p class="mb-0">Here's what's happening with GC7 Cafe today.</p>
                </div>
            </div>
        </div>
        @if(isset($dashboardImages) && count($dashboardImages) > 0)
            <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
                <div class="carousel-inner">
                    @foreach($dashboardImages as $index => $image)
                        <div class="carousel-item {{ $index == 0 ? 'active' : '' }}">
                            <img src="{{ asset($image->image) }}" class="d-block w-100" alt="Slide {{ $index + 1 }}">
                        </div>
                    @endforeach
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                </button>
            </div>
        @endif
    </div>
    <!-- Tournament Spaces -->
    @can('View Jackpot')
    @include('dashboard.components.jackpots.index')
    @endcan
    <!-- Game Spaces -->
    @include('dashboard.components.games.index')
    <!-- Ad Spaces -->
    <div class="row justify-content-center mb-3">
        <div class="col-12 text-center">
            @php $ad = $ads->where('ad_size','970x90')->first(); @endphp
            @if($ad)
                <div class="ad-space" style=" height: 90px;">
                    <a target="_blank" href="{{$ad->url}}"> <img src="{{ url('/')}}/{{$ad->ad_image}}" alt="Ad Image"
                                                                 style=" height: 90px;"></a>
                </div>
            @else
                {{--<div class="ad-space" style=" height: 90px;">Ad space available: 970x90</div> --}}
            @endif
        </div>
    </div>

    <!-- Row 2: 970x250 and 250x250 -->
    <div class="row justify-content-center mb-3">
        <div class="col-12 col-md-12 text-center">
            @php $ad = $ads->where('ad_size','970x250')->first(); @endphp
            @if($ad)
                <div class="ad-space" style=" height: 250px;">
                    <a target="_blank" href="{{$ad->url}}"> <img src="{{ url('/')}}/{{$ad->ad_image}}" alt="Ad Image" style=" height: 250px;"> </a>
                </div>

            @else
                {{-- <div class="ad-space" style="height: 250px;">Ad space available:  970x250</div>--}}
            @endif
        </div>

    </div>

    <!-- Row 3: 336x280 and 300x250 -->
    <div class="row justify-content-center mb-3">
        <div class="col-12 col-md-4 text-center">
            @php $ad = $ads->where('ad_size','336x280')->first(); @endphp
            @if($ad)
                <div class="ad-space" style=" height: 280px;">
                    <a target="_blank" href="{{$ad->url}}"><img src="{{ url('/')}}/{{$ad->ad_image}}" alt="Ad Image" style=" height: 280px;"></a>
                </div>

            @else
                {{--<div class="ad-space" style="height: 280px;">Ad space available: 336x280</div>--}}

            @endif
        </div>
        <div class="col-11 col-md-4 text-center">
            @php $ad = $ads->where('ad_size','300x250')->first(); @endphp
            @if($ad)
                <div class="ad-space" style=" height: 250px;">
                    <a target="_blank" href="{{$ad->url}}"><img src="{{ url('/')}}/{{$ad->ad_image}}" alt="Ad Image" style=" height: 250px;"></a>
                </div>

            @else
                {{--<div class="ad-space" style=" height: 250px;">Ad space available: 300x250</div>--}}
            @endif
        </div>
        <div class="col-10 col-md-4 text-center">
            @php $ad = $ads->where('ad_size','250x250')->first(); @endphp
            @if($ad)
                <div class="ad-space" style=" height: 250px;">
                    <a target="_blank" href="{{$ad->url}}"> <img src="{{ url('/')}}/{{$ad->ad_image}}" alt="Ad Image" style="width: 250px; height: 250px;"></a>
                </div>

            @else
                {{--<div class="ad-space" style=" height: 250px;">Ad space available: 250x250</div>--}}
            @endif
        </div>

    </div>

    <!-- Row 4: 120x600, 300x600, and 160x600 -->
    <div class="row  mb-3">
        <div class="col-6 col-md-4 text-center">
            @php $ad = $ads->where('ad_size','120x600')->first(); @endphp
            @if($ad)
                <div class="ad-space" style="height: 600px;">
                    <a target="_blank" href="{{$ad->url}}"> <img src="{{ url('/')}}/{{$ad->ad_image}}" alt="Ad Image" style=" height: 600px;"></a>
                </div>

            @else
                {{--<div class="ad-space" style=" height: 600px;">Ad space available: 120x600</div>--}}
            @endif
        </div>
        <div class="col-6 col-md-4 text-center">
            @php $ad = $ads->where('ad_size','160x600')->first(); @endphp
            @if($ad)
                <div class="ad-space" style="height: 600px;">
                    <a target="_blank" href="{{$ad->url}}"> <img src="{{ url('/')}}/{{$ad->ad_image}}" alt="Ad Image" style="height: 600px;"> </a>
                </div>

            @else
                {{--<div class="ad-space" style="height: 600px;">Ad space available: 160x600</div>--}}
            @endif
        </div>
        <div class="col-6 col-md-4 text-center">
            @php $ad = $ads->where('ad_size','300x600')->first(); @endphp
            @if($ad)
                <div class="ad-space" style="height: 600px;">
                    <a target="_blank" href="{{$ad->url}}"> <img src="{{ url('/')}}/{{$ad->ad_image}}" alt="Ad Image" style=" height: 600px;"> </a>
                </div>

            @else
                {{-- <div class="ad-space" style=" height: 600px;">Ad space available: 300x600</div>--}}
            @endif
        </div>

    </div>

    <!-- Row 5: 320x480 -->
    <div class="row justify-content-center mb-3">
        <div class="col-12 col-md-8 text-center">
            @php $ad = $ads->where('ad_size','320x480')->first(); @endphp
            @if($ad)
                <div class="ad-space" style=" height: 480px;">
                    <a target="_blank" href="{{$ad->url}}"><img src="{{ url('/')}}/{{$ad->ad_image}}" alt="Ad Image" style=" height: 480px;"></a>
                </div>

            @else
                {{--<div class="ad-space" style=" height: 480px;">Ad space available: 320x480</div>--}}

            @endif
        </div>

        <div class="col-12 col-md-4 text-center">
            @php $ad = $ads->where('ad_size','320x100')->first(); @endphp
            @if($ad)
                <div class="ad-space" style=" height: 100px;">
                    <a target="_blank" href="{{$ad->url}}"> <img src="{{ url('/')}}/{{$ad->ad_image}}" alt="Ad Image" style=" height: 100px;"> </a>
                </div>

            @else
                {{-- <div class="ad-space" style=" height: 100px;">Ad space available: 320x100</div>--}}
            @endif
            @php $ad = $ads->where('ad_size','320x50')->first(); @endphp
            @if($ad)
                <div class="ad-space" style=" height: 50px;">
                    <a target="_blank" href="{{$ad->url}}"><img src="{{ url('/')}}/{{$ad->ad_image}}" alt="Ad Image" style=" height: 50px;"></a>
                </div>

            @else
                {{-- <div class="ad-space" style=" height: 50px;">Ad space available:320x50</div>--}}
            @endif
            <div class="col-8 col-md-6 text-center">
                @php $ad = $ads->where('ad_size','300x100')->first(); @endphp
                @if($ad)
                    <div class="ad-space" style="height: 100px;">
                        <a target="_blank" href="{{$ad->url}}"> <img src="{{ url('/')}}/{{$ad->ad_image}}" alt="Ad Image" style=" height: 100px;"></a>
                    </div>

                @else
                    {{-- <div class="ad-space" style="height: 100px;">Ad space available: 300x100</div>--}}
                @endif
                @php $ad = $ads->where('ad_size','300x50')->first(); @endphp
                @if($ad)
                    <div class="ad-space" style=" height: 50px;">
                        <a target="_blank" href="{{$ad->url}}"><img src="{{ url('/')}}/{{$ad->ad_image}}" alt="Ad Image" style=" height: 50px;"></a>
                    </div>

                @else
                    {{-- <div class="ad-space" style="height: 50px;">Ad space available: 300x50</div></div>--}}
                @endif
            </div>

        </div>

        <!-- Row 6: 320x50, 320x100 -->


        <!-- Row 7: 300x100, 300x50 -->


        @endsection

        @section('script')
            <!-- jQuery CDN -->
            <script src="https://code.jquery.com/jquery-3.6.0.min.js"
                    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
            <!-- Apex Charts -->
            <script src="{{ URL::asset('/assets/libs/apexcharts/apexcharts.min.js') }}"></script>
            <!-- Dashboard CRM -->
            <script src="{{ URL::asset('/assets/js/pages/dashboard-crm.init.js') }}"></script>
            <!-- App JS -->
            <script src="{{ URL::asset('/assets/js/app.min.js') }}"></script>
            <script>
                $(document).ready(function () {
                    const canvas = $("#coinCanvas")[0];
                    const ctx = canvas.getContext("2d");

                    canvas.width = window.innerWidth;
                    canvas.height = window.innerHeight;

                    const coinImage = new Image();
                    coinImage.src = "{{ asset("frontend/media/coin.png") }}"; // Replace with your coin image

                    let coins = [];

                    function createCoins() {
                        for (let i = 0; i < 20; i++) {
                            coins.push({
                                x: Math.random() * canvas.width,
                                y: Math.random() * canvas.height - canvas.height,
                                radius: Math.random() * 10 + 20,
                                speed: Math.random() * 3 + 2,
                                rotation: Math.random() * 360,
                                rotationSpeed: Math.random() * 5 + 1
                            });
                        }
                    }

                    function drawCoins() {
                        ctx.clearRect(0, 0, canvas.width, canvas.height);

                        $.each(coins, function (index, coin) {
                            ctx.save();
                            ctx.translate(coin.x, coin.y);
                            ctx.rotate(coin.rotation * Math.PI / 180);
                            ctx.drawImage(coinImage, -coin.radius / 2, -coin.radius / 2, coin.radius, coin.radius);
                            ctx.restore();
                        });

                        moveCoins();
                    }

                    function moveCoins() {
                        $.each(coins, function (index, coin) {
                            coin.y += coin.speed;
                            coin.rotation += coin.rotationSpeed;

                            if (coin.y > canvas.height) {
                                coin.y = -50;
                                coin.x = Math.random() * canvas.width;
                            }
                        });
                    }

                    function animateCoins() {
                        drawCoins();
                        requestAnimationFrame(animateCoins);
                    }

                    createCoins();
                    coinImage.onload = function () {
                        console.log("Image loaded successfully!");
                        animateCoins(); // Start animation only after the image loads
                    };            

                    // Resize canvas on window resize
                    $(window).resize(function () {
                        canvas.width = window.innerWidth;
                        canvas.height = window.innerHeight;
                    });
                });
            </script>
@endsection