@extends('site.layouts.master')
@section('content')

    <style>
        @media screen and (max-width: 760px) {
            body {
                /*background: #b667df;*/
                /*overflow: hidden;*/
                background-repeat: no-repeat;
            }

            /*.main-container {*/
            /*    background-color: unset;*/
            /*    width: 100% !important;*/
            /*    margin: 0 auto !important;*/
            /*}*/
            /* html {
                width: 97% !important;
            }
        }
        html {
            width: 26%;
        } */
            body {
            {{--            background: url({{ asset('site/img/paracivil/bg-paracivil.jpg') }});--}}
 /*            background-size: contain;*/
            }

            /* .menu-overlay .main-menu, .main {
                background: url("{{ asset('site/img/paracivil/2.gif') }}");
                background-repeat: no-repeat;
                background-size: contain;
                margin-top: -0.5em;
                overflow-y: hidden;
                height: 30vh;

            } */

            @media screen and (max-width: 1960px) and (min-width: 1800px) {
                .main-container {
                    background-color: unset;
                    width: 85%;
                    margin: 0 5em;
                }
            }
            @media screen and (max-width: 1024px) and (min-width: 985px) {
                .main-container {
                    background-color: unset;
                    width: 85%;
                    margin: 0 5em;
                }
            }
            @media screen and (max-width: 1024px) and (min-width: 767px) {
                /* html {
                    width: 64%;
                } */
            }
    </style>
    <div class="main-container main-con" style="background-color: unset">
        <div class="container mb-4 text-center">
            <div class="row rankbar-header">
                <div class="col-4 rankbar-header__right">
                    <div class="rankbar-header__right__img">
                        <img src="{{ $authUser->avatar_file }}" style="">
                    </div>
                    <span class="rankbar-header__name">
                        من
                    </span>
                </div>
                <div class="col-4 rankbar-header__middle">
                    {{-- <span>
                        نتیجه تا الان
                    </span> --}}
                    <p class="rankbar-header__score">
                        {{-- {{ $tournament->selfCorrects() }} - {{ $tournament->opponentCorrects() }} --}}
                        <span class="shadow-sm">{{ $tournament->selfCorrects() }}</span>
                        <span class="shadow-sm">{{ $tournament->opponentCorrects() }}</span>
                    </p>
                    {{-- <span>
                        {{ $tournament::STATUS[$tournament->status] }}
                    </span> --}}
                </div>
                <div class="col-4 rankbar-header__left">
                    <div class="rankbar-header__left__img">
                        <img src="{{ $tournament->opponent->avatar_file }}" style="">
                    </div>
                    <span class="rankbar-header__name">
                        {{ $tournament->opponent->name }}
                    </span>
                </div>
                @if($tournament->turn->id != auth()->id())
                    <div class="col-12 rankbar-header__turn">
                        <span>
                            <i class="fa fa-lock"></i>{{ $tournament::STATUS[$tournament->status] }}
                        </span>
                    </div>
                @endif
            </div>
            <div class="baryou row">
                <div class="col-6">
                    @foreach ($tournament->selfQuestions as $item)
                        @php
                            $selfStatus = 'شروع نشده';
                            $selfStatusClass = '';
                            if($item->correct == '0' || $item->correct == '1'){
                                $selfStatus = $item->correct == '1' ? '<i class="far fa-check-circle"></i>' : '<i class="far fa-times-circle"></i>';
                                $selfStatusClass = $item->correct == '1' ? 'yes-rank' : 'no-rank';
                            }

                            if($tournament->turn_id == auth()->id()){
                                $notAnswerd = $tournament->selfQuestions()->where('answer', '!=', null)->count();
                                $selfTurn = $notAnswerd == 1 ? $notAnswerd + 1 : $notAnswerd + 1;
                                if($loop->iteration == $selfTurn && $tournament->winner_id == null){
                                    $selfStatus = 'شروع کن';
                                    $selfStatusClass = 'start-rank';
                                }
                            }

                        @endphp
                        <div class="list-rank row">
                            <div class="col-12 p-0">
                                <div class="container-rankbar">
                                    @if ($selfStatusClass == 'start-rank')
                                        <a href="{{ route('quiz', $tournament->id) }}">
                                            <div
                                                class="skills rankime {{ $selfStatusClass }}">{!! $selfStatus !!} </div>
                                        </a>
                                    @else
                                        <div class="skills rankime {{ $selfStatusClass }}">{!! $selfStatus !!}</div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
                <div class="col-6">
                    @foreach ($tournament->opponentQuestions as $item)
                        @php
                            $opponentStatus = 'شروع نشده';
                            $opponentStatusClass = '';
                            if($item->correct == '0' || $item->correct == '1'){
                                $opponentStatus = $item->correct == '1' ? '<i class="far fa-check-circle"></i>' : '<i class="far fa-times-circle"></i>';
                                $opponentStatusClass = $item->correct == '1' ? 'yes-rank' : 'no-rank';
                            }
                        @endphp
                        <div class="list-rank row">
                            <div class="col-12 p-0">
                                <div class="container-rankbar">
                                    <div class="skills rankime {{ $opponentStatusClass }}">{!! $opponentStatus !!}</div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
            <div class="main-bottom-btn row" style="margin-bottom: 2em;">
                <a href="{{ route('home') }}" class="btn btn-success mt-2">برگشت به خانه</a>
            </div>
        </div>
    </div>
@endsection
{{--@section('scripts')--}}
{{--    <script>--}}
{{--        setTimeout(() => {--}}
{{--            $.ajax({--}}
{{--                type: 'GET',--}}
{{--                url: "{{ route('lobby', $tournament->id) }}",--}}
{{--                success: function (res) {--}}
{{--                    $('.main-container').html($(res).find('.main-container').html())--}}
{{--                }--}}
{{--            });--}}
{{--        }, 10000);--}}
{{--    </script>--}}
{{--@endsection--}}