@extends('layouts.landing')

@section('title', 'Elearning')

@section('content')
<div class="row mobile-mt-10">
    <div class="col">
        <a href="{{url('elearning')}}" class="text-color mb-4"><i class="feather-arrow-left mr-2"></i> Back</a>
    </div>
</div>
<div class="row ">
    <div class="col">
        <h4>Create {{tenantSetting($_SERVER['HTTP_HOST'])->elearning ?? 'Elearning'}} Videos</h4>
    </div>
</div>
<div class="row ">
    <div class="col-12 col-lg-6 col-xl-6">
        <div class="card w-100 shadow-xss rounded-xxl border-0 mt-4 ps-4 pt-4 pe-4 pb-3 mb-3">
            <div class="card-body p-0">
                <h5>Course Video</h5>
                <p class="text-muted">Start putting together your course by creating course modules and practice questions (quiz).</p>
                <div class="row">
                    <div class="col-12">
                        <form class="tab-content pb-4" action="{{route('elearn.store-course')}}" method="POST" enctype="multipart/form-data" id="wizardSteps">
                            @csrf
                            <input type="hidden" name="user_id" value="{{Auth::user()->id}}">
                            <input type="hidden" name="parent_id" value="{{Auth::user()->creatorId()}}">
                            <input type="hidden" name="is_active" value="0">
                            <input type="hidden" name="duration" id="duration">
                            <div class="tab-pane fade show active" id="wizardStepOne" role="tabpanel" aria-labelledby="wizardTabOne">
                                <div class="">
                                    <div class="row ">
                                        <div class="col">
                                            <h6 class="fw-600">Step 1 of 2</h6>
                                            <div class="nav d-flex">
                                                <a class="btn-line pt-2" data-toggle="wizard" href="#wizardStepOne">
                                                    <span class="line">-</span>
                                                </a>
                                                <a class="btn-line-1 pt-2 ml-2" data-toggle="wizard" href="#wizardStepTwo">
                                                    <span class="line">-</span>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="mt-2 pt-2 mb-3">
                                        <div class="form-group">
                                            <label class="form-label mb-1">
                                                <div class="row">
                                                    <div class="col">
                                                        <label>
                                                            Course Category
                                                        </label>
                                                    </div>
                                                    <div class="col-auto">
                                                        <small class="text-muted">
                                                            <a href="" data-toggle="modal" data-target="#addCategory" class="custom-button cursor text-color"> <i class="mdi mdi-plus"></i> Add Category</a>
                                                            {{-- <a href="{{route('elearn.category')}}" target="_blank" class="custom-button cursor text-color"> <i class="mdi mdi-plus"></i> Add Category</a> --}}
                                                        </small>
                                                    </div>
                                                </div>
                                            </label>
                                            <select name="category_id" class="form-select w-100">
                                                <option value="">Select Category</option>
                                                @foreach($categories as $category)
                                                    <option value="{{$category->id}}">{{$category->name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label mb-1">
                                                Course Title
                                            </label>
                                            <small class="form-text text-muted">
                                                What's the title of this course?
                                            </small>
                                            <input type="text" name="title" class="form-control" value="{{ old('title') }}">
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label mb-1">
                                                Course Description
                                            </label>
                                            <small class="form-text text-muted">
                                                Give a brief explanation of the course, what it entails and what you expect your users to get from it
                                            </small>
                                            <textarea name="description" id="description" rows="5" class="form-control" placeholder="Enter description"> {{ old('description') }}</textarea>
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label mb-1">
                                                Course File
                                            </label>
                                            <small class="form-text text-muted">
                                                Upload Course files
                                            </small>
                                            <select id="uploadType" class="form-select w-100" onchange="upload('video', 'audio', this)">
                                                <option value="0">Course Video</option>
                                                <option value="1">Course Audio</option>
                                            </select>
                                        </div>
                                        <div class="form-group" id="video">
                                            <label class="form-label mb-1">
                                                Course Video preview
                                            </label>
                                            <small class="form-text text-muted">
                                                Upload a short video clip of the course giving insights to users on what the course is about
                                            </small>
                                            <label for="actual-btn" style="cursor: pointer" class="cursor-pointer">
                                                <input type="file" name="preview" id="actual-btn" accept="video/mp4" onchange="loadVideo(event)" class="hide-input"><br>
                                                <a class="btn custom-btn"><i class="mdi mdi-cloud-upload"></i> Upload video preview</a>
                                            </label>
                                            <ul class="dz-preview dz-preview-multiple list-group list-group-lg list-group-flush" id="show-video" style="display: none">
                                                <li class="list-group-item px-0">
                                                    <div class="row ">
                                                        <div class="col-auto">
                                                            <div class="avatar">
                                                                <video id="output" width="400" controls></video>
                                                            </div>
                                                            <h6 id="file-chosen" class="pt-2">No video chosen</h6>
                                                            <div class="d-flex">
                                                                <p class="small text-muted mb-0 mr-3" id="video-size"></p>
                                                                <p class="small text-muted mb-0 mr-3" id="duration_tag"></p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="form-group" id="audio" style="display: none">
                                            <label class="form-label mb-1">
                                                Course Audio preview
                                            </label>
                                            <small class="form-text text-muted">
                                                Upload a short audio clip of the course giving insights to users on what the course is about
                                            </small>
                                            <label for="audio-btn" style="cursor: pointer" class="cursor-pointer">
                                                <input type="file" name="audio" id="audio-btn" accept="audio/mp3" onchange="loadAudio(event)" class="hide-input"><br>
                                                <a class="btn custom-btn"><i class="mdi mdi-cloud-upload"></i> Upload Audio preview</a>
                                            </label>
                                            <ul class="dz-preview dz-preview-multiple list-group list-group-lg list-group-flush" id="show-audio" style="display: none">
                                                <li class="list-group-item px-0">
                                                    <div class="row ">
                                                        <div class="col-auto">
                                                            <div class="avatar">
                                                                <audio id="audio_output" width="400" controls></audio>
                                                            </div>
                                                            <h6 id="audio-file-chosen" class="pt-2">No audio chosen</h6>
                                                            <div class="d-flex">
                                                                <p class="small text-muted mb-0 mr-3" id="audio-size"></p>
                                                                <p class="small text-muted mb-0 mr-3" id="audio_duration_tag"></p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label mb-1">
                                                Course Image Cover
                                            </label>
                                            <small class="form-text text-muted">
                                                Upload an image cover for this course
                                            </small>
                                            <label for="new_actual-btn" style="cursor: pointer" class="w-100 custom-upload p-4 w-full text-center rounded-lg border cursor-pointer">
                                                <i class="mdi mdi-cloud-upload icon-size"></i>
                                                <input type="file" name="photo" id="new_actual-btn" accept="image/jpeg,image/png,image/gif" onchange="loadPhoto(event)" class="hide-input"><br>
                                                <h6 class="text-lg" id="new-file-chosen">Select image <br>
                                                    <small class="text-muted">(1000 x 667px recommended)</small>
                                                </h6>
                                                <img id="new_output" class="img-fluid">
                                            </label>
                                        </div>
                                    </div>
                                    <div class="nav row  pt-5 border-top-xs">
                                        <div class="col-auto">
                                            <button class="btn btn-white d-none" type="reset">Cancel</button>
                                        </div>
                                        <div class="col text-center">
                                            <h6 class="text-muted mb-0">Step 1 of 2</h6>
                                        </div>
                                        <div class="col-auto">
                                            <a class="btn custom-btn" data-toggle="wizard" href="#wizardStepTwo">Next <i class="mdi mdi-arrow-right"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="wizardStepTwo" role="tabpanel" aria-labelledby="wizardTabTwo">
                                <div class="">
                                    <div class="row ">
                                        <div class="col">
                                            <h6 class="fw-600">Step 2 of 2</h6>
                                            <div class="nav d-flex">
                                                <a class="btn-line pt-2" data-toggle="wizard" href="#wizardStepOne">
                                                    <span class="line">-</span>
                                                </a>
                                                <a class="btn-line pt-2 ml-2" data-toggle="wizard" href="#wizardStepTwo">
                                                    <span class="line">-</span>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="mt-2 pt-2 mb-3">
                                        <div class="form-group">
                                            <label class="form-label mb-1">
                                                Course Tags
                                            </label>
                                            <small class="form-text text-muted">
                                                Add relatable tags to this course
                                            </small>
                                            <textarea name="tag" id="tag" rows="5" class="form-control" placeholder="Enter tags"> {{ old('tag') }}</textarea>
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label mb-1">
                                                Make this course visible on Homepage
                                            </label><br>
                                            <small class="text-muted"> The system automatically displays most viewed courses on Homepage if no course is made visible </small>
                                            <div class="form-check form-switch cm-margin">
                                                <input type="hidden" name="display_status" id="display_status" value="0">
                                                <input type="checkbox" name="display_check" class="form-check-input" onclick="enableDisplay('display_status', 'display_label', this)">
                                                <label for="display_status" id="display_label" class="form-check-label">Not Visible</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="nav row  pt-5 border-top-xs">
                                        <div class="col-auto">
                                            <a class="btn custom-btn" data-toggle="wizard" href="#wizardStepOne"><i class="mdi mdi-arrow-left"></i> Back</a>
                                        </div>
                                        <div class="col text-center">
                                            <h6 class="text-muted mb-0">Step 2 of 2</h6>
                                        </div>
                                        <div class="col-auto">
                                            <button type="submit" name="submit" onclick="this.classList.toggle('button--loading')" class="button_load btn custom-btn">
                                                <span class="button__text">Next Add Modules <i class="mdi mdi-arrow-right"></i></span>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12 col-lg-6 col-xl-6">
        <div class="card shadow-xss rounded-xxl border-0 mt-4 ps-4 pt-4 pe-4 pb-3 mb-3" @if(count($courses) > 0) data-list='{"valueNames": ["item-name"], "page": 10, "pagination": {"paginationClass": "list-pagination"}}' @endif id="contactsList">
            <div class="card-header">
                <h5>Your Courses</h5>
            </div>
            <div class="card-header">
                <div class="row ">
                    <div class="col">
                        <form>
                            <div class="input-group input-group-flush input-group-merge input-group-reverse">
                            <input class="form-control list-search" type="search" placeholder="Search courses">
                            <span class="input-group-text">
                                <i class="fe fe-search"></i>
                            </span>
                            </div>
                        </form>
                    </div>
                    <div class="col-auto me-n3">
                        <small class="text-muted">{{$course_count}} courses</small>
                    </div>
                </div>
            </div>
            <div class="card-body">
                @if(count($courses) > 0)
                    <ul class="list-group list-group-lg list-group-flush list my-n4">
                        @foreach($courses as $course)
                            <li class="list-group-item">
                                <div class="row">
                                    <div class="col-12 col-lg-4 col-md-4 col-xl-4">
                                        <a href="{{route('elearn.show', $course->id)}}" class="fw-600 text-grey-700 text-dark pe-4">
                                            @if(isset($course->preview))
                                                <video poster="{{$course->photo}}" class="rounded-2 w-100" src="{{$course->preview}}" width="200" controls></video>
                                            @endif
                                            @if(isset($course->audio))
                                                <img src="{{$course->photo}}" class="rounded-2 w-100 mb-2" alt="">
                                                <audio src="{{$course->audio}}" controls class="w-100"></audio>
                                            @endif
                                        </a>
                                    </div>
                                    <div class="col-12 col-lg-8 col-md-8 col-xl-8">
                                        <div class="fw-600 mt-2 text-grey-700 text-dark pe-4">
                                            <h6 class="item-name">
                                                <a href="{{route('elearn.show', $course->id)}}">{{$course->title}}</a>
                                            </h6>
                                            <small>{{Str::words($course->description, 10)}}</small><br>
                                            <small class="text-muted">Created {{$course->created_at->diffForHumans()}}</small><br>
                                            <small class="text-color">Duration:
                                                @if($course->duration > 1)
                                                    {{$course->duration}} mins
                                                @else
                                                    {{$course->duration}} min
                                                @endif
                                            </small><br>
                                            <span class="d-flex mt-4">
                                                <a href="{{route('elearn.edit-course', $course->id)}}" class="mr-3"><i class="mdi mdi-pencil"></i> Edit</a>
                                                @if($course->is_active == '0')
                                                    <a class="mr-3 text-gray-500">Pending</a>
                                                @elseif($course->is_active == '1')
                                                    <a class="mr-3 text-success">Published</a>
                                                @endif
                                                <a href="{{route('elearn.show', $course->id)}}" class="mr-3"><i class="mdi mdi-eye"></i> Preview</a>
                                                <form action="/elearning/delete/{{$course->id}}" method="POST">
                                                    {{ csrf_field() }}
                                                    {{ method_field('DELETE') }}
                                                    <button type="submit" name="submit" onclick="return deleteCourse();" class="text-danger">
                                                        <i class="mdi mdi-delete mr-2"></i> Delete
                                                    </button>
                                                </form>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        @endforeach
                    </ul>
                    @else
                    <div class="mt-4">
                        <div class="text-center">
                            <h6 class="mb-4">No courses created</h6>
                        </div>
                    </div>
                @endif
            </div>
            <div class="row g-0">
                <ul class="col list-pagination-prev pagination pagination-tabs justify-content-start">
                    <li class="page-item">
                        <a class="page-link" href="#">
                        <i class="fe fe-arrow-left me-1"></i> Prev
                        </a>
                    </li>
                </ul>
                <ul class="col list-pagination pagination pagination-tabs justify-content-center"></ul>
                <ul class="col list-pagination-next pagination pagination-tabs justify-content-end">
                    <li class="page-item">
                        <a class="page-link" href="#">
                        Next <i class="fe fe-arrow-right ms-1"></i>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
@include('elements.add-category')
<script>
    function enableDisplay(divId, label, event){
        if(event.checked == true){
            $("#"+ divId).val(1);
            $("#"+ label).html('Visible');
        }else{
            $("#"+ divId).val(0);
            $("#"+ label).html('Not Visible');
        }
    }

    function upload(video, audio, element) {
        document.getElementById(video).style.display = element.value == '0' ? 'block' : 'none';
        document.getElementById(audio).style.display = element.value == '1' ? 'block' : 'none';
    }

    var loadVideo = function(event) {
        var output = document.getElementById('output');
        var file_size = document.getElementById('actual-btn');
        var fsize = file_size.files[0].size;
        file = Math.round((fsize / 1024));
        // alert(file);
        if (file <= 1024) {
                document.getElementById('video-size').innerHTML = '<b>'
                + file + '</b> KB';
            } else if (file <= 10240) {
            file = Math.round((file / 1000));
                document.getElementById('video-size').innerHTML = '<b>'
                + file + '</b> MB';
            } else if (file <= 102400) {
                file = Math.round((file / 1000));
                document.getElementById('video-size').innerHTML = '<b>'
                + file + '</b> MB';
            } else if (file <= 1024000) {
                file = Math.round((file / 1000));
                document.getElementById('video-size').innerHTML = '<b>'
                + file + '</b> MB';
            }
        output.src = URL.createObjectURL(event.target.files[0]);
        document.getElementById('show-video').style.display = 'block';
        output.onload = function() {
            URL.revokeObjectURL(output.src) // free memory
        }
        output.ondurationchange = function() {
            var video_duration = this.duration;
            document.getElementById('duration').value = Math.round(video_duration / 60);
            document.getElementById('duration_tag').innerHTML = Math.round(video_duration / 60) + ' mins';
        };
    };

    var loadAudio = function(event) {
        var output = document.getElementById('audio_output');
        var file_size = document.getElementById('audio-btn');
        var fsize = file_size.files[0].size;
        file = Math.round((fsize / 1024));
        // alert(file);
        if (file <= 1024) {
                document.getElementById('audio-size').innerHTML = '<b>'
                + file + '</b> KB';
            } else if (file <= 10240) {
            file = Math.round((file / 1000));
                document.getElementById('audio-size').innerHTML = '<b>'
                + file + '</b> MB';
            } else if (file <= 102400) {
                file = Math.round((file / 1000));
                document.getElementById('audio-size').innerHTML = '<b>'
                + file + '</b> MB';
            } else if (file <= 1024000) {
                file = Math.round((file / 1000));
                document.getElementById('audio-size').innerHTML = '<b>'
                + file + '</b> MB';
            }
        output.src = URL.createObjectURL(event.target.files[0]);
        document.getElementById('show-audio').style.display = 'block';
        output.onload = function() {
            URL.revokeObjectURL(output.src) // free memory
        }
        output.ondurationchange = function() {
            var audio_duration = this.duration;
            document.getElementById('duration').value = Math.round(audio_duration / 60);
            document.getElementById('audio_duration_tag').innerHTML = Math.round(audio_duration / 60) + ' mins';
        };
    };

    var loadPhoto = function(event) {
        var new_output = document.getElementById('new_output');
        var file_size = document.getElementById('new_actual-btn');
        var fsize = file_size.files[0].size;
        file = Math.round((fsize / 1024));
        new_output.src = URL.createObjectURL(event.target.files[0]);
        document.getElementById('show-photo').style.display = 'block';
        new_output.onload = function() {
            URL.revokeObjectURL(new_output.src) // free memory
            if (file >= 1024) {
                document.getElementById('photo-size').innerHTML = '<b>'
                + file + '</b> MB';
            } else if (file >= 1024000) {
                document.getElementById('photo-size').innerHTML = '<b>'
                + file + '</b> GB';
            } else {
                document.getElementById('photo-size').innerHTML = '<b>'
                + file + '</b> KB';
            }
        }
    };

    const actualBtn = document.getElementById('actual-btn');
    const newActualBtn = document.getElementById('new_actual-btn');
    const audioBtn = document.getElementById('audio-btn');

    const fileChosen = document.getElementById('file-chosen');
    const newFileChosen = document.getElementById('new-file-chosen');
    const audioFileChosen = document.getElementById('audio-file-chosen');



    actualBtn.addEventListener('change', function(){
        fileChosen.textContent = this.files[0].name
    });
    newActualBtn.addEventListener('change', function(){
        newFileChosen.textContent = this.files[0].name
    });
    audioBtn.addEventListener('change', function(){
        audioFileChosen.textContent = this.files[0].name
    });


    function deleteVideo(e)
    {
        e.parentElement.remove();
        document.getElementById('show-video').remove();
    }
    function deleteAudio(e)
    {
        e.parentElement.remove();
        document.getElementById('show-audio').remove();
    }
    function deletePhoto(e)
    {
        e.parentElement.remove();
        document.getElementById('show-photo').remove();
    }

    function deleteCourse() {
        if(!confirm("Are you sure you want to delete this course?"))
        event.preventDefault();
    }
</script>
@endsection