<?php

use yii\helpers\Html;
use yii\widgets\ActiveForm;

//widgets
use kartik\date\DatePicker;
use kartik\time\TimePicker;
use common\widgets\TinyMce;
/* @var $this yii\web\View */
/* @var $model modules\forms\models\Dt194 */
/* @var $form yii\widgets\ActiveForm */

if (!$model->date) {$model->date = date('d/m/Y', strtotime('today'));} else {$model->date = date('d/m/Y', strtotime($model->date));}
if (!$model->assessorname1) {$model->assessorname1 = Yii::$app->user->identity->username;}
if (!$model->assessorname2) {$model->assessorname2 = Yii::$app->user->identity->username;}

$this->registerJsFile('/js/touch_0.js');//load canvas_0
$this->registerJsFile('/js/touch_1.js');//load canvas_1 
$this->registerJsFile('/js/updatesignatures.js'); //load canvas drawing 
//$this->registerJsFile('/js/touch_2.js'); //load canvas_2 
//$this->registerJsFile('/js/touch_3.js'); //load canvas_3 ?>
<script>
$(function() {
    //	init(); //Drawing
    init0(); //canvas_0
    init1(); //canvas_1
    //	init2(); //canvas_2
    //	init3(); //canvas_3
})


function addRow(row) {
    i = row + 1;
    btnadd = '#btnadd' + row;
    btnrem = '#btnrem' + row;
    rowa = '.row-' + i;
    status = '#status'+ i;
    $(rowa).toggleClass('d-none');
    $(btnadd).toggleClass('d-none');
    $(btnrem).toggleClass('d-none');
    $(status).val('Active');
}

function removeRow(row) {
    i = row;
    j = row - 1;
    btn = '#btn' + j;
    rowa = '.row-' + i;
    rowainputs = '.row-' + i + ' :input';
    status = '#status'+ i;
    $(rowa).toggleClass('d-none');
    $(btn).toggleClass('d-none');
    $(status).val('Active');
    $(rowainputs).each(function(i, ev){
        console.log($(this).val(''));
        $(this).val('');
    });
    
}
</script>
<div class="dt194-form">

    <div class="row">
        <div class="col-sm-12">
            <h1>Site Assessment Form</h1>
        </div>
    </div>

    <?php $form = ActiveForm::begin(['options' => ['id' => 'dynamic-form', 'enctype' => 'multipart/form-data', 'enableClientValidation' => false]]); ?>
    <table class="table" cellpadding="0">
        <tr>
            <th class="DarkerBlue">Date </th>
            <th class="DarkerBlue">Time </th>
            <th class="DarkerBlue">Job No </th>
            <th class="DarkerBlue">Location </th>
        </tr>
        <tr>
            <td>
                <?= $form->field($model, 'date')->widget(DatePicker::class, ['type' => 1, 'pluginOptions' => ['showMeridian' =>false, 'format' => 'dd/mm/yyyy']])->label(false) ?>
            </td>
            <td class="">
            <?= $form->field($model, 'time')->widget(TimePicker::class, ['pluginOptions' => ['showMeridian' =>false, ]])->label(false) ?>
        </td>
            <td class=""><?= $form->field($model, 'jobno')->textInput()->label(false) ?></td>
            <td class=""><?= $form->field($model, 'location')->textInput()->label(false) ?></td>
        </tr>
        <tr>
            <th class="DarkerBlue">Assessor Name</th>
            <td class=""><?= $form->field($model, 'assessorname1')->textInput()->label(false) ?></td>
            <th class="DarkerBlue">Assessor Signature</th>
            <td class="">
                <canvas class="canvas1" id="canvas_0"></canvas>
                <?= Html::button('Reset', [ 'class' => 'btn btn-primary', 'onclick' => 'ClearCanvasX(0);' ]); ?>
                <?= $form->field($model, 'assessorsign1')->hiddeninput(['id' => 'signature0'])->label(false) ?>
            </td>
        </tr>
    </table>

    <div class="row">
        <div class="col-sm-4 col-md-4 Title DarkerBlue">Observations</div>
        <div class="col-sm-4 col-md-4 Title DarkerBlue">Control Measure</div>
        <div class="col-sm-4 col-md-4 Title DarkerBlue">Timescale</div>
    </div>
    <div class="row">
        <div class="col-sm-1 col-md-1">&nbsp;</div>
        <div class="col-sm-3 col-md-3 inlabel">Hazards & consequences</div>
        <div class="col-sm-4 col-md-4 inlabel">Immediate & longer-term actions</div>
        <div class="col-sm-4 col-md-4 inlabel">(immediate, 1 week, etc)</div>
    </div>


    <?php $x = 1 ?>
    <?php while($x <= 29){ ?>
        <?php $status = isset($model->rowstatus[$x]) ? $model->rowstatus[$x] : ''; ?>
        <?php $y = $x +1; ?>
        <?php $ystatus = isset($model->rowstatus[$y]) ? $model->rowstatus[$y] : ''; ?>
        <?php $last = $y < 30 && $ystatus == '' &&  $status == 'Active' ? 'Last' : false; ?>

            <div class="datarows row-<?= $x ?> <?= $x == 1 || $status == 'Active' ? '' : 'd-none' ?>">
                <div class="row">
                    <div class="col-sm-1 col-md-1 data">
                        <?=  Html::button('<i class="fa fa-plus"></i>', ['onClick' => "addRow($x)", 'class' => $status == 'Active' && $last !== 'Last' ? "btn btn-info d-none" : "btn btn-info", 'id' => 'btnadd'.$x]); ?>
                        <?=  Html::button('<i class="fa fa-minus"></i>', ['onClick' => "removeRow('$x')", 'class' => $status  !== 'Active' || $last == 'Last' ?  'btn bg-danger text-white d-none' : 'btn bg-danger text-white', 'id' => 'btnrem'.$x ]) ?>
                        <?= $form->field($model, "rowstatus[$x]")->hiddenInput(['id' => 'status'.$x, 'value' => $x == 1 ? 'Active' : $status ])->label(false) ?>
                    </div>
                    <div class="col-sm-3 col-md-3 data">
                        <?= $form->field($model, "rowobservation[$x]")->textInput([])->Label(false) ?>
                    </div>
                    <div class="col-sm-4 col-md-4 data">
                        <?= $form->field($model, "rowcontrolmeasure[$x]")->textInput([])->Label(false) ?>
                    </div>
                    <div class="col-sm-4 col-md-4 data">
                        <?= $form->field($model, "rowtimescale[$x]")->textInput([])->Label(false) ?>
                    </div>
                </div>
            </div>
            <?php $x++; ?>
    <?php } ?>


    <div class="row">

        <div class="col-sm-12 DarkerBlue">
            Structure report under the following headings:<br />
            Introduction including overview of area inspected and activities taken place<br />
        </div>
        <div class="col-sm-12">
            <?= $form->field($model, 'introduction')->widget(TinyMce::class, [])->label(false); ?>
        </div>

        <div class=" col-sm-12 DarkerBlue">
            Executive Summary
        </div>
        <div class="col-sm-12">
            <?= $form->field($model, 'executivesummary')->widget(TinyMce::class, [])->label(false); ?>
        </div>

        <div class="col-sm-12 DarkerBlue">
            Main findings of the inspection
        </div>

        <div class="col-sm-12">
            <?= $form->field($model, 'findings')->widget(TinyMce::class, [])->label(false); ?>
        </div>
        <div class="col-sm-12 DarkerBlue">
            Conclusion
        </div>
        <div class="col-sm-12">
            <?= $form->field($model, 'conclusions')->widget(TinyMce::class, [])->label(false); ?>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <table class="table table-borderless">
                <tr>
                    <th class="DarkerBlue">Assessor Name</th>
                    <td><?= $form->field($model, 'assessorname2')->textInput()->label(false) ?></td>
                    <th class="DarkerBlue">Assessor Signature</th>
                    <td><canvas class="canvas1" id="canvas_1"></canvas>
                        <?= Html::button('Reset', [ 'class' => 'btn btn-primary', 'onclick' => 'ClearCanvasX(1);' ]); ?>
                        <?= $form->field($model, 'assessorsign2')->hiddenInput(['id' => 'signature1'])->label(false) ?>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <div class="form-group">
        <?= Html::submitButton('Save', ['class' => 'btn btn-primary', 'onclick' => 'saveImages()']) ?>
    </div>

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

</div>
<script>
x = 0;

function saveImages() {
    while (x <= 1) {
        id = "signature" + x;
        cavid = "canvas_" + x;
        document.getElementById(id).value = document.getElementById(cavid).toDataURL();
        x++
    }
}
</script>