@extends('admin/layouts/app')

@section('page-title')
    <title>Update Course | Simple Admission</title>
@endsection

@section('page-breadcrumb')
    <div data-kt-swapper="true" data-kt-swapper-mode="prepend" data-kt-swapper-parent="{default: '#kt_content_container', 'lg': '#kt_toolbar_container'}" class="page-title d-flex align-items-center flex-wrap me-3 mb-5 mb-lg-0">
        <!--begin::Title-->
        <h1 class="d-flex align-items-center text-dark fw-bolder fs-3 my-1">Course</h1>
        <!--end::Title-->
        <!--begin::Separator-->
        <span class="h-20px border-gray-300 border-start mx-4"></span>
        <!--end::Separator-->
        <!--begin::Breadcrumb-->
        <ul class="breadcrumb breadcrumb-separatorless fw-bold fs-7 my-1">
            <!--begin::Item-->
            <li class="breadcrumb-item text-muted">
                <a href="javascript:;" class="text-muted text-hover-primary">Update</a>
            </li>
        </ul>
        <!--end::Breadcrumb-->
    </div>
@endsection

@section('main-content')
    <!--begin::Post-->
    <div class="post d-flex flex-column-fluid" id="kt_post">
        <!--begin::Container-->
        <div id="kt_content_container" class="container-xxl">
            {{--        @include('admin.course-management.course-list.include.tabmenu')--}}
            @include('admin.course-management.course-details.tabmenu')
            <!--begin::Contact-->
            <div class="card">
                <!--begin::Body-->
                <div class="card-body p-lg-17">
                    <!--begin::Row-->
                    <form enctype="multipart/form-data" action="{{route('course.admission.update', $course_item->id)}}" name="institute" class="form mb-15" method="POST" id="kt_contact_form">
                        @csrf
                        <h1 class="fw-bolder text-dark mb-9">Update Admission</h1>
                        <!--begin::Input group-->
                        <div class="row mb-3">
                            <!--begin::Col-->
                            <div class="col-md-6 pe-lg-10">
                                <div class="d-flex flex-column mb-5 fv-row">
                                    <label class=" fs-5 fw-bold mb-2">Admission Instruction & process (EN)</label>
                                    <textarea name="admission_instruction" id="admission_instruction" class="summernote form-control form-control-solid" placeholder="Enter Admission Instruction & process (EN)" autocomplete="off">{{$course_item->admission_instruction}}</textarea>
                                    @if($errors->has('admission_instruction'))
                                        <span class="text-danger">{{ $errors->first('admission_instruction') }}</span>
                                    @endif
                                </div>


                                <div class="d-flex flex-column mb-5 fv-row">
                                    <label class=" fs-5 fw-bold mb-2">Admission Requirements (EN)</label>
                                    <textarea name="requirements" id="requirements" class="summernote form-control form-control-solid" placeholder="Enter Admission Requirements (EN)" autocomplete="off">{{$course_item->requirements}}</textarea>
                                    @if($errors->has('requirements'))
                                        <span class="text-danger">{{ $errors->first('requirements') }}</span>
                                    @endif
                                </div>


                                <div class="d-flex">
                                    <a style="margin-right:5px;" href="{{route('course.index')}}" class="btn btn-secondary">Back</a>
                                    <button type="submit" class="btn btn-primary" id="kt_contact_submit_button">
                                        <!--begin::Indicator-->
                                        <span class="indicator-label">Update</span>
                                    </button>
                                </div>
                                <!--end::Form-->
                            </div>
                            <div class="col-md-6 pe-lg-10">
                                <div class="d-flex flex-column mb-5 fv-row">
                                    <label class="fs-5 fw-bold mb-2">Admission Instruction & process (BN)</label>
                                    <textarea name="admission_instruction_bn" id="admission_instruction_bn"
                                              class="summernote form-control form-control-solid" placeholder="Enter Admission Instruction & process (BN)"
                                              autocomplete="off">{{$course_item->admission_instruction_bn}}
                                    </textarea>
                                    @if($errors->has('admission_instruction_bn'))
                                        <span class="text-danger">{{ $errors->first('admission_instruction_bn') }}</span>
                                    @endif
                                </div>
                                <!--begin::Form-->
                                <div class="d-flex flex-column mb-5 fv-row">
                                    <label class="fs-5 fw-bold mb-2">Admission Requirements (BN)</label>
                                    <textarea name="requirements_bn" id="requirements_bn"
                                              class="summernote form-control form-control-solid" placeholder="Enter Admission Requirements (BN)"
                                              autocomplete="off">
                                    {{$course_item->requirements_bn}}
                                </textarea>
                                    @if($errors->has('requirements_bn'))
                                        <span class="text-danger">{{ $errors->first('requirements_bn') }}</span>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <!--end::Submit-->
                    </form>

                </div>
                <!--end::Body-->
            </div>
            <!--end::Contact-->
        </div>
        <!--end::Container-->
    </div>
    <!--end::Post-->
@endsection

@section('extra-css')
    <link href="{{ asset('css/toastr.css') }}" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="{{ asset('css/dropify.min.css') }}">
    <link rel="stylesheet" href="{{ asset('summernote/summernote.css') }}">
@endsection

@section('extra-script')
    <script>
        $(document).ready(function () {
            $('.menu-item-course-management').addClass('here');
            $('.menu-item-course-management').addClass('show');
            $('.menu-sub-item-course-management').addClass('active');
        });
    </script>
    <script src="{{ asset('js/toastr.min.js') }}"></script>
    <script src="{{ asset('js/jquery.validate.js') }}"></script>
    <script src="{{ asset('js/dropify.min.js') }}"></script>
    <script src="{{ asset('summernote/summernote.min.js') }}"></script>

    //validate form
    <script>

        const trainingSection = document.querySelector(".training-section");
        const iebSection = document.querySelector(".ieb-section");
        const totalCreditSection = document.querySelector(".total-credit-section");
        const institutes = null;
        let execute = true;

        $(function () {
            $("form[name='institute']").validate({
                ignore: ".note-editable.panel-body",
                rules: {
                    admission_instruction: 'required',
                    admission_instruction_bn: 'required',

                    // description: 'required',
                    // single_price: 'required',
                    // average_price: 'required',
                    // admission_test_date: 'required',
                    // from_date: 'required',
                    // to_date: 'required',
                    // class_schedule: 'required',
                    // total_credit: 'required',
                    // total_semester: 'required',
                    // requirements: 'required',
                    // duration: 'required',
                },
                messages: {
                    institute_id: "institute is required.",
                    course_id: 'Course is required.',
                    department_id: "Department is required.",
                    category_type_id: "Main Category is required.",
                    category_id: "Category is required.",
                    session_id: "Session is required.",
                    slug: "Slug is required.",
                    description: "Description is required.",
                    single_price: "Single Price is required.",
                    average_price: "Average Price is required.",
                    admission_test_date: "Admission Test Date is required.",
                    from_date: "Course From Date is required.",
                    to_date: "Course To Date is required.",
                    class_schedule: "Class Schedule is required.",
                    // total_credit: "Total Credit is required.",
                    // total_semester: "Total Semester is required.",
                    requirements: "Requirements is required.",
                    duration: "Duration is required.",
                },
                submitHandler: function (form) {
                    form.submit();
                }
            });
        });

        // show hide training section
        function showHideTrainingSection(instituteId) {
            // console.log('LOL');
            let instituteType = 0;
            const findItem = institutes?.find(item => {
                return item.id == instituteId;
            })
            if (findItem) {
                instituteType = findItem.institute_basic.institute_type;
                // console.log('LOL', instituteType);
            }
            if (instituteType == 1) {
                totalCreditSection.style.display = "none";
                iebSection.style.display = "inline-block";
            } else if (instituteType == 2) {
                trainingSection.style.display = "inline-block";
                iebSection.style.display = "none";
            } else {
                totalCreditSection.style.display = "none";
                trainingSection.style.display = "none";
                iebSection.style.display = "none";
            }
        }

        if (execute) {
            showHideTrainingSection('{{$course_item->institute_id}}')
            execute = false;
        }


    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.summernote').summernote({
                height: 200,
                popover: {
                    image: [],
                    link: [],
                    air: []
                }
            });
        });
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            var editData = {!! json_encode($course_item) !!};

            if (editData && editData.banner) {
                var imageUrl = "{{URL::asset($course_item->banner)}}";
                var drEvent = $('#banner').dropify(
                    {
                        defaultFile: imageUrl
                    });
                drEvent = drEvent.data('dropify');
                drEvent.resetPreview();
                drEvent.clearElement();
                drEvent.settings.defaultFile = imageUrl;
                drEvent.destroy();
                drEvent.init();
            } else {
                var drEvent = $('#banner').dropify();
                drEvent = drEvent.data('dropify');
                drEvent.resetPreview();
                drEvent.clearElement();
            }


            if (editData && editData.thumbnail) {
                var imageUrl = "{{URL::asset($course_item->thumbnail)}}";
                var drEvent = $('#thumbnail').dropify(
                    {
                        defaultFile: imageUrl
                    });
                drEvent = drEvent.data('dropify');
                drEvent.resetPreview();
                drEvent.clearElement();
                drEvent.settings.defaultFile = imageUrl;
                drEvent.destroy();
                drEvent.init();
            } else {
                var drEvent = $('#thumbnail').dropify();
                drEvent = drEvent.data('dropify');
                drEvent.resetPreview();
                drEvent.clearElement();
            }

            if (editData && editData.brochure) {
                var imageUrl = "{{URL::asset($course_item->brochure)}}";
                var drEvent = $('#brochure').dropify(
                    {
                        defaultFile: imageUrl
                    });
                drEvent = drEvent.data('dropify');
                drEvent.resetPreview();
                drEvent.clearElement();
                drEvent.settings.defaultFile = imageUrl;
                drEvent.destroy();
                drEvent.init();
            } else {
                var drEvent = $('#brochure').dropify();
                drEvent = drEvent.data('dropify');
                drEvent.resetPreview();
                drEvent.clearElement();
            }


            if (editData.institute_id) {
                $.ajax({
                    type: "GET",
                    url: "{{url('get-department-list')}}?institute_id=" + editData.institute_id,
                    success: function (res) {
                        if (res) {
                            $("#department_id").empty();
                            $("#department_id").append('<option selected disabled>Select Department</option>');
                            $.each(res, function (key, value) {
                                if ((editData.department.title == value) && (editData.department.user_id == editData.institute_id)) {
                                    $("#department_id").append('<option selected value="' + key + '">' + value + '</option>');
                                } else {
                                    $("#department_id").append('<option value="' + key + '">' + value + '</option>');
                                }
                            });
                        } else {
                            $("#department_id").empty();
                        }
                    }
                });

                $.ajax({
                    type: "GET",
                    url: "{{url('get-session-list')}}?institute_id=" + editData.institute_id,
                    success: function (res) {
                        if (res) {

                            $("#session_id").empty();
                            $("#session_id").append('<option selected disabled>Select Session</option>');
                            $.each(res, function (key, value) {
                                if (editData.session_id == Number(key)) {
                                    $("#session_id").append('<option selected value="' + key + '">' + value + '</option>');
                                } else {
                                    $("#session_id").append('<option value="' + key + '">' + value + '</option>');
                                }
                            });
                        } else {
                            $("#session_id").empty();
                        }
                    }
                });
            }
            if (editData.course_name_id) {
                $.ajax({
                    type: "POST",
                    url: "{{url('get-course-list')}}",
                    data: {department_id: editData?.department?.id, institute_id: editData.institute_id, _token: "{{ csrf_token() }}"},
                    success: function (res) {
                        if (res) {
                            $("#course_id").empty();
                            $("#course_id").append('<option>Select Course</option>');
                            $.each(res, function (key, value) {
                                if (editData.course_name_id == Number(key)) {
                                    $("#course_id").append('<option selected value="' + key + '">' + value + '</option>');
                                } else {
                                    $("#course_id").append('<option value="' + key + '">' + value + '</option>');
                                }
                            });

                        } else {
                            $("#course_id").empty();
                        }
                    }
                });
            }

            if (editData.category_type_id) {
                $.ajax({
                    type: "GET",
                    url: "{{url('get-category-list-by-category-type')}}?category_type_id=" + editData.category_type_id,
                    success: function (res) {
                        if (res) {
                            $("#category_id").empty();
                            $("#category_id").append('<option>Select Category</option>');
                            if (res.length > 0) {
                                $.each(res, function (key, value) {
                                    $("#category_id").append('<option ' + (editData.category_id == value?.id ? 'selected' : '') + ' value="' + value?.id + '">' + value?.name + '</option>');

                                    if (value.children.length > 0) {
                                        var level = 0;
                                        childView(value.children, level);
                                    }
                                });

                            }
                        } else {
                            $("#category_id").empty();
                        }
                    }
                });
            }
        });

        function childView(children, level) {
            var editData = {!! json_encode($course_item) !!};

            $.each(children, function (key, value) {
                level = level + 1;
                var gap = '';
                for (var i = 0; i < level; i++) {
                    gap = gap + '--';
                }
                console.log('editData.category_id', editData.category_id);
                console.log('value?.id', value?.id);
                $("#category_id").append('<option ' + (editData.category_id == value?.id ? 'selected' : '') + ' value="' + value?.id + '">' + gap + ' ' + value?.name + '</option>');

                if (value.children.length > 0) {
                    childView(value.children, level);
                }
            });
        }

        // $('#buttonLink').hide()
        setApplyBtnAction = (e) => {
            console.log('first', e.value)
            if (e.value == 2) {
                $('#buttonLink').removeClass("d-none");
                $('#buttonLink').addClass("d-block");
            } else {
                $('#buttonLink').removeClass("d-block");
                // $('#buttonLink').attr("class", "textboxRight");
                $('#buttonLink').addClass("d-none");
            }
        }
    </script>
    <script type="text/javascript">
        @if(Session::has('message'))
        var type = "{{Session::get('alert-type', 'info')}}"
        switch (type) {
            case 'info':
                toastr.info("{{Session::get('message')}}");
                break;
            case 'success':
                toastr.success("{{Session::get('message')}}");
                break;
            case 'warning':
                toastr.warning("{{Session::get('message')}}");
                break;
            case 'error':
                toastr.error("{{Session::get('message')}}");
                break;
        }
        @endif

        @if(count($errors) > 0)
        @foreach($errors->all() as $error)
        toastr.error("{{ $error }}");
        @endforeach
        @endif
    </script>
    <script>
        var oldDiv = "{{old('institute_id')}}";
        $('#institute_id').change(function () {
            var institute_id = $(this).val();
            oldDiv = "{{old('institute_id')}}";
            if (institute_id) {
                $.ajax({
                    type: "GET",
                    url: "{{url('get-department-list')}}?institute_id=" + institute_id,
                    success: function (res) {
                        if (res) {
                            $("#department_id").empty();
                            $("#course_id").empty();
                            $("#department_id").append('<option selected>Select Department</option>');
                            $.each(res, function (key, value) {
                                $("#department_id").append('<option value="' + key + '">' + value + '</option>');
                            });
                        } else {
                            $("#department_id").empty();
                            $("#course_id").empty();
                        }
                    }
                });
            } else {
                $("#department_id").empty();
                // $("#category_id").empty();
                $("#course_id").empty();
            }
        });
        $('#department_id').on('change', function () {
            var institute_id = $('#institute_id').val();
            console.log('institute_id', institute_id);
            var department_id = $(this).val();
            let oldCourse = "{{old('course_id')}}";
            if (department_id) {

                $.ajax({
                    type: "POST",
                    url: "{{url('get-course-list')}}",
                    data: {department_id: department_id, institute_id: institute_id, _token: "{{ csrf_token() }}"},
                    success: function (res) {
                        if (res) {
                            $("#course_id").empty();
                            $("#course_id").append('<option>Select Course</option>');
                            $.each(res, function (key, value) {
                                $("#course_id").append('<option value="' + key + '">' + value + '</option>');
                            });
                        } else {
                            $("#course_id").empty();
                        }
                    }
                });
            } else {
                $("#course_id").empty();
            }
        });

        $('#institute_id').change(function () {
            var institute_id = $(this).val();
            let oldSession = "{{old('session_id')}}";
            if (institute_id) {
                $.ajax({
                    type: "GET",
                    url: "{{url('get-session-list')}}?institute_id=" + institute_id,
                    success: function (res) {
                        if (res) {
                            $("#session_id").empty();
                            $("#session_id").append('<option selected disabled>Select Session</option>');
                            $.each(res, function (key, value) {
                                $("#session_id").append('<option value="' + key + '">' + value + '</option>');
                            });
                            if (oldDiv) {
                                $("#session_id").trigger("change");
                            }
                        } else {
                            $("#session_id").empty();
                        }
                    }
                });
            } else {
                $("#session_id").empty();
            }
        });
        $('#category_type_id').change(function () {
            var category_type_id = $(this).val();
            if (category_type_id) {
                $.ajax({
                    type: "GET",
                    url: "{{url('get-category-list-by-category-type')}}?category_type_id=" + category_type_id,
                    success: function (res) {
                        if (res) {
                            $("#category_id").empty();
                            $("#category_id").append('<option>Select Category</option>');
                            if (res.length > 0) {
                                $.each(res, function (key, value) {
                                    $("#category_id").append('<option value="' + value?.id + '">' + value?.name + '</option>');
                                    if (value.children.length > 0) {
                                        var level = 0;
                                        childView(value.children, level);
                                    }
                                });

                            }
                        } else {
                            $("#category_id").empty();
                        }
                    }
                });
            } else {
                $("#category_id").empty();
            }
        });

    </script>
@endsection