@extends('site.layouts.master')
@section('content')
    <style>
        @media screen and (max-width: 760px) {
            body {
                /*background: linear-gradient(-284deg, #194db4, #b667df);*/
                overflow: hidden;
                background-repeat: no-repeat;
            }

            /*.thurno {*/
            /*    margin-right: 0 !important;*/
            /*}*/
            /* html {
                width: 97% !important;
            } */
        }

        /* html {
            width: 26%;
        } */
        .main {
            background: url("site/img/paracivil/1.gif");
            background-repeat: no-repeat;
            background-size: contain;
            /* margin-top: 4.5em; */
            overflow-y: hidden;
        }

        @media screen and (max-width: 1960px) and (min-width: 1800px) {
            /* .thurno {
                margin-right: 27px;
            } */
        }

        @media screen and (max-width: 1024px) and (min-width: 985px) {
            /* .thurno {
                margin-right: 27px;
            } */
        }

        @media screen and (max-width: 1000px) and (min-width: 767px) {
            /* html {
                width: 74%;
            } */
        }
    </style>
    <div class="main-container choose-opponent" style="background-color: unset">
        <div class="container mb-4 text-center">
            {{--            <div class="header-acount row" style="text-align: right">--}}
            {{--                <div class="col-4">--}}
            {{--                    <img src="/site/img/user1.png" class="acunt-img">--}}
            {{--                </div>--}}
            {{--                <div class="col-8 acount-p">--}}
            {{--                    <p>--}}
            {{--                        سامان درویشی--}}
            {{--                    </p>--}}
            {{--                    <span>--}}
            {{--                        5600 سوال باقی مانده--}}
            {{--                    </span><br>--}}
            {{--                    <span style="line-height: 2">--}}
            {{--                        امتیاز: 5869--}}
            {{--                    </span>--}}
            {{--                </div>--}}
            {{--            </div>--}}
            {{--            <div class="banner-time row">--}}
            {{--                <div class="col-3">--}}
            {{--                    <i class="fa-solid fa-medal ml-2" style="font-size: 20px"></i>--}}
            {{--                </div>--}}
            {{--                <div class="col-9">--}}
            {{--                    <p style="font-size: 20px">--}}
            {{--                        5600 سوال باقی مانده--}}
            {{--                    </p>--}}
            {{--                </div>--}}
            {{--            </div>--}}

            <div class="search-rival">
                <p class="searchProcess" style="margin: 1em auto;">
                    @if($tournament)
                        در حال جستجوی حریف...<i class="fas fa-search"></i>
                    @else
                        بازی شما به پایان رسیده
                    @endif
                </p>
                <p class="againProcess" style="margin: 1em auto; display: none">متاسفانه حریفی پیدا نشد دوباره تلاش
                    کن</p>
            </div>
            <div class="rival-search-text ">
                <p class="searchProcess">صبر کن الان حریفتو پیدا می کنم...</p>
                <button class="btn btn-outline-warning againProcess searchAgain" style="display: none !important;">دوباره جستجو کن
                </button>
            </div>
            <div class="thurno searchProcess">
                <div class="row">
                    <div class="col-4">
                        <div class="rival">
                            <div class="choose-opponent__img">
                                <img src="{{ $authUser->avatar_file }}">
                            </div>
                            <p>
                                خودم
                            </p>
                        </div>
                    </div>
                    <div class="col-4 choose-opponent__icon" style="margin: auto">
                        <p>
                            ?
                        </p>
                    </div>
                    <div class="col-4">
                        <div class="rival rival-search">
                            <div class="choose-opponent__img">
                                <img
                                    src="{{ $tournament->opponent ? $tournament->opponent->avatar_file : asset('site/img/paracivil/paracivil-512.png.svg') }}">
                            </div>
                            <p 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>
    </div>

@endsection
@section('scripts')
    <script>
        @if($tournament)
        var opponent = 0;
        var search = 1;
        var searchEachSec = 5000;
        var searchTimeout = 30000;
        var intervalId;
        var searchTimeoutId;

        function startSearch() {
            intervalId = setInterval(function () {
                $.ajax({
                    type: 'POST',
                    url: '{{ route('find-opponent', $tournament->id) }}',
                    success: function (res) {
                        if (res != false) {
                            $('.opponent-name').html(res.name);
                            opponent = 1;
                            $('.search-rival p').html('{{ $tournament::FIND_OPPONENT_TEXT[array_rand($tournament::FIND_OPPONENT_TEXT)] }}');
                            setTimeout(function () {
                                window.location.href = '{{ route('lobby', $tournament->id) }}';
                            }, 2000);
                        }
                    }
                });
            }, searchEachSec)

            searchTimeoutId = setTimeout(function() {
                stopSearch();
            }, searchTimeout);
        }

        function stopSearch() {
            clearInterval(intervalId);
            opponent = 0;
            search = 0;
            $('.searchProcess').hide();
            $('.againProcess').show();
        }

        startSearch();

        $('.searchAgain').on('click', function () {
            if (search === 0) {
                search = 1;
                $('.searchProcess').show();
                $('.againProcess').hide();
                startSearch();

                clearTimeout(searchTimeoutId);
                searchTimeoutId = setTimeout(function() {
                    stopSearch();
                }, searchTimeout);
            }
        });
        @endif
    </script>
@endsection