@extends('website.layout.master_auth')
@section('title', 'الرئيسية')
@section('content')

    <!--  -->
    <div class="body-content">
        <div class="container">

            <div class="row mt-5  justify-content-center">

                <div class="col-12 col-lg-4">
                    <div class="box-x">
                        <div class="chrt1">
                            <div class="c-chrt1">
                                <canvas width="180px" id="myChart1"></canvas>
                            </div>
                            <div class="r-chrt1">
                                <h4>Welcome <br>
                                    {{ auth()->user()->first_name }} {{ auth()->user()->last_name }}</h4>
                                <a href="{{ route('my-account') }}">View account</a>
                            </div>
                        </div>
                    </div>
                    <div class="box-x">
                        <div class="v-ll">
                            <h6>Revision resources</h6>
                            <a href="{{ url('/my-account')  }}">View all</a>
                        </div>
                        <div class="v-ll">
                            <h6>{{ Carbon\Carbon::now()->format('F') }} foamed</h6>
                        </div>
                        @foreach($blogs as $blog)
                        <div class="item-link">
                            <img src="{{ asset('web/img/link.svg') }}" alt="">
                            <a href="{{ $blog->link }}">{{ $blog->title }}</a>
                        </div>
                        @endforeach
                    </div>
                    <div class="box-x">
                        <div class="v-ll">
                            <h6>Help & Support</h6>

                        </div>
                        <div class="try-it  p-0 m-0">
                            <a href="{{ url('my-account') }}" class="try">FAQ</a>
                            <a href="{{ route('my-account') }}" class="try-free">Your account</a>
                        </div>
                        <div class="try-it  p-0 m-0">
                            <a href="{{ route('my-account') }}" class="try">Chat with the admin</a>
                            <!-- <a href="" class="try-free"></a> -->
                        </div>
                    </div>
                </div>
                <div class="col-12 col-lg-8">
                    <div class="row">
                        <div class="col-12 col-lg-6">
                            <div class="box-c">
                                <h3>Your membership</h3>
                                <p>Your last day of membership is {{  \Carbon\Carbon::now()->addMonths((auth()->user()->package) ? auth()->user()->package->duration : null)->format('d M Y') }}</p>
                                <a href="{{ url('my-account#my-coount2') }}">Extend</a>
                            </div>
                            <div class="box-x">
                                <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Revision session</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Mock exam</a>
                                    </li>

                                </ul>
                                <div class="tab-content" id="pills-tabContent">
                                    <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
                                        <div class="v-ll">
                                            <h6>
                                                Current revision session
                                                @if(!empty($revision_history))
                                                Score: {{round($revision_history->answer_number / $revision_history->question_number  *100, 0) }} %
                                                @else
                                                Score: 0 %
                                                @endif
                                            </h6>

                                        </div>
                                        <div class="c-li">
                                            <div class="">
                                                <img src="{{asset('web')}}/img/resuscitation.svg" alt="">
                                                <h6>resuscitation</h6>
                                            </div>
                                            <a href="{{($revision_history) ? $revision_history->last_url : null}}">Start</a>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
                                        <div class="v-ll">
                                            <h6>
                                                Current mock exam
                                            </h6>


                                        </div>
                                        <div class="v-ll">
                                            <h6>
                                                Time left:
                                                <span>
                                                 {{($mock_history) ? $mock_history->stopped_time : null}}
                                                </span>

                                            </h6>
                                        </div>
                                        <div class="v-ll">
                                            <h6>

                                                <span>
                                                    @if(!empty($mock_history))
                                                        You have answered {{$mock_history->answer_number}} out of {{$mock_history->question_number}} questions
                                                    @else
                                                        You have answered 0 out of 0 questions
                                                    @endif

                                                </span>

                                            </h6>
                                        </div>
                                        <div class="lider-t">
                                            @if(!empty($mock_history))
                                            <input min="1" max="{{$mock_history->question_number}}" value="{{$mock_history->answer_number}}" id="" type="range">
                                            @else
                                            <input min="1" max="0" value="0" id="" type="range">
                                            @endif
                                        </div>
                                        <div class="try-it tre  p-0 m-0">
                                            @if(!empty($mock_history))
                                            <a href="{{$mock_history->last_url}}" class="try">Continue</a>
                                            @else
                                            <a href="" class="try">Start</a>
                                            @endif
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-lg-6">

                            <div class="box-x">
                                <div class="v-ll">
                                    <h6 class="mb-0">
                                        Weekly avverage
                                    </h6>
                                    <div class="prci">
                                        <p>60%</p>

                                        <div class="">
                                            <img src="./img/err.svg" alt="">
                                            <span>30%</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="box-x">
                                <div class="v-ll">
                                    <h6>previous sessions</h6>
                                    <a href="{{ url('/review') }}">View all</a>
                                </div>

                                <a href="" class="mock">
                                    <div class="">
                                        <h6>Mock exam</h6>
                                        <span> {{ ($user_reviews_mocks) ? $user_reviews_mocks->created_at : null }}</span>
                                    </div>
                                    <h6>{{ $data_mock }}%</h6>
                                </a>
                                <a href="" class="mock">
                                    <div class="">
                                        <h6>Revision session </h6>
                                        <span> {{ ($user_reviews_revisions) ? $user_reviews_revisions->created_at : null }}</span>
                                    </div>
                                    <h6>{{ $data_revisions }}%</h6>
                                </a>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="box-x">
                                <canvas id="myChart" width="100%" height=""></canvas>

                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>


    </div>
    </div>
@endsection
@push('script')
    <script>
        const ctx = document.getElementById('myChart');
        const myChart = new Chart(ctx, {
            type: 'line',
                data: {
                    datasets: [{
                        type: 'bar',
                        label: 'Bar Dataset',
                        data: [10, 20, 30, 40]
                    }, {
                        type: 'line',
                        label: 'Line Dataset',
                        data: [50, 50, 50, 50],
                    }],
                    labels: ['January', 'February', 'March', 'April']
                },

            options: {

                responsive: true,
                plugins: {
                    legend: {
                        position: 'top',
                    },
                    title: {
                        display: true,
                        text: 'Chart.js Stacked Line/Bar Chart'
                    }
                }
            },

        });

        const ctx1 = document.getElementById('myChart1');

        const myChart1 = new Chart(ctx1, {
            type: 'pie',
            data: {
                labels: ['Revision', 'Mock',],
                datasets: [{
                    label: '# of Votes',
                    data: ["{{$total_revision_sucess_answer}}", "{{$total_mock_sucess_answer}}"],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });



    </script>
@endpush