@extends('backend.layouts.app')
@section('content')
<div class="row page-titles">
   <div class="col-md-5 align-self-center">
      <h4 class="text-themecolor">Skill 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')}}">Skill Manager</a></li>
            <li class="breadcrumb-item active">Edit Skill 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('skill.update',['id'=>$skills->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="title">Title<span style="color: red;font-size:18px;"><b>*</b></span></label>
                                 <input type="text" name="title" value="{{ $skills->title }}" class="form-control" id="title" placeholder="Enter Title">
                                 @error('title')
                                 <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($skills->status==1) checked @else @endif value="1">
                                    <label class="custom-control-label"  for="checkbox0">Is Active </label>
                                 </div>
                              </div>
                           </div>



                         </div>
                     <div class="card-body">
                        <button type="submit" id="submitButton" class="btn btn-primary">Submit</button>
                        <a href="{{ route('skill', 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() {



   $.validator.addMethod("maxFileSize", function(value, element, param) {
    if (element.files.length) {
        var fileSize = element.files[0].size;
        return this.optional(element) || (fileSize <= param);
    }
    return true; // No file selected
}, "The file must be less than {0} bytes.");


$.validator.addMethod("maxFileSizeMultiple", function(value, element, param) {
    var files = element.files;
    for (var i = 0; i < files.length; i++) {
        if (files[i].size > param) {
            return false; // Return false if any file exceeds the limit
        }
    }
    return true; // All files are within the limit
}, "Each file must be less than {0} bytes.");
    // Convert Blade variables to JavaScript variables
    const form = $('#contentForm');

    // Initialize jQuery Validation
    form.validate({
        rules: {
            title: {
                required: true,
                minlength: 3,
                noOnlySpaces: true
            },
            name: {
                required: true,
                minlength: 3,
                noOnlySpaces: true
            },
            slug: {
                required: true,
                minlength: 3
            },
            meta_title: {
                maxlength: 70,
            },
            meta_keyword: {
                maxlength: 70,
            },
            meta_description: {
                minlength: 5
            },
            description: {
                required: true,
                minlength: 5,
                noOnlySpaces: true
            },
            cover_letter: { // New field added
            maxFileSize: 2 * 1024 * 1024// Optional: maximum file size in KB
            },
            'images[]': {
                maxFileSizeMultiple: 2 * 1024 * 1024 // 2 MB in bytes
            },
        },
        messages: {
            title: {
                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."
            },
            meta_title: {
                required: "The meta title field is required.",
                minlength: "The meta title must be at least 5 characters long."
            },
            meta_keyword: {
                required: "The meta keyword field is required.",
                minlength: "The meta keyword must be at least 5 characters long."
            },
            meta_description: {
                required: "The meta description field is required.",
                minlength: "The meta description must be at least 5 characters long."
            },
            cover_letter:{
               maxFileSize:"Cover letter should not be less than 2MB."
            },
            'images[]': {
                maxFileSizeMultiple: "Image size should not be greater than 2MB."
            },
        },
        errorClass: "error",
        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();
        }
    });
});


function confirmDeleteModal(id) {
        $('#deleteModal').modal();
        $('#deleteButton').html('<a class="btn btn-danger" style="color:white;" onclick="deleteData(' + id + ')">Delete</a>');
    }

    function deleteData(id) {
            location.replace("{{ route('skill.delete.image') }}?id=" + id  + "{{ request()->getQueryString() ? '&' . request()->getQueryString() : '' }}");
        }
</script>



@endsection
