@extends('layouts.landing')

@section('title', 'Elearning Course Modules')

@section('content')
<style>
    .btn-round-sm {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        padding: 7px 0px;
        display: inline-block;
        line-height: 35px!important;
        text-align: center;
    }
    .btn-round-sm:hover {
        width: 55px;
        height: 55px;
        padding: 10px 0px;
        transition: .3s;
    }
    .active-border {
        border-left: 2px solid #007bff;
    }
    .btn-line {
        border-bottom: 4px solid;
        width: 80px;
    }
    .btn-line-1 {
        border-bottom: 4px solid #eee;
        width: 80px;
    }
    .line {
        opacity: 0;
    }
    .choices>.dropdown-menu {
        width: 100% !important;
    }
    .hide-input {
        visibility: hidden;
        display: none;
    }
    /* img {
        max-width: 150px;
    } */
</style>
<div class="row ">
    <div class="col">
        <a href="{{route('elearn.show', $course->id)}}" class="text-color mb-4"><i class="feather-arrow-left mr-2"></i> Back</a>
    </div>
</div>
<div class="row ">
    <div class="col">
        <h3>Create Modules for {{tenantSetting($_SERVER['HTTP_HOST'])->elearning ?? 'Elearning'}} Videos</h3>
    </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>Module Videos</h5>
                <p class="text-muted">Start adding videos for your course modules</p>
                <div class="row">
                    <div class="col-12">
                        <form class="pb-4" action="{{route('elearn.store-module')}}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="user_id" value="{{Auth::user()->id}}">
                            <input type="hidden" name="course_id" value="{{$course->id}}">
                            <input type="hidden" name="duration" id="duration">
                            <div class="">
                                <div class="mt-2 pt-2 mb-3">
                                    <div class="form-group">
                                        <label class="form-label mb-1">
                                            Module Title
                                        </label>
                                        <small class="form-text text-muted">
                                            What's the title of this module?
                                        </small>
                                        <input type="text" name="title" class="form-control" value="{{ old('title') }}">
                                    </div>
                                    <div class="form-group">
                                        <label class="form-label mb-1">
                                            Module Transcription
                                        </label>
                                        <small class="form-text text-muted">
                                            Add a detailed transcription for the module video
                                        </small>
                                        <textarea name="description" id="description" rows="5" class="form-control" placeholder="Enter transcription">{{ old('description') }}</textarea>
                                    </div>
                                    <div class="form-group">
                                        <label class="form-label mb-1">
                                            Module File
                                        </label>
                                        <small class="form-text text-muted">
                                            Upload Module files
                                        </small>
                                        <select id="uploadType" class="form-select w-100" onchange="upload('video', 'audio', this)">
                                            <option value="0">Module Video</option>
                                            <option value="1">Module Audio</option>
                                        </select>
                                    </div>
                                    <div class="form-group" id="video">
                                        <label class="form-label mb-1">
                                            Module Video
                                        </label>
                                        <small class="form-text text-muted">
                                            Upload video for this module (Max upload size 500mb)
                                        </small>
                                        <label for="actual-btn" style="cursor: pointer" class="cursor-pointer">
                                            <input type="file" name="video" 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 </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">
                                            Module Audio
                                        </label>
                                        <small class="form-text text-muted">
                                            Upload audio for this module (Max upload size 500mb)
                                        </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</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">
                                            Module Image Cover
                                        </label>
                                        <small class="form-text text-muted">
                                            Upload an image cover for this module
                                        </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="text-end">
                                    <button type="submit" name="submit" onclick="this.classList.toggle('button--loading')" class="button_load btn custom-btn">
                                        <span class="button__text"><i class="mdi mdi-check"></i> Create Module</span>
                                    </button>
                                </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" data-list='{"valueNames": ["item-name"], "page": 10, "pagination": {"paginationClass": "list-pagination"}}' id="contactsList">
            <div class="card-header">
                <div class="row ">
                    <div class="col">
                        <h5>Modules</h5>
                    </div>
                    <div class="col-auto">
                        @if(empty($test))
                            <h6><a href="{{route('elearn.test', $course->id)}}" class="font-xsss text-color" data-toggle="modal" data-target="#addQuiz"><i class="mdi mdi-plus"></i> Add Quiz</a></h6>
                        @else
                            <h6><a href="{{route('elearn.test', $course->id)}}" class="font-xsss text-color">Test: {{$test->title}}</a></h6>
                        @endif
                    </div>
                </div>
            </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 modules">
                            <span class="input-group-text">
                                <i class="fe fe-search"></i>
                            </span>
                            </div>
                        </form>
                    </div>
                    <div class="col-auto me-n3">
                        <small>{{$module_count}} modules</small>
                    </div>
                </div>
            </div>
            <div class="card-body">
                @if(count($modules) > 0)
                    <ul class="list-group list-group-lg list-group-flush list my-n4">
                        @foreach($modules as $module)
                            <li class="list-group-item">
                                <div class="row">
                                    <div class="col-12 col-lg-4 col-md-4 col-xl-4">
                                        <a href="#!" class="fw-600 text-grey-700 text-dark pe-4">
                                            @if(isset($module->video))
                                                <video poster="{{$module->photo}}" class="rounded-2 w-100" src="{{$module->video}}" width="200" controls></video>
                                            @endif
                                            @if(isset($module->audio))
                                                <img src="{{$module->photo}}" class="rounded-2 w-100 mb-2" alt="">
                                                <audio src="{{$module->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="#">{{$module->title}}</a>
                                            </h6>
                                            <small>{{Str::words($module->description, 10)}}</small><br>
                                            <small class="text-muted">Created {{$module->created_at->diffForHumans()}}</small><br>
                                            <small class="text-color">Duration:
                                                @if($module->duration > 1)
                                                    {{$module->duration}} mins
                                                @else
                                                    {{$module->duration}} min
                                                @endif
                                            </small><br>
                                            <span class="d-flex mt-4">
                                                <a href="{{route('elearn.edit-module', $module->id)}}" class="mr-3"><i class="mdi mdi-pencil"></i> Edit</a>
                                                <form action="/elearning/modules/delete/{{$module->id}}" method="POST">
                                                    {{ csrf_field() }}
                                                    {{ method_field('DELETE') }}
                                                    <button type="submit" name="submit" onclick="return deleteModule();" 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 modules created</h6>
                            <a class="btn custom-btn" href="{{route('elearn.create-module', $course->id)}}"><i class="mdi mdi-plus"></i> Add Modules</a>
                        </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>
<div class="modal fade" id="addQuiz" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content" style="width: 100%; height: auto !important">
            <div class="modal-header">
                <div class="fs-1 fw-600 ">Create quiz</div>
                <div class="btn btn-icon btn-sm btn-active-icon-primary" data-dismiss="modal" aria-label="Close">
                    <span class="svg-icon svg-icon-2x">
                        <i class="mdi mdi-close"></i>
                    </span>
                </div>
            </div>
            <div class="modal-body scroll-y">
                <div class="px-4 pb-4">
                    <div class="row justify-content-center">
                        <div class="col-12">
                            <div class="text-center">
                                <p class="text-muted alert alert-warning">Create a timed quiz for your users and score points</p>
                            </div>
                        </div>
                    </div>
                    <form action="{{route('elearn.store-test')}}" method="POST">
                        @csrf
                        <div class="row justify-content-center">
                            <div class="form-group">
                                <label class="form-label mb-1">
                                    Test title
                                </label>
                                <small class="form-text text-muted">
                                    What's the title of this test?
                                </small>
                                <input type="hidden" name="user_id" value="{{Auth::user()->id}}">
                                <input type="hidden" name="course_id" value="{{$course->id}}">
                                <input type="hidden" name="is_active" value="0">
                                <input type="text" name="title" class="form-control">
                            </div>
                            <div class="form-group">
                                <label class="form-label mb-1">
                                    Test timer (in mins)
                                </label>
                                <small class="form-text text-muted">
                                    Set a timer for this test
                                </small>
                                <input type="number" name="timer" class="form-control" min="1">
                            </div>
                        </div>
                        <div class="mt-4">
                            <button type="submit" name="submit" onclick="this.classList.toggle('button--loading')" class="button_load btn custom-btn">
                                <span class="button__text"><i class="mdi mdi-check"></i> Create Test</span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    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 deleteModule() {
        if(!confirm("Are you sure you want to delete this module?"))
        event.preventDefault();
    }
</script>
@endsection