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


<style>
    .table-bordered {
        margin: 0;
        padding: 0;
    }

    .table-bordered th,
    .table-bordered td {
        text-align: center;
        vertical-align: middle;
    }
</style>


<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-title">
                            <h2>{!! $data['pageTitle'] !!} List</h2>
                        </div>
                        <a type="button" href="{{ url('eims/examination/exam/academic/subject-wise-mark-submission/create') }}"
                            class="btn btn-info pull-right addViewBtn"><i
                                class="glyphicon glyphicon-plus-sign addIcon"></i>Add {{ $data['pageTitle'] }}</a>

                    </div>


                    <div class="panel-body panelBodyView">

                        @php
                        if ($data['companyType'] == 'UNV') {
                        $searchElements[] = ['element' => 'fillFacultyId'];
                        }
                        $searchElements[] = ['element' => 'fillProgramId'];
                        $searchElements[] = ['element' => 'fillSessionId'];
                        $searchElements[] = ['element' => 'fillSemesterClassId'];
                        if ($data['companyType'] == 'SCL' || $data['companyType'] == 'CLG') {
                        $searchElements[] = ['element' => 'fillSemesterClassGroupId'];
                        }
                        @endphp
                        @include('partials.searchPanel.main', ['searchElements' => $searchElements])


                        <table class="table table-striped table-bordered table-condensed first-col-dark" id="datatable"
                            style="width:100%">

                            <thead>
                                <tr>
                                    <th width="30">SL#</th>
                                    <th class="text-center text-nowrap">Class Name</th>
                                    <th class="text-center text-nowrap">Config Name</th>
                                    <th class="text-center text-nowrap">Program / Media Name</th>
                                    <th class="text-center text-nowrap">Exam Name</th>
                                    <th class="text-center text-nowrap">Created By</th>
                                    <th class="text-center text-nowrap">Action</th>
                                </tr>
                            </thead>
                        </table>

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


<script type="text/javascript">
    $(document).ready(function() {
        const dataTable = $('#datatable').DataTable({
            "sDom": "ltipr", // For removing 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": "semester_class_id",
                    className: "text-align-center"
                },
                {
                    "data": "exam_mark_config_id",
                    className: "text-align-center"
                },
                {
                    "data": "program_medium_id",
                    className: "text-align-center"
                },
                {
                    "data": "academic_exam_name_activites_id",
                    className: "text-align-center"
                },
                {
                    "data": "created_by",
                    className: "text-align-center"
                },
                {
                    "data": "id",
                    className: "text-align-center text-nowrap"
                },
            ],
            "columnDefs": [{
                "targets": -1,
                "data": null,
                "render": function(data, type, row) {
                    return `
                            <button
                                style="cursor: pointer;"
                                data-program-medium-id="${encodeURIComponent(row.program_medium_id_val)}"
                                data-session-id="${encodeURIComponent(row.session_id)}"
                                data-semester-class-id="${encodeURIComponent(row.semester_class_id_val)}"
                                data-academic-exam-id="${encodeURIComponent(row.academic_exam_val)}"
                                data-academic-exam-activities-id="${encodeURIComponent(row.academic_exam_name_activites_val)}"
                                data-course-subject-id="${encodeURIComponent(row.course_subject_val)}"
                                data-course-subject-type-id="${encodeURIComponent(row.course_subject_type_val)}"
                                class="btn btn-xs btn-info viewDetails">
                                <i class="fa fa-eye" aria-hidden="true"></i>
                            </button>`;
                },
                "orderable": false,
                "searchable": false
            }]
        });



        $(document).on('click', '.viewDetails', function() {
            const semesterClassId = $(this).data('semester-class-id');
            const appendedClass = `appended-rows-${semesterClassId}`;
            const parentRow = $(this).closest('tr');
            const button = $(this);
            const icon = button.find('i');

            if ($(`.${appendedClass}`).length > 0) {


                console.log($(`.${appendedClass}`).length);


                // Toggle visibility of appended rows
                $(`.${appendedClass}`).toggle();
                // Toggle icon between eye and remove
                if ($(`.${appendedClass}`).is(':visible')) {
                    icon.removeClass('fa-eye').addClass('fa-remove');
                } else {
                    icon.removeClass('fa-remove').addClass('fa-eye');
                }
            } else {
                // Change icon to remove during AJAX call
                icon.removeClass('fa-eye').addClass('fa-remove');

                // Send data to the server via AJAX (POST request)
                $.ajax({
                    url: `{{ route('eims_academic_exam_subject_marks_submission_subject_row') }}`,
                    type: 'POST',
                    data: {
                        semester_class_id: semesterClassId,
                        program_medium_id: button.data('program-medium-id'),
                        session_id: button.data('session-id'),
                        academic_exam_id: button.data('academic-exam-id'),
                        academic_exam_activities_id: button.data('academic-exam-activities-id'),
                        course_subject_id: button.data('course-subject-id'),
                        course_subject_type_id: button.data('course-subject-type-id'),
                        _token: $('meta[name="csrf-token"]').attr('content') // CSRF Token
                    },
                    success: function(response) {
                        const subjectData = response.data || [];
                        let appendedRow = `
                            <tr class="${appendedClass}">
                                <td colspan="12">
                                    <table class="table table-bordered" style="margin-bottom: 0;">
                                        <tbody>`;
                        subjectData.forEach((item, index) => {
                            appendedRow += `
                                <tr>
                                    ${index === 0 ? `<td style="text-align:center;width:40%;" rowspan="${subjectData.length}">Subject Details:</td>` : ''}
                                    <td style="text-align:center;width:20%;">${item.subjectCode} - ${item.subjectName}</td>
                                    <td style="text-align:center;width:21%;">${item.participantStudentCount} (Students participate)</td>
                                    <td style="text-align:center;width:9%;">${item.action}</td>
                                </tr>`;
                        });
                        appendedRow += `
                                        </tbody>
                                    </table>
                                </td>
                            </tr>`;
                        parentRow.after(appendedRow);
                    },
                    error: function(xhr, status, error) {
                        console.log('Error fetching data:', error);
                        // Revert icon back to eye in case of error
                        icon.removeClass('fa-remove').addClass('fa-eye');
                    }
                });
            }
        });



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

            dataTable.ajax.reload();
        })



        //delete function
        $(document).on('click', '.delete-action', function() {
            if (hasAccess('eims/examination/exam/academic/mark-submission/delete')) {
                Swal.fire({
                    title: 'Are you sure?',
                    text: "Once deleted, 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) {
                        const programMediumId = $(this).data('program-medium-id');
                        const sessionId = $(this).data('session-id');
                        const semesterClassId = $(this).data('semester-class-id');
                        const academicExamActivitiesId = $(this).data('academic-exam-activities-id');
                        const academicExamId = $(this).data('academic-exam-id');
                        const academicExamSubjectId = $(this).data('academic-exam-subject-id');


                        $.ajax({
                            type: 'POST',
                            url: '{{ Request::url() }}/delete',
                            data: {
                                '_token': $('input[name=_token]').val(),
                                'program_medium_id': programMediumId,
                                'session_id': sessionId,
                                'semester_class_id': semesterClassId,
                                'academic_exam_activities_id': academicExamActivitiesId,
                                'academic_exam_id': academicExamId,
                                'academic_exam_subject_id': academicExamSubjectId,
                            },
                            success: function(response) {
                                if (response.responseStatus === 'success') {
                                    Swal.fire({
                                        icon: response.responseStatus,
                                        title: response.responseTitle,
                                        text: response.responseText,
                                        showConfirmButton: false,
                                        timer: 1500
                                    });
                                    dataTable.ajax.reload();
                                } else {
                                    Swal.fire({
                                        icon: response.responseStatus,
                                        title: response.responseTitle,
                                        text: response.responseText,
                                        showConfirmButton: true
                                    });
                                }
                            }
                        });
                    }
                });
            } else {
                Swal.fire({
                    icon: 'error',
                    title: 'Failed to delete!',
                    text: 'Access Denied',
                    showConfirmButton: true
                });
            }
        });

    });
</script>




@endsection