@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('allPages')}}">Pages</a>
                        <i class="fa fa-angle-right"></i>
                    </li>
                    <li>
                        <a href="#">Page Details</a>
                    </li>
                </ul>
            </div>
            <!-- END PAGE HEADER-->
            <!-- BEGIN PAGE CONTENT-->
            <div class="row">
                <div class="col-md-12">
                    <div class="portlet">
                        <div class="portlet-title">
                            <div class="caption">
                                <i class="fa fa-shopping-cart"></i>Edit Page
                            </div>
                        </div>
                        <div class="portlet-body">
                            @include('admin.includesV2.backendAlert')
                            <form  id="pageForm" name="pageForm" class="custom form needs-validation" method="POST" action="{{ route('pageSettings') }}" enctype="multipart/form-data" novalidate>
                                @csrf
                                <div class="row">
                                    <div class="col-md-8">
                                        <div class="row">
                                            <div class="col-md-6 form-group">
                                                <input type="hidden" class="form-control" id="id" name="id" value="{{$pageSettings->id}}" placeholder="">
                                                <label class="form-label">Page Name: <span class="required">*</span></label>
                                                <input type="text" class="form-control" name="page_name" id="page_name" value="{{$pageSettings->page_name}}" placeholder="Page Name" autocomplete="off" required>
                                            </div>
                                            <div class="col-md-6 form-group">
                                                <label class="form-label" for="slug">Slug</label>
                                                <input type="text" id="slug" name="slug" class="form-control" value="{{$pageSettings->slug}}" required>
                                            </div>
                                            <div class="col-md-3 form-group">
                                                <label class="form-label">Parent:</label>
                                                <select id="category-id" name="parent_id" class="form-control form-select" data-placeholder="Parent Menu...">
                                                    <option value="">-- Select Parent --</option>
                                                    @foreach($parentPages as $parentPage)
                                                        <option value="{{$parentPage->id}}" {{!empty($pageSettings->parent_id) && $pageSettings->parent_id == $parentPage->id ? 'selected' : ''}}>{{$parentPage->page_name}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col-md-3 form-group">
                                                <label class="form-label">Status: <span class="required">*</span></label>
                                                <select class="form-control form-select" name="status" data-placeholder="Status..." required>
                                                    <option value=""></option>
                                                    <option value="Y" {{!empty($pageSettings->status) && $pageSettings->status == 'Y' ? 'selected' : ''}}>
                                                        Show
                                                    </option>
                                                    <option value="N" {{!empty($pageSettings->status) && $pageSettings->status == 'N' ? 'selected' : ''}}>
                                                        Inactive
                                                    </option>
                                                </select>
                                            </div>  
                                            {{-- 
                                            <div class="col-md-3 form-group">
                                                <label class="form-label">Category: <span class="required">*</span></label>
                                                <select id="category-id" class="form-control form-select"
                                                        data-placeholder="Parent Menu..." name="parent_id">
                                                    <option value=""></option>
                                                    <option value="0" {{isset($pageSettings->parent_id) && $pageSettings->parent_id == 0 ? 'selected' : ''}}>Main Menu</option>
                                                    @foreach($categoryMenus as $categoryMenu)
                                                        <option value="{{$categoryMenu->menu_id}}" {{!empty($pageSettings->parent_id) && $pageSettings->parent_id == $categoryMenu->menu_id ? 'selected' : ''}}>{{$categoryMenu->menu_title}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col-md-3 form-group">
                                                <label class="form-label">Menu: <span class="required">*</span></label>
                                                <select id="page-menu" class="form-control form-select"
                                                    data-placeholder="Menu..." name="menu_id">
                                                <option value=""></option>
                                                @if(!empty($pageMenus))
                                                    @foreach($pageMenus as $pageMenu)
                                                        <option value="{{$pageMenu->menu_id}}" {{!empty($pageSettings->menu_id) && $pageSettings->menu_id == $pageMenu->menu_id ? 'selected' : ''}}>{{$pageMenu->menu_title}}</option>
                                                    @endforeach
                                                @endif
                                                </select>
                                            </div>  
                                            --}} 
                                        </div>
                                        <div class="row">
                                            
                                            <div class="col-md-8 form-group">
                                                <label class="form-label">Sidebar: <span class="required">*</span>
                                                    <span class="form-label-note">page level sidebar will be replaced by course level sidebar</span></label>
                                                <select class="form-control form-select" id="sidebar_id" name="sidebar_id">
                                                        <option value="">-Select Sidebar-</option>
                                                    @foreach($sideBars as $key=>$sideBar)
                                                        <option value="{{$sideBar->id}}" {{!empty($pageSettings->sidebar_id) && $pageSettings->sidebar_id == $sideBar->id? 'selected' : ''}}>
                                                            {{$sideBar->name}}
                                                        </option>
                                                    @endforeach
                                                </select> 
                                            </div>
                                            <div class="col-md-4 form-group">
                                                <label class="form-label">View Order:</label>
                                                <input type="text" class="form-control" name="view_order" value="{{!empty($pageSettings->view_order) ? $pageSettings->view_order : ''}}" placeholder="10..." autocomplete="off">
                                            </div>
                                            
                                        </div>
                                        <div class="row">
                                            <div class="col-md-4 form-group">
                                                <label class="form-label">Page Type: <span class="required"> *</span></label>
                                                <select name="type" id="type" class="form-control form-select" data-placeholder="Page Type..." required>
                                                    <option value=""></option>
                                                    @foreach($pageTypes as $key => $pageType)
                                                        <option value="{{$key}}" {{!empty($pageSettings->type) && $pageSettings->type == $key ? 'selected' : ''}}>
                                                            {{$pageType}}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col-md-4 form-group" id="courseTypeDiv">
                                                <label for="type_id" class="form-label">Course Type: <span class="required"> *</span></label>
                                                <select name="type_id" id="type_id" class="form-control form-select" data-placeholder="Page Type...">
                                                    <option value=""></option>
                                                    @foreach($courseTypes as $key => $courseType)
                                                        <option value="{{$key}}" {{!empty($pageSettings->type_id) && $pageSettings->type_id == $key ? 'selected' : ''}}>
                                                            {{$courseType}}</option>
                                                    @endforeach
                                                </select>
                                            </div>

                                            @if(isset($courses[$pageSettings->type_id]))
                                            <div class="col-md-4 form-group" id="courses">
                                                <label for="type_type_id" class="form-label">Course: <span class="required"> *</span></label>
                                                <select name="type_type_id" id="type_type_id" class="form-control form-select">
                                                    <option value=""></option>
                                                    
                                                    @foreach($courses[$pageSettings->type_id] as $course)
                                                        <option value="{{$course->id}}" {{!empty($pageSettings->type_type_id) && $pageSettings->type_type_id == $course->id ? 'selected' : ''}}>
                                                            {{$course->title}}</option>
                                                    @endforeach
                                                </select>
                                            </div> 
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        @if(isset($pageSettings->banner))
                                        <label class="form-label">Current Image</label>
                                        <img src="{{asset('storage/uploads/pages/'.$pageSettings->id.'/banner/'.$pageSettings->banner)}}" style= "max-width:100%">
                                        @endif
                                        
                                        <div class="mb-1 form-group">
                                            <label for="formFile" class="form-label">Upload Image</label>
                                            @if(isset($pageSettings->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="banner" 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>
                                <div class="row">
                                    <div class="col-md-12 form-group">
                                        <label class="form-label">Heading:</label>
                                        <input type="text" class="form-control" name="mainHeading" value="{{!empty($pageSettings->heading) ? $pageSettings->heading : ''}}" placeholder="Page Heading" autocomplete="off">
                                        <div class="alert alert-primary m-0 py-1" role="alert">If heading given heading will come in the page instead of Page Name</div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12 form-group">
                                        <label class="form-label">Short Description:</label>
                                        <textarea class="form-control" name="short_description">{{$pageSettings->short_description}}</textarea>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12 form-group">
                                        <label class="form-label">Description:</label>
                                        <textarea class="ckeditor form-control" name="mainDescription"rows="4" >
                                                  {{!empty($pageSettings->description) ? $pageSettings->description : ''}}
                                        </textarea>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12 d-flex my-4 adminSegmentTitle">
                                        <h2>Form Content  </h2>
                                        <select class="form-control form-select ms-5" name="form_status" id="form_status" style="width:140px" required>
                                                    <option value="1" {{$pageSettings->form_status == '1' ? 'selected' : ''}}>Yes</option>
                                                    <option value="0" {{$pageSettings->form_status == '0'||$pageSettings->form_status == '' ? 'selected' : ''}}>No</option>
                                            </select>
                                    </div>    
                                </div> 
                                <div class="row border border-success p-3" id="formContentBox">
                                    <div class="col-md-12"><label class="form-label">Form Group: <span class="required"> * </span></label></div>
                                    <div class="col-md-12 form-group">
                                                @if(count($FormGroupList) > 0)
                                                    @foreach($FormGroupList as $idx=>$item)
                                                    <div class="form-check form-check-inline">
                                                        <input class="form-check-input" type="checkbox" name="form_group[]" id="inlineRadio{{ $item->id }}" value="{{ $item->id }}" {{!empty($pageSettings->form_group) && ($pageSettings->form_group != "null") && array_search($item->id, json_decode($pageSettings->form_group,true)) !== false ? 'checked' : ''}}>
                                                        <label class="form-check-label" for="inlineRadio{{ $item->id }}">{{$item->name}}</label>
                                                    </div>
                                                    @endforeach
                                                @endif
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12 d-flex my-4 adminSegmentTitle">
                                        <h2>Tab Content  </h2>
                                        <select class="form-control form-select ms-5" name="tab_status" id="tab_status" style="width:140px" required>
                                                    <option value="1" {{$pageSettings->tab_status == '1' ? 'selected' : ''}}>Yes</option>
                                                    <option value="0" {{$pageSettings->tab_status == '0'||$pageSettings->tab_status == '' ? 'selected' : ''}}>No</option>
                                        </select>
                                    </div>    
                                </div>    
                                <div class="row border border-success p-3" id="tabContentBox">
                                    <div class="col-md-12">
                                        <div class="headingContentTextBlock">
                                           
                                            @if(isset($pageSettings->tab_content))
                                                @foreach($pageSettings->tab_content as $key=>$value)
                                                    <div class="headingContentTextBlockContent row mb-5">
                                                        <div class="col-md-12 mb-3">
                                                            <input type="text" name="heading[]" class="form-control" placeholder="Tab Heading" value="{{$value->heading}}" />
                                                        </div>
                                                        <div class="col-md-12">
                                                            <textarea class="ckeditor" id="description_{{$key}}" name="description[]" placeholder="Description">{!! htmlspecialchars_decode($value->description) !!}</textarea>
                                                        </div>
                                                        <button type="button" class="deleteHeadingContentTextBlockContent btn btn-danger">Delete</button>
                                                    </div>
                                                @endforeach
                                            @else
                                                <div class="headingContentTextBlockContent row mb-5">
                                                    <div class="col-md-12 mb-3">
                                                        <input type="text" name="heading[]" class="form-control" placeholder="Tab Heading" value="" />
                                                    </div>
                                                    <div class="col-md-12">
                                                        <textarea class="ckeditor form-control" id="description" name="description[]" placeholder="Description"></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="row mt-3 mb-5">
                                    <div class="col-md-12">
                                        <button type="submit" class="btn btn-success" style="float: right"> Save / Update </button>
                                    </div>
                                </div>
                            </form>    
                        </div>
                    </div>
                </div>
            </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(){

    if ($( "#form_status" ).val() === "1" ) {
      $( "#formContentBox" ).show();
    } else {
      $( "#formContentBox" ).hide();
    }
    $( "#form_status" ).on( "change", function() {
      $( "#formContentBox" ).toggle();
    });

    if ($( "#tab_status" ).val() === "1" ) {
      $( "#tabContentBox" ).show();
    } else {
      $( "#tabContentBox" ).hide();
    }
    $( "#tab_status" ).on( "change", function() {
      $( "#tabContentBox" ).toggle();
    });

    if($('#type').val()!=3){
        $('#courseTypeDiv').hide();
    }
    $('#type').change(function(){
        $type = $('#type').val();
        $type_id=$('#type_id').val();
        if($type==3){
            $('#courseTypeDiv').show();
        }else{
            console.log($type);
            $type_id = $('#type_id').val('');
            $('#courseTypeDiv').hide();
        }
    });





        
});

    
</script>
<script>
$(document).ready(function() {

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
            }
        });
    }
    $('#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();
    });


    var isSlugValid = false;  // Flag to track if slug is valid
    var originalSlug = '{{$pageSettings->slug}}';  // Original slug

    // Add custom validation method for unique slug
    $.validator.addMethod("uniqueSlug", function(value, element) {
        // Only validate if the slug has been changed
        return originalSlug === value || isSlugValid;  
    }, "The slug must be unique.");

    // Define the validation rules
    $("#pageForm").validate({
        rules: {
            page_name: {
                required: true,
            },
            type: {
                required: true
            },
            type_id: {
                required: function() {
                    return $('#courseTypeDiv').is(':visible'); // Required if visible
                }
            },
            image: {             
                fileSize: 2 * 1024 * 1024,    // Max file size 2MB (in bytes)
            },
            slug: {
                required: function() {
                    return originalSlug !== '';  // Only required if originalSlug is not empty
                },
                uniqueSlug: true
            },
        },
        messages: {
            page_name: {
                required: "Page Name required",
            },
            slug: {
                required: "The slug is required.",
                uniqueSlug: "The slug must be unique."
            },
            image: {
                fileSize: "File size must be less than 2MB.",
            },
        },
        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);
            }
        },
        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');
            form.submit(); // Perform the default form submission
        }
    });

    // Slug validation on blur
    $('#slug').on('blur', function() {
        var newSlug = $(this).val();
        if (newSlug != originalSlug) {
            var id = $('#id').val();  // Page ID

            $.ajax({
                url: '/admin/check-slug',  // Endpoint to validate slug
                method: 'POST',
                data: {
                    slug: newSlug,
                    id: id,  // Pass ID to exclude current page from check
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.is_unique) {
                        isSlugValid = true;  // Slug is valid (unique)
                        $('#slug').removeClass('is-invalid').addClass('is-valid');
                    } else {
                        isSlugValid = false;  // Slug is not valid (not unique)
                        $('#slug').removeClass('is-valid').addClass('is-invalid');
                    }
                    // Trigger validation for the slug field
                    $('#pageForm').validate().element("#slug");
                },
                error: function() {
                    console.log('Error validating slug');
                    isSlugValid = false;
                }
            });
        } else {
            isSlugValid = true;  // If slug hasn't changed, consider it valid
            $('#slug').removeClass('is-invalid').addClass('is-valid');
        }
    });
    var validSlugRegex = /^[a-z0-9\-]*$/;
    $('#slug').on('input', function() {
        var value = $(this).val();
        // Remove any characters that are not valid
        if (!validSlugRegex.test(value)) {
            $(this).val(value.replace(/[^a-z0-9\-]/g, ''));
        }
    });
});

</script>


@endsection

@section('documentJquery')

@endsection