@extends('site.layouts.master')
@section('content')
    <style>
        body {
            background: url({{ asset('site/img/paracivil/bg-paracivil.jpg') }});
            background-size: contain;
        }
    </style>
    <div class="main-container">
        <div class="container mb-4 text-center">
            <div class="row">
                <div class="col-5">
                    <div class="rival">
                        <img src="{{ $authUser->avatar_file }}">
                        <p style="font-size: 10px">
                            خودم
                        </p>
                    </div>
                </div>
                <div class="col-2" style="margin: auto">
                    <p style="font-size: 15px;">
                        vs
                    </p>
                </div>
                <div class="col-5">
                    <div class="rival rival-search">
                        <img src="{{ $opponent->avatar_file }}">
                        <p style="font-size: 10px" class="opponent-name">
                            @if($tournament)
                                @if($tournament->opponent_id)
                                    {{ $tournament->opponent->name }}
                                @else
                            <i class="fas-fa-search"></i>در حال جستجو
                                @endif
                            @endif
                        </p>
                    </div>
                </div>
            </div>
            <div class="search-rival">
                <p style="margin: 1em auto;">
                    @if($tournament)
                        در حال جستجو برای پیدا کردن حریف...!<i class="fas-fa-search"></i>
                    @else
                        بازی شما به پایان رسیده
                    @endif
                </p>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
<script>
    @if($tournament)
    var opponent = 0;
    if(opponent == 0){
        setInterval(() => {
            $.ajax({
                type: 'POST',
                url: '{{ route('find-opponent', $tournament->id) }}',
                success: function(res){
                    $('.opponent-name').html(res.name)
                    opponent = 1;
                    $('.search-rival p').html('{{ $tournament::FIND_OPPONENT_TEXT[array_rand($tournament::FIND_OPPONENT_TEXT)] }}')
                    setTimeout(() => {
                        window.location.href = '{{ route('quiz', $tournament->id) }}'
                    }, 2000);
                }
            })
        }, 5000);
    }
    @endif
</script>
@endsection