@php
$breadcrumb = [
['label' => 'Dashboard', 'url' => route('admin.dashboard')],
['label' => 'Blog', 'url' => route('admin.blog')],
['label' => 'Add a blog']
];
@endphp

@extends('admin.layouts.app')
@section('title', 'Add a blog')
@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <form id="addBlogForm" action="">
                    <p class="text-uppercase text-sm">Blog Information</p>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="blg-name" class="form-control-label">Heading <span class="text-danger">*</span></label>
                                <input class="form-control _required _heading" type="text" id="blg-name" placeholder="Enter the name" />
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="blg-desc" class="form-control-label">Description </label>
                                <textarea name="blg-desc" id="blg-desc"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="blg-link" class="form-control-label">Link <span class="text-danger">*</span> </label>
                                <input class="form-control _url _required" type="text" id="blg-link" placeholder="Enter the link" />
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="image" class="form-control-label">Select Image</label>
                                <div id="imagePreview"
                                    title="Click to select image"
                                    style="background-image: url({{ asset('backend/assets/img/image_placeholder.svg') }});">
                                </div>
                                <input class="_image" type="file" id="imageInput" accept="image/*">
                            </div>
                        </div>
                    </div>
                    <div class="d-flex justify-content-end">
                        <button id="submit-form" class="btn btn-primary" type="button">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('backend/assets/tinymce/tinymce.min.js')}}"></script>
<script src="{{ asset('backend/assets/tinymce/jquery.tinymce.min.js')}}"></script>
<script>
    tinymce.init({
        selector: '#blg-desc',
        height: 300,
        plugins: 'link image code table lists preview quickbars visualblocks',
        toolbar: 'undo redo | bold italic underline | fontsizeselect forecolor | h2 h3 h4 h5 | subscript superscript charmap | alignleft aligncenter alignright outdent indent | bullist numlist selectall | link image removeformat code fullscreen preview',
        menubar: false,
        contextmenu: "link image imagetools table spellchecker",
        quickbars_selection_toolbar: 'bold italic underline | quicklink h1 h2 h3',
        toolbar_drawer: 'sliding',
        relative_urls: false,
        convert_urls: true,
        valid_elements: '*[*]', // allows all tags (prevents bold/italic from being stripped)
        setup: function(ed) {
            ed.on('keyup', function() {
                summaryText = ed.getContent();
            });
        },
        automatic_uploads: false,
        media_alt_source: false
    });
</script>
<script>
    $(document).ready(function() {
        function setupImagePreview(previewSelector, inputSelector) {
            const $preview = $(previewSelector);
            const $input = $(inputSelector);

            // Click on preview div triggers file input
            $preview.on('click', function() {
                $input.click();
            });

            // Change event updates preview
            $input.on('change', function() {
                const file = this.files[0];
                if (file && file.type.startsWith('image/')) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        $preview.css('background-image', `url('${e.target.result}')`);
                    };
                    reader.readAsDataURL(file);
                }
            });
        }

        // Setup for multiple inputs
        setupImagePreview('#imagePreview', '#imageInput');
    });
</script>

<script>
    const storeRoute = "{{ route('admin.blog.store') }}";
    const redirectRoute = "{{ route('admin.blog') }}";
</script>
<script src="{{asset('backend/assets/js/admin/skj-validations@v1.js')}}"></script>
<script src="{{asset('backend/assets/js/admin/addBlog.js')}}"></script>
@endpush