<?php
use yii\helpers\Html;
use yii\helpers\Url;
use yii\helpers\ArrayHelper;

/* @var $this yii\web\View */
/* @var $model frontend\models\Activities */
/* @var $form yii\widgets\ActiveForm */

$date = date('Y,m,d', strtotime('today'));


$users = \common\models\User::find()
->select(['username as key', 'username as welder', 'sys_user.username','sys_user.stampno', 'sys_user.id', 'sys_user.blocked_at'])
//->andwhere(['not', ['users.deleted' => true]])
->andwhere(['groups' => 'Welders', 'sys_user.status' => 10, ])
->andwhere(['is', 'sys_user.blocked_at', null ])

->all();
$out = [];
foreach($users as $key =>$user){
    $out[] = ['key' => $user->username, 'label' => $user->useradv->firstname.' '.$user->useradv->lastname.' - '. $user->stampno, 'welder' => $user->username, 'username' => $user->username];
}
$this->registerJsVar('welderList', json_encode($out));

$this->registerJsFile('/js/codebase/dhtmlxscheduler.js', ['position' => yii\web\View::POS_BEGIN]);
$this->registerJsFile('/js/codebase/ext/dhtmlxscheduler_limit.js', ['position' => yii\web\View::POS_BEGIN]);
$this->registerJsFile('/js/codebase/ext/dhtmlxscheduler_timeline.js', ['position' => yii\web\View::POS_BEGIN]);
$this->registerJsFile('/js/codebase/ext/dhtmlxscheduler_multisection.js', ['position' => yii\web\View::POS_BEGIN]);
$this->registerJsFile('/js/codebase/ext/dhtmlxscheduler_multiselect.js', ['position' => yii\web\View::POS_BEGIN]);
$this->registerJsFile('/js/codebase/ext/dhtmlxscheduler_tooltip.js', ['position' => yii\web\View::POS_BEGIN]);
$this->registerJsFile('/js/codebase/ext/dhtmlxscheduler_key_nav.js', ['position' => yii\web\View::POS_BEGIN]);
$this->registerJsFile('/js/codebase/ext/dhtmlxscheduler_minical.js', ['position' => yii\web\View::POS_BEGIN]);
$this->registerCssFile('/js/codebase/dhtmlxscheduler.css');
 ?>

<div class="acttimeline">
    <div class="timeline">
        <div class="row">
            <div class="col-12 bg-darkerblue text-center mb-2 h1">
                Fatigue Management Plan
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <table class="table">
                    <tr class="text-white">
                        <th class="text-white Annualleave text-center">Annual Leave</th>
                        <th class="text-white Attended text-center">Attended (<?= count($attended) ?>)</th>
                        <th class="text-white Booked text-center">Booked</th>
                        <th class="text-white Completed text-center">Completed (<?= count($completed) ?>)</th>
                        <th class="text-white Invoiced text-center">Invoiced (<?= count($invoiced) ?>)</th>
                        <th class="text-white lodge text-center">Lodge</th>
                        <th class="text-white Pre-booked text-center">Pre-booked</th>
                        <th class="text-white Rosteredoff text-center">Rostered Off</th>
                        <th class="text-white Sickness text-center">Sickness</th>
                        <th class="text-white Covid text-center">Covid</th>
                        <th class="text-white Training text-center">Training</th>
                        <th class="text-white NotAvailable text-center">Not Available</th>
                        <th class="text-white Travel text-center">Travel</th>
                    </tr>
                </table>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-12">
                <div id="scheduler_here" class="dhx_cal_container" style='padding-bottom:100vh;'>
                    <div class="dhx_cal_navline">
                        <div class="dhx_cal_prev_button">&nbsp;</div>
                        <div class="dhx_cal_next_button">&nbsp;</div>
                        <div class="dhx_cal_today_button"></div>
                        <div class="dhx_cal_date"></div>
                        <div class="dhx_minical_icon" id="dhx_minical_icon" onclick="show_minical()">&nbsp;</div>

                        <div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
                        <div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
                        <div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
                        <div class="dhx_cal_tab" name="timeline_tab" style="right:280px;"></div>
                    </div>
                    <div class="dhx_cal_header">
                    </div>
                    <div class="dhx_cal_data">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" charset="utf-8">
scheduler.locale.labels.timeline_tab = "Timeline";
scheduler.config.multisection = true;

scheduler.templates.event_class = function(start, end, event) {
    var original = scheduler.getEvent(event.id);
    if (event.jobstatus == 'Booked') return "Booked";
    if (event.jobstatus == 'Covid') return "Covid";
    if (event.jobstatus == 'Attended') return "Attended";
    if (event.jobstatus == 'Pre-booked') return "Pre-booked";
    if (event.billingstatus == 'Invoiced') return "Invoiced";
    if (event.jobstatus == 'Completed') return "Completed";
    if (event.jobstatus == 'Annual Leave') return "Annualleave";
    if (event.jobstatus == 'Rostered Off') return "Rosteredoff";
    if (event.jobstatus == 'Lodge') return "lodge";
    if (event.jobstatus == 'Sickness') return "Sickness";
    if (event.jobstatus == 'Training') return "Training";
    if (event.jobstatus == 'Not Available') return "NotAvailable";
    if (event.jobstatus == 'Travel') return "Travel";
    if (event.shiftlength == 4) {
        return "shorthours";
    }
    if (event.shiftlength == 1) {
        return "shorthours";
    }
    return "";

};

scheduler.config.xml_date = "%Y-%m-%d %H:%i";
scheduler.setLoadMode("timeline");
scheduler.config.show_loading = true;
scheduler.config.details_on_dblclick = true;
scheduler.config.mark_now = false;


var sections = JSON.parse(welderList);
scheduler.updateCollection("sections", sections);

scheduler.createTimelineView({
    name: "timeline",
    x_unit: "day",
    x_date: "%D %d/%m/%y",
    x_size: 14,
    y_unit: scheduler.serverList("sections"),
    y_property: "welder",
    render: 'bar',
    section_autoheight: false,
    dy: 20,
    second_scale: {
        x_unit: "week",
        x_date: " ",
        x_step: 1,
        x_size: 2,
        x_start: -1,
        x_length: 1,
    }

    // round_position:true, //change to full day event width. 	
});

var html = function(id) {
    return document.getElementById(id);
};

var format = scheduler.date.date_to_str("%Y-%m-%d %H:%i");
scheduler.templates.tooltip_text = function(start, end, event) {
    var tooltipTxt = "<b>Details:</b> " + event.text + "<br/>";
    return tooltipTxt;
};


scheduler.attachEvent("onClick", function(id, e) {
    var ev = scheduler.getEvent(id);
    if (id) {
        var tooltip = ev.text
        var myWindow = window.open("", "myWindow", "width=200, height=100");
        myWindow.document.write("<p>" + tooltip + "</p>");
        setTimeout(function() {
            myWindow.close()
        }, 3000);
    }
    //any custom logic here
});

//just a helper

scheduler.showLightbox = function(id) {
    var ev = scheduler.getEvent(id);
    var start = format(ev.start_date);
    var end = format(ev.end_date);
    var url = "&welder=" + ev.welder + "&starttime=" + start + "&finishtime=" + end;
    scheduler.startLightbox(id, window.open("/activities/create?id=" + url));
    html("id").value = id || "";
}

scheduler.attachEvent("onDblClick", function(id) {
    location.href = "/activities/view?id=" + id;
});
scheduler.addMarkedTimespan({
    days: 6, // marks each Saturday
    zones: "fullday", // marks the entire day
    css: "gray_section",
});


scheduler.init('scheduler_here', new Date("<?= $date ?>"), "timeline");
scheduler.load("/activities/timelinedata", "json");

function close_form() {
    scheduler.endLightbox(false, html("my_form"));
}

function show_minical() {
    if (scheduler.isCalendarVisible())
        scheduler.destroyCalendar();
    else
        scheduler.renderCalendar({
            position: "dhx_minical_icon",
            date: scheduler._date,
            navigation: true,
            handler: function(date, calendar) {
                scheduler.setCurrentView(date);
                scheduler.destroyCalendar()
            }
        });
}
scheduler.updateView();

var refresh = function() {
    window.open('/activities/timeline', '_self', false);
}
setInterval(refresh, 360000); //NOTE: period is passed in milliseconds
</script>