@extends('adminlte::page') @section('content')
@section('css')
<style>
    table thead tr th{
        white-space: nowrap;
    }
</style>
@stop
<?php Fun::lang() ?>
<div class="title-page">
    <div class="page-bar">
        <ul class="page-breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> Dashboard</a></li>
            <li><a href="#">Construction</a></li>
            <li><a href="#">Budget</a></li>
            <li><a href="#">Budget Construction</a></li>
            <li><a href="#">Create</a></li>
        </ul>
    </div>
</div>
<div class="page">
    <div class="top-content">
        <div class="row">
            <div class="col-sm-12 col-xs-12">
                <div class="title-page">
                    <div class="pull-left">
                        <h3>Create Budget</h3>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12 col-xs-12">
            <div class="form-wrapper">
                {!! Form::open(array('route' => 'budget-construction.store','method'=>'POST', 'enctype'=>'multipart/form-data','autocomplete')) !!}
                <div class="row">
                    <div class="form-group col-sm-4 col-xs-12">
                        <label class="required">Prepared By</label>
                        {!! Form::text('prepared_by', null, array('placeholder' => 'Name','class' => 'form-control','required')) !!}
                    </div>
                    <div class="form-group col-sm-4 col-xs-12">
                        <label class="required">Project Name </label>
                        {!! Form::select('project_id', $projects, null, ['class' => 'form-control select2','required','id'=>'category-id']) !!}
                    </div>
                    <div class="form-group col-sm-4 col-xs-12">
                        <label class="required">Amount used (units) </label>
                        {!! Form::text('amount_of_house_used', null, array('placeholder' => 'Number','class' => 'form-control number-only','required','id'=>'amount_all_house_used')) !!}
                    </div>
                    <div class="form-group col-sm-4 col-xs-12">
                        <label class="required">Date</label>
                        {!! Form::text('date', date('d-m-Y'), array('laceholder'=>'Date','class' => 'form-control date_picker','required')) !!}
                    </div>
                    <div class="form-group col-sm-4 col-xs-12">
                        <label class="required">Other Type</label>
                        {!! Form::text('building_type', null, array('placeholder' => 'Type','class' => 'form-control','required')) !!}
                    </div>
                    <div class="form-group col-sm-4 col-xs-12">
                        <label class="required">Title</label>
                        {!! Form::textarea('title_boq', null, array('placeholder' => 'Title','class' => 'form-control','rows'=>'2','required')) !!}
                    </div>
                    <div class="form-group col-sm-4 col-xs-12">
                        <label class="required">Zone</label>
                        {!! Form::select('zone_id',$zones, null, array('class' => 'form-control select2','required','id'=>'zone_id')) !!}
                    </div>
                     <div class="row" style="padding:15px;">
                        {{-- <div class="form-group col-sm-4 col-xs-12">
                            <label class="required">Waste Materials(%)</label>
                            {!! Form::text('waste_materials', null, array('placeholder' => 'Waste Materials','class' => 'form-control number-only','required')) !!}
                        </div>
                        <div class="form-group col-sm-4 col-xs-12">
                            <label class="required">Waste Labour(%)</label>
                            {!! Form::text('waste_labour', null, array('placeholder' => 'Waste Labour','class' => 'form-control number-only','required')) !!}
                        </div> --}}
                    </div> 
                </div>
                 
                <div class="row">
                    <div style="border: 1px solid gray;padding: 15px;margin:15px;" id="boq-table-form">
                        
                        <div class="row" style="padding:15px;"> 
                            <div class="form-group col-sm-8 col-xs-12">
                                <label class="required">BOQ</label>
                                <table class="table table-striped table-bordered" id="table_boq" width="100%">
                                    <thead>
                                        <tr>
                                            <th width="5%">No</th>
                                            <th width="25%">
                                                <label class="required">
                                                    work type 
                                                </label>
                                            </th>
                                            <th width="25%">
                                                <label class="required">
                                                    labour($)
                                                </label>
                                            </th>
                                            <th width="25%">
                                                <label class="required">
                                                    material($)
                                                </label>
                                            </th>
                                            <th width="20%">
                                                <label class="required">
                                                    total($)
                                                </label>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody class="resultbody1">
                                        <tr>
                                            <td width="5%">
                                                <span>1</span>
                                            </td>
                                            <td  width="25%" >
                                                {!! Form::select('boq_work_type[]',$work_group_types, null, array('class' => 'form-control select2 boq_work_type','required','onchange'=>'check_unique(this)')) !!}
                                            </td>
                                            <td  width="25%" >
                                                <input type="text" class="form-control number-only boq" name="boq_labour[]" placeholder="Labour"  required>
                                            </td>
                                            <td  width="25%" >
                                                <input type="text" class="form-control number-only boq" name="boq_material[]" placeholder="Material" required>
                                            </td>
                                            <td  width="20%" >
                                                <input type="text" class="form-control number-only  " name="boq_total[]" placeholder="Total" readonly required>
                                            </td>
 
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="form-group col-sm-4 col-xs-12">
                                <label>Actual Used</label>
                                <table class="table table-striped table-bordered"  id="table_actual_used" width="100%">
                                    <thead>
                                        <tr>
                                            <th width="30%">
                                                <label>
                                                    labour($)
                                                </label>
                                            </th>
                                            <th width="30%">
                                                <label>
                                                    material($)
                                                </label>
                                            </th>
                                            <th width="30%">
                                                <label>
                                                    total($)
                                                </label>
                                            </th>
                                            <th width="10%">
                                                <label class=" ">
                                                    <span class="pull-right button_primary btn-sm plus_ens fa fa-plus" onclick="add_row_product(this)"></span>
                                                </label>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody class="resultbody2">
                                        <tr> 
                                            <td width="30%">
                                                <input type="text" class="form-control number-only actual"  placeholder="Labour" name="actual_labour[]"  >
                                            </td>
                                            <td width="30%">
                                                <input type="text" class="form-control number-only actual" placeholder="Material" name="actual_material[]"  >
                                            </td>
                                            <td width="30%">
                                                <input type="text" class="form-control number-only"  placeholder="Total" name="actual_total[]" >
                                            </td>
                                            <td width="10%">
                                                <button class="btn btn-sm btn-danger" disabled> <span class="fa fa-trash"></span></button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                        </div>
                        <div class="row" style="padding:15px;"> 
                            <div class="form-group col-sm-8 col-xs-12">
                                
                                <table class="table table-striped table-bordered"  width="100%">
                                    
                                    <tbody class="resultbody1">
                                        <tr> 
                                            <td  width="30%" colspan="2">
                                                <label class=" ">
                                                    GRAND TOTAL
                                                </label>
                                                 
                                            </td>
                                            <td  width="25%" >
                                                <input type="text" class="form-control number-only boq" name="greand_boq_labour" placeholder="GRAND Total Labour"  required readonly  >
                                            </td>
                                            <td  width="25%" >
                                                <input type="text" class="form-control number-only boq" name="greand_boq_material" placeholder="GRAND Total Material" required readonly>
                                            </td>
                                            <td  width="20%" >
                                                <input type="text" class="form-control number-only  " name="greand_boq_total" placeholder="GRAND Total Total" required readonly  >
                                            </td>
 
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <div class="form-group col-sm-4 col-xs-12">
                                <table class="table table-striped table-bordered"  width="100%"> 
                                    <tbody class="resultbody2">
                                        <tr> 
                                          <td width="30%">
                                                <input type="text" class="form-control number-only actual" placeholder="GRAND Total Labour" name="greand_actual_labour"  readonly >
                                            </td>
                                          <td width="30%">
                                                <input type="text" class="form-control number-only actual" placeholder="GRAND Total Material" name="greand_actual_material"     readonly  >
                                            </td>
                                          <td width="30%">
                                                <input type="text" class="form-control number-only" placeholder="GRAND Total  " name="greand_actual_total" readonly  >
                                            </td>
                                            <td width="10%"> 
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12 col-xs-12">
                        <div class="form-group">
                            <button type="submit" class="button_sm button_primary pull-right"><span class="fa fa-save"></span> Save</button>
                            <button type="button" onClick="javascript:history.go(-1)" class="button_sm button_warning pull-right">
                                <span class=" fa fa-arrow-circle-left"></span> Back</button>
                        </div>
                    </div>
                </div>
                {!! Form::close() !!}
            </div>
        </div>
    </div>
</div>
@endsection @section('js')
<script type="text/javascript">

    function check_unique(obj){
		/*let item_id = $(obj).val();
		let _this = $(obj);
		let dpl = false;
        let index = Number(_this.index());

		if(_this.val()=="") return false;

		$(".boq_work_type").each(function(i, val) {
			let exs_item_id = $(this).val();
			if (index != i) {
				if (exs_item_id == item_id) {
					dpl = true;
				}
			}
		});
		if (dpl == true) {
			_this.val('').change();
			alert("Data have already token !");
			return false;
		}*/
	}

    function add_row_product(obj)
    {
        var dt = new Date();
        var id = dt.getHours() + "" + dt.getMinutes() + "" + dt.getSeconds();
        var tr_class =  $(obj).closest("table").find('tbody').attr('class'); 
        id =   id +''+ $('#table_boq tr').length;

        var langth = $('#table_boq tr').length;
        var table_boq = ` 
                    <tr class="tr_id${id}">
                        <td >
                            <span>${langth}</span>
                        </td>
                        <td >
                            {!! Form::select('boq_work_type[]',$work_group_types, null, array('class' => 'form-control select2 boq_work_type','required','onchange'=>'check_unique(this)')) !!}
                        </td>
                        <td >
                            <input type="text" class="form-control number-only boq" name="boq_labour[]" placeholder="Labour"  required>
                        </td>
                        <td >
                            <input type="text" class="form-control number-only boq" name="boq_material[]" placeholder="Material" required>
                        </td>
                        <td >
                            <input type="text" class="form-control number-only  " name="boq_total[]" placeholder="Total" required readonly>
                        </td>
                    </tr>
                    `;
        var table_actual_used = ` 
                    <tr class="tr_id${id}" > 
                        <td >
                            <input type="text" class="form-control number-only actual"  placeholder="Labour" name="actual_labour[]" >
                        </td>
                        <td >
                            <input type="text" class="form-control number-only actual"  placeholder="Material" name="actual_material[]" >
                        </td>
                        <td >
                            <input type="text" class="form-control number-only "  placeholder="Total" name="actual_total[]"  >
                        </td>
                        <td>
                            <button class="btn btn-sm btn-danger bt-delete"  data-id="tr_id${id}" type="button"> <span class="fa fa-trash" ></span></button>
                        </td>
                    </tr>
                    `;
        var table = $(obj).closest("table");

        $("#table_boq tbody").append(table_boq); 
        $("#table_actual_used tbody").append(table_actual_used); 
        $(".select2").select2();
    }
  
    $(document).on('click','.bt-delete',function(){
        var id = $(this).data('id');
        $('.'+id).remove();

        $('#table_boq > tbody  > tr').each(function(index, tr) { 
            $(this).find("td:eq(0)").html(index+1);
         });
         GRAND_total();
    });
  
 
    $(document).on('change',".boq",function(){
        let boq_labour = Number($(this).closest('tr').find("input[name='boq_labour[]']").val());
        let boq_material = Number($(this).closest('tr').find("input[name='boq_material[]']").val());
        $(this).closest('tr').find("input[name='boq_total[]']").val( parseFloat(boq_material + boq_labour).toFixed(2) ) ;
        GRAND_total();

    });
    $(document).on('change',".actual",function(){
        GRAND_total();
        let actual_material = Number($(this).closest('tr').find("input[name='actual_material[]']").val());
        let actual_labour = Number($(this).closest('tr').find("input[name='actual_labour[]']").val());
        $(this).closest('tr').find("input[name='actual_total[]']").val( parseFloat(actual_labour + actual_material).toFixed(2) ) ;
    });
    function GRAND_total(){
        let greand_boq_labour = 0 ;
        $("input[name='boq_labour[]']").each(function() {
            greand_boq_labour += Number($(this).val());
        });
        $("input[name='greand_boq_labour']").val(parseFloat(greand_boq_labour).toFixed(2));

        let boq_material = 0 ;
        $("input[name='boq_material[]']").each(function() {
            boq_material += Number($(this).val());
        });
        $("input[name='greand_boq_material']").val(parseFloat(boq_material).toFixed(2));

 
        $("input[name='greand_boq_total']").val(parseFloat(greand_boq_labour + boq_material).toFixed(2));

        let actual_labour = 0 ;
        $("input[name='actual_labour[]']").each(function() {
            actual_labour += Number($(this).val());
        });
        $("input[name='greand_actual_labour']").val(parseFloat(actual_labour).toFixed(2));

        let actual_material = 0 ;
        $("input[name='actual_material[]']").each(function() {
            actual_material += Number($(this).val());
        });
        $("input[name='greand_actual_material']").val(parseFloat(actual_material).toFixed(2));

        $("input[name='greand_actual_total']").val(parseFloat(actual_labour + actual_material).toFixed(2));
    }
    

</script>
@endsection