@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="{{ route('eims_academic_exam_seat_plan_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' => 'fillAcademicExamId'];

                        @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">Program / Medium Name</th>
                                    <th class="text-center text-nowrap">Session Name</th>
                                    <th class="text-center text-nowrap">Exam Name</th>
                                    <th class="text-center text-nowrap">Exam Date</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": "program_medium_id",
                    className: "text-align-center"
                },
                {
                    "data": "session_name",
                    className: "text-align-center"
                },
                {
                    "data": "academic_exam_name_activites_id",
                    className: "text-align-center"
                },
                {
                    "data": "academic_exam_date",
                    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-id="${encodeURIComponent(row.id)}"
                                data-program-medium-id="${encodeURIComponent(row.program_medium_id_val)}"
                                data-session-id="${encodeURIComponent(row.session_id)}"
                                data-academic-exam-activities-id="${encodeURIComponent(row.academic_exam_name_activites_val)}"
                                data-academic-exam-date="${encodeURIComponent(row.academic_exam_date_val)}"
                                data-academic-exam-routine-date="${encodeURIComponent(row.academic_exam_routine_date_val)}"


                                class="btn btn-xs btn-info viewDetails">
                                <i class="fa fa-eye" aria-hidden="true"></i>
                            </button>
                            
                            

                    

                        <a 
                        href="{{route("eims_academic_exam_seat_plan_edit")}}?
                        program_medium_id=${encodeURIComponent(row.program_medium_id_val)}&session_id=${encodeURIComponent(row.session_id)}
                        &academic_exam_id=${encodeURIComponent(row.academic_exam_id)}
                        &academic_exam_activities_id=${encodeURIComponent(row.academic_exam_name_activites_val)}
                        &academic_exam_routine_date=${encodeURIComponent(row.academic_exam_routine_date_val)}
                        &academic_exam_date=${encodeURIComponent(row.academic_exam_date_val)}" 
                        class="btn btn-xs btn-info edit-action"><i class="fa fa-edit" aria-hidden="true"></i>
                        </a>





                        <button 
                            data-program-medium-id="${encodeURIComponent(row.program_medium_id_val)}"
                            data-session-id="${encodeURIComponent(row.session_id)}"
                            data-academic-exam-activities-id="${encodeURIComponent(row.academic_exam_name_activites_val)}"
                            data-academic-exam-date="${encodeURIComponent(row.academic_exam_date_val)}"
                            class="btn btn-xs btn-danger delete-action">
                            <i class="fa fa-trash" aria-hidden="true"></i>
                        </button>

                            `;
                },
                "orderable": false,
                "searchable": false
            }]
        });



        $(document).on('click', '.viewDetails', function() {
            const rowId = $(this).data('id');
            const academicExamActivitiesId = $(this).data('academic-exam-activities-id');
            const appendedRowId = `appended-rows-${rowId}`;
            const parentRow = $(this).closest('tr');
            const button = $(this);
            const icon = button.find('i');

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

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

                // Toggle visibility of appended rows
                $(`.${appendedRowId}`).toggle();
                // Toggle icon between eye and remove
                if ($(`.${appendedRowId}`).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_seat_plan_details_row') }}`,
                    type: 'POST',
                    data: {
                        program_medium_id: button.data('program-medium-id'),
                        session_id: button.data('session-id'),
                        academic_exam_activities_id: button.data('academic-exam-activities-id'),
                        academic_exam_date: button.data('academic-exam-date'),
                        academic_exam_routine_date: button.data('academic-exam-routine-date'),




                        _token: $('meta[name="csrf-token"]').attr('content') // CSRF Token
                    },
                    success: function(response) {
                        const subjectData = response.data || [];
                        let appendedRow = `
                            <tr class="${appendedRowId}">
                                <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:10%;" rowspan="${subjectData.length}">${item.academicExamDate} <br> (${item.activityExamName})</td>` : ''}

                                    <td style="text-align:center;width:10%;">${item.building.building_no}-${item.building.name}</td>
                                    <td style="text-align:center;width:10%;">${item.floor.floor_no}-${item.floor.name}</td>
                                    <td style="text-align:center;width:10%;">${item.room.room_no} - ${item.room.name}</td>
                                    <td style="text-align:center;width:10%;">Class: ${item.class.name}</td>
                                    <td style="text-align:center;width:30%;">Student ID: (${item.studentRange})</td>
                                    <td style="text-align:center;width:10%;">Student Quantity: ${item.studentQuantity}</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', function() {
            if (hasAccess('eims/examination/exam/academic/seat-plan/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(),
                                'program_medium_id': $(this).data('program-medium-id'),
                                'session_id': $(this).data('session-id'),
                                'academic_exam_activities_id': $(this).data('academic-exam-activities-id'),
                                'academic_exam_date': $(this).data('academic-exam-date')
                            },
                            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,
                })
            }
        });



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

            dataTable.ajax.reload();
        })


    });
</script>




@endsection