{{-- Layout --}}
@extends('teacher.layout.layout')
{{-- Page Title --}}
@section('title', 'GAS LMS | Create Material')
{{-- Breadcrumb section --}}
@section('breadcrumb')
    @include('components._breadcrumb', ['items' => ['Material' => route('teacher.course.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_account_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">Material details</h3>
                                        <div class="stepper-desc fw-semibold">insert the material title, description and
                                            topic</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">Material Settings</h3>
                                        <div class="stepper-desc fw-semibold">Setup material pricing, attachments and
                                            access. </div>
                                    </div>
                                    <!--end::Label-->
                                </div>
                                <!--end::Wrapper-->
                                <!--begin::Line-->
                                <div class="stepper-line h-40px"></div>
                                <!--end::Line-->
                            </div>
                            <!--end::Step 2-->
                        </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 " enctype="multipart/form-data" novalidate="novalidate"
                        method="post" action="{{ route('teacher.course.material.store', $coffid) }}"
                        id="kt_create_account_form">
                        <!--begin::Step 1-->
                        <div class="current" data-kt-stepper-element="content">
                            @csrf
                            <!--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">Material details
                                        <i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip"
                                            title="Insert the material name, topic and any required description "></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" 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="desc">Description <span
                                            class="text-muted">(optional)</span></label>
                                    <!--end::Label-->
                                    <!--begin::Input-->
                                    <textarea id="desc" name="desc" class="form-control form-control-lg " rows="6" placeholder="">{{ old('desc') }}</textarea>
                                    <!--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>
                                <!--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 form-select-sm" id="group"
                                            data-placeholder="Select an option" multiple>
                                            {{-- <option value="0" disabled selected>select group</option> --}}
                                            @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-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">Material details</h2>
                                    <!--end::Title-->
                                </div>
                                <!--end::Heading-->
                                <!--begin::Input group-->
                                <!--end::Input group-->
                                <!--begin::Input group-->
                                <div class="fv-row mb-10">
                                    <!--begin::Label-->
                                    <label class="form-label mb-3 required" for="pricing">Pricing</label>
                                    <!--end::Label-->
                                    <!--begin::Input-->
                                    <select name="pricing" data-control="select2" class="form-select" id="pricing">
                                        <option value="2">Free</option>
                                        <option value="1">Paid</option>
                                    </select>
                                    <!--end::Input-->

                                </div>
                                <!--end::Input group-->
                                {{-- restrict code --}}

                                        <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="radio2" 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="radio2">
                                                        <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="radio2">
                                                        <label class="form-check-label"
                                                            for="flexCheckAllEnrolledStudents">All
                                                            Enrolled Students</label>
                                                    </div>

                                                </div>
                                                {{-- <span class="form-text text-muted">Some help text goes here</span> --}}
                                            </div>
                                        </div>

                                <!--end::Input-->
                                {{-- restrict code --}}
                                <!--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>


                                <!--begin::Input group-->
                                <div class="fv-row mb-10">
                                    <!--begin::Label-->
                                    <label class="form-label mb-3 required" for="material_file">Upload Attachment</label>
                                    <!--end::Label-->
                                    <!--begin::Input-->
                                    {{-- <input type="file" name="material_file[]" id="material_file" multiple class="form-control mb-2 mb-md-0" placeholder="upload attachment" required />
                                        --}}
                                    <div class="file-drop-area">
                                        <span class="fake-btn">Choose files</span>
                                        <span class="file-msg">or drag and drop files here</span>
                                        <input class="file-input" id="material_file" type="file"
                                            name="material_file[]" multiple required>
                                    </div>

                                    <div class="form-text text-muted">Allowed File Types:
                                        jpg,jpeg,png,gif,zip,rar,doc,docx,xls,xlsx,pptx,mp4,mp3,wav,ogg,pdf,csv</div>
                                    <div class="form-text text-muted">Maximum Size For All Attachments: 100MB</div>
                                    <div class="form-text text-muted">Maximum Allowed Attachments Count: 4 Attachments
                                    </div>
                                    <!--end::Input-->
                                </div>
                                <!--end::Input group-->
                                <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>
                                    <button type="submit" class="btn btn-primary me-5 submit_btn" id="submit-button">
                                        <!--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">
                                            Submit
                                        </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>
                        </div>
                        <!--end::Wrapper-->
                        <!--begin::Actions-->
                        <div class="d-flex flex-stack pt-10">
                            <!--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')
    <script src="{{ env('SECURE_ASSETS') . '/assets/js/custom/utilities/modals/create-material.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')

            }
        })

        $('#pricing').on('change', function() {
            if ($(this)[0].value == 1) {
                $('#price_input').css('display', 'block')
            }
        })


        //  onsubmit form check there is file uploaded
        var submitButton = document.getElementById('submit-button');

        submitButton.addEventListener("click", function(e) {

            if (document.getElementById('material_file').files.length == 0) {
                e.preventDefault();
                toastr.error('Please upload files')
                return false;
            }


        });
    </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