@extends('layouts.admin')
@section('content')
    <x-admin.page-hero
        title="Create Event"
        displayButton="yes"
        buttonContent="Create Event"
        buttonLink="{{ route('admin.events.index') }}"
    />

    <section class="pageMain">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <form action="{{ route('admin.events.store') }}" method="post" enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <div class="col-12">
                                <label for="">Title *</label>
                                <input type="text" name="title" id="title" value="{{ old('title') }}" required>
                                <x-admin.form-errors fieldName="title"/>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <label for="">Sub title</label>
                                <input type="text" name="sub_title" id="sub_title" value="{{ old('sub_title') }}">
                                <x-admin.form-errors fieldName="sub_title"/>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <label for="">Dates *</label>
                                <input type="text" name="dates" id="dates" value="{{ old('dates') }}" required>
                                <x-admin.form-errors fieldName="dates"/>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <label for="">Description</label>
                                <textarea name="description" id="description" cols="30" rows="10" class="tinyEditor">{{ old('description') }}</textarea>
                                <x-admin.form-errors fieldName="description"/>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <label for="">External Link</label>
                                <input type="url" name="external_link" id="external_link" value="{{ old('external_link') }}">
                                <x-admin.form-errors fieldName="external_link"/>
                            </div>
                        </div>
                        {{--<div class="row">
                            <div class="col-12">
                                <label for="">Image</label>
                                <input type="file" name="image" id="image">
                                <x-admin.form-errors fieldName="image"/>
                            </div>
                        </div>--}}
                        <div class="row">
                            <div class="col-12 d-flex justify-content-end">
                                <button type="submit" class="solidGoldBtn">Save</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
    <script>
        tinymce.init({
            selector: 'textarea.tinyEditor', // Replace this CSS selector to match the placeholder element for TinyMCE
            plugins: 'code table lists image',
            toolbar: 'undo redo | formatselect| bold italic | image | alignleft aligncenter alignright | indent outdent | bullist numlist | code | table',
            images_upload_url: '/upload-image',
            images_upload_handler: function (blobInfo, success, failure) {
                var formData = new FormData();
                formData.append('file', blobInfo.blob(), blobInfo.filename());

                fetch('/upload-image', {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    },
                })
                    .then(function (response) {
                        return response.json();
                    })
                    .then(function (result) {
                        success(result.location);
                    })
                    .catch(function (error) {
                        console.error('Error uploading image:', error);
                        failure('Image upload failed');
                    });
            },
        });
    </script>

@endsection