@extends('admin.masterv2')

@section('styleSheet')
    <!-- BEGIN PAGE LEVEL STYLES -->
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/plugins/datatables/dataTables.bootstrap5.css') }}" />
    <!-- END PAGE LEVEL STYLES -->
    <style>
        #loader {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 9999;
}
    </style>
@endsection
@section('content')

    <div class="page-content-wrapper">
        <div class="page-content">
            @include('admin.includesV2.adminHeader', 
                [
                    'pageRoute' => route('getAuditLogData'), 
                    'pageName' => 'Payment Details List',
                    'pageHeader'=> 'Payment Details Info',
                ])

            <!-- END PAGE HEADER-->
            <!-- BEGIN PORTLET-->
            <div class="adminContent">
                <div class="row">
                    <div class="col">
                        <!-- Bootstrap Nav Tabs -->
                        <ul class="nav nav-tabs" id="myTab" role="tablist">
                            @php
                                $firstOccurance = true; // Initialize the flag
                            @endphp
                            @if(in_array("*",$userPrivileges))
                              <li class="nav-item" role="presentation">
                                <a class="nav-link {{ $firstOccurance ? 'active' : '' }}" id="tabAll-tab" data-bs-toggle="tab" href="#tabAll" role="tab">Tab All</a>
                              </li>
                                @php
                                    $firstOccurance = false; // Initialize the flag
                                @endphp
                            @endif

                            @foreach($courseTypes as $key=>$course)
                                @if(in_array("*",$userPrivileges) || in_array("RA",$userPrivileges))
                                    @if(in_array("*",$userPrivileges) || in_array("COURSE_TYPE_".$key,$userPrivileges))
                                      <li class="nav-item" role="presentation">
                                        <a class="nav-link {{ $firstOccurance ? 'active' : '' }}" id="tab{{$key}}-tab" data-bs-toggle="tab" href="#tab{{$key}}" role="tab">{{$course}}</a>
                                      </li>
                                        @php
                                            $firstOccurance = false; // Initialize the flag
                                        @endphp
                                    @endif
                                @endif
                            @endforeach
                        </ul>

                        <!-- Tab Panes -->
                        <div class="tab-content">
                            @php
                                $firstOccurance = true; // Initialize the flag
                            @endphp
                            @if(in_array("*",$userPrivileges))
                                <div class="tab-pane fade {{ $firstOccurance ? 'show active' : '' }}" id="tabAll" role="tabpanel">
                                    <table id="datatableAll" class="custom table table-bordered paymentReportTable">
                                      <thead>
                                        <tr>
                                          <th>Application ID</th>
                                          <th class="text-center">Student ID</th>
                                          <th>Date</th>>
                                          <th>Course</th>
                                          <th>Course Fee</th>
                                          <th>Paid</th>
                                          <th>Name</th>
                                          <th>Email</th>
                                          <th>Phone</th>
                                          <th>Address</th>
                                        </tr>
                                      </thead>
                                    </table>
                                </div>
                                @php
                                    $firstOccurance = false; // Initialize the flag
                                @endphp
                            @endif

                            @foreach($courseTypes as $key=>$course)
                                @if(in_array("*",$userPrivileges) || in_array("RA",$userPrivileges))
                                    @if(in_array("*",$userPrivileges) || in_array("COURSE_TYPE_".$key,$userPrivileges))
                                        <div class="tab-pane fade {{ $firstOccurance ? 'show active' : '' }}" id="tab{{$key}}" role="tabpanel">
                                            <table id="datatable{{$key}}" class="table table-bordered paymentReportTable">
                                              <thead>
                                                <tr>
                                                    <th>Application Id</th>
                                                    <th class="text-center">Student ID</th>
                                                    <th>Date</th>
                                                    <th>Course</th>
                                                    <th>Course Fee</th>
                                                    <th>Paid</th>
                                                    <th>Name</th>
                                                    <th>Email</th>
                                                    <th>Phone</th>
                                                    <th>Address</th>
                                                </tr>
                                              </thead>
                                            </table>
                                        </div>
                                        @php
                                    $firstOccurance = false; // Initialize the flag
                                @endphp
                                    @endif
                                @endif
                            @endforeach
                        </div>

                            <!-- Loader -->
                        <div id="loader" style="display: none;">Loading...</div>

                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('customJs')
<script type="text/javascript" src="{{ asset('assets/plugins/datatables/dataTables.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/plugins/datatables/dataTables.bootstrap5.js') }}"></script>

<script type="text/javascript" src="{{ asset('assets/plugins/datatables/dataTables.buttons.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/plugins/datatables/buttons.dataTables.js') }}"></script>

<script type="text/javascript" src="{{ asset('assets/plugins/ajaxlibs/jszip/jszip.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/plugins/ajaxlibs/pdfmake/pdfmake.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/plugins/ajaxlibs/pdfmake/vfs_fonts.js') }}"></script>

<script type="text/javascript" src="{{ asset('assets/plugins/datatables/buttons.html5.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/plugins/datatables/buttons.print.min.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.43/moment-timezone-with-data.min.js"></script>
<script>
$(document).ready(function() {

        // Custom title and button class for export buttons
    var customTitle = 'Course Registration Report';
    var customClass = 'btn btn-warning btn-sm';
    const appTimezone = "{{ config('app.timezone') }}";
    console.log(appTimezone); 
    // DataTables configuration with export buttons
    function initDataTable(tableId, ajaxUrl) {
        return $(tableId).DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: ajaxUrl,
                type: 'GET',
                data: function(d) {
                    d.search = d.search.value; // Send the search value to the server
                },
                beforeSend: function() {
                    $('#loader').show();  // Show loader before sending the request
                },
                complete: function() {
                    $('#loader').hide();  // Hide loader when the request is complete
                }
            },
            columns: [
                { 
                    data: 'formDataId',
                    render: function(data, type, row, meta) {
                        // Use both studentId (data) and studentEmail (row.studentEmail) in the link
                        return '<a href="/admin/report-application-details/' + row.formDataId  + '" target="_blank">' + data + '</a>';
                    },
                },
                { 
                    data: 'formStudentId',
                    render: function(data, type, row, meta) {
                        // Use both studentId (data) and studentEmail (row.studentEmail) in the link
                        return '<a href="/admin/student-info/' + row.formStudentId  + '" target="_blank">' + data + '</a>';
                    },
                    createdCell: function (td, cellData, rowData, row, col) {
                        $(td).addClass('text-center'); // Add the class name to the cell
                    }
                },
                {
                    data: null,
                    render: function(data, type, row) {
                        var date = row.formTime;
                        if (!date) return 'N/A'; // Optional: fallback if both are missing
                        return moment(date).format('DD MMM YYYY hh:mm:ss A');
                        //return moment(date).tz(appTimezone).format('DD MMM YYYY hh:mm:ss A');
                        //return moment.utc(date).tz(appTimezone).format('DD MMM YYYY hh:mm:ss A');
                        //return moment(date).tz(appTimezone).format('DD MMM YYYY hh:mm:ss A');
                    }
                },
                { data: 'courseName' },
                { data: 'courseFee' },
                { data: 'paidAmount' },
                {
                    data: null,
                    render: function (data, type, row) {
                        return `${row.stFirstname ?? ''} ${row.stLastName ?? ''}`;
                    },
                    title: 'Student Name'
                },
                { data: 'stEmail' },
                { data: 'stContactNumber' },
                { data: 'stAddress' },
                
            ],
            pageLength: 100,
            layout: {
                topStart: {
                    pageLength: {
                        menu: [[100, 200, 500, -1], [100, 200, 500, "All"]]
                    },
                    buttons: [
                        // {
                        //     extend: 'copy',
                        //     title: customTitle,
                        //     className: customClass,
                        //     exportOptions: {
                        //         columns: ':visible:not(:nth-child(8))',
                        //         modifier: {
                        //             page: 'current' // Limit to current page
                        //         }
                        //     }
                        // },
                        // {
                        //     extend: 'excel',
                        //     title: customTitle,
                        //     className: customClass,
                        //     exportOptions: {
                        //         columns: ':visible:not(:nth-child(8)))',
                        //         modifier: {
                        //             page: 'current' // Limit to current page
                        //         }
                        //     }
                        // },
                        {
                            extend: 'csv',
                            title: customTitle,
                            className: customClass,
                            exportOptions: {
                                columns: ':visible:not(:nth-child(8))',
                                modifier: {
                                    page: 'current' // Limit to current page
                                }
                            }
                        },
                        {
                            extend: 'pdf',
                            title: customTitle,
                            className: customClass,
                            orientation: 'portrait', // Set the orientation to landscape
                            pageSize: 'A4',           // Set the page size (optional)
                            exportOptions: {
                                columns: ':visible:not(:nth-child(8))',
                                modifier: {
                                    page: 'current' // Limit to current page
                                }
                            }
                        },
                        {
                            extend: 'print',
                            title: customTitle,
                            className: customClass,
                            orientation: 'portrait',
                            exportOptions: {
                                columns: ':visible:not(:nth-child(8))',
                                modifier: {
                                    page: 'current' // Limit to current page
                                }
                            }
                        }
                    ]
                },
            },
        });
    }

    var tableAll;
    var table = {}; // Declare a `table` object to store DataTable instances

    var userPrivileges = @json($userPrivileges);
    var courseTypes = @json($courseTypes);
    var firstOccurance = true;

    if (userPrivileges.includes('*')){
        console.log('here');
        tableAll = initDataTable('#datatableAll', '/admin/get-report-course-registration?type=0');
        firstOccurance = false;
    }

    
    if(firstOccurance === true){
        for (let key in courseTypes) {
            if (userPrivileges.includes('*') || userPrivileges.includes('RA')) {
                if (userPrivileges.includes('*') || userPrivileges.includes('COURSE_TYPE_' + key)) {

                        if (!table[key]) {
                            table[key] = initDataTable('#datatable'+key, '/admin/get-report-course-registration?type='+key);
                            firstOccurance = false;
                            break;
                        }
                        
                }
            }
        }
    }

    // Handle Tab Change
    $('a[data-bs-toggle="tab"]').on('shown.bs.tab', function(e) {
        var target = $(e.target).attr("href"); // Get activated tab
        if (userPrivileges.includes('*')){
            if (target === '#tabAll') {
                tableAll.ajax.reload();
            }
        }

        for (let key in courseTypes) {
            if (userPrivileges.includes('*') || userPrivileges.includes('RA')) {
                if (userPrivileges.includes('*') || userPrivileges.includes('COURSE_TYPE_' + key)) {
                    if (target === '#tab'+key) {
                        // Check if table is already initialized for the current key
                        if (!table[key]) {
                            table[key] = initDataTable('#datatable'+key, '/admin/get-report-course-registration?type='+key);
                        } else {
                            table[key].ajax.reload(); // Reload DataTables for the corresponding tab
                        }
                    }
                }
            }
        }

    });

    // Show Tab 1 on page load by default
    $('a[href="#tabAll"]').tab('show'); // This will show Tab 1 on page load
});



    </script>
@endsection
@section('documentJquery')

@endsection