@extends('layouts.app')

@section('content')
<script src="https://cdn.tiny.cloud/1/r9rrojfprcjsqeclygvlu8h06khye7qen3821qj94wp2pyqu/6/tinymce.min.js" referrerpolicy="origin"></script>
<style>
           
            img {
                max-width: 300px;
                max-height: 300px;
                min-width: 300px;
                min-height: 300px;
            }
            input[type="file"] {
                margin-top: 5px;
            }
            .heading {
                font-family: Montserrat;
                font-size: 45px;
                color: green;
            }
        </style>
<div class="container"> <div class="row justify-content-center"> <div class="col-md-12"> <div class="card"> <div
    class="card-header">Add Store</div>
  
    <div class="card-body">
        <form method="post" action="{{route('stores.store')}}" enctype="multipart/form-data">
            @csrf
            <div class="mb-4">
                <label for="title" class="form-label"><h5>Store Title</h5></label>
                <input type="text" required class="form-control" name="store_title" id="store_title" value="">
            </div>
            <div class="mb-4">
                <label for="title" class="form-label"><h5>Store Slug</h5></label>
                <input type="text" required class="form-control" name="store_slug" id="store_slug" value="">
            </div>
             <div class="mb-4">
                <label for="store_heading" class="form-label"><h5>Store H1</h5></label>
                <input type="text" required class="form-control" name="store_heading" id="store_heading" value="">
            </div>
              <div class="mb-4">
                <label for="title" class="form-label"><h5>SEO Title</h5></label>
                <input type="text" required class="form-control" name="seo_title" id="seo_title" value="">
            </div>
             <div class="mb-4">
                <label for="focus_keywords" class="form-label"><h5>Focus Keywords</h5></label>
                <input type="text" class="form-control" name="focus_keywords" id="focus_keywords" value="">
            </div>
              <div class="mb-4">
                <label for="title" class="form-label"><h5>SEO Description</h5></label>
                <input type="text" required class="form-control" name="seo_desc" id="seo_desc" value="">
            </div>
                         <div class="mb-4">
                <label for="title" class="form-label"><h5>Change Frequency</h5></label>
                <div class="form-check">
  <input class="form-check-input" type="radio"  value="daily" name="change_frequency" id="daily">
  <label class="form-check-label" for="daily">
    Daily
  </label>
</div>
 <div class="form-check">
  <input class="form-check-input" type="radio"  value="weekly" name="change_frequency" id="weekly">
  <label class="form-check-label" for="weekly">
    Weekly
  </label>
</div>
 <div class="form-check">
  <input class="form-check-input" type="radio"  value="monthly" name="change_frequency" id="monthly">
  <label class="form-check-label" for="monthly">
    Monthly
  </label>
</div>
            </div>
            <div class="mb-4">
                <label for="title" class="form-label"><h5>Priority</h5></label>
                <select class="form-control" name="sitemap_priority">
                    <option value="">Please select priority</option>
                    @for($i=0.1;$i<=1.0;$i=$i+0.1)
                    <option  value="{{$i}}">{{$i}}</option>
                    @endfor
                </select>
            </div>
            <div class="mb-4">
                <label for="content" class="form-label"><h5>Store Description</h5></label>
                <textarea id="store_description" name="store_description" class="form-control"
                                            rows="20" cols="80" ></textarea>
            </div>
            <div class="mb-4">
                <label for="content" class="form-label"><h5>Home URL</h5></label>
                <input type="text" required class="form-control" name="home_url" id="home_url" value="">
            </div>
            <div class="mb-4">
                <label for="content" class="form-label"><h5>Affiliate URL</h5></label>
                <input type="text" required class="form-control" name="affiliate_url" id="affiliate_url" value="">

            </div>
                <div class="row">
                <div class="col-md-4">
              <div class="mb-4">
                <label for="featured_image" class="form-label"><h5>Thumbnail</h5></label>
              <div class="holder">
                <img id="imgPreview" src="" alt="pic" />
            </div>

            <input type="file" required name="featured_image"
                   id="featured_image"  />
            </div>
            </div>
            <div class="col-md-4">
                <div class="mt-5">
                            
                <label for="image_alt" class="form-label"><h5>Thumbnail Alt</h5></label>
                <input type="text" required class="form-control" name="image_alt" id="image_alt" value="">
                   <label for="image_title" class="mt-2" class="form-label"><h5>Thumbnail Title</h5></label>
                <input type="text" required class="form-control" name="image_title" id="image_title" value="">
                
                </div>
            </div>
            </div>
             <div class="mb-4">
                <label for="content" class="form-label"><h5>Extra Info</h5></label>
                <textarea id="extra_info" name="extra_info" class="form-control"
                                            rows="20" cols="80" ></textarea>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>
</div>
</div>
</div>
</div>
<script>
tinymce.PluginManager.add('faq', function(editor, url) {
  var openDialog = function () {
    return editor.windowManager.open({
      title: 'Add FAQ',
      body: {
        type: 'panel',
        items: [
          {
            type: 'input',
            name: 'question',
            label: 'Question'
          },
          {
            type: 'textarea',
            name: 'answer',
            label: 'Answer'
          }
        ]
      },
      buttons: [
        {
          type: 'cancel',
          text: 'Close'
        },
        {
          type: 'submit',
          text: 'Save',
          primary: true
        }
      ],
      onSubmit: function (api) {
        var data = api.getData();
        /* Insert content when the window form is submitted */
        editor.insertContent('<h3><strong class="faq_question">'+data.question+'</strong></h3>');
        editor.insertContent('<p><span style="font-weight: 400;" class="faq_answer">'+data.answer+'</span></p>');
        api.close();
      }
    });
  };
  /* Add a button that opens a window */
  editor.ui.registry.addButton('faq', {
    text: 'Insert FAQ',
    onAction: function () {
      /* Open window */
      openDialog();
    }
  });
  /* Adds a menu item, which can then be included in any menu via the menu/menubar configuration */
  editor.ui.registry.addMenuItem('faq', {
    text: 'Insert FAQ',
    onAction: function() {
      /* Open window */
      openDialog();
    }
  });
  /* Return the metadata for the help plugin */
  return {
    getMetadata: function () {
      return  {
        name: 'Example plugin',
        url: 'http://exampleplugindocsurl.com'
      };
    }
  };
});

  $(document).ready(()=>{
      $('#featured_image').change(function(){
        const file = this.files[0];
        if (file){
          let reader = new FileReader();
          reader.onload = function(event){
            $('#imgPreview').attr('src', event.target.result);
            $('#image_alt').val("");
            $('#image_title').val("");
          }
          reader.readAsDataURL(file);
        }
      });
      
 
    });
    
  tinymce.init({
    selector: 'textarea',
    plugins: 'faq anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount',
    toolbar: 'faq undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table mergetags | align lineheight | tinycomments | checklist numlist bullist indent outdent | emoticons charmap | removeformat',
    tinycomments_mode: 'embedded',
    tinycomments_author: 'Author name',
    mergetags_list: [
      { value: 'First.Name', title: 'First Name' },
      { value: 'Email', title: 'Email' },
    ],
    ai_request: (request, respondWith) => respondWith.string(() => Promise.reject("See docs to implement AI Assistant")),
      file_picker_types: 'image',
  /* and here's our custom image picker*/
  file_picker_callback: function (cb, value, meta) {
    var input = document.createElement('input');
    input.setAttribute('type', 'file');
    input.setAttribute('accept', 'image/*');

    /*
      Note: In modern browsers input[type="file"] is functional without
      even adding it to the DOM, but that might not be the case in some older
      or quirky browsers like IE, so you might want to add it to the DOM
      just in case, and visually hide it. And do not forget do remove it
      once you do not need it anymore.
    */

    input.onchange = function () {
      var file = this.files[0];

      var reader = new FileReader();
      reader.onload = function () {
        /*
          Note: Now we need to register the blob in TinyMCEs image blob
          registry. In the next release this part hopefully won't be
          necessary, as we are looking to handle it internally.
        */
        var id = 'blobid' + (new Date()).getTime();
        var blobCache =  tinymce.activeEditor.editorUpload.blobCache;
        var base64 = reader.result.split(',')[1];
        var blobInfo = blobCache.create(id, file, base64);
        blobCache.add(blobInfo);

        /* call the callback and populate the Title field with the file name */
        cb(blobInfo.blobUri(), { title: file.name });
      };
      reader.readAsDataURL(file);
    };

    input.click();
  }, 
   setup: function (editor) {
        editor.on('change', function () {
            tinymce.triggerSave();
        });
    }
  });
</script>

@endsection