@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('coursesPage')}}">Course Page</a>
                        <i class="fa fa-angle-right"></i>
                    </li>
                    <li>
                        <a href="#">Update Course</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>Update course
                                </div>
                            </div>
                            <div class="portlet-body">
                                @include('admin.includesV2.backendAlert')
                                <form name="courseForm" id ="courseForm" class="custom form needs-validation" method="POST" action="{{ route('updateCoursesProgram') }}" enctype="multipart/form-data" name="course" novalidate>
                                    <input type="hidden" name="course_id" value="{{$course->id}}"/>    
                                    @csrf
                                        <div class="row">
                                            <div class="col-md-8">
                                                <div class="row">
                                                    <div class="col-md-6 form-group">
                                                        <label class="form-label">Short Name: <span class="required"> *</span><span class="form-label-note">Reporting Purpose</span></label>
                                                        <input type="text" class="form-control" name="short_name"  value="{{$course->short_name}}" placeholder="Short Name" autocomplete="off" required>
                                                    </div>
                                                    <div class="col-md-3 form-group">
                                                        <label class="form-label">Type: <span class="required">*</span></label>
                                                        <select class="form-control form-select" data-placeholder="Type..." name="type" required>
                                                            <option value="">Select Type</option>
                                                            @foreach($courseTypes as $key=>$type)
                                                                <option value="{{$key}}" {{$course->type == $key ? 'selected' : ''}}>{{$type}}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>

                                                    <div class="col-md-3 form-group">
                                                        <label class="form-label">Sidebar: </label>
                                                        <select class="form-control form-select" data-placeholder="Sidebar.." name="sidebar_id">
                                                            <option value="">-- Select Sidebar --</option>
                                                            @foreach($sideBars as $sideBar)
                                                                <option value="{{$sideBar->id}}" {{$course->sidebar_id == $sideBar->id ? 'selected' : ''}}>{{$sideBar->name}}</option>
                                                            @endforeach
                                                        </select>
                                                    </div> 
                                                    <div class="col-md-12 form-group">
                                                        
                                                        <label class="form-label">Title: <span class="required">*</span></label>
                                                        <input type="text" class="form-control" name="title" value="{{$course->title}}" placeholder="Page Title" autocomplete="off" required>
                                                    </div>
                                                    

                                                </div>
                                                <div class="row">
                                                    <div class="col-md-4 form-group">
                                                        <label class="form-label">Amount: <span class="required"> *</span></label>
                                                        <input type="text" class="form-control" name="amount"  value="{{$course->amount}}" placeholder="Amount" autocomplete="off" required>
                                                    </div>
                                                    <div class="col-md-4 form-group">
                                                        <label class="form-label">Custom Payment: <span class="required">*</span></label>
                                                        <select class="form-control form-select"
                                                                    data-placeholder="Custom Payment..." name="custom_payment" required>
                                                                <option value=""></option>
                                                                <option value="Y" {{$course->custom_payment == 'Y' ? 'selected' : ''}}>Yes</option>
                                                                <option value="N" {{$course->custom_payment == 'N'||$course->custom_payment == '' ? 'selected' : ''}}>No</option>
                                                        </select>
                                                    </div>
                                                    <div class="col-md-4 form-group">
                                                        <label class="form-label">Status: <span class="required">*</span></label>
                                                        <select class="form-control form-select"
                                                                    data-placeholder="Status..." name="status" required>
                                                                <option value=""></option>
                                                                <option value="Y" {{$course->status == 'Y' ? 'selected' : ''}}>Show</option>
                                                                <option value="N" {{$course->status == 'N' ? 'selected' : ''}}>Inactive</option>
                                                            </select>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-4 form-group">
                                                        <label class="form-label">Start Date: <span class="required">*</span></label>
                                                        <input type="date" class="form-control" data-date-format="YYYY-MM-DD"  name="startDate"  value="{{$course->startDate}}"
                                                       placeholder="dd-mm-yyyy" max="2050-12-31" autocomplete="off" required>
                                                    </div>
                                                    <div class="col-md-4 form-group">
                                                        <label class="form-label">End Date: <span class="required">*</span></label>
                                                        <input type="date" class="form-control" data-date-format="YYYY-MM-DD" name="endDate"  value="{{$course->endDate}}"
                                                       placeholder="dd-mm-yyyy" max="2050-12-31" autocomplete="off" required>
                                                    </div>
                                                    <div class="col-md-4 form-group">
                                                        <label class="form-label">Last Date of Registration: <span class="required">*</span></label>
                                                        <input type="date" class="form-control" name="lastDate"  value="{{$course->lastDate}}"
                                                       placeholder="Last Registration Date" autocomplete="off">
                                                    </div>  
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-6 form-group">
                                                        <label class="form-label">Total Hrs: <span class="required"> *</span></label>
                                                        <input type="text" class="form-control" name="duration"  value="{{$course->duration}}" placeholder="Duration Time in hour" autocomplete="off" required>
                                                    </div>
                                                    <div class="col-md-6 form-group">
                                                        <label class="form-label">No. of Classes/ Sessions: <span class="required"> *</span></label>
                                                        <input type="text" class="form-control" name="classes"  value="{{$course->classes}}"
                                                               placeholder="No. of Classes/ Sessions" autocomplete="off" required>
                                                    </div>
                                                    
                                                </div> 
                                                <div class="row">
                                                    <div class="col-md-6 form-group">
                                                        <label class="form-label">Weekly Schedule: <span class="required"> *</span></label>
                                                        <textarea class="form-control" style="height: 130px" name="schedule" id="schedule" autocomplete="off">{!! htmlspecialchars_decode($course->schedule) !!}</textarea>
                                                    </div>
                                                    <div class="col-md-6 form-group">
                                                        <label class="form-label">Venue: <span class="required"> *</span></label>
                                                        <textarea class="form-control" style="height: 130px" name="venue" id="venue" autocomplete="off">{!! htmlspecialchars_decode($course->venue) !!}</textarea>
                                                    </div>
                                                </div> 
                                            </div>
                                            <div class="col-md-4">
                                                <div class="row mb-4">
                                                    <div class="col">
                                                        @if(isset($course->banner))
                                                        <label class="form-label">Current Banner Image</label>
                                                        <img src="{{asset('storage/uploads/courses/'.$course->id.'/banner/'.$course->banner)}}" style= "max-width:100%">
                                                        @endif
                                                        
                                                        <div class="mb-1 form-group">
                                                            <label for="formFile" class="form-label">Upload Banner Image</label>
                                                            @if(isset($course->banner))
                                                            <div class="form-check form-check-inline">
                                                              <input class="form-check-input" type="checkbox" name="remove_banner" 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">
                                                        @if(isset($course->image))
                                                        <label class="form-label">Current Course Image</label>
                                                        <img src="{{asset('storage/uploads/courses/'.$course->id.'/'.$course->image)}}" style= "max-width:100%">
                                                        @endif
                                                        
                                                        <div class="mb-1 form-group">
                                                            <label for="formFile" class="form-label">Upload Course Image</label>
                                                            @if(isset($course->image))
                                                            <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 600px X 400px maximum filesize 2MB</div>
                                                    </div>
                                                </div> 
                                                
                                            </div>
                                        </div>   
                                        

                                        {{-- <div class="form-group">
                                            <label class="col-md-2 control-label">Date: </label>
                                            <div class="col-md-10">
                                                <input type="text" class="form-control" name="courseDate"  value="{{$course->courseDate}}"
                                                       placeholder="Date Range" autocomplete="off">
                                            </div>
                                        </div> --}}
                                          

                                        <div class="row">
                                            <div class="col form-group">
                                            <label class="form-label">short Description :</label>
                                            <textarea class="form-control" style="height: 130px" name="shortDescription" id="shortDescription" autocomplete="off">{!! htmlspecialchars_decode($course->shortDescription) !!}</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" {{$course->form_status == '1' ? 'selected' : ''}}>Yes</option>
                                                            <option value="0" {{$course->form_status == '0'||$course->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($course->form_group) && ($course->form_group != "null") && array_search($item->id, json_decode($course->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" {{$course->tab_status == '1' ? 'selected' : ''}}>Yes</option>
                    <option value="0" {{$course->tab_status == '0'||$course->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($course->tab_content))
                @foreach($course->tab_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="Tab Heading" value="{!! htmlspecialchars_decode($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-2">
                        <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="form-actions">
                                            <button type="submit" class="btn btn-success" style="float: right"> Save / Update 
                                            </button>
                                        </div>
                                    </div>
                                    </form>
                            </div><!-- END Portlet -->
                        </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();
});

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.");
    
        $("#courseForm").validate({
            rules: {
                amount: {
                    required: true,
                    digits: true
                },
                image: {             // Required field
                    fileSize: 2 * 1024 * 1024,    // Max file size 2MB (in bytes)
                    //imageDimensions: [1200, 480]  // Image dimensions 1200 x 480
                }
            },
            messages: {
                amount: {
                    required: "Amount is required only accepts digit",
                    digits: "Only accepts digits"
                },
                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');
                form.submit(); // Perform the default form submission
            }
        });
});
</script>

@endsection

@section('documentJquery')

@endsection