@extends('layouts.simple.master')

@section('title', 'Create News')

@section('css')
    <style>
        /* .avatar-preview>div {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: top;
        } */

        .form-group {
            margin-bottom: 20px; /* Increased spacing */
        }

        .card {
            padding: 20px;
        }

        .ck-editor__editable {
            min-height: 250px; /* Increased height for better usability */
        }

        .remove-image-btn {
        background-color: red;
        color: white;
        border: none;
        padding: 5px;
        cursor: pointer;
        font-size: 12px;
        position: absolute;
        right: 5px;
        top: 5px;
    }
.text-start {
     margin-left: -25px !important;
}

    </style>
@endsection

@section('breadcrumb-title')
    @if (isset($user))
        <h3>Edit Customer</h3>
    @else
        <h3>Create News</h3>
    @endif
@endsection

@section('breadcrumb-items')
    <li class="breadcrumb-item">News</li>
    @if (isset($user))
        <li class="breadcrumb-item active">Edit Customer</li>
    @else
        <li class="breadcrumb-item active">Create News</li>
    @endif
@endsection

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-10">
                <div class="card">
                    @if (session('success'))
                        <div class="alert alert-success">
                            {{ session('success') }}
                        </div>
                    @endif

                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <div class="text-start">
                        <button type="button" class="btn btn-sm" style="border: 1px solid transparent !important;" onclick="history.back()">
                        <i class="icon-arrow-left"></i>
                        </button>
                    </div>

                    <div class="card-body">
                        <form id="AddForm" name="AddForm" action="{{ route('admin.news-info') }}" method="post"
                            enctype="multipart/form-data">

                            <input type="hidden" name="_token" id="_token" value="{{ csrf_token() }}">

                            <div class="form-group">
                                <label class="form-label required">Category</label>
                                <select name="category_id" id="category_id" class="form-control" required>
                                    <option value="">Select Category</option>
                                    @foreach($categories as $category)
                                        <option value="{{ $category->id }}">{{ $category->category_name }}</option>
                                    @endforeach
                                </select>
                                @error('category_id')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label class="form-label required" for="title">News Title</label>
                                <input type="text" class="form-control" name="title" id="title"
                                    placeholder="Enter News Title">
                            </div>

                            <div class="form-group">
                                <label class="form-label required" for="image">News Image</label>
                                <input type="file" class="form-control" name="image" id="image">
                                <small class="text-muted">Only JPG, JPEG, PNG,GIF files allowed. Max size: 2MB.</small>
                            </div>

                            <div class="form-group text-center">
                                <img id="imagePreview" src='' width="100" height="80" class="img-thumbnail d-none">
                            </div>

                            <div class="form-group">
                                <label class="form-label required" for="short_description">News Short Description</label>
                                <textarea class="form-control" rows="6" name="short_description"
                                    id="short_description" placeholder="Enter short description"></textarea>
                            </div>

                            <div class="form-group">
                                <label class="form-label required" for="long_description">News Long Description</label>
                                <textarea id="long_description" name="long_description" class="form-control" rows="10"
                                    placeholder="Enter News Description"></textarea>
                                    <input type="hidden" name="removed_images" id="removed_images" value="[]">

                            </div>

                            <div class="form-group">
                                <label class="form-label required" for="news_date">News Date</label>
                                <input class="form-control" type="date" id="news_date" name="news_date">
                            </div>

                            <div class="form-group text-center">
                                <button type="submit" id="SubmitBtn" class="btn btn-primary w-100">Save News & Insights</button>
                            </div>

                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

<script src="https://cdn.ckeditor.com/ckeditor5/36.0.1/classic/ckeditor.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        ClassicEditor
            .create(document.querySelector('#long_description'), {
                toolbar: ['heading','bold', 'italic', 'bulletedList', 'numberedList', 'imageUpload'],
                heading: {
                options: [
                    { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
                    { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
                    { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
                    { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
                    { model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' }
                ]
                },
                ckfinder: {
                    uploadUrl: "{{ route('admin.ckeditor.upload') . '?_token=' . csrf_token() }}",
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    }
                }
            })
            .then(editor => {
                window.editor = editor;

                // // Load existing content if editing
                let existingContent = `{!! old('long_description', $news->long_description ?? '') !!}`;
                editor.setData(existingContent);
                    
            })
            .catch(error => console.error('CKEditor Error:', error));
    });
</script>

<script>

    // $(document).ready(function () {
    //     $("#image").change(function () {
    //         var input = this;
    //         if (input.files && input.files[0]) {
    //             var reader = new FileReader();
    //             reader.onload = function (e) {
    //                 $('#imagePreview').attr('src', e.target.result).removeClass('d-none');
    //             }
    //             reader.readAsDataURL(input.files[0]);
    //         }
    //     });

     $(document).ready(function () {
        let today = new Date().toISOString().split('T')[0];
        document.getElementById("news_date").value = today;
    });
</script>

<script>
    $(document).ready(function () {

    function validateField(field, condition, message) {
    let errorSpan = field.next(".text-danger");

    if (condition) {
        errorSpan.remove(); // Remove error if valid
    } else {
        if (errorSpan.length === 0) {
            field.after(`<span class="text-danger">${message}</span>`);
        }
    }
}

$("#SubmitBtn").click(function (event) {
    event.preventDefault();
    let isValid = true;
    $(".text-danger").remove();

    let category = $("#category_id");
    if (category.val() === "") {
        validateField(category, false, "Category is required.");
        isValid = false;
    } else {
        validateField(category, true, "");
    }

    let title = $("#title");
    if (title.val().trim().length < 5) {
        validateField(title, false, "News Title must be at least 5 characters.");
        isValid = false;
    } else {
        validateField(title, true, "");
    }

    let image = $("#image");
    let imageVal = image.val();
    let validExtensions = ["jpg", "jpeg", "gif", "png", "webp"];
    let fileExtension = imageVal.split('.').pop().toLowerCase();
    if (imageVal === "" || !validExtensions.includes(fileExtension)) {
        validateField(image, false, "Invalid image format. Only JPG, JPEG, PNG, WEBP and GIF allowed.");
        isValid = false;
    } else {
        validateField(image, true, "");
    }

    let shortDesc = $("#short_description");
    if (shortDesc.val().trim().length < 20) {
        validateField(shortDesc, false, "Short Description must be at least 20 characters.");
        isValid = false;
    } else {
        validateField(shortDesc, true, "");
    }

    let longDesc = window.editor.getData().trim();
    let longDescField = $("#long_description");
    if (longDesc.length < 50) {
        validateField(longDescField, false, "Long Description must be at least 50 characters.");
        isValid = false;
    } else {
        validateField(longDescField, true, "");
    }

    let newsDate = $("#news_date");
    if (newsDate.val() === "") {
        validateField(newsDate, false, "News Date is required.");
        isValid = false;
    } else {
        validateField(newsDate, true, "");
    }

    if (isValid) {
        // Show loading message
        $("#SubmitBtn").prop("disabled", true).html('<i class="fa fa-spinner fa-spin"></i> Submitting...');
        
        setTimeout(() => {
            $("#AddForm").submit();
        }, 1000); // Delay for better UI experience
    }
});

// Remove errors when the user corrects input
$("#category_id, #title, #short_description, #news_date").on("input change", function () {
    validateField($(this), true, "");
});

// $("#image").change(function () {
//     let imageVal = $(this).val();
//     let validExtensions = ["jpg", "jpeg", "gif","png","webp"];
//     let fileExtension = imageVal.split('.').pop().toLowerCase();

//     if (imageVal !== "" && validExtensions.includes(fileExtension)) {
//         validateField($(this), true, "");
//     }
// });

$(document).ready(function () {
    $("#image").change(function () {
        var input = this;
        var file = input.files[0];
        let validExtensions = ["jpg", "jpeg", "gif", "png", "webp"];
        let fileExtension = file.name.split('.').pop().toLowerCase();

        $(".image-error").remove(); // Remove previous error messages

        if (file) {
            if (!validExtensions.includes(fileExtension)) {
                $(this).after('<span class="text-danger image-error">Invalid format. Only JPG, JPEG, PNG, WEBP, and GIF allowed.</span>');
                $(this).val(''); // Reset the input field
                return;
            }

            if (file.size > 2 * 1024 * 1024) { // 2MB limit
                $(this).after('<span class="text-danger image-error">Image size must be less than 2MB.</span>');
                $(this).val(''); // Reset the input field
                return;
            }

            var reader = new FileReader();
            reader.onload = function (e) {
                $('#imagePreview').attr('src', e.target.result).removeClass('d-none');
            };
            reader.readAsDataURL(file);
        }
    });
});


window.editor.model.document.on('change:data', () => {
    let longDesc = window.editor.getData().trim();
    let longDescField = $("#long_description");

    if (longDesc.length >= 50) {
        validateField(longDescField, true, "");
    }
});

});

</script>