@extends('layouts.app')

@section('title', 'Открыть CS:GO кейс "' . $case->name . '"')

@section('content')
<div class="container caseBox">
    <h2 class="page-sub-title">{{ $case->series->name ?? 'Серийный кейс' }}</h2>
    <h1 class="page-title">«{{ $case->name }}»</h1>

    @if($case->has_promo && $case->promo_image)
    <script>
      (function () {
        let caseId = {{ $case->id }};
        function showComplete() {
          const link = document.getElementById('bingo-promo-link');
          if (link) link.classList.add('is-bingo-complete');
        }
        function initFromStorage() {
          try { if (localStorage.getItem('bingo_complete_' + caseId) === '1') showComplete(); } catch (e) {}
        }
        if (document.readyState === 'loading') {
          document.addEventListener('DOMContentLoaded', initFromStorage);
        } else {
          initFromStorage();
        }
        window.addEventListener('bingoCardComplete', function (e) {
          if (e.detail && e.detail.caseId === caseId) showComplete();
        });
      })();
    </script>

    <a href="#" data-hystmodal="#promo-skinbingo" class="extra_link extra_link__skinbingo" id="bingo-promo-link">
      <div class="svg-circle">
        <img class="bingo-icon-complete" src="{{ $case->promo_image }}" alt="">
      </div>
      <span class="bingo-label">
        <span class="bingo-label__default">СКИН БИНГО</span>
      </span>
    </a>

    <div class="hystmodal hystmodal__skinbingo" id="promo-skinbingo" aria-hidden="true">
      <div class="hystmodal__wrap">
        <div class="hystmodal__window __600" role="dialog" aria-modal="true">
          <button data-hystclose="" class="hystmodal__close">Закрыть</button>
          <div class="modal-head modal-head__skinbingo">
            <div class="logo"><img class="" src="{{ $case->promo_image }}" alt=""></div>
            <div><h3>СКИН БИНГО</h3><h4>Заполняйте все ячейки бинго и забирайте приз!</h4></div>
          </div>
          <div class="modal-body" id="bingo-modal-app" data-case-id="{{ $case->id }}">
            <div class="bingo-modal">
              <div class="tabs disabled">
                <button class="tab active">Игровое поле</button>
                <button class="tab">Правила и награды</button>
              </div>
              <div class="loading">
                <div class="lds-ellipsis">
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    @endif

    <div id="case-box-app" 
         data-case-id="{{ $case->id }}"
         data-case-slug="{{ $case->slug }}"
         data-case-price="{{ $case->price }}"
         data-open-url="{{ route('cases.open', ['slug' => $case->slug]) }}"
         data-favorite-url="{{ route('cases.favorite', ['slug' => $case->slug]) }}"
         data-user-balance="{{ auth()->check() ? auth()->user()->balance : 0 }}"
         data-is-guest="{{ auth()->guest() ? 'true' : 'false' }}"
         data-is-banned="{{ auth()->check() && auth()->user()->is_banned ? 'true' : 'false' }}"
         data-csrf-token="{{ csrf_token() }}"
         data-case-image-back="{{ $case->image_back }}"
         data-case-image-front="{{ $case->image_front }}"
         data-case-name="{{ $case->name }}"
         data-case-items="{{ base64_encode(json_encode($case->items->where('is_active', true)->map(function($item) {
             return [
                 'id' => $item->id,
                 'name' => $item->name,
                 'image' => $item->image,
                 'price' => (float) $item->price,
                 'rarity' => $item->rarity,
             ];
         })->values()->toArray())) }}">
      
        <a href="#" class="favorite" id="favorite-btn">
            <svg data-tooltip-content="Добавить в избранное" class="icon icon-heart-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{{ asset('assets/img/icons.svg') }}#icon-heart-empty"></use>
            </svg>
        </a>
      
      <div class="center-wrapper">
        <!-- Обычный кейс (показывается до открытия) -->
        <div class="case" id="case-container">
            <div class="case-circle">
                <img src="{{ asset('img/case-circle.png') }}?v={{ config('app.version') }}" alt="animated-circle" class="case-animated-circle">
            </div>
            <img src="{{ $case->image_back }}" alt="CS2 кейс «{{ $case->name }}»" title="CS2 кейс «{{ $case->name }}»" class="case-image">
            <img src="https://cdn6.gamecontent.io/themes/7thBirthday/img/case-box/overlay-view.png" alt="theme static overlay" class="case-image theme static-overlay">
            <img src="{{ $case->image_front }}" alt="CS2 кейс «{{ $case->name }}»" title="CS2 кейс «{{ $case->name }}»" class="case-image animated">
        </div>
        
        <!-- Контейнер для анимации (скрыт до открытия) -->
        <div id="firework-container"></div>
        <div class="games-wrapper solo" id="games-wrapper" style="display:none;"></div>
      </div>

      <div class="footer-wrapper" id="controls-wrapper">
        @auth
          @php
              $maxOpens = floor(auth()->user()->balance / $case->price);
              $maxOpens = min($maxOpens, 10);
          @endphp

          <div class="bottom-controls" id="bottom-controls">
              <div class="open-count">
                  <span>Открыть</span>
                  <ul id="open-count-list">
                      @for ($i = 1; $i <= max(1, min($maxOpens, 10)); $i++)
                          <li value="{{ $i }}" class="{{ $i === 1 ? 'active' : '' }}">
                              <a href="#">{{ $i }}</a>
                          </li>
                      @endfor
                  </ul>
                  <span class="num-text">раз</span>
              </div>
              
              @if($maxOpens > 0)
                  <button id="open-btn" data-action="open">
                      <svg class="icon icon-case-gradient">
                          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-case-gradient"></use>
                      </svg>
                      Открыть за {{ number_format($case->price, 0) }} ₽
                  </button>
                  <button id="fast-open-btn">
                      <svg class="icon icon-flash-gradient">
                          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-flash-gradient"></use>
                      </svg>
                      быстро за {{ number_format($case->price, 0) }} ₽
                  </button>
              @else
                  <div class="error-holder">
                      <svg class="icon icon-coins-gradient icon-coins">
                          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-coins-gradient"></use>
                      </svg>
                      <div>
                          <p>Чтобы открыть этот кейс, на балансе должно быть не менее
                              <span class="__currency">{{ number_format($case->price, 0) }}</span>
                          </p>
                          <a href="#" data-hystmodal="#funds-modal" class="btn">Пополнить</a>
                      </div>
                  </div>
              @endif
          </div>
        @else
          <div class="error-holder" style="">
              <svg class="icon icon-steam">
                  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/svg/icons.svg#icon-steam"></use>
              </svg>
              <div>
                  <p>Пожалуйста,<br> авторизуйтесь <span>через Steam</span></p>
                  <a href="#" data-hystmodal="#login-modal" class="btn">Авторизоваться</a>
              </div>
          </div>
        @endauth
      </div>
    </div>

    <div class="case-assets">
        <div class="title">
            <span>Содержимое кейса</span>
        </div>

        <div class="wrapper">
            @foreach($case->items->where('is_active', true) as $item)
            <div class="unit {{ $item->rarity }}">
                <img src="{{ $item->image }}" alt="{{ $item->name }}" class="">
                <div class="price">
                    <span class="__currency">{{ number_format($item->price, 0) }}</span>
                </div>
                <div class="unit-title">
                    {{ $item->name }}
                </div>
                <div class="rarity"></div>
            </div>
            @endforeach
        </div>
    </div>
</div>

{{-- Модальное окно для результата --}}
<div class="hystmodal" id="result-modal" aria-hidden="true">
    <div class="hystmodal__wrap">
        <div class="hystmodal__window __400" role="dialog" aria-modal="true">
            <button data-hystclose="" class="hystmodal__close">Закрыть</button>
            <div class="modal-head">
                <h3>Вы получили:</h3>
            </div>
            <div class="modal-body" style="text-align:center; padding:20px;">
                <div id="result-item" style="display:none;">
                    <img id="result-image" src="" alt="" style="max-width:200px; max-height:200px;">
                    <h4 id="result-name" style="margin-top:15px;"></h4>
                    <p id="result-price" style="color:#ffd700; font-size:18px;"></p>
                    <div style="margin-top:15px;">
                        <button class="btn" data-hystclose="">Закрыть</button>
                    </div>
                </div>
                <div id="result-loading">
                    <div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
                    <p>Открываем кейс...</p>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    var caseBox = document.getElementById('case-box-app');
    var caseId = caseBox.dataset.caseId;
    var caseSlug = caseBox.dataset.caseSlug;
    var casePrice = parseFloat(caseBox.dataset.casePrice);
    var openUrl = caseBox.dataset.openUrl;
    var favoriteUrl = caseBox.dataset.favoriteUrl;
    var csrfToken = caseBox.dataset.csrfToken;
    var isGuest = caseBox.dataset.isGuest === 'true';
    var isBanned = caseBox.dataset.isBanned === 'true';
    var currentBalance = parseFloat(caseBox.dataset.userBalance);
    var caseImageBack = caseBox.dataset.caseImageBack;
    var caseImageFront = caseBox.dataset.caseImageFront;
    var caseName = caseBox.dataset.caseName;
    
    var openBtn = document.getElementById('open-btn');
    var fastOpenBtn = document.getElementById('fast-open-btn');
    var countList = document.getElementById('open-count-list');
    var favoriteBtn = document.getElementById('favorite-btn');
    var caseContainer = document.getElementById('case-container');
    var gamesWrapper = document.getElementById('games-wrapper');
    var bottomControls = document.getElementById('bottom-controls');
    
    var selectedCount = 1;
    var isOpening = false;
    
    var caseItemsData = caseBox.dataset.caseItems;
    var caseItems = caseItemsData ? JSON.parse(atob(caseItemsData)) : [];
    
    async function openCaseRequest(count, fast) {
        var formData = new FormData();
        formData.append('count', count);
        formData.append('fast', fast ? 1 : 0);
        formData.append('_token', csrfToken);
        
        var response = await fetch(openUrl, {
            method: 'POST',
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json'
            },
            body: formData
        });
        
        var result = await response.json();
        
        if (!response.ok) {
            throw result;
        }
        
        return result;
    }
    
    function animateCaseOpening(winningItem, fast) {
        fast = fast || false;
        return new Promise(function(resolve) {
            // Скрываем обычный кейс
            caseContainer.style.display = 'none';
            
            // Показываем контейнер для анимации
            gamesWrapper.style.display = 'block';
            gamesWrapper.innerHTML = '';
            
            if (!gamesWrapper.classList.contains('solo')) {
                gamesWrapper.classList.add('solo');
            }
            gamesWrapper.classList.remove('finished');
            
            // Создаем основной блок
            var wrapperDiv = document.createElement('div');
            wrapperDiv.className = 'rolling';
            wrapperDiv.style.position = 'relative';
            wrapperDiv.style.overflow = 'hidden';
            gamesWrapper.appendChild(wrapperDiv);
            
            // Круг - ТАКОЙ ЖЕ КАК В ТВОЕМ ПРИМЕРЕ
            var circleBack = document.createElement('div');
            circleBack.className = 'circle__back rolling';
            circleBack.innerHTML = 
                '<div class="static">' +
                    '<img src="/img/csgo-man-circle.png" alt="static-circle">' +
                '</div>' +
                '<div class="animated">' +
                    '<img src="/img/case-circle.png" alt="animated-circle">' +
                '</div>';
            wrapperDiv.appendChild(circleBack);
            
            // Контейнер с предметами
            var rollingAssets = document.createElement('div');
            rollingAssets.className = 'rolling-assets svelte-j3lv9f';
            wrapperDiv.appendChild(rollingAssets);
            
            // Подготавливаем предметы
            var items = caseItems.slice();
            for (var i = 0; i < 10; i++) {
                items.push(winningItem);
            }
            
            // Перемешиваем
            for (var i = items.length - 1; i > 0; i--) {
                var j = Math.floor(Math.random() * (i + 1));
                var temp = items[i];
                items[i] = items[j];
                items[j] = temp;
            }
            
            // Добавляем предметы
            items.forEach(function(item, index) {
                var itemDiv = document.createElement('div');
                itemDiv.className = 'svelte-j3lv9f';
                
                var nameParts = item.name.split(' | ');
                var weapon = nameParts[0] || item.name;
                var skin = nameParts[1] || '';
                
                itemDiv.innerHTML = 
                    '<img src="' + item.image + '" alt="' + item.name + '" title="' + item.name + '" class="svelte-j3lv9f">' +
                    '<h5>' + weapon + '</h5>' +
                    '<h6>' + skin + '</h6>' +
                    '<h3>' + weapon + '</h3>' +
                    '<h4>' + skin + '</h4>';
                
                rollingAssets.appendChild(itemDiv);
            });
            
            // Рассчитываем позицию
            var itemsList = rollingAssets.querySelectorAll('.svelte-j3lv9f');
            var itemWidth = 90 + 24;
            var centerIndex = Math.floor(itemsList.length / 2);
            var containerWidth = gamesWrapper.clientWidth || window.innerWidth;
            var targetPosition = -(centerIndex * itemWidth) + (containerWidth / 2 - itemWidth / 2);
            
            // Стартовая позиция
            var startPosition = containerWidth + 200;
            rollingAssets.style.transform = 'translateX(' + startPosition + 'px)';
            rollingAssets.style.transition = 'none';
            
            void rollingAssets.offsetHeight;
            
            var duration = fast ? 2000 : 5000;
            var easing = 'cubic-bezier(0.39, 0.575, 0.565, 1)';
            
            setTimeout(function() {
                rollingAssets.style.transition = 'transform ' + duration + 'ms ' + easing;
                rollingAssets.style.transform = 'translateX(' + targetPosition + 'px)';
            }, 50);
            
            // По окончании анимации
            setTimeout(function() {
                var items = rollingAssets.querySelectorAll('.svelte-j3lv9f');
                var centerItem = items[Math.floor(items.length / 2)];
                if (centerItem) {
                    centerItem.classList.add('drop');
                }
                
                gamesWrapper.classList.add('finished');
                
                // ПОКАЗЫВАЕМ КНОПКИ
                showResultButtons(winningItem);
                
                resolve(winningItem);
            }, duration + 500);
        });
    }
    
    // ===== КНОПКИ ПОСЛЕ ОТКРЫТИЯ =====
    function showResultButtons(winningItem) {
        var oldControls = document.querySelector('.result-controls');
        if (oldControls) oldControls.remove();
        
        var controlsDiv = document.createElement('div');
        controlsDiv.className = 'result-controls';
        controlsDiv.style.cssText = 'display: flex; gap: 15px; align-items: center; margin-top: 15px; justify-content: center;';
        
        controlsDiv.innerHTML = 
            '<button class="sell-btn" onclick="window.sellItem(' + winningItem.id + ', ' + winningItem.price + ')" style="display:flex;align-items:center;gap:8px;padding:10px 20px;background:linear-gradient(135deg,#ffd700,#f0a500);border:none;border-radius:8px;color:#000;font-weight:bold;cursor:pointer;">' +
                '<svg class="icon icon-coins-gradient" style="width:20px;height:20px;">' +
                    '<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-coins-gradient"></use>' +
                '</svg>' +
                'Продать за <strong class="__currency">' + winningItem.price.toFixed(2) + '</strong>' +
            '</button>' +
            '<button class="repeat-btn" onclick="window.repeatOpen()" style="display:flex;align-items:center;gap:8px;padding:10px 20px;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:8px;color:#fff;font-weight:bold;cursor:pointer;">' +
                '<svg class="icon icon-repeat-gradient" style="width:20px;height:20px;">' +
                    '<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-repeat-gradient"></use>' +
                '</svg>' +
                'Еще раз' +
            '</button>';
        
        bottomControls.appendChild(controlsDiv);
    }
    
    function showResultModal(type) {
        var loading = document.getElementById('result-loading');
        var item = document.getElementById('result-item');
        
        if (type === 'loading') {
            loading.style.display = 'block';
            item.style.display = 'none';
        }
        
        if (typeof HystModal !== 'undefined') {
            var hyst = new HystModal({
                linkAttributeName: 'data-hystmodal'
            });
            hyst.open('#result-modal');
        }
    }
    
    function hideResultModal() {
        var closeBtn = document.querySelector('#result-modal [data-hystclose]');
        if (closeBtn) closeBtn.click();
    }
    
    function showSingleResult(item) {
        var loading = document.getElementById('result-loading');
        var itemDiv = document.getElementById('result-item');
        var img = document.getElementById('result-image');
        var name = document.getElementById('result-name');
        var price = document.getElementById('result-price');
        
        loading.style.display = 'none';
        itemDiv.style.display = 'block';
        
        img.src = item.image;
        img.alt = item.name;
        name.textContent = item.name;
        price.textContent = item.price.toFixed(2) + ' ₽';
    }
    
    function updateBalance(balance) {
        currentBalance = balance;
        var balanceEls = document.querySelectorAll('[data-__balance], .__balance, .__balance_bcn');
        balanceEls.forEach(function(el) {
            if (el.textContent) {
                el.textContent = balance.toLocaleString();
            }
        });
        
        window.dispatchEvent(new CustomEvent('balanceUpdated', {
            detail: { balance: balance }
        }));
    }
    
    function updateButtonsState(balance) {
        var totalPrice = casePrice * selectedCount;
        var canOpen = balance >= totalPrice;
        
        if (openBtn) openBtn.disabled = !canOpen;
        if (fastOpenBtn) fastOpenBtn.disabled = !canOpen;
        
        if (openBtn) {
            openBtn.innerHTML = 
                '<svg class="icon icon-case-gradient">' +
                    '<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-case-gradient"></use>' +
                '</svg>' +
                ' Открыть за ' + totalPrice.toLocaleString() + ' ₽';
        }
        if (fastOpenBtn) {
            fastOpenBtn.innerHTML = 
                '<svg class="icon icon-flash-gradient">' +
                    '<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-flash-gradient"></use>' +
                '</svg>' +
                ' быстро за ' + totalPrice.toLocaleString() + ' ₽';
        }
    }
    
    function setButtonsDisabled(disabled) {
        if (openBtn) openBtn.disabled = disabled;
        if (fastOpenBtn) fastOpenBtn.disabled = disabled;
        
        var countItems = document.querySelectorAll('#open-count-list li a');
        countItems.forEach(function(el) {
            el.style.pointerEvents = disabled ? 'none' : 'auto';
            el.style.opacity = disabled ? '0.5' : '1';
        });
    }
    
    function selectCount(count) {
        selectedCount = count;
        
        var items = document.querySelectorAll('#open-count-list li');
        items.forEach(function(el) {
            el.classList.toggle('active', parseInt(el.value) === count);
        });
        
        updateButtonsState(currentBalance);
    }
    
    function updateAvailableCount() {
        var maxOpens = Math.min(Math.floor(currentBalance / casePrice), 10);
        if (!countList) return;
        
        var currentItems = countList.querySelectorAll('li');
        var currentMax = currentItems.length;
        
        if (maxOpens !== currentMax) {
            countList.innerHTML = '';
            for (var i = 1; i <= Math.max(1, maxOpens); i++) {
                var li = document.createElement('li');
                li.value = i;
                li.className = i === selectedCount ? 'active' : '';
                li.innerHTML = '<a href="#">' + i + '</a>';
                li.addEventListener('click', function(e) {
                    e.preventDefault();
                    selectCount(parseInt(this.value));
                });
                countList.appendChild(li);
            }
            
            if (selectedCount > maxOpens && maxOpens > 0) {
                selectCount(maxOpens);
            }
        }
    }
    
    function showNotification(message, type) {
        type = type || 'info';
        if (window.Notify) {
            if (type === 'success') window.Notify.success(message);
            else if (type === 'error') window.Notify.error(message);
            else if (type === 'warning') window.Notify.warning(message);
            else window.Notify.info(message);
        } else if (window.toastr) {
            if (type === 'success') window.toastr.success(message);
            else if (type === 'error') window.toastr.error(message);
            else if (type === 'warning') window.toastr.warning(message);
            else window.toastr.info(message);
        } else {
            alert(message);
        }
    }
    
    async function openCase(fast) {
        fast = fast || false;
        if (isOpening) return;
        if (isGuest) {
            showNotification('Пожалуйста, авторизуйтесь', 'warning');
            return;
        }
        if (isBanned) {
            showNotification('Ваш аккаунт заблокирован', 'error');
            return;
        }
        
        var totalPrice = casePrice * selectedCount;
        if (currentBalance < totalPrice) {
            showNotification('Недостаточно средств!', 'error');
            return;
        }
        
        isOpening = true;
        setButtonsDisabled(true);
        showResultModal('loading');
        
        try {
            var result = await openCaseRequest(selectedCount, fast);
            
            if (result.success) {
                var item = result.data.item;
                currentBalance = result.data.balance_after;
                
                hideResultModal();
                await animateCaseOpening(item, fast);
                showSingleResult(item);
                showResultModal('result');
                
                if (result.data.bingo_complete) {
                    try {
                        localStorage.setItem('bingo_complete_' + caseId, '1');
                    } catch (e) {}
                    window.dispatchEvent(new CustomEvent('bingoCardComplete', {
                        detail: { caseId: parseInt(caseId) }
                    }));
                }
                
                showNotification('Кейс успешно открыт!', 'success');
                updateAvailableCount();
                updateBalance(currentBalance);
            }
        } catch (error) {
            console.error('Open case error:', error);
            hideResultModal();
            
            if (error.message) {
                showNotification(error.message, 'error');
            } else if (error.data && error.data.message) {
                showNotification(error.data.message, 'error');
            } else {
                showNotification('Ошибка при открытии кейса', 'error');
            }
        } finally {
            isOpening = false;
            setButtonsDisabled(false);
        }
    }
    
    window.sellItem = async function(itemId, price) {
        try {
            var formData = new FormData();
            formData.append('_token', csrfToken);
            
            var response = await fetch('/cases/sell/' + itemId, {
                method: 'POST',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                },
                body: formData
            });
            
            var result = await response.json();
            
            if (result.success) {
                currentBalance = result.data.balance_after;
                updateBalance(currentBalance);
                showNotification('Предмет продан за ' + price.toFixed(2) + ' ₽', 'success');
                
                var controls = document.querySelector('.result-controls');
                if (controls) controls.remove();
            }
        } catch (error) {
            showNotification('Ошибка при продаже предмета', 'error');
        }
    };
    
    window.repeatOpen = function() {
        var controls = document.querySelector('.result-controls');
        if (controls) controls.remove();
        
        // Восстанавливаем кейс
        caseContainer.style.display = 'block';
        gamesWrapper.style.display = 'none';
        gamesWrapper.innerHTML = '';
        gamesWrapper.classList.remove('finished');
        
        // Восстанавливаем кейс с картинками
        caseContainer.innerHTML = 
            '<div class="case-circle">' +
                '<img src="/img/case-circle.png" alt="animated-circle" class="case-animated-circle">' +
            '</div>' +
            '<img src="' + caseImageBack + '" alt="CS2 кейс «' + caseName + '»" title="CS2 кейс «' + caseName + '»" class="case-image">' +
            '<img src="https://cdn6.gamecontent.io/themes/7thBirthday/img/case-box/overlay-view.png" alt="theme static overlay" class="case-image theme static-overlay">' +
            '<img src="' + caseImageFront + '" alt="CS2 кейс «' + caseName + '»" title="CS2 кейс «' + caseName + '»" class="case-image animated">';
        
        updateButtonsState(currentBalance);
        window.scrollTo({ top: 0, behavior: 'smooth' });
    };
    
    async function toggleFavorite() {
        if (isGuest) {
            showNotification('Пожалуйста, авторизуйтесь', 'warning');
            return;
        }
        
        try {
            var formData = new FormData();
            formData.append('_token', csrfToken);
            
            var response = await fetch(favoriteUrl, {
                method: 'POST',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                },
                body: formData
            });
            
            var result = await response.json();
            
            if (result.success) {
                var icon = favoriteBtn.querySelector('use');
                var isFavorite = result.data.is_favorite;
                icon.setAttribute('xlink:href', isFavorite ? '/assets/img/icons.svg#icon-heart' : '/assets/img/icons.svg#icon-heart-empty');
                showNotification(isFavorite ? 'Добавлено в избранное' : 'Удалено из избранного', 'success');
            }
        } catch (error) {
            showNotification('Ошибка при добавлении в избранное', 'error');
        }
    }
    
    if (openBtn) {
        openBtn.addEventListener('click', function() { openCase(false); });
    }
    if (fastOpenBtn) {
        fastOpenBtn.addEventListener('click', function() { openCase(true); });
    }
    
    if (countList) {
        countList.addEventListener('click', function(e) {
            var target = e.target.closest('li');
            if (!target) return;
            e.preventDefault();
            selectCount(parseInt(target.value));
        });
    }
    
    if (favoriteBtn) {
        favoriteBtn.addEventListener('click', function(e) {
            e.preventDefault();
            toggleFavorite();
        });
    }
    
    updateButtonsState(currentBalance);
    
    window.addEventListener('balanceUpdated', function(e) {
        if (e.detail && e.detail.balance !== undefined) {
            currentBalance = parseFloat(e.detail.balance);
            updateButtonsState(currentBalance);
        }
    });
    
    console.log('🎰 Case Opening System initialized');
});

window.updateBalance = function(amount) {
    window.dispatchEvent(new CustomEvent('balanceUpdated', {
        detail: { balance: amount }
    }));
};
</script>
@endpush