@extends('layouts/eims_layout')
@section('title', '| ' . $data['pageTitle'])
@section('content')
@include('successMsg')

<div class="row page-wrap">
    <div class="col-md-12">
        <div class="" style="">
            <div class="">
                <div class="panel panel-default" style="background-color:#708090;">
                    <div class="panel-heading" style="padding-bottom:0px">
                        <div class="panel-options">
                            <a href="{{ url('eims/academic/assign-class-teacher/create') }}"
                                class="btn btn-info pull-right addViewBtn"><i
                                    class="glyphicon glyphicon-plus-sign addIcon"></i>Add {{ $data['pageTitle'] }}</a>
                        </div>
                        <h1 align="center" style="font-family: Antiqua;letter-spacing: 2px">
                            <font color="white">{{ $data['pageTitle'] }} List</font>
                        </h1>
                    </div>
                    <div class="panel-body panelBodyView">
                        
                    @php
                        if ($data['companyType'] == 'UNV') {
                        $searchElements[] = ['element' => 'fillFacultyId'];
                        }
                        $searchElements[] = ['element' => 'fillProgramId'];
                        $searchElements[] = ['element' => 'fillSessionId'];
                        $searchElements[] = ['element' => 'fillSemesterClassId'];
                        $searchElements[] = ['element' => 'fillSectionId'];

                        @endphp
                        @include('partials.searchPanel.main', ['searchElements' => $searchElements])



                        <table class="table table-striped table-bordered table-condensed first-col-dark" id="datatable">
                            <thead>
                                <tr>
                                    <th width="30">SL#</th>

                                    <th class="text-center text-nowrap">Program Name</th>
                                    <th class="text-center text-nowrap">Session Name</th>
                                    <th class="text-center text-nowrap">Class Name</th>
                                    <th class="text-center text-nowrap">Class Group Name</th>
                                    <th class="text-center text-nowrap">Section Name</th>
                                    <th class="text-center text-nowrap">Class Teacher Name</th>
                                    <th class="text-center text-nowrap">Created By</th>
                                    <th class="text-center text-nowrap">Action</th>
                                </tr>
                            </thead>
                            <tbody id="tableBodySection">

                            </tbody>
                        </table>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript">
    $(document).ready(function() {

        // update semester_class_group list on semester/class change
        $('#program_id').change(function() {
            var program_id = $(this).val();

            if (program_id) {
                $.ajax({
                    type: 'post',
                    url: `{{ route('eims_faculty_department_program_session_semester_section_course_subject_option_change') }}`,
                    data: {
                        program_id: program_id
                    },
                    dataType: 'json',
                    success: function(_response) {
                        $("#semester_class_id").empty();
                        if (companyType === 'UNV') {
                            $("#semester_class_id").prepend(
                                '<option selected="selected" value="">Please select semester</option>'
                            );
                        } else if (companyType === 'SCL') {
                            $("#semester_class_id").prepend(
                                '<option selected="selected" value="">Please select class</option>'
                            );
                        } else {
                            $("#semester_class_id").prepend(
                                '<option selected="selected" value="">Please select class</option>'
                            );
                        }

                        $.each(_response, function(key, value) {
                            {
                                if (key ==
                                    "semesterClassListByProgramChange") {
                                    $.each(value, function(index, result) {
                                        $('#semester_class_id')
                                            .append(
                                                "<option value='" + result
                                                .id +
                                                "'>" + result.name +
                                                "</option>"
                                            );
                                    });
                                }

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

        hideErrorMessage();
        const dataTable = $('#datatable').DataTable({
            "sDom": "ltipr", // For removeing default Search bar //
            "processing": true,
            "serverSide": true,
            "ordering": false,
            "ajax": {
                "url": "{{ Request::url() }}",
                "type": "POST",
                "beforeSend": function() {
                    $('#loadingModal').show();
                },
                "data": function(d) {
                    var inputs = {};
                    $.each($('#searchForm').serializeArray(), function() {
                        inputs[this.name] = this.value;
                    });
                    d.filter = inputs;
                }
            },
            "drawCallback": function(settings) {
                $('#loadingModal').hide();
            },

            "columns": [{
                    "data": "sl"
                },

                {
                    "data": "program_medium_id",
                    className: "text-align-center"
                },

                {
                    "data": "session_id",
                    className: "text-align-center"
                },
                {
                    "data": "semester_class_id",
                    className: "text-align-center"
                },
                {
                    "data": "semester_class_group_id",
                    className: "text-align-center"
                },
                {
                    "data": "section_id",
                    className: "text-align-center"
                },
                {
                    "data": "class_teacher_id",
                    className: "text-align-center"
                },
                {
                    "data": "created_by",
                    className: "text-align-center"
                },
                {
                    "data": "id",
                    className: "text-align-center text-nowrap"
                }
            ],

            "columnDefs": [{
                "targets": -1,
                "data": "id",
                "render": function(data, type, row, meta) {
                    console.log('data  ', data, row);
                    return `                    
                        <a 
                        href="{{route("eims_class_teacher_assign_edit")}}?
                        row_id=${encodeURIComponent(row.id)}
                        &program_medium_id=${encodeURIComponent(row.program_medium_id_val)}
                        &session_id=${encodeURIComponent(row.session_id_val)}
                        &semester_class_id=${encodeURIComponent(row.semester_class_id_val)}"
                        class="btn btn-xs btn-info edit-action"><i class="fa fa-edit" aria-hidden="true"></i>
                        </a>

                        <a href="javascript:;" data-id="${row.id}" 
                        class="btn btn-xs btn-danger delete-action"><i class="fa fa-trash" aria-hidden="true"></i></a>
                      `;
                }
            }]
        });

        //delete function
        $(document).on('click', '.delete-action', function() {
            if (hasAccess('eims/academic/assign-class-teacher/delete')) {
                Swal.fire({
                    title: 'Are you sure?',
                    text: "Once delete you won't be able to revert this!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#7e7979',
                    confirmButtonText: 'Yes, delete it!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            type: 'post',
                            url: '{{ Request::url() }}/delete',
                            data: {
                                '_token': $('input[name=_token]').val(),
                                'id': $(this).data('id')
                            },
                            success: function(_response) {

                                if (_response.responseTitle == 'success') {
                                    Swal.fire({
                                        icon: 'success',
                                        title: 'Deleted!',
                                        text: 'This data has been deleted.',
                                        showConfirmButton: false,
                                        timer: 1500
                                    })
                                    dataTable.ajax.reload();

                                } else {
                                    Swal.fire({
                                        icon: 'error',
                                        title: 'Failed to delete!',
                                        text: 'This data has not been deleted.',
                                        showConfirmButton: true,
                                    })
                                }
                            }
                        });
                    }
                })
            } else {
                Swal.fire({
                    icon: 'error',
                    title: 'Failed to delete!',
                    text: 'Access Denied',
                    showConfirmButton: true,
                })
            }
        });

        $('#searchForm').on('submit', function(element) {
            element.preventDefault();

            dataTable.ajax.reload();
        })

    }); //ready function end

    function hideErrorMessage() {

        $("input").keyup(function() {
            var inputValue = $(this).val();
            var inputId = $(this).attr('id');
            // console.log(inputId);

            if (inputValue) {
                $('#' + inputId + 'e').hide();
            } else {
                $('#' + inputId + 'e').show();
            }
        });

        $("select").change(function() {
            var selectedValue = $(this).val();
            var elementId = $(this).attr('id');
            // console.log(elementId);
            if (selectedValue) {
                $('#' + elementId + 'e').hide();
            } else {
                $('#' + elementId + 'e').show();
            }
        });
    }

    function setErrorsText(errors) {
        $.each(errors, function(key, value) {
            let id = '';
            if (key.includes('.')) {
                id = key.slice(key.indexOf('.') + 1);
                if (id.includes('.')) {
                    const subjectId = id.slice(0, id.indexOf('.'));
                    const configId = id.slice(id.indexOf('.') + 1);
                    id = subjectId + '_' + configId;
                }
                key = key.slice(0, key.indexOf('.'));
                // console.log(('#' + key + 'e.'+ id),value);
                $('#' + key + 'e.' + id).empty().show().append(`<span class="errormsg" style="color:red;">${value}</span>`);
            } else {

                $('#' + key + 'e').empty().show().append('<span class="errormsg" style="color:red;">' + value +
                    '</span>');

            }




        });
    }

</script>
@endsection