@extends('adminlte::page')

@section('title', 'Forum Comment Edit')

@section('content')

<style>
    .select2-container .select2-selection--single {
        height: 40px !important; /* Adjust height */
        padding: 6px !important;
        border: 1px solid #ced4da !important;
    }
    
    /* Ensure the search box is visible */
    .select2-container .select2-search--dropdown .select2-search__field {
        display: block !important;
    }
</style>

    <div class="row">
        <!-- left column -->
        <div class="col-md-12">
            <!-- general form elements -->
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">Edit Comment</h3>
                </div>
                <!-- /.box-header -->
                <!-- form start -->
                <form role="form" enctype="multipart/form-data" method="POST" action="" onsubmit="return checkDate()">
                   
                    @csrf
                    <div class="box-body">
						<div class="form-group">
                            <label>Comment</label>
                            {{--<!--<textarea class="form-control " name="comment" placeholder="Write Here..." rows="7" cols="100"  >{{ old('comment', strip_tags($data->comment) ?? '') }}</textarea>-->--}}

                            <textarea type="hidden" class="form-control"  name="comment" placeholder="Write Here..." id="content" rows="7" cols="100" >{{$data->comment}}</textarea>
                            
                        </div>
                         <div class="form-group mb-3">
                            <label for="datepicker">Select Date:</label>
                            <input type="text" id="datepicker" name="date" class="form-control" value="{{ old('date', $data->date ?? '') }}">
                            @error('date')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        
                        <div class="form-group">
                            <label for="forum_id">Forums</label>
                            <select name="forum_id" id="forum_id" class="select2">
                                <option value="">Search and select a forum...</option>
                                @foreach($forums as $forum)
                                    <option value="{{ $forum->id }}" @if(!empty($question)){{ $forum->id == $question->id ? 'selected' : '' }}@endif>{{ $forum->topic }}</option>
                                @endforeach
                            </select>
                        </div>


                        <div class="form-group">
                            <label>User</label>
                            <select name="user_id" class="form-control">
                                @foreach($users as $user)
                                <option value="{{$user->id}}" @if(isset($user1)) {{$user->id == $user1->id ? 'selected' : ''}} @endif> @if($user->name != ''){{$user->name}} @else {{$user->email}} @endif</option>
                                @endforeach
                            </select>
                        </div>
                        
                    </div>
                    <!-- /.box-body -->
                    <div class="box-footer">
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </div>
                </form>
            </div>
            <!-- /.box -->
        </div>
    </div>
@stop

@section('js')
<script src="https://cdn.ckeditor.com/4.22.1/standard/ckeditor.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>


<script>
  flatpickr("#datepicker", {
    enableTime: true,
    dateFormat: "Y-m-d H:i",
    maxDate: "today"
  });
</script>
<script>
    $(document).ready(function(){
            $('#category_name').keyup(function(e){
                var str = $('#category_name').val();
                str = str.replace(/[^\w\s]|_/g, '') 
                  .replace(/\s+/g, '-') 
                  .toLowerCase(); 
                $('#category_slug').val(str);
                $('#category_slug').attr('placeholder', str);
            });
        });
 
</script>
<script>
    $(document).ready(function() {
        $('#forum_id').select2({
            placeholder: "Search and select a forum",
            allowClear: true,
            width: '100%', // Ensure it fits inside the form
        });
    });
</script>


<script>
    document.addEventListener("DOMContentLoaded", function () {
        $('#tags').tagsinput();
    });


    function checkDate() {
        let val = document.getElementById("datepicker").value;
        if (!val) {
            $("#datepicker").after('<span class="text-danger dt_err">Select date</span>');
            $(".dt_err").fadeOut(1500); 
            return false;
        }
        return true;
    }
</script>
@stop
@section('css')
<style>
    .bootstrap-tagsinput {
        display: block;
        width: 100%;
        padding: 0.5rem;
        font-size: 1rem;
        border: 1px solid #ced4da;
        border-radius: 0.375rem;
        background-color: #fff;
    }
    .bootstrap-tagsinput .tag {
        margin-right: 5px;
        color: #fff;
        background-color: #007bff;
        padding: 0.3em 0.6em;
        border-radius: 0.2rem;
    }
</style>

<script>
        document.addEventListener('DOMContentLoaded', function () {
            CKEDITOR.replace('content', {
                height: 350,
                extraAllowedContent: 'span(highlight-paste)[style]'
            });

            CKEDITOR.instances.content.on('instanceReady', function () {
                const editor = this;
                editor.on('key', function (event) {
                    if ((event.data.keyCode === 1114202) || (event.data.keyCode === 1114201)) {
                        event.cancel();
                        console.log('Prevented: Ctrl+Z or Ctrl+Y');
                    }
                });
                editor.commands.undo && editor.commands.undo.disable();
                editor.commands.redo && editor.commands.redo.disable();
            });
        });
    </script>
@stop