@extends('admin.masterv2')
@section('styleSheet')
    <!-- BEGIN PAGE LEVEL STYLES -->

    <!-- END PAGE LEVEL STYLES -->
@endsection
@section('content')
    <div class="page-content-wrapper">
        <div class="page-content">
            <div class="page-bar">
                <ul class="page-breadcrumb">
                    <li>
                        <i class="fa fa-home"></i>
                        <a href="{{route('home')}}">Dashboard</a>
                        <i class="fa fa-angle-right"></i>
                    </li>
                    <li>
                        <a href="{{route('sideBar')}}">Side Bar Page</a>
                        <i class="fa fa-angle-right"></i>
                    </li>
                    <li>
                        <a href="#">Side Bar</a>
                    </li>
                </ul>
            </div>
            <!-- END PAGE HEADER-->
            <!-- BEGIN PAGE CONTENT-->
<!--             <div class="row">
                            <div class="col-md-12">
                                <form id="dynamicForm">
                                    <input type="text" name="title" placeholder="Title" />
                                    
                                    <div class="content-wrapper">
                                        <div class="content">
                                            <input type="text" name="heading[]" placeholder="Heading" />
                                            <textarea name="description[]" placeholder="Description"></textarea>
                                            <button type="button" class="delete-content" style="display:none;">Delete</button>
                                        </div>
                                    </div>

                                    <button type="button" id="addNewBlock">Add New Block</button>
                                    <button type="submit">Submit</button>
                                </form>
                            </div>
                        </div>  -->
            <div class="row">
                <div class="col-md-12">
                    <form  class="custom form needs-validation" name="sideBarForm" id="sideBarForm" method="POST" action="{{ route('storeSideBar') }}" enctype="multipart/form-data" novalidate>
                        @csrf

                        <div class="row">
                            <div class="col-md-8">
                                <div class="row">
                                    <div class="col-md-9 form-group">
                                        <label class="form-label">Name</label>
                                        <input type="hidden" name="id" value="{{$sideBars->id}}" placeholder="">
                                        <input type="hidden" name="allContent" id="allContent" value="" placeholder="">
                                        <input type="text" class="form-control" name="name" value="{{!empty($sideBars) ? $sideBars->name : ''}}" placeholder="Side Bar Title" autocomplete="off" required>
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">Status:</label>
                                        <select class="form-control form-select" data-placeholder="Status..." name="status" required>
                                            <option value=""></option>
                                            <option value="1" {{!empty($sideBars->status) && $sideBars->status == '1' ? 'selected' : ''}}>Show</option>
                                            <option value="0" {{!empty($sideBars->status) && $sideBars->status == '0' ? 'selected' : ''}}>Inactive</option>
                                        </select>
                                    </div>  
                                </div> 
                                <div class="row">
                                    {{--
                                    <div class="col-md-3 form-group">
                                        <label class="form-label">Page:</label>
                                        <select id="page-id" class="form-control form-select" data-placeholder="Page..." name="page_id" required onchange="">
                                            <option value=""></option>
                                            @foreach($pages as $page)
                                                <option value="{{$page->page_id}}" data-type="{{$page->page_type}}" {{!empty($sideBars) && $sideBars->page_id == $page->page_id ? 'selected' : ''}}>{{$page->menu_title}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-3 form-group">
                                        <label class="form-label">Course:</label>
                                        <select id="course_id" class="form-control form-select" data-placeholder="Program..." name="course_id">
                                            @if(!empty($sideBars) && !empty($sideBars->course_id))
                                                <option value="{{$sideBars->course_id}}">selected Course</option>
                                            @else
                                                <option value=""></option>
                                            @endif

                                        </select>
                                    </div>
                                    --}}
                                    


                                    
                                </div>   
                            </div>
                            <div class="col-md-4">
                                @if(isset($sideBars->banner))
                                <label class="form-label">Current Image</label>
                                <img src="{{asset('uploads/sidebars/'.$sideBars->id.'/'.$sideBars->banner)}}" style= "max-width:100%">
                                @endif
                                <div class="mb-1 form-group">
                                    <label for="formFile" class="form-label me-5">Upload Image</label>
                                    @if(isset($sideBars->banner))
                                    <div class="form-check form-check-inline">
                                      <input class="form-check-input" type="checkbox" name="remove_image" value="Y">
                                      <label class="form-check-label form-label" for="remove_image">Remove Image</label>
                                    </div>
                                    @endif
                                    <input class="form-control" type="file" id="formFile" name="image" placeholder="" accept="image/*">
                                  </div>
                                  <div class="alert alert-primary m-0 py-1" role="alert">Dimension 1200px X 480px maximum filesize 2MB</div>
                            </div>
                        </div> 
<!-- HTML Structure -->

<div class="row">
    <div class="col-md-12">
        <div class="headingContentTextBlock">
            @if(isset($sideBars->content))
                @foreach($sideBars->content as $key=>$value)
                    <div class="headingContentTextBlockContent row mb-5">
                        <div class="col-md-12 mb-2">
                            
                            <input type="text" name="heading[]" class="form-control" placeholder="Heading" value="{!! htmlspecialchars_decode($value->heading) !!}" required />
                        </div>
                        <div class="col-md-12">
                            <textarea class="ckeditor" id="description_{{$key}}" name="description[]" placeholder="Description" required>
                                {!! htmlspecialchars_decode($value->description) !!}
                            </textarea>
                        </div>
                        <button type="button" class="deleteHeadingContentTextBlockContent btn btn-danger">Delete</button>
                    </div>
                @endforeach
            @else
                <div class="headingContentTextBlockContent row">
                    <div class="col-md-12 mb-2">
                        <input type="text" name="heading[]" class="form-control" placeholder="Heading" value="" required />
                    </div>
                    <div class="col-md-12">
                        <textarea class="ckeditor form-control" id="description" name="description[]" placeholder="Description" required></textarea>
                    </div>
                    <button type="button" class="deleteHeadingContentTextBlockContent btn btn-danger" style="display:none;">Delete</button>
                </div>
            @endif
        </div>
        <button type="button" class="btn btn-success" id="addNewBlock">Add New Block</button>
    </div>
</div>
  
                        

                        <div class="form-actions">
                            <button type="submit" class="btn btn-success" style="float: right">Save</button>
                        </div>
                    </form>
                </div>
            </div>
            <!-- END PAGE CONTENT-->
        </div>
    </div>

@endsection

@section('customJs')


<script type="text/javascript" src="{{ asset('assets/plugins/ckeditor_4.22.1/ckeditor.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/plugins/ckeditor_4.22.1/adapters/jquery.js') }}"></script> 



<script>

$(document).ready(function() {
    // Function to initialize CKEditor for all textareas with the 'ckeditor' class
    function initializeCKEditor() {
        $('textarea.ckeditor').each(function() {
            // Only initialize CKEditor if it's not already initialized
            if (!$(this).data('ckeditor-initialized')) {
                CKEDITOR.replace(this);  // Initialize CKEditor on this textarea
                $(this).data('ckeditor-initialized', true); // Mark it as initialized
            }
        });
    }

    // Event handler for adding a new content block
    $('#addNewBlock').on('click', function(e) {
        e.preventDefault();

        // Clone the last content block
        var newContent = $('.headingContentTextBlockContent').first().clone();

        // Clear the values for the cloned block
        newContent.find('textarea.ckeditor').val('');
        //newContent.find('cke_description').removeClass('ckeditor');
        newContent.find('#cke_description').remove();
        newContent.find('#cke_description_0').remove();
        newContent.find('input').val('');

        // Remove the 'id' from the cloned textarea to avoid duplicates
        var clonedTextarea = newContent.find('textarea.ckeditor');
        clonedTextarea.removeAttr('id');  // Remove the ID to avoid duplicate IDs

        // Append the cloned block to the content wrapper
        newContent.find('.deleteHeadingContentTextBlockContent').show();
        $('.headingContentTextBlock').append(newContent);

        // Reinitialize CKEditor for the newly added textarea
        initializeCKEditor();  // This will only initialize CKEditor for the new block
        //$(this).closest('.cke_1').css('display','none');
    });

    // Initial CKEditor setup for existing textareas with the 'ckeditor' class
    initializeCKEditor();  // Call this only once to initialize on load

    // Handle content deletion
    $(document).on('click', '.deleteHeadingContentTextBlockContent', function(){
        $(this).closest('.headingContentTextBlockContent').remove();
    });
    // $.validator.addMethod("scheduleFormat", function(value, element) {
    //     // Regular expression to match the format 'DD-MM-YYYY # DD-MM-YYYY'
    //     return this.optional(element) || /^[0-3][0-9]-[0-1][0-9]-\d{4}##[0-3][0-9]-[0-1][0-9]-\d{4}$/.test(value);
    // }, "Please enter a valid schedule in the format DD-MM-YYYY##DD-MM-YYYY.");
    
    $.validator.addMethod("fileSize", function (value, element, param) {
        // Check if the element has a file
        if (element.files.length > 0) {
            // Convert the size from bytes to MB and check if it exceeds the limit
            return element.files[0].size <= param;
        }
        return true; // Ignore validation if no file is selected
    }, "File must be less than 2MB.");
    
        $("#sideBarForm").validate({
            rules: {
                title: {
                    required: true,
                },
                image: {             // Required field
                    fileSize: 2 * 1024 * 1024,    // Max file size 2MB (in bytes)
                    //imageDimensions: [1200, 480]  // Image dimensions 1200 x 480
                }
            },
            messages: {
                title: {
                    required: "Amount is required only accepts digit",
                },
                image: {
                    fileSize: "File size must be less than 2MB.",
                    //imageDimensions: "Image dimensions must be 1200 x 480 pixels."
                }
            },
            errorElement: "div",
            errorPlacement: function (error, element) {
                var feedbackElement = element.siblings('.invalid-feedback');
                if (feedbackElement.length) {
                    feedbackElement.html(error.html());
                } else {
                    error.addClass("invalid-feedback");
                    element.closest(".form-group").append(error);
                }
            },
            // errorPlacement: function (error, element) {
            //     error.addClass("invalid-feedback"); // Bootstrap's error class
            //     element.closest(".form-group").append(error);
            // },
            highlight: function (element) {
                $(element).addClass("is-invalid").removeClass("is-valid");
            },
            unhighlight: function (element) {
                $(element).addClass("is-valid").removeClass("is-invalid");
            },
            submitHandler: function (form) {
                // Add 'was-validated' class to trigger Bootstrap validation
                form.classList.add('was-validated');
                
                // var contents = [];
                // $('.headingContentTextBlockContent').each(function(){
                //     var heading = $(this).find('input[name="heading[]"]').val();
                //     var description = $(this).find('textarea[name="description[]"]').val();
                    
                //     // Only add if there is some content
                //     if(heading || description) {
                //         contents.push({
                //             heading: heading,
                //             description: description
                //         });
                //     }
                // });
                // console.log(contents);

                // $('#allContent').val(JSON.stringify(contents));
                // //console.log(JSON.stringify(contents));

                //$('textarea.ckeditor').ckeditor().updateElement();
                form.submit(); // Perform the default form submission
            }
        });
});
</script>


@endsection

@section('documentJquery')

@endsection