@extends('theme::layouts.app', ['alias' => 'AuctionHouse'])
@section('theme::title', __('reddington.seo.lucky-spin'))

@section('theme::content')
    <div class="col-xl-9 col-lg-9 col-md-12 col-sm-12 col-12">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-12 top-lucky-spin">
                    <h1>
                        {{ __('reddington.lucky-spin.title') }}
                    </h1>
                    @if (session()->has('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            {{ session()->get('success') }}
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    @endif
                    @if (session()->has('error'))
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            {{ session()->get('error') }}
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    @endif

                </div>
                <div class="col-md-12">
                    <div class="header">
                        <div>
                            <div class="title">
                                {{ __('reddington.lucky-spin.rewards-and-chances') }}
                            </div>
                        </div>
                        <div class="d-flex justify-content-around" style="width: 300px;">
                            <div class="buy-button">
                                <button type="button" data-toggle="modal" data-target="#buyModal">
                                    {{ __('reddington.lucky-spin.buy') }}
                                </button>
                                <!-- Buy Modal -->
                                <div class="modal fade" id="buyModal" tabindex="-1" role="dialog"
                                    aria-labelledby="buyModalLabel" aria-hidden="true">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content bg-dark text-light">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="buyModalLabel">
                                                    {{ __('reddington.lucky-spin.modal.title') }}</h5>
                                                <button type="button" class="close" data-dismiss="modal"
                                                    aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                            <div class="modal-body">
                                                <form id="buyForm" action="{{ route('purchase-spins') }}" method="POST">
                                                    @csrf
                                                    <div class="form-group">
                                                        <label
                                                            for="characterSelect">{{ __('reddington.lucky-spin.modal.select-character') }}</label>
                                                        <select class="form-control" id="characterSelect"
                                                            name="character_id" required>
                                                            @foreach (Auth::user()->getTbUser->getShardUser as $char)
                                                                <option value="{{ $char->CharID }}">{{ $char->CharName16 }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div class="form-group">
                                                        <label
                                                            for="spinAmount">{{ __('reddington.lucky-spin.modal.amount-of-spins') }}</label>
                                                        <select class="form-control" name="spin_id" id="spinAmount">
                                                            @foreach ($spinPrices as $spin)
                                                                <option value="{{ $spin->id }}">
                                                                    {{ __('reddington.lucky-spin.modal.spins-for', [
                                                                        'amount' => $spin->amount,
                                                                        'price' => $spin->price,
                                                                    ]) }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </form>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary"
                                                    data-dismiss="modal">{{ __('reddington.lucky-spin.modal.close') }}</button>
                                                <button type="submit" form="buyForm"
                                                    class="btn btn-primary">{{ __('reddington.lucky-spin.buy') }}</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="balance">
                                {{ __('reddington.lucky-spin.balance') }}: <span
                                    class="spin-balance">{{ $luckySpin->balance ?? 0 }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="content">
                        <div class="wheel-container col-md-6">
                            <div class="wheel" id="wheel">
                                @foreach ($luckySpinRewards as $reward)
                                    @if ($reward->codename === 'free_spins')
                                        <img id="{{ 'reward-' . $reward->id }}" src="{{ $reward->imgpath }}"
                                            alt="{{ $reward->name }}" class="reward-image" />
                                    @else
                                        {!! $reward->tooltip !!}
                                    @endif
                                @endforeach

                                <div class="wheel-center">
                                </div>
                            </div>
                            <div class="form-group mt-2" style="width: 193px">
                                <select class="form-control" name="char_id" id="charID">
                                    @foreach (Auth::user()->getTbUser->getShardUser as $char)
                                        <option value="{{ $char->CharID }}">{{ $char->CharName16 }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="spin-button" id="spin-button">
                                {{ __('reddington.lucky-spin.spin-the-wheel') }}
                            </div>
                        </div>
                        <div class="rewards col-md-6">
                            @foreach ($luckySpinRewards as $reward)
                                <div class="reward-item reward-item-{{ $reward->id }}">
                                    @if ($reward->codename === 'free_spins')
                                        <div class="item-data reward-image"
                                            id="selectInventory reward-{{ $reward->id }}">
                                            <div id="items" class="itemslot float-none mx-auto">
                                                <div class="image"
                                                    style="background:url({{ $reward->imgpath }}) no-repeat; background-size: 34px 34px !important; width: 34px; height: 34px !important;">
                                                </div>
                                            </div>
                                        </div>
                                        <span class="truncate" title="{{ $reward->name }}">{{ $reward->name }}</span>
                                        <div class="quantity">
                                            Quantity: {{ $reward->quantity }}
                                        </div>
                                    @else
                                        {!! $reward->tooltip !!}
                                        <span class="truncate" title="{{ $reward->name }}">{{ $reward->name }}</span>
                                        <div class="quantity">
                                            Quantity: {{ $reward->quantity }}
                                        </div>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('theme::javascript')
    <script>
        let spinDegrees = 0;
        let isSpinning = false;
        const balanceElement = document.querySelector('.spin-balance');
        const wheel = document.getElementById('wheel');

        document.addEventListener('DOMContentLoaded', function() {
            const images = wheel.querySelectorAll('.reward-image');
            const totalImages = images.length;
            const wheelRadius = wheel.offsetWidth / 2; // Radius of the main wheel
            const imageOffset = 20; // Distance from the edge of the circle

            // Adjusted radius to move images slightly inward
            const radius = wheelRadius - imageOffset;

            images.forEach((img, index) => {
                const angle = (360 / totalImages) * index; // Divide circle into equal parts
                const x = radius * Math.cos((angle * Math.PI) / 180); // X position
                const y = radius * Math.sin((angle * Math.PI) / 180); // Y position

                // Position each image
                img.style.position = 'absolute';
                img.style.left = `${50 + x / wheelRadius * 50}%`; // Normalize to percentage
                img.style.top = `${50 + y / wheelRadius * 50}%`;

                // Center the images at their position and keep them upright
                img.style.transform = `translate(-50%, -50%)`;
            });
        });

        document.addEventListener('DOMContentLoaded', function() {
            const spinButton = document.getElementById('spin-button');

            // Spin button logic
            spinButton.addEventListener('click', function() {
                var charID = document.getElementById('charID').value;
                if (isSpinning) return; // Prevent multiple spins

                // Disable the button during spin
                spinButton.disabled = true;
                spinButton.textContent = 'Spinning...';
                $('.wheel .reward-image').removeClass('highlight');
                $('.reward-item').removeClass('highlight');
                // Start spinning the wheel
                isSpinning = true;
                startSpinning(wheel);

                // Send a request to the backend to determine the reward
                fetch('/lucky-spin/use-ajax', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')
                                .getAttribute('content'),
                        },
                        body: JSON.stringify({
                            char_id: charID
                        }),
                    })
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('Network response was not ok');
                        }
                        return response.json();
                    })
                    .then(data => {
                        if (data.status == 'error') {
                            showAlert('danger', data.message);
                            stopSpinning(wheel, spinButton);
                            return;
                        }

                        // Stop spinning and highlight the reward
                        setTimeout(() => {
                            stopSpinning(wheel, spinButton, data.rewardID);
                            showAlert('success', 'You won: ' + data.reward);
                            decrementBalance();
                            if (data.rewardQuantity) {
                                incrementBalance(data.rewardQuantity);
                            }
                        }, 2000);
                    })
                    .catch(error => {
                        showAlert('danger', 'An error occurred while spinning. Please try again.');
                        stopSpinning(wheel, spinButton);
                    });
            });
        });

        function startSpinning(wheel) {
            const spinInterval = 50; // Interval in milliseconds
            const spinSpeed = 10; // Degrees to rotate per interval

            const spin = () => {
                spinDegrees += spinSpeed;
                wheel.style.transition = 'transform 0.05s linear';
                wheel.style.transform = `rotate(${spinDegrees}deg)`;

                if (isSpinning) {
                    requestAnimationFrame(spin);
                }
            };

            spin();
        }

        function stopSpinning(wheel, spinButton, rewardID = null) {
            isSpinning = false;

            // Smoothly stop the wheel
            const finalDegree = spinDegrees + 720; // Add extra spins for a smooth stop
            wheel.style.transition = 'transform 2s ease-out';
            wheel.style.transform = `rotate(${finalDegree}deg)`;

            // Re-enable the button after the spin stops
            spinButton.disabled = false;
            spinButton.textContent = "{{ __('reddington.lucky-spin.spin-the-wheel') }}";

            if (rewardID) {
                // Highlight the reward
                $('img#reward-' + rewardID).addClass('highlight');
                $('.reward-image[id$="reward-' + rewardID + '"]').addClass('highlight');
                $('.reward-item-' + rewardID).addClass('highlight');

                // trigger confetti burst
                createConfettiBurst();
            }
        }

        function showAlert(type, message, dom = '.col-md-12.top-lucky-spin') {
            // Create the alert div
            const alertDiv = document.createElement('div');
            alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
            alertDiv.setAttribute('role', 'alert');

            // Add the message
            alertDiv.innerHTML = `
                ${message}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            `;

            // Insert the alert into the DOM
            const container = document.querySelector(dom);
            container.insertBefore(alertDiv, container.firstChild);

            // Automatically dismiss the alert after 5 seconds
            setTimeout(() => {
                $(alertDiv).alert('close');
            }, 5000);
        }

        // Function to increment balance by 1
        function incrementBalance(amount = 1) {
            let currentBalance = parseInt(balanceElement.textContent) || 0;
            currentBalance += amount;
            balanceElement.textContent = currentBalance;
        }

        // Function to decrement balance by 1
        function decrementBalance(amount = 1) {
            let currentBalance = parseInt(balanceElement.textContent) || 0;
            if (currentBalance > 0) { // Ensure balance doesn't go below 0
                currentBalance -= amount;
                balanceElement.textContent = currentBalance;
            } else {
                alert('Balance cannot be negative!');
            }
        }

        document.addEventListener('DOMContentLoaded', function() {
            const buyForm = document.getElementById('buyForm');

            buyForm.addEventListener('submit', function(event) {
                event.preventDefault(); // Prevent the default form submission

                const formData = new FormData(buyForm);

                fetch(buyForm.action, {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')
                                .getAttribute('content'),
                        },
                        body: formData,
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.status === 'success') {
                            // Show success message
                            showAlert('success', data.message);

                            // Update the balance displayed on the page
                            if (balanceElement && data.balance !== undefined) {
                                balanceElement.textContent = data.balance;
                            }

                            // Close the modal (if using Bootstrap)
                            $('#buyModal').modal('hide');
                        } else {
                            // Show error message
                            showAlert('danger', data.message, '.modal-body');
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error)
                    });
            });
        });

        function itemInfo() {
            $(document).tooltip({
                items: "[data-itemInfo]",
                position: {
                    my: "left+5 center",
                    at: "right center"
                },
                content: function() {
                    let element = jQuery(this);
                    if (jQuery(this).prop("tagName").toUpperCase() === 'IFRAME') {
                        return;
                    }
                    if (element.is("[data-itemInfo]")) {
                        if (element.parent().parent().find('.itemInfo').html() === '') {
                            return;
                        }
                        return element.parent().parent().find('.itemInfo').html();
                    }
                    if (element.is("[title]")) {
                        return element.attr("title");
                    }
                },
                close: function(event, ui) {
                    $(".ui-helper-hidden-accessible").remove();
                }
            });
        }
        itemInfo();

        function createConfettiBurst() {
            // Create a container for confetti
            const confettiContainer = document.createElement('div');
            confettiContainer.style.position = 'fixed';
            confettiContainer.style.top = '0';
            confettiContainer.style.left = '0';
            confettiContainer.style.width = '100vw';
            confettiContainer.style.height = '100vh';
            confettiContainer.style.pointerEvents = 'none';
            confettiContainer.style.overflow = 'hidden';
            confettiContainer.style.zIndex = '9999';
            document.body.appendChild(confettiContainer);

            // Define an array of colors including your primary colors plus a couple of extra accents
            const colors = ['#DAA520', '#4169E1', '#FF6347', '#32CD32', '#FFD700'];

            // Create multiple confetti pieces
            for (let i = 0; i < 50; i++) {
                const confetti = document.createElement('div');
                const size = Math.random() * 8 + 4; // Random size between 4px and 12px
                confetti.style.width = `${size}px`;
                confetti.style.height = `${size}px`;
                confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
                confetti.style.opacity = 0.9;

                // Randomly decide between a circle and a square shape
                if (Math.random() > 0.5) {
                    confetti.style.borderRadius = '50%'; // Circle
                }

                // Set a random starting horizontal position
                confetti.style.left = Math.random() * 100 + 'vw';
                confetti.style.top = '-10px'; // start just above the viewport

                // Random animation delay and duration for a more natural burst
                confetti.style.animationDelay = Math.random() * 0.5 + 's';
                confetti.style.animationDuration = (Math.random() * 2 + 2) + 's'; // between 2 and 4 seconds

                confetti.className = 'confetti';
                confettiContainer.appendChild(confetti);
            }

            // Remove the confetti container after the animation completes
            setTimeout(() => {
                confettiContainer.remove();
            }, 4500);
        }
    </script>
@endpush

@push('theme::css')
    <style>
        .header {
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin-bottom: 20px;
        }

        .title {
            font-size: 24px;
            color: yellow;
        }

        .buy-button {
            text-align: right;
        }

        .buy-button button {
            padding: 10px 20px;
            background-color: #ffcc00;
            border: 2px solid #000;
            color: #3b2f2f;
            text-align: center;
            cursor: pointer;
            font-size: 18px;
            font-weight: bold;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
        }

        .buy-button button:hover {
            background-color: #ff9900;
            transform: scale(1.1);
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
        }

        .balance {
            text-align: right;
            color: white;
        }

        .content {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        .wheel-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 20px;
            flex: 1;
        }

        .wheel {
            width: 300px;
            height: 300px;
            border: 2px solid yellow;
            border-radius: 50%;
            /* Makes the main wheel circular */
            position: relative;
            transition: transform 0.05s linear;
            /* Smooth spinning */
            /* Smooth spinning */
            box-shadow: inset 0 0 15px 5px rgba(255, 255, 0, 0.7);
            overflow: hidden;
            /* Ensures content stays within the circle */
        }

        .wheel img,
        .wheel .reward-image {
            position: absolute;
            width: 34px;
            /* Size of each image */
            height: 34px;
            /* Makes the images circular */
            transform-origin: center;
            /* Ensures rotation works properly */
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .wheel img:hover,
        .wheel .reward-image:hover {
            transform: scale(1.2);
            /* Scale up on hover */
            box-shadow: 0 0 15px 5px rgba(255, 255, 255, 0.7);
            /* Adds glow effect */
        }

        .wheel img.highlight,
        .wheel .reward-image.highlight {
            transform: scale(1.2);
            /* Scale up on hover */
            box-shadow: 0 0 15px 15px rgba(52, 208, 194, 0.7);
            /* Adds glow effect */
        }

        .wheel-center {
            width: 100px;
            height: 100px;
            border: 2px solid yellow;
            border-radius: 50%;
            position: absolute;
            top: 100px;
            left: 100px;
            box-shadow: inset 0 0 15px 5px rgba(255, 255, 0, 0.7);
        }

        .spin-button {
            /* margin-top: 20px; */
            padding: 15px 30px;
            background-color: #ffcc00;
            border: 2px solid #000;
            color: #3b2f2f;
            text-align: center;
            cursor: pointer;
            font-size: 18px;
            font-weight: bold;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
        }

        select#charID {
            background-color: #ffcc00;
            border: 2px solid #000;
            color: #666;
            text-align: center;
            cursor: pointer;
            font-size: 18px;
            font-weight: bold;
            border-radius: 10px;
        }

        .spin-button:hover {
            background-color: #ff9900;
            transform: scale(1.1);
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
        }

        .rewards {
            display: flex;
            flex-wrap: wrap;
            flex-grow: 2;
            margin-left: 20px;
        }

        .reward-item {
            background-color: #3b2f2f;
            border: 1px solid #000;
            padding: 10px;
            margin: 5px;
            color: yellow;
            width: 45%;
        }

        .reward-item.highlight {
            border: 2px solid red;
        }

        .reward-item .itemslot {
            margin-right: 7px !important;
            float: left !important;
        }

        .reward-item .quantity {
            color: white;
        }

        .truncate {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 100px;
            display: inline-block;
        }
    </style>
@endpush

@push('theme::css')
    <style>
        /* --- Spin Button Ripple Effect --- */
        .spin-button {
            position: relative;
            overflow: hidden;
        }

        .spin-button::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 100%;
            transform: translate(-50%, -50%);
            transition: width 0.5s ease, height 0.5s ease;
        }

        .spin-button:active::after {
            width: 200%;
            height: 200%;
            transition: width 0s, height 0s;
        }

        /* --- Reward Image Sparkle Effect --- */
        .wheel .reward-image {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .wheel .reward-image:hover {
            transform: scale(1.15);
            box-shadow: 0 0 15px rgba(218, 165, 32, 0.9);
        }

        /* --- Confetti Burst --- */
        @keyframes confettiFall {
            0% {
                transform: translate3d(0, 0, 0) rotate(0deg);
                opacity: 1;
            }

            50% {
                transform: translate3d(20px, 50vh, 0) rotate(180deg);
                opacity: 0.7;
            }

            100% {
                transform: translate3d(-20px, 100vh, 0) rotate(360deg);
                opacity: 0;
            }
        }

        .confetti {
            position: absolute;
            pointer-events: none;
            animation-name: confettiFall;
            animation-timing-function: ease-out;
            animation-fill-mode: forwards;
        }
    </style>
@endpush