<?php

use yii\helpers\Html;
use yii\widgets\ActiveForm;
$fueltypes = ['Diesel' => 'Diesel', 'Unleaded' => 'Unleaded', 'Other' => 'Other'];
$status = ['Active' => 'Active', 'Inactive' => 'Inactive', 'Deleted' => 'Deleted'];
/* @var $this yii\web\View */
/* @var $model backend\models\Fueldatabe */
/* @var $form yii\widgets\ActiveForm */
?>

<script>
function saveField(id, field, value) {
	$.ajax({
		type: "POST",
		url: "/NGauge/fueldata/savefield",
		data: {id: id, field: field, value: value},
		})
	.done(function(result) {
		result = JSON.parse(result);
			$('#message').html(result.message);
			$('#flashmessage').delay(500).fadeIn('normal', function() {
				$(this).delay(2500).fadeOut();
			});
			$.pjax.reload({container: '#rows', async:false});
	});
}
function addRow() {
	id = "<?= isset($model->id) ? $model->id : Yii::$app->session->get('fueldatatempid'); ?>";
	$.ajax({
		type: "POST",
		url: "/NGauge/fueldata/addrow",
		data: {id: id},
		})
	.done(function(result) {
		result = JSON.parse(result);
			$('#message').html(result.message);
			$('#flashmessage').delay(500).fadeIn('normal', function() {
				$(this).delay(2500).fadeOut();
			});
			$.pjax.reload({container: '#rows', async:false});
	});
}
function removeRow(id) {
	$.ajax({
		type: "POST",
		url: "/NGauge/fueldata/deleterow",
		data: {id: id},
		})
	.done(function(result) {
		result = JSON.parse(result);
			$('#message').html(result.message);
			$('#flashmessage').delay(500).fadeIn('normal', function() {
				$(this).delay(2500).fadeOut();
			});
			$.pjax.reload({container: '#rows', async:false});
	});
}
</script>

<div class="fueldatabe-form">
	<?php $form = ActiveForm::begin(); ?>
		<?php \yii\widgets\Pjax::begin(['id' => 'rows']); ?>
			<?php foreach ($model->rows as $key => $model) { ?>
				<div class="row justify-content-end">
					<div class="mb-2">
						<?= HTML::Button('<i class="fa fa-plus"></i>', ['onclick' => 'addRow()', 'class' => 'btn btn-primary']) ?>
						<?= HTML::Button('<i class="fa fa-minus"></i>', ['onclick' => "removeRow('$model->id')", 'class' => 'btn btn-danger']) ?>
					</div>
				</div>
				<div class="row d-none d-xl-flex">
					<div class="col-1 DarkerBlueC">Vehicle Reg</div>
					<div class="col-1 DarkerBlueC">Driver</div>
					<div class="col-1 DarkerBlueC">Card No</div>
					<div class="col-1 DarkerBlueC">Date</div>
					<div class="col-1 DarkerBlueC">Mileage</div>
					<div class="col-1 DarkerBlueC">Type</div>
					<div class="col-1 DarkerBlueC">QTY</div>
					<div class="col-1 DarkerBlueC">Price Per Litre</div>
					<div class="col-1 DarkerBlueC">Price</div>
					<div class="col-1 DarkerBlueC">VAT</div>
					<div class="col-1 DarkerBlueC">Total</div>
					<div class="col-1 DarkerBlueC">Status</div>
				</div>
				<div class="row">
					<div class="col-12 d-xl-none data-label px-0">Vehicle Reg</div>
					<div class="col-12 col-xl-1 pl-0 pr-1 py-1"><?= $form->field($model, 'vehicle')->dropdownlist($vehicles, ['prompt' => 'Please Select', 'onChange' => "saveField('$model->id', 'vehicle', $(this).val())"])->label(false) ?></div>
					<div class="col-12 d-xl-none data-label px-0">Driver</div>
					<div class="col-12 col-xl-1 p-xl-1 px-0"><?= $form->field($model, 'driver')->dropdownlist($drivers, ['prompt' => 'Please Select', 'onChange' => "saveField('$model->id', 'driver', $(this).val())"])->label(false) ?></div>
					<div class="col-12 d-xl-none data-label px-0">Card No</div>
					<div class="col-12 col-xl-1 p-xl-1 px-0"><?= $form->field($model, 'cardno')->textInput(['onBlur' => "saveField('$model->id', 'cardno', $(this).val())"])->label(false) ?></div>
					<div class="col-12 d-xl-none data-label px-0">Date</div>
					<div class="col-12 col-xl-1 p-xl-1 px-0"><?= $form->field($model, 'date')->widget(\kartik\date\DatePicker::class, ['type' => \kartik\date\DatePicker::TYPE_INPUT, 'pluginOptions' => ['showMeridian' =>true, 'convertFormat' => true, 'format' => 'dd/mm/yyyy']])->label(false) ?></div>
					<div class="col-12 d-xl-none data-label px-0">Mileage</div>
					<div class="col-12 col-xl-1 p-xl-1 px-0"><?= $form->field($model, 'odometer')->textInput(['onBlur' => "saveField('$model->id', 'odometer', $(this).val())"])->label(false) ?></div>
					<div class="col-12 d-xl-none data-label px-0">Type</div>
					<div class="col-12 col-xl-1 p-xl-1 px-0"><?= $form->field($model, 'type')->dropdownlist($fueltypes, ['prompt' => 'Please Select...', 'onChange' => "saveField('$model->id', 'type', $(this).val())"])->label(false) ?></div>
					<div class="col-12 d-xl-none data-label px-0">QTY</div>
					<div class="col-12 col-xl-1 p-xl-1 px-0"><?= $form->field($model, 'quantity')->textInput(['onBlur' => "saveField('$model->id', 'quantity', $(this).val())"])->label(false) ?></div>
					<div class="col-12 d-xl-none data-label px-0">Price Per Litre</div>
					<div class="col-12 col-xl-1 p-xl-1 px-0"><?= $form->field($model, 'ppl')->textInput(['onBlur' => "saveField('$model->id', 'ppl', $(this).val())"])->label(false) ?></div>
					<div class="col-12 d-xl-none data-label px-0">Price</div>
					<div class="col-12 col-xl-1 p-xl-1 px-0"><?= $form->field($model, 'price')->textInput(['onBlur' => "saveField('$model->id', 'price', $(this).val())"])->label(false) ?></div>
					<div class="col-12 d-xl-none data-label px-0">VAT</div>
					<div class="col-12 col-xl-1 p-xl-1 px-0"><?= $form->field($model, 'vat')->textInput(['onBlur' => "saveField('$model->id', 'vat', $(this).val())"])->label(false) ?></div>
					<div class="col-12 d-xl-none data-label px-0">Total</div>
					<div class="col-12 col-xl-1 p-xl-1 px-0"><?= $form->field($model, 'total')->textInput(['onBlur' => "saveField('$model->id', 'total', $(this).val())"])->label(false) ?></div>
					<div class="col-12 d-xl-none data-label px-0">Status</div>
					<div class="col-12 col-xl-1 pl-1 pr-0 py-1"><?= $form->field($model, 'status')->textInput(['onBlur' => "saveField('$model->id', 'status', $(this).val())"])->label(false) ?></div>
				</div>
			<?php } ?>
		<?php \yii\widgets\Pjax::end(); ?>
		<div class="form-group">
			<?= Html::submitButton('Save', ['class' => 'btn btn-primary']) ?>
		</div>
	<?php ActiveForm::end(); ?>
</div>
