@extends('admin/course-management/course-details/index')
@section('main-content-tab')
    <div class="post d-flex flex-column-fluid" id="kt_post">
        <!--begin::Container-->
        <div id="kt_content_container" class="container-xxl">
            <div class="card mb-5">
                <!--begin::Body-->
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3 class="fs-18px fw-500 mb-0">Groups</h3>
                    <div class="d-flex pt-5">
                        <button type="submit" onclick="loadGroupAdd()" class="btn btn--primary rounded-btn" style="background: rgba(117,117,117,0.1);"><i class="bi bi-plus-circle fs-6"></i>Add Group</button>
                    </div>
                </div>
                <div class="card-body py-4 faculty-table-card">
                    <!--begin::Table-->
                    <div class="table-responsive">
                        <table class="table table-row-bordered data-table group-data-table">
                        <thead>
                        <tr>
                            <th class="text-center">SL</th>
                            <th class="text-center">title (EN)</th>
                            <th class="text-center">title (BN)</th>
                            <th class="text-center">Action</th>
                        </tr>
                        </thead>
                        <tbody class="text-gray-600 fw-bold">

                        </tbody>
                    </table>
                    </div>
                </div>
            </div>

        </div>
        <!--end::Container-->
    </div>

    <div class="post d-flex flex-column-fluid" id="kt_post">
        <!--begin::Container-->
        <div id="kt_content_container" class="container-xxl">
            <div class="card mb-5">
                <!--begin::Body-->
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3 class="fs-18px fw-500 mb-0">Subjects</h3>
                    <div class="d-flex pt-5">
                        <button type="submit" onclick="loadSubjectAdd()" class="btn btn--primary rounded-btn" style="background: rgba(117,117,117,0.1);"><i class="bi bi-plus-circle fs-6"></i>Add Subject</button>
                    </div>
                </div>
                <div class="card-body py-4 faculty-table-card">
                    <!--begin::Table-->
                    <div class="table-responsive">
                        <table class="table table-row-bordered data-table subject-data-table">
                            <thead>
                            <tr>
                                <th class="text-center">SL</th>
                                <th class="text-center">Group</th>
                                <th class="text-center">title</th>
                                <th class="text-center">Code</th>
                                <th class="text-center">Credits</th>
                                <th class="text-center">Prerequisite</th>
                                <th class="text-center">Status</th>
                                <th class="text-center">Action</th>
                            </tr>
                            </thead>
                            <tbody class="text-gray-600 fw-bold">

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>
        <!--end::Container-->
    </div>

    <div class="modal fade custom-modal" tabindex="-1" id="kt_modal_group_add">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header bg--primary text-white">
                    <h3 class="modal-title">Add Group</h3>
                    <button type="button" class="btn btn-icon btn-sm btn-secondary modal-close-btn" data-bs-dismiss="modal" aria-label="Close">
                        <i class="las la-times"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="group-add-form" action="{{ route("course.group.store") }}" method="POST">
                        @csrf
                        <input type="hidden" name="institute_slug" value="{{ $institute_slug }}">
                        <input type="hidden" name="course_slug" value="{{ $course_slug }}">
                        <div class="row g-2 mb-4">
                            <div class="col-12">

                                <div class="form-group mb-4">
                                    <label for="title_en" class="form-label">Title (EN)</label>
                                    <input class="form-control" id="title" name="title" placeholder="Enter Title">
                                </div>

                                <div class="form-group mb-4">
                                    <label for="title_bn" class="form-label">Title (BN)</label>
                                    <input class="form-control" id="title_bn" name="title_bn" placeholder="Enter Title BN">
                                </div>

<!--                                <div class="d-flex mb-4 fv-row">
                                    <label class="form-check form-switch form-check-custom form-check-solid">
                                        <span class="required form-check-label fw-bold text-muted" style="margin-right: 10px;margin-left: 0px;">Status</span>
                                        <input class="form-check-input radio-btn" name="status" type="checkbox" value="1" checked/>
                                    </label>
                                    &lt;!&ndash;end::Switch&ndash;&gt;
                                </div>-->
                            </div>
                        </div>
                        <div class="d-flex justify-content-center">
                            <button type="submit" class="btn btn-primary rounded-btn">Save</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade custom-modal" tabindex="-1" id="kt_modal_group_edit">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header bg--primary text-white">
                    <h3 class="modal-title">Edit Group</h3>
                    <button type="button" class="btn btn-icon btn-sm btn-secondary modal-close-btn" data-bs-dismiss="modal" aria-label="Close">
                        <i class="las la-times"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="group-edit-form" action="{{ route("course.group.update") }}" method="POST">
                        @csrf
                        <input type="hidden" name="id" id="edit-id">
                        <input type="hidden" name="institute_slug" value="{{ $institute_slug }}">
                        <input type="hidden" name="course_slug" value="{{ $course_slug }}">
                        <div class="row g-2 mb-4">
                            <div class="col-12">

                                <div class="form-group mb-4">
                                    <label for="title_en" class="form-label">Title (EN)</label>
                                    <input class="form-control" id="update_title" name="title" placeholder="Enter Title EN">
                                </div>

                                <div class="form-group mb-4">
                                    <label for="title_bn" class="form-label">Title (BN)</label>
                                    <input class="form-control" id="update_title_bn" name="title_bn" placeholder="Enter Title BN">
                                </div>

<!--                                <div class="d-flex mb-4 fv-row">
                                    <label class="form-check form-switch form-check-custom form-check-solid">
                                        <span class="required form-check-label fw-bold text-muted" style="margin-right: 10px; margin-left: 0px;">Status</span>
                                        <input type="hidden" name="status" value="0"> &lt;!&ndash; hidden input for unchecked value &ndash;&gt;
                                        <input class="form-check-input radio-btn" id="status" name="status" type="checkbox" value="1"/>
                                    </label>
                                    &lt;!&ndash;end::Switch&ndash;&gt;
                                </div>-->
                            </div>
                        </div>
                        <div class="d-flex justify-content-center">
                            <button type="submit" class="btn btn-primary rounded-btn">Save</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade custom-modal" tabindex="-1" id="kt_modal_subject_add">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header bg--primary text-white">
                    <h3 class="modal-title">Add Subject</h3>
                    <button type="button" class="btn btn-icon btn-sm btn-secondary modal-close-btn" data-bs-dismiss="modal" aria-label="Close">
                        <i class="las la-times"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="subject-add-form" action="{{ route("course.subject.store") }}" method="POST">
                        @csrf
                        <input type="hidden" name="institute_slug" value="{{ $institute_slug }}">
                        <input type="hidden" name="course_slug" value="{{ $course_slug }}">
                        <div class="row g-2 mb-4">
                            <div class="col-12">

                                <div class="form-group mb-4">
                                    <label class="form-label required">Group</label>
                                    @php
                                        $groups = \App\Models\Course\CourseGroup::where('institute_id', $course->institute_id)
                                                                                    ->where('course_id', $course->id)
                                                                                    ->where('status', 1)
                                                                                    ->get();
                                    @endphp
                                    <select id="course_group_id_add" class="form-control form-select-solid" data-control="select2" data-placeholder="Select a Group" name="course_group_id" required>
                                        <option selected disabled>Select Group</option>
                                        @foreach($groups as $group)
                                            <option value="{{$group->id}}"> {{$group->title}}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="form-group mb-4">
                                    <label for="title_en" class="form-label required">Title</label>
                                    <input class="form-control" id="subject_title_add" name="title" placeholder="Enter Title" required>
                                </div>

                                <div class="form-group mb-4">
                                    <label for="code" class="form-label required">Code</label>
                                    <input class="form-control" id="subject_code_add" name="code" placeholder="Enter Code" required>
                                </div>

                                <div class="form-group mb-4">
                                    <label for="credit" class="form-label required">Credit</label>
                                    <input type="number" class="form-control" id="subject_credit_add" name="credit" placeholder="Enter Credit" required>
                                </div>

                                <div class="form-group mb-4">
                                    <label for="prerequisite" class="form-label">Prerequisite</label>
                                    <input class="form-control" id="subject_prerequisite_add" name="prerequisite" placeholder="Enter Prerequisite">
                                </div>

                                <div class="d-flex mb-4 fv-row">
                                    <label class="form-check form-switch form-check-custom form-check-solid">
                                        <span class="required form-check-label fw-bold text-muted" style="margin-right: 10px;margin-left: 0px;">Status</span>
                                        <input class="form-check-input radio-btn" name="status" type="checkbox" value="1" checked/>
                                    </label>
                                    <!--end::Switch-->
                                </div>
                            </div>
                        </div>
                        <div class="d-flex justify-content-center">
                            <button type="submit" class="btn btn-primary rounded-btn">Save</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade custom-modal" tabindex="-1" id="kt_modal_subject_edit">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header bg--primary text-white">
                    <h3 class="modal-title">Edit Group</h3>
                    <button type="button" class="btn btn-icon btn-sm btn-secondary modal-close-btn" data-bs-dismiss="modal" aria-label="Close">
                        <i class="las la-times"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="subject-edit-form" action="{{ route("course.subject.update") }}" method="POST">
                        @csrf
                        <input type="hidden" name="id" id="edit-subject-id">
                        <input type="hidden" name="institute_slug" value="{{ $institute_slug }}">
                        <input type="hidden" name="course_slug" value="{{ $course_slug }}">
                        <div class="row g-2 mb-4">
                            <div class="col-12">

                                <div class="form-group mb-4">
                                    <label class="form-label required">Group</label>
                                    @php $groups = \App\Models\Course\CourseGroup::where('status', 1)->get(); @endphp
                                    <select id="subject_course_group_id" class="form-control form-select-solid" data-control="select2" data-placeholder="Select a Group" name="course_group_id" required>
                                        <option selected disabled>Select Group</option>
                                        @foreach($groups as $group)
                                            <option value="{{$group->id}}"> {{$group->title}}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="form-group mb-4">
                                    <label for="title_en" class="form-label required">Title</label>
                                    <input class="form-control" id="subject_title" name="title" placeholder="Enter Title" required>
                                </div>

                                <div class="form-group mb-4">
                                    <label for="code" class="form-label required">Code</label>
                                    <input class="form-control" name="code" id="subject_code" placeholder="Enter Code" required>
                                </div>

                                <div class="form-group mb-4">
                                    <label for="credit" class="form-label required">Credit</label>
                                    <input type="number" class="form-control" name="credit" id="subject_credit" placeholder="Enter Credit" required>
                                </div>

                                <div class="form-group mb-4">
                                    <label for="prerequisite" class="form-label">Prerequisite</label>
                                    <input class="form-control" name="prerequisite" id="subject_prerequisite" placeholder="Enter Prerequisite">
                                </div>

                                <div class="d-flex mb-4 fv-row">
                                    <label class="form-check form-switch form-check-custom form-check-solid">
                                        <span class="required form-check-label fw-bold text-muted" style="margin-right: 10px; margin-left: 0px;">Status</span>
                                        <input type="hidden" name="status" value="0"> <!-- hidden input for unchecked value -->
                                        <input class="form-check-input radio-btn" id="subject_status" name="status" type="checkbox" value="1"/>
                                    </label>
                                    <!--end::Switch-->
                                </div>
                            </div>
                        </div>
                        <div class="d-flex justify-content-center">
                            <button type="submit" class="btn btn-primary rounded-btn">Save</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('extra-extra-css')
    <link href="{{ asset('css/buttons.dataTables.min.css') }}" rel='stylesheet' type='text/css'>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <style>
        a.badge.text-capitalize:hover {
            color: #fff;
        }
    </style>
@endsection

@section('extra-extra-script')
    <script src="{{asset('js/jquery.dataTables.min.js')}}"></script>
    <script src="{{asset('js/dataTables.bootstrap4.min.js')}}"></script>
    <script src="{{asset('js/dataTables.buttons.min.js')}}"></script>
    <script src="{{asset('js/jszip.min.js')}}"></script>
    <script src="{{asset('js/pdfmake.min.js')}}"></script>
    <script src="{{asset('js/vfs_fonts.js')}}"></script>
    <script src="{{asset('js/buttons.html5.min.js')}}"></script>


    <script type="text/javascript">
        $(function () {
            var table = $('.group-data-table').DataTable({
                processing: true,
                serverSide: true,
                aaSorting: [],
                lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
                ajax: "{{ route('course.group',['institute_slug'=>$institute_slug,'course_slug'=>$course_slug]) }}",
                dom: 'Blfrtip',
                buttons: [
                    {
                        extend: 'pdf',
                        exportOptions: {
                            columns: [0, 1, 2, 3, 4] // Column index which needs to export
                        }
                    },
                    {
                        extend: 'csv',
                        exportOptions: {
                            columns: [0, 1, 2, 3, 4] // Column index which needs to export
                        }
                    },
                    {
                        extend: 'excel',
                        exportOptions: {
                            columns: [0, 1, 2, 3, 4] // Column index which needs to export
                        }
                    }
                ],
                columns: [
                    {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false},
                    {data: 'title', name: 'title'},
                    {data: 'title_bn', name: 'title_bn'},
                    {data: 'action', name: 'action'},
                ],
            });

        });

        $(function () {
            var table = $('.subject-data-table').DataTable({
                processing: true,
                serverSide: true,
                aaSorting: [],
                lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
                ajax: "{{ route('course.subject',['institute_slug'=>$institute_slug,'course_slug'=>$course_slug]) }}",
                dom: 'Blfrtip',
                buttons: [
                    {
                        extend: 'pdf',
                        exportOptions: {
                            columns: [0, 1, 2, 3, 4] // Column index which needs to export
                        }
                    },
                    {
                        extend: 'csv',
                        exportOptions: {
                            columns: [0, 1, 2, 3, 4] // Column index which needs to export
                        }
                    },
                    {
                        extend: 'excel',
                        exportOptions: {
                            columns: [0, 1, 2, 3, 4] // Column index which needs to export
                        }
                    }
                ],
                columns: [
                    {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false},
                    {data: 'group', name: 'group'},
                    {data: 'title', name: 'title'},
                    {data: 'code', name: 'code'},
                    {data: 'credit', name: 'credit'},
                    {data: 'prerequisite', name: 'prerequisite'},
                    {data: 'status', name: 'status'},
                    {data: 'action', name: 'action'},
                ],
            });

            $('#kt_modal_subject_add').on('shown.bs.modal', function () {
                $('#course_group_id_add').select2({
                    dropdownParent: $('#kt_modal_subject_add'),
                    placeholder: "Select a Group",
                    allowClear: true
                });
            });

            $('#kt_modal_subject_edit').on('shown.bs.modal', function () {
                $('#subject_course_group_id').select2({
                    dropdownParent: $('#kt_modal_subject_edit'),
                    placeholder: "Select a Group",
                    allowClear: true
                });
            });

        });

        function loadGroupAdd() {
            $('#kt_modal_group_add').modal('show');
        }

        function loadGroupEdit(id) {
            $.ajax({
                url: '{{url('/course-details/course/group-data')}}/' + id,
                method: 'GET',
                success: function (returnData) {
                    var data = returnData.data.groups;
                    $('#edit-id').val(data.id);
                    $('#update_title').val(data.title);
                    $('#update_title_bn').val(data.title_bn);
                    $('#status').prop('checked', data.status == 1);
                    $('#kt_modal_group_edit').modal('show');
                },
                error: function (xhr, status, error) {
                    // Handle error
                    console.error(xhr.responseText);
                }
            });
        }

        function loadSubjectAdd() {
            $.ajax({
                url: '{{ route('course.get-groups',['institute_slug'=>$institute_slug,'course_slug'=>$course_slug]) }}',
                method: 'GET',
                success: function(groups) {
                    console.log('group', groups)
                    let select = $('#course_group_id_add');
                    select.empty();
                    select.append('<option selected disabled>Select Course Group</option>');

                    groups.forEach(group => {
                        select.append('<option value="' + group.id + '">' + group.title + '</option>');
                    });

                    // Reinitialize Select2
                    select.select2();

                    // Show the modal
                    $('#kt_modal_subject_add').modal('show');
                },
                error: function() {
                    toastr.error('Failed to load groups');
                }
            });
            // $('#kt_modal_subject_add').modal('show');
        }

        function loadSubjectEdit(id) {
            $.ajax({
                url: `{{ route('course.get.subject', ['institute_slug' => $institute_slug, 'course_slug' => $course_slug, 'id' => 'ID_PLACEHOLDER']) }}`.replace('ID_PLACEHOLDER', id),
                method: 'GET',
                success: function (returnData) {
                    var subject = returnData.data.subject;
                    var groups = returnData.data.groups;

                    // Populate the select input with the groups
                    let select = $('#subject_course_group_id');
                    select.empty();
                    select.append('<option selected disabled>Select Course Group</option>');

                    groups.forEach(group => {
                        select.append('<option value="' + group.id + '">' + group.title + '</option>');
                    });

                    // Reinitialize Select2
                    select.select2();

                    // Set the form fields with the subject data
                    $('#edit-subject-id').val(subject.id);
                    $('#subject_course_group_id').val(subject.course_group_id).trigger('change');
                    $('#subject_title').val(subject.title);
                    $('#subject_code').val(subject.code);
                    $('#subject_credit').val(subject.credit);
                    $('#subject_prerequisite').val(subject.prerequisite);
                    $('#subject_status').prop('checked', subject.status == 1);

                    // Show the modal
                    $('#kt_modal_subject_edit').modal('show');
                },
                error: function (xhr, status, error) {
                    console.error(xhr.responseText);
                    toastr.error('Failed to load subject');
                }
            });
        }

        function deleteGroup(id) {
            if (confirm('Are you sure you want to delete this group? All the subjects under this group will be deleted.')){
                $.ajax({
                    url: '{{url('/course-details/course/delete-group-data')}}/' + id,
                    method: 'GET',
                    success: function(returnData) {
                        $('.group-data-table').DataTable().ajax.reload( null, false );
                        $('.subject-data-table').DataTable().ajax.reload( null, false );
                        toastr.success('Group and Subjects Deleted Successfully!');
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr.responseText);
                    }
                });
            }
        }

        function deleteSubject(id) {
            if (confirm('Are you sure you want to delete this subject?')){
                $.ajax({
                    url: '{{url('/course-details/course/delete-subject-data')}}/' + id,
                    method: 'GET',
                    success: function(returnData) {
                        $('.subject-data-table').DataTable().ajax.reload( null, false );
                        toastr.success('Subject Deleted Successfully!');
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr.responseText);
                    }
                });
            }
        }
    </script>
    <script type="text/javascript">
        $(document).ready(function() {

            $('#group-add-form').submit(function(event) {
                event.preventDefault();
                var formData = $(this).serialize();
                var form = $(this);
                $.ajax({
                    url: $(this).attr('action'),
                    method: 'POST',
                    data: formData,
                    success: function(response) {
                        $('#kt_modal_group_add').modal('hide');
                        $('.group-data-table').DataTable().ajax.reload( null, false );
                        toastr.success('New Group Added Successfully!');
                        $('#title').val('');
                        $('#title_bn').val('');
                        // form.find('input, select, textarea').val('');
                        refreshCsrfToken();
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr.responseText);
                        try {
                            const responseObject = JSON.parse(xhr.responseText);
                            if (responseObject.code === 403) {
                                toastr.error(responseObject.message);
                            } else {
                                toastr.error('Failed to add. Please try again later.');
                            }
                        } catch (error) {
                            toastr.error('Failed to add. Please try again later.');
                        }
                    }
                });
            });

            $('#subject-add-form').submit(function(event) {
                event.preventDefault();
                var formData = $(this).serialize();
                var form = $(this);
                $.ajax({
                    url: $(this).attr('action'),
                    method: 'POST',
                    data: formData,
                    success: function(response) {
                        $('#kt_modal_subject_add').modal('hide');
                        $('.subject-data-table').DataTable().ajax.reload( null, false );
                        toastr.success('New Subject Added Successfully!');
                        //null selector
                        $('#course_group_id_add').val(null).trigger('change');
                        $('#subject_title_add, #subject_code_add, #subject_credit_add, #subject_prerequisite_add').val('');
                        // form.find('input, select, textarea').val('');
                        refreshCsrfToken();
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr.responseText);
                        toastr.error('Failed to add. Please try again later.');
                    }
                });
            });


            $('#group-edit-form').submit(function(event) {
                event.preventDefault();
                var formData = $(this).serialize();
                $.ajax({
                    url: $(this).attr('action'),
                    method: 'POST',
                    data: formData,
                    success: function(response) {
                        $('#kt_modal_group_edit').modal('hide');
                        $('.group-data-table').DataTable().ajax.reload( null, false );
                        toastr.success('Group Updated Successfully!');
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr.responseText);
                        toastr.error('Failed to update. Please try again later.');
                    }
                });
            });

            $('#subject-edit-form').submit(function(event) {
                event.preventDefault();
                var formData = $(this).serialize();
                $.ajax({
                    url: $(this).attr('action'),
                    method: 'POST',
                    data: formData,
                    success: function(response) {
                        $('#kt_modal_subject_edit').modal('hide');
                        $('.subject-data-table').DataTable().ajax.reload( null, false );
                        toastr.success('Subject Updated Successfully!');
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr.responseText);
                        toastr.error('Failed to update. Please try again later.');
                    }
                });
            });
        });

        function refreshCsrfToken() {
            $.get('