@extends('layouts.default')

@section('content')


<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0">Welcome to Dashboard</h1>
          </div><!-- /.col -->
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">Home</a></li>
              <li class="breadcrumb-item active">Dashboard</li>
            </ol>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->

    <!-- /.content-header -->

    @if(session()->has('message'))
        <div class="alert alert-success">
            {{ session()->get('message') }}
        </div>
    @endif

    <section class="content">
       <div class="container-fluid">
          <div class="row">
            <div class="col-md-6">
             <div class="card card-primary">
            <div class="card-header">
                <h3 class="card-title">Form Builder</h3>
            </div>
            <form action="/formbuilder/create" method="put">
            <input name="_token" type="hidden" value="{{ csrf_token() }}"/>
                <div class="card-body">
                    <div class="form-group">
                        <label for="exampleSelectBorder">Select Form Name</code></label>
                            <select class="custom-select form-control-border" required name="form_id" id="exampleSelectBorder">
                                <option value=" ">Please Select</option>
                                @foreach($custom_forms as $key=>$val)
                                <option value="{{$val}}">{{ucwords($key)}}</option>
                                @endforeach
                            </select>
                    </div>
                    <div class="form-group">
                        <label for="exampleSelectBorder">Select Field Type</code></label>
                            <select class="custom-select form-control-border" required name="html_field_type" id="field_type">
                                <option value=" ">Please Select</option>
                                @foreach($field_types as $key=>$val)
                                <option value="{{$val}}">{{ucwords($key)}}</option>
                                @endforeach
                            </select>
                    </div>

                    <div class="form-group" id="data_source_type_div">
                        <label for="exampleSelectBorder">Data Source Type</code></label>
                            <select class="custom-select form-control-border" required name="data_source_type" id="data_source_type">
                                <option value=" ">Please Select</option>
                                <option value="masterlist">masterlist</option>
                                <option value="json">json</option>
                                <option value="api">api</option>
                                <option value="sql">sql</option>
                            </select>
                    </div>

                    <div class="form-group" id="data_source">
                        <label for="exampleSelectBorder">Data Source</code></label>
                            <select class="custom-select form-control-border" required name="option_id" id="data_source_options">
                                <option value=" ">Please Select</option> 
                                @foreach($masterlist as $key=>$val){
                                    <option value="{{$val}}">{{ucwords($key)}}</option>
                                }
                                @endforeach
                            </select>
                    </div>

                    <div class="form-group">
                        <label for="exampleInputRounded0">Label</label>
                        <input type="text" name = "label" class="form-control rounded-0" id="exampleInputRounded0" placeholder="Enter Label">
                    </div>

                    <div class="form-group">
                        <label for="exampleInputRounded0">DD Field Name</label>
                        <input type="text" name = "db_field" class="form-control rounded-0" id="exampleInputRounded0" placeholder="Enter Field Name">
                    </div>
                    
                    <div class="custom-control custom-checkbox">
                        <input class="custom-control-input" type="checkbox" name="is_required" id="customCheckbox1" value="1">
                        <label for="customCheckbox1" class="custom-control-label">Required</label>
                    </div>

                    <div class="form-group">
                        <label for="exampleInputRounded0">Width</label>
                        <input type="text" name = "width" class="form-control rounded-0" id="width" placeholder="Enter Width">
                    </div>

                    <div class="form-group">
                        <label for="exampleInputRounded0">Placeholder</label>
                        <input type="text" name = "placeholder" class="form-control rounded-0" id="placeholder" placeholder="Enter Placeholder">
                    </div>

                    <div class="form-group">
                        <label for="exampleInputRounded0">HelpText</label>
                        <input type="text" name = "help_text" class="form-control rounded-0" id="placeholder" placeholder="Help Text">
                    </div>
                    <div class="form-group">
                        <label for="exampleSelectBorder">Select Table Name</code></label>
                        <select class="custom-select form-control-border" required name="table_name" id="exampleSelectBorder">
                            <option value=" ">Please Select</option>
                            @foreach($table_list as $key)
                            <option value="{{$key->table_name}}">{{ucwords($key->table_name)}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="card-footer">
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>
            </form>
            </div>
            </div>    
          </div>
       </div>
    </section>
    </div> 



<script>
$("document").ready(function(){
    $(".alert-success").delay(2000).slideUp(300);
    $("#data_source_type_div").hide();
    $("#data_source").hide();
    $("#field_type").change(function(){
        var val = $("#field_type option:selected").text().toLowerCase();
        if(val=="select" || val=="multiselect"){
            $("#data_source_type_div").show();
        } else {
            $("#data_source_type_div").hide();
        }

    })
    $("#data_source_type_div").change(function(){
        var val = $("#data_source_type option:selected").text().toLowerCase();
        if(val=="masterlist"){
            $("#data_source").show();
        } else {
            $("#data_source").hide();
        }
    })
})
</script>

@stop