@extends('layouts.admin')

@section('content')
    <!--App-Content-->
    <div class="app-content my-3 my-md-5 profile-1">
        <div class="side-app">
            <x-page.header>Link Courses</x-page.header>
            @include('admin.errors.form-errors')
            <div class="row">
                <div class="col-md-12">
                    <!--begin::selected courses-->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title">
                                Selected Courses List
                                <span class="badge badge-circle bg-danger text-white" id="courses_count">0</span>
                            </h5>
                            <div class="card-options">
                                <button type="button" class="finish_btn btn btn-sm btn-primary submit_btn" >
                                    <!--begin::Svg Icon | path: icons/duotune/general/gen016.svg-->
                                    <span class="">
                                        <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="indicator-label">
                                        Finish
                                    </span>
                                    <!--end::Svg Icon-->
                                </button>
                            </div>
                        </div>
                        <!--begin::Card body-->
                        <div class="card-body">
                            <!--begin::Input group-->
                            <div id="selected_courses_box" class="row">

                            </div>
                            <!--end::Input group-->
                        </div>
                        <!--end::Card body-->
                    </div>
                    <!--end::selected courses-->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title">
                                Offered courses list
                            </h5>
                            <div class="card-options text-white rounded-3 pt-2 px-2" style="background: #8c2828">
                                <label class="custom-control form-checkbox">
                                    <input type="checkbox" class="custom-control-input" id="select_all_courses">
                                    <span class="custom-control-label fw-bold" for="select_all_courses">Select all</span>
                                </label>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="accordion accordion-flush" id="accordionFlushExample">
                                @foreach ($education_systems as $key=>$education_system)
                                <div class="accordion-item border-0">
                                    <h2 class="accordion-header card">
                                        <button class="accordion-button collapsed py-5" type="button" data-bs-toggle="collapse" data-bs-target="#card_collapsible_{{ $education_system->esid }}">
                                            {{ $education_system->esname }}
                                        </button>
                                    </h2>
                                    <div id="card_collapsible_{{ $education_system->esid }}" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
                                        <div class="accordion-body">
                                            <div class="row">
                                                @foreach ($levels->where('esid',$education_system->esid) as $level)
                                                @php
                                                    $random_color= Arr::random(['danger','info','primary','success','blue']);
                                                @endphp
                                                <div class="col-lg-6 col-xl-4">
                                                    <div class="card">
                                                        <!--begin::Card header-->
                                                        <div class="card-header">
                                                            <h4>
                                                                {{ $level->board->bname }} ({{ $courses->where('lid',$level->lid)->count() }})<br>
                                                                <span class="badge bg-{{ $random_color }} text-white mt-1">{{ $level->lshort_name }}</span>
                                                            </h4>
                                                        </div>
                                                        <!--end::Card header-->
                                                        <!--begin::Card body-->
                                                        <div class="card-body" style="max-height: 700px; overflow:auto;">
                                                            <!--begin::List-->
                                                            <!--begin::Courses-->
                                                            @foreach ($courses->where('lid',$level->lid) as $course)
                                                            <!--begin::Radio button-->
                                                            <a class="form-check card rounded" href="javascript:void(0)">
                                                                <div class="card-status card-status-left bg-{{ $random_color }} br-te-7 br-ts-7"></div>
                                                                <div class="card-header">
                                                                    <div class="card-title">
                                                                        <input
                                                                        id="select_course_{{ $course->coffid }}"
                                                                        class="form-check-input course_input_field"
                                                                        onchange="onSelectCourse($(this))"
                                                                        type="checkbox"
                                                                        name="course"
                                                                        value="{{ $course->cid }}"
                                                                        data-cid="{{ $course->cid }}"
                                                                        data-cname="{{ $course->cname }}"
                                                                        data-bname="{{ $level->board->bname }}"
                                                                        data-lname="{{ $level->lshort_name }}"
                                                                        data-lid="{{ $level->lid }}"
                                                                        data-bid="{{ $level->bid }}"
                                                                        data-btn-type="add"
                                                                        {{ in_array($course->cid,$linked_courses->pluck('cid')->toArray()) ? 'checked':'' }}
                                                                        />
                                                                    </div>
                                                                    <div class="card-option mt-2">
                                                                        <label class="form-check-label" for="select_course_{{ $course->cid }}">
                                                                            {{ $course->cname }}
                                                                        </label>
                                                                    </div>
                                                                </div>
                                                            </a>
                                                            <!--end::Radio button-->
                                                            @endforeach
                                                            <!--end::Courses-->
                                                            <!--end::List-->
                                                        </div>
                                                        <!--end::Card body-->
                                                    </div>
                                                </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('admin-js')
<script>
    var selected_courses_box=$('#selected_courses_box');
    var btn_loading=`<span class="indicator-progress">
                        Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                    </span>`
    var finish_btn=$('.finish_btn');
    var courses_count=$('#courses_count');
    var selected_courses={};

    // start the initial state
    $( document ).ready(function() {
        initialState();
    });

    function initialState(){
        formData=[];
        courses_count.text(formData.length);
        selected_courses_box.html(
            `<!--begin::Spinner-->
            <span class="translate-middle-y lh-0">
                <span class="spinner-border h-15px w-15px align-middle text-gray-400 mx-auto d-block"></span>
            </span>
            <!--end::Spinner-->`
        );

        // disable finish btn
        finish_btn.attr("disabled", "true")
        // empty selected courses box
        setTimeout(() => {
            selected_courses_box.html(`<p class="fw-bold text-danger text-center">The list is empty</p>`);
        }, 500);

    };

    function fillCourseCart(formData){

        if(formData.length > 0){
            selected_courses_box.html(
                `<!--begin::Spinner-->
                <span class="translate-middle-y lh-0">
                    <span class="spinner-border h-15px w-15px align-middle text-gray-400 mx-auto d-block"></span>
                </span>
                <!--end::Spinner-->`
            );
            setTimeout(() => {
                selected_courses_box.empty();
                $.each(formData, function( index, item ) {
                    selected_courses_box.prepend(
                        `
                        <div class="col-md-6  col-xl-4">
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title">${item.bname}</h3>
                                    <div class="card-options">
                                        <a href="javascript:void(0)" class="btn btn-primary btn-sm"
                                        onclick=onSelectCourse($(this))
                                        title="remove"
                                        data-cid="${item.cid }"
                                        data-bid="${item.bid }"
                                        data-lid="${item.lid }"
                                        data-btn-type=remove>
                                        Remove</a>
                                    </div>
                                </div>
                                <div class="card-body">
                                    ${item.cname}_${item.lname}
                                </div>
                            </div>
                        </div>
                        `
                    );
                });
                finish_btn.attr('disabled',false);
            }, 500);
        }else{
            initialState();
        }
    };

    function onSelectCourse(event){

        var cid=event.attr('data-cid');
        var bid=event.attr('data-bid');
        var lid=event.attr('data-lid');
        var lname=event.attr('data-lname');
        var cname=event.attr('data-cname');
        var bname=event.attr('data-bname');
        var teacher_profile_id='{{ $teacher_profile->id }}'
        var btnType=event.attr('data-btn-type');

        selected_courses={
            bid:bid,
            cid:cid,
            lid:lid,
            bname:bname,
            lname:lname,
            cname:cname,
            teacher_profile_id:teacher_profile_id,
        };

        if(event.is(":checked")){
            formData.push(selected_courses);
            notif({
                type: "success",
                msg: "Course added successfully",
                position: "center",
                opacity: 0.8,
                multiline: true,
                autohide: true
            });
        }else{
            formData=formData.filter((item)=>{
                return item.cid !== cid;
            });

            notif({
                type: "success",
                msg: "Course removed successfully",
                position: "center",
                opacity: 0.8,
                multiline: true,
                autohide: true
            });
        };

        if(btnType == 'remove'){
            $(`input[type=checkbox][data-cid=${cid}]`).prop( "checked", false );
        }

        fillCourseCart(formData);
        courses_count.text(formData.length);
    };

    finish_btn.on('click',function(){
        var url="{{ route('teacher.profile.storeLinkedCourses') }}"
         // begin:Start Ajax call
         $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            url: url,
            type:'post',
            data: {'courses':formData},
            beforeSend: function() {
                // Start loader
                finish_btn.html(btn_loading)
                finish_btn.attr("disabled", "true")
            },
            success: function (response) {
                notif({
                type: "success",
                msg: response.message,
                position: "center",
                opacity: 0.8,
                multiline: true,
                autohide: true
                });
                initialState()
                setTimeout(() => {
                    window.location.href="{{ route('teacher.profile.show',$ttid) }}";
                }, 2000);
            },
            error: function (xhr, status,error) {

                if(xhr.status == 500){
                    var errorMessage = 'Something went wrong';
                }else if(xhr.status == 422){
                    var errorMessage = JSON.parse(xhr.responseText).error;
                }
                notif({
                    type: "error",
                    msg: errorMessage,
                    position: "center",
                    opacity: 0.8,
                    multiline: true,
                    autohide: true
                });
                finish_btn.html(`<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="indicator-label">
                                    Finish
                                </span>`)
                finish_btn.attr("disabled", false)
            }
        });
        // end:Start Ajax call
    });

    $("#select_all_courses").change(function() {
        if($(this).is(':checked')) {
            formData=[];
            $('.course_input_field').attr('checked',true)
            $('.course_input_field').attr('disabled',true)
            @foreach ($courses as $course)
                selected_courses={
                bid:{{ $course->bid }},
                cid:{{ $course->cid }},
                lid:{{ $course->lid }},
                };
                formData.push(selected_courses);
            @endforeach
            finish_btn.attr("disabled", false)
            notif({
                type: "success",
                msg: "Courses added successfully",
                position: "center",
                opacity: 0.8,
                multiline: true,
                autohide: true
            });
            courses_count.text(formData.length);
            selected_courses_box.html(
                        `<!--begin::Spinner-->
                        <span class="translate-middle-y lh-0">
                            <span class="spinner-border h-15px w-15px align-middle text-gray-400 mx-auto d-block"></span>
                        </span>
                        <!--end::Spinner-->`
                    );
            setTimeout(() => {
            selected_courses_box.html(`<p class="fw-bold text-success text-center">All courses selected successfully</p>`);
        }, 100);
        }else{
            finish_btn.attr("disabled", true)
            $('.course_input_field').attr('checked',false)
            $('.course_input_field').attr('disabled',false)
            notif({
                type: "success",
                msg: "Courses removed successfully",
                position: "center",
                opacity: 0.8,
                multiline: true,
                autohide: true
            });
            initialState();
        }
    });
</script>
@endsection