@extends('adminlte::page')

@section('css')
    <link rel="stylesheet" style="text/css" href="{{ asset('vendor/jsonform/deps/opt/bootstrap.css') }}" />
    <link rel="stylesheet" style="text/css" href="{{ asset('vendor/jquery/jquery.datetimepicker.min.css') }}" />
@stop

@section('content')
    <!-- content -->
    <section class="content" style="padding: 40px;">
        <div class="row">
            @include('layouts.message')
            <div class="col-xs-12">
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title">Create {{$configTypeName}} Config</h3>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        <a href="{{action('ConfigController@index')}}" title="Back" style="float: left;">
                            <button class="btn btn-warning btn-sm"><i class="fa fa-arrow-left" aria-hidden="true"></i> Back</button>
                        </a>
                        <br><br>
                        <div>
                            <form class="jsonForm" method="POST" action="{{ action('ConfigController@store') }}">
                                <input name="_token" type="hidden" value="{{ csrf_token() }}"/>
                            </form>
                        </div>
                        <!-- /.box-body -->
                    </div>
                </div>
            </div>
        </div>
    </section>

@stop

@push('js')
<script type="text/javascript" src="{{ asset('vendor/jsonform/deps/jquery.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('vendor/jsonform/deps/underscore.js') }}"></script>
    <script type="text/javascript" src="{{ asset('vendor/jsonform/deps/opt/jsv.js') }}"></script>
    <script type="text/javascript" src="{{ asset('vendor/jsonform/deps/opt/ace/ace.js') }}"></script>
    <script type="text/javascript" src="{{ asset('vendor/jsonform/lib/jsonform.js') }}"></script>
    <script src="{{ asset('vendor/jquery/jquery.datetimepicker.full.min.js') }}"></script>

    <script type="text/javascript">
        var jsonFormData = ({!! $formJson !!})
        jsonFormData.onSubmit = function (errors, values) {
            if (errors) {
                console.log(errors);
                return;
            }
            return true;
        }

        $("form.jsonForm").jsonForm(jsonFormData)

        $('input[name*="begin"],input[name*="end"]')
            .attr("autocomplete", "off") 
            .datetimepicker({
                format:'Y/m/d H:i',
                dayOfWeekStart: 1,
                // step: 5,
                startDate: '2001/01/01',
                minDate: '2001/01/01',
                maxDate: '2001/01/07'
            })

        $(document).ready(function() {
            $('input[name*="end"]').change(function() {
                var endIndex = $('input[name*="end"]').index($(this));
                $('input[name*="begin"]').eq(endIndex + 1).val($(this).val());
            })
            convertToJsonTextarea($("div.textarea-json textarea"))
        })         
    </script>

@endpush