@extends('layouts.course1')
@section('content')
<section class="newpage">
    <div class="innermenu">
        <div class="container">
            <div class="row">
                <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                    <div class="link-path">
                        <ul>
                            <li>Dashboard</li>
                            <li>/</li>
                            <li class="active"><a href="{{ url('/exercise/')}}"> Exercises </a> </li>
                            <li>/</li>
                            <li class="active">Create a Exercise</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="course-setup-tab">
        <div class="container">
            <div class="row">
                <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                    <div class="jobs-list">
                        <div class="boxes">
                            <div class="jobslist">
                                <ul class="nav nav-tabs" role="tablist">
                                    <li>
                                        <a class="active" data-toggle="tab" id="extab1" href="#exctabs-1"
                                            role="tab">Exercise Setup</a>
                                    </li>
                                    <li>
                                        <a id="extab2" onclick="gotoquestions()">Questions</a>
                                    </li>
                                    <!--  <li>
                                            <a data-toggle="tab" id="extab3" href="#exctabs-3" role="tab">Schedule</a>
                                        </li>
                                       <li>
                                            <a data-toggle="tab" href="#tabs-4" role="tab">Pricing</a>
                                        </li> -->
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-main-cont">
                <div class="tab-content">
                    <div class="tab-pane active" id="exctabs-1" role="tabpanel">

                        <form id="add_exercise_setup" name="add_exercise_setup" class="form-horizontal" method="POST"
                            action="{{ url('/add_exercise_setup')}}" enctype="multipart/form-data">
                            <div class="row">
                                <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                                    <div class="boxes mt-4">
                                        <div class="course-setup">
                                            <div class="course-overview">
                                                <h4>Exercise Overview</h4>
                                            </div>
                                            <div class="course-overview-inputs">

                                                <div class="row">
                                                    <div class="col-12 col-sm-6 col-md-6 col-xl-6 col-lg-6">
                                                        <div class="float-items1">
                                                            <div class="floating-label">
                                                                <label>Exercise Title <span>*</span></label>
                                                                <input class="floating-input" name="exc_title"
                                                                    id="exc_title" type="text"
                                                                    placeholder="Enter Exercise Title"
                                                                    value="">

                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-12 col-sm-6 col-md-6 col-xl-6 col-lg-6">
                                                        <div class="float-items1">
                                                            <div class="floating-label">
                                                                <label>Exercise Subtitle <span>*</span></label>
                                                                <input class="floating-input" name="exc_sub_title"
                                                                    id="exc_sub_title" type="text"
                                                                    placeholder="Enter Exercise Subtitle"
                                                                    value="">

                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-12 col-sm-6 col-md-6 col-xl-6 col-lg-6">
                                                        <div class="float-items1">
                                                            <div class="floating-label">
                                                                <label>Exercise Price <span>*</span></label>
                                                                <input class="floating-input" name="exc_price"
                                                                    id="exc_price" type="text"
                                                                    placeholder="Enter Exercise Price"
                                                                    value="">

                                                            </div>
                                                        </div>
                                                    </div>
                                                    
                                                    <div class="col-12 col-sm-6 col-md-6 col-xl-6 col-lg-6">
                                                        <div class="floating-label newselect">
                                                            <label>Add Author <span>*</span></label>
                                                            <div class="add-authors">
                                                                <select class="selectpicker" name="exc_coach_id"
                                                                    id="exc_coach_id">
                                                                    <option value="">Please Select Author </option>
                                                                    @foreach($coaches as $co)
                                                                    <option
                                                                                                                                                value="">
                                                                        </option>
                                                                    @endforeach
                                                                </select>
                                                            </div>

                                                        </div>
                                                        <label id="exc_coach_id-error" class="error" for="exc_coach_id"
                                                            style="visibility: visible; color: red;">&nbsp;</label>
                                                    </div>
                                                                                                        <div class="col-12 col-sm-6 col-md-6 col-xl-6 col-lg-6">
                                                        <div class="floating-label newselect">
                                                            <label>Skills <span>*</span></label>
                                                            <div class="add-authors">
                                                                <select class="selectpicker" name="exc_skill_id[]"
                                                                    id="exc_skill_id" multiple>
                                                                    <option value="">Please Select Skills </option>
                                                                    @foreach($skills as $sk)
                                                                    <option
                                                                                                                                                value="">
                                                                        </option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <label id="exc_skill_id-error" class="error" for="exc_skill_id"
                                                            style="visibility: visible; color: red;">&nbsp;</label>
                                                    </div>
                                                    <div class="col-12 col-sm-6 col-md-6 col-xl-6 col-lg-6">
                                                        <div class="floating-label  newselect">
                                                            <label>Exercise Category <span>*</span></label>
                                                            <div class="add-authors">
                                                                <select class="selectpicker" name="exc_category_id"
                                                                    id="exc_category_id">
                                                                    <option value="">Select Category</option>
                                                                    @foreach($category as $cat)
                                                                    <option
                                                                                                                                                value="">
                                                                        </option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <label id="exc_category_id-error" class="error"
                                                            for="exc_category_id"
                                                            style="visibility: visible; color: red;">&nbsp;</label>
                                                    </div>
                                                                                                        <div class="col-12 col-sm-6 col-md-6 col-xl-6 col-lg-6">
                                                        <div class="float-items1">
                                                            <div class="floating-label">
                                                                <!--  <div style="float:left;width:48%;">
                                                                          <label>Exercise Duration(hrs) <span>*</span></label>
                                                                          <input class="floating-input"
                                                                              style="width:100%;float:left;"
                                                                              name="exc_duration" id="exc_duration"
                                                                              type="text"
                                                                              placeholder="Enter Course Duration (hrs)"
                                                                              value="">
                                                                      </div> -->

                                                                <div>
                                                                    <label>Exercise Duration(minutes)
                                                                        <span>*</span></label>
                                                                    <input class="floating-input"
                                                                        style="width:100%;float:left;"
                                                                        name="exc_duration_minutes"
                                                                        id="exc_duration_minutes" type="text"
                                                                        placeholder="Enter Exercise Duration (minutes)"
                                                                        value="">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
													 <input
                                                                class="floating-input"
                                                                name="old_excebanner" id="old_excebanner" type="hidden"
                                                                placeholder=" " value=""
                                                                >
                                                    <div class="col-12 col-sm-6 col-md-6 col-xl-6 col-lg-6">
                                                        <div class="float-items1">
                                                        <div class="floating-label">
                                                            <label>Exercise Image <span>*</span></label>
                                                            <input
                                                                class="floating-input"
                                                                name="exe_banner" id="exe_banner" type="file"
                                                                placeholder=" "
                                                                accept="image/x-png,image/jpeg,image/png">
                                                                                                                    </div>
													 </div>
                                                    </div>
													 <div class="col-12 col-sm-6 col-md-6 col-xl-6 col-lg-6">
                                                        <div class="floating-label newselect-noborder">
                                                            <label>Is Practice? <span>*</span></label>
                                                            <div class="add-authors">
                                                                <div class="radio">
                                                                    <input name="is_practice" id="is_practice_1"
                                                                        value="0" type="radio"
                                                                         /><label
                                                                        for="is_practice_1">No</label>
                                                                </div>
                                                                <div class="radio">
                                                                    <input name="is_practice" id="is_practice_2"
                                                                        value="1" type="radio"
                                                                         /><label
                                                                        for="is_practice_2">Yes</label>
                                                                </div>
                                                              
                                                            </div>
                                                        </div>
                                                        <label id="is_practice-error" class="error"
                                                            for="is_practice"
                                                            style="visibility: visible; color: red;"></label>
                                                    </div>
                                                    <div class="col-12 col-sm-12 col-md-12 col-xl-12 col-lg-12">
                                                        <div class="float-items1">
                                                            <div class="floating-label">
                                                                <label>Exercise Overview <span>*</span></label>
                                                                <input class="floating-input" type="text"
                                                                    name="exc_description" id="exc_description"
                                                                    placeholder="Enter Exercise Overview"
                                                                    style="min-height:60px;height:auto;" value="" />

                                                            </div>
                                                        </div>
                                                    </div>

                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 col-sm-12 col-md-12 col-xl-12 col-lg-12">
                                    <div class="course-setup-btn">
                                        <button type="submit">Questions Setup <i
                                                class="fas fa-arrow-right"></i></button>
                                    </div>
                                </div>
                            </div>
                            <!--  <div class="col-12 col-sm-12 col-md-3 col-lg-3 col-xl-3">
                                <div class="boxes mt-4">
                                    <div class="course-setup">
                                        <div class="course-overview">
                                            <h4>Course Overview</h4>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, est?
                                            </p>
                                        </div>
                                        <div class="course-overview-inputs">
                                            <div class="row">
                                                <div class="col-12 col-sm-12 col-md-12 col-xl-12 col-lg-12">
                                                    <div class="create-cur">
                                                        <img src="{{ asset('images/create-cur.png') }}">
                                                    </div>
                                                    <div class="course-setup-btn">
                                                        <button>Create Curriculum<i
                                                                class="fas fa-arrow-right"></i></button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div> -->
                        </form>

                    </div>
                    <div class="tab-pane" id="exctabs-2" role="tabpanel">
                        <div class="row">
                            <form id="add_newexercise_questions" name="add_newexercise_questions"
                                class="form-horizontal" method="POST" action="{{ url('/add_newexercise_questions')}}"
                                enctype="multipart/form-data">
                                <!-- <input type="hidden" name="addedexercise_id" id="addedexercise_id" value="70" />   -->
                                <input type="hidden" name="addedexercise_id" id="addedexercise_id"
                                    value="{{ session()->get('created_exercise_id') }}" />

                                <input type="hidden" name="exc_qus_count" id="exc_qus_count" value="1" />
                                <input type="hidden" name="exc_lesson_count" id="exc_lesson_count" value="1" />
                                <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                                    <div class="boxes mt-4">
                                        <div class="course-curriculum">
                                            <div class="course-overview">
                                                <h4>Questions</h4>
                                            </div>
											
                                            {{-- <div class="upload-a-course3">
                                                <a href="javascript:void(0);" onclick="download_question_excel()"><i
                                                        class="fas fa-download"></i> Download Sample Excel</a>
                                                <div class="upload-btn-wrapper">
                                                    <!--  <button class="btn"><i class="fas fa-cloud-upload-alt"></i>Upload
                                                                Questions</button>
                                                            <input type="file" name="myfile"  accept="application/vnd.ms-excel,.csv" />  -->
                                                    <label for="question_excel_upload" class="custom-file-upload">
                                                        <i class="fas fa-upload"></i> Custom Upload
                                                    </label>
                                                    <input id="question_excel_upload"
                                                        accept="application/vnd.ms-excel,.csv"
                                                        name="question_excel_upload" type="file" style="display: none;"
                                                        onchange="read_excel_questions(this);" />

                                                </div>
                                            </div> --}}
											
                                            <div class="enter-exercise">
                                                <div class="enter-exercise-con1"
                                                    style="margin-top:0px;min-height:200px;">
												<div class="row">
											   <div class="col-12 col-sm-6 col-md-6 col-xl-6 col-lg-6">
                                                        <div class="floating-label  newselect">
                                                            <label>Course Category <span>*</span></label>
                                                            <div class="add-authors">
                                                                <select data-live-search="true" 
                                                                    class="selectpicker" name="exc_category[1][]"
                                                                    id="qus_category_id_1" onchange="changecategory_question_exercise('1')">
																	<option value="" > Please select category </option>
                                                                    @foreach($categorylist as $cat)
                                                                    <option  
                                                                        value="">
                                                                        </option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <label id="qus_category_id_1-error" class="error" for="qus_category_id_1"
                                                            style="visibility: visible; color: red;">&nbsp;</label>
         </div>
		<div class="col-12 col-sm-6 col-md-6 col-xl-6 col-lg-6">
                                                        <div class="floating-label newselect">
                                                            <label>Skills <span>*</span></label>
                                                            <div class="add-authors" id="category_skills_1" >
                                                                <select data-live-search="true" class="selectpicker"
                                                                    name="exc_skill[1][]" id="qus_skill_id_1">
                                                                    <option value="">Please Select Skills </option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <label id="qus_skill_id_1-error" class="error" for="qus_skill_id_1"
                                                            style="visibility: visible; color: red;">&nbsp;</label>
          </div>
		  
                                                        <div class="col-12 col-sm-12 col-md-7 col-lg-7 col-xl-7">
                                                            <div class="exercise-name">
                                                                <div class="form-group" style="margin-bottom:2px;">
                                                                    <input placeholder="Enter Question"
                                                                        name="exc_question[1][]" id="exc_question_1"
                                                                        type="text" class="form-control"
                                                                        aria-describedby="emailHelp">
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-12 col-sm-12 col-md-5 col-lg-5 col-xl-5">
                                                            <div class="exercise-name">
                                                                <div class="form-group" style="margin-bottom:2px;">
                                                                    <select class="selectpicker"
                                                                        id="exc_question_type_1"
                                                                        name="exc_question_type[1][]"
                                                                        onchange="change_exc_question_type('1')"
                                                                        style="display:block !important;">
                                                                        <option value="">Please select question type
                                                                        </option>
                                                                        <option value="1">Check box</option>
                                                                        <option value="2">Short Answer</option>
                                                                        <option value="3">Radio Button</option>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                                                            <div class="google-form1">
                                                                <div class="check-box-form1" id="excoptions_1">

                                                                </div>

                                                                <div class="addnew-exer" id="exqus_1">

                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div id="excelques"> </div>

                                                </div>
                                                <div class="addnew-exercise">
                                                    <a href="javascript:void(0)" onclick="add_another_qus_exercise()"><i
                                                            class="fas fa-plus-circle"></i>Add
                                                        Another Question</a>
												
                                                    <!-- <a href="#" data-toggle="modal"
                                                             data-target="#staticBackdrop"><i
                                                                 class="fas fa-upload"></i>Upload
                                                             Exercise</a> 
                                                </div>
                                            </div>



                                        </div>
                                    </div>
                                    <div class="course-setup-btn">
                                        <button type="submit">Create Exercise<i class="fas fa-arrow-right"></i></button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="tab-pane" id="exctabs-3" role="tabpanel">
                    </div>
                    <!-- <div class="tab-pane" id="tabs-4" role="tabpanel">
                        </div> -->
                </div>
            </div>

        </div>
    </div>

    <div class="upload-course">
        <div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1"
            role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="staticBackdropLabel">Upload Exercise</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="uploaded-exer">
                            <div class="row">
                                <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
                                    <div class="uploaded-course">
                                        <select class="selectpicker">
                                            <option>Course 1</option>
                                            <option>Course 1</option>
                                            <option>Course 1</option>
                                            <option>Course 1</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
                                    <div class="uploaded-course">
                                        <select class="selectpicker">
                                            <option>Module 1</option>
                                            <option>Module 1</option>
                                            <option>Module 1</option>
                                            <option>Module 1</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
                                    <div class="uploaded-course">
                                        <select class="selectpicker">
                                            <option>Lesson 1</option>
                                            <option>Lesson 1</option>
                                            <option>Lesson 1</option>
                                            <option>Lesson 1</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                                    <div class="name-of-lesson">
                                        <h3>Name of the Lesson</h3>
                                    </div>
                                </div>
                                <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                                    <div class="lesson-select-all">
                                        <input type="checkbox" id="accountaaa" /><label for="accountaaa">Select
                                            All</label>
                                    </div>
                                </div>
                                <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
                                    <div class="untitled-question">
                                        <input type="checkbox" id="accountaa" /><label for="accountaa">Untitled
                                            question</label>
                                        <p>Multiple Choices: 2 Options</p>
                                    </div>
                                </div>
                                <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
                                    <div class="untitled-question">
                                        <input type="checkbox" id="accountada" /><label for="accountada">Untitled
                                            question</label>
                                        <p>Checkboxes: 2 Options</p>
                                    </div>
                                </div>
                                <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
                                    <div class="untitled-question">
                                        <input type="checkbox" id="accountaa" /><label for="accountaa">Untitled
                                            question</label>
                                        <p>Multiple Choices: 2 Options</p>
                                    </div>
                                </div>
                                <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
                                    <div class="untitled-question">
                                        <input type="checkbox" id="accountada" /><label for="accountada">Untitled
                                            question</label>
                                        <p>Checkboxes: 2 Options</p>
                                    </div>
                                </div>
                                <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                                    <div class="upload-exer-btn">
                                        <button>Upload Exercises<i class="fas fa-arrow-right"></i></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</section>
<script>
function changecategory_question_exercise(qcount)
	{
		var category_id=$("#qus_category_id_"+qcount).val();
		if (category_id !='') {
			$.LoadingOverlay("show");
                $.ajax({
                    type: "POST",
                    url: "