@extends('layouts.master')

@section('title', __('tr.My Schedule'))
@section('titleicon', "icon-schedule")

@section('content')
    <!-- BEGIN .main-content -->
    <div class="main-content">
        <div class="row gutters" id="card_table_div">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="card">
                    <div class="card-header">
                        @lang('tr.Schedule')
                        <div class="float-right">
                            <form target="_blank" method="post" id="filter_form">
                                {{ csrf_field() }}
                                <a href='javascript:void(0)' class="btn btn-sm btn-primary" id="pdf_button" title="PDF"><i class="icon-printer"></i></a>
                            </form>
                        </div>
                    </div>
                    <div class="card-body" id="body">
                    </div>
                </div>
            </div>
        </div>
        <!-- Row end -->
    </div>
    <!-- END: .main-content -->
@endsection

@section('pagejs')
    <script type="text/javascript">

        var showCourseURL = '{{ route('show_course', ['course'=>'#id'])."?committee_id=#committee_id" }}';

        var data = {!!json_encode($schedulesTable)!!}

        $(document).ready(function() {

                $('#table').remove();

                nPeriods = Object.keys(data.periods).length;
                var width = (90/nPeriods)+'%';
                var html = '<table width="100%" style="font-size: 10px; font-weight:bold;" border="1px" id="table">';
                html += '<tr style="background-color:black;color:white;text-align:center;">';
                html += '<th width="1%" rowspan="2">Day</th>';
                html += '<th width="90%" colspan="'+nPeriods+'">Periods</th>';
                html += '</tr>';
                html += '<tr style="background-color:black;color:white;text-align:center;">';

                Object.entries(data.periods).forEach(([period, periodData]) => {

                    html += `<th width="${width}">${periodData.from}-${periodData.to}</th>`;
                });

                html += '</tr>';
                html += '<tbody>';

                backGround = 1;
                
                Object.entries(data.days).forEach(([day, dayData]) => {

                    if(backGround == 1){

                        dayColor = '#f0f4f9';
                        backGroundColor = 'background-color: '+dayColor;
                        backGround = 0;
                    }
                    else{

                        dayColor = 'white';
                        backGroundColor = 'background-color: '+dayColor;
                        backGround = 1;
                    }

                    for (var nRow = 0; nRow < data.daysRows[day]; nRow++) {

                        html += `<tr style="text-align:center;${backGroundColor}">`;

                        if(nRow == 0) {

                            html += `<td height="100px" rowspan="${data.daysRows[day]}">`;
                            html += '<p style="font-size: 12px;transform: rotate(-90deg);">'+dayData+'</p>';
                            html += '</td>';
                        }

                        Object.entries(data.periods).forEach(([period, periodData]) => {

                            period++;

                            var key = day+'_'+period+'_'+nRow;

                            if(data.table[key]) {

                                if(data.table[key] != 'repeated') {

                                    html += `<td onMouseover="this.bgColor='#d3d3d3'"
                                        onMouseout="this.bgColor='${dayColor}'"
                                        colspan="${data.table[key]['column_span']}"
                                        >`;

                                    html += `<div style="display: flex; align-items: center; justify-content: center; font-size: 10px; padding: 4px;">`+'<a href="'+showCourseURL.replace('#id', data.table[key]['course_id']).replace('#committee_id', data.table[key]['committee_id'])+'" target="_blank">'+data.table[key]['committee_name'];

                                    if(data.table[key]['weekly'] == 0) {

                                        html += " (Biweekly)";
                                    }

                                    html += '</a></div></td>';
                                }
                            }
                            else {

                                html += `<td onMouseover="this.bgColor='#d3d3d3'"
                                    onMouseout="this.bgColor='`+dayColor+`'"
                                    ></td>`;
                            }
                        });

                        html += '</tr>';
                    }

                });

                html += '</tbody>';
                html += '</table>';

                $('#body').append(html);

                $('#pdf_button').on("click",function () {

                    var action = "{{ route('my_schedule_pdf') }}";

                    $('#filter_form').attr('action', action);
                    $allowSubmit = true;
                    $('#filter_form').submit();
                    $allowSubmit = false;
                });
        });
    </script>
@endsection