@extends('layouts.admin')
@section('content')
<!--App-Content-->
<div class="app-content my-3 my-md-5">
    <div class="side-app">
        <div class="page-header">
            <h4 class="page-title">Teacher Profile</h4>
        </div>
        @include('admin.errors.form-errors')
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">{{ $teaching_team->ttname }}</h4>
                    </div>
                    <div class="card-body">
                        @if ($teaching_team->image)
                            <span class="avatar cover-image avatar-xxl brround mb-5 mx-auto d-block" data-bs-image-src="{{ $teaching_team->getImage($teaching_team->image) }}"></span>
                        @endif
                        <form id="teacher_profile_form" action="{{ route('teacher.profile.store',$teaching_team->ttid) }}" method="post" enctype="multipart/form-data">
                            <div class="row">
                                <div class="col-md-12 col-lg-12">
                                    <div class="control-group form-group">
                                        <div class="input-group file-browser">
                                            <input type="text" class="form-control border-end-0 browse-file bg-transparent"  placeholder="{{ $teaching_team->image ? 'Update image':'Upload image' }}" readonly="">
                                            <label class="input-group-btn">
                                               <span class="btn btn-primary br-bs-0 br-ts-0">
                                                Browse <input type="file" name="image" accept="image/*" onchange="return fileValidation('teacher_profile_image')" id="teacher_profile_image" style="display: none;">
                                              </span>
                                           </label>
                                        </div>
                                        <span class="text-danger image-error d-none">please select an image</span>
                                    </div>
                                </div>
                                <div class="col-md-12 col-lg-12">
                                    <div class="form-group">
                                        <label class="form-label">Profile body</label>
										<textarea id="profile_body" class="content2" name="body" required>{{ $teaching_team->body ? $teaching_team->body:old('body') }}</textarea>
                                    </div>
                                    <span class="text-danger body-error d-none">please insert the profile text</span>
                                </div>
                                <hr>
                                <h3 class="">Contact info</h3>
                                <div class="col-md-3 col-lg-3">
                                    <div class="form-group">
                                        <label class="form-label">Phone</label>
                                        <input type="text" class="form-control" name="phone" value="{{ $teaching_team->phone }}">
                                    </div>
                                </div>
                                <div class="col-md-3 col-lg-3">
                                    <div class="form-group">
                                        <label class="form-label">Facebook account</label>
                                        <input type="url" class="form-control" name="facebook" value="{{ $teaching_team->facebook }}">
                                    </div>
                                </div>
                                <div class="col-md-3 col-lg-3">
                                    <div class="form-group">
                                        <label class="form-label">Whatsapp</label>
                                        <input type="number" class="form-control" name="whatsapp" value="{{ $teaching_team->whatsapp }}">
                                    </div>
                                </div>
                                <div class="col-md-3 col-lg-3">
                                    <div class="form-group">
                                        <label class="form-label">email</label>
                                        <input type="email" class="form-control" name="email" value="{{ $teaching_team->email }}">
                                    </div>
                                </div>
                                <hr>
                                <h3 class="pb-3">
                                    Linked Courses
                                    @if ($linked_courses->count() > 0)
                                    <a class="ms-2" href="{{ route('teacher.profile.linkCourses',$teaching_team->ttid) }}" target="_blank" data-bs-toggle="tooltip" data-bs-original-title="Add courses">
                                        <i class="fa fa-plus fs-16"></i>
                                    </a>
                                    @endif
                                </h3>

                                @forelse ($linked_courses as $course)
                                <div class="col-md-12">
                                    <div class="card">
                                        <div class="card-status card-status-left bg-primary br-te-7 br-ts-7"></div>
                                        <div class="card-header">

                                            <h3 class="card-title"> {{ $course->cname.'_'.$course->bname.'_'.$course->lshort_name }}</h3>
                                            <div class="card-options">
                                                <div onClick="confirmDeleteCourse(event,{{$course->id}})" class="btn btn-outline-danger btn-sm waves-effect waves-light"
                                                    data-bs-toggle="tooltip" data-bs-original-title="Delete"
                                                    title='Delete Course'>
                                                    <i class="fa fa-trash fs-16"></i>

                                                </div>
                                                <a href="#addRecordingModal" data-teacher-profile-id="{{$course->teacher_profile_id}}" data-course-id="{{$course->id}}" data-bs-effect="effect-sign" data-bs-toggle="modal" class="addRecordingBtn modal-effect btn btn-primary btn-sm ms-2">Add recording</a>
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <div class="row">
                                            @forelse ($course_recordings->where('teacher_course_id',$course->id) as $recording)
                                                <div class="col-md-4">
                                                    <div class="card ">
                                                        <div class="card-header ">
                                                            <h3 class="card-title ">{{ $recording->topic }}</h3>
                                                            <div class="card-options">
                                                                <a href="javascript:void(0)" data-bs-toggle="tooltip" data-bs-original-title="Delete Recording" onClick="confirmDeleteRecording(event,{{$recording->id}})" class="btn btn-outline-light btn-sm waves-effect waves-light">
                                                                    <i class="fa fa-trash fs-16"></i>
                                                                </a>
                                                            </div>
                                                        </div>
                                                        <div class="card-body text-center">
                                                            <div>
                                                                <img class="avatar avatar-xxl brround" src="{{env('SECURE_ASSETS').'/images/media/recording.gif'}}">
                                                            </div>
                                                            <a href="#showRecordingModal" data-vimeo="{{ $recording->vimeo_id}}" data-bs-effect="effect-sign" data-bs-toggle="modal" class="showRecordingBtn modal-effect  btn btn-sm fw-bold btn-primary mb-0 mt-3">
                                                                Watch
                                                                <i class="fa fa-play-circle-o ms-1"></i>
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                                @empty
                                                <p class="fw-bold text-primary text-center">No Recordings</p>
                                                @endforelse
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @empty
                                    <a href="{{ route('teacher.profile.linkCourses',$teaching_team->ttid) }}" target="_blank" class="mb-3">
                                        No Linked Courses Yet.
                                        <i class="fa fa-plus fs-16 ms-2 btn btn-outline btn-outline-light" data-bs-toggle="tooltip" data-bs-original-title="Add courses"></i>
                                    </a>
                                @endforelse
                                <hr>
                                <h3 class="pb-3">Settings</h3>
                                <div class="col-md-12 col-lg-12">
                                    <label class="form-switch">
                                        <input type="checkbox" name="is_site" class="form-switch-input" {{ $teaching_team->is_site ? 'checked':'' }} {{ $remaining_positions_show_in_home_page == 0 ? 'disabled':'' }}>
                                        <span class="form-switch-indicator"></span>
                                        <span class="form-switch-description">
                                            Show in home page <span class="text-danger">(remaining: {{ $remaining_positions_show_in_home_page }})</span>
                                        </span>
                                    </label>
                                </div>
                                <div class="col-md-12 col-lg-12 mt-5">
                                    <label class="form-switch">
                                        <input type="checkbox" name="is_active" class="form-switch-input" {{ $teaching_team->is_active ? 'checked':'' }}>
                                        <span class="form-switch-indicator"></span>
                                        <span class="form-switch-description">active</span>
                                    </label>
                                </div>
                                <div class="col-md-12 col-lg-12 mt-5">
                                    <label class="form-switch">
                                        <input type="checkbox" name="show_phone" class="form-switch-input" {{ $teaching_team->show_phone ? 'checked':'' }}>
                                        <span class="form-switch-indicator"></span>
                                        <span class="form-switch-description">show phone to public</span>
                                    </label>
                                </div>
                                <div class="col-md-12 col-lg-12 mt-5">
                                    <div class="star-ratings start-ratings-main clearfix mx-auto mb-2 mt-3 d-flex banner-ratings">
                                        <div class="stars stars-example-fontawesome stars-example-fontawesome me-2">
                                            <select class="example-fontawesome" name="rating" autocomplete="off">
                                                <option value="1" {{  $teaching_team->rating == 1 ? 'selected':'' }}>1</option>
                                                <option value="2" {{  $teaching_team->rating == 2 ? 'selected':'' }}>2</option>
                                                <option value="3" {{  $teaching_team->rating == 3 ? 'selected':'' }}>3</option>
                                                <option value="4" {{  $teaching_team->rating == 4 ? 'selected':'' }}>4</option>
                                                <option value="5" {{  $teaching_team->rating == 5 ? 'selected':'' }}>5</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div>
                                @csrf
                                <button type="submit" class="btn btn-primary mx-auto d-block w-25" id="submit_btn">Save</button>
                            </div>
                        </form>
                        <form method="POST" action="" id="delete-course">
                            @csrf
                            <input name="_method" type="hidden" value="DELETE">
                        </form>
                        <form method="POST" action="" id="delete-recording">
                            @csrf
                            <input name="_method" type="hidden" value="DELETE">
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade effect-sign show" id="addRecordingModal">
    <div class="modal-dialog modal-lg">
        <form action="" method="post" id="addRecordingForm">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title">Add recording</h6>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group ">
                        <div class="text-end">
                            <button type="button" name="add" id="dynamic-ar-r"
                                class="btn btn-outline-success btn-md waves-effect waves-light mt-1 mb-3">
                                <i class="fa fa-plus fs-10 me-1"></i>
                                <span class="fw-bold">Add New</span>
                            </button>
                        </div>
                        <div class="row">
                            <table class="table table-striped table-bordered table-vcenter text-nowrap"
                                id="dynamicAddRemoveRecording">
                                <thead class="text-center">
                                    <tr>
                                        <th>Topic</th>
                                        <th>Vemio ID</th>
                                    </tr>
                                    <thead>
                                    <tbody>
                                        <tr>
                                            <td>
                                                <input type="text" name="recordings[0][topic]" placeholder="Orientation"
                                                class="form-control" required>
                                            </td>
                                            <td>
                                                <input type="number" name="recordings[0][vimeo_id]" placeholder="123456789"
                                                    class="form-control" required />
                                            </td>
                                        </tr>
                                    </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary" type="submit">Submit</button> <button class="btn btn-secondary" data-bs-dismiss="modal" type="button">Close</button>
                </div>
            </div>
            @csrf
        </form>
    </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">
                <h6 class="modal-title">Watch recording</h6>
                <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('admin-js')
<script src="{{env('SECURE_ASSETS').'/plugins/wysiwyag/jquery.richtext.js'}}"></script>
<script src="{{env('SECURE_ASSETS').'/js/formeditor-1.js'}}"></script>
<script src="{{env('SECURE_ASSETS').'/plugins/jquery-bar-rating/jquery.barrating.js'}}"></script>
<script src="{{env('SECURE_ASSETS').'/plugins/jquery-bar-rating/js/rating.js'}}"></script>
<script src="{{env('SECURE_ASSETS').'/plugins/jquery-bar-rating/js/examples.js'}}"></script>

{{-- validate image --}}
{{-- <script>
    $('#teacher_profile_form').on('submit',function(e){
        var image_value=$('#teacher_profile_image').val()
        var body=$('#profile_body').val().replace(/<[^>]*>?/gm, '')
        if(body == '' || image_value==''){
            e.preventDefault()
            $('#submit_btn').prop("disabled", false);
            body == '' ? $('.body-error').removeClass('d-none') &&  $("html, body").animate({ scrollTop: 300 }):  $('.body-error').addClass('d-none')
            image_value == '' ? $('.image-error').removeClass('d-none') &&  $("html, body").animate({ scrollTop: 0 }) : $('.image-error').addClass('d-none')
        }
    })
</script> --}}

{{-- delete course and recording --}}
<script>
    function confirmDeleteCourse(e, id) { //on add input button click
        e.preventDefault();
        var course_id=id
        var url='{{ route("teacher.profile.deleteCourse",":course_id") }}'
        url=url.replace(':course_id',course_id)

        $('#delete-course').attr('action',url)
        Swal.fire({
            title: "Are you sure?",
            text: "You won't be able to revert this!",
            icon: "warning",
            showCancelButton: true,
            confirmButtonText: "Yes, delete it!"
        }).then(function(result) {
            if (result.value) {
                document.getElementById(`delete-course`).submit();
            }
        });
    }

    function confirmDeleteRecording(e, id) { //on add input button click
        e.preventDefault();
        var recording_id=id
        var url='{{ route("teacher.profile.deleteRecording",":recording_id") }}'
        url=url.replace(':recording_id',recording_id)

        $('#delete-recording').attr('action',url)
        Swal.fire({
            title: "Are you sure?",
            text: "You won't be able to revert this!",
            icon: "warning",
            showCancelButton: true,
            confirmButtonText: "Yes, delete it!"
        }).then(function(result) {
            if (result.value) {
                document.getElementById(`delete-recording`).submit();
            }
        });
    }
</script>

{{-- Add recordings --}}
<script>
    $('.addRecordingBtn').on('click',function(){
        var teacher_profile_id=$(this).attr('data-teacher-profile-id')
        var course_id=$(this).attr('data-course-id')
        var url='{{ route("teacher.profile.storeRecording",[":teacher_profile_id",":course_id"]) }}'
        url=url.replace(':teacher_profile_id',teacher_profile_id)
        url=url.replace(':course_id',course_id)
        $('#addRecordingForm').attr('action',url)
    })
</script>
{{-- add new row --}}
<script>
    (function($) { var x = 0;
        $("#dynamic-ar-r").click(function () {
        ++x;
        $("#dynamicAddRemoveRecording").append(
            '<tr><td><input type="text" name="recordings['+x+'][topic]" placeholder="Orientations"class="form-control" required></td>'+
            '<td><input type="vimeo_id" name="recordings['+x+'][vimeo_id]" placeholder="https://vimeo.com/123456789"class="form-control" required /></td>'+
            '<td><a type="button" class="btn btn-outline-danger btn-sm waves-effect waves-light mt-1 remove-input-field"><i class="fa fa-trash fs-16"></i></a></td></tr>');
         });

    })(jQuery);
</script>

{{-- 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