@extends('layouts.data-entry')
@section('title','GIMS')
@section('script')
<style>
    .button {
        background-color: #3077bb;
        border: none;
        color: white;
        padding: 5px 10px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        margin: 4px 2px;
        cursor: pointer;
        border-radius: 10px;
    }

    .button:hover {
        background-color: #e68524;
    }

    .buttond {
        background-color: #db1709;
        border: none;
        color: white;
        padding: 5px 10px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        margin: 4px 2px;
        cursor: pointer;
        border-radius: 10px;
    }

    .buttond:hover {
        background-color: #e68524;
    }

    hr {
        display: block;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
        margin-left: auto;
        margin-right: auto;
        border-style: inset;
        border-width: 1px;
        border-color: #80d8ff;
    }
</style>

<script>
    $('.btncancel').click(function(e) {

        e.preventDefault(); // do not submit form
        document.location.href = "{{ route('buildings.index') }}";

    });

    function validateForm() {
        var x = document.forms["equipment-form"]["purchase_order_date1"].value;
        var y = document.forms["equipment-form"]["purchase_order_date2"].value;
        if (x > y) {
            alert("End Date should not be earlier than start Date");


            return false;
        }
    }
    $('#asset_category_id').change(function() {
        var cat_id = $(this).val();
        $.ajax({
            url: "{{ route('get-sub-category')}}",
            type: "post",
            data: {
                _token: "{{ csrf_token() }}",
                cat_id: cat_id
            },
            success: function(response) {
                if (typeof(response) != "object") {
                    response = JSON.parse(response);
                }
                var sub_cat_html = "<option value='' selected disabled>--Select Any One--</option>";
                if (response.status) {
                    $.each(response.data, function(key, value) {
                        sub_cat_html += "<option value='" + value.id + "'>" + value.asset_sub_category_name + "</option>";
                    });
                }
                $('#asset_sub_category_id').html(sub_cat_html);
            }
        });
    });

    function validateForm() {
        var yearofconstruction = document.forms["equipment-form"]["purchase_order_date1"].value;
        var yearofcompletion = document.forms["equipment-form"]["purchase_order_date2"].value;
        var todayDate = new Date().toISOString().slice(0, 10);

        if (yearofconstruction > todayDate) {
            alert("Year of Construction  should not be future Date");


            return false;
        }

        if (yearofcompletion > todayDate) {
            alert("Year of Completion  should not be future Date");


            return false;
        }

        if (yearofconstruction > yearofcompletion) {
            alert("Year of Completion  Date should not be earlier than Year of Construction Date");


            return false;
        }

    }


    //attaching "change" event to the file upload button
    document.getElementById("file_path").addEventListener("change", validateFile)

function validateFile(){
  const allowedExtensions =  ['pdf','jpeg','jpg','png'],
        sizeLimit = 5000000; // 5 megabyte
  
  // destructuring file name and size from file object
  const { name:fileName, size:fileSize } = this.files[0];
  
  /*
  * if the filename is apple.png, we split the string to get ["apple","png"]
  * then apply the pop() method to return the file extension (png)
  *
  */
  const fileExtension = fileName.split(".").pop();
  
  /* 
    check if the extension of the uploaded file is included 
    in our array of allowed file extensions
  */
  if(!allowedExtensions.includes(fileExtension)){
    alert("Please upload only jpg, jpeg and png files");
    this.value = null;
  }else if(fileSize > sizeLimit){
    alert("File size too large")
    this.value = null;
  }
}

</script>
@endsection
@section('content')
<div class="page-content fade-in-up">

    <div class="row">
        <div class="col-lg-12">
            <div class="ibox">
                <div class="ibox-head">
                    <div class="ibox-title">Building Registration Form</div>

                </div>
                <div class="ibox-body">

                    {{ Form::open(['url'=>route('buildings.store'), 'onsubmit'=>'return validateForm()', 'name'=>'equipment-form','id'=>'equipment-form', 'files'=>'true'] )}}
                    @csrf

                    <center>
                        <p class="text-warning"><em>Organisation where the Building will be registered</em></p>
                    </center>

                    @include('data_entry.section.uagency-hirerchy')
                    <hr>

                    <div class="row">
                        <div class="col-2">
                        </div>
                        <div class="col-10">

                            <div class="form-group row">
                                <label for="" class="col-sm-2">Land Detail<span class="required">*</span>: </label>
                                <div class="col-sm-6">
                                    <select name="landdetail" required id="landdetail" class="form-control form-control-sm">
                                        <option value="" selected disabled>--Select--</option>
                                        @if($land_data)
                                        @foreach($land_data as $landdetail)
                                        <option value="{{ $landdetail->id }}">{{ $landdetail->identification_code .' -- '.$landdetail->lrc_no .' -- '.$landdetail->location}}</option>
                                        @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>

                        </div>
                    </div>
                    <hr>

                    <div class="row">
                        <div class="col-1"></div>
                        <div class="col-5">

                            <div class="form-group row">
                                <label for="" class="col-sm-4">Building Category <span class="required">*</span>: </label>
                                <div class="col-sm-8">
                                    <select required id="asset_category_id" class="form-control form-control-sm" name="asset_category_id">
                                        <option value="" selected disabled>--Select--</option>
                                        @if($asset_category_data)
                                        @foreach($asset_category_data as $cat_data)
                                        <option value="{{ $cat_data->id }}">{{ $cat_data->asset_category_name }}</option>
                                        @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-5">
                            <div class="form-group row">
                                <label for="" class="col-sm-4">Building Sub-Category <span class="required">*</span>: </label>
                                <div class="col-sm-8">
                                    <select required id="asset_sub_category_id" class="form-control form-control-sm" name="asset_sub_category_id">
                                        <option value="" selected disabled>--Select--</option>

                                    </select>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="row">
                        <div class="col-1"></div>
                        <div class="col-5">
                            <div class="form-group row">
                                <label for="" class="col-sm-4">Block <span class="required">*</span>: </label>
                                <div class="col-sm-8">
                                    <input type="text" name="block" required class="form-control form-control-sm " id="block">
                                </div>
                            </div>
                        </div>
                        <div class="col-5">
                            <div class="form-group row">
                                <label for="" class="col-sm-4">Actual Cost (Nu.) <span class="required">*</span>: </label>
                                <div class="col-sm-8">
                                    <input type="text" name="actualcost" required class="form-control form-control-sm" pattern="[0-9.]*" maxlength="12" id="actualcost">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-1"></div>
                        <div class="col-5">
                            <div class="form-group row">
                                <label for="" class="col-sm-4">Year of Construction <span class="required">*</span>: </label>
                                <div class="col-sm-8">
                                    <input type="date" name="purchase_order_date1" required class="form-control form-control-sm" placeholder="Enter purchase date" id="purchase_order_date1">
                                </div>
                            </div>
                        </div>
                        <div class="col-5">
                            <div class="form-group row">
                                <label for="" class="col-sm-4">Year of Completion <span class="required">*</span>: </label>
                                <div class="col-sm-8">
                                    <input type="date" name="purchase_order_date2" class="form-control form-control-sm" required placeholder="Enter purchase date" id="purchase_order_date2">
                                </div>
                            </div>
                        </div> 
                    </div>
                    <hr>

                    <div class="row">
                        <div class="col-1"></div>
                        <div class="col-5">
                            <div class="form-group row">
                                <label for="" class="col-sm-4">Foundation <span class="required">*</span>: </label>
                                <div class="col-sm-8">
                                    <select name="foundation" id="foundation" required class="form-control form-control-sm">
                                        <option value="" disabled selected>--Select--</option>
                                        @if($foundation)
                                        @foreach($foundation as $fd)
                                        <option value="{{ $fd->id }}">{{ $fd->foundation_name }}</option>
                                        @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="col-5">
                            <div class="form-group row">
                                <label for="" class="col-sm-4">Super Structure <span class="required">*</span>: </label>
                                <div class="col-sm-8">
                                    <select name="sstructure" id="sstructure" required class="form-control form-control-sm">
                                        <option value="" disabled selected>--Select--</option>
                                        @if($sstructure)
                                        @foreach($sstructure as $sst)
                                        <option value="{{ $sst->id }}">{{ $sst->structure }}</option>
                                        @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
                        </div>
                        
                        
                    </div>

                    <div class="row">
                        <div class="col-1"></div>
                        <div class="col-5">
                            <div class="form-group row">
                                <label for="" class="col-sm-4">Flooring <span class="required">*</span>: </label>
                                <div class="col-sm-8">
                                    <select name="flooring" id="flooring" required class="form-control form-control-sm">
                                        <option value="" disabled selected>--Select--</option>
                                        @if($flooring)
                                        @foreach($flooring as $fl)
                                        <option value="{{ $fl->id }}">{{ $fl->flooring_name }}</option>
                                        @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="col-5">
                            <div class="form-group row">
                                <label for="" class="col-sm-4">Partition Wall <span class="required">*</span>: </label>
                                <div class="col-sm-8">
                                    <select name="walls" id="walls" required class="form-control form-control-sm">
                                        <option value="" disabled selected>--Select--</option>
                                        @if($wall)
                                        @foreach($wall as $wl)
                                        <option value="{{ $wl->id }}">{{ $wl->wall_name }}</option>
                                        @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
                        </div>
                        

                        
                    </div>
                    <div class="row">
                        <div class="col-1"></div>
                        <div class="col-5">
                            <div class="form-group row">
                                <label for="" class="col-sm-4">Roofing <span class="required">*</span>: </label>
                                <div class="col-sm-8">
                                    <select name="roofing" id="roofing" required class="form-control form-control-sm">
                                        <option value="" disabled selected>--Select--</option>
                                        @if($roofing)
                                        @foreach($roofing as $rf)
                                        <option value="{{ $rf->id }}">{{ $rf->roofing_name }}</option>
                                        @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-5">
                            <div class="form-group row">
                                <label for="" class="col-sm-4">Ceiling <span class="required">*</span>: </label>
                                <div class="col-sm-8">
                                    <select name="ceiling" id="ceiling" required class="form-control form-control-sm">
                                        <option value="" disabled selected>--Select--</option>
                                        @if($ceiling)
                                        @foreach($ceiling as $cl)
                                        <option value="{{ $cl->id }}">{{ $cl->ceiling_name }}</option>
                                        @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
                        </div>
                        
                    </div>

                    

                    <div class="row">
                        <div class="col-1"></div>
                        <div class="col-5">
                            <div class="form-group row">
                                <label for="" class="col-sm-4">Ceiling Height (mtr.) <span class="required">*</span>: </label>
                                <div class="col-sm-8">
                                <input type="text" name="ceiling_height" required class="form-control form-control-sm" pattern="[0-9.]*"   id="ceiling_height">
                                </div>
                            </div>
                        </div>
                        <div class="col-5">
                            <div class="form-group row">
                                <label for="" class="col-sm-4">No. of Rooms <span class="required">*</span>: </label>
                                <div class="col-sm-8">
                                <select name="no_of_rooms" id="no_of_rooms" required class="form-control form-control-sm">
                                        <option value="" disabled selected>--Select--</option>
                                        @for($i=1;$i<501;$i++) <option value="{{$i}}">{{$i}}</option>
                                            @endfor;

                                    </select>
                                </div>
                            </div>
                        </div>  
                    </div>

                    <div class="row">
                        <div class="col-1"></div>
                        <div class="col-5">
                            <div class="form-group row">
                                <label for="" class="col-sm-4">Plinth Area (sqmtr.) <span class="required">*</span>: </label>
                                <div class="col-sm-8">
                                <input type="text" name="plinth" required class="form-control form-control-sm" pattern="[0-9.]*" maxlength="12" id="plinth">
                                </div>
                            </div>
                        </div>
                        <div class="col-5">
                            <div class="form-group row">
                                <label for="" class="col-sm-4">No. of Storied <span class="required">*</span>: </label>
                                <div class="col-sm-8">
                                    <select name="storied" id="storied" required class="form-control form-control-sm">
                                        <option value="" disabled selected>--Select--</option>
                                        @for($i=1;$i<51;$i++) <option value="{{$i}}">{{$i}}</option>
                                            @endfor;

                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>

                    <hr>

                    <div class="row">
                        <div class="col-1"></div>
                        <div class="col-5">
                            <div class="form-group row">
                                <label for="" class="col-sm-4">Purpose :</label>
                                <div class="col-sm-8">
                                    <textarea name="asset_description" id="asset_description" rows="5" style="resize: none;" class="form-control"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="col-5">
                            <div class="form-group row">
                                <label for="" class="col-sm-4">Remarks :</label>
                                <div class="col-sm-8">
                                    <textarea name="remarks" id="remarks" rows="5" style="resize: none;" class="form-control"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="row">
                        <div class="col-1"></div>
                        <div class="col-5">
                            <div class="form-group row">
                                <label for="" class="col-sm-4">File Upload: </label>
                                <div class="col-sm-8">
                                    <input type="file" name="file_path" id="file_path">
                                    <span style="color:red;"> Acepted file format are PDF,JPG,JEPG,PNG and Maximum file size should be 5mb.)</span>
                                </div>
                            </div>

                        </div>
                    </div>




                    <hr>
                    <div class="form-group row">
                        <div class="col-sm-12">
                            <div class="row">
                                <div class="col-4"></div>
                                <div class="col-3"> <button class="btn button" type="submit"><i class="fa fa-paper-plane"></i> Submit to Approver</button></div>
                                <div class="col-4"> <button class="btn  buttond btncancel" type="reset"><i class="fa fa-trash"></i> Cancel </button></div>
                                <div class="col-1"></div>
                            </div>
                        </div>
                    </div>

                    {{ Form::close() }}
                </div>
            </div>
        </div>

    </div>

</div>
@endsection