@php use App\Models\Level; @endphp
@extends('site.layouts.master')
@section('content')
    <style>

    </style>
    <div class="app-coin-page">
        <div class="app-coin-page__top">
            <div class="app-coin-page__num">
                <img src="../../assets/coin.png" alt=""/>
                <span>{{ number_format($user->paracoin, 4) }}</span>
            </div>
            <div class="app-coin-page__box__right">
                <img src="{{ asset($user->level?->icon) }}" alt=""/>
                <span>{{ $user->level?->label }}</span>
                <span class="app-coin-page__box__arrow"><i class="fa fa-angle-right"></i></span>
            </div>
        </div>
        {{-- <div class="app-coin-page__box">
            <div class="app-coin-page__box__logo">
                <img src="../../assets/logo.png" alt="" />
            </div>
            <div class="app-coin-page__box__content">
                <div class="app-coin-page__box__right">
                    <img src="{{ asset($user->level?->icon) }}" alt="" />
                    <span>{{ $user->level?->label }}</span>
                </div>
                <div class="app-coin-page__box__left">
                    <img src="../../assets/prizemain.png" alt="" />
                    <span>{{ number_format($user->points) }}</span>
                </div>
            </div>
        </div> --}}
        <div class="app-coin-page__main">
            <img src="../../assets/coin.png" alt=""/>
        </div>
        <div class="app-coin-page__progressbar">
            @if($nextLevel)
                <div class="app-coin-page__progressbar__inner">
                <span value="{{ $user->points }}" min="{{ $user->level->points }}"
                      max="{{ $nextLevel->points }}"></span>
                </div>
                <span>{{ $nextLevel?->label }}</span>
            @endif
        </div>
        <div class="app-coin-page__more">
            <h3>پاراکوین بیشتر می خوای؟</h3>
            <div class="app-coin-page__more__buttons">
                <button data-url="{{ $user->getReferral() }}" class="btn-invite-g shareable">لینک دعوت ثبت نام</button>
                <button data-url="{{ $user->getReferral('true') }}" class="btn-invite-f shareable"> لینک دعوت بازی
                </button>
                <a href="{{ route('tournament') }}"> شروع بازی جدید</a>
                <a href="{{ route('create-question') }}"> طراحی سوال جدید</a>
            </div>
        </div>
        <div class="app-coin-page__info">
            <button class="app-coin-page__info__button">
                <i class="fa fa-info-circle"></i>پاراکوین چی هست؟
            </button>
        </div>
        <div class="app-level-page__main">
            <div class="app-level-page__title">
                <h3>سطح بندی</h3>
                <span class="app-level-page__main__close">
                    <i class="fa fa-angle-up"></i>
                </span>
            </div>
            <ul>
                @foreach($levels as $level)
                    @php($next = Level::where('id', '>', $level->id)->first())
                    <li>
                        <div class="app-level-page__main__inner">
                            <div class="app-level-page__main__img">
                                <img src="{{ asset($level->icon) }}" alt=""/>
                            </div>
                            <div class="app-level-page__main__title">{{ $level->label }}</div>
                            <div class="app-level-page__main__num">
                                @if($next)
                                    <span>{{ $next->points }} - {{ $level->points }}</span>
                                @else
                                    <span>{{ $level->points }}+</span>
                                @endif
                                <img src="{{ asset('assets/coin.png') }}" alt=""/>
                            </div>
                        </div>
                    </li>
                @endforeach
            </ul>
        </div>
    </div>
@endsection
@section('scripts')
    <script>

        $("span.app-coin-page__box__arrow").click(function (e) {
            e.preventDefault();
            $(".app-level-page__main").slideToggle()
        })
        $(".app-level-page__main__close").click(function (e) {
            e.preventDefault();
            $(".app-level-page__main").slideUp()
        })

        // Paracoin Info Modal
        $('.app-coin-page__info__button').on("click", () => {
            Swal.fire({
                text: "پاراکوین یک امتیاز هست که می تونی با بازی و دعوت دوستانت بدستش بیاری و به زودی می تونی در وب سایت رسمی پاراسیویل خرجش کنی و باهاش دوره بخری.",
                closeOnClickOutside: true,
                showCloseButton: true,
                showConfirmButton: false,
                customClass: {
                    container: "modal-coin-info",
                },
            })
        })

        let progress = $(".app-coin-page__progressbar__inner span");
        let minSpan = progress.attr("min")
        let valueSpan = progress.attr("value") - minSpan;
        let maxSpan = progress.attr("max") - minSpan;
        let progressWidth = (valueSpan / maxSpan) * 100;
        progress.css("width", progressWidth + "%")
    </script>
@endsection