@extends('adminlte::page')

@section('title', 'Forum User Topics Add')

@section('content')
    <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">Add Forum User Topics</h3>
                </div>
                <!-- /.box-header -->
                <!-- form start -->
                <form role="form" enctype="multipart/form-data" method="POST"
                      action="{{ route('admin.user-topic.store') }}">
                   
                    @csrf
                    <div class="box-body">
                        <div class="form-group">
                            <label>Name</label>
                            <input type="text" class="form-control"  name="topic" placeholder="Forum Topic" required>
                        </div>

                        <div class="form-group">
                            <label>Slug</label>
                            <input type="text" class="form-control"  name="slug" placeholder="Forum slug" required>
                        </div>

                        <div class="form-group mb-3">
                            <label for="datepicker">Select Date:</label>
                            <input type="text" id="datepicker" name="date" class="form-control" required value="{{ old('date') }}">
                            @error('date')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
						
						<div class="form-group">
                            <label>Description</label>
                            <textarea class="form-control" name="description" id="content" placeholder="Write Here..." rows="7" cols="100"></textarea>
                        </div>

                        <div class="form-group">
                            <label>Tags</label>
                            <input type="text" id="tags" name ="tags"class="form-control" data-role="tagsinput" placeholder="Add tags" >
                        </div>
                        <div class="form-group">
                            <label>Forum Category</label>
                            <select name="cat_id" class="form-control">
                                @foreach($categories as $category)
                                <option value="{{$category->id}}">{{$category->name}}</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}}">{{$user->name}}</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", // H:i = Hours:Minutes in 24-hour format
  time_24hr: true
  });
</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);
            });

            $("input[name=topic]").change(function(){  var slug = $(this).val().toLowerCase() .replace(/[^\w ]+/g, '') .replace(/ +/g, '-');  $("input[name=slug]").val(slug); });

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

<script src="https://cdn.ckeditor.com/4.22.1/standard/ckeditor.js"></script>
<script>
    
    CKEDITOR.replace('content', {
        height: 400,
        extraAllowedContent: 'span(highlight-paste)[style]'
    });


    document.addEventListener('DOMContentLoaded', function () {
        const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

        CKEDITOR.instances.content.on('instanceReady', function () {
            const editor = this;
         
            //var editor = CKEDITOR.instances.content;
            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();

            editor.on('change', () => {
                const html = editor.getData();
                const text = html.replace(/<[^>]*>/g, ' ').replace(/\s+/g, ' ').trim();
            });
            
        });
    });

</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>



@stop