@extends('admin.layouts.admin')

@section('content')

<div class="">
  <div class="page-title">
    <div class="title_left">
      <h3>Menu Management</small></h3>
    </div>
  </div>
  <div class="clearfix"></div>
  <div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
      <div class="x_panel">
        <div class="x_title">
          <h2>Create Menu</h2>
          <ul class="nav navbar-right panel_toolbox">
            <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
            </li>
            <li><a class="close-link"><i class="fa fa-times"></i></a>
            </li>
          </ul>
          <div class="clearfix"></div>
        </div>
        <div class="x_content">  
          <div class="row">
            <div class="col-md-12">
                <form class="form-horizontal" action="{{ route('admin.menus.store') }}" method="post" enctype="multipart/form-data" >
                    {{ csrf_field() }}
                    <div class="form-group {{ $errors->has('title') ? 'has-error' : '' }}">
                        <label class="control-label col-sm-2 required" for="title">Title</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="title" name="title" required="required" autocomplete="off" value="{{ old('title') ?? '' }}" />
                            @if($errors->has('title'))
                              <p class="text-danger">{{ $errors->first('title') }}</p>
                            @endif
                        </div>
                    </div>
                    <div class="form-group {{ $errors->has('link') ? 'has-error' : '' }}">
                        <label class="control-label col-sm-2 required" for="link">Link</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="link" name="link" required="required" autocomplete="off" value="{{ old('link') ?? '' }}" />
                            @if($errors->has('link'))
                              <p class="text-danger">{{ $errors->first('link') }}</p>
                            @endif
                        </div>
                    </div>
                    <div class="form-group {{ $errors->has('details') ? 'has-error' : '' }}">
                        <label class="control-label col-sm-2" for="details">Details</label>
                        <div class="col-sm-10">
                          <textarea name="details" rows="10" cols="40" class="form-control tinymce-editor"></textarea>
                          @if($errors->has('details'))
                            <p class="text-danger">{{ $errors->first('details') }}</p>
                          @endif
                        </div>
                    </div>
                    <div class="form-group {{ $errors->has('details') ? 'has-error' : '' }}">
                        <label for="icon" class="col-sm-2 col-form-label control-label">{{ __('Icon') }}</label>

                        <div class="col-md-6">
                            <input id="image" type="file" class="form-control @error('image') is-invalid @enderror" name="image" value="{{ old('image') }}" required autocomplete="name" autofocus>

                            @error('image')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                    </div>      
                    {{ Form::submit('Submit', ['class' => 'btn btn-success btn-sm']) }} 
                </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

@endsection

@section('script')
<script>
  $(function () {
    $('.datepicker').datetimepicker({
      format: 'YYYY-MM-DD'
    });
  });
</script>

<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>  
<script type="text/javascript">
    tinymce.init({
    selector: "textarea",
    plugins: [
    "code ",
    "paste"
    ],
    toolbar: "undo redo | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link code ",
    menubar:false,
    statusbar: false,
    content_style: ".mce-content-body {font-size:15px;font-family:Arial,sans-serif;}",
    height: 200	
    });
</script>
@endsection