@extends('layouts.landing')

@section('title', 'Edit Course')

@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.create')}}" class="text-color mb-4"><i class="feather-arrow-left mr-2"></i> Back</a>
    </div>
    <div class="col-auto">
        @if($course->is_active == 0)
            <form class="" action="{{route('elearn.update-course', $course->id)}}" method="POST">
                {{ csrf_field() }}
                {{ method_field('patch') }}
                <input type="hidden" name="is_active" value="1">
                <button type="submit" name="publish" onclick="this.classList.toggle('button--loading')" class="button_load btn custom-btn">
                    <span class="button__text"><i class="mdi mdi-check"></i> Publish Course</span>
                </button>
            </form>
        @elseif($course->is_active == 1)
            <form class="" action="{{route('elearn.update-course', $course->id)}}" method="POST">
                {{ csrf_field() }}
                {{ method_field('patch') }}
                <input type="hidden" name="is_active" value="0">
                <button type="submit" name="unpublish" onclick="this.classList.toggle('button--loading')" class="button_load btn custom-btn">
                    <span class="button__text"><i class="mdi mdi-check"></i> Unpublish Course</span>
                </button>
            </form>
        @endif
    </div>
</div>
<div class="row ">
    <div class="col">
        <h3>Edit Course</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>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.update-course', $course->id)}}" method="POST" enctype="multipart/form-data" id="wizardSteps">
                            {{ csrf_field() }}
                            {{ method_field('patch') }}
                            <input type="hidden" name="duration" id="duration">
                            <div class="tab-pane fade show active" id="wizardStepOne" role="tabpanel" aria-labelledby="wizardTabOne">
                                <div class="row">
                                    <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">
                                                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="{{$course->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">{{$course->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>
                                            @if(isset($course->preview))
                                                <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>
                                            @elseif(isset($course->audio))
                                                <select id="uploadType" class="form-select w-100" onchange="upload('video', 'audio', this)">
                                                    <option value="1">Course Audio</option>
                                                    <option value="0">Course Video</option>
                                                </select>
                                            @endif
                                        </div>
                                        <div class="form-group" id="video" style="display: {{isset($course->preview) ? 'inherit' : 'none'}}">
                                            <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: {{isset($course->preview) ? 'inherit' : 'none'}}">
                                                <li class="list-group-item px-0">
                                                    <div class="row ">
                                                        <div class="col-auto">
                                                            <div class="avatar">
                                                                <video id="output" src="{{$course->preview}}" width="400" controls></video>
                                                            </div>
                                                            <h6 id="file-chosen" class="pt-2"></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: {{isset($course->audio) ? 'inherit' : '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: {{isset($course->audio) ? 'inherit' : 'none'}}">
                                                <li class="list-group-item px-0">
                                                    <div class="row ">
                                                        <div class="col-auto">
                                                            <div class="avatar">
                                                                <audio id="audio_output" src="{{$course->audio}}" width="400" controls></audio>
                                                            </div>
                                                            <h6 id="audio-file-chosen" class="pt-2"></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" src="{{$course->photo}}" 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="row">
                                    <div class="row">
                                        <div class="col">
                                            <h6 class="fw-600">Step 2 of 2</h6>
                                            <div class="nav d-flex">
                                                <a class="btn-line-1 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">
                                                <div class="row">
                                                    <div class="col">
                                                        <label>
                                                            Course Category
                                                        </label>
                                                    </div>
                                                    <div class="col-auto">
                                                        <small class="text-muted">
                                                            <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>
                                            @php
                                                $category = App\Models\Category::where('id', $course->category_id)->first();
                                            @endphp
                                            <select name="category_id" class="form-select w-100" data-choices='{"searchEnabled": true}'>
                                                <option value="{{$category->id}}" selected>{{$category->name}}</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 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">{{$course->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="{{$course->display_status}}">
                                                <input type="checkbox" name="display_check" class="form-check-input" onclick="enableDisplay('display_status', 'display_label', this)" {{$course->display_status == 1 ? 'Checked' : ''}}>
                                                <label for="display_status" id="display_label" class="form-check-label">{{$course->display_status == 1 ? 'Visible' : '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"><i class="mdi mdi-check"></i> Save</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($modules) > 0) data-list='{"valueNames": ["item-name"], "page": 10, "pagination": {"paginationClass": "list-pagination"}}' @endif id="contactsList">
            <div class="card-header">
                <div class="row ">
                    <div class="col">
                        <h5>Modules</h5>
                    </div>
                    <div class="col-auto">
                        <h6><a href="{{route('elearn.create-module', $course->id)}}" class="font-xsss text-color"><i class="mdi mdi-plus"></i> Add Module</a></h6>
                    </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 class="text-muted">{{$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 class="text-muted">{{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>
                                                <a href="" class="text-danger"><i class="mdi mdi-delete"></i> Delete</a>
                                            </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="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', $course->id)}}">
                            <i class="mdi mdi-check"></i> Proceed
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<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();
    }
</script>
@endsection