<?php

use kartik\date\DatePicker;
use kartik\time\TimePicker;
use yii\helpers\Html;
use yii\widgets\ActiveForm;
use common\widgets\TinyMce;

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

//$this->registerJsFile('/js/touch.js'); //load canvas drawing
$this->registerJsFile('/js/touch_0.js'); //load canvas_0
//$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/updatesignatures.js'); //load canvas_3

?>
<script>
window.onload = function() {
    //init(); //Drawing
    init0(); //canvas_0
    //init1(); //canvas_1
    //init2(); //canvas_2
    //init3(); //canvas_3
}
</script>
<div class="col-md-12 text-center">
    <h1>Witness Statement Form DT132</h1>
</div>
<div class="dt132-form">
    <?php $form = ActiveForm::begin();?>
    <div class="row">
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-4 DarkerBlue">Contract / Project:</div>
                <div class="col-md-8"><?=$form->field($model, 'contract')->textInput()->label(false)?>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4 DarkerBlue">Details of Incident:</div>
                <div class="col-md-8"><?=$form->field($model, 'incidentdetails')->textInput()->label(false)?>
                </div>
            </div>
            <div class="row">
                <div class="col-md-2 DarkerBlue">Date of Event</div>
                <div class="col-md-4">
                    <?=$form->field($model, 'eventdate')->widget(DatePicker::class, ['size' => 'sm', 'id' => 'eventdate', 'pluginOptions' => ['showMeridian' => true, 'convertFormat' => true, 'format' => 'dd/mm/yyyy', 'useCurrent' => true]])->label(false)?>
                </div>
                <div class="col-md-2 DarkerBlue">Time of Event</div>
                <div class="col-md-4">
                    <?=$form->field($model, 'eventtime')->widget(TimePicker::class, ['size' => 'sm', 'id' => 'eventtime', 'pluginOptions' => ['showMeridian' => false, 'convertFormat' => true, 'format' => 'H:i', 'useCurrent' => true]])->label(false)?>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4 DarkerBlue">Location of Event</div>
                <div class="col-md-8"><?=$form->field($model, 'eventlocation')->textInput()->label(false)?></div>
            </div>
            <div class="row">
                <div class="col-md-12 DarkerBlue">WITNESS</div>
            </div>
            <div class="row">
                <div class="col-md-4 DarkerBlue">Name:</div>
                <div class="col-md-8"><?=$form->field($model, 'witnessname')->textInput()->label(false)?>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4 DarkerBlue">Job Title:</div>
                <div class="col-md-8"><?=$form->field($model, 'witnesstitle')->textInput()->label(false)?></div>
            </div>
            <div class="row">
                <div class="col-md-4 DarkerBlue">Employer:</div>
                <div class="col-md-8"><?=$form->field($model, 'witnessemployer')->textInput()->label(false)?></div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-4 DarkerBlue">Ref Number:</div>
                <div class="col-md-8"><?=$form->field($model, 'ref')->textInput()->label(false)?></div>
            </div>
            <div class="row">
                <div class="col-md-4 DarkerBlue">Details of the event:</div>
            </div>
            <div class="row">
                <div class="col-md-12"><?=$form->field($model, 'eventdetails')->textArea(['rows' => 5])->label(false)?>
                </div>
            </div>
            <div class="row DarkerBlue">
                <div class="col-md-4 DarkerBlue">Interviewer</div>
                <div class="col-md-8"></div>
            </div>
            <div class="row">
                <div class="col-md-4 DarkerBlue">Name:</div>
                <div class="col-md-8"><?=$form->field($model, 'intername')->textInput()->label(false)?></div>
            </div>
            <div class="row">
                <div class="col-md-4 DarkerBlue">Job Title:</div>
                <div class="col-md-8"><?=$form->field($model, 'intertitle')->textInput()->label(false)?></div>
            </div>
            <div class="row">
                <div class="col-md-4 DarkerBlue">Employer:</div>
                <div class="col-md-8"><?=$form->field($model, 'interemployer')->textInput()->label(false)?></div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 DarkerBlue">
            This section to be completed after taking the statement
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 DarkerBlue">
            What do you believe could have been done to prevent the event
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <?=$form->field($model, 'prevention')->widget(TinyMce::class, []);?>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 DarkerBlue">
            This section to be completed first
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 DarkerBlue">
            Witness Statement
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <?=$form->field($model, 'statement')->widget(TinyMce::class, []);?>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <table class="table">
                <tr>

                    <th class="DarkerBlue">Signed</th>
                    <td class="">
                        <canvas id="canvas_0" class="canvas1"></canvas>
                        <?=Html::button('Reset', ['class' => 'btn btn-primary', 'onclick' => 'ClearCanvasX(0);']);?>
                        <?=$form->field($model, 'statementsign')->HiddenInput(['id' => 'signature0'])->label(false)?>
                    </td>
                    <th class="DarkerBlue">Date:</th>
                    <td class="">
                        <?=$form->field($model, 'statementdate')->widget(DatePicker::class, ['size' => 'sm', 'name' => 'eventdate', 'pluginOptions' => ['showMeridian' => true, 'convertFormat' => true, 'format' => 'dd/mm/yyyy', 'useCurrent' => true]])->label(false)?>
                    </td>
                </tr>
            </table>
        </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 <= 3) {
            id = "signature" + x;
            cavid = "canvas_" + x;
            document.getElementById(id).value = document.getElementById(cavid).toDataURL();
            x++
        }
    }
    </script>