@extends('layouts.app')

@section('content')
<script src="https://cdn.tiny.cloud/1/r9rrojfprcjsqeclygvlu8h06khye7qen3821qj94wp2pyqu/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<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">Edit Deleted Store</div>
    <div class="row my-3 mx-2">
        <div class="col-md-10"></div>
        <div class="col-md-2"><a class="btn btn-success float-end" href="{{route('deleted.stores.publish',$store->id)}}">Publish</a></div>
    </div>
    <div class="card-body">
        <form method="post" action="{{route('deleted.stores.update',$store->id)}}" enctype="multipart/form-data">
            @csrf
            <div class="row">
            <div class="col-md-6">     
            <div class="mb-4">
                <label for="title" class="form-label"><h5>Store Title</h5></label>
                <input type="text" class="form-control" name="store_title" id="store_title" value="{{$store->title}}">
            </div>
            </div>
             <div class="col-md-6">
                              <div class="mb-3 p-3 border">
                <label for="category" class="form-label">Categories</label>
                <select id="category"  multiple class="form-control" name="category[]">
                               </select><br>
<br>
<input id="new-category" type="text" />
<button type="button" class="btn btn-sm btn-info" id="btn-add-category">Add New</button>
                
            </div>

             </div>
            </div>
            <div class="mb-4">
                <label for="title" class="form-label"><h5>Store Slug</h5></label>
                <input type="text" class="form-control" name="store_slug" id="store_slug" value="{{$store->slug}}">
            </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="{{$store->h1}}">
            </div>
              <div class="mb-4">
                <label for="title" class="form-label"><h5>SEO Title</h5></label>
                <input type="text" class="form-control" name="seo_title" id="seo_title" value="{{$store->seo_title}}">
            </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="{{$store->focus_keywords}}">
            </div>
              <div class="mb-4">
                <label for="title" class="form-label"><h5>SEO Description</h5></label>
                <input type="text" class="form-control" name="seo_desc" id="seo_desc" value="{{$store->seo_description}}">
            </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"  @if($store->change_frequency=='daily') checked @endif  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" @if($store->change_frequency=='weekly') checked @endif  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" @if($store->change_frequency=='monthly') checked @endif  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 @if($store->priority==$i) selected @endif 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="editorarea form-control"
                                            rows="20" cols="80" >{!!$store->store_description!!}</textarea>
            </div>
            <div class="mb-4">
                <label for="content" class="form-label"><h5>Home URL</h5></label>
                <input type="text" class="form-control" name="home_url" id="home_url" value="{{$store->home_url}}">
            </div>
            <div class="mb-4">
                <label for="content" class="form-label"><h5>Affiliate URL</h5></label>
                <input type="text" class="form-control" name="affiliate_url" id="affiliate_url" value="{{$store->affiliate_url}}">

            </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="{{$thumbnail?->guid}}" alt="pic" />
            </div>

            <input type="file" 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="{{$store->thumbnail_alt}}">
                   <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="{{$store->thumbnail_title}}">
                
                </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="editorarea form-control"
                                            rows="20" cols="80" >{!!$store->extra_info!!}</textarea>
            </div>
            <h3>Coupon</h3>
       
                <div id="accordion">
                      <div >
    <div  id="headingadd">
      <h5 class="mb-0">
        <button type="button" class="btn my-2 btn-primary" data-toggle="collapse" data-target="#collapseadd" aria-expanded="true" aria-controls="collapseadd">
       Add New 
        </button>
      </h5>
    </div>

    <div id="collapseadd" class="collapse" aria-labelledby="headingadd" data-parent="#accordion">
    <h4>Add Coupon</h4>
      <div class="card-body coupon_div">
         
                  <div class="mb-3">
                <label for="title" class="form-label">Coupon Title (* Coupon title is complusary to add a new coupon.)</label>
                <input type="text" class="form-control" id="title" name="coupon_title[]" value="">
            </div>
            
           
            <div class="mb-3">
                <label for="content" class="form-label">Coupon Content</label>
                <textarea id="body" name="coupon_body[]" class="form-control"
                                            rows="20" cols="80"  ></textarea>
            </div>
            <div class="mb-3">
                <label for="coupon_type" class="form-label">Coupon Type</label>
                <select class="form-control"  id="coupon_type" name="coupon_type[]">
                    <option value="">Select coupon type</option>
                    <option  value="code">Code</option>
                    <option  value="sale">Deal</option>
                    <option  value="print">Printable</option>
                </select>
            </div>
            <div class="mb-3 coupon_code_div" >
                <label for="coupon_type_code" class="form-label">Coupon Code</label>
                 <input type="text" class="form-control" id="coupon_type_code" name="coupon_type_code[]" value="">
            </div>
              <div class="mb-3"> 
                <label for="destination_url"  class="form-label">Coupon URL</label>
                 <input type="text" class="form-control" id="destination_url" name="coupon_destination_url[]" value="">
            </div>
            <div class="mb-3">
                <label for="expires" class="form-label">Expires</label>
                 <input type="datetime-local" class="form-control" id="expires" name="coupon_expires[]" value="">
            </div>
            <div class="mb-3">
                <label for="start_on" class="form-label">Start Date</label>
                 <input type="datetime-local" class="form-control" id="start_on" name="coupon_start_on[]" value="">
            </div>
            <div class="mb-3">
                <label for="coupon_save" class="form-label">Discount Value</label>
                 <input type="text" class="form-control" id="coupon_save" name="coupon_save[]" value="">
            </div>
              <div class="mb-3">
                <label for="free_shipping" class="form-label">Free Shiping Coupon</label>
                 <input type="checkbox" class="" id="free_shipping" name="coupon_free_shipping[]"  value="on">
            </div>
            <div class="mb-3">
                <label for="exclusive" class="form-label">Exclusive Coupon</label>
                 <input type="checkbox" class="" id="exclusive" name="coupon_exclusive[]"  value="on">
            </div>
            <div class="mb-3">
                <label for="used" class="form-label">Number Coupon Used</label>
                 <input type="text" class="form-control" id="used" name="coupon_used[]" value="">
            </div>
             <div class="mb-3">
                <label for="views" class="form-label">Number Views</label>
                 <input type="text" class="form-control" id="views" name="coupon_views[]" value="">
            </div>
            <div class="mb-3">
                <label for="vote_up" class="form-label">Vote Up</label>
                 <input type="text" class="form-control" id="vote_up" name="coupon_vote_up[]" value="">
            </div>
            <div class="mb-3">
                <label for="vote_down" class="form-label">Vote Down</label>
                 <input type="text" class="form-control" id="vote_down" name="coupon_vote_down[]" value="">
            </div>
      </div>
    </div>
  </div>
 @if(!empty($store->coupons))

 @foreach($store->coupons as $coupon)                    
  <div class="card">
    <div class="card-header" id="heading{{$loop->iteration}}">
      <h5 class="mb-0">
        <button type="button" class="btn btn-link" data-toggle="collapse" data-target="#collapse{{$loop->iteration}}" aria-expanded="true" aria-controls="collapse{{$loop->iteration}}">
          {{$coupon->title}}
        </button>
      </h5>
    </div>

    <div id="collapse{{$loop->iteration}}" class="collapse" aria-labelledby="heading{{$loop->iteration}}" data-parent="#accordion">
      <div class="card-body coupon_div">
         
                  <div class="mb-3">
                <label for="title" class="form-label">Coupon Title</label>
                <input type="text" class="form-control" id="title" name="coupon_title[]" value="{{$coupon->title}}">
            </div>
            
           
            <div class="mb-3">
                <label for="content" class="form-label">Coupon Content</label>
                <textarea id="body" name="coupon_body[]" class="form-control"
                                            rows="20" cols="80"  >{!!$coupon->content!!}</textarea>
            </div>
            <div class="mb-3">
                <label for="coupon_type" class="form-label">Coupon Type</label>
                <select class="form-control"  id="coupon_type" name="coupon_type[]">
                    <option value="">Select coupon type</option>
                    <option {{$coupon->coupon_type=="code"?"selected":""}} value="code">Code</option>
                    <option {{$coupon->coupon_type=="sale"?"selected":""}} value="sale">Deal</option>
                    <option {{$coupon->coupon_type=="print"?"selected":""}} value="print">Printable</option>
                </select>
            </div>
            <div class="mb-3 coupon_code_div" {{$coupon->coupon_type=="sale"?"style=display:none":""}}>
                <label for="coupon_type_code" class="form-label">Coupon Code</label>
                 <input type="text" class="form-control" id="coupon_type_code" name="coupon_type_code[]" value="{{$coupon->coupon_code}}">
            </div>
              <div class="mb-3"> 
                <label for="destination_url"  class="form-label">Coupon URL</label>
                 <input type="text" class="form-control" id="destination_url" name="coupon_destination_url[]" value="{{$coupon->coupon_url}}">
            </div>
            <div class="mb-3">
                <label for="expires" class="form-label">Expires</label>
                 <input type="datetime-local" class="form-control" id="expires" name="coupon_expires[]" value="{{!empty($coupon->expires)?date('Y-m-d\TH:i',$coupon->expires):""}}">
            </div>
            <div class="mb-3">
                <label for="start_on" class="form-label">Start Date</label>
                 <input type="datetime-local" class="form-control" id="start_on" name="coupon_start_on[]" value="{{!empty($coupon->start_date)?date('Y-m-d\TH:i',$coupon->start_date):""}}">
            </div>
            <div class="mb-3">
                <label for="coupon_save" class="form-label">Discount Value</label>
                 <input type="text" class="form-control" id="coupon_save" name="coupon_save[]" value="{{$coupon->discount_value}}">
            </div>
              <div class="mb-3">
                <label for="free_shipping" class="form-label">Free Shiping Coupon</label>
                 <input type="checkbox" class="" id="free_shipping" name="coupon_free_shipping[]" {{!empty($coupon->free_shipping)?"checked":""}} value="on">
            </div>
            <div class="mb-3">
                <label for="exclusive" class="form-label">Exclusive Coupon</label>
                 <input type="checkbox" class="" id="exclusive" name="coupon_exclusive[]" {{!empty($coupon->exclusive)?"checked":""}} value="on">
            </div>
            <div class="mb-3">
                <label for="used" class="form-label">Number Coupon Used</label>
                 <input type="text" class="form-control" id="used" name="coupon_used[]" value="{{$coupon->used_number}}">
            </div>
             <div class="mb-3">
                <label for="views" class="form-label">Number Views</label>
                 <input type="text" class="form-control" id="views" name="coupon_views[]" value="{{$coupon->views_number}}">
            </div>
            <div class="mb-3">
                <label for="vote_up" class="form-label">Vote Up</label>
                 <input type="text" class="form-control" id="vote_up" name="coupon_vote_up[]" value="{{$coupon->vote_up}}">
            </div>
            <div class="mb-3">
                <label for="vote_down" class="form-label">Vote Down</label>
                 <input type="text" class="form-control" id="vote_down" name="coupon_vote_down[]" value="{{$coupon->vote_down}}">
            </div>
      </div>
    </div>
  </div>
  <br>
  @endforeach
</div>
@endif
          
            <button type="submit" class="btn btn-primary">Submit</button>
                 <a class="btn btn-success float-start mx-2" href="{{route('deleted.stores.publish',$store->id)}}"> Publish</a>

        </form>
    </div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>

   $(".coupon_type").on("change",function(){
        alert($(this).val());
        if($(this).val()=='code')
        {
            $(this).parents(".coupon_div").find(".coupon_code_div").show();
        }else{
            $(this).parents(".coupon_div").find(".coupon_code_div").hide();
        }
    });
    
    
  $("select option").each(function() {
  $(this).siblings('[value="'+ this.value +'"]').remove();
});


  $('#category').select2({
  multiple:true,        
  ajax: {
    url: "{{route('coupons.search-category')}}",
    data: function (params) {
      var query = {
        search: params.term,
        page: params.page || 1
      }

      // Query parameters will be ?search=[term]&page=[page]
      return query;
    }
  }
});

 $("#btn-add-category").on("click", function(){
        var cat = $("#new-category").val();
         $.ajax({
        headers: {
            'X-CSRF-TOKEN': "{{ csrf_token() }}"
        },
        url : "{{ route('coupons.add-category') }}",
        data : {'cat' : cat},
        type : 'GET',
        dataType : 'json',
        success : function(result){
            if(result.success==true)
            {
            var newcategory = new Option(result.term_name,result.term_id, true, true);
             $("#category").append(newcategory).trigger('change');
             $("#new-category").val("");
            }else{
             alert("This category already exists, Please search & select from above dropdown.");        
             $("#new-category").val("");   
            }
        }
    });
     
    }); 
    
    
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: '.editorarea',
    plugins: 'faq anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount code',
    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 | code',
    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