@extends('layouts.landing')

@section('title', 'Edit 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.edit-course', $module->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>Edit Modules for {{tenantSetting($_SERVER['HTTP_HOST'])->elearning ?? 'Elearning'}} Videos</h3>
    </div>
</div>
<div class="row ">
    <div class="col-12">
        <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">Edit your course modules</p>
                <div class="row">
                    <div class="col-12">
                        <form class="tab-content pb-4" action="{{route('elearn.update-module', $module->id)}}" method="POST" enctype="multipart/form-data" id="wizardSteps">
                            {{ csrf_field() }}
                            {{ method_field('patch') }}
                            <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="{{$module->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">{{$module->description}}</textarea>
                                    </div>
                                    <div class="form-group">
                                        <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">
                                            <li class="list-group-item px-0">
                                                <div class="row ">
                                                    <div class="col-auto">
                                                        <div class="avatar">
                                                            <video id="output" src="{{$module->video}}" 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>
                                                            <a onClick="deleteVideo(this)" class="text-danger cursor">
                                                                <i class="mdi mdi-delete"></i> Remove
                                                            </a>
                                                        </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" src="{{$module->photo}}" 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> Save</span>
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="exampleModalCenter" 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 ">Start 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="alert alert-warning d-flex">
                                <i class="mdi mdi-alert mr-3"></i><p class="text-muted"> Note the following</p>
                            </div>
                        </div>
                    </div>
                    <div class="row justify-content-center">
                        <div class="info"><i class="mdi mdi-check"></i> You will have only</div>
                        <div class="info"><i class="mdi mdi-check"></i> This assessment will close once time runs out.</div>
                        <div class="info"><i class="mdi mdi-check"></i> You can't exit from the assessment while taking it.</div>
                        <div class="info"><i class="mdi mdi-check"></i> You'll get coins on the basis of your correct answers.</div>
                        <div class="info"><i class="mdi mdi-check"></i> You must submit this assessment once completed.</div>
                    </div>
                    <div class="mt-4">
                        <a class="btn custom-btn pull-right" href="{{route('elearn.startquiz', $module->course_id)}}">
                            <i class="mdi mdi-check"></i> Proceed
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    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
        }
    };

    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 fileChosen = document.getElementById('file-chosen');
    const newFileChosen = document.getElementById('new-file-chosen');

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

    function deleteVideo(e)
    {
        e.parentElement.remove();
        document.getElementById('show-video').remove();
    }
    function deletePhoto(e)
    {
        e.parentElement.remove();
        document.getElementById('show-photo').remove();
    }
</script>
@endsection