@extends('admin.layouts.admin')

@section('content')

<style>
  .hotline_icon {
      height: 100px;
      width: 100px;
  }
</style>

<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>Edit 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">
              @if($menu)
                <form class="form-horizontal" action="{{ route('admin.menus.update', $menu->id) }}" method="post">
                    {{ csrf_field() }}
                    {{ method_field('put') }}
                    <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="{{ $menu->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="{{ $menu->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">{{ $menu->details ?? '' }}</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="" autocomplete="name" autofocus>

                          @error('image')
                              <span class="invalid-feedback" role="alert">
                                  <strong>{{ $message }}</strong>
                              </span>
                          @enderror
                      </div>
                      <center>
                        <div class="col-md-4">
                            <img src="{{ asset($menu->image) }}" class="hotline_icon" alt="Emergency Number">
                            <input type="hidden" name="old_image" value="{{ $menu->image }}">
                        </div>
                      </center>
                      {{ Form::submit('Submit', ['class' => 'btn btn-success btn-sm']) }}    
                </form>
                @endif
            </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