@extends('layouts.student')
@section('content')
<style>
    .skew-title{
        transform: skew(calc(-1* 15deg));
        color: #ffffff;
        background: #223756;
        width: 200px;
        padding: 10px 5px;
        text-align: center
    }
</style>
    <!--User Profile-->
    <div class="app-content my-3 my-md-5">
        <div class="side-app">
            <section class="sptb  profile-1">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-3">
                            <div class="card rounded shadow-lg" style="background: rgb(42,94,115);">
                                <div class="card-body">
                                    <div class="wideget-user">
                                        <div class="row">
                                            <div class="col-lg-12 col-md-12">
                                                <div class="wideget-user-desc text-center">
                                                    <div class="wideget-user-img">
                                                        @if ( !$teachingTeamProfile->image)
                                                        <img class="" src="{{env('SECURE_ASSETS').'/images/users/user-male.png'}}" width="100" alt="img" >
                                                            @else
                                                            <img class="" src="{{ $teachingTeamProfile->getImage($teachingTeamProfile->image)}}" width="100" alt="img">
                                                        @endif
                                                    </div>
                                                    <div class="user-wrap wideget-user-info">
                                                        <a href="javascript:void(0)"><h4 class="font-weight-semibold text-white">{{ $teachingTeamProfile->ttname }}</h4></a>
                                                        <span class="text-white">Created Since {{ $teachingTeamProfile->created_at->format('F') }} {{ $teachingTeamProfile->created_at->format('Y') }}</span>
                                                        <div class="wideget-user-rating">
                                                            @for ($r=1;$r <= 5; $r++)
                                                            <a href="javascript:void(0)"><i class="fa fa-star{{ $r <= $teachingTeamProfile->rating ? '':'-o' }} text-warning"></i></a>
                                                            @endfor
                                                            <span class="text-white">({{ $teachingTeamProfile->teacher_courses_count }}) Courses</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-12 col-md-12 text-center">
                                                <div class="wideget-user-info ">
                                                    <div class="wideget-user-icons mt-2">
                                                        @if ($teachingTeamProfile->facebook)
                                                            <a target="_blank" href="{{ $teachingTeamProfile->facebook }}" class="mt-0"><i class="fa fa-facebook"></i></a>
                                                        @endif
                                                        @if ($teachingTeamProfile->whatsapp)
                                                            <a href="https://wa.me/{{ $teachingTeamProfile->whatsapp }}" target="_blank"><i class="fa fa-whatsapp"></i></a>
                                                        @endif
                                                        @if ($teachingTeamProfile->email)
                                                            <a href="{{ $teachingTeamProfile->email }}" class="mt-0"><i class="fa fa-google"></i></a>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @if ($suggested_teachers->count() > 0)
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title">Suggested Teachers</h3>
                                </div>
                                <div class="card-body">
                                    <ul>
                                        @foreach ($suggested_teachers as $suggested)
                                            <li class="mb-3">
                                                <div class="">
                                                    <a href="{{ route('student.teacher.teacherProfile',$suggested->ttid) }}">
                                                        <span class="avatar avatar-md d-block brround cover-image me-2" data-bs-image-src="{{ $suggested->image ? $suggested->getImage($suggested->image) : env('SECURE_ASSETS').'/images/users/user-male.png'}}"></span>
                                                        <div class="my-auto"><a href="{{ route('student.teacher.teacherProfile',$suggested->ttid) }}" class="text-dark font-weight-semibold d-block">{{ $suggested->ttname }}</a><span class="text-muted"> ({{ $suggested->teacher_courses_count }}) Courses</span></div>
                                                        <div class="my-auto ms-auto">
                                                            <span class="d-block">
                                                                <p class="mb-0">
                                                                    <span class="fs-14">
                                                                        @for ($r=1;$r <= 5; $r++)
                                                                        <a href="javascript:void(0)"><i class="fa fa-star{{ $r <= $suggested->rating ? '':'-o' }} text-warning"></i></a>
                                                                        @endfor
                                                                    </span>
                                                                </p>
                                                            </span>
                                                        </div>
                                                    </a>
                                                </div>
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                            </div>
                            @endif
                        </div>
                        <div class="col-lg-9">
                            <div class="border-0">
                                <div class="card mb-5">
                                    <div class="card-body">
                                        <div class="profile-log-switch">
                                            <div class="media-heading">
                                                <h3 class="card-title mb-3 font-weight-bold skew-title">Personal Details</h3>
                                            </div>
                                            <ul class=" mb-3">
                                                <li><a href="javascript:void(0)"><span class="font-weight-bold text-default-dark">Team Name :</span> <span class="user-1"> {{ $teachingTeamProfile->ttname }}</span></a></li>
                                                <li><a href="javascript:void(0)"><span class="font-weight-bold text-default-dark">Email :</span> <span class="user-1"> {{ $teachingTeamProfile->email }}</span></a></li>
                                                @if ($teachingTeamProfile->show_phone)
                                                <li><a href="javascript:void(0)"><span class="font-weight-bold text-default-dark">Phone :</span> <span class="user-1"> {{ $teachingTeamProfile->phone }} </span></a></li>
                                                @endif
                                            </ul>
                                            @if (strip_tags($teachingTeamProfile->body) != '')
                                            <div class="row mt-3">
                                                <div class="col-md-12">
                                                    <div class="media-heading">
                                                        <h3 class="card-title mb-3 font-weight-bold skew-title">Biography</h3>
                                                    </div>
                                                    <p>{!!  html_entity_decode($teachingTeamProfile->body) !!}</p>
                                                </div>
                                            </div>
                                            @endif
                                            <div class="row mt-3">
                                                <div class="col-md-12">
                                                    <div class="media-heading">
                                                        <h3 class="card-title mb-3 font-weight-bold skew-title">Team members</h3>
                                                    </div>
                                                    @foreach ($teachingTeamUsers as $teacher)
                                                    <div class="card mb-3 col-md-4 me-xl-5 box">
                                                        <div class="card-body">
                                                            <a href="javascript:void(0)">
                                                                <div class="d-flex">
                                                                    @if ( !$teacher->image)
                                                                        <span class="avatar avatar-md d-block brround cover-image me-2" data-bs-image-src="{{$teacher->gender == 'm' || $teacher->gender == 'male' ? env('SECURE_ASSETS').'/images/users/user-male.png' : env('SECURE_ASSETS').'/images/users/user-female.png'}}" ></span>
                                                                        @else
                                                                        <span class="avatar avatar-md d-block brround cover-image me-2" data-bs-image-src="{{ $teacher->getImage($teacher->image) }}" ></span>
                                                                    @endif
                                                                    <div class="my-auto"><a href="javascript:void(0)" class="text-dark font-weight-semibold d-block">{{ $teacher->first_name.' '.$teacher->last_name }}</a></div>
                                                                </div>
                                                            </a>
                                                            @if ($teacher->is_coach)
                                                            <div class="ms-auto position-absolute end-0 bottom-0 my-2">
                                                                <span class="badge badge-primary">main</span>
                                                            </div>
                                                            @endif
                                                        </div>
                                                    </div>
                                                @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="card mt-2">
                                    <div class="card-header">
                                        <h2 class="card-title text-primary">Courses</h2>
                                    </div>
                                    <div class="card-body">
                                        <div class="card bg-transparent border-0 shadow-none mb-0">
                                            <div class="card-body p-0">
                                                <div class="row">
                                                    @foreach ($linked_courses as $course)
                                                    <div class="col-xl-12 col-lg-12 col-md-12">
                                                        <div class="row">
                                                            <div class="col-lg-12 col-md-12 col-xl-12">
                                                                <div class="card overflow-hidden">
                                                                    <div class="ribbon ribbon-top-left ">
                                                                        <span style="background:#8c2828">{{ $course->esname }}</span>
                                                                    </div>
                                                                    <div class="d-md-flex">
                                                                        <!-- Single Course -->
                                                                        <!-- Course image -->
                                                                        <div class="item-card9-img w-40">
                                                                            <div class="item-card9-imgs">
                                                                                <a
                                                                                    href="javascript:void(0)"></a>
                                                                                <img src="{{env('SECURE_ASSETS').'/images/icons/favicon.png'}}"
                                                                                    alt="{{ $course->cname }}"
                                                                                    class="cover-image w-80">
                                                                            </div>
                                                                        </div>
                                                                        <!-- Course Info -->
                                                                        <div class="card border-0 mb-0">
                                                                            <div class="card-body p-0">
                                                                                <div
                                                                                    class="item-card9 ps-5 pt-5">
                                                                                    <a href="javascript:void(0)"
                                                                                        class="text-default-dark">
                                                                                        <h3
                                                                                            class="">
                                                                                            {{ $course->cname }}
                                                                                        </h3>
                                                                                    </a>
                                                                                    <div
                                                                                        class="font-weight-semibold  mt-4">
                                                                                        <div class="d-flex">
                                                                                            <div class="me-3">
                                                                                                <h4
                                                                                                    class="badge badge-primary">
                                                                                                    {{ $course->lshort_name }}
                                                                                                </h4>
                                                                                            </div>
                                                                                            <div class="me-3">
                                                                                                <h4 class="badge badge-danger" >{{ $course->bname }}</h4>
                                                                                            </div>

                                                                                        </div>
                                                                                    </div>
                                                                                    <p
                                                                                        class="mb-0 mt-1 lead w-90">
                                                                                        {{ Str::limit($course->cdescription, 100, '....') }}
                                                                                    </p>
                                                                                </div>
                                                                                <div class="border-top ps-5 mt-3" style="clear:both">
                                                                                    <div class="row">
                                                                                        @foreach ($course_recordings->where('teacher_course_id',$course->id) as $recording)
                                                                                            <div class="card my-3 col-md-10 me-xl-5 box">
                                                                                                <div class="card-body">
                                                                                                    <a href="{{ $recording->url }}">
                                                                                                        <div class="d-flex">
                                                                                                            <span class="avatar avatar-md d-block brround cover-image me-2" data-bs-image-src="{{ env('SECURE_ASSETS').'/images/media/recording.gif' }}" ></span>
                                                                                                            <div class="my-auto"><a href="{{  $recording->url }}" class="text-dark font-weight-semibold d-block">{{  $recording->topic }}</a></div>
                                                                                                        </div>
                                                                                                    </a>
                                                                                                    <div class="ms-auto position-absolute end-0 bottom-0 mb-3" data-bs-toggle="tooltip" data-bs-original-title="Watch recording">
                                                                                                        <a  class="showRecordingBtn mx-1" href="#showRecordingModal" data-vimeo="{{ $recording->vimeo_id}}" data-bs-effect="effect-sign" data-bs-toggle="modal"><i class="fa fa-play-circle-o fs-4"></i></a>
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>
                                                                                        @endforeach
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
    <div class="modal fade effect-sign show" id="showRecordingModal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Watch recording</h3>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div id="recording_player" class="recording_player"></div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('student-js')
{{-- recording player --}}
<script src="https://player.vimeo.com/api/player.js"></script>
<script>
    var videoPlayer; // Define the player variable outside the function to make it accessible

    $('.showRecordingBtn').on('click', function() {
        var url = $(this).attr('data-vimeo');
        var options = {
            url: url,
            width: 800,
            responsive: true
        };

        // Initialize the Vimeo player
        videoPlayer = new Vimeo.Player('recording_player', options);
        videoPlayer.on('play', function() {
            // Video is playing
        });

        $('#recording_player > div > iframe').attr('src', url);
    });

    // Listen for the modal close event
    $('#showRecordingModal').on('hidden.bs.modal', function () {
        if (videoPlayer) {
            videoPlayer.pause().then(function() {
                videoPlayer.setCurrentTime(0).then(function(seconds) {
                    console.log('Player reset to the beginning');
                }).catch(function(error) {
                    console.error('Error resetting the player:', error);
                });
            }).catch(function(error) {
                console.error('Error pausing the player:', error);
            });
        }
    });
</script>
@endsection