@extends('layouts.app')

@section('sidebar')
    @include('sidebar')
@stop
@section('style')
<link rel="stylesheet" href="{{ asset("css/codemirror.css") }}">
    <style>
        .close {
            background-color: 0 !important;
        }
        .CodeMirror {
            /* line-height: 1.2em; */
            height: 75em;
            background-color: darkslategray;
            color: white;
        }
    </style>
@endsection

@section('content')
<div class="m-subheader ">
    <div class="d-flex align-items-center">
        <div class="mr-auto">
            <h3 class="m-subheader__title ">Constants Settings</h3><br>
        </div>
    </div>
</div>
<div class="m-content">
    <div class="m-portlet m-portlet--full-height ">
        <div class="m-portlet__body">
            @if(Session::has('error'))
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    </button>
                    {!! Session::get('error') !!}
                </div>
            @endif
            @if(Session::has('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    </button>
                    {!! Session::get('success') !!}
                </div>
            @endif
            <ul class="nav nav-tabs m-tabs-line m-tabs-line--danger m-tabs-line--2x" role="tablist">
                <li class="nav-item m-tabs__item">
                    <a class="nav-link m-tabs__link " href="{{ route('settings.create') }}">Admin Area</a>
                </li>
                <li class="nav-item m-tabs__item">
                    <a class="nav-link m-tabs__link active" data-toggle="tab" href="#">Client Area</a>
                </li>
                <li class="nav-item m-tabs__item">
                    <a class="nav-link m-tabs__link" href="/setting/IB-constant">IB Area</a>
                </li>
            </ul>

            <div class="tab-content">
                <div class="tab-pane active" role="tabpanel" id="client_setting">
                    {!! Form::open(array('url' => '/setting/client-constant/store','class'=>'m-form m-form--label-align-right','role'=>"form",'id'=>'config_create_form')) !!}
                        <div class="m-portlet__body">
                            <div class="m-form__section m-form__section--first">

                                <div class="form-group m-form__group row">
                                    {!! Html::decode(Form::label('file_name', 'File Name<span class="form-control-feedback">*</span>', ['class' => 'col-sm-2 control-label'])) !!}
                                    <div class="col-lg-6">
                                                                                {!!Form::select('file_name', $file_name ,null, ['class' => 'form-control m-input'])!!}
                                        {!! $errors->first('file_name', '<p class="form-control-feedback">:message</p>') !!}
                                    </div>
                                </div>

                                <div class="form-group m-form__group row">
                                    {!! Html::decode(Form::label('document_status_body', 'Body<span class="form-control-feedback">*</span>', ['class' => 'col-sm-2 control-label'])) !!}
                                    <div class="col-lg-8">
                                        <textarea name="client_constants" id="clientArea" class="form-control m-input" cols="120" rows="120">{{ $client_constants }}</textarea>
                                        {{-- {!! Form::textarea('document_status_body', $config, ['class' => 'summernote form-control']) !!} --}}
                                        {!! $errors->first('client_constants', '<p class="form-control-feedback">:message</p>') !!}
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="m-portlet__foot m-portlet__foot--fit">
                            <div class="m-form__actions m-form__actions">
                                <div class="row">
                                    <div class="col-lg-2"></div>
                                    <div class="col-lg-6">
                                        {!! Form::submit("Update", ['name' => 'Submit','class' => 'btn btn-primary']) !!}
                                        {!! link_to(URL::full(), "Cancel",array('class' => 'btn btn-secondary')) !!}
                                    </div>
                                </div>
                            </div>
                        </div>
                    {!! Form::close() !!}
                </div>
            </div>
        </div>
    </div>
</div>

@endsection
@section('script')
{{ Html::script('custom/summernote/summernote.js') }}
{{ Html::script('js/codemirror.js') }}
<script>
$('#file_name').on('change', function() {
    var file_name = $( '#file_name' ).val();
    var site_url = "client";

    $.get( base_url+"/setting/ajaxGetFile", {'file_name' : file_name, 'site_url' : site_url}, function( data ) {

        // $('#clientArea').val('');
        // $('#clientArea').val(data);
        getCodeMirror(data);
        (mApp.unblock('body'), true);


    });
    mApp.block('body', {
        overlayColor: '#000000',
        type: 'loader',
        state: 'success',
        message: 'Please Wait...'
    });

});

var editor = CodeMirror.fromTextArea(clientArea, {
    mode: "text/html",
    lineNumbers: true,
});

function getCodeMirror(value)
{
    var xyz = '';
    // initialize existing data
    editor.setValue (xyz);
    // delete history (undo history)
    editor.clearHistory ();
    // Clear the gutter?
    editor.clearGutter ();
    editor.setValue(value);
}

$("#config_create_form").validate({
    rules: {
        file_name:{
            required: true
        },
        clientArea: {
            required : true,
        }
    },
});

</script>
@endsection