@extends('layouts.sidenav')

@section('title', 'เพิ่มข่าวประชาสัมพันธ์')
<link rel="icon" href="{{ asset('Bg/logoCRG.png') }}" type="image/png">
@section('content')

<!-- Include Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">

<!-- Include CKEditor CDN -->
<script src="https://cdn.ckeditor.com/ckeditor5/36.0.1/classic/ckeditor.js"></script>

<style>
    body {
        padding: 20px;
    }
    .form-container {
        max-width: 800px;
        margin: 0;
    }
</style>

<div class="content" id="mainContent">
    <div class="container form-container">
        <h2 class="mb-4">เพิ่มข่าวประชาสัมพันธ์</h2>
        <form action="#" method="POST" enctype="multipart/form-data">
            @csrf
            <!-- Category -->
            <div class="mb-3">
                <label for="category" class="form-label">Category</label>
                <select class="form-select" id="category" name="category" required>
                    <option value="" disabled selected>เลือก Category</option>
                    <option value="Technology">Technology</option>
                    <option value="Science">Science</option>
                    <option value="Art">Art</option>
                </select>
            </div>

            <!-- Title -->
            <div class="mb-3">
                <label for="title" class="form-label">Title</label>
                <input type="text" class="form-control" id="title" name="title" required>
            </div>

            <!-- Description -->
            <div class="mb-3">
                <label for="description" class="form-label">Description</label>
                <textarea class="form-control" id="description" name="description" rows="3" required></textarea>
            </div>

            <!-- Schedules (Start Date and End Date in the same row) -->
            <div class="mb-3 text-primary">
                <label for="Schedules" class="form-label"><img src="{{ asset('icon/icon-schedule.png') }}" alt="icon" width="20" height="20"> Schedules</label>
            </div>
            <div class="row mb-3">
                <div class="col-md-6">
                    <label for="start_date" class="form-label">Start Date</label>
                    <input type="date" class="form-control" id="start_date" name="start_date" required>
                </div>
                <div class="col-md-6">
                    <label for="end_date" class="form-label">End Date</label>
                    <input type="date" class="form-control" id="end_date" name="end_date" required>
                </div>
            </div>

            <!-- Upload File Image -->
            <div class="mb-3 text-primary">
                <label for="upload_image" class="form-label"><img src="{{ asset('icon/icon-uploadblue.png') }}" alt="icon" width="20" height="20"> Upload Image</label>
            </div>

            <!-- Cover Image -->
            <div class="mb-3">
                <label for="cover_image" class="form-label">Cover Image</label>
                <input type="file" class="form-control" id="cover_image" name="cover_image" accept="image/*">
            </div>

            <!-- Image Files -->
            <div class="mb-3">
                <label for="image_files" class="form-label">Image Files</label>
                <input type="file" class="form-control" id="image_files" name="image_files[]" accept="image/*" multiple>
            </div>

            <!-- Submit and Reset Buttons -->
            <div class="d-flex justify-content-between">
                <button type="reset" class="btn btn-light w-50">Reset</button>
                <button type="submit" class="btn btn-primary w-50">Submit</button>
            </div>
        </form>
    </div>
</div>

<!-- Initialize CKEditor -->
<script>
        ClassicEditor
    .create(document.querySelector('#description'), {
        toolbar: [
            'undo', 'redo',
            '|',
            'bold', 'italic', 'underline', 'strikethrough',
            '|',
            'fontSize', 'fontFamily', 'fontColor', 'highlight',
            '|',
            'link', 'imageUpload', 'insertTable', 'bulletedList', 'numberedList',
            '|',
            'alignment', 'blockQuote', 'code', 'codeBlock',
            '|',
            'subscript', 'superscript',
            '|',
            'justifyLeft', 'justifyCenter', 'justifyRight', 'justifyBlock',
            '|',
            'removeFormat', 'mathType'
        ]
    })
    .then(editor => {
        console.log("CKEditor is initialized!");
    })
    .catch(error => {
        console.error(error);
    });
</script>

@endsection