Your IP : 13.59.58.68
@extends('layouts.instructor')
@section('page_title',"Course | $slug")
@section('page_content')
<div class="pt-5 pb-5">
<div class="container">
@include('instructor.course_name')
<div class="row mt-0 mt-md-4">
<div class="col-lg-3 col-md-4 col-12">
@include('instructor.side')
</div>
<div class="col-lg-9 col-md-8 col-12">
<div class="card mb-4">
<div class="card-header">
<div class="d-flex justify-content-between">
<h3 class="mb-0">Course Basic Information</h3>
<button class="btn btn-primary btn-xs" data-bs-toggle="modal"
data-bs-target="#editShortLinkModal">customise short-link
</button>
</div>
</div>
<div class="card-body">
<form id="updateCourseForm">
<input type="hidden" id="course_id">
<div class="mb-3">
<label for="courseTitle" class="form-label"><b>Course Title</b></label>
<div class="d-flex justify-content-center align-items-center border bg-white pe-2">
<input id="courseTitle" name="title" class="form-control border-0" type="text"
placeholder="Course Title" maxlength="60">
<div>
<span id="count" class="fw-bold">60</span>
</div>
</div>
<small>Write a 60 character course title.</small>
</div>
<div class="mb-3">
<label for="courseSubtitle" class="form-label"><b>Course Subtitle</b></label>
<input id="courseSubtitle" name="courseSubtitle"
class="form-control" type="text" placeholder="Course Subtitle"/>
</div>
<div class="mb-3">
<label class="form-label"><b>Course Description</b></label>
<x-textarea name="description" id="course_description"/>
</div>
<div class="row">
<label class="form-label"><b>Basic Info</b></label>
<div class="mb-3 col-6">
<select class="form-control form-selectbs4" name="language" id="course_language"
data-width="100%">
<option value="english">English</option>
</select>
</div>
<div class="mb-3 col-6">
<select class="form-control" name="level" id="course_level" data-width="100%">
<option value="">Select level</option>
<option value="1">Beginner</option>
<option value="2">Intermediate</option>
<option value="3">Advanced</option>
</select>
</div>
{{-- <div class="mb-3 col-4">--}}
{{-- <select class="form-control" id="selcourse_type">--}}
{{-- <option value="">Select Course Type</option>--}}
{{-- </select>--}}
{{-- </div>--}}
</div>
<div class="row">
<div class="mb-3 col-6">
<select class="form-control" name="category_id" id="selcategory">
<option value="">Select a category</option>
</select>
</div>
<div class="mb-3 col-6">
<select class="form-control" name="topic_id" id="selsubcat">
<option value="">Select a SubCategory</option>
</select>
</div>
</div>
<div class="custom-file-container" data-upload-id="courseCoverImg" id="courseCoverImg">
<label class="form-label"><b>Course image</b>
<a href="javascript:void(0)" class="custom-file-container__image-clear"
title="Clear Image"></a></label>
<label class="custom-file-container__custom-file">
<input type="file" id="course_image" class="form-control"
accept=".jpg,.png,.gif,.jpeg"/>
<input type="hidden" name="MAX_FILE_SIZE" value="10485760"/>
<span class="custom-file-container__custom-file__custom-file-control"
hidden></span>
</label>
<small class="mt-3 d-block">Upload your course image here. It must meet
our course image quality standards to be accepted.Important guidelines: 750x422
pixels; .jpg, .jpeg, .gif, or
.png. no text on the image.</small>
<div class="custom-file-container__image-preview"></div>
</div>
<div class="custom-file-container">
<label class="form-label" for="promo_video"><b>Promo Video</b></label>
<input type="file" class="form-control" name="promo_video" id="promo_video"/>
</div>
<div class="d-flex justify-content-end mt-3">
<button class="btn btn-primary btn-block" id="updateCourse">Save</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!--Modal -->
<div class="modal fade" id="editShortLinkModal" tabindex="-1" role="dialog"
aria-labelledby="editShortLinkModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="editShortLinkModalLabel">
Edit Short Link
</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true"><i class="fe fe-x-circle"></i></span>
</button>
</div>
<div class="modal-body">
<form class="row text-start g-3" id="editLinkForm">
<div class="col-md-12" x-data>
<label for="twitter" class="form-label">Short Link</label>
<div class="input-group mb-3">
<span class="input-group-text" id="shortlink-addon">https://www.lentoria.com/</span>
<input x-on:beforeinput="showVerifying()"
x-on:input.debounce.1000ms="validateShortlink($event.target.value)"
type="text" class="form-control" name="shortlink" placeholder="Shortlink"
id="shortlink" aria-describedby="shortlink-addon">
</div>
<span class="text-sm d-none" id="valmess"></span>
<span class="text-sm d-none text-primary" id="vermess"></span>
</div>
<div class="d-flex justify-content-end">
<button class="btn btn-primary" type="submit">
Submit
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<script>
function showVerifying() {
const vermes = document.getElementById(`vermess`), valmes = document.getElementById(`valmess`);
vermes.classList.remove('d-none');
valmes.classList.add('d-none');
vermes.innerHTML = 'Verifying link...'
}
function validateShortlink(link) {
let valmess = $("#valmess");
let vermess = $("#vermess");
$.ajax({
url: api_url + 'admin/vaildate_link',
method: "POST",
data: {
link: link,
},
beforeSend: () => {
$("#editLinkForm").find($("button[type='submit']")).attr('disabled', 'true');
}
}).done(res => {
vermess.addClass("d-none");
if (res.status == true) {
valmess.removeClass("d-none");
if (valmess.hasClass("text-danger")) {
valmess.removeClass("text-danger");
}
valmess.addClass("text-success");
valmess.html(res.message);
$("#editLinkForm").find($("button[type='submit']")).attr('disabled', false);
setTimeout(() => {
valmess.addClass("d-none");
}, 10000)
} else if (res.status == false) {
valmess.removeClass("d-none");
if (valmess.hasClass("text-success")) {
valmess.removeClass("text-success");
}
valmess.addClass("text-danger");
valmess.html(res.message);
setTimeout(() => {
valmess.addClass("d-none");
}, 10000)
$("#editLinkForm").find($("button[type='submit']")).attr('disabled', false);
}
}).fail(res => {
$("#editLinkForm").find($("button[type='submit']")).attr('disabled', false);
})
}
$(function () {
let subcategories;
const jsonfile = `{{asset('json_files/subcategories.json')}}`;
getLoadSubCategories();
// const interval = setInterval(() => {
// if (course_type != undefined) {
// clearInterval(interval);
// fetchCourseTypes(course_type);
// }
// }, 100)
function getLoadSubCategories() {
$.getJSON(jsonfile, res => subcategories = res);
}
$("#courseTitle").on("input", function (e) {
e.preventDefault();
let length = $(this).val().length
let maxlength = 60;
return $('#count').html(maxlength - length);
})
$('#selcategory').on("change", function (e) {
e.preventDefault();
let cat = $(this).val();
if (cat) {
let subcats = subcategories.data[cat];
let selectsub = $('#selsubcat');
selectsub.html('<option selected disabled>Select Course Topic</option>');
if (subcats) {
subcats.forEach(sub => selectsub.append(`<option value="${sub.id}">${sub.name}</option>`))
}
}
});
function fetchCourseTypes(c_type) {
$.get(`${api_url}admin/fetch_types`).done(res => {
res.message.forEach(type => {
$("#selcourse_type").append(`<option value="${type.id}">${type.type}</option>`);
$(`#selcourse_type option[value="${c_type}"]`).prop("selected", true);
})
}).fail(res => {
concatError(res.responseJSON);
})
}
$('#updateCourseForm').on('submit', function (e) {
e.preventDefault();
id = $('#course_id').val();
title = $('#courseTitle').val();
subtitle = $('#courseSubtitle').val();
description = $('#course_description').val();
language = $('#course_language').val();
level = $('#course_level :selected').val();
category_id = $('#selcategory :selected').val();
topic_id = $('#selsubcat :selected').val();
// course_type = $('#selcourse_type :selected').val();
purpose = $('#purpose').val();
image = $('#course_image').get(0).files.length;
video = $('#promo_video').get(0).files.length;
let published = sessionStorage.getItem('published');
if (published && published != 0) {
salat('This course has been submitted for review and cannot be edited', 1);
return;
}
if (!title || !subtitle || !description || !language || !level || !category_id || !topic_id) {
salat('All Text Fields Required', 1);
return
}
let form_data = new FormData();
if (image != 0) {
form_data.append('image', document.getElementById('course_image').files[0]);
}
if (video != 0) {
form_data.append('video', document.getElementById('promo_video').files[0]);
}
form_data.append('id', id);
form_data.append('title', title);
form_data.append('subtitle', subtitle);
form_data.append('description', description);
form_data.append('language', language);
form_data.append('level', level);
form_data.append('category_id', category_id);
form_data.append('topic_id', topic_id);
// form_data.append('course_type', course_type);
$.ajax({
method: 'POST',
url: api_url + 'admin/course_update',
data: form_data,
cache: false,
contentType: false,
processData: false,
beforeSend: () => {
btn($('#updateCourse'), '', 'before');
}
}).done((res) => {
btn($('#updateCourse'), 'Submit For Review', 'after');
salat(res.message)
}).fail((res) => {
concatError(res.responseJSON)
console.log(res)
btn($('#updateCourse'), 'Submit For Review', 'after');
})
});
$("#editLinkForm").submit(function (e) {
e.preventDefault();
link = $('#shortlink').val();
id = $('#course_id').val();
bt = $(this).find($("button[type='submit']"));
let newlink = link.replace(/ /g, '');
$.ajax({
url: api_url + 'admin/update_link',
method: "POST",
data: {
link: newlink,
course_id: id,
},
beforeSend: () => {
btn(bt, '', 'before');
}
}).done(res => {
btn(bt, 'Submit', 'after');
console.log(res);
}).fail(res => {
concatError(res.responseJSON);
console.log(res);
btn(bt, 'Submit', 'after');
})
})
})
</script>
@endsection