<?php

use yii\helpers\Html;
use yii\widgets\ActiveForm;
use yii\helpers\ArrayHelper;
use kartik\time\TimePicker;
use kartik\date\DatePicker;
use kartik\select2\Select2;
//other Model data
use modules\custom\models\Accounts;
use modules\users\models\User;


/* @var $this yii\web\View */
/* @var $model modules\forms\models\Dt129 */
/* @var $form yii\widgets\ActiveForm */


	
//$this->registerJsFile('/js/touch.js'); //load canvas drawing 
$this->registerJsFile('/js/touch_1.js');//load canvas_1 
$this->registerJsFile('/js/touch_2.js'); //load canvas_2 
//$this->registerJsFile('/js/touch_3.js'); //load canvas_3
$this->registerJsFile('/js/update179.js'); 
$this->registerJsFile('/js/moment.js'); 
$this->registerJsFile('/js/moment-duration-format.js');

$model->timelost1 = isset($model->timelost1) ? $model->timelost1 : '00:00';
$model->timelost2 = isset($model->timelost2) ? $model->timelost2 : '00:00';
$model->timelost3 = isset($model->timelost3) ? $model->timelost3 : '00:00';
$model->timelost4 = isset($model->timelost4) ? $model->timelost4 : '00:00';
$model->timelost5 = isset($model->timelost5) ? $model->timelost5 : '00:00';
$model->timelost6 = isset($model->timelost6) ? $model->timelost6 : '00:00';
$model->timelost7 = isset($model->timelost7) ? $model->timelost7 : '00:00';
$model->timelost8 = isset($model->timelost8) ? $model->timelost8 : '00:00';
$model->timelost9 = isset($model->timelost9) ? $model->timelost9 : '00:00';
$model->timelost10 = isset($model->timelost10) ? $model->timelost10 : '00:00';

$employees = User::EmployeesU();
?>

<script>
$(function() {
    //init(); //Drawing
    init1(); //canvas_1
    init2(); //canvas_2
    //init3(); //canvas_3
})
</script>

<div class="dt129">
    <?php $form = ActiveForm::begin(); ?>
    <table class="table table-borderless">
        <tr>
            <td class="DarkerBlue">Date</td>
            <td style="width: 16.5%;">
                <?= $form->field($model, 'date')->widget(DatePicker::class, [
                    'type' => 1,
                    'pluginOptions' => [
                            'format' => 'dd/mm/yyyy',
                            'todayHighlight' => true],])->label(false);?>
            </td>
            <td class="DarkerBlue">Location</td>
            <td style="width: 16.5%;">
                <?= $form->field($model, 'location')->textInput(['maxlength' => 100]) ->label(false)?></td>
            <td class="DarkerBlue">Client</td>
            <td style="width: 16.5%;">
                <?= $form->field($model, 'client')->dropDownList(Accounts::getActive(), ['id' => 'client', 'prompt' => 'Please Select']) ->label(false)?>
            </td>
        </tr>
        <tr>
            <td class="DarkerBlue">Welders Name</td>
            <td>
                <?=$form->field($model, 'weldersname')->widget(Select2::class,
                ['data' => $employees, 'options' => ['id' => 'emails', 'placeholder' => 'Select Operatives...'],
                'pluginOptions' => ['tags' => true, 'multiple' => true, 'tokenSeparators' => [',', ''], ],])    ->label(false)
                ?>
            </td>

            <td colspan="2">
                <div id="canvas2" class="input-group">
                    <div class="input-group-append ">
                        <span class="input-group-text DarkerBlue">
                            <label class="control-label">Welders Signature</label>
                        </span>
                    </div>
                    <canvas id="canvas_2" class="Canvas"></canvas>
                    <div class="input-group-append ">
                        <span class="input-group-text bg-danger text-white" onclick='ClearCanvasX(2);'>
                            Reset
                        </span>
                    </div>
                </div>
                <?=$form->field($model, "wsignatureloc")->hiddeninput(['id' => 'wsignatureloc'])->Label(false)?>

            </td>
        </tr>
        <tr>
            <td class="DarkerBlue">Start Time:</td>
            <td><?= $form->field($model, 'starttime')->label(false) ->widget(TimePicker::class, ['pluginOptions' => ['showMeridian' =>false, 'defaultTime' => '00:00']]) ?>
            </td>
            <td class="DarkerBlue">Finish Time:</td>
            <td><?= $form->field($model, 'finishtime')->label(false) ->widget(TimePicker::class, ['pluginOptions' => ['showMeridian' =>false, 'defaultTime' => '00:00']]) ?>
            </td>
            <td class="DarkerBlue">Inline Job No.</td>
            <td><?= $form->field($model, 'injobno')->textInput(['maxlength' => 100]) ->label(false)?></td>
        </tr>
        <br>
        <tr>
            <td class="WhiteCenter" colspan="6">Detail in the section below all shift details that you deem relevant to
                the activity</td>
        </tr>
        <tr>
            <td class="DarkerBlue">Issue No</td>
            <td class="DarkerBlue">Time Reported:</td>
            <td colspan="3" class="DarkerBlue">Description of Delay:</td>
            <td class="DarkerBlue">Time Lost:</td>
        </tr>
        <tr>
            <td class="text-center">1</td>
            <td><?= $form->field($model, 'timereported1')->label(false) ->widget(TimePicker::class, ['pluginOptions' => ['showMeridian' =>false, 'defaultTime' => '00:00']]) ?>
            </td>
            <td colspan="3"><?= $form->field($model, 'description1')->textInput(['maxlength' => 100]) ->label(false)?>
            </td>
            <td><?= $form->field($model, 'timelost1')->textInput(['maxlength' => 100, 'id' => 'time1', 'onchange' => 'totaltime()',]) ->label(false)?>
            </td>
        </tr>
        <tr>
            <td class="text-center">2</td>
            <td><?= $form->field($model, 'timereported2')->label(false) ->widget(TimePicker::class, ['pluginOptions' => ['showMeridian' =>false, 'defaultTime' => '00:00']]) ?>
            </td>
            <td colspan="3"><?= $form->field($model, 'description2')->textInput(['maxlength' => 100]) ->label(false)?>
            </td>
            <td><?= $form->field($model, 'timelost2')->textInput(['maxlength' => 100, 'id' => 'time2', 'onchange' => 'totaltime()',]) ->label(false)?>
            </td>
        </tr>
        <tr>
            <td class="text-center">3</td>
            <td><?= $form->field($model, 'timereported3')->label(false) ->widget(TimePicker::class, ['pluginOptions' => ['showMeridian' =>false, 'defaultTime' => '00:00']]) ?>
            </td>
            <td colspan="3"><?= $form->field($model, 'description3')->textInput(['maxlength' => 100]) ->label(false)?>
            </td>
            <td><?= $form->field($model, 'timelost3')->textInput(['maxlength' => 100, 'id' => 'time3', 'onchange' => 'totaltime();',]) ->label(false)?>
            </td>
        </tr>
        <tr>
            <td class="text-center">4</td>
            <td><?= $form->field($model, 'timereported4')->label(false) ->widget(TimePicker::class, ['pluginOptions' => ['showMeridian' =>false, 'defaultTime' => '00:00']]) ?>
            </td>
            <td colspan="3"><?= $form->field($model, 'description4')->textInput(['maxlength' => 100]) ->label(false)?>
            </td>
            <td><?= $form->field($model, 'timelost4')->textInput(['maxlength' => 100, 'id' => 'time4', 'onchange' => 'totaltime();',]) ->label(false)?>
            </td>
        </tr>
        <tr>
            <td class="text-center">5</td>
            <td><?= $form->field($model, 'timereported5')->label(false) ->widget(TimePicker::class, ['pluginOptions' => ['showMeridian' =>false, 'defaultTime' => '00:00']]) ?>
            </td>
            <td colspan="3"><?= $form->field($model, 'description5')->textInput(['maxlength' => 100]) ->label(false)?>
            </td>
            <td><?= $form->field($model, 'timelost5')->textInput(['maxlength' => 100, 'id' => 'time5', 'onchange' => 'totaltime();',]) ->label(false)?>
            </td>
        </tr>
        <tr>
            <td class="text-center">6</td>
            <td><?= $form->field($model, 'timereported6')->label(false) ->widget(TimePicker::class, ['pluginOptions' => ['showMeridian' =>false, 'defaultTime' => '00:00']]) ?>
            </td>
            <td colspan="3"><?= $form->field($model, 'description6')->textInput(['maxlength' => 100]) ->label(false)?>
            </td>
            <td><?= $form->field($model, 'timelost6')->textInput(['maxlength' => 100, 'id' => 'time6', 'onchange' => 'totaltime();',]) ->label(false)?>
            </td>
        </tr>
        <tr>
            <td class="text-center">7</td>
            <td><?= $form->field($model, 'timereported7')->label(false) ->widget(TimePicker::class, ['pluginOptions' => ['showMeridian' =>false, 'defaultTime' => '00:00']]) ?>
            </td>
            <td colspan="3"><?= $form->field($model, 'description7')->textInput(['maxlength' => 100]) ->label(false)?>
            </td>
            <td><?= $form->field($model, 'timelost7')->textInput(['maxlength' => 100, 'id' => 'time7', 'onchange' => 'totaltime();',]) ->label(false)?>
            </td>
        </tr>
        <tr>
            <td class="text-center">8</td>
            <td><?= $form->field($model, 'timereported8')->label(false) ->widget(TimePicker::class, ['pluginOptions' => ['showMeridian' =>false, 'defaultTime' => '00:00']]) ?>
            </td>
            <td colspan="3"><?= $form->field($model, 'description8')->textInput(['maxlength' => 100]) ->label(false)?>
            </td>
            <td><?= $form->field($model, 'timelost8')->textInput(['maxlength' => 100, 'id' => 'time8', 'onchange' => 'totaltime();',]) ->label(false)?>
            </td>
        </tr>
        <tr>
            <td class="text-center">9</td>
            <td><?= $form->field($model, 'timereported9')->label(false) ->widget(TimePicker::class, ['pluginOptions' => ['showMeridian' =>false, 'defaultTime' => '00:00']]) ?>
            </td>
            <td colspan="3"><?= $form->field($model, 'description9')->textInput(['maxlength' => 100]) ->label(false)?>
            </td>
            <td><?= $form->field($model, 'timelost9')->textInput(['maxlength' => 100, 'id' => 'time9', 'onchange' => 'totaltime();',]) ->label(false)?>
            </td>
        </tr>
        <tr>
            <td class="text-center">10</td>
            <td><?= $form->field($model, 'timereported10')->label(false) ->widget(TimePicker::class, ['pluginOptions' => ['showMeridian' =>false, 'defaultTime' => '00:00']]) ?>
            </td>
            <td colspan="3"><?= $form->field($model, 'description10')->textInput(['maxlength' => 100]) ->label(false)?>
            </td>
            <td><?= $form->field($model, 'timelost10')->textInput(['maxlength' => 100, 'id' => 'time10', 'onchange' => 'totaltime();',]) ->label(false)?>
            </td>
        </tr>
        <tr>
            <td></td>
            <td colspan="3"></td>
            <td class="Title LighterBlue text-right" valign="middle">Total Time Lost</td>
            <td><?= $form->field($model, 'totaltimelost')->textInput(['maxlength' => 100, 'id' => 'ttime',]) ->label(false)?>
            </td>
        </tr>

        <tr>
            <td class="DarkerBlue">Client Name</td>
            <td><?= $form->field($model, 'clientname')->textInput(['maxlength' => 100]) ->label(false)?></td>

            <td colspan="2">
                <div id="canvas1" class="input-group">
                    <div class="input-group-append ">
                        <span class="input-group-text DarkerBlue">
                            <label class="control-label">Client Signature</label>
                        </span>
                    </div>
                    <canvas id="canvas_1" class="Canvas"></canvas>
                    <div class="input-group-append ">
                        <span class="input-group-text bg-danger text-white" onclick='ClearCanvasX(1);'>
                            Reset
                        </span>
                    </div>
                </div>
                <?=$form->field($model, "signatureloc")->hiddeninput(['id' => 'signatureloc'])->Label(false)?>
            </td>

        </tr>
    </table>


    <div class="form-group">
        <?= Html::submitButton('Save', ['class' => 'btn btn-primary', 'onclick' => 'saveImage()']) ?>
    </div>

    <?php ActiveForm::end(); ?>

</div>
<script>
function totaltime() {
    var time1 = $('#time1').val();
    time1 = time1 + ":00";
    time1 = getsecs(time1);
    var time2 = $('#time2').val();
    time2 = time2 + ":00";
    time2 = getsecs(time2);
    var time3 = $('#time3').val();
    time3 = time3 + ":00";
    time3 = getsecs(time3);
    var time4 = $('#time4').val();
    time4 = time4 + ":00";
    time4 = getsecs(time4);
    var time5 = $('#time5').val();
    time5 = time5 + ":00";
    time5 = getsecs(time5);
    var time6 = $('#time6').val();
    time6 = time6 + ":00";
    time6 = getsecs(time6);
    var time7 = $('#time7').val();
    time7 = time7 + ":00";
    time7 = getsecs(time7);
    var time8 = $('#time8').val();
    time8 = time8 + ":00";
    time8 = getsecs(time8);
    var time9 = $('#time9').val();
    time9 = time9 + ":00";
    time9 = getsecs(time9);



    var time10 = $('#time10').val();
    time10 = time10 + ":00";
    time10 = getsecs(time10);





    rtime = time1 + +time2 + +time3 + +time4 + +time5 + +time6 + +time7 + +time8 + +time9 + +time10;

    TTime = moment.duration(rtime, "seconds").format('D [d] h:mm');

    document.getElementById('ttime').value = TTime;

}

function getsecs(field) {
    var a = field.split(':'); // split it at the colons	
    var seconds = (+a[0]) * 60 * 60 + (+a[1]) * 60 + (+a[2]);
    return seconds;
}

function saveImage() {
    $("#wsignatureloc").val(document.getElementById('canvas_2').toDataURL());
    $("#signatureloc").val(document.getElementById('canvas_1').toDataURL());
}
</script>