<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="csrf-token" content="<?= csrf_token() ?>">
    <link rel="shortcut icon" href="{{ asset('favicon.ico') }}">

    <!-- Bootstrap CSS-->
    {{ HTML::style('vendor/bootstrap/css/bootstrap.min.css') }}
{{--    {{ HTML::style('https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css', ['integrity' => 'sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh', 'crossorigin' => 'anonymous']) }}--}}

    <!-- Data Tables CSS for Bootstrap -->
    {{ HTML::style('vendor/bower_components/datatables.net-buttons-bs/css/buttons.bootstrap.min.css') }}
    {{ HTML::style('vendor/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css') }}

    {{ HTML::style('vendor/bootstrap-select/dist/css/bootstrap-select.min.css') }}

    <!-- X-Editable -->
    {{ HTML::style('vendor/xeditable/bootstrap-editable.css') }}


    <!-- CSS -->
    {{ HTML::style('css/custom.css') }}
    {{ HTML::style('css/sticky-footer.css') }}

    @yield('css')

    <script src="{{ asset('vendor/modernizr-custom.min.js') }}"></script>

    <!-- jQuery -->
    <script src="{{ asset('vendor/jquery.min.js') }}"></script>

    <!-- Bootstrap js -->
    <script src="{{ asset('vendor/bootstrap/js/bootstrap.min.js') }}"></script>

{{--    {{ HTML::script('https://code.jquery.com/jquery-3.4.1.slim.min.js', ['integrity' => 'sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n', 'crossorigin' => 'anonymous']) }}--}}
{{--    {{ HTML::script('https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js', ['integrity' => 'sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo', 'crossorigin' => 'anonymous']) }}--}}
{{--    {{ HTML::script('https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js', ['integrity' => 'sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6', 'crossorigin' => 'anonymous']) }}--}}


    <title>{{ strip_tags($title) }} - OLAS UPRRP</title>
</head>
<body>
    <!-- Modal to change term -->
    <div class="modal fade" id="changeTermModal" tabindex="-1" role="dialog" aria-labelledby="changeTermModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="changeTermModalLabel">Change Semesters</h4>
                </div>
                <div class="modal-body">
                    <p>Select one or more semesters to view their data. These settings will be applied site-wide.</p>
                    {{ Form::open(array('action' => array('SemestersController@filterSemesters'))) }}
                        @foreach (Semester::where('is_visible', 1)->get() as $semester)
                        <div class="checkbox">
                            <label>
                                <input name="semesters_ids[]" value="{{ $semester->id }}" type="checkbox">{{ $semester->name }} ({{ $semester->code }})
                            </label>
                        </div>
                        @endforeach
                </div>
                <div class="modal-footer">
                        <div class="btn-group" role="group">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-default btn-primary">Submit</button>
                        </div>
                    {{ Form::close() }}
                </div>
            </div>
        </div>
    </div>
    <header class="header hidden-print">
        <div style="background-color: #c30d2a; background-image:url({{ URL::asset('images/header-olas-back.png')}}); background-repeat:no-repeat; min-height:100px; position: relative; width:100%; min-width:1560px">
        <div class="gotoright">
            <h1>Online Learning Assessment System -
                @if(Auth::user()->role == '1')
                    <strong>Administrator</strong>
                @elseif (Auth::user()->role == '2')
                    <strong>School Coordinator</strong>
                @elseif (Auth::user()->role == '3')
                    <strong>Program Coordinator</strong>
                @elseif (Auth::user()->role == '4')
                    <strong>Professor</strong>
                @endif
            </h1>
    	</div>
    	</div>
        @yield('navigation')
    </header>
    <main class="main">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="semesterbar">
                        <p>
                            <strong>Viewing:</strong>
                            @foreach (Session::get('semesters_info') as $semester_info)
                                <strong>&#183;</strong> {{ $semester_info }}
                            @endforeach
                            <a href="#" data-toggle="modal" data-target="#changeTermModal"> <strong>Change</strong></a>
                        </p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12"><h2> {{ $title }} </h2></div>
            </div>

            @if(Session::get('status'))
            <div class="row">
            <div class="col-md-12">
              <div class="alert alert-dismissible alert-{{ Session::get('status') }}" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                @if(Session::get('status')=='success')
                    <span class="glyphicon glyphicon-ok-sign"></span>
                @else
                    <span class="glyphicon glyphicon-remove-sign"></span>
                @endif
                {{ Session::get('message') }}
              </div>
            </div>
            </div>
            @endif

            <!-- Error message for javascript -->
            <div id="js-error-row" class="row">
                <div class="col-md-12">
                    <div class="alert alert-danger alert-dismissible" role="alert">
                        <span class="glyphicon glyphicon-remove-sign"></span>
                        <span id="error-message">
                            An error occurred. Please try again later.
                        </span>
                    </div>
                </div>
            </div>


            @yield('main')
        </div>
    </main>

    @include('layouts/footer')

    <!-- File specific scripts -->
    @yield('included-js')

    <!-- General Scripts -->

    <script type="text/javascript">
    $(document).ready(function() {
        $('#js-error-row').hide();

        // Always scroll to the top
        $(this).scrollTop(0);
        $('html').animate({scrollTop:0}, 1);
        $('body').animate({scrollTop:0}, 1);

        $('.selectpicker').selectpicker({
            'liveSearch': true,
            'liveSearchNormalize': true
        });

        /////

        var table = null;
        // var tables = [];
        $('.datatable').each(function()
        {
            table = $(this).DataTable({
                lengthMenu: [5, 10, 25, 50],
                autoWidth: false,
                retrieve: true,
                pageLength: 10,
                // //fixed cols
                // fixedColumns:   {
                //     leftColumns: 1,
                // },
                // scrollY:        "600px",
                // scrollX:        true,
                // scrollCollapse: true,

                bSortCellsTop: true, // To apply sort using top row only
                order: [[ 0, "asc" ]],
                dom: 'Bflrtip',
                buttons: [
                    {
                        extend: 'collection',
                        text: 'Export <span class="caret"></span>',
                        buttons: [
                            {
                                extend: 'print',
                                exportOptions: {
                                    columns: ':visible'
                                },
                                text: 'Print',
                            },
                            {
                                extend: 'excelHtml5',
                                exportOptions: {
                                    columns: ':visible'
                                }
                            },
                            {
                                extend: 'pdfHtml5',
                                exportOptions: {
                                    columns: ':visible',
                                    stripNewlines: false,
                                },
                                customize: function(doc){
                                    //$('#loadingModal').modal('show');

                                    doc.pageSize = 'LEGAL';
                                    doc.pageOrientation ='landscape';
                                    doc.defaultStyle.fontSize = 10;
                                    doc.styles.tableHeader.fillColor = '#E70033';

                                    // doc.content[1].layout= 'lightHorizontalLines';
                                    doc.content[1].layout = {
                                        hLineWidth: function (i, node) {
                                            if(i === 1){
                                                return 2;
                                            }
                                            else if(i > 1){
                                                return 1;
                                            }
                                            else {
                                                return 0;
                                            }
                                        },
                                        vLineWidth: function (i, node) {
                                            return 0;
                                        },
                                        hLineColor: function (i, node) {
                                            if(i === 1){
                                                return '#000';
                                            }
                                            else if(i > 1){
                                                return '#ccc';
                                            }
                                            else {
                                                return 'transparent';
                                            }
                                        },
                                        // vLineColor: function (i, node) {
                                        //     return (i === 0 || i === node.table.widths.length) ? 'black' : 'gray';
                                        // },
                                        paddingLeft: function(i, node) { return 5; },
                                        paddingRight: function(i, node) { return 5; },
                                        paddingTop: function(i, node) { return 5; },
                                        paddingBottom: function(i, node) { return 5; }
                                    };

                                    doc.content.splice( 0, 0, {
                                        margin: [ 0, 0, 0, 12 ],
                                        alignment: 'center',
                                        width: 150,
                                        image: 'data:image/png;base64,[encoded data, 31780 characters]'
                                    } );

                                    //$('#loadingModal').modal('hide');

                                }
                            },
                        ]
                    },
                    {
                        extend: 'colvis',
                        columns: ':gt(0)',
                        text: 'Column visibility <span class="caret"></span>',
                    }
                ],
            });
            // tables.push(table);

            // Apply the search
            table.columns().every( function ()
            {
                // Search by keyword
                var column = this;
                $('input.column-search-bar', column.footer()).on('keyup change', function () {
                    if (column.search() !== this.value) {
                        console.log(this.value)

                        column
                            .search(this.value)
                            .draw();
                    }
                } );

                // Search by dropdown menu
                column.data().unique().sort().each( function (d, j) {
                    $('select.column-search-select', column.footer()).append('<option value="'+d+'">'+d+'</option>');
                });

                $('.column-search-select', column.footer()).on( 'change', function () {
                var val = $.fn.dataTable.util.escapeRegex($(this).val());

                column
                    .search(val ? '^'+val+'$' : '', true, false)
                    .draw();

                } );
            } );

            table.buttons().container()
            .appendTo( $('.col-sm-6:eq(0)', table.table().container()));

            $(document).on('click', '.buttons-columnVisibility', function(){
                console.log('visibility toggled');
                table.columns.adjust().responsive.recalc();
            });
        });

        $('.datatable-user').each(function()
        {
            table = $(this).DataTable({
                lengthMenu: [5, 10, 25, 50],
                autoWidth: false,
                retrieve: false,
                pageLength: 10,
                "stateSave": true,
                "stateDuration": 60 * 4,
                // "stateSaveParams": function (settings, data) {
                //     console.log(data);
                //     // data.columns[1].search.regex = false;
                // },
                // //fixed cols
                // fixedColumns:   {
                //     leftColumns: 1,
                // },
                // scrollY:        "600px",
                // scrollX:        true,
                // scrollCollapse: true,

                bSortCellsTop: true, // To apply sort using top row only
                order: [[ 0, "asc" ]],
                dom: 'Bflrtip',
                buttons: [
                    {
                        extend: 'collection',
                        text: 'Export <span class="caret"></span>',
                        buttons: [
                            {
                                extend: 'print',
                                exportOptions: {
                                    columns: ':visible'
                                },
                                text: 'Print',
                            },
                            {
                                extend: 'excelHtml5',
                                exportOptions: {
                                    columns: ':visible'
                                }
                            },
                            {
                                extend: 'pdfHtml5',
                                exportOptions: {
                                    columns: ':visible',
                                    stripNewlines: false,
                                },
                                customize: function(doc){
                                    //$('#loadingModal').modal('show');

                                    doc.pageSize = 'LEGAL';
                                    doc.pageOrientation ='landscape';
                                    doc.defaultStyle.fontSize = 10;
                                    doc.styles.tableHeader.fillColor = '#E70033';

                                    // doc.content[1].layout= 'lightHorizontalLines';
                                    doc.content[1].layout = {
                                        hLineWidth: function (i, node) {
                                            if(i === 1){
                                                return 2;
                                            }
                                            else if(i > 1){
                                                return 1;
                                            }
                                            else {
                                                return 0;
                                            }
                                        },
                                        vLineWidth: function (i, node) {
                                            return 0;
                                        },
                                        hLineColor: function (i, node) {
                                            if(i === 1){
                                                return '#000';
                                            }
                                            else if(i > 1){
                                                return '#ccc';
                                            }
                                            else {
                                                return 'transparent';
                                            }
                                        },
                                        // vLineColor: function (i, node) {
                                        //     return (i === 0 || i === node.table.widths.length) ? 'black' : 'gray';
                                        // },
                                        paddingLeft: function(i, node) { return 5; },
                                        paddingRight: function(i, node) { return 5; },
                                        paddingTop: function(i, node) { return 5; },
                                        paddingBottom: function(i, node) { return 5; }
                                    };

                                    doc.content.splice( 0, 0, {
                                        margin: [ 0, 0, 0, 12 ],
                                        alignment: 'center',
                                        width: 150,
                                        image: 'data:image/png;base64,[encoded data, 31780 characters]'
                                    } );

                                    //$('#loadingModal').modal('hide');

                                }
                            },
                        ]
                    },
                    {
                        extend: 'colvis',
                        columns: ':gt(0)',
                        text: 'Column visibility <span class="caret"></span>',
                    }
                ],
            });

            // Apply the search
            table.columns().every( function ()
            {
                // Search by keyword
                var column = this;
                $('input.column-search-bar', column.footer()).on('keyup change', function () {
                    if (column.search() !== this.value) {
                        console.log(this.value)

                        column
                            .search(this.value)
                            .draw();
                    }
                } );

                // Search by dropdown menu
                column.data().unique().sort().each( function (d, j) {
                    $('select.column-search-select', column.footer()).append('<option value="'+d+'">'+d+'</option>');
                });

                $('.column-search-select', column.footer()).on( 'change', function () {
                var val = $.fn.dataTable.util.escapeRegex($(this).val());

                column
                    .search(val ? '^'+val+'$' : '', true, false)
                    .draw();

                } );
            } );

            var state = table.state();
            var i = 0;

            $(".column-search").each(function(){
                $(this).find("input:text").each(function(){
                    $(this).val('');
                });
            });

            $.each(state.columns, function() {
                var tr_row = $("tr.column-search").find('th');
                if(this.search.search != ""){
                    var text = this.search.search;
                    text = text.replace('^', '');
                    text = text.replace('$', '');
                    if(tr_row.eq(i).find('input').length > 0){
                        tr_row.eq(i).find('input').val(text);
                    }
                    if(tr_row.eq(i).find('select').length > 0){
                        tr_row.eq(i).find("select").children('[value="'+text+'"]').attr('selected',true);
                    }
                }
                i = i + 1;
            })

            table.buttons().container()
            .appendTo( $('.col-sm-6:eq(0)', table.table().container()));

            $(document).on('click', '.buttons-columnVisibility', function(){
                console.log('visibility toggled');
                table.columns.adjust().responsive.recalc();
            });
        });

        ////

        // Yield to js
        @yield('javascript')

        // Turn on tooltips
        $(document).find('[data-toggle="tooltip"]').tooltip();
        $(document).on('click', '.graph-title', function(e){
            e.preventDefault();
            alert('Tooltip');
        });

        //
        function jsError(message)
        {
            // Always scroll to the top
            $(this).scrollTop(0);
            $('html').animate({scrollTop:0}, 1);
            $('body').animate({scrollTop:0}, 1);

            $('#error-message').text(message);

            // Show js error with default message
            $('#js-error-row').fadeIn('slow', function () {
                $(this).delay(3000).fadeOut('slow');
            });
        }

    });

    </script>

    <script type="text/javascript" src="{{asset('vendor/bootstrap-select/dist/js/bootstrap-select.min.js') }}"></script>

    <!-- AJAX setup for CSRF protection -->
    <script src="{{ asset('js/ajaxSetup.js') }}"></script>

    <script type="text/javascript">
    $('.panel-heading').css('cursor', 'pointer');
    </script>


    <!-- HighCharts -->
    <!--script src="http://code.highcharts.com/modules/exporting.js"></script -->

</body>
</html>
