@extends('layout.app')
@section('title','Form Permohonan')

@section('content')
<div class="m-grid__item m-grid__item--fluid m-wrapper">

    <!-- BEGIN: Subheader -->
    <div class="m-subheader ">
        <div class="d-flex align-items-center">
            <div class="mr-auto">
                <h3 class="m-subheader__title ">Form Permohonan</h3>
            </div>
        </div>
    </div>

    <!-- END: Subheader -->
    <div class="m-content">
        <div class="row">
            <div class="col-md-12">
                <!--begin::Portlet-->
                <div class="m-portlet m-portlet--tab">
                    {!! Form::open(['route' => 'form.permohonan.save', 'class' => 'm-form m-form--fit m-form--label-align-right','id' => 'form-permohonan','enctype'=>'multipart/form-data']) !!}
                    <div class="m-portlet__body">
                        <div class="form-group m-form__group">
                            <label for="uraian">
                                Judul
                            </label>
                            <input class="form-control m-input m-input--air" required id="judul" name="judul" value="{{old('judul')}}" >
                        </div>
                        <div class="form-group m-form__group">
                            <label for="uraian">
                                Uraian Permohonan
                            </label>
                            <textarea class="form-control m-input m-input--air" id="uraian" name="uraian" rows="3">{{old('uraian')}}</textarea>
                        </div>
                        <div class="form-group m-form__group">
							<button type="button" class="btn btn-info" id="btn-add">Tambah Requirement</button>
							<table class="table" style="margin-top: 20px;">
								<thead>
									<tr>
										<th style="width: 45%;">Requirement</th>
										<th style="width: 45%;">Notes</th>
										<th style="width: 10%;">#</th>
									</tr>
								</thead>
								<tbody id="t-bodi">
								</tbody>
							</table>
						</div>
                        <div class="form-group m-form__group">
                            <label for="fileName">
                                File Browser
                            </label>
                            <div></div>
                            <div class="custom-file">
                                <input type="file" class="custom-file-input" id="photo" name="photo">
                                <label class="custom-file-label" for="fileName">
                                    Choose file
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="m-portlet__foot m-portlet__foot--fit">
                        <div class="m-form__actions">
                            <button type="submit" class="btn btn-primary">
                                Submit
                            </button>
                            <button type="reset" class="btn btn-secondary">
                                Cancel
                            </button>
                        </div>
                    </div>
                    {!! Form::close() !!}
                </div>

                <!--end::Portlet-->
            </div>
        </div>
    </div>
</div>
<table class="m--hide" id="div-tr">
	<tr>
		<td>
			 <input class="form-control m-input m-input--air" required  name="requirement[]" value="">
		</td>
		<td>
			<textarea class="form-control m-input m-input--air" name="keterangan[]" rows="2"></textarea>
		</td>
		<td>
			<button type="button" onclick="$(this).parent().parent().remove();" class="btn btn-outline-danger btn-elevate btn-icon"><i class="la la-trash-o"></i></button>
		</td>
	</tr>
</table>
@endsection

@section('css')
@endsection


@section('js')
<script src="{{asset('assets/vendors/custom/select2/select2.js')}}" type="text/javascript"></script>
<script type="text/javascript">

	$(document).ready(function () {
		$("#btn-add").click(function(){
			$("#t-bodi").append($("#div-tr tbody").html());
		});
		
		$("#form-permohonan").submit(function(){
			if($("#t-bodi tr").length == 0){
				alert('Mohon input data requirement permohonan')
				return false;
			}
		});
	});
	
</script>
@endsection