@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('otherForms'), 
                    'pageName' => 'Other Forms',
                    'pageHeader'=> 'Other Form List',
                ])

            <!-- END PAGE HEADER-->
            <!-- BEGIN PORTLET-->
            <div class="adminContent">
                {{--
                <div class="row">
                    <div class="col">
                        <select class="form-control form-select">
                            <option>--Select Page--</option>
                            @foreach($pages as $page)
                            <option value="{{$page->id}}">{{$page->page_name}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                --}}
                <div class="row">
                    <div class="col">
                        <!-- Bootstrap Nav Tabs -->
                        <ul class="nav nav-tabs" id="myTab" role="tablist">
                           
                              <li class="nav-item" role="presentation">
                                <a class="nav-link active" id="tabAll-tab" data-bs-toggle="tab" href="#tabAll" role="tab">All Forms</a>
                              </li>

                            @foreach($pages as $key=>$page)
                                      <li class="nav-item" role="presentation">
                                        <a class="nav-link" id="tab{{$page->id}}-tab" data-bs-toggle="tab" href="#tab{{$page->id}}" role="tab">{{$page->page_name}}</a>
                                      </li>
                            @endforeach
                        </ul>

                        <!-- Tab Panes -->
                        <div class="tab-content">

                                <div class="tab-pane fade show active" id="tabAll" role="tabpanel">
                                    <table id="datatableAll" class="custom table table-bordered">
                                      <thead>
                                        <tr>
                                          <th>Date</th>
                                          <th>Form ID</th>
                                          <th>Page ID</th>
                                          <th>Page Name</th>
                                        </tr>
                                      </thead>
                                    </table>
                                </div>

                            @foreach($pages as $key=>$page)
                                        <div class="tab-pane fade" id="tab{{$page->id}}" role="tabpanel">
                                            <table id="datatable{{$page->id}}" class="table table-bordered">
                                              <thead>
                                                <tr>
                                                  <th>Date</th>
                                                  <th>Form ID</th>
                                                  <th>Page ID</th>
                                                  <th>Page Name</th>
                                                </tr>
                                              </thead>
                                            </table>
                                        </div>
                            @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>
$(document).ready(function() {

        // Custom title and button class for export buttons
    var customTitle = 'Course Registration Report';
    var customClass = 'btn btn-warning btn-sm';

    // 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: 'updatedAt' },
                { 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: 'pageId' },
                { data: 'pageName' }
            ],
            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: 'csv',
                        //     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: '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 pages = @json($pages);
    console.log(pages);
    var firstOccurance = true;

  
        tableAll = initDataTable('#datatableAll', '/admin/get-other-forms?page_id=0');


    
    // 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-orders?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 page of pages) {
            if (userPrivileges.includes('*') || userPrivileges.includes('RA')) {
                if (userPrivileges.includes('*') || userPrivileges.includes('COURSE_TYPE_' + page.id)) {
                    if (target === '#tab'+page.id) {
                        // Check if table is already initialized for the current key
                        if (!table[page.id]) {
                            table[page.id] = initDataTable('#datatable'+page.id, '/admin/get-other-forms?page_id='+page.id);
                        } else {
                            table[page.id].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