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

@include('successMsg')

<style>
    .searchButton {
        padding-top: 1.2% !important;
    }
</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/academic/routine/course-class/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">

                    <!-- filtering -->
                    @php
                    $options = ['' => 'Select any'];

                    $searchElements = [
                    ['element' => 'fillProgramId'],
                    ['element' => 'fillSessionId'],
                    ['element' => 'fillSemesterClassId'],
                    ['element' => 'fillSectionId'],
                    ['element' => 'fillShiftId'],
                    ];

                    // Conditionally add 'semester_class_group_id' for 'SCL' companyType
                    if ($data['companyType'] == 'SCL') {
                    array_splice($searchElements, 3, 0, [['element' => 'fillSemesterClassGroupId']]);
                    }
                    // Conditionally add 'semester_class_group_id' for 'SCL' companyType
                    if ($data['companyType'] == 'CLG') {
                    array_splice($searchElements, 3, 0, [['element' => 'fillSemesterClassGroupId']]);
                    }

                    // Conditionally add 'faculty_id' for 'UNV' companyType at the beginning
                    if ($data['companyType'] == 'UNV') {
                    array_unshift($searchElements, ['element' => 'fillFacultyId']); // Adds 'faculty_id' at the beginning
                    }
                    @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">
                                    {{ $data['companyType'] == 'SCL' ? 'Medium/Version Name' : 'Program Name' }}
                                </th>
                                <th class="text-center text-nowrap">Session Name</th>
                                <th class="text-center text-nowrap">
                                    {{ $data['companyType'] == 'SCL' ? 'Class Name' : 'Semester 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 class="footerTitle" style="border-top:1px solid white"></div> -->
        </div>
        </div>
        </div>
    </div>
</div>


<script type="text/javascript">
    $(document).ready(function() {
        var companyType = "{{ $data['companyType'] }}";


        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_id",
                    className: "text-align-center"
                },
                {
                    "data": "session_id",
                    className: "text-align-center"
                },
                {
                    "data": "semester_class_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) {
                    var html = '';

                    html += `
                            <button
                                style="cursor: pointer;" 
                                data-program-medium-id="${encodeURIComponent(row.program_medium_id_val)}" 
                                data-session-id="${encodeURIComponent(row.session_id_val)}" 
                                data-semester-class-id="${encodeURIComponent(row.semester_class_id_val)}" 
                                data-section-id="${encodeURIComponent(row.section_id_val)}" 
                            
                                class="btn btn-xs btn-info viewDetails">
                                <i class="fa fa-eye" aria-hidden="true"></i>
                            </button>

                    `;

                    html += `<button
                    data-id="${data}" 
                     data-program-medium-id="${encodeURIComponent(row.program_medium_id_val)}" 
                     data-session-id="${encodeURIComponent(row.session_id_val)}" 
                     data-semester-class-id="${encodeURIComponent(row.semester_class_id_val)}" 
                    class="btn btn-xs btn-danger delete-action-group">
                    <i class="fa fa-trash" aria-hidden="true"></i>
                </button>`;
                    return html;
                }
            }]

        });

        $("#searchForm").submit(function(e) {
            e.preventDefault();
            datatable.draw();
        });




        $(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');


            //console.log(semesterClassId, 'class nam'));




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




                // 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_course_class_routine_row') }}`,
                    type: 'POST',
                    data: {
                        semester_class_id: semesterClassId,
                        program_medium_id: button.data('program-medium-id'),
                        session_id: button.data('session-id'),
                        section_id: button.data('section-id'),
                        _token: $('meta[name="csrf-token"]').attr('content') // CSRF Token
                    },
                    success: function(response) {
                        const classRoutineDataSectionWise = response.data || [];
                        let appendedRow = `
                            <tr class="${appendedClass}">
                                <td colspan="12">
                                    <table class="table table-bordered" style="margin-bottom: 0;">
                                        <tbody>`;
                        classRoutineDataSectionWise.forEach((item, index) => {
                            appendedRow += `
                                <tr>
                                    ${index === 0 ? `<td style="text-align:center;width:30%;" rowspan="${classRoutineDataSectionWise.length}">Class Routine Details:</td>` : ''}
                                    <td style="text-align:center;width:20%;">Section: ${item.classSemesterSectionName}</td>
                                    <td style="text-align:center;width:20%;">Group: ${item.classSemesterGroupName}</td>
                                    <td style="text-align:center;width:20%;">${item.classSemesterShiftName}</td>


                                    <td style="text-align:center;width:10%;">${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');
                    }
                });
            }
        });



       //delete function
       $(document).on('click', '.delete-action-group', function() {
            if (hasAccess('eims/academic/routine/course-class/delete-group')) {
                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-group',
                            data: {
                                '_token': $('input[name=_token]').val(),
                                'id': $(this).data('id'),
                                'program_id': $(this).data('program-medium-id'),
                                'session_id': $(this).data('session-id'),
                                'semester_class_id': $(this).data('semester-class-id'),

                            },
                            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,
                })
            }
        });







        //delete function
        $(document).on('click', '.delete-action-single', function() {
            if (hasAccess('eims/academic/routine/course-class/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 rowId = $(this).data('row-id');                    
                        $.ajax({
                            type: 'POST',
                            url: '{{ Request::url() }}/delete',
                            data: {
                                '_token': $('input[name=_token]').val(),
                                'row_id': rowId,
                            },
                            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
                });
            }
        });

        $("input").keyup(function() {
            var name = $("#name").val();
            if (name) {
                $('#namee').hide();
            } else {
                $('#namee').show();
            }
        });

    });
</script>


@endsection