@extends('layouts.master')

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


@section('content')
    <link rel="stylesheet" href="{{ URL::asset('css/dashboard-index.css') }}">
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
    <style>
        .channel-card {
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
            overflow: hidden;
            margin: 0 10px;
            width: 350px;
        }

        .channel-card .btn {
            border-radius: 6px;
            font-weight: 500;
        }

        .number-streaming-slider {
            justify-content: flex-start !important;
            text-align: left !important;
        }

        .slick-track {
            display: flex !important;
            justify-content: flex-start !important;
        }

        .relative {
            position: relative;
        }

        .absolute {
            position: absolute;
        }

        .item-buy {
            right: var(--vz-card-cap-padding-x);
            top: var(--vz-card-cap-padding-y);
            display: flex;
            align-items: center;
            justify-content: flex-start;
        }

        .reward-img {
            width: 30px;
            height: 30px;
        }

        .list-reward {
            list-style: none;
            padding: 0;
        }

        .min-height-body {
            min-height: 400px;
        }

        .card-footer {
            min-height: 75px;
        }

        @keyframes gradientAnimation {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }

        .animated-card {
            background: linear-gradient(45deg, #ff6b6b, #feca57, #1dd1a1, #5f27cd);
            background-size: 300% 300%;
            animation: gradientAnimation 6s infinite alternate ease-in-out;
        }

        .animated-card .card-header, .animated-card .card-footer {
            background-color: inherit;
        }

        :root {
            /* the only thing needed is a grainy/noisy background image */
            --glittercard: url("../../frontend/media/silver-glitter.png");
        }


        .card-fire::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: var(--glittercard), var(--glittercard), linear-gradient(0deg, white 0px, #ff8951 5px, #dcbc169c 0%, transparent 10%), radial-gradient(ellipse at bottom, transparent 10%, black 10%);
            background-size: 500px 500px, 500px 500px, 100% 100%, 100% 100%;
            background-blend-mode: hard-light, color-dodge, multiply;
            background-position: 0px 0px, 0px 0px, var(--gradientPos);
            background-repeat: repeat, repeat, repeat, no-repeat;
            mix-blend-mode: color-dodge;
            filter: brightness(3.2) blur(5px) contrast(5);
            animation: cardfire 1.75s linear infinite;
            box-shadow: inset 0px 0px 5px 15px #ff8951;
            pointer-events: none;
        }

        @keyframes cardfire {
            0% {
                background-position: center 0px, center 0px, 50% 100%, center center;
            }
            100% {
                background-position: center -250px, center -375px, 50% 100%, center center;
            }
        }
    </style>
    @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>
    @if(!empty($channels) && count($channels) > 0)
        <div class="heading position-relative mt-5 mb-4">
            <h2>Number Streaming Channels</h2>
            <hr>
        </div>
        <div class="number-streaming-slider">
            @forelse($channels as $channel)
                <div class="channel-card animated-card p-3 position-relative">
                    <div class="card-fire"></div>
                    <div class="channel-image" style="position:relative;">
                        <a href="{{ url('/number-streaming/broadcast/'.$channel->id) }}">
                            <img src="{{ $channel->image ? asset($channel->image) : asset('/default_assets/user/default.jpg') }}"
                                 alt="{{ $channel->channel_name }}"
                                 style="width:100%;height:200px;object-fit:cover;border-radius:12px 12px 0 0;">
                        </a>
                        <span style="position:absolute;top:10px;right:10px;z-index:2;">
                        @if(isset($channel->password) && $channel->password != '')
                                <span class="badge bg-warning text-dark position-absolute top-0 end-0 m-2">
                                <i class="fas fa-lock me-1"></i> Private
                            </span>
                            @else
                                <span class="badge bg-success position-absolute top-0 end-0 m-2">
                                <i class="fas fa-globe me-1"></i> Public
                            </span>
                            @endif
                    </span>
                    </div>
                    <div class="p-3">
                        <div class="fw-bold" style="font-size:1.1rem;">{{ $channel->channel_name }}</div>
                        <div style="font-size:13px;">{{ $channel->description }}</div>
                        <div class="text-muted mb-2" style="font-size:0.95rem;">
                            {{ $channel->created_at->diffForHumans() }}
                        </div>
                        <a href="{{route('number-streaming.broadcast.show', $channel->encrypted_id)}}"
                           class="btn btn-primary" style="background:#7b61ff;border:none;">
                            Join
                        </a>
                        @if($channel->user_id == auth()->id() || (auth()->user() && auth()->user()->hasRole('Super Admin')))
                            <button class="btn btn-danger btn-sm channel-close-btn p-2" data-channel-id="{{ $channel->id }}"
                                    onclick="event.stopPropagation(); closeChannel('{{ $channel->id }}')">
                                Close
                            </button>
                        @endif
                    </div>
                </div>
            @empty
                <div class="text-center py-5">
                    <i class="fas fa-broadcast-tower fa-3x text-muted mb-3"></i>
                    <h3 class="text-muted">No Channels Available</h3>
                    <p class="text-muted">Be the first to create a channel!</p>
                </div>
            @endforelse
        </div>
    @endif
    <!-- 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 src="https://cdn.jsdelivr.net/npm/toastify-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>
            <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
            <script>
                $(document).ready(function () {
                    $('.number-streaming-slider').slick({
                        slidesToShow: 4,
                        slidesToScroll: 1,
                        infinite: false,
                        arrows: true,
                        dots: true,
                        responsive: [
                            {
                                breakpoint: 992,
                                settings: {slidesToShow: 3}
                            },
                            {
                                breakpoint: 600,
                                settings: {slidesToShow: 1}
                            }
                        ]
                    });
                });
            </script>
            <script>
                function closeChannel(channelId) {
                    if (!confirm('Are you sure you want to close this channel?')) return;
                    var $btn = $(".channel-close-btn[data-channel-id='" + channelId + "']");
                    var oldText = $btn.text();
                    $btn.prop('disabled', true).text('Loading...');
                    $.post({
                        url: '/number-streaming/delete-channel',
                        data: {
                            channel_id: channelId,
                            _token: $('meta[name="csrf_token"]').attr('content')
                        },
                        success: function(response) {
                            if (response.status === 'success') {
                                Toastify({
                                    text: "Channel closed successfully!",
                                    className: "notification-toastify",
                                    duration: 2000,
                                    style: {background: "#00c853", color: "#fff", fontWeight: "bold"}
                                }).showToast();
                                setTimeout(function() {
                                    location.reload();
                                }, 1200);
                            } else {
                                Toastify({
                                    text: response.message || "Failed to close channel.",
                                    className: "danger-toastify",
                                    duration: 2000,
                                    style: {background: "#e53935", color: "#fff", fontWeight: "bold"}
                                }).showToast();
                                $btn.prop('disabled', false).text(oldText);
                            }
                        },
                        error: function(xhr) {
                            let msg = "Failed to close channel.";
                            if (xhr.responseJSON && xhr.responseJSON.message) {
                                msg = xhr.responseJSON.message;
                            }
                            Toastify({
                                text: msg,
                                className: "danger-toastify",
                                duration: 2000,
                                style: {background: "#e53935", color: "#fff", fontWeight: "bold"}
                            }).showToast();
                            $btn.prop('disabled', false).text(oldText);
                        }
                    });
                }
            </script>
@endsection