@extends('backend.layouts.app')
@section('content')
<div class="row page-titles">
   <div class="col-md-5 align-self-center">
      <h4 class="text-themecolor">Content Manager</h4>
   </div>
   <div class="col-md-7 align-self-center text-right">
      <div class="d-flex justify-content-end align-items-center">
         <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{{route('content')}}">Content Manager</a></li>
            <li class="breadcrumb-item active">Edit Content Manager</li>
         </ol>
      </div>
   </div>
</div>

<div id="deleteModal" class="modal fade" role='dialog'>
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-body">
            <p>Are you sure you want to delete this?</p>
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            <span id='deleteButton'></span>
         </div>
      </div>
   </div>
</div>

<!-- Content Wrapper. Contains page content -->
<!-- Main content -->
<section class="content">
   <div class="container-fluid">
      <div class="row">
         @if (session('status'))
         <div class="alert alert-success alert-dismissible fade show" role="alert"><i class="far fa-check-circle"></i>
            <strong></strong> {{ session('status') }}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
         </div>
         @endif
         <div class="col-md-12">
            <div class="card card-primary">
               <div class="tab-content">
                  <form action="{{ route('content.update',['id'=>$contents->id] + request()->query()) }}" id="contentForm" method="POST" enctype="multipart/form-data">
                     @csrf
                     <div class="card-body">
                        <div class="row">
                           <div class="col-sm-6">
                              <div class="form-group">
                                 <label for="name">Title<span style="color: red;font-size:18px;"><b>*</b></span></label>
                                 <input type="text" name="name" value="{{ $contents->name }}" class="form-control" id="name" placeholder="Enter Name">
                                 @error('name')
                                 <p style="color:red;">{{ $message }}</p>
                                 @enderror
                              </div>
                           </div>
                           <div class="col-sm-6">
                              <div class="form-group">
                                 <label for="slug">Slug<span style="color: red;font-size:18px;"><b>*</b></span></label>
                                 <input type="text" name="slug" value="{{ $contents->slug }}" class="form-control" id="slug" placeholder="Enter Slug">
                                 @error('slug')
                                 <p style="color:red;">{{ $message }}</p>
                                 @enderror
                              </div>
                           </div>

                           {{-- <div class="col-sm-12">
                              <div class="form-group">
                                 <div class="custom-control custom-checkbox mr-sm-2 m-b-15">
                                    <input type="checkbox" class="custom-control-input" name="status" id="checkbox0" @if($contents->status==1) checked @else @endif value="1">
                                    <label class="custom-control-label"  for="checkbox0">Is Active </label>
                                 </div>
                              </div>
                           </div> --}}


                           <div class="col-sm-12">
                              {{-- <ul class="nav nav-tabs customtab2" id="languageTab" role="tablist">
                                 @foreach($languages as $index => $language)
                                       <li class="nav-item">
                                          <a class="nav-link {{ $index === 0 ? 'active' : '' }}" id="language-tab-{{ $language->id }}" data-toggle="tab" href="#language-content-{{ $language->id }}" role="tab" aria-controls="language-content-{{ $language->id }}" aria-selected="{{ $index === 0 ? 'true' : 'false' }}">
                                             {{ $language->name }}
                                          </a>
                                       </li>
                                 @endforeach
                              </ul> --}}
                              <div class="tab-content" id="languageTabContent" style="margin-top:1%">

                                    <div class="" id="language-content" role="tabpanel" aria-labelledby="language-tab">
                                          <div class="row">
                                             <div class="col-sm-6">
                                                <div class="form-group">
                                                      <label for="meta_title">Meta Title</label>
                                                      <input type="text" name="meta_title" id="meta_title" value="{{ $contents->meta_title }}" class="form-control" placeholder="Enter Meta Title" value="{{ old('meta_title') }}">
                                                </div>
                                             </div>
                                             <div class="col-sm-6">
                                                <div class="form-group">
                                                      <label for="meta_keyword">Meta Keyword</label>
                                                      <input type="text" name="meta_keyword" id="meta_keyword" value="{{ $contents->meta_keyword }}" class="form-control" placeholder="Enter Meta Keyword">
                                                </div>
                                             </div>
                                             <div class="col-sm-12">
                                                <div class="form-group">
                                                      <label for="meta_description">Meta Description</label>
                                                      <textarea name="meta_description" id="meta_description" class="form-control" value="{{ $contents->meta_description }}" placeholder="Enter Meta Description">{{ $contents->meta_description }}</textarea>
                                                </div>
                                             </div>
                                             <div class="col-sm-12">
                                                <div class="form-group">
                                                      <label for="description">Description<span style="color: red;font-size:18px;"><b>*</b></span></label>
                                                      <textarea name="description" id="description"  class="form-control" placeholder="Enter Description">{{ $contents->description }}</textarea>
                                                </div>
                                             </div>
                                          </div>
                                    </div>
                              </div>


                           </div>
                         </div>
                     <div class="card-body">
                        <button type="submit" id="submitButton" class="btn btn-primary">Submit</button>
                        <a href="{{ route('content', request()->query()) }}" class="btn btn-secondary">Back</a>
                     </div>
                  </form>
               </div>
            </div>
         </div>
      </div>
   </div>
</section>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.ckeditor.com/4.16.2/standard/ckeditor.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Convert Blade variables to JavaScript variables

    // Initialize CKEditor for each language description textarea

        CKEDITOR.replace(`description`);
        CKEDITOR.replace(`meta_description`);

    $.validator.addMethod('requiredCKEditor', function(value, element) {
    var editor = CKEDITOR.instances[element.name];
    return editor && editor.getData().trim() !== '';
}, 'This field is required.');

    const form = $('#contentForm');

    // Initialize jQuery Validation
    form.validate({
        ignore: [],
    rules: {
        name: {
            required: true,
            minlength: 3,
            noOnlySpaces: true
        },
        slug: {
            required: true,
            minlength: 3,
            noOnlySpaces: true
        },
        description: {
            required: true,
            minlength: 5,
            requiredCKEditor: true
        }
    },
    messages: {
        name: {
            required: "The title field is required.",
            minlength: "The title must be at least 3 characters long."
        },
        slug: {
            required: "The slug field is required.",
            minlength: "The slug must be at least 3 characters long."
        },
        description: {
            required: "The description field is required.",
            minlength: "The description must be at least 5 characters long."
        }
    },
    errorClass: "error",
    errorPlacement: function (error, element) {
                    if (element.attr("name") === "description") {
                        error.insertAfter("#cke_" + element.attr("id"));
                    } else {
                        error.insertAfter(element);
                    }
                },
    highlight: function(element) {
        $(element).addClass('is-invalid').removeClass('is-valid');
    },
    unhighlight: function(element) {
        $(element).removeClass('is-invalid');
        // .addClass('is-valid');
    },
    submitHandler: function(form) {
        // Ensure CKEditor data is included in the form submission
        for (var instance in CKEDITOR.instances) {
            CKEDITOR.instances[instance].updateElement();
        }
        form.submit();
    }
});

    // Track if there were changes made (optional)
    let isInputChanged = false;
    form.find('input, textarea').on('input', function() {
        isInputChanged = true;
    });

    $('#submitButton').click(function() {
        if (!isInputChanged) {
            return;
        }
        if (form.valid()) {
            form.submit();
        }
    });
});
</script>



@endsection
