@extends('layouts.master')
@section('title', 'Dashboard | Student | Guildroom')
@section('pagetitle', 'Student Dashboard')

@section('content')
    <div class="main">
        <h1 class="hd mb-30">Dashboard</h1>
        <div class="stud-insights mb-60">
            @if(!$mentorsForSlider->isEmpty())
                <div class="studentSales card-active">
                    @if(!empty($mentorsForSlider))
                        @foreach($mentorsForSlider  as $count=>$mentorForSlider)
                            <div id="mentorCard" class="mentorCard mentor{{$count}} topps">
                                <div class="mentor-star">
                                    <h4 class="student-ment">My mentors</h4>
                                </div>
                                <div class="studentcard">
                                    <div class="mentorInfo">
                                        <h1>{{$mentorForSlider->mentor->getFullName() ?? "No mentor yet"}}</h1>
                                        <p class="mentorField">{{$mentorForSlider->mentor['data']['degree'] ?? ""}}</p>
                                    </div>
                                    <img class="cardPics"
                                         src="{{$mentorForSlider->mentor->present()->avatar }}"
                                         alt=""/>
                                </div>
                            </div>

                        @endforeach
                    @endif
                    <div class="pages">
                        @if(!empty($mentorsForSlider))
                            @foreach($mentorsForSlider as $count=>$mentor)
                                <div class="page-{{$count+1}}">
                                    <svg
                                        class="slide active"
                                        width="8"
                                        height="8"
                                        viewBox="0 0 12 12"
                                        fill="none"
                                        xmlns="http://www.w3.org/2000/svg"
                                    >
                                        <circle cx="6" cy="6" r="6" fill="white"/>
                                    </svg>
                                </div>
                            @endforeach
                        @endif
                    </div>
                </div>
            @else
                <div class="studentSales">
                    <div class="topps">
                        <h4 class="student-Appt">Request Mentor Match</h4>
                        <div class="studentcard2">
                            <p>Going through the profiler did not return any match or you chose to skip that step. We
                                can assign a mentor to you manually.
                                Please click the button below when you want or go back to the profiler.</p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-6">
                            <button class="start" id="requestMentorbtn"
                                    data-href="{{ route('profile.update.mentor_requested') }}"
                                    type="button">Make Request
                            </button>
                        </div>
                        <div class="col-6">
                            <button class="start" id="gotoProfilerbtn" data-href="{{ route('user.profiler.retake') }}"
                                    type="button">Goto Profiler
                            </button>
                        </div>
                    </div>
                </div>
            @endif
            <div class="studentSales">
                <div class="topps">
                    <h4 class="student-Appt">My Appointment</h4>
                    <div class="studentcard2">
                        <h1>You have {{$upcomingAppointments}} Upcoming appointment</h1>
                        <span class="material-icons-sharp">calendar_month</span>
                    </div>
                </div>
                <button class="start" id="viewappointmentBtn" data-href="{{ route('user.appointments') }}"
                        type="button">View appointment
                </button>
            </div>
        </div>

        <div class="gridLock">
            <div class="my-activity">
                <h2 class="mb-20">Recent Appointments</h2>
                <div class="activity mb-30">
                    @forelse($recentAppointments as $recentAppointment)
                        <div class="appt_Schedule">
                            <div class="topps">
                                <h4 class="appt-heading mb-30">{{$recentAppointment->getMeetingTime()->diffForHumans()}}</h4>
                                <div class="scheduleText">
                                    <img
                                        src="{{$recentAppointment->mentor->present()->avatar ?? url('assets/img/profile.png')}}"
                                        alt=""/>
                                    <div class="schedule_name">
                                        <h4>{{$recentAppointment->mentor->getFullName()}}</h4>
                                        <p>{{$recentAppointment->start}} - {{$recentAppointment->end}}</p>
                                    </div>
                                    <div class="view_schedule">
                                        <a href="{{ route('user.messages') }}">
                                            <h5 class="mr-5">Message</h5>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @empty
                        <p>You have no recent appointments at the moment</p>
                    @endforelse
                </div>
            </div>
            <div class="messages">
                <h2 class="mb-20">Messages</h2>
                @if($chats->count() > 0)
                    @foreach($chats as $chat)
                        <div class="message">
                            <img
                                src="{{ auth()->user()->present()->avatar ? auth()->user()->present()->avatar  : url('assets/img/profile.png') }}"
                                alt=""/>
                            <div class="mgg">
                                <a href="{{route("user.chat",$chat->withUser->id)}}">
                                    <h5>
                                        {{$chat->withUser->getFullName()}}
                                    </h5>
                                </a>

                                <p class="otherP">
                                    @php
                                        $lastMessageIndex = $chat->messages->count();
                                        if($lastMessageIndex==0){
                                            $message = null;
                                        }else{
                                            $message = $chat->messages[$lastMessageIndex-1];
                                        }
                                    @endphp
                                    @if(!is_null($message))
                                        {{str()->limit($message->message,46,)}}
                                    @else
                                        Click the mentor or mentee to have a chat,happy connecting...
                                    @endif
                                </p>
                            </div>
                            <div class="mg-num">
                                @if(!is_null($message))
                                    <p>{{$message->created_at->diffForHumans()}}</p>
                                @endif
                                {{--                                <span>4</span>--}}
                            </div>
                        </div>
                    @endforeach
                @else
                    <div class="insight-placeholder">
                        <p>You haven't had any conversations yet</p>
                    </div>
                @endif
                <a href="{{ route('user.messages') }}"> View all messages</a>
            </div>
            <div class="resources">
                <div class="mb-60">
                    <h2 class="mb-20">Quicklinks</h2>
                    <a href="{{ route('user.assignments') }}">
                        <div class="resource mb-30">
                            <img src="{{ asset('assets/images/assigment.png') }}" alt=""/>
                            <div class="resourceText">
                                <h2>Assignments</h2>
                                <p>{{$upcomingAssignments}} assignment</p>
                            </div>
                            <span class="material-icons-sharp">arrow_right_alt</span>
                        </div>
                    </a>
                </div>
                <div class="">
                    <h2 class="mb-20">Resources</h2>
                    <a href="{{ route('user.resources.books') }}">
                        <div class="resource mb-30">
                            <img src="{{ asset('assets/images/book2.png') }}" alt=""/>
                            <div class="resourceText">
                                <h2>Books</h2>
                                <p>{{$booksCount ?? 0}} books</p>
                            </div>
                            <span class="material-icons-sharp">arrow_right_alt</span>
                        </div>
                    </a>
                    <a href="{{ route('user.resources.videos') }}">
                        <div class="resource">
                            <img src="{{ asset('assets/images/play_icon.png') }}" alt=""/>
                            <div class="resourceText">
                                <h2>Videos</h2>
                                <p>{{$videosCount ?? 0}} videos</p>
                            </div>
                            <div class="resource-arrow">
                                <span class="material-icons-sharp">arrow_right_alt</span>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <script type="module">
        const driver = window.driver.js.driver;

        const driverObj = driver({
            popoverClass: 'driverjs-theme',
            //overlayColor: 'blue',
            showProgress: true,
            allowClose: true,
            steps: [
                {
                    element: '.page-header',
                    popover: {
                        title: 'Welcome to Guildroom',
                        description: 'Guildroom is a mentor mentee ...Guildroom is a mentor mentee Guildroom is a mentor mentee',
                        side: "left",
                        align: 'start'
                    }
                },
                {
                    element: '#nav_accordion',
                    popover: {
                        title: 'Main Menu',
                        description: 'This is the navigation menu to get around Guildroom',
                        side: "right",
                        align: 'center'
                    }
                },
                {
                    element: '#messages-menu',
                    popover: {
                        title: 'Messages',
                        description: 'Here you can chat with your mentor or mentee as the case may be.',
                        side: "left",
                        align: 'start'
                    }
                },
                {
                    element: '#mentorCard',
                    popover: {
                        title: 'Mentor Card',
                        description: 'This shows the mentor you have been matched with',
                        side: "bottom",
                        align: 'start'
                    }
                },
            ],
            // onDestroyStarted is called when the user tries to exit the tour
            onDestroyStarted: () => {
                if (!driverObj.hasNextStep() || confirm("Are you sure?")) {
                    driverObj.destroy();
                }
                showPleaseWait();
                $.ajax({
                    url: 'https://guildroom.ng/profile/update/toured',
                    type: 'POST',
                    dataType: "json",
                    success: function (resp) {
                        console.log('success marking toured');
                        hidePleaseWait();
                    },
                    error: function (err) {
                        console.log('error marking toured');
                        hidePleaseWait();
                        console.log('status error:' + err.status);
                    }
                });
            },
        });

        showPleaseWait();
        $.ajax({
            url: 'https://guildroom.ng/profile/get/toured',
            type: 'GET',
            dataType: "json",
            success: function (resp) {
                console.log('success getting toured');
                if (resp.toured !== 1) {
                    driverObj.drive();
                }
                hidePleaseWait();
            },
            error: function (err) {
                console.log('error getting toured');
                hidePleaseWait();
                console.log('status error:' + err.status);
            }
        });


        $('#requestMentorbtn').click(function (e) {
            e.preventDefault();
            e.stopPropagation();
            showPleaseWait();
            console.log()
            $.ajax({
                url: $(e.currentTarget).data().href,
                type: 'POST',
                dataType: "json",
                success: function (resp) {
                    console.log('success requesting mentor');
                    hidePleaseWait();
                },
                error: function (err) {
                    console.log('error requesting mentor');
                    hidePleaseWait();
                    console.log('status error:' + err.status);
                }
            });
        });


        $('#gotoProfilerbtn').click(function (e) {
            e.preventDefault();
            e.stopPropagation();
            showPleaseWait();
            window.location.href = $(e.currentTarget).data().href;

        });
    </script>
@endsection