@extends('layouts.index')

@section('page_title')
    News Details
@endsection

@section('locations_active')
    nav-item active
@endsection

@section('news_active')
    nav-item active
@endsection

@section('pg_name')
    News Details List
@endsection

@section('headaddons')
    <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
    <script src="https://cdn.ckeditor.com/ckeditor5/36.0.1/classic/ckeditor.js"></script>

    @endsection



@section('content')
    @if (count($errors) > 0)
        <div class="col-12" id="div__Error">
            @foreach ($errors->all() as $error)
                <div class="zoomIn col-12 alert alert-danger">
                    {{$error}}
                </div>
            @endforeach
            
        </div>
    @endif

    @if (session('success'))
        <div class="col-12 alert alert-success">
            {{ session('success') }}
        </div>
    @endif

    <div class="container">

<!-- resources/views/news/create.blade.php -->

<form action="{{ route('news.create') }}" method="POST" enctype="multipart/form-data">
    @csrf
    <div class="form-group">
        <label for="authorName">Author Name</label>
        <input type="text" class="form-control" name="authorName" id="authorName" required>
    </div>
    <div class="form-group">
        <label for="newsTitle">News Title</label>
        <input type="text" class="form-control" name="newsTitle" id="newsTitle" required>
    </div>
    <div class="form-group">
        <label for="newsContent">News Content</label>
        <textarea class="form-control" name="newsContent" id="newsContent" required></textarea>
    </div>
    <div class="form-group">
        <label for="newsPicture">News Picture (Optional)</label>
        <input type="file" class="form-control" name="newsPicture" id="newsPicture">
    </div>
    <div class="form-group">
    <label for="tagnames">Tags</label>
    <select name="tagnames[]" id="tagnames" class="form-control select2" multiple>
        @foreach ($tags as $tag)
            <option value="{{ $tag->tagname }}">{{ $tag->tagname }}</option>
        @endforeach
    </select>
</div>

    <button type="submit" class="btn btn-primary">Submit</button>
</form>







    </div>
    <script>


$(document).ready(function() {
        $('#tagnames').select2({
            placeholder: "Select tags",
            allowClear: true,
            width: '100%' // Ensures it spans the full width of the container
        });
    });

        ClassicEditor
    .create(document.querySelector('#editor'), {
        toolbar: [
            'undo', 'redo', '|',
            'bold', 'italic', 'underline', 'strikethrough', '|',
            'link', 'imageUpload', '|',
            'fontSize', 'fontColor', 'alignment', '|',
            'bulletedList', 'numberedList', '|',
            'blockQuote', 'codeBlock'
        ],
        height: 600
    })
    .catch(error => {
        console.error(error);
    });





    </script>

@endsection