@extends('backend.layouts.app')
@section('content')
<style type="text/css">
a.btn{
	min-width: 100px;
}
</style>
<div class="col-xl-12">
	<div class="breadcrumb-holder">
		<h1 class="main-title float-left">Add Table</h1>
		<ol class="breadcrumb float-right">
			<li class="breadcrumb-item">Home </li>
			<li class="breadcrumb-item active">Add Table</li>
		</ol>
		<div class="clearfix"></div>
	</div>
</div>
<div class="container">
    <form method="post" action="{{route('crud.store')}}" id="myForm">
        <div class="row">
            {{csrf_field()}}
            <div class="col">
                <div class="card border-info">
        			<p class="badge badge-info" style="padding: 5px 10px;border-radius: 0;font-size:14px">Create Table & Column</p>
        			<div class="card-body">
        				<div class="form-row">
        					<div class="form-group col-sm-5">
        						<label class="control-label">Table Name</label>
        						<input type="text" class="form-control form-control-sm" name="table_name" id="" placeholder="Enter Table Name" value="" required>
        					</div>
        				</div>
                        <hr>
                        <div id="view-column-row">
                            <div class="form-row">
                            <div class="form-group col-sm-1">
                                <label class="control-label">SN</label>
                                <input type="text" class="form-control form-control-sm sn" name="serial_no[]" id="" placeholder="" value="1">
                            </div>
                            <div class="form-group col-sm-3">
                                <label class="control-label">Column Name</label>
                                <input type="text" class="form-control form-control-sm" name="column_name[]" id="" placeholder="Enter Column Name" value="" required>
                            </div>
                            <div class="form-group col-sm-2">
                                <label class="control-label">Input Type</label>
                                <select class="form-control form-control-sm" name="input_type[]">
                                    <option value="text">Text</option>
                                    {{-- <option value="select">Select Box</option> --}}
                                    <option value="textarea">Textarea</option>
                                </select>
                            </div>
                            <div class="form-group col-sm-2">
                                <label class="control-label">Data Type</label>
                                <select class="form-control form-control-sm" name="data_type[]">
                                    <option value="string">String</option>
                                    <option value="text">Text</option>
                                    <option value="integer">Integer</option>
                                    <option value="float">Float</option>
                                    <option value="double">Double</option>
                                    <option value="decimal">Decimal</option>
                                    <option value="date">Date</option>
                                    <option value="dateTime">Date & Time</option>
                                </select>
                            </div>
                            <div class="form-group col-sm-2">
                                <label class="control-label">Validation Rule</label>
                                <select class="form-control form-control-sm" name="validation_rule[]">
                                    <option value="">Optional</option>
                                    <option value="">Required</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <a style="margin: 28px 0 0 0; min-width:40px " class="btn btn-sm btn-success add"><i class="fa fa-plus"></i></a>
                            </div>
                        </div>
                        </div>
                        <button type="submit" class="btn btn-primary btn-sm" id="storeButton">Create CRUD</button>
        			</div>
        		</div>
            </div>
    	</div>
    </form>
</div>
{{-- Handlebar Template --}}
<script id="column-row" type="text/x-handlebars-template">
    <div class="form-row">
        <div class="form-group col-sm-1">
            <input type="text" class="form-control form-control-sm sn" name="serial_no[]" id="" placeholder="" value="@{{serial}}">
        </div>
        <div class="form-group col-sm-3">
            <input type="text" class="form-control form-control-sm" name="column_name[]" id="" placeholder="Enter Column Name" value="">
        </div>
        <div class="form-group col-sm-2">
            <select class="form-control form-control-sm" name="input_type[]">
                <option value="text">Text</option>
                <option value="textarea">Textarea</option>
            </select>
        </div>
        <div class="form-group col-sm-2">
            <select class="form-control form-control-sm" name="data_type[]">
                <option value="string">String</option>
                <option value="text">Text</option>
                <option value="integer">Integer</option>
                <option value="float">Float</option>
                <option value="double">Double</option>
                <option value="decimal">Decimal</option>
                <option value="date">Date</option>
                <option value="dateTime">Date & Time</option>
            </select>
        </div>
        <div class="form-group col-sm-2">
            <select class="form-control form-control-sm" name="validation_rule[]">
                <option value="">Optional</option>
                <option value="">Required</option>
            </select>
        </div>
        <div class="form-group">
            <a style="min-width:40px " class="btn btn-sm btn-success add"><i class="fa fa-plus"></i></a>
            <a style="min-width:40px " class="btn btn-sm btn-danger remove"><i class="fa fa-trash"></i></a>
        </div>
    </div>
</script>
@endsection
@section('page_script')
<script>
    $(document).on('click','.add',function(){
        var serial = parseInt($('.sn').last().val());
        var source   = $("#column-row").html();
		var template = Handlebars.compile(source);
        var data ={serial:serial+1}
		$("#view-column-row").append(template(data));
    });

    $(document).on('click','.remove',function(){
        $(this).closest(".form-row").remove();
    });
</script>
@endsection