{{-- Layout --}}
@extends('teacher.layout.layout')
{{-- Page Title --}}
@section('title','GAS LMS | Create HyperLink Homework')
{{-- Breadcrumb section --}}
@section('breadcrumb')
    @include('components._breadcrumb', ['items' => ['Homework' => route('teacher.course.assignment.index',$coffid)]])
@endsection
{{-- Content --}}
@section('content')
@include('components._error')
<div id="kt_app_content" class="app-content flex-column-fluid">
    <!--begin::Content container-->
    <div id="kt_app_content_container" class="app-container container-xxl">
        <!--begin::Stepper-->
        <div class="stepper stepper-pills stepper-column d-flex flex-column flex-xl-row flex-row-fluid" id="kt_create_quiz_file_stepper">
            <!--begin::Aside-->
            <div class="card d-flex justify-content-center justify-content-xl-start flex-row-auto w-100 w-xl-300px w-xxl-400px me-9">
                <!--begin::Wrapper-->
                <div class="card-body px-6 py-20">
                    <!--begin::Nav-->
                    <div class="stepper-nav">
                        <!--begin::Step 1-->
                        <div class="stepper-item current" data-kt-stepper-element="nav">
                            <!--begin::Wrapper-->
                            <div class="stepper-wrapper">
                                <!--begin::Icon-->
                                <div class="stepper-icon w-40px h-40px">
                                    <i class="stepper-check fas fa-check"></i>
                                    <span class="stepper-number">1</span>
                                </div>
                                <!--end::Icon-->
                                <!--begin::Label-->
                                <div class="stepper-label">
                                    <h3 class="stepper-title">Homework  details</h3>
                                    <div class="stepper-desc fw-semibold">insert the homework  title, and instructions</div>
                                </div>
                                <!--end::Label-->
                            </div>
                            <!--end::Wrapper-->
                            <!--begin::Line-->
                            <div class="stepper-line h-40px"></div>
                            <!--end::Line-->
                        </div>
                        <!--end::Step 1-->
                        <!--begin::Step 2-->
                        <div class="stepper-item" data-kt-stepper-element="nav">
                            <!--begin::Wrapper-->
                            <div class="stepper-wrapper">
                                <!--begin::Icon-->
                                <div class="stepper-icon w-40px h-40px">
                                    <i class="stepper-check fas fa-check"></i>
                                    <span class="stepper-number">2</span>
                                </div>
                                <!--end::Icon-->
                                <!--begin::Label-->
                                <div class="stepper-label">
                                    <h3 class="stepper-title">Homework  Settings</h3>
                                    <div class="stepper-desc fw-semibold">Setup homework  points, end and start times</div>
                                </div>
                                <!--end::Label-->
                            </div>
                            <!--end::Wrapper-->
                            <!--begin::Line-->
                            <div class="stepper-line h-40px"></div>
                            <!--end::Line-->
                        </div>
                        <!--end::Step 2-->

                        <!--begin::Step 3-->
                        <div class="stepper-item" data-kt-stepper-element="nav">
                            <!--begin::Wrapper-->
                            <div class="stepper-wrapper">
                                <!--begin::Icon-->
                                <div class="stepper-icon w-40px h-40px">
                                    <i class="stepper-check fas fa-check"></i>
                                    <span class="stepper-number">3</span>
                                </div>
                                <!--end::Icon-->
                                <!--begin::Label-->
                                <div class="stepper-label">
                                    <h3 class="stepper-title">Restriction</h3>
                                    <div class="stepper-desc fw-semibold">Select who can see this homework </div>
                                </div>
                                <!--end::Label-->
                            </div>
                            <!--end::Wrapper-->
                            <!--begin::Line-->
                            <div class="stepper-line h-40px"></div>
                            <!--end::Line-->
                        </div>
                        <!--end::Step 3-->
                    </div>
                    <!--end::Nav-->
                </div>
                <!--end::Wrapper-->
            </div>
            <!--begin::Aside-->
            <!--begin::Content-->
            <div class="card d-flex flex-row-fluid flex-center">
                <!--begin::Form-->
                <form class="card-body py-20 w-100 " novalidate="novalidate" method="post" action="{{route('teacher.course.assignment.hyperlink.store',$coffid)}}" id="kt_create_assignment_file_form" enctype="multipart/form-data">
                    <!--begin::Step 1-->
                    <div class="current" data-kt-stepper-element="content">
                        @csrf
                        <input type="hidden" name="type" value="assignment">
                        <!--begin::Wrapper-->
                        <div class="w-100">
                            <!--begin::Heading-->
                            <div class="pb-10 pb-lg-15">
                                <!--begin::Title-->
                                <h2 class="fw-bold d-flex align-items-center text-dark">Homework details
                                <i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" title="Insert the homework title, topic and any required instructions "></i></h2>
                                <!--end::Title-->
                            </div>
                            <!--end::Heading-->
                            <!--begin::Input group-->
                            <div class="fv-row mb-10">
                                 <!--begin::Label-->
                                 <label class="form-label mb-3 required" for="title">Title</label>
                                 <!--end::Label-->
                                 <!--begin::Input-->
                                 <input type="text" id="title" class="form-control form-control-lg " name="title" placeholder="" value="{{old('title')}}" />
                                 <!--end::Input-->
                            </div>
                            <!--end::Input group-->
                            <!--begin::Input group-->
                            <div class="fv-row mb-10">
                                <!--begin::Label-->
                                <label class="form-label mb-3" for="instructions">Instructions <span class="text-muted">(optional)</span></label>
                                <!--end::Label-->
                                <!--begin::Input-->
                                <textarea id="instructions"  name="instructions" class="form-control form-control-lg " rows="6" placeholder="">{{ old('instructions')}}</textarea>
                                <!--end::Input-->
                           </div>
                           <div class="fv-row mb-10">
                                <!--begin::Label-->
                                <label class="form-label mb-3 required" for="link">Homework Link</label>
                                <!--end::Label-->
                                <!--begin::Input-->
                                <input type="url" id="link" class="form-control form-control-lg " name="link" placeholder="https://docs.google.com/forms" value="{{old('link')}}" />
                                <!--end::Input-->
                            </div>
                           <!--end::Input group-->
                           <!--begin::Input group-->
                           {{-- <div class="fv-row mb-10">
                            <!--begin::Label-->
                            <label class="form-label mb-3 required" for="topic">Topic</label>
                            <!--end::Label-->
                            <!--begin::Input-->
                            <select name="topic" data-control="select2" class="form-select" id="topic">
                                @foreach ($topics as $topic)
                                    <option value="{{$topic->id}}">{{$topic->name}}</option>
                                @endforeach
                            </select>
                            <!--end::Input-->
                       </div> --}}
                       <!--end::Input group-->
                       <!--begin::Input group-->
                       <div class="fv-row mb-10">
                        <!--begin::Label-->
                        <label class="form-label mb-3 required" for="group">Group</label><br>
                        <!--end::Label-->
                        <!--begin::Radio group-->
                        <div class="btn-group w-100 w-lg-50 mb-5" data-kt-buttons="true" data-kt-buttons-target="[data-kt-button]">
                            <!--begin::Radio-->
                            <label class="btn btn-outline-secondary text-muted text-hover-white text-active-white btn-outline btn-active-success active" data-kt-button="true">
                                <!--begin::Input-->
                                <input class="btn-check" type="radio" checked="checked"  name="group_type" value="1"/>
                                <!--end::Input-->
                                Normal Groups
                            </label>
                            <!--end::Radio-->

                            <!--begin::Radio-->
                            <label class="btn btn-outline-secondary text-muted text-hover-white text-active-white btn-outline btn-active-success" data-kt-button="true">
                                <!--begin::Input-->
                                <input class="btn-check" type="radio" name="group_type" value="2"/>
                                <!--end::Input-->
                                Composed Groups
                            </label>
                            <!--end::Radio-->
                        </div>
                        <!--end::Radio group-->
                        <!--begin::Input-->
                        {{-- normal groups --}}
                        <div id="select_group_container">
                            <select name="group[]" data-control="select2" class="form-select" id="group" data-allow-clear="true" multiple="multiple" data-placeholder="Select an option" required>
                                @foreach ($groups as $group)
                                    <option value="{{ $group->gid }}">{{ $group->gname }}</option>
                                @endforeach
                            </select>
                        </div>
                        <!--end::Input-->
                        <!--begin::Input-->
                        {{-- composed groups --}}
                        <div id="select_composed_group_container" class="d-none">
                            <select name="composed_group[]" data-control="select2" class="form-select" id="composed_group" data-allow-clear="true" multiple="multiple"  data-placeholder="Select an option">
                                <option value="0" disabled selected>select composed group</option>
                                @foreach (AppHelper::instance()->courseComposedGroups($coffid) as $group)
                                    <option value="{{$group->id}}">{{$group->name}}</option>
                                @endforeach
                            </select>
                        </div>
                        <!--end::Input-->
                        </div>
                        <!--end::Input group-->
                        </div>
                        <!--end::Wrapper-->
                    </div>
                    <!--end::Step 1-->
                    <!--begin::Step 2-->
                    <div data-kt-stepper-element="content">
                        <!--begin::Wrapper-->
                        <div class="w-100">
                            <!--begin::Heading-->
                            <div class="pb-10 pb-lg-15">
                                <!--begin::Title-->
                                <h2 class="fw-bold text-dark">Homework settings</h2>
                                <!--end::Title-->
                            </div>
                            <!--end::Heading-->
                            <!--begin::Input group-->
                            <div class="mb-10 fv-row">
                                <div class="row">
                                    <div class="col-md-6">
                                        <!--begin::Label-->
                                        <label class="form-label mb-3 required" for="points">Points</label>
                                        <!--end::Label-->
                                        <!--begin::Input-->
                                        <input type="text" id="points" class="form-control form-control-lg " name="points" placeholder="" value="{{old('points')}}" required />
                                        <!--end::Input-->
                                    </div>
                                    {{-- <div class="col-md-5">
                                        <!--begin::Label-->
                                        <label class="form-label mb-3 required" for="time_limit">Time Limit</label>
                                        <!--end::Label-->
                                        <!--begin::Input-->
                                        <input type="text" id="time_limit" class="form-control form-control-lg " name="time_limit" placeholder="homework time in minuts" value="{{old('time_limit')}}" required />
                                        <!--end::Input-->
                                    </div> --}}
                                    <div class="col-md-6">
                                        <!--begin::Label-->
                                        <label class="form-label mb-3 required" for="attempts">Attempts</label>
                                        <!--end::Label-->
                                        <!--begin::Input-->
                                        <input type="text" id="attempts" class="form-control form-control-lg " name="attempts" value="1" readonly />
                                        <!--end::Input-->
                                    </div>
                                </div>
                            </div>
                            <!--end::Input group-->
                            <!--begin::Input group-->
                            <div class="mb-10 fv-row">
                                <div class="row">
                                    <div class="col-md-6">
                                        <!--begin::Label-->
                                        <label class="form-label mb-3 required" for="start_date">Start date</label>
                                        <!--end::Label-->
                                        <!--begin::Input-->
                                        <input required type="date" id="start_date" class="form-control form-control-lg " name="start_date" placeholder="" value="{{old('start_date')}}" />
                                        <!--end::Input-->
                                    </div>
                                    <div class="col-md-6">
                                        <!--begin::Label-->
                                        <label class="form-label mb-3 required" for="start_time">Start time</label>
                                        <!--end::Label-->
                                        <!--begin::Input-->
                                        <input type="time" id="start_time" class="form-control form-control-lg " name="start_time" placeholder="" value="{{old('start_time')}}" />
                                        <!--end::Input-->
                                    </div>
                                </div>
                            </div>
                            <!--end::Input group-->
                            <!--begin::Input group-->
                            <div class="mb-10 fv-row">
                                <div class="row">
                                    <div class="col-md-6">
                                        <!--begin::Label-->
                                        <label class="form-label mb-3 required" for="end_date">End date</label>
                                        <!--end::Label-->
                                        <!--begin::Input-->
                                        <input type="date" id="end_date" class="form-control form-control-lg " name="end_date" placeholder="" value="{{old('end_date')}}" />
                                        <!--end::Input-->
                                    </div>
                                    <div class="col-md-6">
                                        <!--begin::Label-->
                                        <label class="form-label mb-3 required" for="end_time">End time</label>
                                        <!--end::Label-->
                                        <!--begin::Input-->
                                        <input type="time" id="end_time" class="form-control form-control-lg " name="end_time" placeholder="" value="{{old('end_time')}}" />
                                        <!--end::Input-->
                                    </div>
                                </div>
                            </div>
                            <!--end::Input group-->
                            <div class="mb-10 fv-row">
                                <div class="row">
                                    {{-- <div class="col-md-6">
                                        <label class="form-check form-switch form-check-custom form-check-solid">
                                            <input class="form-check-input" type="checkbox" name="is_trial" {{old('is_trial')?'checked':''}}>
                                            <span class="form-check-label fw-semibold text-muted">is trial</span>
                                        </label>
                                    </div> --}}
                                    <div class="col-md-6">
                                        <label class="form-check form-switch form-check-custom form-check-solid">
                                            <input class="form-check-input" type="checkbox" name="allow_submit_after_end_time" {{old('allow_submit_after_end_time')?'checked':''}}>
                                            <span class="form-check-label fw-semibold text-muted">allow submit after end time</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--end::Wrapper-->
                    </div>
                    <!--end::Step 2-->

                    <!--begin::Step 3-->
                    <div data-kt-stepper-element="content">
                        <!--begin::Wrapper-->
                        <div class="w-100">
                            <div id="restrictions_container">
                                <!--begin::Heading-->
                                <div class="pb-10 pb-lg-15">
                                    <!--begin::Title-->
                                    <h2 class="fw-bold text-dark">Restriction Method</h2>
                                    <!--end::Title-->
                                </div>
                                <!--end::Heading-->
                                <!--begin::Input group-->
                                <div class="fv-row mb-10">
                                    <!--begin::Label-->
                                    <label class="form-label mb-3 required" for="students_list_new">Restrict By</label>
                                    <!--end::Label-->
                                    <!--begin::Input-->
                                    <div class="row me-10 mb-5" id="students_list_new">

                                        <div class="form-check col-md-4">
                                            <input class="form-check-input" type="radio" value="0" id="flexCheckActiveStudents" name="students" checked>
                                            <label class="form-check-label" for="flexCheckActiveStudents">Active Students</label>
                                        </div>
                                        {{-- <div class="form-check col-md-4">
                                            <input class="form-check-input" type="radio" value="1" id="flexCheckSession" name="students">
                                            <label class="form-check-label" for="flexCheckSession">Session</label>
                                        </div> --}}
                                        <div class="form-check col-md-4">
                                            <input class="form-check-input" type="radio" value="2" id="flexCheckAllEnrolledStudents" name="students">
                                            <label class="form-check-label" for="flexCheckAllEnrolledStudents">All Enrolled Students</label>
                                        </div>

                                    </div>
                                </div>
                                <!--end::Input-->
                                <!--begin::Input group-->
                                <div class="fv-row mb-10" id="restrict_by_meeting_group" style="display: none">
                                    <!--begin::Label-->
                                    <label class="form-label mb-3 required" for="meetings_list">Restrict By Meeting</label>
                                    <!--end::Label-->
                                    <!--begin::Input-->
                                    <select name= "meetings_list[]" id="meetings_list"  class="form-select form-select-solid" data-control="select2" data-close-on-select="false" data-placeholder="Select an option" data-allow-clear="true" multiple="multiple" >

                                    </select>
                                    <!--end::Input-->
                                </div>
                            </div>
                            <!--begin::Input group-->
                            <div class="fv-row">
                                <div class="py-4 text-center">
                                    <img src="{{env('SECURE_ASSETS').'/assets/media/svg/illustrations/easy/2.svg'}}" class="theme-light-show w-200px" alt="">
                                    <img src="{{env('SECURE_ASSETS').'/assets/media/svg/illustrations/easy/2-dark.svg'}}" class="theme-dark-show w-200px" alt="">
                                    <p class="text-gray-400 fw-bold py-3">Homework data are ready.</p>
                                </div>
                            </div>
                            <!--end::Input-->
                            <div class="position-absolute end-0 pt-10">
                                <button type="submit" class="btn btn-primary me-5 submit_btn">
                                    <!--begin::Svg Icon | path: icons/duotune/general/gen016.svg-->
                                    <span class="svg-icon svg-icon-3">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M15.43 8.56949L10.744 15.1395C10.6422 15.282 10.5804 15.4492 10.5651 15.6236C10.5498 15.7981 10.5815 15.9734 10.657 16.1315L13.194 21.4425C13.2737 21.6097 13.3991 21.751 13.5557 21.8499C13.7123 21.9488 13.8938 22.0014 14.079 22.0015H14.117C14.3087 21.9941 14.4941 21.9307 14.6502 21.8191C14.8062 21.7075 14.9261 21.5526 14.995 21.3735L21.933 3.33649C22.0011 3.15918 22.0164 2.96594 21.977 2.78013C21.9376 2.59432 21.8452 2.4239 21.711 2.28949L15.43 8.56949Z" fill="currentColor"></path>
                                        <path opacity="0.3" d="M20.664 2.06648L2.62602 9.00148C2.44768 9.07085 2.29348 9.19082 2.1824 9.34663C2.07131 9.50244 2.00818 9.68731 2.00074 9.87853C1.99331 10.0697 2.04189 10.259 2.14054 10.4229C2.23919 10.5869 2.38359 10.7185 2.55601 10.8015L7.86601 13.3365C8.02383 13.4126 8.19925 13.4448 8.37382 13.4297C8.54839 13.4145 8.71565 13.3526 8.85801 13.2505L15.43 8.56548L21.711 2.28448C21.5762 2.15096 21.4055 2.05932 21.2198 2.02064C21.034 1.98196 20.8409 1.99788 20.664 2.06648Z" fill="currentColor"></path>
                                    </svg>
                                </span>
                                <span class="pulse-ring"></span>
                                <span class="indicator-label">
                                    Continue
                                </span>
                                <span class="indicator-progress">
                                    Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                </span>
                                <!--end::Svg Icon-->
                                </button>
                            </div>
                        </div>
                        <!--end::Wrapper-->
                    </div>
                    <!--end::Step 3-->

                    <!--begin::Actions-->
                    <div class="d-flex flex-stack pt-10">
                        <div class="mr-2">
                            <button type="button" class="btn btn-lg btn-light-primary me-3" data-kt-stepper-action="previous">
                            <!--begin::Svg Icon | path: icons/duotune/arrows/arr063.svg-->
                            <span class="svg-icon svg-icon-4 me-1">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <rect opacity="0.5" x="6" y="11" width="13" height="2" rx="1" fill="currentColor" />
                                    <path d="M8.56569 11.4343L12.75 7.25C13.1642 6.83579 13.1642 6.16421 12.75 5.75C12.3358 5.33579 11.6642 5.33579 11.25 5.75L5.70711 11.2929C5.31658 11.6834 5.31658 12.3166 5.70711 12.7071L11.25 18.25C11.6642 18.6642 12.3358 18.6642 12.75 18.25C13.1642 17.8358 13.1642 17.1642 12.75 16.75L8.56569 12.5657C8.25327 12.2533 8.25327 11.7467 8.56569 11.4343Z" fill="currentColor" />
                                </svg>
                            </span>
                            <!--end::Svg Icon-->Back</button>
                        </div>
                        <!--begin::Wrapper-->
                        <div>
                            <button type="button" class="btn btn-lg btn-primary" data-kt-stepper-action="next">Continue
                            <!--begin::Svg Icon | path: icons/duotune/arrows/arr064.svg-->
                            <span class="svg-icon svg-icon-4 ms-1 me-0">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <rect opacity="0.5" x="18" y="13" width="13" height="2" rx="1" transform="rotate(-180 18 13)" fill="currentColor" />
                                    <path d="M15.4343 12.5657L11.25 16.75C10.8358 17.1642 10.8358 17.8358 11.25 18.25C11.6642 18.6642 12.3358 18.6642 12.75 18.25L18.2929 12.7071C18.6834 12.3166 18.6834 11.6834 18.2929 11.2929L12.75 5.75C12.3358 5.33579 11.6642 5.33579 11.25 5.75C10.8358 6.16421 10.8358 6.83579 11.25 7.25L15.4343 11.4343C15.7467 11.7467 15.7467 12.2533 15.4343 12.5657Z" fill="currentColor" />
                                </svg>
                            </span>
                            <!--end::Svg Icon--></button>
                        </div>
                        <!--end::Wrapper-->
                    </div>
                    <!--end::Actions-->
                </form>
                <!--end::Form-->
            </div>
            <!--end::Content-->
        </div>
        <!--end::Stepper-->
    </div>
    <!--end::Content container-->
</div>
@endsection
@section('js')
{{-- form validation --}}
<script src="{{env('SECURE_ASSETS').'/assets/js/custom/teacher/validation/create-quiz-file.js'}}"></script>
<script src="{{ env('SECURE_ASSETS').'/assets/plugins/custom/momentjs/moment.min.js' }}"></script>

{{-- restrict code --}}
<script>

    $('#flexCheckAllEnrolledStudents').on('change',function(){
        if($(this).is(':checked')){
            $('#restrict_by_meeting_group').css('display','none')


        }
    })
    $('#flexCheckActiveStudents').on('change',function(){
        if($(this).is(':checked')){
            $('#restrict_by_meeting_group').css('display','none')



        }
    })
    $('#flexCheckSession').on('change',function(){
        if($(this).is(':checked')){
            $('#restrict_by_meeting_group').css('display','block')


        }
    })
</script>
{{-- get meeeting based on group --}}
<script>
    $('#group').on('change',function(){
        let gid=$(this).val()
        if(gid.length > 0){
            let ajaxurl = "{{ route('ajax.getMeetingsBasedOnGroup',[':coffid',':gid']) }}";
            ajaxurl=ajaxurl.replace(':coffid',{{ $coffid }});
            ajaxurl=ajaxurl.replace(':gid',[gid]);

            $.ajax({
                url: ajaxurl,
                beforeSend: function() {
                    $('#meetings_list').empty();
                },
                success: function (response) {
                    response.map((item)=>{

                        $('#meetings_list').append(
                            `<option value=${item.mid}>${item.mstartdate}  /  ${moment(item.mstarttime, ["HH.mm"]).format("hh:mm a")} ${item.mtitle} (${item.gname ? item.gname : 'extra'})</option>`
                        );
                    })
                },
                error: function (error) {
                    toastr.error("something went wrong");
                }
            });
        }
    })

</script>

{{-- select group type --}}
<script>
    $(document).ready(function() {
        //set initial state.
        $('input[name=group_type]').change(function() {
            if($(this).val() == 1) {
                $('#select_group_container').removeClass('d-none')
                $('#restrictions_container').removeClass('d-none')
                $('#select_composed_group_container').addClass('d-none')
            }else{
                $('#select_composed_group_container').removeClass('d-none')
                $('#select_group_container').addClass('d-none')
                $('#restrictions_container').addClass('d-none')
            }
        });
    });

</script>
@endsection