@extends('site.layouts.master')
@section('content')
    <div class="main-container" style="background-color: unset">
        <div class="container mb-4 text-center">
            <div class="wrapper">
                <div class="profile-card js-profile-card">
                    <div class="profile-card__img">
                        <img src="{{ $authUser->avatar_file }}" alt="profile card">

                    </div>
                    <div class="title-card" style="margin-top: -2em">
                        <h5 style="font-size: 15px">
                            {{ $authUser->name }}
                            <br>
                            <span style="font-size: 10px"> <b style="color: #e001e0;">{{ $authUser->points }}</b> امتیاز</span>
                        </h5>
                    </div>
                </div>
            </div>
{{--            <div class="">--}}
             <div class="number-searchi">
                 <div class="input-number row">
                     <div class="" style="display: inline-block;width: 80%;">
                         <input class="input-num" placeholder="شماره مورد نظر را وارد کنید!">
                     </div>
                     <div class="" style="display: inline-block">
                         <a href="" class="search-opponent">جستجو</a>
                         {{-- <i class="fas fa-magnifying-glass"></i> --}}
                     </div>
                 </div>

                 <div class="row searched">
                     <div class="shadow bg-white mt-3 rounded p-4 w-100">
                         <a href="{{ route('startChallengeWithFriend') }}" data-phone="" class="link-to-user">
                            <p class="name"></p>
                            <p class="mobile"></p>
                         </a>
                     </div>
                 </div>
             </div>
{{--            </div>--}}
        </div>
    </div>
@endsection
@section('scripts')
<script>
    $(document).on('click', '.search-opponent', function(e){
        e.preventDefault()
        let num = $('.input-num')
        if(num.val() != ''){
            $.ajax({
                method: 'POST',
                url: '{{ route("findOpponentMobile") }}',
                data:{
                    mobile: num.val()
                }, success: function(res){
                    let link = $('.searched').find('.link-to-user')

                    if(typeof res === 'object'){
                        $('.searched').find('.name').html(res.name)
                        $('.searched').find('.mobile').html(res.phone)
                        link.attr("href", link.attr('href') + `/${res.phone}`)
                    }else{
                        $('.searched').find('.name').html(res)
                        $('.searched').find('.mobile').html('')
                    }

                }
            })
        }
    })
</script>
@endsection