@extends('admin.layout.main')
@section('title',$header['title'])
@section('content')

  <style>
    .form-item input.is-valid+label,
    .form-item input:checked+label,
    .form-item #genpass:valid+label {
      font-size: 11px;
      top: -5px;
    }
  </style>


      <div class="content-header">
        <div class="container-fluid">
          <div class="row mb-4 mt-2">
            <div class="col-sm-12 d-flex breadcrumb-style">
              <h1 class="m-0">Edit: {{ $pages['page_title'] }}</h1>
              <ol class="breadcrumb float-sm-right">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard </a></li>
                <li class="breadcrumb-item"><a href="{{ route('admin.cmsPages.index') }}">CMS List</a></li>
                <li class="breadcrumb-item active">Edit</li>
              </ol>
            </div><!-- /.col -->

          </div><!-- /.row -->
        </div><!-- /.container-fluid -->
      </div>
      <!-- /.content-header -->

      <!-- Main content -->
      <section class="content">
        <div class="container-fluid">
          <!-- Info boxes -->
          <div class="row">
        <form  action="{{route('admin.cmsPages.update',$pages->id)}}" method="post" id="dataForm" name="dataForm" enctype="multipart/form-data">
            @csrf
             
            <input type="hidden" name="page_id" id="page_id" value="{{$pages['id']}}" />
            <div class="card pb-4 pt-3 px-3 w-100">
            <input type="hidden" value="{{$pages->id}}" name="id">
            <div class="col-md-12 row p-0">
              <div class="col-md-6">
                    <div class="form-item form-float-style">
                      <input type="text" id="pageTitle" autocomplete="off" name="page_title" class="is-valid" value="{{ $pages['page_title'] }}">
                      <label for="pageTitle">Page Title</label>
                    </div>
              </div>
            </div>
              <!-- Content Wrapper. Contains page content -->
              <div class="editable mb-3">
                <label for="">{{ $pages['page_title'] }}</label>
                <!-- <textarea name="editor1">{{ $pages['page_content'] }}</textarea> -->
                <textarea name="page_content">{{ $pages['page_content'] }}</textarea>
              </div>
              <div class="form-floating">
                    <div class="select top-space-rem after-drp form-item form-float-style  ">
                        <!--<select id="mySelect" class="select2 form-control" style="width:400px;"></select>-->
                        <select data-live-search="true" id="SelExampl" class="selectpicker select-text is-valid" name="category_id">
                          @foreach($parentCategories as $category)
                            <option value="{{ $category['id'] }}">{{ ucwords($category['name']) }}</option>
                          @endforeach
                          

                        </select>
                        <label class="select-label searchable-drp">Select Category <span class="req-star">*</span></label>
                    </div>
                    </div>
              <div class="discount">
                <h3 class="mb-3">SEO Meta Tags</h3>
                <div class="col-md-12 row p-0">
                  <div class="col-md-6">
                    <div class="form-item form-float-style">
                      <input type="text" id="metatitle" autocomplete="off" name="meta_title" class="is-valid" value="{{ $pages['meta_title'] }}">
                      <label for="metatitle">Meta Title</label>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="form-item form-float-style">
                      <input type="text" id="slug_url" autocomplete="off" name="slug_url" class="is-valid" value="{{ $pages['slug_url'] }}">
                      <label for="slug">Slug URL</label>
                    </div>
                  </div>
                </div>
                <div class="col-md-12 row p-0">
                  <div class="col-md-6">
                    <div class="form-item form-float-style mb-3">
                      <textarea type="text" id="comment" autocomplete="off" name="meta_description" class="is-valid">{{ $pages['meta_description'] }}</textarea>
                      <label for="comment">Meta Description</label>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="form-item form-float-style">
                      <input type="text" id="keyword" autocomplete="off" name="keywords" class="is-valid" value="{{ $pages['keywords'] }}">
                      <label for="keyword">Keywords</label>
                    </div>
                  </div>
                </div>
                  <div class="col-md-12 row p-0">
                     <div class="col-md-6">
                      <!-- <div class="form-item"> -->
                      <div class="form-item form-float-style serach-rem">
                        <div class="select top-space-rem after-drp form-float-style ">
                            <select data-live-search="true" id="SelExample" name="status" class="selectpicker select-text height_drp is-valid" required>
                              <option @if($pages['status']=='1') selected="selected" @endif value="1" selected>@lang('category.active')</option>
                                <option @if($pages['status']=='0') selected="selected" @endif value="0">@lang('category.inActive')</option>
                            </select>
                          <label  class="select-label searchable-drp">Status</label>

                        </div>                        
                      </div>
                      <!-- </div> -->
                    </div>
                    <div class="col-md-6">
                    <!-- <div class="form-item form-float-style">
                      <input type="text" id="from-date" autocomplete="off" value="">
                      <label for="from-date">From Date</label>
                    </div> -->
                      <div class="form-item form-float-style">
                        <input type="text" class="datepicker is-valids is-valid" value="{{$pages['publish_date']}}" name="publish_date" id="publish_date" placeholder="DD/MM/YYYY"
                          autocomplete="off">
                        <label for="datepicker">Publish Date<span class="req-star">*</span></label>
                      </div>
                    </div>
                     <div class="col-md-6">
                  <div class="form-item form-float-style">
                        <input type="file" id="image" name="feature_image" class="file-upload" autocomplete="off">
                        <label for="file">Upload Feature Image<span class="req-star">*</span></label>
                        <span style="font-size: 10px; color: #121010; font-style: italic;">Only Upload JPEG, PNG or JPG Format and image size must be max 2MB.</span>
                        @if($pages['feature_image'] != "")
                            <div id='profile_image_section'>
                                <img src="{{$pages['feature_image']}}" id='page_feature_image' width="150" height="150" class="img_prev" />
                                <!--<a href="javascript:void(0);" onclick="removeProfileImage()">Remove Image</a>-->
                                <input type="hidden" id="old_image" name="old_image" value="{{$pages['feature_image']}}"/>
                            </div>
                        @endif
                  </div>
                  
                
                </div>
              </div>

              <div class="cards-btn">
                <button type="submit" class="btn btn-success form-btn-success">Submit</button>
                <a type="button" href="{{ route('admin.cmsPages.index') }}" class="btn btn-danger form-btn-danger">Cancel</a>
              </div>

            </div>

        </form>

          </div>
          <!-- /.row -->
        </div>
        <!--/. container-fluid -->
      </section>
   
@endsection
@section('js')
  
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/js/bootstrap-select.min.js"></script>

  <script src="https://cdn.ckeditor.com/4.13.0/standard/ckeditor.js"></script>
  <!-- Page specific script -->
  <script>
    $( function() {
      $('*[value=""]').removeClass('is-valid');
      $( "#publish_date" ).datepicker({
        // changeMonth: true,
        // changeYear: true,
        dateFormat:'dd-mm-yy',
          minDate: new Date(),
       
      });
      
    }); 
    document.getElementById('flexCheckDefault1').onclick = function () {
      var checkboxes = document.getElementsByName('check');
      for (var checkbox of checkboxes) {
        checkbox.checked = this.checked;
      }
    }

    $(document).on("click", ".deleteConfirmation", function () {
      Swal.fire({
        title: 'Are you sure?',
        text: "You won't be able to revert this!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes, delete it!'
      }).then((result) => {
        if (result.isConfirmed) {
          window.location.href = $(this).attr("data-url");
        }
      })
    });
  </script>

  <script>

     // //////

     CKEDITOR.replace('editor1');
    CKEDITOR.on('instanceReady', function (evt) {
      var editor = evt.editor;

      editor.on('change', function (e) {
        var contentSpace = editor.ui.space('contents');
        var ckeditorFrameCollection = contentSpace.$.getElementsByTagName('iframe');
        var ckeditorFrame = ckeditorFrameCollection[0];
        var innerDoc = ckeditorFrame.contentDocument;
        var innerDocTextAreaHeight = $(innerDoc.body).height();
        console.log(innerDocTextAreaHeight);
      });
    });
    // valid in input materila js

    const inputs = document.querySelectorAll("input");

    inputs.forEach((input) => {
      input.addEventListener("blur", (event) => {
        if (event.target.value) {
          input.classList.add("is-valid");
        } else {
          input.classList.remove("is-valid");
        }
      });
    });

    const textareas = document.querySelectorAll("textarea");

    textareas.forEach((textarea) => {
      textarea.addEventListener("blur", (event) => {
        if (event.target.value) {
          textarea.classList.add("is-valid");
        } else {
          textarea.classList.remove("is-valid");
        }
      });
    });



    jQuery.validator.addMethod("lettersonly", function (value, element) {
      return this.optional(element) || /^[a-z ]+$/i.test(value);
    }, "Letters only please");
    $(function () {
      // check value is empty remove valid class
      $('*[value=""]').removeClass('is-valid');
      //jquery Form validation
      $('#dataForm').validate({
            rules: {
              page_title:{
                required: true,
                noSpace:true,
              },
              'category_id[]':{
                required: true,
              },
              meta_title:{
                required: true,
              },
              slug_url:{
                required: true,
                remote: {
                url: "{{route('admin.page.checkExist')}}",
                type: "post",
                data: {
                  slug_url: function() {
                    return $("#slug_url").val();
                  },
                  page_id: function(){
                    return $("#page_id").val();  
                  },
                  "_token": '{{ csrf_token() }}'
                }
              }
              },
              editor1: {
                required: true,
              },
              feature_image: {
                // required: true,
                extension: "jpg|jpeg|png",
                maxsize: 2000000

              },
            },
            messages: {
              page_title:{
                required: "Please enter a Page Title",
              },
              'category_id[]':{
                required: "Please select a Page Category",
              },
              meta_title:{
                required: "Please enter a Meta Title",
              },
              slug_url:{
                required: "Please enter a Slug URL",
                remote: "Slug URL already exist"
              },
              editor1: {
                required: "Please enter a Page Content",
              },
              feature_image:{
                
                extension: "Please select image format must be .jpg, .jpeg or .png",
                maxsize: "Please upload image size less than 2MB"
              }
            },
            errorElement: 'span',
            errorPlacement: function (error, element) {
              error.addClass('invalid-feedback');
              element.closest('.form-item').append(error);
            },
            highlight: function (element, errorClass, validClass) {
              $(element).addClass('is-invalid');
            },
            unhighlight: function (element, errorClass, validClass) {
              $(element).removeClass('is-invalid');
            }
          });
        });



    // Check all fields on submit
    document.addEventListener('submit', function (event) {

      // Only run on forms flagged for validation
      if (!event.target.classList.contains('validate')) return;

      // Get all of the form elements
      var fields = event.target.elements;

      // Validate each field
      // Store the first field with an error to a variable so we can bring it into focus later
      var error, hasErrors;
      for (var i = 0; i < fields.length; i++) {
        error = hasError(fields[i]);
        if (error) {
          showError(fields[i], error);
          if (!hasErrors) {
            hasErrors = fields[i];
          }
        }
      }

      // If there are errrors, don't submit form and focus on first element with error
      if (hasErrors) {
        event.preventDefault();
        hasErrors.focus();
      }

      // Otherwise, let the form submit normally
      // You could also bolt in an Ajax form submit process here

    }, false);
  </script>
@append